Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@hpcc-js/wasm

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hpcc-js/wasm

hpcc-js - WASM Libraries

0.2.0
Source
npm

Version published: 5 years ago

Weekly downloads: 8.4K; decreased by-77.79%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

@hpcc-js/wasm

This repository contains a collection of useful c++ libraries compiled to WASM for (re)use in Web Browsers and JavaScript Libraries.

Installation

The simplest way to include this project is via NPM:

npm install --save @hpcc-js/wasm

@hpcc-js/wasm includes the following files in its dist folder:

index.js / index.min.js files: Exposes all the available APIs for all WASM files.
WASM Files:
- graphvizlib.wasm
- ...more to follow...

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 (namespace `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.

# circo(dotSource[, outputFormat]) · Source

Convenience function that performs circo layout, is equivalent to layout(dotSource, outputFormat, "circo");

# dot(dotSource[, outputFormat]) · Source

Convenience function that performs dot layout, is equivalent to layout(dotSource, outputFormat, "dot");

# fdp(dotSource[, outputFormat]) · Source

Convenience function that performs circo layout, is equivalent to layout(dotSource, outputFormat, "fdp");

# neato(dotSource[, outputFormat]) · Source

Convenience function that performs neato layout, is equivalent to layout(dotSource, outputFormat, "neato");

# osage(dotSource[, outputFormat]) · Source

Convenience function that performs osage layout, is equivalent to layout(dotSource, outputFormat, "osage");

# patchwork(dotSource[, outputFormat]) · Source

Convenience function that performs patchwork layout, is equivalent to layout(dotSource, outputFormat, "patchwork");

# twopi(dotSource[, outputFormat]) · Source

Convenience function that performs twopi layout, is equivalent to layout(dotSource, outputFormat, "twopi");

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 19 Sep 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