Skip to content

Commit c370257

Browse files
GordonSmithGordonSmith
committed
fix: Add index.js for type resolution
Signed-off-by: Gordon Smith <[email protected]>
1 parent 5712eb7 commit c370257

File tree

12 files changed

+226
-183
lines changed

12 files changed

+226
-183
lines changed

‎.vscode/launch.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@
1212
"runtimeArgs": [],
1313
"webRoot": "${workspaceRoot}"
1414
},
15+
{
16+
"name": "file:///index.html",
17+
"type": "msedge",
18+
"request": "launch",
19+
"url": "./index.html",
20+
"runtimeArgs": [],
21+
"webRoot": "${workspaceRoot}"
22+
},
1523
{
1624
"name": "hw-graphviz.html",
1725
"type": "msedge",

‎index-worker.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/sfx-graphviz.esm.js";
1+
//import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/graphviz.js";
2+
import { Graphviz } from "./dist/index.js";
23

34
onmessage = async e => {
45
const graphviz = await Graphviz.load();

‎index.html

Lines changed: 83 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -5,146 +5,110 @@
55
<meta charset="UTF-8">
66
<title>GraphViz WASM</title>
77

8-
<script type="module" worker>
9-
10-
</script>
11-
12-
<script>
13-
var wasmBinaryFile;
14-
switch (window.location.hostnamez) {
15-
case "localhost":
16-
document.write('<script src="./dist/index.js"><' + '/script>');
17-
break;
18-
default:
19-
document.write('<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.min.js"><' + '/script>');
20-
break;
21-
}
22-
</script>
23-
24-
<script>
25-
var hpccWasm = window["@hpcc-js/wasm"];
26-
</script>
27-
</head>
28-
29-
<body>
30-
<h3>Async DOT</h3>
31-
<div id="placeholder"></div>
32-
<hr>
33-
<h3>Two</h3>
34-
<div id="placeholder2"></div>
35-
<div id="placeholder2b"></div>
36-
<hr>
37-
<h3>Sync DOT</h3>
38-
<div id="placeholder3"></div>
39-
<hr>
40-
<h3>ESM wasmBinary</h3>
41-
<div id="placeholder4"></div>
42-
<hr>
43-
<h3>Web Worker</h3>
44-
<div id="placeholder5"></div>
45-
<h3>Load on demand</h3>
46-
<div id="placeholder6"></div>
47-
<hr>
488
<script>
499
const dot = `
50-
digraph G {
51-
node [shape=rect];
52-
53-
subgraph cluster_0 {
54-
style=filled;
55-
color=lightgrey;
56-
node [style=filled,color=white];
57-
a0 -> a1 -> a2 -> a3;
58-
label = "process #1";
59-
}
60-
61-
subgraph cluster_1 {
62-
node [style=filled];
63-
b0 -> b1 -> b2 -> b3;
64-
label = "process #2";
65-
color=blue
66-
}
67-
68-
start -> a0;
69-
start -> b0;
70-
a1 -> b3;
71-
b2 -> a3;
72-
a3 -> a0;
73-
a3 -> end;
74-
b3 -> end;
75-
76-
start [shape=Mdiamond,label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" >
77-
<TR>
78-
<TD COLSPAN="3" BGCOLOR="azure3" >
79-
<b><FONT FACE="Times-Roman" POINT-SIZE="12.0" >one obj</FONT></b>
80-
</TD>
81-
</TR>
82-
<TR>
83-
<TD PORT="in1" BGCOLOR="white">in1<br/>:In1</TD>
84-
<TD ROWSPAN="2" BGCOLOR="azure3"> some text </TD>
85-
<TD PORT="out1" BGCOLOR="0.5 0.5 0.5">out1<br/>:Out1</TD>
86-
</TR>
87-
<TR>
88-
<TD PORT="in2" HREF="somepage.html" BGCOLOR="0.45 0.5 0.75">in2<br/>:In2</TD>
89-
<TD PORT="out2" HREF="somepage.html" BGCOLOR="0.8 0.5 1">out2<br/>:Out2</TD>
90-
</TR>
91-
</TABLE>>];
92-
end [shape=Msquare];
10+
digraph G {
11+
node [shape=rect];
12+
13+
subgraph cluster_0 {
14+
style=filled;
15+
color=lightgrey;
16+
node [style=filled,color=white];
17+
a0 -> a1 -> a2 -> a3;
18+
label = "process #1";
9319
}
94-
`;
95-
96-
hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
97-
const div = document.getElementById("placeholder");
98-
div.innerHTML = svg;
99-
}).catch(err => console.error(err.message));
10020
101-
hpccWasm.graphviz.layout('digraph { a[image="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"]; }', "svg", "dot", { images: [{ path: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", width: "272px", height: "92px" }] }).then(svg => {
102-
const div = document.getElementById("placeholder2");
103-
div.innerHTML = svg;
104-
}).catch(err => console.error(err.message));
105-
106-
hpccWasm.graphviz.layout('digraph { a[image="./resources/hpcc-logo.png"]; }', "svg", "dot", { images: [{ path: "./resources/hpcc-logo.png", width: "272px", height: "92px" }] }).then(svg => {
107-
const div = document.getElementById("placeholder2b");
108-
div.innerHTML = svg;
109-
}).catch(err => console.error(err.message));
110-
111-
hpccWasm.graphvizSync().then(graphviz => {
112-
const div = document.getElementById("placeholder3");
113-
try {
114-
div.innerHTML = graphviz.layout(dot, "svg", "dot");
115-
} catch (e) {
116-
div.innerHTML = e.message;
21+
subgraph cluster_1 {
22+
node [style=filled];
23+
b0 -> b1 -> b2 -> b3;
24+
label = "process #2";
25+
color=blue
11726
}
118-
});
11927
28+
start -> a0;
29+
start -> b0;
30+
a1 -> b3;
31+
b2 -> a3;
32+
a3 -> a0;
33+
a3 -> end;
34+
b3 -> end;
35+
36+
start [shape=Mdiamond,label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" >
37+
<TR>
38+
<TD COLSPAN="3" BGCOLOR="azure3" >
39+
<b><FONT FACE="Times-Roman" POINT-SIZE="12.0" >one obj</FONT></b>
40+
</TD>
41+
</TR>
42+
<TR>
43+
<TD PORT="in1" BGCOLOR="white">in1<br/>:In1</TD>
44+
<TD ROWSPAN="2" BGCOLOR="azure3"> some text </TD>
45+
<TD PORT="out1" BGCOLOR="0.5 0.5 0.5">out1<br/>:Out1</TD>
46+
</TR>
47+
<TR>
48+
<TD PORT="in2" HREF="somepage.html" BGCOLOR="0.45 0.5 0.75">in2<br/>:In2</TD>
49+
<TD PORT="out2" HREF="somepage.html" BGCOLOR="0.8 0.5 1">out2<br/>:Out2</TD>
50+
</TR>
51+
</TABLE>>];
52+
end [shape=Msquare];
53+
}
54+
`;
12055
</script>
56+
</head>
12157

58+
<body>
59+
<h3>ESM</h3>
60+
<div id="ESM"></div>
12261
<script type="module">
123-
// import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/sfx-graphviz.esm.js";
124-
import { Graphviz } from "./dist/graphviz.js";
62+
// import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
63+
import { Graphviz } from "./dist/index.js";
12564
if (Graphviz) {
12665
const graphviz = await Graphviz.load();
12766
const svg = graphviz.layout(dot, "svg", "dot");
128-
const div = document.getElementById("placeholder4");
129-
div.innerHTML = svg;
67+
document.getElementById("ESM").innerHTML = svg;
13068
}
13169
</script>
132-
70+
<hr>
71+
<h3>UMD</h3>
72+
<div id="UMD"></div>
73+
<script src="./dist/index.umd.js"></script>
74+
<script>
75+
var hpccWasm = window["@hpcc-js/wasm"];
76+
hpccWasm.Graphviz.load().then(graphviz => {
77+
var svg = graphviz.layout(dot, "svg", "dot");
78+
document.getElementById("UMD").innerHTML = svg;
79+
}).catch(e => console.log(e.message));
80+
</script>
81+
<hr>
82+
<h3>Web Worker</h3>
83+
<div id="worker"></div>
13384
<script type="module">
134-
const div = document.getElementById("placeholder5");
13585
const myWorker = new Worker("./index-worker.js", { type: 'module' });
13686
myWorker.onmessage = (e) => {
137-
div.innerHTML = e.data;
87+
document.getElementById("worker").innerHTML = e.data;
13888
}
13989
myWorker.postMessage(dot);
14090
</script>
141-
91+
<hr>
92+
<h3>Image</h3>
93+
<div id="image"></div>
14294
<script type="module">
143-
const div6 = document.getElementById("placeholder6");
144-
const { Graphviz } = await import("https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/sfx-graphviz.esm.js");
145-
const graphviz = await Graphviz.load();
146-
const svg = graphviz.layout(dot, "svg", "dot");
147-
div6.innerHTML = svg;
95+
import { Graphviz } from "./dist/index.js";
96+
if (Graphviz) {
97+
const graphviz = await Graphviz.load();
98+
const svg = graphviz.neato('digraph { a[image="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"]; }', "svg", { images: [{ path: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", width: "272px", height: "92px" }] });
99+
document.getElementById("image").innerHTML = svg;
100+
}
101+
</script>
102+
<hr>
103+
<h3>Image 2</h3>
104+
<div id="image2"></div>
105+
<script type="module">
106+
import { Graphviz } from "./dist/index.js";
107+
if (Graphviz) {
108+
const graphviz = await Graphviz.load();
109+
const svg = graphviz.neato('digraph { a[image="./resources/hpcc-logo.png"]; }', "svg", { images: [{ path: "./resources/hpcc-logo.png", width: "272px", height: "92px" }] });
110+
document.getElementById("image2").innerHTML = svg;
111+
}
148112
</script>
149113
</body>
150114

‎package.json

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
],
1919
"type": "module",
2020
"exports": {
21+
".": {
22+
"types": "./types/index.d.ts",
23+
"import": "./dist/index.js",
24+
"default": "./dist/index.umd.js"
25+
},
2126
"./base91": {
2227
"types": "./types/base91.d.ts",
2328
"import": "./dist/base91.js",
@@ -39,11 +44,11 @@
3944
"default": "./dist/zstd.umd.js"
4045
}
4146
},
42-
"main": "./dist/graphviz.umd.js",
43-
"module": "./dist/graphviz.js",
44-
"browser": "./dist/graphviz.umd.js",
45-
"unpkg": "./dist/index.umd.min.js",
46-
"jsdelivr": "./dist/index.umd.min.js",
47+
"main": "./dist/index.umd.js",
48+
"module": "./dist/index.js",
49+
"browser": "./dist/index.umd.js",
50+
"unpkg": "./dist/index.umd.js",
51+
"jsdelivr": "./dist/index.umd.js",
4752
"types": "./types/index.d.ts",
4853
"bin": {
4954
"dot-wasm": "./bin/dot-wasm.js"

‎rollup.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,32 @@ const pkg = require("./package.json");
99

1010
let debug = false;
1111

12+
const browserTplIndex = (input, umdOutput, esOutput) => ({
13+
input: input,
14+
external: id => {
15+
console.log(id);
16+
return id.indexOf("./") >= 0;
17+
},
18+
output: [{
19+
file: umdOutput + ".js",
20+
format: "umd",
21+
sourcemap: true,
22+
name: pkg.name
23+
}, {
24+
file: esOutput + ".js",
25+
format: "es",
26+
sourcemap: true
27+
}],
28+
plugins: [
29+
nodeResolve({
30+
preferBuiltins: true
31+
}),
32+
commonjs({}),
33+
sourcemaps(),
34+
debug ? undefined : terser({})
35+
]
36+
});
37+
1238
const browserTpl = (input, umdOutput, esOutput) => ({
1339
input: input,
1440
output: [{
@@ -78,6 +104,8 @@ const binTpl = (input, esOutput) => ({
78104
export default args => {
79105
debug = args.configDebug ?? false;
80106
return [
107+
browserTplIndex("lib-esm/index", "dist/index.umd", "dist/index"),
108+
81109
browserTpl("lib-esm/base91", "dist/base91.umd", "dist/base91"),
82110
browserTpl("lib-esm/graphviz", "dist/graphviz.umd", "dist/graphviz"),
83111
browserTpl("lib-esm/expat", "dist/expat.umd", "dist/expat"),

0 commit comments

Comments
 (0)