Important: WASM files are dynamically loaded at runtime (this is a browser / emscripten requirement), which has a few implications for the consumer:

Pros:

While this package has potentially many large WASM files, only the ones being used will ever be downloaded from your CDN / Web Server.

Cons:

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.
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)

API Reference

Common

Utility functions relating to @hpcc-js/wasm as a package

# wasmFolder([url]) · Source

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).

# __hpcc_wasmFolder · Source

Global variable for setting default WASM location, this is an alternative to wasmFolder

GraphViz

GraphViz WASM library, see graphviz.org for c++ details.

Note: While this package is similar to Viz.js, it employs a completely different build methodology taken from GraphControl.

Note 2: All API functions are namespaced in graphviz.

# layout(dotSource[, outputFormat][, layoutEngine]) · Source

Performs layout for the supplied dotSource, see The DOT Language for specification.

outputFormat supports the following options:

dot
dot_json
json
svg (default)
xdot_json See Output Formats for more information.

layoutEngine supports the following options:

circo
dot (default)
fdp
neato
osage
patchwork
twopi See Layout manual pages for more information.

Quick Example (CDN hosting courtesy of unpkg.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>GraphViz WASM</title>
    <script src="https://unpkg.com/@hpcc-js/wasm/dist/index.min.js"></script>
    <script>
        var hpccWasm = window["@hpcc-js/wasm"];
    </script>
</head>

<body>
    <div id="placeholder"></div>
    <script>
        const dot = `
            digraph G {
                node [shape=rect];

                subgraph cluster_0 {
                    style=filled;
                    color=lightgrey;
                    node [style=filled,color=white];
                    a0 -> a1 -> a2 -> a3;
                    label = "process #1";
                }

                subgraph cluster_1 {
                    node [style=filled];
                    b0 -> b1 -> b2 -> b3;
                    label = "process #2";
                    color=blue
                }

                start -> a0;
                start -> b0;
                a1 -> b3;
                b2 -> a3;
                a3 -> a0;
                a3 -> end;
                b3 -> end;

                start [shape=Mdiamond];
                end [shape=Msquare];
            }
        `;

        hpccWasm.graphviz.layout(dot, "svg", "dot").then(svg => {
            const div = document.getElementById("placeholder");
            div.innerHTML = svg;
        });
    </script>

</body>

</html>

FAQs

What is @hpcc-js/wasm?

Is @hpcc-js/wasm popular?

Is @hpcc-js/wasm well maintained?

Package last updated on 14 Jun 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@hpcc-js/wasm