@strategicprojects/rpic 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# rpic
+
+JS/TS bindings for [rpic](https://github.com/milkway/rpic-lang) — the pic
+graphics language compiled to **SVG** with an **animation manifest**, via
+WebAssembly. Works in the browser and in Node, ships TypeScript types.
+
+```js
+import * as rpic from '@strategicprojects/rpic';
+
+await rpic.ready();                       // browser: wasm fetched automatically
+
+const { svg, animations } = rpic.compile('box "A"; arrow; box "B"');
+document.querySelector('#stage').innerHTML = svg;
+
+// animate with GSAP:
+import { gsap } from 'gsap';
+rpic.animate(document.querySelector('#stage'), animations, gsap);
+
+// circuit library:
+rpic.renderSvg('A:(0,0); B:(2,0)\nresistor(A,B)', { circuits: true });
+```
+
+### Node
+
+```js
+import { readFileSync } from 'node:fs';
+import * as rpic from '@strategicprojects/rpic';
+await rpic.ready(readFileSync(new URL('./node_modules/rpic/pkg/rpic_wasm_bg.wasm', import.meta.url)));
+console.log(rpic.renderSvg('box "hi"'));
+```
+
+## API
+
+| Function | Description |
+|----------|-------------|
+| `ready(wasmInput?)` | Initialize WASM. Browser: no arg. Node: pass `.wasm` bytes/URL. |
+| `compile(src, {circuits?})` | → `{ svg, animations }` (throws on a pic error). |
+| `renderSvg(src, {circuits?})` | → SVG string. |
+| `animate(root, animations, gsap)` | Build/play a GSAP timeline (`draw`/`fade`/`pop`). Browser only. |
+
+PNG/PDF are available via the CLI, the Python package, or the R package (the
+WASM core renders SVG; rasterization isn't bundled here).
+
+## Rebuild
+
+```sh
+wasm-pack build crates/wasm --target web --out-dir bindings/js/pkg
+```

package/index.d.ts

@@ -0,0 +1,37 @@
+// Type definitions for rpic
+
+export interface Anim {
+  id: string;
+  effect: string;
+  /** absolute start time in seconds */
+  start: number;
+  duration: number;
+}
+
+export interface Bundle {
+  svg: string;
+  animations: Anim[];
+}
+
+export interface CompileOptions {
+  /** prepend the native circuit-element library (resistor, and_gate, …) */
+  circuits?: boolean;
+}
+
+/**
+ * Initialize the WebAssembly module. In the browser call with no argument; in
+ * Node pass the `.wasm` bytes or a file URL.
+ */
+export function ready(wasmInput?: BufferSource | URL | string): Promise<void>;
+
+/** Compile pic source into `{ svg, animations }`. Throws on a pic error. */
+export function compile(src: string, opts?: CompileOptions): Bundle;
+
+/** Compile and return only the SVG string. */
+export function renderSvg(src: string, opts?: CompileOptions): string;
+
+/**
+ * Build and play a GSAP timeline from an animation manifest on the SVG inside
+ * `root`. Browser-only.
+ */
+export function animate(root: Element, animations: Anim[], gsap: unknown): unknown;

package/index.js

@@ -0,0 +1,113 @@
+// rpic — JS/TS bindings for the rpic pic graphics language (WASM).
+//
+// Browser:  await ready();                         // wasm fetched automatically
+// Node:     await ready(fs.readFileSync(url));      // pass the .wasm bytes/URL
+import initWasm, {
+  compile as wasmCompile,
+  compile_circuits as wasmCompileCircuits,
+} from './pkg/rpic_wasm.js';
+
+let initPromise = null;
+let initialized = false;
+
+/**
+ * Initialize the WebAssembly module (idempotent; concurrent calls share one
+ * init). In the browser, call with no argument (the .wasm is fetched relative
+ * to the module). In Node, pass the wasm bytes or a file URL.
+ */
+export function ready(wasmInput) {
+  if (!initPromise) {
+    initPromise = initWasm(
+      wasmInput === undefined ? undefined : { module_or_path: wasmInput }
+    ).then(() => {
+      initialized = true;
+    });
+  }
+  return initPromise;
+}
+
+function ensure() {
+  if (!initialized) {
+    throw new Error('rpic: call `await ready()` before compiling');
+  }
+}
+
+/**
+ * Compile pic source into `{ svg, animations }` (throws on a pic error).
+ * @param {string} src
+ * @param {{circuits?: boolean}} [opts]
+ */
+export function compile(src, opts = {}) {
+  ensure();
+  const json = opts.circuits ? wasmCompileCircuits(src) : wasmCompile(src);
+  const out = JSON.parse(json);
+  if (out.error) throw new Error(out.error);
+  return out;
+}
+
+/** Compile and return just the SVG string. */
+export function renderSvg(src, opts) {
+  return compile(src, opts).svg;
+}
+
+/**
+ * Build a GSAP timeline from a drawing's animation manifest and play it on the
+ * SVG inside `root`. Browser-only (needs the DOM and a GSAP instance).
+ * @param {Element} root container holding the injected SVG
+ * @param {Array<{id:string,effect:string,start:number,duration:number}>} animations
+ * @param {*} gsap the GSAP instance
+ * @returns the GSAP timeline
+ */
+export function animate(root, animations, gsap) {
+  const tl = gsap.timeline();
+  for (const a of animations) {
+    const sel =
+      typeof CSS !== 'undefined' && CSS.escape ? '#' + CSS.escape(a.id) : `[id="${a.id}"]`;
+    const el = root.querySelector(sel);
+    if (!el) continue;
+    switch (a.effect) {
+      case 'fade':
+        tl.from(el, { opacity: 0, duration: a.duration, ease: 'power1.out' }, a.start);
+        break;
+      case 'pop':
+        tl.from(
+          el,
+          { scale: 0, transformOrigin: '50% 50%', duration: a.duration, ease: 'back.out(1.7)' },
+          a.start
+        );
+        break;
+      case 'draw':
+        drawOn(el, a, tl);
+        break;
+      default:
+        tl.from(el, { opacity: 0, duration: a.duration }, a.start);
+    }
+  }
+  return tl;
+}
+
+function drawOn(group, a, tl) {
+  const els = group.querySelectorAll('path, polyline, line, rect, circle, ellipse, polygon');
+  els.forEach((el) => {
+    let len = 0;
+    try {
+      len = el.getTotalLength();
+    } catch {
+      len = 0;
+    }
+    if (len > 0) {
+      tl.fromTo(
+        el,
+        { strokeDasharray: len, strokeDashoffset: len },
+        { strokeDashoffset: 0, duration: a.duration, ease: 'none' },
+        a.start
+      );
+    } else {
+      tl.from(el, { opacity: 0, duration: a.duration }, a.start);
+    }
+  });
+  const texts = group.querySelectorAll('text');
+  if (texts.length) {
+    tl.from(texts, { opacity: 0, duration: a.duration * 0.6 }, a.start + a.duration * 0.4);
+  }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@strategicprojects/rpic",
+  "version": "0.1.0",
+  "description": "The pic graphics language compiled to SVG with animation manifests, via WebAssembly. Browser + Node.",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./pkg/rpic_wasm_bg.wasm": "./pkg/rpic_wasm_bg.wasm"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "pkg/rpic_wasm.js",
+    "pkg/rpic_wasm.d.ts",
+    "pkg/rpic_wasm_bg.wasm",
+    "pkg/rpic_wasm_bg.wasm.d.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "prepack": "wasm-pack build ../../crates/wasm --target web --out-dir pkg"
+  },
+  "keywords": ["pic", "svg", "diagram", "graphics", "wasm", "gsap", "animation", "circuits"],
+  "author": "André Leite <leite@de.ufpe.br>",
+  "license": "BSD-2-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/milkway/rpic-lang.git",
+    "directory": "bindings/js"
+  },
+  "sideEffects": false
+}

package/pkg/rpic_wasm.d.ts

@@ -0,0 +1,48 @@
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * Compile pic source to a JSON `{svg, animations}` bundle (or `{error}`).
+ */
+export function compile(src: string): string;
+
+/**
+ * Like [`compile`], but with the native circuit-element library prepended
+ * (so `resistor`, `and_gate`, … are available).
+ */
+export function compile_circuits(src: string): string;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+    readonly memory: WebAssembly.Memory;
+    readonly compile: (a: number, b: number) => [number, number];
+    readonly compile_circuits: (a: number, b: number) => [number, number];
+    readonly __wbindgen_externrefs: WebAssembly.Table;
+    readonly __wbindgen_malloc: (a: number, b: number) => number;
+    readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+    readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+    readonly __wbindgen_start: () => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+
+/**
+ * Instantiates the given `module`, which can either be bytes or
+ * a precompiled `WebAssembly.Module`.
+ *
+ * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+ *
+ * @returns {InitOutput}
+ */
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

package/pkg/rpic_wasm.js

@@ -0,0 +1,231 @@
+/* @ts-self-types="./rpic_wasm.d.ts" */
+
+/**
+ * Compile pic source to a JSON `{svg, animations}` bundle (or `{error}`).
+ * @param {string} src
+ * @returns {string}
+ */
+export function compile(src) {
+    let deferred2_0;
+    let deferred2_1;
+    try {
+        const ptr0 = passStringToWasm0(src, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.compile(ptr0, len0);
+        deferred2_0 = ret[0];
+        deferred2_1 = ret[1];
+        return getStringFromWasm0(ret[0], ret[1]);
+    } finally {
+        wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
+    }
+}
+
+/**
+ * Like [`compile`], but with the native circuit-element library prepended
+ * (so `resistor`, `and_gate`, … are available).
+ * @param {string} src
+ * @returns {string}
+ */
+export function compile_circuits(src) {
+    let deferred2_0;
+    let deferred2_1;
+    try {
+        const ptr0 = passStringToWasm0(src, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.compile_circuits(ptr0, len0);
+        deferred2_0 = ret[0];
+        deferred2_1 = ret[1];
+        return getStringFromWasm0(ret[0], ret[1]);
+    } finally {
+        wasm.__wbindgen_free(deferred2_0, deferred2_1, 1);
+    }
+}
+function __wbg_get_imports() {
+    const import0 = {
+        __proto__: null,
+        __wbindgen_init_externref_table: function() {
+            const table = wasm.__wbindgen_externrefs;
+            const offset = table.grow(4);
+            table.set(0, undefined);
+            table.set(offset + 0, undefined);
+            table.set(offset + 1, null);
+            table.set(offset + 2, true);
+            table.set(offset + 3, false);
+        },
+    };
+    return {
+        __proto__: null,
+        "./rpic_wasm_bg.js": import0,
+    };
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+let wasmModule, wasmInstance, wasm;
+function __wbg_finalize_init(instance, module) {
+    wasmInstance = instance;
+    wasm = instance.exports;
+    wasmModule = module;
+    cachedUint8ArrayMemory0 = null;
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+            } catch (e) {
+                const validResponse = module.ok && expectedResponseType(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else { throw e; }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+        } else {
+            return instance;
+        }
+    }
+
+    function expectedResponseType(type) {
+        switch (type) {
+            case 'basic': case 'cors': case 'default': return true;
+        }
+        return false;
+    }
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module !== undefined) {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+    const instance = new WebAssembly.Instance(module, imports);
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module_or_path !== undefined) {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (module_or_path === undefined) {
+        module_or_path = new URL('rpic_wasm_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync, __wbg_init as default };

package/pkg/rpic_wasm_bg.wasm.d.ts

@@ -0,0 +1,10 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const compile: (a: number, b: number) => [number, number];
+export const compile_circuits: (a: number, b: number) => [number, number];
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_start: () => void;