@verygoodgraphics/vgg-wasm - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/index.d.ts

@@ -40,3 +40,3 @@ declare type EventCallback = (event: VGGEvent) => Promise<void>;
 
-export declare class VGG<T extends string> {
+export declare class VGG<T extends string | number | symbol> {
     readonly props: VGGProps;
@@ -59,2 +59,3 @@ private defaultRuntime;
     private requestAnimationFrame;
+    private VGGNodes;
     constructor(props: VGGProps);
@@ -80,3 +81,9 @@ load(): Promise<void>;
         editMode?: boolean;
-    }): Promise<void>;
+    }): Promise<{
+        nodes: Record<T, VGGNode>;
+    }>;
+    private reverseNodes;
+    getDesignDocument(): Promise<{
+        nodes: Record<T, VGGNode>;
+    }>;
     $(selector: T): Observable;
@@ -108,3 +115,3 @@ }
 declare interface VggSdkType {
-    getEnv(): string;
+    getEnvKey(): string;
     getDesignDocument(): string;
@@ -111,0 +118,0 @@ addAt(path: string, value: string): void;

dist/vgg-wasm.js

 var f = Object.defineProperty;
-var m = (n, e, t) => e in n ? f(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var s = (n, e, t) => (m(n, typeof e != "symbol" ? e + "" : e, t), t);
-var a = /* @__PURE__ */ ((n) => (n.Load = "load", n.LoadError = "loaderror", n.StateChange = "statechange", n.Click = "click", n))(a || {}), c = /* @__PURE__ */ ((n) => (n.Loading = "loading", n.Ready = "ready", n.Error = "error", n))(c || {});
+var u = (n, e, t) => e in n ? f(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var i = (n, e, t) => (u(n, typeof e != "symbol" ? e + "" : e, t), t);
+var h = /* @__PURE__ */ ((n) => (n.Load = "load", n.LoadError = "loaderror", n.StateChange = "statechange", n.Click = "click", n))(h || {}), c = /* @__PURE__ */ ((n) => (n.Loading = "loading", n.Ready = "ready", n.Error = "error", n))(c || {});
 class v {
@@ -23,4 +23,4 @@ constructor(e = []) {
     for (let t = 0; t < this.listeners.length; t++) {
-      const i = this.listeners[t];
-      if (i.type === e.type && i.callback === e.callback) {
+      const s = this.listeners[t];
+      if (s.type === e.type && s.callback === e.callback) {
         this.listeners.splice(t, 1);
@@ -42,34 +42,34 @@ break;
   fire(e) {
-    this.getListeners(e.type).forEach((i) => i.callback(e));
+    this.getListeners(e.type).forEach((s) => s.callback(e));
   }
 }
 const d = class d {
-  // private VGGNodes = {} as Record<T, VGGNode>
   constructor(e) {
-    s(this, "props");
-    s(this, "defaultRuntime", "https://s5.vgg.cool/runtime/latest");
+    i(this, "props");
+    i(this, "defaultRuntime", "https://s5.vgg.cool/runtime/latest");
     // Canvas in which to render the artboard
-    s(this, "canvas");
-    s(this, "width", 0);
-    s(this, "height", 0);
-    s(this, "editMode", !1);
+    i(this, "canvas");
+    i(this, "width", 0);
+    i(this, "height", 0);
+    i(this, "editMode", !1);
     // Verbose logging
-    s(this, "verbose");
+    i(this, "verbose");
     // A url to a Daruma file
-    s(this, "src");
+    i(this, "src");
     // The Wasm runtime
-    s(this, "runtime");
+    i(this, "runtime");
     // Key to store the wasm instance in globalThis
-    s(this, "vggInstanceKey", "");
+    i(this, "vggInstanceKey", "");
     // Holds event listeners
-    s(this, "eventManager");
-    s(this, "state", c.Loading);
+    i(this, "eventManager");
+    i(this, "state", c.Loading);
     // The VGG Wasm instance
-    s(this, "vggWasmInstance", null);
+    i(this, "vggWasmInstance", null);
     // The VGG SDK
-    s(this, "vggSdk", null);
-    s(this, "observables", /* @__PURE__ */ new Map());
-    s(this, "requestAnimationFrame");
-    var t, i;
-    this.props = e, this.canvas = e.canvas, this.src = e.src, this.runtime = e.runtime || this.defaultRuntime, this.width = ((t = this.canvas) == null ? void 0 : t.width) ?? 0, this.height = ((i = this.canvas) == null ? void 0 : i.height) ?? 0, this.editMode = e.editMode ?? !1, this.verbose = e.verbose ?? !1, this.eventManager = new v(), e.onLoad && this.on(a.Load, e.onLoad), e.onLoadError && this.on(a.LoadError, e.onLoadError), e.onStateChange && this.on(a.StateChange, e.onStateChange), e.onSelect && this.on(a.Click, e.onSelect);
+    i(this, "vggSdk", null);
+    i(this, "observables", /* @__PURE__ */ new Map());
+    i(this, "requestAnimationFrame");
+    i(this, "VGGNodes", {});
+    var t, s;
+    this.props = e, this.canvas = e.canvas, this.src = e.src, this.runtime = e.runtime || this.defaultRuntime, this.width = ((t = this.canvas) == null ? void 0 : t.width) ?? 0, this.height = ((s = this.canvas) == null ? void 0 : s.height) ?? 0, this.editMode = e.editMode ?? !1, this.verbose = e.verbose ?? !1, this.eventManager = new v(), e.onLoad && this.on(h.Load, e.onLoad), e.onLoadError && this.on(h.LoadError, e.onLoadError), e.onStateChange && this.on(h.StateChange, e.onStateChange), e.onSelect && this.on(h.Click, e.onSelect);
   }
@@ -80,3 +80,3 @@ async load() {
     } catch (e) {
-      this.eventManager.fire({ type: a.LoadError, data: e.message });
+      this.eventManager.fire({ type: h.LoadError, data: e.message });
     }
@@ -98,11 +98,11 @@ }
     if (window._vgg_createWasmInstance) {
-      const i = await window._vgg_createWasmInstance({
+      const s = await window._vgg_createWasmInstance({
         noInitialRun: !0,
         canvas: this.canvas,
-        locateFile: function(r, h) {
-          return r.endsWith(".data") ? t + "/" + r : h + r;
+        locateFile: function(r, a) {
+          return r.endsWith(".data") ? t + "/" + r : a + r;
         }
       });
-      if (i) {
-        this.vggWasmInstance = i;
+      if (s) {
+        this.vggWasmInstance = s;
         try {
@@ -115,13 +115,13 @@ this.vggWasmInstance.ccall(
           );
-        } catch (h) {
-          console.error(h);
+        } catch (a) {
+          console.error(a);
         }
-        this.vggSdk = new i.VggSdk();
+        this.vggSdk = new s.VggSdk();
         const r = globalThis.vggInstances ?? {};
-        this.vggInstanceKey = this.vggSdk.getEnv(), this.editMode ? Object.assign(r, {
+        this.vggInstanceKey = this.vggSdk.getEnvKey(), this.editMode ? Object.assign(r, {
           [this.vggInstanceKey]: {
-            instance: i,
-            listener: (h) => {
+            instance: s,
+            listener: (a) => {
               var l;
-              const o = JSON.parse(h);
+              const o = JSON.parse(a);
               this.verbose && console.log(
@@ -132,3 +132,3 @@ `%cVGGEvent::${o.type}`,
               ), o.type === "select" && ((l = this.observables.get(o.path)) == null || l.next("click"), this.eventManager.fire({
-                type: a.Click,
+                type: h.Click,
                 data: o
@@ -140,7 +140,7 @@ }));
           [this.vggInstanceKey]: {
-            instance: i
+            instance: s
           }
-        }), globalThis.vggInstances = r, this.state = c.Ready, this.eventManager.fire({ type: a.Load });
+        }), globalThis.vggInstances = r, this.state = c.Ready, this.eventManager.fire({ type: h.Load });
       } else
-        this.state = c.Error, this.eventManager.fire({ type: a.LoadError });
+        this.state = c.Error, this.eventManager.fire({ type: h.LoadError });
       cancelAnimationFrame(this.requestAnimationFrame), e(!0);
@@ -173,6 +173,6 @@ } else
       throw new Error("VGG Wasm instance not ready");
-    const i = await fetch(e ?? this.src);
-    if (!i.ok)
+    const s = await fetch(e ?? this.src);
+    if (!s.ok)
       throw new Error("Failed to fetch Daruma file");
-    const r = await i.arrayBuffer(), h = new Int8Array(r);
+    const r = await s.arrayBuffer(), a = new Int8Array(r);
     if (!this.vggWasmInstance.ccall(
@@ -184,60 +184,51 @@ "load_file_from_mem",
       // argument types
-      ["name", h, h.length]
+      ["name", a, a.length]
     ))
       throw new Error("Failed to load Daruma file");
+    return await this.getDesignDocument();
   }
-  // private reverseNodes(
-  //   nodes: Record<string, any>[],
-  //   map: Map<T, VGGNode>,
-  //   parentPath: string
-  // ) {
-  //   for (const [index, node] of nodes.entries()) {
-  //     const currentPath = `${parentPath}/${index}`
-  //     map.set(node.id, {
-  //       path: currentPath,
-  //     } as VGGNode)
-  //     if (node.childObjects) {
-  //       this.reverseNodes(node.childObjects, map, currentPath + "/childObjects")
-  //     }
-  //   }
-  // }
-  // public async getDesignDocument() {
-  //   try {
-  //     const docString = this.vggSdk?.getDesignDocument()
-  //     if (!docString) {
-  //       throw new Error("Failed to get design document")
-  //     }
-  //     const designDoc = JSON.parse(docString)
-  //     const map = new Map<T, VGGNode>()
-  //     this.reverseNodes(designDoc.frames, map, "/frames")
-  //     this.VGGNodes = Object.fromEntries(map) as Record<T, VGGNode>
-  //     return {
-  //       nodes: this.VGGNodes,
-  //     }
-  //   } catch (err) {
-  //     // console.log(err)
-  //     return {
-  //       nodes: {} as Record<T, VGGNode>,
-  //     }
-  //   }
-  // }
+  reverseNodes(e, t, s) {
+    for (const [r, a] of e.entries()) {
+      const o = `${s}/${r}`;
+      t.set(a.id, {
+        path: o
+      }), a.childObjects && this.reverseNodes(a.childObjects, t, o + "/childObjects");
+    }
+  }
+  async getDesignDocument() {
+    var e;
+    try {
+      const t = (e = this.vggSdk) == null ? void 0 : e.getDesignDocument();
+      if (!t)
+        throw new Error("Failed to get design document");
+      const s = JSON.parse(t), r = /* @__PURE__ */ new Map();
+      return this.reverseNodes(s.frames, r, "/frames"), this.VGGNodes = Object.fromEntries(r), {
+        nodes: this.VGGNodes
+      };
+    } catch {
+      return {
+        nodes: {}
+      };
+    }
+  }
   $(e) {
+    var r;
     if (!this.vggSdk)
       throw new Error("VGG SDK not ready");
-    const t = this.observables.get(e);
-    if (!t) {
-      const i = new u(String(e), this.vggSdk);
-      return this.observables.set(e, i), i;
+    const t = (r = this.VGGNodes[e]) == null ? void 0 : r.path, s = this.observables.get(t);
+    if (!s) {
+      const a = new m(t, this.vggSdk);
+      return this.observables.set(t, a), a;
     }
-    return t;
+    return s;
   }
 };
 // Error message for missing source
-s(d, "missingErrorMessage", "Daruma source file required");
+i(d, "missingErrorMessage", "Daruma source file required");
 let g = d;
-class u {
+class m {
   constructor(e, t) {
-    s(this, "selector");
-    s(this, "vggSdk");
-    s(this, "eventManager", new v());
+    i(this, "selector");
+    i(this, "vggSdk");
+    i(this, "eventManager", new v());
     this.selector = e, this.vggSdk = t;
@@ -260,13 +251,13 @@ }
   }
-  addEventListener(e, t, i) {
+  addEventListener(e, t, s) {
     if (!this.vggSdk)
       throw new Error("VGG SDK not ready");
-    this.vggSdk.addEventListener(e, t, i);
+    this.vggSdk.addEventListener(e, t, s);
   }
 }
-typeof window < "u" && (window.VGG = g);
+typeof globalThis < "u" && (globalThis.VGG = g);
 export {
-  a as EventType,
+  h as EventType,
   c as State,
   g as VGG
 };

package.json

@@ -9,3 +9,3 @@ {
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
@@ -12,0 +12,0 @@ "files": [

README.md

@@ -8,71 +8,27 @@ # VGG WASM
 ```html
-<script
-  type="module"
-  src="https://www.unpkg.com/@verygoodgraphics/vgg-wasm?module"
-></script>
+<script src="https://www.unpkg.com/@verygoodgraphics/vgg-wasm"></script>
 <script>
   const vgg = new VGG({
     src: "https://s5.vgg.cool/vgg.daruma",
-    // editMode: true,
-    verbose: true,
     canvas: document.querySelector("#canvas"),
-    onSelect: async (event) => console.log("Select", event),
-    // onLoad: async (event) => console.log("Load", event),
-    // onLoadError: async (event) => console.log("Load Error", event),
-    // onStateChange: async (state) => console.log("State Change", state),
   })
-  console.log({ vgg })
 
-  await vgg.load()
+  ;(async () => {
+    await vgg.load()
 
-  if (vgg.state === 'ready') {
-    await vgg.render()
+    if (vgg.state === "ready") {
+      await vgg.render()
 
-    // {
-    // const { nodes } = await vgg.render()
-    // const keys = Object.keys(nodes)
-    //   .map((i) => `"${i}"`)
-    //   .join(" | ")
-    // console.log(keys)
-    // }
-
-    vgg.$("#vgg_home").on('click', async () => {
-      window.alert("Hello, VGG!")
-    })
-  }
+      vgg.$("#vgg_home").on("click", async () => {
+        window.alert("Hello, VGG!")
+      })
+    }
+  })()
 </script>
 ```
 
-```html
-<script type="module">
-  const vgg = new VGG({
-    src: "https://s5.vgg.cool/vgg.daruma",
-    // editMode: true,
-    verbose: true,
-    canvas: document.querySelector("#canvas"),
-    onSelect: async (event) => console.log("Select", event),
-    // onLoad: async (event) => console.log("Load", event),
-    // onLoadError: async (event) => console.log("Load Error", event),
-    // onStateChange: async (state) => console.log("State Change", state),
-  })
-  console.log({ vgg })
+### Import through NPM
 
-  await vgg.load()
-
-  if (vgg.state === State.Ready) {
-    await vgg.render()
-
-    // {
-    // const { nodes } = await vgg.render()
-    // const keys = Object.keys(nodes)
-    //   .map((i) => `"${i}"`)
-    //   .join(" | ")
-    // console.log(keys)
-    // }
-
-    vgg.$("#vgg_home").on(EventType.Click, async () => {
-      window.alert("Hello, VGG!")
-    })
-  }
-</script>
+```bash
+npm install @verygoodgraphics/vgg-wasm
 ```
@@ -79,0 +35,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

20591

decreased by-3.85%

Number of lines in readme file

77

decreased by-36.36%

No dependency changes