Add sync API

Author: aduh95

.gitignore

@@ -8,6 +8,7 @@ node_modules/
 debug/
 
 dist/
+/sync
 /wasm
 /worker
 

CHANGELOG.md

@@ -11,15 +11,16 @@
 - The library is able to reset its internal error state, which makes the
   [v2 wiki caveat](https://github.com/mdaines/viz.js/wiki/Caveats#rendering-graphs-with-user-input)
   unnecessary.
-- Rendering from main thread is no longer supported, you must use a worker
-  (webworker or worker_thread).
+- Rendering from main thread is no longer supported on the default async API,
+  you must use a worker (webworker or worker_thread).
 - The JS code is now transpiled from TypeScript, and typings are packed within
   the npm package. You can find the API documentation there!
+- There is a synchronous version available for legacy Node.js support.
 
 ##### Breaking changes and deprecations
 
 - **BREAKING:** Bump required version of Node.js to v12 LTS (might work on v10
-  LTS using CLI flags).
+  LTS using CLI flags or the synchronous API).
 - **BREAKING:** Remove `Viz.prototype.renderSVGElement`. You can use
   `renderString` and `DOMParser` to achieve the same result.
 - **BREAKING:** Remove `Viz.prototype.renderImageElement`. You can use
@@ -52,7 +53,7 @@
 ##### Added features
 
 - Add support for Node.js `worker_threads`.
-- Refactor JS files to Typescript.
+- Refactor JS files to TypeScript.
 - Refactor `viz.c` to C++ to use
   [Emscripten's Embind](https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html).
 - Use `ALLOW_MEMORY_GROW` compiler option to avoid failing on large graphs.
@@ -61,6 +62,7 @@
   - Remove the need of creating new instances when render fails by resetting
     internal error state.
 - Switch to Mocha and Puppeteer for browser testing.
+- Add synchronous API using asm.js
 - Upgrade deps:
   - Upgrade Emscripten to 1.39.12
   - Upgrade Graphviz to 2.44.0

Makefile

@@ -54,6 +54,8 @@ all: \
 		dist \
 			dist/index.cjs dist/index.mjs dist/index.d.ts \
 			dist/render.node.mjs dist/render.browser.js dist/render.wasm \
+			dist/renderSync.cjs \
+	 	sync \
 	 	wasm \
 		worker \
 
@@ -100,16 +102,21 @@ deps: expat-full graphviz-full $(YARN_PATH)
 clean:
 	@echo "\033[1;33mHint: use \033[1;32mmake clobber\033[1;33m to start from a clean slate\033[0m" >&2
 	rm -rf build dist
-	rm -f wasm worker
+	rm -f sync wasm worker
 	rm -f test/deno-files/render.wasm.uint8.js test/deno-files/index.d.ts
 
 .PHONY: clobber
 clobber: | clean
 	rm -rf build build-full $(PREFIX_FULL) $(PREFIX_LITE) $(YARN_DIR) node_modules
 
+sync:
+	echo "module.exports=require('./dist/renderSync.cjs')" > $@
 wasm worker:
 	echo "throw new Error('The bundler you are using does not support package.json#exports.')" > $@
 
+build/renderFunction.js: src/renderFunction.ts | build
+	$(TSC) $(TS_FLAGS) --outDir build -m es6 --target esnext $<
+
 build/worker.js: src/worker.ts | build
 	$(TSC) $(TS_FLAGS) --outDir build -m es6 --target esnext $<
 
@@ -176,6 +183,16 @@ build/render.js: src/viz.cpp | build
 	$(CC) --version | grep $(EMSCRIPTEN_VERSION)
 	$(CC) $(CC_FLAGS) -Oz -o $@ $< $(CC_INCLUDES)
 
+build/asm.mjs: src/viz.cpp | build
+	$(CC) --version | grep $(EMSCRIPTEN_VERSION)
+	$(CC) $(CC_FLAGS) -s WASM=0 -s WASM_ASYNC_COMPILATION=0 --memory-init-file 0 -Oz -o $@ $< $(CC_INCLUDES)
+
+build/renderSync.js: src/renderSync.ts | build
+	$(TSC) $(TS_FLAGS) --outDir build -m es6 --target esnext $<
+
+dist/renderSync.cjs: build/renderSync.js build/asm.mjs build/renderFunction.js
+	$(ROLLUP) -f commonjs $< | $(TERSER) --toplevel > $@
+
 test/deno-files/render.wasm.arraybuffer.js: dist/render.wasm
 	echo "export default Uint16Array.from([" > $@ && \
 	hexdump -v -x $< | awk '$$1=" "' OFS=",0x" >> $@ && \

README.md

@@ -52,6 +52,24 @@ async function dot2svg(dot, options = {}) {
 }
 ```
 
+#### Synchronous API
+
+There is a synchronous version of `renderString` method available:
+
+```js
+const vizRenderStringSync = require("@aduh95/viz.js/sync");
+
+console.log(vizRenderStringSync("digraph{1 -> 2 }"));
+```
+
+Key differences with async API:
+
+- It uses `asm.js` instead of `WebAssembly`, this should come with a performance
+  hit and a bigger bundled file size.
+- It is a CommonJS module, while the rest of the API is written as standard
+  ECMAScript modules. The upside is this syntax is supported on a wider Node.js
+  version array.
+
 ### Browsers
 
 You can either use the `worker` or the `workerURL` on the constructor. Note that

package.json

@@ -11,6 +11,7 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
+    "./sync": "./dist/renderSync.cjs",
     "./wasm": "./dist/render.wasm",
     "./worker": {
       "import": "./dist/render.node.mjs",

src/asm.mjs.d.ts

@@ -0,0 +1,3 @@
+import type { WebAssemblyModule } from "./render";
+
+export default function (): WebAssemblyModule;

src/asm.mjs.js

@@ -0,0 +1 @@
+// Dummy file for tsc

src/renderFunction.ts

@@ -0,0 +1,29 @@
+import type { RenderOptions } from "./types";
+import type { WebAssemblyModule } from "./render";
+
+export default function render(
+  Module: WebAssemblyModule,
+  src: string,
+  options: RenderOptions
+) {
+  for (const { path, data } of options.files) {
+    Module.vizCreateFile(path, data);
+  }
+
+  Module.vizSetY_invert(options.yInvert ? 1 : 0);
+  Module.vizSetNop(options.nop || 0);
+
+  var resultString = Module.vizRenderFromString(
+    src,
+    options.format,
+    options.engine
+  );
+
+  var errorMessageString = Module.vizLastErrorMessage();
+
+  if (errorMessageString !== "") {
+    throw new Error(errorMessageString);
+  }
+
+  return resultString;
+}

src/renderSync.ts

@@ -0,0 +1,20 @@
+import Module from "./asm.mjs";
+import render from "./renderFunction.js";
+
+import type { RenderOptions } from "./types";
+
+let asmModule;
+export default function renderStringSync(src: string, options: RenderOptions) {
+  if (asmModule == null) {
+    asmModule = Module();
+  }
+  return render(asmModule, src, {
+    format: "svg",
+    engine: "dot",
+    files: [],
+    images: [],
+    yInvert: false,
+    nop: 0,
+    ...options,
+  });
+}

src/worker.ts

@@ -1,15 +1,11 @@
-import type {
-  RenderOptions,
-  SerializedError,
-  RenderResponse,
-  RenderRequest,
-} from "./types";
+import type { SerializedError, RenderResponse, RenderRequest } from "./types";
 import type { Worker } from "worker_threads";
 
 import initializeWasm, {
   WebAssemblyModule,
   EMCCModuleOverrides,
 } from "./render";
+import render from "./renderFunction.js";
 
 // Emscripten "magic" globals
 declare var ENVIRONMENT_IS_WORKER: boolean;
@@ -35,7 +31,7 @@ async function getModule() {
 
 if (ENVIRONMENT_IS_WORKER) {
   let resolveModuleOverrides: Function;
-  asyncModuleOverrides = new Promise(done => {
+  asyncModuleOverrides = new Promise((done) => {
     resolveModuleOverrides = done;
   });
   exports = (moduleOverrides: EMCCModuleOverrides) => {
@@ -64,7 +60,7 @@ if (ENVIRONMENT_IS_WORKER) {
         );
       },
     } as Promise<never>;
-    exports = moduleOverrides =>
+    exports = (moduleOverrides) =>
       new Worker(__filename, {
         type: "module",
         workerData: { __filename, moduleOverrides },
@@ -77,15 +73,15 @@ if (ENVIRONMENT_IS_WORKER) {
     parentPort.on("message", (data: RenderResponse) =>
       onmessage({ data } as MessageEvent)
     );
-    postMessage = function() {
+    postMessage = function () {
       "use strict";
       return parentPort.postMessage.apply(parentPort, arguments);
     };
   } else {
     // Worker spawned by another module or script, exports a function that lets
     // user define a custom override objects.
     let resolveModuleOverrides: Function;
-    asyncModuleOverrides = new Promise(done => {
+    asyncModuleOverrides = new Promise((done) => {
       resolveModuleOverrides = done;
     });
     exports = (moduleOverrides: EMCCModuleOverrides) => {
@@ -101,42 +97,15 @@ if (ENVIRONMENT_IS_WORKER) {
   }
 }
 
-function render(
-  Module: WebAssemblyModule,
-  src: string,
-  options: RenderOptions
-) {
-  for (const { path, data } of options.files) {
-    Module.vizCreateFile(path, data);
-  }
-
-  Module.vizSetY_invert(options.yInvert ? 1 : 0);
-  Module.vizSetNop(options.nop || 0);
-
-  var resultString = Module.vizRenderFromString(
-    src,
-    options.format,
-    options.engine
-  );
-
-  var errorMessageString = Module.vizLastErrorMessage();
-
-  if (errorMessageString !== "") {
-    throw new Error(errorMessageString);
-  }
-
-  return resultString;
-}
-
 export function onmessage(event: MessageEvent) {
   const { id, src, options } = event.data as RenderRequest;
 
   return getModule()
-    .then(Module => {
+    .then((Module) => {
       const result = render(Module, src, options);
       postMessage({ id, result });
     })
-    .catch(e => {
+    .catch((e) => {
       const error: SerializedError =
         e instanceof Error
           ? {