@verygoodgraphics/vgg-react - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/index.d.ts

@@ -24,3 +24,3 @@ import { EventType } from '@verygoodgraphics/vgg-wasm';
 
-export declare interface VGGProps<T extends string | number | symbol> extends Omit<VGGProps_2, "canvas" | "onLoad" | "onLoadError" | "onStateChange"> {
+export declare interface VGGProps<T extends string> extends Omit<VGGProps_2, "canvas" | "onLoad" | "onLoadError" | "onStateChange"> {
     canvasStyle?: React.CSSProperties;
@@ -33,4 +33,4 @@ onLoad?: (event: VGGEvent, instance: VGG<T>) => Promise<void>;
 
-export declare function VGGRender<T extends string | number | symbol>(props: VGGProps<T>): JSX_2.Element;
+export declare function VGGRender<T extends string>(props: VGGProps<T>): JSX_2.Element;
 
 export { }

dist/vgg-react.js

@@ -1,4 +0,4 @@
-import ke, { useRef as Q, useState as gr, useEffect as Pe } from "react";
-var pr = Object.defineProperty, mr = (v, t, a) => t in v ? pr(v, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : v[t] = a, p = (v, t, a) => (mr(v, typeof t != "symbol" ? t + "" : t, a), a), T = /* @__PURE__ */ ((v) => (v.Load = "load", v.LoadError = "loaderror", v.StateChange = "statechange", v.Click = "click", v))(T || {}), O = /* @__PURE__ */ ((v) => (v.Loading = "loading", v.Ready = "ready", v.Error = "error", v))(O || {});
-class je {
+import Oe, { useRef as Q, useState as gr, useEffect as Pe } from "react";
+var pr = Object.defineProperty, mr = (f, t, a) => t in f ? pr(f, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : f[t] = a, m = (f, t, a) => (mr(f, typeof t != "symbol" ? t + "" : t, a), a), T = /* @__PURE__ */ ((f) => (f.Load = "load", f.LoadError = "loaderror", f.StateChange = "statechange", f.Click = "click", f))(T || {}), C = /* @__PURE__ */ ((f) => (f.Loading = "loading", f.Ready = "ready", f.Error = "error", f))(C || {});
+class xe {
   constructor(t = []) {
@@ -21,4 +21,4 @@ this.listeners = t;
     for (let a = 0; a < this.listeners.length; a++) {
-      const o = this.listeners[a];
-      if (o.type === t.type && o.callback === t.callback) {
+      const c = this.listeners[a];
+      if (c.type === t.type && c.callback === t.callback) {
         this.listeners.splice(a, 1);
@@ -43,7 +43,8 @@ break;
 }
-const xe = class De {
+const je = class Fe {
+  // private VGGNodes = {} as Record<T, VGGNode>
   constructor(t) {
-    p(this, "props"), p(this, "defaultRuntime", "https://s5.vgg.cool/runtime/latest"), p(this, "canvas"), p(this, "width", 0), p(this, "height", 0), p(this, "editMode", !1), p(this, "verbose"), p(this, "src"), p(this, "runtime"), p(this, "vggInstanceKey", ""), p(this, "eventManager"), p(this, "state", O.Loading), p(this, "vggWasmInstance", null), p(this, "vggSdk", null), p(this, "observables", /* @__PURE__ */ new Map()), p(this, "requestAnimationFrame"), p(this, "VGGNodes", {});
-    var a, o;
-    this.props = t, this.canvas = t.canvas, this.src = t.src, this.runtime = t.runtime || this.defaultRuntime, this.width = ((a = this.canvas) == null ? void 0 : a.width) ?? 0, this.height = ((o = this.canvas) == null ? void 0 : o.height) ?? 0, this.editMode = t.editMode ?? !1, this.verbose = t.verbose ?? !1, this.eventManager = new je(), t.onLoad && this.on(T.Load, t.onLoad), t.onLoadError && this.on(T.LoadError, t.onLoadError), t.onStateChange && this.on(T.StateChange, t.onStateChange), t.onSelect && this.on(T.Click, t.onSelect);
+    m(this, "props"), m(this, "defaultRuntime", "https://s5.vgg.cool/runtime/latest"), m(this, "canvas"), m(this, "width", 0), m(this, "height", 0), m(this, "editMode", !1), m(this, "verbose"), m(this, "src"), m(this, "runtime"), m(this, "vggInstanceKey", ""), m(this, "eventManager"), m(this, "state", C.Loading), m(this, "vggWasmInstance", null), m(this, "vggSdk", null), m(this, "observables", /* @__PURE__ */ new Map()), m(this, "requestAnimationFrame");
+    var a, c;
+    this.props = t, this.canvas = t.canvas, this.src = t.src, this.runtime = t.runtime || this.defaultRuntime, this.width = ((a = this.canvas) == null ? void 0 : a.width) ?? 0, this.height = ((c = this.canvas) == null ? void 0 : c.height) ?? 0, this.editMode = t.editMode ?? !1, this.verbose = t.verbose ?? !1, this.eventManager = new xe(), t.onLoad && this.on(T.Load, t.onLoad), t.onLoadError && this.on(T.LoadError, t.onLoadError), t.onStateChange && this.on(T.StateChange, t.onStateChange), t.onSelect && this.on(T.Click, t.onSelect);
   }
@@ -61,3 +62,3 @@ async load() {
     if (!this.src)
-      throw new Error(De.missingErrorMessage);
+      throw new Error(Fe.missingErrorMessage);
     return new Promise((a) => {
@@ -72,11 +73,11 @@ this.requestAnimationFrame = requestAnimationFrame(
     if (window._vgg_createWasmInstance) {
-      const o = await window._vgg_createWasmInstance({
+      const c = await window._vgg_createWasmInstance({
         noInitialRun: !0,
         canvas: this.canvas,
-        locateFile: function(l, f) {
-          return l.endsWith(".data") ? a + "/" + l : f + l;
+        locateFile: function(g, v) {
+          return g.endsWith(".data") ? a + "/" + g : v + g;
         }
       });
-      if (o) {
-        this.vggWasmInstance = o;
+      if (c) {
+        this.vggWasmInstance = c;
         try {
@@ -89,30 +90,30 @@ this.vggWasmInstance.ccall(
           );
-        } catch (f) {
-          console.error(f);
+        } catch (v) {
+          console.error(v);
         }
-        this.vggSdk = new o.VggSdk();
-        const l = globalThis.vggInstances ?? {};
-        this.vggInstanceKey = this.vggSdk.getEnv(), this.editMode ? Object.assign(l, {
+        this.vggSdk = new c.VggSdk();
+        const g = globalThis.vggInstances ?? {};
+        this.vggInstanceKey = this.vggSdk.getEnv(), this.editMode ? Object.assign(g, {
           [this.vggInstanceKey]: {
-            instance: o,
-            listener: (f) => {
-              var y;
-              const h = JSON.parse(f);
+            instance: c,
+            listener: (v) => {
+              var E;
+              const d = JSON.parse(v);
               this.verbose && console.log(
-                `%cVGGEvent::${h.type}`,
+                `%cVGGEvent::${d.type}`,
                 "background: #f59e0b; color: #78350f; font-weight: bold; border-radius: 2px; padding: 0 2.5px;",
-                h.id ? `${h.id} → ${h.path}` : ""
-              ), h.type === "select" && ((y = this.observables.get(h.path)) == null || y.next("click"), this.eventManager.fire({
+                d.id ? `${d.id} → ${d.path}` : ""
+              ), d.type === "select" && ((E = this.observables.get(d.path)) == null || E.next("click"), this.eventManager.fire({
                 type: T.Click,
-                data: h
+                data: d
               }));
             }
           }
-        }) : Object.assign(l, {
+        }) : Object.assign(g, {
           [this.vggInstanceKey]: {
-            instance: o
+            instance: c
           }
-        }), globalThis.vggInstances = l, this.state = O.Ready, this.eventManager.fire({ type: T.Load });
+        }), globalThis.vggInstances = g, this.state = C.Ready, this.eventManager.fire({ type: T.Load });
       } else
-        this.state = O.Error, this.eventManager.fire({ type: T.LoadError });
+        this.state = C.Error, this.eventManager.fire({ type: T.LoadError });
       cancelAnimationFrame(this.requestAnimationFrame), t(!0);
@@ -145,6 +146,6 @@ } else
       throw new Error("VGG Wasm instance not ready");
-    const o = await fetch(t ?? this.src);
-    if (!o.ok)
+    const c = await fetch(t ?? this.src);
+    if (!c.ok)
       throw new Error("Failed to fetch Daruma file");
-    const l = await o.arrayBuffer(), f = new Int8Array(l);
+    const g = await c.arrayBuffer(), v = new Int8Array(g);
     if (!this.vggWasmInstance.ccall(
@@ -156,48 +157,57 @@ "load_file_from_mem",
       // argument types
-      ["name", f, f.length]
+      ["name", v, v.length]
     ))
       throw new Error("Failed to load Daruma file");
-    return await this.getDesignDocument();
   }
-  reverseNodes(t, a, o) {
-    for (const [l, f] of t.entries()) {
-      const y = `${o}/${l}`;
-      a.set(f.id, {
-        path: y
-      }), f.childObjects && this.reverseNodes(f.childObjects, a, y + "/childObjects");
-    }
-  }
-  async getDesignDocument() {
-    var t;
-    try {
-      const a = (t = this.vggSdk) == null ? void 0 : t.getDesignDocument();
-      if (!a)
-        throw new Error("Failed to get design document");
-      const o = JSON.parse(a), l = /* @__PURE__ */ new Map();
-      return this.reverseNodes(o.frames, l, "/frames"), this.VGGNodes = Object.fromEntries(l), {
-        nodes: this.VGGNodes
-      };
-    } catch {
-      return {
-        nodes: {}
-      };
-    }
-  }
+  // 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>,
+  //     }
+  //   }
+  // }
   $(t) {
-    var a;
     if (!this.vggSdk)
       throw new Error("VGG SDK not ready");
-    const o = (a = this.VGGNodes[t]) == null ? void 0 : a.path, l = this.observables.get(o);
-    if (!l) {
-      const f = new yr(o, this.vggSdk);
-      return this.observables.set(o, f), f;
+    const a = this.observables.get(t);
+    if (!a) {
+      const c = new yr(String(t), this.vggSdk);
+      return this.observables.set(t, c), c;
     }
-    return l;
+    return a;
   }
 };
-p(xe, "missingErrorMessage", "Daruma source file required");
-let Fe = xe;
+m(je, "missingErrorMessage", "Daruma source file required");
+let De = je;
 class yr {
   constructor(t, a) {
-    p(this, "selector"), p(this, "vggSdk"), p(this, "eventManager", new je()), this.selector = t, this.vggSdk = a;
+    m(this, "selector"), m(this, "vggSdk"), m(this, "eventManager", new xe()), this.selector = t, this.vggSdk = a;
   }
@@ -219,22 +229,22 @@ on(t, a) {
   }
-  addEventListener(t, a, o) {
+  addEventListener(t, a, c) {
     if (!this.vggSdk)
       throw new Error("VGG SDK not ready");
-    this.vggSdk.addEventListener(t, a, o);
+    this.vggSdk.addEventListener(t, a, c);
   }
 }
-function wr(v) {
-  const { src: t, runtime: a, ...o } = v, l = Q(null), f = Q(null), [y, h] = gr(O.Loading);
+function wr(f) {
+  const { src: t, runtime: a, ...c } = f, g = Q(null), v = Q(null), [E, d] = gr(C.Loading);
   return Pe(() => {
-    l.current && (async () => (f.current = new Fe({
+    g.current && (async () => (v.current = new De({
       src: t,
       runtime: a ?? "https://s5.vgg.cool/runtime/latest",
-      canvas: l.current,
-      ...o
-    }), await f.current.load(), f.current.state === O.Ready ? (await f.current.render(), h(O.Ready)) : h(O.Error)))();
+      canvas: g.current,
+      ...c
+    }), await v.current.load(), v.current.state === C.Ready ? (await v.current.render(), d(C.Ready)) : d(C.Error)))();
   }, []), {
-    canvasRef: l,
-    vgg: f,
-    isLoading: y === O.Loading,
-    state: y
+    canvasRef: g,
+    vgg: v,
+    isLoading: E === C.Loading,
+    state: E
   };
@@ -252,6 +262,6 @@ }
  */
-var Oe;
+var Ce;
 function br() {
-  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && function() {
-    var v = ke, t = Symbol.for("react.element"), a = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), y = Symbol.for("react.provider"), h = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), $ = Symbol.for("react.offscreen"), re = Symbol.iterator, Ie = "@@iterator";
+  return Ce || (Ce = 1, process.env.NODE_ENV !== "production" && function() {
+    var f = Oe, t = Symbol.for("react.element"), a = Symbol.for("react.portal"), c = Symbol.for("react.fragment"), g = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), E = Symbol.for("react.provider"), d = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), x = Symbol.for("react.lazy"), $ = Symbol.for("react.offscreen"), re = Symbol.iterator, Ie = "@@iterator";
     function Ae(e) {
@@ -263,3 +273,3 @@ if (e === null || typeof e != "object")
     }
-    var D = v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var F = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function R(e) {
@@ -274,14 +284,14 @@ {
       {
-        var i = D.ReactDebugCurrentFrame, u = i.getStackAddendum();
+        var i = F.ReactDebugCurrentFrame, u = i.getStackAddendum();
         u !== "" && (r += "%s", n = n.concat([u]));
-        var d = n.map(function(c) {
-          return String(c);
+        var l = n.map(function(o) {
+          return String(o);
         });
-        d.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, d);
+        l.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, l);
       }
     }
-    var Me = !1, We = !1, $e = !1, Ve = !1, Ne = !1, te;
+    var Me = !1, We = !1, $e = !1, Ve = !1, Ye = !1, te;
     te = Symbol.for("react.module.reference");
-    function Ge(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === o || e === f || Ne || e === l || e === P || e === E || Ve || e === $ || Me || We || $e || typeof e == "object" && e !== null && (e.$$typeof === j || e.$$typeof === w || e.$$typeof === y || e.$$typeof === h || e.$$typeof === b || // This needs to include all possible module reference object
+    function Ne(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === c || e === v || Ye || e === g || e === P || e === b || Ve || e === $ || Me || We || $e || typeof e == "object" && e !== null && (e.$$typeof === x || e.$$typeof === w || e.$$typeof === E || e.$$typeof === d || e.$$typeof === y || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
@@ -292,3 +302,3 @@ // we don't know which Flight build this will end up being used
     }
-    function Ye(e, r, n) {
+    function Ge(e, r, n) {
       var i = e.displayName;
@@ -303,3 +313,3 @@ if (i)
     }
-    function C(e) {
+    function k(e) {
       if (e == null)
@@ -312,13 +322,13 @@ return null;
       switch (e) {
-        case o:
+        case c:
           return "Fragment";
         case a:
           return "Portal";
-        case f:
+        case v:
           return "Profiler";
-        case l:
+        case g:
           return "StrictMode";
         case P:
           return "Suspense";
-        case E:
+        case b:
           return "SuspenseList";
@@ -328,17 +338,17 @@ }
         switch (e.$$typeof) {
-          case h:
+          case d:
             var r = e;
             return ne(r) + ".Consumer";
-          case y:
+          case E:
             var n = e;
             return ne(n._context) + ".Provider";
-          case b:
-            return Ye(e, e.render, "ForwardRef");
+          case y:
+            return Ge(e, e.render, "ForwardRef");
           case w:
             var i = e.displayName || null;
-            return i !== null ? i : C(e.type) || "Memo";
-          case j: {
-            var u = e, d = u._payload, c = u._init;
+            return i !== null ? i : k(e.type) || "Memo";
+          case x: {
+            var u = e, l = u._payload, o = u._init;
             try {
-              return C(c(d));
+              return k(o(l));
             } catch {
@@ -351,3 +361,3 @@ return null;
     }
-    var x = Object.assign, A = 0, ae, ie, se, oe, ce, ue, le;
+    var j = Object.assign, A = 0, ae, ie, se, oe, ue, ce, le;
     function fe() {
@@ -359,3 +369,3 @@ }
         if (A === 0) {
-          ae = console.log, ie = console.info, se = console.warn, oe = console.error, ce = console.group, ue = console.groupCollapsed, le = console.groupEnd;
+          ae = console.log, ie = console.info, se = console.warn, oe = console.error, ue = console.group, ce = console.groupCollapsed, le = console.groupEnd;
           var e = {
@@ -389,21 +399,21 @@ configurable: !0,
           Object.defineProperties(console, {
-            log: x({}, e, {
+            log: j({}, e, {
               value: ae
             }),
-            info: x({}, e, {
+            info: j({}, e, {
               value: ie
             }),
-            warn: x({}, e, {
+            warn: j({}, e, {
               value: se
             }),
-            error: x({}, e, {
+            error: j({}, e, {
               value: oe
             }),
-            group: x({}, e, {
+            group: j({}, e, {
+              value: ue
+            }),
+            groupCollapsed: j({}, e, {
               value: ce
             }),
-            groupCollapsed: x({}, e, {
-              value: ue
-            }),
-            groupEnd: x({}, e, {
+            groupEnd: j({}, e, {
               value: le
@@ -416,3 +426,3 @@ })
     }
-    var q = D.ReactCurrentDispatcher, B;
+    var q = F.ReactCurrentDispatcher, B;
     function V(e, r, n) {
@@ -431,6 +441,6 @@ {
     }
-    var K = !1, N;
+    var K = !1, Y;
     {
       var Be = typeof WeakMap == "function" ? WeakMap : Map;
-      N = new Be();
+      Y = new Be();
     }
@@ -441,3 +451,3 @@ function de(e, r) {
       {
-        var n = N.get(e);
+        var n = Y.get(e);
         if (n !== void 0)
@@ -450,10 +460,10 @@ return n;
       Error.prepareStackTrace = void 0;
-      var d;
-      d = q.current, q.current = null, Ue();
+      var l;
+      l = q.current, q.current = null, Ue();
       try {
         if (r) {
-          var c = function() {
+          var o = function() {
             throw Error();
           };
-          if (Object.defineProperty(c.prototype, "props", {
+          if (Object.defineProperty(o.prototype, "props", {
             set: function() {
@@ -464,14 +474,14 @@ throw Error();
             try {
-              Reflect.construct(c, []);
-            } catch (k) {
-              i = k;
+              Reflect.construct(o, []);
+            } catch (O) {
+              i = O;
             }
-            Reflect.construct(e, [], c);
+            Reflect.construct(e, [], o);
           } else {
             try {
-              c.call();
-            } catch (k) {
-              i = k;
+              o.call();
+            } catch (O) {
+              i = O;
             }
-            e.call(c.prototype);
+            e.call(o.prototype);
           }
@@ -481,23 +491,23 @@ } else {
             throw Error();
-          } catch (k) {
-            i = k;
+          } catch (O) {
+            i = O;
           }
           e();
         }
-      } catch (k) {
-        if (k && i && typeof k.stack == "string") {
-          for (var s = k.stack.split(`
+      } catch (O) {
+        if (O && i && typeof O.stack == "string") {
+          for (var s = O.stack.split(`
 `), _ = i.stack.split(`
-`), g = s.length - 1, m = _.length - 1; g >= 1 && m >= 0 && s[g] !== _[m]; )
-            m--;
-          for (; g >= 1 && m >= 0; g--, m--)
-            if (s[g] !== _[m]) {
-              if (g !== 1 || m !== 1)
+`), h = s.length - 1, p = _.length - 1; h >= 1 && p >= 0 && s[h] !== _[p]; )
+            p--;
+          for (; h >= 1 && p >= 0; h--, p--)
+            if (s[h] !== _[p]) {
+              if (h !== 1 || p !== 1)
                 do
-                  if (g--, m--, m < 0 || s[g] !== _[m]) {
+                  if (h--, p--, p < 0 || s[h] !== _[p]) {
                     var S = `
-` + s[g].replace(" at new ", " at ");
-                    return e.displayName && S.includes("<anonymous>") && (S = S.replace("<anonymous>", e.displayName)), typeof e == "function" && N.set(e, S), S;
+` + s[h].replace(" at new ", " at ");
+                    return e.displayName && S.includes("<anonymous>") && (S = S.replace("<anonymous>", e.displayName)), typeof e == "function" && Y.set(e, S), S;
                   }
-                while (g >= 1 && m >= 0);
+                while (h >= 1 && p >= 0);
               break;
@@ -507,6 +517,6 @@ }
       } finally {
-        K = !1, q.current = d, qe(), Error.prepareStackTrace = u;
+        K = !1, q.current = l, qe(), Error.prepareStackTrace = u;
       }
       var I = e ? e.displayName || e.name : "", Te = I ? V(I) : "";
-      return typeof e == "function" && N.set(e, Te), Te;
+      return typeof e == "function" && Y.set(e, Te), Te;
     }
@@ -520,3 +530,3 @@ function Ke(e, r, n) {
     }
-    function G(e, r, n) {
+    function N(e, r, n) {
       if (e == null)
@@ -531,3 +541,3 @@ return "";
           return V("Suspense");
-        case E:
+        case b:
           return V("SuspenseList");
@@ -537,10 +547,10 @@ }
         switch (e.$$typeof) {
-          case b:
+          case y:
             return Ke(e.render);
           case w:
-            return G(e.type, r, n);
-          case j: {
-            var i = e, u = i._payload, d = i._init;
+            return N(e.type, r, n);
+          case x: {
+            var i = e, u = i._payload, l = i._init;
             try {
-              return G(d(u), r, n);
+              return N(l(u), r, n);
             } catch {
@@ -552,6 +562,6 @@ }
     }
-    var Y = Object.prototype.hasOwnProperty, ve = {}, he = D.ReactDebugCurrentFrame;
+    var G = Object.prototype.hasOwnProperty, ve = {}, he = F.ReactDebugCurrentFrame;
     function U(e) {
       if (e) {
-        var r = e._owner, n = G(e.type, e._source, r ? r.type : null);
+        var r = e._owner, n = N(e.type, e._source, r ? r.type : null);
         he.setExtraStackFrame(n);
@@ -563,16 +573,16 @@ } else
       {
-        var d = Function.call.bind(Y);
-        for (var c in e)
-          if (d(e, c)) {
+        var l = Function.call.bind(G);
+        for (var o in e)
+          if (l(e, o)) {
             var s = void 0;
             try {
-              if (typeof e[c] != "function") {
-                var _ = Error((i || "React class") + ": " + n + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+              if (typeof e[o] != "function") {
+                var _ = Error((i || "React class") + ": " + n + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw _.name = "Invariant Violation", _;
               }
-              s = e[c](r, c, i, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (g) {
-              s = g;
+              s = e[o](r, o, i, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (h) {
+              s = h;
             }
-            s && !(s instanceof Error) && (U(u), R("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", i || "React class", n, c, typeof s), U(null)), s instanceof Error && !(s.message in ve) && (ve[s.message] = !0, U(u), R("Failed %s type: %s", n, s.message), U(null));
+            s && !(s instanceof Error) && (U(u), R("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", i || "React class", n, o, typeof s), U(null)), s instanceof Error && !(s.message in ve) && (ve[s.message] = !0, U(u), R("Failed %s type: %s", n, s.message), U(null));
           }
@@ -605,3 +615,3 @@ }
     }
-    var L = D.ReactCurrentOwner, Qe = {
+    var L = F.ReactCurrentOwner, Qe = {
       key: !0,
@@ -614,3 +624,3 @@ ref: !0,
     function er(e) {
-      if (Y.call(e, "ref")) {
+      if (G.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
@@ -623,3 +633,3 @@ if (r && r.isReactWarning)
     function rr(e) {
-      if (Y.call(e, "key")) {
+      if (G.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
@@ -633,4 +643,4 @@ if (r && r.isReactWarning)
       if (typeof e.ref == "string" && L.current && r && L.current.stateNode !== r) {
-        var n = C(L.current.type);
-        z[n] || (R('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', C(L.current.type), e.ref), z[n] = !0);
+        var n = k(L.current.type);
+        z[n] || (R('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', k(L.current.type), e.ref), z[n] = !0);
       }
@@ -660,3 +670,3 @@ }
     }
-    var ir = function(e, r, n, i, u, d, c) {
+    var ir = function(e, r, n, i, u, l, o) {
       var s = {
@@ -669,5 +679,5 @@ // This tag allows us to uniquely identify this as a React Element
         ref: n,
-        props: c,
+        props: o,
         // Record the component responsible for creating this element.
-        _owner: d
+        _owner: l
       };
@@ -693,22 +703,22 @@ return s._store = {}, Object.defineProperty(s._store, "validated", {
       {
-        var d, c = {}, s = null, _ = null;
+        var l, o = {}, s = null, _ = null;
         n !== void 0 && (pe(n), s = "" + n), rr(r) && (pe(r.key), s = "" + r.key), er(r) && (_ = r.ref, tr(r, u));
-        for (d in r)
-          Y.call(r, d) && !Qe.hasOwnProperty(d) && (c[d] = r[d]);
+        for (l in r)
+          G.call(r, l) && !Qe.hasOwnProperty(l) && (o[l] = r[l]);
         if (e && e.defaultProps) {
-          var g = e.defaultProps;
-          for (d in g)
-            c[d] === void 0 && (c[d] = g[d]);
+          var h = e.defaultProps;
+          for (l in h)
+            o[l] === void 0 && (o[l] = h[l]);
         }
         if (s || _) {
-          var m = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          s && nr(c, m), _ && ar(c, m);
+          var p = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          s && nr(o, p), _ && ar(o, p);
         }
-        return ir(e, s, _, u, i, L.current, c);
+        return ir(e, s, _, u, i, L.current, o);
       }
     }
-    var H = D.ReactCurrentOwner, be = D.ReactDebugCurrentFrame;
-    function F(e) {
+    var H = F.ReactCurrentOwner, be = F.ReactDebugCurrentFrame;
+    function D(e) {
       if (e) {
-        var r = e._owner, n = G(e.type, e._source, r ? r.type : null);
+        var r = e._owner, n = N(e.type, e._source, r ? r.type : null);
         be.setExtraStackFrame(n);
@@ -726,3 +736,3 @@ } else
         if (H.current) {
-          var e = C(H.current.type);
+          var e = k(H.current.type);
           if (e)
@@ -748,3 +758,3 @@ return `
     var Re = {};
-    function cr(e) {
+    function ur(e) {
       {
@@ -766,3 +776,3 @@ var r = Ee();
         e._store.validated = !0;
-        var n = cr(r);
+        var n = ur(r);
         if (Re[n])
@@ -772,3 +782,3 @@ return;
         var i = "";
-        e && e._owner && e._owner !== H.current && (i = " It was passed a child from " + C(e._owner.type) + "."), F(e), R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, i), F(null);
+        e && e._owner && e._owner !== H.current && (i = " It was passed a child from " + k(e._owner.type) + "."), D(e), R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, i), D(null);
       }
@@ -790,8 +800,8 @@ }
           if (typeof u == "function" && u !== e.entries)
-            for (var d = u.call(e), c; !(c = d.next()).done; )
-              Z(c.value) && _e(c.value, r);
+            for (var l = u.call(e), o; !(o = l.next()).done; )
+              Z(o.value) && _e(o.value, r);
         }
       }
     }
-    function ur(e) {
+    function cr(e) {
       {
@@ -804,3 +814,3 @@ var r = e.type;
           n = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === b || // Note: Memo only checks outer props here.
+        else if (typeof r == "object" && (r.$$typeof === y || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
@@ -812,7 +822,7 @@ r.$$typeof === w))
         if (n) {
-          var i = C(r);
+          var i = k(r);
           ze(n, e.props, "prop", i, e);
         } else if (r.PropTypes !== void 0 && !X) {
           X = !0;
-          var u = C(r);
+          var u = k(r);
           R("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
@@ -828,13 +838,13 @@ }
           if (i !== "children" && i !== "key") {
-            F(e), R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), F(null);
+            D(e), R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), D(null);
             break;
           }
         }
-        e.ref !== null && (F(e), R("Invalid attribute `ref` supplied to `React.Fragment`."), F(null));
+        e.ref !== null && (D(e), R("Invalid attribute `ref` supplied to `React.Fragment`."), D(null));
       }
     }
-    function Se(e, r, n, i, u, d) {
+    function Se(e, r, n, i, u, l) {
       {
-        var c = Ge(e);
-        if (!c) {
+        var o = Ne(e);
+        if (!o) {
           var s = "";
@@ -844,9 +854,9 @@ (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (s += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
           _ ? s += _ : s += Ee();
-          var g;
-          e === null ? g = "null" : J(e) ? g = "array" : e !== void 0 && e.$$typeof === t ? (g = "<" + (C(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, s);
+          var h;
+          e === null ? h = "null" : J(e) ? h = "array" : e !== void 0 && e.$$typeof === t ? (h = "<" + (k(e.type) || "Unknown") + " />", s = " Did you accidentally export a JSX literal instead of a component?") : h = typeof e, R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", h, s);
         }
-        var m = sr(e, r, n, u, d);
-        if (m == null)
-          return m;
-        if (c) {
+        var p = sr(e, r, n, u, l);
+        if (p == null)
+          return p;
+        if (o) {
           var S = r.children;
@@ -864,3 +874,3 @@ if (S !== void 0)
         }
-        return e === o ? lr(m) : ur(m), m;
+        return e === c ? lr(p) : cr(p), p;
       }
@@ -875,3 +885,3 @@ }
     var vr = dr, hr = fr;
-    M.Fragment = o, M.jsx = vr, M.jsxs = hr;
+    M.Fragment = c, M.jsx = vr, M.jsxs = hr;
   }()), M;
@@ -889,52 +899,52 @@ }
  */
-var Ce;
+var ke;
 function Er() {
-  if (Ce)
+  if (ke)
     return W;
-  Ce = 1;
-  var v = ke, t = Symbol.for("react.element"), a = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, l = v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, f = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function y(h, b, P) {
-    var E, w = {}, j = null, $ = null;
-    P !== void 0 && (j = "" + P), b.key !== void 0 && (j = "" + b.key), b.ref !== void 0 && ($ = b.ref);
-    for (E in b)
-      o.call(b, E) && !f.hasOwnProperty(E) && (w[E] = b[E]);
-    if (h && h.defaultProps)
-      for (E in b = h.defaultProps, b)
-        w[E] === void 0 && (w[E] = b[E]);
-    return { $$typeof: t, type: h, key: j, ref: $, props: w, _owner: l.current };
+  ke = 1;
+  var f = Oe, t = Symbol.for("react.element"), a = Symbol.for("react.fragment"), c = Object.prototype.hasOwnProperty, g = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, v = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function E(d, y, P) {
+    var b, w = {}, x = null, $ = null;
+    P !== void 0 && (x = "" + P), y.key !== void 0 && (x = "" + y.key), y.ref !== void 0 && ($ = y.ref);
+    for (b in y)
+      c.call(y, b) && !v.hasOwnProperty(b) && (w[b] = y[b]);
+    if (d && d.defaultProps)
+      for (b in y = d.defaultProps, y)
+        w[b] === void 0 && (w[b] = y[b]);
+    return { $$typeof: t, type: d, key: x, ref: $, props: w, _owner: g.current };
   }
-  return W.Fragment = a, W.jsx = y, W.jsxs = y, W;
+  return W.Fragment = a, W.jsx = E, W.jsxs = E, W;
 }
 process.env.NODE_ENV === "production" ? ee.exports = Er() : ee.exports = br();
 var Rr = ee.exports;
-function Sr(v) {
+function Sr(f) {
   const {
     src: t,
     canvasStyle: a,
-    runtime: o,
-    editMode: l,
-    verbose: f,
-    onLoad: y,
-    onLoadError: h,
-    onStateChange: b,
+    runtime: c,
+    editMode: g,
+    verbose: v,
+    onLoad: E,
+    onLoadError: d,
+    onStateChange: y,
     onSelect: P
-  } = v, E = Q(null);
+  } = f, b = Q(null);
   return Pe(() => {
-    E.current && (async () => {
-      const w = new Fe({
+    b.current && (async () => {
+      const w = new De({
         src: t ?? "https://s3.vgg.cool/test/vgg.daruma",
-        runtime: o ?? "https://s5.vgg.cool/runtime/latest",
-        editMode: l,
-        verbose: f,
-        canvas: E.current,
+        runtime: c ?? "https://s5.vgg.cool/runtime/latest",
+        editMode: g,
+        verbose: v,
+        canvas: b.current,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        onLoad: y,
-        onLoadError: h,
+        onLoad: E,
+        onLoadError: d,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        onStateChange: b,
+        onStateChange: y,
         onSelect: P
       });
-      await w.load(), w.state === O.Ready ? (await w.render(), y == null || y(
+      await w.load(), w.state === C.Ready ? (await w.render(), E == null || E(
         {
@@ -945,3 +955,3 @@ type: T.Load,
         w
-      )) : h == null || h({
+      )) : d == null || d({
         type: T.LoadError,
@@ -951,9 +961,9 @@ data: ""
     })();
-  }, []), /* @__PURE__ */ Rr.jsx("canvas", { style: a, ref: E });
+  }, []), /* @__PURE__ */ Rr.jsx("canvas", { style: a, ref: b });
 }
 export {
   T as EventType,
-  O as State,
+  C as State,
   Sr as VGGRender,
   wr as useVGG
 };

package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
@@ -39,3 +39,3 @@ "files": [
   "dependencies": {
-    "@verygoodgraphics/vgg-wasm": "^0.0.6",
+    "@verygoodgraphics/vgg-wasm": "^0.0.7",
     "react": "^18.2.0",
@@ -42,0 +42,0 @@ "react-dom": "^18.2.0"

No alert changes

Improved metrics

Lines of code

1041

increased by0.77%

Worsened metrics

Total package byte prevSize

56132

decreased by-0.49%

Dependency changes

• + Added@verygoodgraphics/vgg-wasm@0.0.7(transitive)

• - Removed@verygoodgraphics/vgg-wasm@0.0.6(transitive)

• Updated@verygoodgraphics/vgg-wasm@^0.0.7