@hpcc-js/wasm 1.20.1 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -660
- package/bin/{dot-wasm.mjs → dot-wasm.js} +8 -17
- package/bin/dot-wasm.js.map +1 -0
- package/dist/base91.js +2 -0
- package/dist/base91.js.map +1 -0
- package/dist/base91.umd.js +2 -0
- package/dist/base91.umd.js.map +1 -0
- package/dist/expat.js +1 -151
- package/dist/expat.js.map +1 -1
- package/dist/expat.umd.js +2 -0
- package/dist/expat.umd.js.map +1 -0
- package/dist/graphviz.js +1 -206
- package/dist/graphviz.js.map +1 -1
- package/dist/graphviz.umd.js +2 -0
- package/dist/graphviz.umd.js.map +1 -0
- package/dist/index.js +1 -493
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +2 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/zstd.js +1 -175
- package/dist/zstd.js.map +1 -1
- package/dist/zstd.umd.js +2 -0
- package/dist/zstd.umd.js.map +1 -0
- package/package.json +84 -81
- package/types/__bin__/dot-wasm.d.ts +2 -0
- package/types/__bin__/dot-wasm.d.ts.map +1 -0
- package/types/__tests__/graphviz.d.ts +1 -1
- package/types/__tests__/graphviz.d.ts.map +1 -1
- package/types/__tests__/index-browser.d.ts +3 -0
- package/types/__tests__/index-browser.d.ts.map +1 -0
- package/types/__tests__/index-common.d.ts +4 -4
- package/types/__tests__/index-common.d.ts.map +1 -1
- package/types/__tests__/index-node.d.ts +2 -2
- package/types/__tests__/index-node.d.ts.map +1 -1
- package/types/base91.d.ts +37 -2
- package/types/base91.d.ts.map +1 -1
- package/types/expat.d.ts +58 -3
- package/types/expat.d.ts.map +1 -1
- package/types/graphviz.d.ts +145 -28
- package/types/graphviz.d.ts.map +1 -1
- package/types/index.d.ts +12 -1
- package/types/index.d.ts.map +1 -1
- package/types/wasm-library.d.ts +10 -11
- package/types/wasm-library.d.ts.map +1 -1
- package/types/zstd.d.ts +48 -3
- package/types/zstd.d.ts.map +1 -1
- package/bin/dot-wasm.mjs.map +0 -1
- package/bin/sfx-wasm.mjs +0 -52
- package/bin/sfx-wasm.mjs.map +0 -1
- package/dist/base91lib.wasm +0 -0
- package/dist/expat.es6.js +0 -139
- package/dist/expat.es6.js.map +0 -1
- package/dist/expatlib.wasm +0 -0
- package/dist/graphviz.es6.js +0 -194
- package/dist/graphviz.es6.js.map +0 -1
- package/dist/graphvizlib.wasm +0 -0
- package/dist/index.es6.js +0 -474
- package/dist/index.es6.js.map +0 -1
- package/dist/index.min.js +0 -1
- package/dist/index.min.js.map +0 -1
- package/dist/index.node.es6.mjs +0 -483
- package/dist/index.node.es6.mjs.map +0 -1
- package/dist/index.node.js +0 -497
- package/dist/index.node.js.map +0 -1
- package/dist/sfx-graphviz.esm.js +0 -890
- package/dist/sfx-graphviz.esm.js.map +0 -1
- package/dist/sfx-graphviz.js +0 -904
- package/dist/sfx-graphviz.js.map +0 -1
- package/dist/sfx-graphviz.min.js +0 -1
- package/dist/sfx-graphviz.min.js.map +0 -1
- package/dist/zstd.es6.js +0 -166
- package/dist/zstd.es6.js.map +0 -1
- package/dist/zstdlib.wasm +0 -0
- package/types/__bin__/dot-wasm.d.mts +0 -2
- package/types/__bin__/dot-wasm.d.mts.map +0 -1
- package/types/__bin__/sfx-wasm.d.mts +0 -2
- package/types/__bin__/sfx-wasm.d.mts.map +0 -1
- package/types/__tests__/index.d.ts +0 -3
- package/types/__tests__/index.d.ts.map +0 -1
- package/types/fetch-browser.d.ts +0 -2
- package/types/fetch-browser.d.ts.map +0 -1
- package/types/fetch-node.d.ts +0 -3
- package/types/fetch-node.d.ts.map +0 -1
- package/types/index-common.d.ts +0 -6
- package/types/index-common.d.ts.map +0 -1
- package/types/index-node.d.ts +0 -2
- package/types/index-node.d.ts.map +0 -1
- package/types/sfx-graphviz.d.ts +0 -59
- package/types/sfx-graphviz.d.ts.map +0 -1
- package/types/util.d.ts +0 -8
- package/types/util.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,683 +1,56 @@
|
|
|
1
|
-
# @hpcc-js/wasm
|
|
1
|
+
# @hpcc-js/wasm - Version 2
|
|
2
2
|
|
|
3
|
-

|
|
4
4
|
|
|
5
5
|
This repository contains a collection of useful c++ libraries compiled to WASM for (re)use in Node JS, Web Browsers and JavaScript Libraries:
|
|
6
|
-
- [
|
|
6
|
+
- [base91](https://base91.sourceforge.net/) - v0.6.0
|
|
7
7
|
- [expat](https://libexpat.github.io/) - v2.4.9
|
|
8
|
+
- [graphviz](https://www.graphviz.org/) - v7.0.0
|
|
8
9
|
- [zstd](https://github.com/facebook/zstd) - v1.5.2
|
|
9
10
|
- ...more to follow...
|
|
10
11
|
|
|
11
12
|
Built with:
|
|
12
13
|
- [emsdk](https://github.com/emscripten-core/emsdk) - v3.1.24
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
## Contents
|
|
17
|
-
|
|
18
|
-
- [Installation](#installation)
|
|
19
|
-
- [NPM](#npm)
|
|
20
|
-
- [Vanilla HTML](#vanilla-html)
|
|
21
|
-
- [GraphViz](#graphviz)
|
|
22
|
-
- [Online Demos](#online-demos)
|
|
23
|
-
- [Command Line Interface](#command-line-interface)
|
|
24
|
-
- [Hello World](#graphviz-hello-world)
|
|
25
|
-
- [API](#graphviz-api)
|
|
26
|
-
- [Expat](#expat)
|
|
27
|
-
- [Hello World](#expat-hello-world)
|
|
28
|
-
- [API](#expat-api)
|
|
29
|
-
- [Zstandard (zstd)](#zstandard)
|
|
30
|
-
- [Hello World](#zstandard-hello-world)
|
|
31
|
-
- [API](#zstandard-api)
|
|
32
|
-
- [Base91](#base91)
|
|
33
|
-
- [Hello World](#base91-hello-world)
|
|
34
|
-
- [API](#base91-api)
|
|
35
|
-
- [Utilities](#utility)
|
|
36
|
-
- [Building @hpcc-js/wasm](#building-hpcc-js-wasm)
|
|
37
|
-
|
|
38
|
-
---
|
|
39
|
-
|
|
40
|
-
## Installation
|
|
41
|
-
|
|
42
|
-
### NPM
|
|
43
|
-
|
|
44
|
-
The simplest way to include this project is via NPM:
|
|
45
|
-
```
|
|
46
|
-
npm install --save @hpcc-js/wasm
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
The @hpcc-js/wasm package includes the following files in its `dist` folder:
|
|
50
|
-
- `index.js` / `index.min.js`: Browser UMD Package for all APIs.
|
|
51
|
-
- `index.es6.js`: Browser ESM Package for all APIs.
|
|
52
|
-
- `index.node.js`: Node CJS Package for all APIs.
|
|
53
|
-
- `index.node.es6.js`: Node ESM Package for all APIs.
|
|
54
|
-
- `graphviz.js`: Browser UMD Package for graphviz APIs.
|
|
55
|
-
- `graphviz.es6.js`: Browser ESM Package for graphviz APIs.
|
|
56
|
-
- `graphvizlib.wasm`: graphviz wasm file (loaded on demand).
|
|
57
|
-
- `expat.js`: Browser UMD Package for expat API.
|
|
58
|
-
- `expat.es6.js`: Browser ESM Package for expat API.
|
|
59
|
-
- `expatlib.wasm`: expat wasm file (loaded on demand).
|
|
60
|
-
- `expat.js`: Browser UMD Package for zstd API.
|
|
61
|
-
- `zstd.es6.js`: Browser ESM Package for zstd API.
|
|
62
|
-
- `zstdlib.wasm`: zstd wasm file (loaded on demand).
|
|
63
|
-
|
|
64
|
-
**Important**: WASM files are dynamically loaded at runtime (this is a browser / emscripten requirement), which has a few implications for the consumer:
|
|
65
|
-
|
|
66
|
-
**Pros**:
|
|
67
|
-
* While this package has potentially many large WASM files, only the ones being used will ever be downloaded from your CDN / Web Server.
|
|
68
|
-
|
|
69
|
-
**Cons**:
|
|
70
|
-
* Most browsers don't support `fetch` and loading pages via `file://` URN, so for testing / development work you will need to run a test web server.
|
|
71
|
-
* Bundlers (RollupJS / WebPack) will ignore the WASM files, so you will need to manually ensure they are present in your final distribution (typically they are placed in the same folder as the bundled JS)
|
|
72
|
-
|
|
73
|
-
### Vanilla HTML
|
|
74
|
-
|
|
75
|
-
Alternatively the @hpcc-js/wasm package can be imported directly within the html page, using a NPM CDN server like [unpkg](https://www.unpkg.com/), [jsdelivr](https://www.jsdelivr.com/). For modern browsers and `import`:
|
|
76
|
-
|
|
77
|
-
```html
|
|
78
|
-
<script type="module">
|
|
79
|
-
import { graphvizSync } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.es6.js";
|
|
80
|
-
|
|
81
|
-
graphvizSync().then(graphviz => {
|
|
82
|
-
const div = document.getElementById("placeholder2");
|
|
83
|
-
div.innerHTML = graphviz.layout(dot, "svg", "dot");
|
|
84
|
-
});
|
|
85
|
-
</script>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
For legacy environments you can load the UMD packages:
|
|
89
|
-
```html
|
|
90
|
-
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.min.js"></script>
|
|
91
|
-
<script>
|
|
92
|
-
var hpccWasm = window["@hpcc-js/wasm"];
|
|
93
|
-
|
|
94
|
-
hpccWasm.graphvizSync().then(graphviz => {
|
|
95
|
-
var div = document.getElementById("placeholder2");
|
|
96
|
-
div.innerHTML = graphviz.layout(dot, "svg", "dot");
|
|
97
|
-
});
|
|
98
|
-
</script>
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
## GraphViz
|
|
102
|
-
|
|
103
|
-
GraphViz WASM library, see [graphviz.org](https://www.graphviz.org/) for c++ details. While this package is similar to [Viz.js](https://github.com/mdaines/viz.js), it employs a completely different build methodology derived from [GraphControl](https://github.com/hpcc-systems/GraphControl).
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
### Online Demos
|
|
107
|
-
* https://raw.githack.com/hpcc-systems/hpcc-js-wasm/trunk/index.html
|
|
108
|
-
* https://observablehq.com/@gordonsmith/graphviz
|
|
109
|
-
|
|
110
|
-
### Command Line Interface
|
|
111
|
-
|
|
112
|
-
To call `dot-wasm` without installing:
|
|
113
|
-
```
|
|
114
|
-
npx -p @hpcc-js/wasm dot-wasm [options] fileOrDot
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
To install the global command `dot-wasm` via NPM:
|
|
118
|
-
```
|
|
119
|
-
npm install --global @hpcc-js/wasm
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
Usage:
|
|
123
|
-
```
|
|
124
|
-
Usage: dot-wasm [options] fileOrDot
|
|
125
|
-
|
|
126
|
-
Options:
|
|
127
|
-
--version Show version number [boolean]
|
|
128
|
-
-K, --layout Set layout engine (circo | dot | fdp | sfdp | neato | osage | patchwo
|
|
129
|
-
rk | twopi). By default, dot is used.
|
|
130
|
-
-T, --format Set output language to one of the supported formats (svg | dot | json
|
|
131
|
-
| dot_json | xdot_json | plain | plain-ext). By default, svg is prod
|
|
132
|
-
uced.
|
|
133
|
-
-n, --neato-no-op Sets no-op flag in neato.
|
|
134
|
-
"-n 1" assumes neato nodes have already bee
|
|
135
|
-
n positioned and all nodes have a pos attribute giving the positions.
|
|
136
|
-
It then performs an optional adjustment to remove node-node overlap,
|
|
137
|
-
depending on the value of the overlap attribute, computes the edge l
|
|
138
|
-
ayouts, depending on the value of the splines attribute, and emits th
|
|
139
|
-
e graph in the appropriate format.
|
|
140
|
-
"-n 2" Use node positions as speci
|
|
141
|
-
fied, with no adjustment to remove node-node overlaps, and use any ed
|
|
142
|
-
ge layouts already specified by the pos attribute. neato computes an
|
|
143
|
-
edge layout for any edge that does not have a pos attribute. As usual
|
|
144
|
-
, edge layout is guided by the splines attribute.
|
|
145
|
-
-y, --invert-y By default, the coordinate system used in generic output formats, suc
|
|
146
|
-
h as attributed dot, extended dot, plain and plain-ext, is the standa
|
|
147
|
-
rd cartesian system with the origin in the lower left corner, and wit
|
|
148
|
-
h increasing y coordinates as points move from bottom to top. If the
|
|
149
|
-
-y flag is used, the coordinate system is inverted, so that increasin
|
|
150
|
-
g values of y correspond to movement from top to bottom.
|
|
151
|
-
-v Echo GraphViz library version
|
|
152
|
-
-h, --help Show help [boolean]
|
|
153
|
-
|
|
154
|
-
Examples:
|
|
155
|
-
dot-wasm -K neato -T xdot ./input.dot Execute NEATO layout and outputs XDOT format.
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### GraphViz Hello World
|
|
159
|
-
```html
|
|
160
|
-
<!DOCTYPE html>
|
|
161
|
-
<html>
|
|
162
|
-
|
|
163
|
-
<head>
|
|
164
|
-
<meta charset="UTF-8">
|
|
165
|
-
<title>GraphViz WASM</title>
|
|
166
|
-
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.min.js"></script>
|
|
167
|
-
<script>
|
|
168
|
-
var hpccWasm = window["@hpcc-js/wasm"];
|
|
169
|
-
</script>
|
|
170
|
-
</head>
|
|
171
|
-
|
|
172
|
-
<body>
|
|
173
|
-
<div id="placeholder0"></div>
|
|
174
|
-
<script>
|
|
175
|
-
const test = `\
|
|
176
|
-
digraph {
|
|
177
|
-
layout = neato
|
|
178
|
-
splines = true
|
|
179
|
-
edge [len = 2]
|
|
180
|
-
a -> b
|
|
181
|
-
b -> a
|
|
182
|
-
}`;
|
|
183
|
-
hpccWasm.graphviz.layout(test, "svg", "dot").then(svg => {
|
|
184
|
-
const div = document.getElementById("placeholder0");
|
|
185
|
-
div.innerHTML = svg;
|
|
186
|
-
});
|
|
187
|
-
</script>
|
|
188
|
-
<div id="placeholder1"></div>
|
|
189
|
-
<div id="placeholder2"></div>
|
|
190
|
-
<script>
|
|
191
|
-
const dot = `
|
|
192
|
-
digraph G {
|
|
193
|
-
node [shape=rect];
|
|
194
|
-
|
|
195
|
-
subgraph cluster_0 {
|
|
196
|
-
style=filled;
|
|
197
|
-
color=lightgrey;
|
|
198
|
-
node [style=filled,color=white];
|
|
199
|
-
a0 -> a1 -> a2 -> a3;
|
|
200
|
-
label = "Hello";
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
subgraph cluster_1 {
|
|
204
|
-
node [style=filled];
|
|
205
|
-
b0 -> b1 -> b2 -> b3;
|
|
206
|
-
label = "World";
|
|
207
|
-
color=blue
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
start -> a0;
|
|
211
|
-
start -> b0;
|
|
212
|
-
a1 -> b3;
|
|
213
|
-
b2 -> a3;
|
|
214
|
-
a3 -> a0;
|
|
215
|
-
a3 -> end;
|
|
216
|
-
b3 -> end;
|
|
217
|
-
|
|
218
|
-
start [shape=Mdiamond];
|
|
219
|
-
end [shape=Msquare];
|
|
220
|
-
}
|
|
221
|
-
`;
|
|
222
|
-
|
|
223
|
-
// Asynchronous call to layout
|
|
224
|
-
hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
|
|
225
|
-
const div = document.getElementById("placeholder1");
|
|
226
|
-
div.innerHTML = svg;
|
|
227
|
-
});
|
|
228
|
-
</script>
|
|
229
|
-
|
|
230
|
-
<script type="module">
|
|
231
|
-
import { graphvizSync } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.es6.js";
|
|
232
|
-
|
|
233
|
-
graphvizSync().then(graphviz => {
|
|
234
|
-
const div = document.getElementById("placeholder2");
|
|
235
|
-
// Synchronous call to layout
|
|
236
|
-
div.innerHTML = graphviz.layout(dot, "svg", "dot");
|
|
237
|
-
});
|
|
238
|
-
</script>
|
|
239
|
-
|
|
240
|
-
</body>
|
|
241
|
-
|
|
242
|
-
</html>
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
### GraphViz API
|
|
246
|
-
|
|
247
|
-
The _GraphViz_ library comes in **two** flavours
|
|
248
|
-
* An exported `graphviz` namespace, where each API function is **asynchrounous** and returns a `Promise<string>`.
|
|
249
|
-
* A `graphvizSync` **asynchrounous** function which returns a `Promise<GraphvizSync>` which is a mirror instance of `graphviz`, where each API function is **synchrounous** and returns a `string`.
|
|
250
|
-
|
|
251
|
-
<a name="graphvizVersion" href="#graphvizVersion">#</a> **graphvizVersion**() · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
252
|
-
|
|
253
|
-
Returns the Graphviz Version.
|
|
254
|
-
|
|
255
|
-
<a name="layout" href="#layout">#</a> **layout**(_dotSource_[, _outputFormat_][, _layoutEngine_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
256
|
-
|
|
257
|
-
Performs layout for the supplied _dotSource_, see [The DOT Language](https://graphviz.gitlab.io/_pages/doc/info/lang.html) for specification.
|
|
258
|
-
|
|
259
|
-
_outputFormat_ supports the following options:
|
|
260
|
-
* dot
|
|
261
|
-
* dot_json
|
|
262
|
-
* json
|
|
263
|
-
* svg (default)
|
|
264
|
-
* xdot_json
|
|
265
|
-
|
|
266
|
-
See [Output Formats](https://graphviz.gitlab.io/_pages/doc/info/output.html) for more information.
|
|
267
|
-
|
|
268
|
-
_layoutEngine_ supports the following options:
|
|
269
|
-
* circo
|
|
270
|
-
* dot (default)
|
|
271
|
-
* fdp
|
|
272
|
-
* sfdp
|
|
273
|
-
* neato
|
|
274
|
-
* osage
|
|
275
|
-
* patchwork
|
|
276
|
-
* twopi
|
|
277
|
-
|
|
278
|
-
See [Layout manual pages](https://www.graphviz.org/documentation/) for more information.
|
|
279
|
-
|
|
280
|
-
_ext_ optional "extra params":
|
|
281
|
-
|
|
282
|
-
* _images_: An optional `array` of
|
|
283
|
-
```JavaScript
|
|
284
|
-
{
|
|
285
|
-
path: string; // The path for the image.
|
|
286
|
-
width: string; // Width of Image
|
|
287
|
-
height: string; // Height of Image
|
|
288
|
-
}
|
|
289
|
-
```
|
|
290
|
-
* _files_: An optional `array` of
|
|
291
|
-
```JavaScript
|
|
292
|
-
{
|
|
293
|
-
path: string; // The path for the file.
|
|
294
|
-
data: string; // The data for the file.
|
|
295
|
-
}
|
|
296
|
-
```
|
|
297
|
-
* _wasmFolder_: An optional `string` specifying the location of wasm file.
|
|
298
|
-
* _wasmBinary_: An optional "pre-fetched" copy of the wasm binary as returned from `XHR` or `fetch`.
|
|
299
|
-
* _yInvert_: An optional boolean flag to invert the y coordinate in generic output formats (dot, xdot, plain, plain-ext). This is equivalent to specifying -y when invoking Graphviz from the command-line.
|
|
300
|
-
* _nop_: An optional number to specify "No layout" mode for the neato engine. This is equivalent to specifying the -n option when invoking Graphviz from the command-line.
|
|
301
|
-
|
|
302
|
-
For example passing a web hosted Image to GraphViz:
|
|
303
|
-
```JavaScript
|
|
304
|
-
hpccWasm.graphviz.layout('digraph { a[image="https://.../image.png"]; }', "svg", "dot", {
|
|
305
|
-
images: [{
|
|
306
|
-
path: "https://.../image.png",
|
|
307
|
-
width: "272px",
|
|
308
|
-
height: "92px"
|
|
309
|
-
}]
|
|
310
|
-
}).then(svg => {
|
|
311
|
-
document.getElementById("placeholder").innerHTML = svg;
|
|
312
|
-
}).catch(err => console.error(err.message));
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
<a name="circo" href="#circo">#</a> **circo**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
316
|
-
|
|
317
|
-
Convenience function that performs **circo** layout, is equivalent to `layout(dotSource, outputFormat, "circo");`.
|
|
318
|
-
|
|
319
|
-
<a name="dot" href="#dot">#</a> **dot**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
320
|
-
|
|
321
|
-
Convenience function that performs **dot** layout, is equivalent to `layout(dotSource, outputFormat, "dot");`.
|
|
322
|
-
|
|
323
|
-
<a name="fdp" href="#fdp">#</a> **fdp**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
324
|
-
|
|
325
|
-
Convenience function that performs **fdp** layout, is equivalent to `layout(dotSource, outputFormat, "fdp");`.
|
|
326
|
-
|
|
327
|
-
<a name="sfdp" href="#sfdp">#</a> **sfdp**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
328
|
-
|
|
329
|
-
Convenience function that performs **sfdp** layout, is equivalent to `layout(dotSource, outputFormat, "sfdp");`.
|
|
330
|
-
|
|
331
|
-
<a name="neato" href="#neato">#</a> **neato**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
332
|
-
|
|
333
|
-
Convenience function that performs **neato** layout, is equivalent to `layout(dotSource, outputFormat, "neato");`.
|
|
334
|
-
|
|
335
|
-
<a name="osage" href="#osage">#</a> **osage**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
336
|
-
|
|
337
|
-
Convenience function that performs **osage** layout, is equivalent to `layout(dotSource, outputFormat, "osage");`.
|
|
338
|
-
|
|
339
|
-
<a name="patchwork" href="#patchwork">#</a> **patchwork**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
340
|
-
|
|
341
|
-
Convenience function that performs **patchwork** layout, is equivalent to `layout(dotSource, outputFormat, "patchwork");`.
|
|
342
|
-
|
|
343
|
-
<a name="twopi" href="#twopi">#</a> **twopi**(_dotSource_[, _outputFormat_][, _ext_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
344
|
-
|
|
345
|
-
Convenience function that performs **twopi** layout, is equivalent to `layout(dotSource, outputFormat, "twopi");`.
|
|
346
|
-
|
|
347
|
-
<a name="graphvizSync" href="#graphvizSync">#</a> **graphvizSync**([_wasmFolder_], [_wasmBinary_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/graphviz.ts "Source")
|
|
348
|
-
|
|
349
|
-
Returns a `Promise<GraphvizSync>`, once resolved provides a synchronous variant of the above methods. Has an optional `wasmFolder` argument to override the default wasmFolder location and optional `wasmBinary` to short circuit the wasm downloading process.
|
|
350
|
-
|
|
351
|
-
---
|
|
352
|
-
|
|
353
|
-
## Expat
|
|
354
|
-
|
|
355
|
-
Expat WASM library, provides a simplified wrapper around the Expat XML Parser library, see [libexpat.github.io](https://libexpat.github.io/) for c++ details.
|
|
356
|
-
|
|
357
|
-
### Expat Hello World
|
|
358
|
-
```html
|
|
359
|
-
<!DOCTYPE html>
|
|
360
|
-
<html>
|
|
361
|
-
|
|
362
|
-
<head>
|
|
363
|
-
<meta charset="UTF-8">
|
|
364
|
-
<title>GraphViz WASM</title>
|
|
365
|
-
<script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js"></script>
|
|
366
|
-
<script>
|
|
367
|
-
var hpccWasm = window["@hpcc-js/wasm"];
|
|
368
|
-
</script>
|
|
369
|
-
</head>
|
|
15
|
+
## Homepage and Documents
|
|
370
16
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
</root>
|
|
377
|
-
`;
|
|
17
|
+
* [Homepage](https://hpcc-systems.github.io/hpcc-js-wasm/)
|
|
18
|
+
* [Base91](https://hpcc-systems.github.io/hpcc-js-wasm/classes/base91.Base91.html)
|
|
19
|
+
* [Expat](https://hpcc-systems.github.io/hpcc-js-wasm/classes/expat.Expat.html)
|
|
20
|
+
* [Graphviz](https://hpcc-systems.github.io/hpcc-js-wasm/classes/base91.Base91.html)
|
|
21
|
+
* [Zstd](https://hpcc-systems.github.io/hpcc-js-wasm/classes/zstd.Zstd.html)
|
|
378
22
|
|
|
379
|
-
|
|
380
|
-
startElement(tag, attrs) { console.log("start", tag, attrs); },
|
|
381
|
-
endElement(tag) { console.log("end", tag); },
|
|
382
|
-
characterData(content) { console.log("characterData", content); }
|
|
383
|
-
};
|
|
384
|
-
hpccWasm.parse(xml, callback);
|
|
385
|
-
</script>
|
|
23
|
+
## Quick Migration Example
|
|
386
24
|
|
|
387
|
-
|
|
25
|
+
v1.x.x
|
|
26
|
+
```ts
|
|
27
|
+
import { graphviz, wasmFolder } from "@hpcc-js/wasm";
|
|
388
28
|
|
|
389
|
-
|
|
390
|
-
```
|
|
391
|
-
|
|
392
|
-
### Expat API
|
|
393
|
-
|
|
394
|
-
<a name="expatVersion" href="#expatVersion">#</a> **expatVersion**() · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/expat.ts "Source")
|
|
395
|
-
|
|
396
|
-
Returns the Expat Version.
|
|
397
|
-
|
|
398
|
-
<a name="parse" href="#parse">#</a> **parse**(_xml_, _callback_) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/expat.ts "Source")
|
|
399
|
-
|
|
400
|
-
* **_xml_**: XML String.
|
|
401
|
-
* **_callback_**: Callback Object with the following methods:
|
|
402
|
-
* **startElement**(_tag_: string, _attrs_: {[key: string]: string}): void;
|
|
403
|
-
* **endElement**(_tag_: string): void;
|
|
404
|
-
* **characterData**(_content_: string): void;
|
|
405
|
-
|
|
406
|
-
Parses the XML with suitable callbacks.
|
|
407
|
-
|
|
408
|
-
**Note:** _characterData_ may get called several times for a single tag element.
|
|
409
|
-
|
|
410
|
-
---
|
|
411
|
-
|
|
412
|
-
## Zstandard
|
|
413
|
-
_zstd for short_
|
|
414
|
-
|
|
415
|
-
Zstandard WASM library, provides a simplified wrapper around the Zstandard c++ library, see [Zstandard](https://facebook.github.io/zstd/) for more details.
|
|
416
|
-
|
|
417
|
-
### Zstandard Hello World
|
|
418
|
-
|
|
419
|
-
```html
|
|
420
|
-
<!DOCTYPE html>
|
|
421
|
-
<html>
|
|
422
|
-
|
|
423
|
-
<head>
|
|
424
|
-
<meta charset="UTF-8">
|
|
425
|
-
<title>Zstandard WASM</title>
|
|
426
|
-
</head>
|
|
427
|
-
|
|
428
|
-
<body>
|
|
429
|
-
<div id="placeholder"></div>
|
|
430
|
-
<script type="module">
|
|
431
|
-
import { Zstd } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.es6.js";
|
|
432
|
-
|
|
433
|
-
const zstd = await Zstd.load();
|
|
434
|
-
const data = new Uint8Array(Array.from({ length: 100000 }, (_, i) => i % 256));
|
|
435
|
-
const compressed_data = await zstd.compress(data);
|
|
436
|
-
const decompressed_data = await zstd.decompress(compressed_data);
|
|
437
|
-
document.getElementById("placeholder").innerHTML = `\
|
|
438
|
-
<ul>
|
|
439
|
-
<li>Default Compression Level: ${await zstd.defaultCLevel()}</li>
|
|
440
|
-
<li>Decompressed Size (bytes): ${decompressed_data.byteLength}</li>
|
|
441
|
-
<li>Data Size (bytes): ${data.byteLength}</li>
|
|
442
|
-
<li>Compressed Size (bytes): ${compressed_data.byteLength}</li>
|
|
443
|
-
<li>Decompressed Size (bytes): ${decompressed_data.byteLength}</li>
|
|
444
|
-
</ul>
|
|
445
|
-
`;
|
|
446
|
-
</script>
|
|
447
|
-
|
|
448
|
-
</body>
|
|
449
|
-
|
|
450
|
-
</html>
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
### Zstandard API
|
|
454
|
-
|
|
455
|
-
#### Interfaces
|
|
456
|
-
|
|
457
|
-
<a name="Options" href="#ZstandardOptions">#</a> **Options** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
458
|
-
|
|
459
|
-
Options structure for advanced loading.
|
|
460
|
-
|
|
461
|
-
```typescript
|
|
462
|
-
interface Options {
|
|
463
|
-
wasmFolder?: string;
|
|
464
|
-
wasmBinary?: ArrayBuffer;
|
|
465
|
-
}
|
|
466
|
-
```
|
|
467
|
-
|
|
468
|
-
* _wasmFolder_: An optional `string` specifying the location of wasm file.
|
|
469
|
-
* _wasmBinary_: An optional "pre-fetched" copy of the wasm binary as returned from `XHR` or `fetch`.
|
|
470
|
-
|
|
471
|
-
<a name="Zstd" href="#Zstd">#</a> **Zstd** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
472
|
-
|
|
473
|
-
Conceptual interface for TypeScript/JavaScript wrapper API
|
|
474
|
-
|
|
475
|
-
```typescript
|
|
476
|
-
interface Zstd {
|
|
477
|
-
static load(options?: Options): Promise<Zstd>;
|
|
478
|
-
version(): string;
|
|
479
|
-
|
|
480
|
-
compress(data: Uint8Array, compressionLevel: number = this.defaultCLevel()): Uint8Array;
|
|
481
|
-
decompress(array: Uint8Array): Uint8Array;
|
|
482
|
-
defaultCLevel(): number;
|
|
483
|
-
}
|
|
484
|
-
```
|
|
485
|
-
|
|
486
|
-
<a name="zstdLoad" href="#zstdLoad">#</a> **Zstd.load**(_options_?: **Options**): **Promise\<Zstd\>** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
487
|
-
|
|
488
|
-
Loads and initializes the Zstandard wasm library, returns a Promise to `Zstd`:
|
|
489
|
-
```typescript
|
|
490
|
-
const zstd = await Zstd.load();
|
|
491
|
-
...dostuff...
|
|
492
|
-
```
|
|
493
|
-
or
|
|
494
|
-
```typescript
|
|
495
|
-
Zstd.load().then(zstd => {...dostuff...});
|
|
496
|
-
```
|
|
497
|
-
|
|
498
|
-
<a name="zstdVersion" href="#zstdVersion">#</a> **zstd.version**(): **string** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
499
|
-
|
|
500
|
-
* **_returns_**: The Zstandard library Version.
|
|
501
|
-
|
|
502
|
-
<a name="zstdCompress" href="#zstdCompress">#</a> **zstd.compress**(_data_: **Uint8Array**, _compressionLevel_?: **number**): **Uint8Array** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
503
|
-
|
|
504
|
-
* **_data_**: Raw data to compress.
|
|
505
|
-
* **_compressionLevel_**: Compression v Speed tradeoff, when omitted it will default to `zstd.defaultCLevel()` which is currently 3.
|
|
506
|
-
* **_returns_**: Compressed data.
|
|
507
|
-
|
|
508
|
-
Compresses raw data.
|
|
509
|
-
|
|
510
|
-
A note on compressionLevel: The library supports regular compression levels from 1 up 22. Levels >= 20, should be used with caution, as they require more memory. The library also offers negative compression levels, which extend the range of speed vs. ratio preferences. The lower the level, the faster the speed (at the cost of compression).
|
|
511
|
-
|
|
512
|
-
<a name="zstdDefaultCLevel" href="#zstdDefaultCLevel">#</a> **zstd.defaultCLevel**(): **number** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/zstd.ts "Source")
|
|
513
|
-
|
|
514
|
-
* **_returns_**: Default compression level (see above).
|
|
515
|
-
|
|
516
|
-
---
|
|
517
|
-
|
|
518
|
-
## Base91
|
|
519
|
-
_Similar to Base 64, but uses more characters resulting in smaller strings._
|
|
29
|
+
wasmFolder("https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist");
|
|
520
30
|
|
|
521
|
-
|
|
31
|
+
const dot = "digraph G { Hello -> World }";
|
|
522
32
|
|
|
523
|
-
|
|
33
|
+
graphviz.dot(dot).then(svg => {
|
|
34
|
+
const div = document.getElementById("placeholder");
|
|
35
|
+
div.innerHTML = svg;
|
|
36
|
+
});
|
|
524
37
|
|
|
525
|
-
|
|
526
|
-
<!DOCTYPE html>
|
|
527
|
-
<html>
|
|
528
|
-
|
|
529
|
-
<head>
|
|
530
|
-
<meta charset="UTF-8">
|
|
531
|
-
<title>Base91 WASM</title>
|
|
532
|
-
</head>
|
|
533
|
-
|
|
534
|
-
<body>
|
|
535
|
-
<div id="placeholder"></div>
|
|
536
|
-
<script type="module">
|
|
537
|
-
import { Base91 } from "./dist/index.es6.js";
|
|
538
|
-
//import { Base91 } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.es6.js";
|
|
539
|
-
|
|
540
|
-
const base91 = await Base91.load();
|
|
541
|
-
const data = new Uint8Array(Array.from({ length: 100 }, (_, i) => Math.random() * 100));
|
|
542
|
-
const encoded_data = await base91.encode(data);
|
|
543
|
-
const decoded_data = await base91.decode(encoded_data);
|
|
544
|
-
document.getElementById("placeholder").innerHTML = `\
|
|
545
|
-
<ul>
|
|
546
|
-
<li>Data Size (bytes): ${data.byteLength}</li>
|
|
547
|
-
<li>Endoded Size (bytes): ${encoded_data.length}</li>
|
|
548
|
-
<li>Decoded Size (bytes): ${decoded_data.byteLength}</li>
|
|
549
|
-
</ul>
|
|
550
|
-
<h4>Data: </h4>
|
|
551
|
-
<code>
|
|
552
|
-
${data}
|
|
553
|
-
</code>
|
|
554
|
-
<h4>Base 91: </h4>
|
|
555
|
-
<code id="base91">
|
|
556
|
-
</code>
|
|
557
|
-
<h4>Decoded: </h4>
|
|
558
|
-
<code>
|
|
559
|
-
${decoded_data}
|
|
560
|
-
</code>
|
|
561
|
-
`;
|
|
562
|
-
document.getElementById("base91").innerText = encoded_data;
|
|
563
|
-
</script>
|
|
564
|
-
|
|
565
|
-
</body>
|
|
566
|
-
|
|
567
|
-
</html>
|
|
38
|
+
graphvizVersion.then(version => console.log(version));
|
|
568
39
|
```
|
|
569
40
|
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
41
|
+
v2.x.x
|
|
42
|
+
```ts
|
|
43
|
+
import { Graphviz } from "@hpcc-js/wasm/graphviz";
|
|
573
44
|
|
|
574
|
-
|
|
45
|
+
const graphviz = await Graphviz.load();
|
|
575
46
|
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
interface Options {
|
|
580
|
-
wasmFolder?: string;
|
|
581
|
-
wasmBinary?: ArrayBuffer;
|
|
582
|
-
}
|
|
47
|
+
const dot = "digraph G { Hello -> World }";
|
|
48
|
+
const svg = graphviz.dot(dot);
|
|
49
|
+
console.log(graphviz.version());
|
|
583
50
|
```
|
|
584
51
|
|
|
585
|
-
|
|
586
|
-
*
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
Conceptual interface for TypeScript/JavaScript wrapper API
|
|
591
|
-
|
|
592
|
-
```typescript
|
|
593
|
-
interface Base91 {
|
|
594
|
-
static load(options?: Options): Promise<Base91>;
|
|
595
|
-
version(): string;
|
|
596
|
-
|
|
597
|
-
encode(data: Uint8Array): string;
|
|
598
|
-
decode(array: string): Uint8Array;
|
|
599
|
-
}
|
|
600
|
-
```
|
|
601
|
-
|
|
602
|
-
<a name="base91Load" href="#base91Load">#</a> **Base91.load**(_options_?: **Options**): **Promise\<Base91\>** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/base91.ts "Source")
|
|
603
|
-
|
|
604
|
-
Loads and initializes the Base91 wasm library, returns a Promise to `Base91`:
|
|
605
|
-
```typescript
|
|
606
|
-
const base91 = await Base91.load();
|
|
607
|
-
...dostuff...
|
|
608
|
-
```
|
|
609
|
-
or
|
|
610
|
-
```typescript
|
|
611
|
-
Base91.load().then(base91 => {...dostuff...});
|
|
612
|
-
```
|
|
613
|
-
|
|
614
|
-
<a name="base91Version" href="#base91Version">#</a> **base91.version**(): **string** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/base91.ts "Source")
|
|
615
|
-
|
|
616
|
-
* **_returns_**: The Base91 library Version.
|
|
617
|
-
|
|
618
|
-
<a name="base91Encode" href="#base91Encode">#</a> **base91.encode**(_data_: **Uint8Array**): **string** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/base91.ts "Source")
|
|
619
|
-
|
|
620
|
-
* **_data_**: Raw data to encode.
|
|
621
|
-
* **_returns_**: Encoded string.
|
|
622
|
-
|
|
623
|
-
Encodes the raw data.
|
|
624
|
-
|
|
625
|
-
<a name="base91Decode" href="#base91Decode">#</a> **base91.decode**(_str_: **string**): **Uint8Array** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/base91.ts "Source")
|
|
626
|
-
|
|
627
|
-
* **_str_**: String to decode.
|
|
628
|
-
* **_returns_**: Decoded data.
|
|
629
|
-
|
|
630
|
-
Decodes the raw data.
|
|
631
|
-
|
|
632
|
-
---
|
|
633
|
-
|
|
634
|
-
## Utility
|
|
635
|
-
|
|
636
|
-
Utility functions unrelated to any specific wasm APIs
|
|
637
|
-
|
|
638
|
-
<a name="wasmFolder" href="#wasmFolder">#</a> **wasmFolder**([_url_]) · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/util.ts "Source")
|
|
639
|
-
|
|
640
|
-
If _url_ is specified, sets the default location for all WASM files. If _url_ is not specified it returns the current _url_ (defaults to `undefined`).
|
|
641
|
-
|
|
642
|
-
<a name="__hpcc_wasmFolder" href="#__hpcc_wasmFolder">#</a> **__hpcc_wasmFolder** · [<>](https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/src/util.ts "Source")
|
|
643
|
-
|
|
644
|
-
Global variable for setting default WASM location, this is an alternative to [wasmFolder](#wasmFolder)
|
|
645
|
-
|
|
646
|
-
---
|
|
647
|
-
|
|
648
|
-
## Building @hpcc-js/wasm
|
|
649
|
-
_Building is supported on both Linux (tested with Ubuntu 20.04) and Windows with WSL enabled (Ubuntu-20.04). Building in other environments should work, but may be missing certain prerequisites._
|
|
650
|
-
|
|
651
|
-
These are then known required OS dependencies (see [./docker/ubuntu-dev.dockerfile](./docker/ubuntu-dev.dockerfile) for test script):
|
|
652
|
-
```
|
|
653
|
-
sudo apt-get install -y curl
|
|
654
|
-
sudo curl --silent --location https://deb.nodesource.com/setup_16.x | sudo bash -
|
|
655
|
-
sudo apt-get install -y nodejs
|
|
656
|
-
sudo apt-get install -y build-essential
|
|
657
|
-
|
|
658
|
-
sudo apt-get install -y git cmake wget
|
|
659
|
-
sudo apt-get install -y gcc-multilib g++-multilib pkg-config autoconf bison libtool flex zlib1g-dev
|
|
660
|
-
sudo apt-get install -y python3 python3-pip
|
|
661
|
-
```
|
|
662
|
-
|
|
663
|
-
### Build steps:
|
|
664
|
-
```
|
|
665
|
-
git clone https://github.com/hpcc-systems/hpcc-js-wasm.git
|
|
666
|
-
cd hpcc-js-wasm
|
|
667
|
-
npm ci
|
|
668
|
-
npm run install-build-deps
|
|
669
|
-
npm run build
|
|
670
|
-
```
|
|
671
|
-
|
|
672
|
-
**Note**: The `install-build-deps` downloads the following dependencies:
|
|
673
|
-
* [Emscripten SDK](https://emscripten.org/)
|
|
674
|
-
* [GraphViz](https://www.graphviz.org/)
|
|
675
|
-
* [Expat](https://libexpat.github.io/)
|
|
676
|
-
|
|
677
|
-
This has been made a manual step as the downloads are quite large and the auto-configuration can be time consuming.
|
|
678
|
-
|
|
679
|
-
### Clean dependencies:
|
|
680
|
-
_It is worth noting that `npm run clean` will only clean any artifacts associated with the build, but won't clean clean any of the third party dependencies. To remove those for a "full clean", run:_
|
|
681
|
-
```
|
|
682
|
-
npm run uninstall-build-deps
|
|
683
|
-
```
|
|
52
|
+
Notes:
|
|
53
|
+
* Import must specify which wasm library your using
|
|
54
|
+
* wasmFolder is no longer needed
|
|
55
|
+
* All wasm libraries have the same asynchronous load pattern
|
|
56
|
+
- `const instance = await Wasm.load();`
|