@shopify/react-native-skia 0.1.146 → 0.1.148

package/lib/commonjs/dom/types/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DrawingContext = require("./DrawingContext");
+
+Object.keys(_DrawingContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DrawingContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DrawingContext[key];
+    }
+  });
+});
+
+var _Node = require("./Node");
+
+Object.keys(_Node).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Node[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Node[key];
+    }
+  });
+});
+
+var _NodeType = require("./NodeType");
+
+Object.keys(_NodeType).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NodeType[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NodeType[key];
+    }
+  });
+});
+
+var _SkDOM = require("./SkDOM");
+
+Object.keys(_SkDOM).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SkDOM[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SkDOM[key];
+    }
+  });
+});
+
+var _Common = require("./Common");
+
+Object.keys(_Common).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Common[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Common[key];
+    }
+  });
+});
+
+var _Drawings = require("./Drawings");
+
+Object.keys(_Drawings).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Drawings[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Drawings[key];
+    }
+  });
+});
+
+var _ImageFilters = require("./ImageFilters");
+
+Object.keys(_ImageFilters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageFilters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ImageFilters[key];
+    }
+  });
+});
+
+var _ColorFilters = require("./ColorFilters");
+
+Object.keys(_ColorFilters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ColorFilters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ColorFilters[key];
+    }
+  });
+});
+
+var _MaskFilters = require("./MaskFilters");
+
+Object.keys(_MaskFilters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MaskFilters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MaskFilters[key];
+    }
+  });
+});
+
+var _PathEffects = require("./PathEffects");
+
+Object.keys(_PathEffects).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PathEffects[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PathEffects[key];
+    }
+  });
+});
+
+var _Shaders = require("./Shaders");
+
+Object.keys(_Shaders).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Shaders[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Shaders[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/dom/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./DrawingContext\";\nexport * from \"./Node\";\nexport * from \"./NodeType\";\nexport * from \"./SkDOM\";\nexport * from \"./Common\";\nexport * from \"./Drawings\";\nexport * from \"./ImageFilters\";\nexport * from \"./ColorFilters\";\nexport * from \"./MaskFilters\";\nexport * from \"./PathEffects\";\nexport * from \"./Shaders\";\n"]}

package/lib/commonjs/index.js

@@ -96,4 +96,30 @@ Object.keys(_animation).forEach(function (key) {
     }
   });
 });
+
+var _types = require("./dom/types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+
+var _nodes = require("./dom/nodes");
+
+Object.keys(_nodes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _nodes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _nodes[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import \"./skia/NativeSetup\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./values\";\nexport * from \"./animation\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import \"./skia/NativeSetup\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./values\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"]}

package/lib/commonjs/renderer/Canvas.js

@@ -17,7 +17,7 @@ var _Skia = require("../skia/Skia");
 
 var _HostConfig = require("./HostConfig");
 
-var _nodes = require("./nodes");
+var _Container = require("./Container");
 
 var _DependencyManager = require("./DependencyManager");
 
@@ -67,7 +67,9 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
   const innerRef = useCanvasRef();
   const ref = useCombinedRefs(forwardedRef, innerRef);
   const [tick, setTick] = (0, _react.useState)(0);
-  const redraw = (0, _react.useCallback)(() => setTick(t => t + 1), []);
+  const redraw = (0, _react.useCallback)(() => {
+    setTick(t => t + 1);
+  }, []);
   const registerValues = (0, _react.useCallback)(values => {
     if (ref.current === null) {
       throw new Error("Canvas ref is not set");
@@ -75,7 +77,9 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
 
     return ref.current.registerValues(values);
   }, [ref]);
-  const container = (0, _react.useMemo)(() => new _nodes.Container(new _DependencyManager.DependencyManager(registerValues), redraw), [redraw, registerValues]);
+  const container = (0, _react.useMemo)(() => {
+    return new _Container.Container(_Skia.Skia, new _DependencyManager.DependencyManager(registerValues), redraw);
+  }, [redraw, registerValues]);
   const root = (0, _react.useMemo)(() => skiaReconciler.createContainer(container, 0, false, null), [container]); // Render effect
 
   (0, _react.useEffect)(() => {

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","update","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","size","width","height","canvasCtx","Skia","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","registerValues","values","current","Error","Container","DependencyManager","createContainer","paint","Paint","onDraw","canvas","info","timestamp","touches","reset","ctx","opacity","center","x","y","draw","remove","refs","targetRef","React","useRef","useEffect","forEach"],"mappings":";;;;;;;AAAA;;AAgBA;;AAEA;;AAEA;;AACA;;AAGA;;AAEA;;AACA;;AACA;;;;;;;;AAHA;AAKO,MAAMA,cAAc,GAAG,8BAAgBC,wBAAhB,CAAvB;;AAEPD,cAAc,CAACE,kBAAf,CAAkC;AAChCC,EAAAA,UAAU,EAAE,CADoB;AAEhCC,EAAAA,OAAO,EAAE,OAFuB;AAGhCC,EAAAA,mBAAmB,EAAE;AAHW,CAAlC;;AAMA,MAAMC,MAAM,GAAG,CAACC,OAAD,EAAqBC,IAArB,EAAuCC,SAAvC,KAAgE;AAC7ET,EAAAA,cAAc,CAACU,eAAf,CAA+BH,OAA/B,EAAwCC,IAAxC,EAA8C,IAA9C,EAAoD,MAAM;AACxD,2BAAU,iBAAV;AACAC,IAAAA,SAAS,CAACE,MAAV,CAAiBC,MAAjB;AACD,GAHD;AAID,CALD;;AAOO,MAAMC,YAAY,GAAG,MAAM,mBAAiB,IAAjB,CAA3B;;;AAQA,MAAMC,MAAM,gBAAG,uBACpB,OAA4CC,YAA5C,KAA6D;AAAA,MAA5D;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,KAAnB;AAA0BC,IAAAA,IAA1B;AAAgCC,IAAAA;AAAhC,GAA4D;AAC3D,QAAMC,IAAI,GAAG,wBAAS;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAT,CAAb;AACA,QAAMC,SAAS,GAAG,oBAAQ,OAAO;AAAEC,IAAAA,IAAI,EAAJA,UAAF;AAAQJ,IAAAA;AAAR,GAAP,CAAR,EAAgC,CAACA,IAAD,CAAhC,CAAlB;AACA,QAAMK,QAAQ,GAAGb,YAAY,EAA7B;AACA,QAAMc,GAAG,GAAGC,eAAe,CAACb,YAAD,EAAeW,QAAf,CAA3B;AACA,QAAM,CAACG,IAAD,EAAOC,OAAP,IAAkB,qBAAS,CAAT,CAAxB;AACA,QAAMC,MAAM,GAAG,wBAAY,MAAMD,OAAO,CAAEE,CAAD,IAAOA,CAAC,GAAG,CAAZ,CAAzB,EAAyC,EAAzC,CAAf;AAEA,QAAMC,cAAc,GAAG,wBACpBC,MAAD,IAAuC;AACrC,QAAIP,GAAG,CAACQ,OAAJ,KAAgB,IAApB,EAA0B;AACxB,YAAM,IAAIC,KAAJ,CAAU,uBAAV,CAAN;AACD;;AACD,WAAOT,GAAG,CAACQ,OAAJ,CAAYF,cAAZ,CAA2BC,MAA3B,CAAP;AACD,GANoB,EAOrB,CAACP,GAAD,CAPqB,CAAvB;AAUA,QAAMlB,SAAS,GAAG,oBAChB,MAAM,IAAI4B,gBAAJ,CAAc,IAAIC,oCAAJ,CAAsBL,cAAtB,CAAd,EAAqDF,MAArD,CADU,EAEhB,CAACA,MAAD,EAASE,cAAT,CAFgB,CAAlB;AAKA,QAAMzB,IAAI,GAAG,oBACX,MAAMR,cAAc,CAACuC,eAAf,CAA+B9B,SAA/B,EAA0C,CAA1C,EAA6C,KAA7C,EAAoD,IAApD,CADK,EAEX,CAACA,SAAD,CAFW,CAAb,CAvB2D,CA2B3D;;AACA,wBAAU,MAAM;AACdH,IAAAA,MAAM,eACJ,6BAAC,yBAAD;AAAgB,MAAA,KAAK,EAAEkB;AAAvB,OAAmCR,QAAnC,CADI,EAEJR,IAFI,EAGJC,SAHI,CAAN;AAKD,GAND,EAMG,CAACO,QAAD,EAAWR,IAAX,EAAiBuB,MAAjB,EAAyBtB,SAAzB,EAAoCe,SAApC,CANH;AAQA,QAAMgB,KAAK,GAAG,oBAAQ,MAAMf,WAAKgB,KAAL,EAAd,EAA4B,EAA5B,CAAd,CApC2D,CAsC3D;;AACA,QAAMC,MAAM,GAAG,4BACb,CAACC,MAAD,EAASC,IAAT,KAAkB;AAChB;AACA,UAAM;AAAEtB,MAAAA,KAAF;AAASC,MAAAA,MAAT;AAAiBsB,MAAAA;AAAjB,QAA+BD,IAArC;;AACA,QAAIxB,OAAJ,EAAa;AACXA,MAAAA,OAAO,CAACwB,IAAI,CAACE,OAAN,CAAP;AACD;;AACD,QACExB,KAAK,KAAKE,SAAS,CAACH,IAAV,CAAec,OAAf,CAAuBb,KAAjC,IACAC,MAAM,KAAKC,SAAS,CAACH,IAAV,CAAec,OAAf,CAAuBZ,MAFpC,EAGE;AACAC,MAAAA,SAAS,CAACH,IAAV,CAAec,OAAf,GAAyB;AAAEb,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAAzB;AACD;;AACDiB,IAAAA,KAAK,CAACO,KAAN;AACA,UAAMC,GAAG,GAAG;AACV1B,MAAAA,KADU;AAEVC,MAAAA,MAFU;AAGVsB,MAAAA,SAHU;AAIVF,MAAAA,MAJU;AAKVH,MAAAA,KALU;AAMVS,MAAAA,OAAO,EAAE,CANC;AAOVtB,MAAAA,GAPU;AAQVuB,MAAAA,MAAM,EAAE;AAAEC,QAAAA,CAAC,EAAE7B,KAAK,GAAG,CAAb;AAAgB8B,QAAAA,CAAC,EAAE7B,MAAM,GAAG;AAA5B,OARE;AASVE,MAAAA,IAAI,EAAJA;AATU,KAAZ;AAWAhB,IAAAA,SAAS,CAAC4C,IAAV,CAAeL,GAAf;AACD,GA1BY,EA2Bb,CAACnB,IAAD,EAAOT,OAAP,CA3Ba,CAAf;AA8BA,wBAAU,MAAM;AACd,WAAO,MAAM;AACXpB,MAAAA,cAAc,CAACU,eAAf,CAA+B,IAA/B,EAAqCF,IAArC,EAA2C,IAA3C,EAAiD,MAAM;AACrDC,QAAAA,SAAS,CAACE,MAAV,CAAiB2C,MAAjB;AACD,OAFD;AAGD,KAJD;AAKD,GAND,EAMG,CAAC7C,SAAD,EAAYD,IAAZ,CANH;AAQA,sBACE,6BAAC,eAAD;AACE,IAAA,GAAG,EAAEmB,GADP;AAEE,IAAA,KAAK,EAAEV,KAFT;AAGE,IAAA,MAAM,EAAEyB,MAHV;AAIE,IAAA,IAAI,EAAEvB,IAJR;AAKE,IAAA,KAAK,EAAED;AALT,IADF;AASD,CAvFmB,CAAf;AA0FP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,MAAMU,eAAe,GAAG,YAEnB;AAAA,oCADA2B,IACA;AADAA,IAAAA,IACA;AAAA;;AACH,QAAMC,SAAS,GAAGC,eAAMC,MAAN,CAAgB,IAAhB,CAAlB;;AACAD,iBAAME,SAAN,CAAgB,MAAM;AACpBJ,IAAAA,IAAI,CAACK,OAAL,CAAcjC,GAAD,IAAS;AACpB,UAAIA,GAAJ,EAAS;AACP,YAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;AAC7BA,UAAAA,GAAG,CAAC6B,SAAS,CAACrB,OAAX,CAAH;AACD,SAFD,MAEO;AACLR,UAAAA,GAAG,CAACQ,OAAJ,GAAcqB,SAAS,CAACrB,OAAxB;AACD;AACF;AACF,KARD;AASD,GAVD,EAUG,CAACoB,IAAD,CAVH;;AAWA,SAAOC,SAAP;AACD,CAhBD","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport { Skia } from \"../skia/Skia\";\nimport type { SkiaValue } from \"../values\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\nimport { CanvasProvider } from \"./useCanvas\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n    container.depMgr.update();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch }, forwardedRef) => {\n    const size = useValue({ width: 0, height: 0 });\n    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current === null) {\n          throw new Error(\"Canvas ref is not set\");\n        }\n        return ref.current.registerValues(values);\n      },\n      [ref]\n    );\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(registerValues), redraw),\n      [redraw, registerValues]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    const paint = useMemo(() => Skia.Paint(), []);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.size.current.width ||\n          height !== canvasCtx.size.current.height\n        ) {\n          canvasCtx.size.current = { width, height };\n        }\n        paint.reset();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: { x: width / 2, y: height / 2 },\n          Skia,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        skiaReconciler.updateContainer(null, root, null, () => {\n          container.depMgr.remove();\n        });\n      };\n    }, [container, root]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","update","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","size","width","height","canvasCtx","Skia","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","registerValues","values","current","Error","Container","DependencyManager","createContainer","paint","Paint","onDraw","canvas","info","timestamp","touches","reset","ctx","opacity","center","x","y","draw","remove","refs","targetRef","React","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport { Skia } from \"../skia/Skia\";\nimport type { SkiaValue } from \"../values\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./Container\";\nimport { DependencyManager } from \"./DependencyManager\";\nimport { CanvasProvider } from \"./useCanvas\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n    container.depMgr.update();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch }, forwardedRef) => {\n    const size = useValue({ width: 0, height: 0 });\n    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => {\n      setTick((t) => t + 1);\n    }, []);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current === null) {\n          throw new Error(\"Canvas ref is not set\");\n        }\n        return ref.current.registerValues(values);\n      },\n      [ref]\n    );\n\n    const container = useMemo(() => {\n      return new Container(Skia, new DependencyManager(registerValues), redraw);\n    }, [redraw, registerValues]);\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    const paint = useMemo(() => Skia.Paint(), []);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.size.current.width ||\n          height !== canvasCtx.size.current.height\n        ) {\n          canvasCtx.size.current = { width, height };\n        }\n        paint.reset();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: { x: width / 2, y: height / 2 },\n          Skia,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        skiaReconciler.updateContainer(null, root, null, () => {\n          container.depMgr.remove();\n        });\n      };\n    }, [container, root]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/commonjs/renderer/Container.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _nodes = require("../dom/nodes");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Container {
+  constructor(Skia, depMgr, redraw) {
+    this.depMgr = depMgr;
+    this.redraw = redraw;
+
+    _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "Sk", void 0);
+
+    this.Sk = new _nodes.JsiSkDOM({
+      Skia,
+      depMgr
+    });
+    this._root = this.Sk.Group();
+  }
+
+  draw(ctx) {
+    this._root.render(ctx);
+  }
+
+  get root() {
+    return this._root;
+  }
+
+}
+
+exports.Container = Container;
+//# sourceMappingURL=Container.js.map

package/lib/commonjs/renderer/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Container.tsx"],"names":["Container","constructor","Skia","depMgr","redraw","Sk","JsiSkDOM","_root","Group","draw","ctx","render","root"],"mappings":";;;;;;;AAAA;;;;AAWO,MAAMA,SAAN,CAAgB;AAGrBC,EAAAA,WAAW,CACTC,IADS,EAEFC,MAFE,EAGFC,MAHE,EAIT;AAAA,SAFOD,MAEP,GAFOA,MAEP;AAAA,SADOC,MACP,GADOA,MACP;;AAAA;;AAAA;;AACA,SAAKC,EAAL,GAAU,IAAIC,eAAJ,CAAa;AAAEJ,MAAAA,IAAF;AAAQC,MAAAA;AAAR,KAAb,CAAV;AACA,SAAKI,KAAL,GAAa,KAAKF,EAAL,CAAQG,KAAR,EAAb;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,SAAKH,KAAL,CAAWI,MAAX,CAAkBD,GAAlB;AACD;;AAEO,MAAJE,IAAI,GAAG;AACT,WAAO,KAAKL,KAAZ;AACD;;AAlBoB","sourcesContent":["import { JsiSkDOM } from \"../dom/nodes\";\nimport type {\n  GroupProps,\n  DrawingContext,\n  RenderNode,\n  SkDOM,\n} from \"../dom/types\";\nimport type { Skia } from \"../skia/types\";\n\nimport type { DependencyManager } from \"./DependencyManager\";\n\nexport class Container {\n  private _root: RenderNode<GroupProps>;\n  public Sk: SkDOM;\n  constructor(\n    Skia: Skia,\n    public depMgr: DependencyManager,\n    public redraw: () => void\n  ) {\n    this.Sk = new JsiSkDOM({ Skia, depMgr });\n    this._root = this.Sk.Group();\n  }\n\n  draw(ctx: DrawingContext) {\n    this._root.render(ctx);\n  }\n\n  get root() {\n    return this._root;\n  }\n}\n"]}

package/lib/commonjs/renderer/DependencyManager.js

@@ -21,6 +21,10 @@ class DependencyManager {
 
     this.registerValues = registerValues;
   }
+
+  unsubscribeNodes(nodes) {
+    nodes.forEach(n => this.unsubscribeNode(n));
+  }
   /**
    * Call to unsubscribe all value listeners from the given node based
    * on the current list of subscriptions for the node. This function
@@ -150,27 +154,35 @@ exports.DependencyManager = DependencyManager;
 const initializePropertySubscriptions = (node, props) => {
   const nodePropSubscriptions = [];
   (0, _typeddash.mapKeys)(props).forEach(key => {
+    if (key === "children") {
+      return;
+    }
+
     const propvalue = props[key];
 
     if ((0, _processors.isValue)(propvalue)) {
       // Subscribe to changes
       nodePropSubscriptions.push({
         value: propvalue,
-        mutator: v => node.resolvedProps[key] = v
+        mutator: v => {
+          node.setProp(key, v);
+        }
       }); // Set initial value
 
-      node.resolvedProps[key] = propvalue.current;
+      node.setProp(key, propvalue.current);
     } else if ((0, _processors.isSelector)(propvalue)) {
       // Subscribe to changes
       nodePropSubscriptions.push({
         value: propvalue.value,
-        mutator: v => node.resolvedProps[key] = propvalue.selector(v)
+        mutator: v => {
+          node.setProp(key, propvalue.selector(v));
+        }
       }); // Set initial value
 
-      node.resolvedProps[key] = propvalue.selector(propvalue.value.current);
+      node.setProp(key, propvalue.selector(propvalue.value.current));
     } else {
       // Set initial value
-      node.resolvedProps[key] = propvalue;
+      node.setProp(key, propvalue);
     }
   });
   return nodePropSubscriptions;

package/lib/commonjs/renderer/DependencyManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DependencyManager.tsx"],"names":["DependencyManager","constructor","registerValues","Map","unsubscribeNode","node","subscriptions","Array","from","values","filter","p","nodes","has","forEach","si","delete","size","unsubscribe","Error","element","entries","find","_","sub","subscribeNode","props","propSubscriptions","initializePropertySubscriptions","length","ps","subscriptionState","get","value","addListener","v","mutators","m","set","map","mutator","update","unregisterDependantValues","keys","remove","clear","nodePropSubscriptions","key","propvalue","push","resolvedProps","current","selector"],"mappings":"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","sourcesContent":["import type { SkiaValue } from \"../values\";\n\nimport type { Node } from \"./nodes\";\nimport type { AnimatedProps } from \"./processors\";\nimport { isSelector, isValue } from \"./processors\";\nimport { mapKeys } from \"./typeddash\";\n\ntype Unsubscribe = () => void;\ntype Mutator = (value: unknown) => void;\n\ntype SubscriptionState = {\n  nodes: Map<Node, Mutator[]>;\n  unsubscribe: null | Unsubscribe;\n};\n\nexport class DependencyManager {\n  registerValues: (values: Array<SkiaValue<unknown>>) => () => void;\n  subscriptions: Map<SkiaValue<unknown>, SubscriptionState> = new Map();\n  unregisterDependantValues: null | Unsubscribe = null;\n\n  constructor(\n    registerValues: (values: Array<SkiaValue<unknown>>) => () => void\n  ) {\n    this.registerValues = registerValues;\n  }\n\n  /**\n   * Call to unsubscribe all value listeners from the given node based\n   * on the current list of subscriptions for the node. This function\n   * is typically called when the node is unmounted or when one or more\n   * properties have changed.\n   * @param node Node to unsubscribe value listeners from\n   */\n  unsubscribeNode(node: Node) {\n    const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>\n      p.nodes.has(node)\n    );\n\n    if (subscriptions) {\n      subscriptions.forEach((si) => {\n        // Delete node from subscription\n        si.nodes.delete(node);\n\n        // Remove subscription if there are no listeneres left on the value\n        if (si.nodes.size === 0) {\n          // There are no more nodes subscribing to this value, we can call\n          // unsubscribe on it.\n          if (!si.unsubscribe) {\n            throw new Error(\"Failed to unsubscribe to value subscription\");\n          }\n          si.unsubscribe && si.unsubscribe();\n\n          // Remove from subscription states as well\n          const element = Array.from(this.subscriptions.entries()).find(\n            ([_, sub]) => sub === si\n          );\n          if (!element) {\n            throw new Error(\"Failed to find value subscription\");\n          }\n          if (!this.subscriptions.delete(element[0])) {\n            throw new Error(\"Failed to delete value subscription\");\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Adds listeners to the provided values so that the node is notified\n   * when a value changes. This is done in an optimized way so that this\n   * class only needs to listen to the value once and then forwards the\n   * change to the node and its listener. This method is typically called\n   * when the node is mounted and when one or more props on the node changes.\n   * @param node Node to subscribe to value changes for\n   * @param props Node's properties\n   * @param onResolveProp Callback when a property value changes\n   */\n  subscribeNode<P extends Record<string, unknown>>(\n    node: Node,\n    props: AnimatedProps<P>\n  ) {\n    // Get mutators from node's properties\n    const propSubscriptions = initializePropertySubscriptions(node, props);\n    if (propSubscriptions.length === 0) {\n      return;\n    }\n\n    // Install all mutators for the node\n    propSubscriptions.forEach((ps) => {\n      // Do we already have a state for this SkiaValue\n      let subscriptionState = this.subscriptions.get(ps.value);\n      if (!subscriptionState) {\n        // Let's create a new subscription state for the skia value\n        subscriptionState = {\n          nodes: new Map(),\n          unsubscribe: null,\n        };\n        // Add single subscription to the new value\n        subscriptionState.unsubscribe = ps.value.addListener((v) => {\n          subscriptionState!.nodes.forEach((mutators) =>\n            mutators.forEach((m) => m(v))\n          );\n        });\n        this.subscriptions.set(ps.value, subscriptionState);\n      }\n      // subscription mutators\n      subscriptionState.nodes.set(\n        node,\n        propSubscriptions\n          .filter((m) => m.value === ps.value)\n          .map((m) => m.mutator)\n      );\n    });\n  }\n\n  /**\n   * Called when the hosting container is mounted or updated. This ensures that we have\n   * a ref to the underlying SkiaView so that we can registers redraw listeners\n   * on values used in the current View automatically.\n   */\n  update() {\n    // Remove any previous registrations\n    if (this.unregisterDependantValues) {\n      this.unregisterDependantValues();\n    }\n\n    // Register redraw requests on the SkiaView for each unique value\n    this.unregisterDependantValues = this.registerValues(\n      Array.from(this.subscriptions.keys())\n    );\n  }\n\n  /**\n   * Called when the hosting container is unmounted or recreated. This ensures that we remove\n   * all subscriptions to Skia values so that we don't have any listeners left after\n   * the component is removed.\n   */\n  remove() {\n    // 1) Unregister redraw requests\n    if (this.unregisterDependantValues) {\n      this.unregisterDependantValues();\n      this.unregisterDependantValues = null;\n    }\n\n    // 2) Unregister nodes\n    Array.from(this.subscriptions.values()).forEach((si) => {\n      Array.from(si.nodes.keys()).forEach((node) => this.unsubscribeNode(node));\n    });\n\n    // 3) Clear the rest of the subscriptions\n    this.subscriptions.clear();\n  }\n}\n\nconst initializePropertySubscriptions = <P,>(\n  node: Node<P>,\n  props: AnimatedProps<P>\n) => {\n  const nodePropSubscriptions: Array<{\n    value: SkiaValue<unknown>;\n    mutator: Mutator;\n  }> = [];\n\n  mapKeys(props).forEach((key) => {\n    const propvalue = props[key];\n\n    if (isValue(propvalue)) {\n      // Subscribe to changes\n      nodePropSubscriptions.push({\n        value: propvalue,\n        mutator: (v) => (node.resolvedProps[key] = v as P[typeof key]),\n      });\n      // Set initial value\n      node.resolvedProps[key] = (propvalue as SkiaValue<P[typeof key]>).current;\n    } else if (isSelector(propvalue)) {\n      // Subscribe to changes\n      nodePropSubscriptions.push({\n        value: propvalue.value,\n        mutator: (v) =>\n          (node.resolvedProps[key] = propvalue.selector(v) as P[typeof key]),\n      });\n      // Set initial value\n      node.resolvedProps[key] = propvalue.selector(\n        propvalue.value.current\n      ) as P[typeof key];\n    } else {\n      // Set initial value\n      node.resolvedProps[key] = propvalue as P[typeof key];\n    }\n  });\n\n  return nodePropSubscriptions;\n};\n"]}
+{"version":3,"sources":["DependencyManager.tsx"],"names":["DependencyManager","constructor","registerValues","Map","unsubscribeNodes","nodes","forEach","n","unsubscribeNode","node","subscriptions","Array","from","values","filter","p","has","si","delete","size","unsubscribe","Error","element","entries","find","_","sub","subscribeNode","props","propSubscriptions","initializePropertySubscriptions","length","ps","subscriptionState","get","value","addListener","v","mutators","m","set","map","mutator","update","unregisterDependantValues","keys","remove","clear","nodePropSubscriptions","key","propvalue","push","setProp","current","selector"],"mappings":"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","sourcesContent":["import type { Node } from \"../dom/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport type { AnimatedProps } from \"./processors\";\nimport { isSelector, isValue } from \"./processors\";\nimport { mapKeys } from \"./typeddash\";\n\ntype Unsubscribe = () => void;\ntype Mutator = (value: unknown) => void;\n\ntype SubscriptionState = {\n  nodes: Map<Node<unknown>, Mutator[]>;\n  unsubscribe: null | Unsubscribe;\n};\n\nexport class DependencyManager {\n  registerValues: (values: Array<SkiaValue<unknown>>) => () => void;\n  subscriptions: Map<SkiaValue<unknown>, SubscriptionState> = new Map();\n  unregisterDependantValues: null | Unsubscribe = null;\n\n  constructor(\n    registerValues: (values: Array<SkiaValue<unknown>>) => () => void\n  ) {\n    this.registerValues = registerValues;\n  }\n\n  unsubscribeNodes(nodes: Node<unknown>[]) {\n    nodes.forEach((n) => this.unsubscribeNode(n));\n  }\n\n  /**\n   * Call to unsubscribe all value listeners from the given node based\n   * on the current list of subscriptions for the node. This function\n   * is typically called when the node is unmounted or when one or more\n   * properties have changed.\n   * @param node Node to unsubscribe value listeners from\n   */\n  unsubscribeNode(node: Node<unknown>) {\n    const subscriptions = Array.from(this.subscriptions.values()).filter((p) =>\n      p.nodes.has(node)\n    );\n\n    if (subscriptions) {\n      subscriptions.forEach((si) => {\n        // Delete node from subscription\n        si.nodes.delete(node);\n\n        // Remove subscription if there are no listeneres left on the value\n        if (si.nodes.size === 0) {\n          // There are no more nodes subscribing to this value, we can call\n          // unsubscribe on it.\n          if (!si.unsubscribe) {\n            throw new Error(\"Failed to unsubscribe to value subscription\");\n          }\n          si.unsubscribe && si.unsubscribe();\n\n          // Remove from subscription states as well\n          const element = Array.from(this.subscriptions.entries()).find(\n            ([_, sub]) => sub === si\n          );\n          if (!element) {\n            throw new Error(\"Failed to find value subscription\");\n          }\n          if (!this.subscriptions.delete(element[0])) {\n            throw new Error(\"Failed to delete value subscription\");\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Adds listeners to the provided values so that the node is notified\n   * when a value changes. This is done in an optimized way so that this\n   * class only needs to listen to the value once and then forwards the\n   * change to the node and its listener. This method is typically called\n   * when the node is mounted and when one or more props on the node changes.\n   * @param node Node to subscribe to value changes for\n   * @param props Node's properties\n   * @param onResolveProp Callback when a property value changes\n   */\n  subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>) {\n    // Get mutators from node's properties\n    const propSubscriptions = initializePropertySubscriptions(node, props);\n    if (propSubscriptions.length === 0) {\n      return;\n    }\n\n    // Install all mutators for the node\n    propSubscriptions.forEach((ps) => {\n      // Do we already have a state for this SkiaValue\n      let subscriptionState = this.subscriptions.get(ps.value);\n      if (!subscriptionState) {\n        // Let's create a new subscription state for the skia value\n        subscriptionState = {\n          nodes: new Map(),\n          unsubscribe: null,\n        };\n        // Add single subscription to the new value\n        subscriptionState.unsubscribe = ps.value.addListener((v) => {\n          subscriptionState!.nodes.forEach((mutators) =>\n            mutators.forEach((m) => m(v))\n          );\n        });\n        this.subscriptions.set(ps.value, subscriptionState);\n      }\n      // subscription mutators\n      subscriptionState.nodes.set(\n        node,\n        propSubscriptions\n          .filter((m) => m.value === ps.value)\n          .map((m) => m.mutator)\n      );\n    });\n  }\n\n  /**\n   * Called when the hosting container is mounted or updated. This ensures that we have\n   * a ref to the underlying SkiaView so that we can registers redraw listeners\n   * on values used in the current View automatically.\n   */\n  update() {\n    // Remove any previous registrations\n    if (this.unregisterDependantValues) {\n      this.unregisterDependantValues();\n    }\n\n    // Register redraw requests on the SkiaView for each unique value\n    this.unregisterDependantValues = this.registerValues(\n      Array.from(this.subscriptions.keys())\n    );\n  }\n\n  /**\n   * Called when the hosting container is unmounted or recreated. This ensures that we remove\n   * all subscriptions to Skia values so that we don't have any listeners left after\n   * the component is removed.\n   */\n  remove() {\n    // 1) Unregister redraw requests\n    if (this.unregisterDependantValues) {\n      this.unregisterDependantValues();\n      this.unregisterDependantValues = null;\n    }\n\n    // 2) Unregister nodes\n    Array.from(this.subscriptions.values()).forEach((si) => {\n      Array.from(si.nodes.keys()).forEach((node) => this.unsubscribeNode(node));\n    });\n\n    // 3) Clear the rest of the subscriptions\n    this.subscriptions.clear();\n  }\n}\n\nconst initializePropertySubscriptions = <P,>(\n  node: Node<P>,\n  props: AnimatedProps<P>\n) => {\n  const nodePropSubscriptions: Array<{\n    value: SkiaValue<unknown>;\n    mutator: Mutator;\n  }> = [];\n\n  mapKeys(props).forEach((key) => {\n    if (key === \"children\") {\n      return;\n    }\n    const propvalue = props[key];\n\n    if (isValue(propvalue)) {\n      // Subscribe to changes\n      nodePropSubscriptions.push({\n        value: propvalue,\n        mutator: (v) => {\n          node.setProp(key, v as P[typeof key]);\n        },\n      });\n      // Set initial value\n      node.setProp(key, (propvalue as SkiaValue<P[typeof key]>).current);\n    } else if (isSelector(propvalue)) {\n      // Subscribe to changes\n      nodePropSubscriptions.push({\n        value: propvalue.value,\n        mutator: (v) => {\n          node.setProp(key, propvalue.selector(v) as P[typeof key]);\n        },\n      });\n      // Set initial value\n      node.setProp(\n        key,\n        propvalue.selector(propvalue.value.current) as P[typeof key]\n      );\n    } else {\n      // Set initial value\n      node.setProp(key, propvalue as P[typeof key]);\n    }\n  });\n\n  return nodePropSubscriptions;\n};\n"]}

package/lib/commonjs/renderer/HostComponents.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNode = void 0;
+
+var _types = require("../dom/types");
+
+var _typeddash = require("./typeddash");
+
+const createNode = (container, type, props) => {
+  const {
+    Sk
+  } = container;
+
+  switch (type) {
+    case _types.NodeType.Group:
+      return Sk.Group(props);
+
+    case _types.NodeType.Paint:
+      return Sk.Paint(props);
+    // Drawings
+
+    case _types.NodeType.Fill:
+      return Sk.Fill(props);
+
+    case _types.NodeType.Image:
+      return Sk.Image(props);
+
+    case _types.NodeType.Circle:
+      return Sk.Circle(props);
+
+    case _types.NodeType.Path:
+      return Sk.Path(props);
+
+    case _types.NodeType.Drawing:
+      return Sk.CustomDrawing(props);
+
+    case _types.NodeType.Line:
+      return Sk.Line(props);
+
+    case _types.NodeType.Oval:
+      return Sk.Oval(props);
+
+    case _types.NodeType.Patch:
+      return Sk.Patch(props);
+
+    case _types.NodeType.Points:
+      return Sk.Points(props);
+
+    case _types.NodeType.Rect:
+      return Sk.Rect(props);
+
+    case _types.NodeType.RRect:
+      return Sk.RRect(props);
+
+    case _types.NodeType.Vertices:
+      return Sk.Vertices(props);
+
+    case _types.NodeType.Text:
+      return Sk.Text(props);
+
+    case _types.NodeType.TextPath:
+      return Sk.TextPath(props);
+
+    case _types.NodeType.TextBlob:
+      return Sk.TextBlob(props);
+
+    case _types.NodeType.Glyphs:
+      return Sk.Glyphs(props);
+
+    case _types.NodeType.DiffRect:
+      return Sk.DiffRect(props);
+
+    case _types.NodeType.Picture:
+      return Sk.Picture(props);
+
+    case _types.NodeType.ImageSVG:
+      return Sk.ImageSVG(props);
+    // Mask Filter
+
+    case _types.NodeType.BlurMaskFilter:
+      return Sk.BlurMaskFilter(props);
+    // Image Filter
+
+    case _types.NodeType.BlendImageFilter:
+      return Sk.BlendImageFilter(props);
+
+    case _types.NodeType.BlurImageFilter:
+      return Sk.BlurImageFilter(props);
+
+    case _types.NodeType.OffsetImageFilter:
+      return Sk.OffsetImageFilter(props);
+
+    case _types.NodeType.DropShadowImageFilter:
+      return Sk.DropShadowImageFilter(props);
+
+    case _types.NodeType.DisplacementMapImageFilter:
+      return Sk.DisplacementMapImageFilter(props);
+
+    case _types.NodeType.MorphologyImageFilter:
+      return Sk.MorphologyImageFilter(props);
+
+    case _types.NodeType.RuntimeShaderImageFilter:
+      return Sk.RuntimeShaderImageFilter(props);
+    // Color Filter
+
+    case _types.NodeType.MatrixColorFilter:
+      return Sk.MatrixColorFilter(props);
+
+    case _types.NodeType.BlendColorFilter:
+      return Sk.BlendColorFilter(props);
+
+    case _types.NodeType.LerpColorFilter:
+      return Sk.LerpColorFilter(props);
+
+    case _types.NodeType.LumaColorFilter:
+      return Sk.LumaColorFilter();
+
+    case _types.NodeType.LinearToSRGBGammaColorFilter:
+      return Sk.LinearToSRGBGammaColorFilter();
+
+    case _types.NodeType.SRGBToLinearGammaColorFilter:
+      return Sk.SRGBToLinearGammaColorFilter();
+    // Shader
+
+    case _types.NodeType.Shader:
+      return Sk.Shader(props);
+
+    case _types.NodeType.ImageShader:
+      return Sk.ImageShader(props);
+
+    case _types.NodeType.ColorShader:
+      return Sk.ColorShader(props);
+
+    case _types.NodeType.Turbulence:
+      return Sk.Turbulence(props);
+
+    case _types.NodeType.FractalNoise:
+      return Sk.FractalNoise(props);
+
+    case _types.NodeType.LinearGradient:
+      return Sk.LinearGradient(props);
+
+    case _types.NodeType.RadialGradient:
+      return Sk.RadialGradient(props);
+
+    case _types.NodeType.SweepGradient:
+      return Sk.SweepGradient(props);
+
+    case _types.NodeType.TwoPointConicalGradient:
+      return Sk.TwoPointConicalGradient(props);
+    // Path Effect
+
+    case _types.NodeType.CornerPathEffect:
+      return Sk.CornerPathEffect(props);
+
+    case _types.NodeType.DiscretePathEffect:
+      return Sk.DiscretePathEffect(props);
+
+    case _types.NodeType.DashPathEffect:
+      return Sk.DashPathEffect(props);
+
+    case _types.NodeType.Path1DPathEffect:
+      return Sk.Path1DPathEffect(props);
+
+    case _types.NodeType.Path2DPathEffect:
+      return Sk.Path2DPathEffect(props);
+
+    case _types.NodeType.SumPathEffect:
+      return Sk.SumPathEffect();
+
+    case _types.NodeType.Line2DPathEffect:
+      return Sk.Line2DPathEffect(props);
+    // Mixed
+
+    case _types.NodeType.Blend:
+      return Sk.Blend(props);
+
+    case _types.NodeType.BackdropFilter:
+      return Sk.BackdropFilter(props);
+
+    case _types.NodeType.Box:
+      return Sk.Box(props);
+
+    case _types.NodeType.BoxShadow:
+      return Sk.BoxShadow(props);
+
+    default:
+      return (0, _typeddash.exhaustiveCheck)(type);
+  }
+};
+
+exports.createNode = createNode;
+//# sourceMappingURL=HostComponents.js.map

package/lib/commonjs/renderer/HostComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HostComponents.ts"],"names":["createNode","container","type","props","Sk","NodeType","Group","Paint","Fill","Image","Circle","Path","Drawing","CustomDrawing","Line","Oval","Patch","Points","Rect","RRect","Vertices","Text","TextPath","TextBlob","Glyphs","DiffRect","Picture","ImageSVG","BlurMaskFilter","BlendImageFilter","BlurImageFilter","OffsetImageFilter","DropShadowImageFilter","DisplacementMapImageFilter","MorphologyImageFilter","RuntimeShaderImageFilter","MatrixColorFilter","BlendColorFilter","LerpColorFilter","LumaColorFilter","LinearToSRGBGammaColorFilter","SRGBToLinearGammaColorFilter","Shader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","CornerPathEffect","DiscretePathEffect","DashPathEffect","Path1DPathEffect","Path2DPathEffect","SumPathEffect","Line2DPathEffect","Blend","BackdropFilter","Box","BoxShadow"],"mappings":";;;;;;;AAEA;;AA0DA;;AAgFO,MAAMA,UAAU,GAAG,CACxBC,SADwB,EAExBC,IAFwB,EAIxBC,KAJwB,KAKrB;AACH,QAAM;AAAEC,IAAAA;AAAF,MAASH,SAAf;;AACA,UAAQC,IAAR;AACE,SAAKG,gBAASC,KAAd;AACE,aAAOF,EAAE,CAACE,KAAH,CAASH,KAAT,CAAP;;AACF,SAAKE,gBAASE,KAAd;AACE,aAAOH,EAAE,CAACG,KAAH,CAASJ,KAAT,CAAP;AACF;;AACA,SAAKE,gBAASG,IAAd;AACE,aAAOJ,EAAE,CAACI,IAAH,CAAQL,KAAR,CAAP;;AACF,SAAKE,gBAASI,KAAd;AACE,aAAOL,EAAE,CAACK,KAAH,CAASN,KAAT,CAAP;;AACF,SAAKE,gBAASK,MAAd;AACE,aAAON,EAAE,CAACM,MAAH,CAAUP,KAAV,CAAP;;AACF,SAAKE,gBAASM,IAAd;AACE,aAAOP,EAAE,CAACO,IAAH,CAAQR,KAAR,CAAP;;AACF,SAAKE,gBAASO,OAAd;AACE,aAAOR,EAAE,CAACS,aAAH,CAAiBV,KAAjB,CAAP;;AACF,SAAKE,gBAASS,IAAd;AACE,aAAOV,EAAE,CAACU,IAAH,CAAQX,KAAR,CAAP;;AACF,SAAKE,gBAASU,IAAd;AACE,aAAOX,EAAE,CAACW,IAAH,CAAQZ,KAAR,CAAP;;AACF,SAAKE,gBAASW,KAAd;AACE,aAAOZ,EAAE,CAACY,KAAH,CAASb,KAAT,CAAP;;AACF,SAAKE,gBAASY,MAAd;AACE,aAAOb,EAAE,CAACa,MAAH,CAAUd,KAAV,CAAP;;AACF,SAAKE,gBAASa,IAAd;AACE,aAAOd,EAAE,CAACc,IAAH,CAAQf,KAAR,CAAP;;AACF,SAAKE,gBAASc,KAAd;AACE,aAAOf,EAAE,CAACe,KAAH,CAAShB,KAAT,CAAP;;AACF,SAAKE,gBAASe,QAAd;AACE,aAAOhB,EAAE,CAACgB,QAAH,CAAYjB,KAAZ,CAAP;;AACF,SAAKE,gBAASgB,IAAd;AACE,aAAOjB,EAAE,CAACiB,IAAH,CAAQlB,KAAR,CAAP;;AACF,SAAKE,gBAASiB,QAAd;AACE,aAAOlB,EAAE,CAACkB,QAAH,CAAYnB,KAAZ,CAAP;;AACF,SAAKE,gBAASkB,QAAd;AACE,aAAOnB,EAAE,CAACmB,QAAH,CAAYpB,KAAZ,CAAP;;AACF,SAAKE,gBAASmB,MAAd;AACE,aAAOpB,EAAE,CAACoB,MAAH,CAAUrB,KAAV,CAAP;;AACF,SAAKE,gBAASoB,QAAd;AACE,aAAOrB,EAAE,CAACqB,QAAH,CAAYtB,KAAZ,CAAP;;AACF,SAAKE,gBAASqB,OAAd;AACE,aAAOtB,EAAE,CAACsB,OAAH,CAAWvB,KAAX,CAAP;;AACF,SAAKE,gBAASsB,QAAd;AACE,aAAOvB,EAAE,CAACuB,QAAH,CAAYxB,KAAZ,CAAP;AACF;;AACA,SAAKE,gBAASuB,cAAd;AACE,aAAOxB,EAAE,CAACwB,cAAH,CAAkBzB,KAAlB,CAAP;AACF;;AACA,SAAKE,gBAASwB,gBAAd;AACE,aAAOzB,EAAE,CAACyB,gBAAH,CAAoB1B,KAApB,CAAP;;AACF,SAAKE,gBAASyB,eAAd;AACE,aAAO1B,EAAE,CAAC0B,eAAH,CAAmB3B,KAAnB,CAAP;;AACF,SAAKE,gBAAS0B,iBAAd;AACE,aAAO3B,EAAE,CAAC2B,iBAAH,CAAqB5B,KAArB,CAAP;;AACF,SAAKE,gBAAS2B,qBAAd;AACE,aAAO5B,EAAE,CAAC4B,qBAAH,CAAyB7B,KAAzB,CAAP;;AACF,SAAKE,gBAAS4B,0BAAd;AACE,aAAO7B,EAAE,CAAC6B,0BAAH,CAA8B9B,KAA9B,CAAP;;AACF,SAAKE,gBAAS6B,qBAAd;AACE,aAAO9B,EAAE,CAAC8B,qBAAH,CAAyB/B,KAAzB,CAAP;;AACF,SAAKE,gBAAS8B,wBAAd;AACE,aAAO/B,EAAE,CAAC+B,wBAAH,CAA4BhC,KAA5B,CAAP;AACF;;AACA,SAAKE,gBAAS+B,iBAAd;AACE,aAAOhC,EAAE,CAACgC,iBAAH,CAAqBjC,KAArB,CAAP;;AACF,SAAKE,gBAASgC,gBAAd;AACE,aAAOjC,EAAE,CAACiC,gBAAH,CAAoBlC,KAApB,CAAP;;AACF,SAAKE,gBAASiC,eAAd;AACE,aAAOlC,EAAE,CAACkC,eAAH,CAAmBnC,KAAnB,CAAP;;AACF,SAAKE,gBAASkC,eAAd;AACE,aAAOnC,EAAE,CAACmC,eAAH,EAAP;;AACF,SAAKlC,gBAASmC,4BAAd;AACE,aAAOpC,EAAE,CAACoC,4BAAH,EAAP;;AACF,SAAKnC,gBAASoC,4BAAd;AACE,aAAOrC,EAAE,CAACqC,4BAAH,EAAP;AACF;;AACA,SAAKpC,gBAASqC,MAAd;AACE,aAAOtC,EAAE,CAACsC,MAAH,CAAUvC,KAAV,CAAP;;AACF,SAAKE,gBAASsC,WAAd;AACE,aAAOvC,EAAE,CAACuC,WAAH,CAAexC,KAAf,CAAP;;AACF,SAAKE,gBAASuC,WAAd;AACE,aAAOxC,EAAE,CAACwC,WAAH,CAAezC,KAAf,CAAP;;AACF,SAAKE,gBAASwC,UAAd;AACE,aAAOzC,EAAE,CAACyC,UAAH,CAAc1C,KAAd,CAAP;;AACF,SAAKE,gBAASyC,YAAd;AACE,aAAO1C,EAAE,CAAC0C,YAAH,CAAgB3C,KAAhB,CAAP;;AACF,SAAKE,gBAAS0C,cAAd;AACE,aAAO3C,EAAE,CAAC2C,cAAH,CAAkB5C,KAAlB,CAAP;;AACF,SAAKE,gBAAS2C,cAAd;AACE,aAAO5C,EAAE,CAAC4C,cAAH,CAAkB7C,KAAlB,CAAP;;AACF,SAAKE,gBAAS4C,aAAd;AACE,aAAO7C,EAAE,CAAC6C,aAAH,CAAiB9C,KAAjB,CAAP;;AACF,SAAKE,gBAAS6C,uBAAd;AACE,aAAO9C,EAAE,CAAC8C,uBAAH,CAA2B/C,KAA3B,CAAP;AACF;;AACA,SAAKE,gBAAS8C,gBAAd;AACE,aAAO/C,EAAE,CAAC+C,gBAAH,CAAoBhD,KAApB,CAAP;;AACF,SAAKE,gBAAS+C,kBAAd;AACE,aAAOhD,EAAE,CAACgD,kBAAH,CAAsBjD,KAAtB,CAAP;;AACF,SAAKE,gBAASgD,cAAd;AACE,aAAOjD,EAAE,CAACiD,cAAH,CAAkBlD,KAAlB,CAAP;;AACF,SAAKE,gBAASiD,gBAAd;AACE,aAAOlD,EAAE,CAACkD,gBAAH,CAAoBnD,KAApB,CAAP;;AACF,SAAKE,gBAASkD,gBAAd;AACE,aAAOnD,EAAE,CAACmD,gBAAH,CAAoBpD,KAApB,CAAP;;AACF,SAAKE,gBAASmD,aAAd;AACE,aAAOpD,EAAE,CAACoD,aAAH,EAAP;;AACF,SAAKnD,gBAASoD,gBAAd;AACE,aAAOrD,EAAE,CAACqD,gBAAH,CAAoBtD,KAApB,CAAP;AACF;;AACA,SAAKE,gBAASqD,KAAd;AACE,aAAOtD,EAAE,CAACsD,KAAH,CAASvD,KAAT,CAAP;;AACF,SAAKE,gBAASsD,cAAd;AACE,aAAOvD,EAAE,CAACuD,cAAH,CAAkBxD,KAAlB,CAAP;;AACF,SAAKE,gBAASuD,GAAd;AACE,aAAOxD,EAAE,CAACwD,GAAH,CAAOzD,KAAP,CAAP;;AACF,SAAKE,gBAASwD,SAAd;AACE,aAAOzD,EAAE,CAACyD,SAAH,CAAa1D,KAAb,CAAP;;AACF;AACE,aAAO,gCAAgBD,IAAhB,CAAP;AAvHJ;AAyHD,CAhIM","sourcesContent":["import type { ForwardedRef } from \"react\";\n\nimport { NodeType } from \"../dom/types\";\nimport type {\n  CircleProps,\n  DrawingNodeProps,\n  ImageProps,\n  PaintProps,\n  PathProps,\n  CustomDrawingNodeProps,\n  LineProps,\n  OvalProps,\n  DiffRectProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextProps,\n  VerticesProps,\n  BlurMaskFilterProps,\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  DisplacementMapImageFilterProps,\n  DropShadowImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n  MatrixColorFilterProps,\n  ShaderProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  GroupProps,\n  PatchProps,\n  BlendColorFilterProps,\n  DashPathEffectProps,\n  DiscretePathEffectProps,\n  CornerPathEffectProps,\n  Line2DPathEffectProps,\n  Path1DPathEffectProps,\n  Path2DPathEffectProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  TwoPointConicalGradientProps,\n  TurbulenceProps,\n  SweepGradientProps,\n  RadialGradientProps,\n  ColorProps,\n  PictureProps,\n  ImageSVGProps,\n  LerpColorFilterProps,\n  BoxProps,\n  BoxShadowProps,\n} from \"../dom/types\";\nimport type { ChildrenProps } from \"../dom/types/Common\";\nimport type {\n  BlendProps,\n  MorphologyImageFilterProps,\n} from \"../dom/types/ImageFilters\";\nimport type { PaintNode } from \"../dom/nodes/PaintNode\";\n\nimport type { Container } from \"./Container\";\nimport { exhaustiveCheck } from \"./typeddash\";\nimport type { SkiaProps } from \"./processors\";\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      skGroup: SkiaProps<GroupProps>;\n      skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };\n\n      // Drawings\n      skFill: SkiaProps<DrawingNodeProps>;\n      skImage: SkiaProps<ImageProps>;\n      skCircle: SkiaProps<CircleProps>;\n      skPath: SkiaProps<PathProps>;\n      skDrawing: SkiaProps<CustomDrawingNodeProps>;\n      skLine: SkiaProps<LineProps>;\n      skOval: SkiaProps<OvalProps>;\n      skPatch: SkiaProps<PatchProps>;\n      skPoints: SkiaProps<PointsProps>;\n      skRect: SkiaProps<RectProps>;\n      skRRect: SkiaProps<RoundedRectProps>;\n      skVertices: SkiaProps<VerticesProps>;\n      skText: SkiaProps<TextProps>;\n      skTextPath: SkiaProps<TextPathProps>;\n      skTextBlob: SkiaProps<TextBlobProps>;\n      skGlyphs: SkiaProps<GlyphsProps>;\n      skDiffRect: SkiaProps<DiffRectProps>;\n      skPicture: SkiaProps<PictureProps>;\n      skImageSVG: SkiaProps<ImageSVGProps>;\n\n      // BlurMaskFilters\n      skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;\n\n      // ImageFilters\n      skBlendImageFilter: SkiaProps<BlendImageFilterProps>;\n      skBlurImageFilter: SkiaProps<BlurImageFilterProps>;\n      skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;\n      skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;\n      skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;\n      skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;\n      skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;\n\n      // ColorFilters\n      skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;\n      skBlendColorFilter: SkiaProps<BlendColorFilterProps>;\n      skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;\n      skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;\n      skLumaColorFilter: SkiaProps<ChildrenProps>;\n      skLerpColorFilter: SkiaProps<LerpColorFilterProps>;\n\n      // Shaders\n      skShader: SkiaProps<ShaderProps>;\n      skImageShader: SkiaProps<ImageShaderProps>;\n      skColorShader: SkiaProps<ColorProps>;\n      skTurbulence: SkiaProps<TurbulenceProps>;\n      skFractalNoise: SkiaProps<TurbulenceProps>;\n      skLinearGradient: SkiaProps<LinearGradientProps>;\n      skRadialGradient: SkiaProps<RadialGradientProps>;\n      skSweepGradient: SkiaProps<SweepGradientProps>;\n      skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;\n\n      // Path Effects\n      skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;\n      skDashPathEffect: SkiaProps<DashPathEffectProps>;\n      skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;\n      skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;\n      skCornerPathEffect: SkiaProps<CornerPathEffectProps>;\n      skSumPathEffect: ChildrenProps;\n      skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;\n\n      // Mixed declarations/drawings\n      skBlend: SkiaProps<BlendProps>;\n      skBackdropFilter: SkiaProps<ChildrenProps>;\n      skBox: SkiaProps<BoxProps>;\n      skBoxShadow: SkiaProps<BoxShadowProps>;\n    }\n  }\n}\n\nexport const createNode = (\n  container: Container,\n  type: NodeType,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props: any\n) => {\n  const { Sk } = container;\n  switch (type) {\n    case NodeType.Group:\n      return Sk.Group(props);\n    case NodeType.Paint:\n      return Sk.Paint(props);\n    // Drawings\n    case NodeType.Fill:\n      return Sk.Fill(props);\n    case NodeType.Image:\n      return Sk.Image(props);\n    case NodeType.Circle:\n      return Sk.Circle(props);\n    case NodeType.Path:\n      return Sk.Path(props);\n    case NodeType.Drawing:\n      return Sk.CustomDrawing(props);\n    case NodeType.Line:\n      return Sk.Line(props);\n    case NodeType.Oval:\n      return Sk.Oval(props);\n    case NodeType.Patch:\n      return Sk.Patch(props);\n    case NodeType.Points:\n      return Sk.Points(props);\n    case NodeType.Rect:\n      return Sk.Rect(props);\n    case NodeType.RRect:\n      return Sk.RRect(props);\n    case NodeType.Vertices:\n      return Sk.Vertices(props);\n    case NodeType.Text:\n      return Sk.Text(props);\n    case NodeType.TextPath:\n      return Sk.TextPath(props);\n    case NodeType.TextBlob:\n      return Sk.TextBlob(props);\n    case NodeType.Glyphs:\n      return Sk.Glyphs(props);\n    case NodeType.DiffRect:\n      return Sk.DiffRect(props);\n    case NodeType.Picture:\n      return Sk.Picture(props);\n    case NodeType.ImageSVG:\n      return Sk.ImageSVG(props);\n    // Mask Filter\n    case NodeType.BlurMaskFilter:\n      return Sk.BlurMaskFilter(props);\n    // Image Filter\n    case NodeType.BlendImageFilter:\n      return Sk.BlendImageFilter(props);\n    case NodeType.BlurImageFilter:\n      return Sk.BlurImageFilter(props);\n    case NodeType.OffsetImageFilter:\n      return Sk.OffsetImageFilter(props);\n    case NodeType.DropShadowImageFilter:\n      return Sk.DropShadowImageFilter(props);\n    case NodeType.DisplacementMapImageFilter:\n      return Sk.DisplacementMapImageFilter(props);\n    case NodeType.MorphologyImageFilter:\n      return Sk.MorphologyImageFilter(props);\n    case NodeType.RuntimeShaderImageFilter:\n      return Sk.RuntimeShaderImageFilter(props);\n    // Color Filter\n    case NodeType.MatrixColorFilter:\n      return Sk.MatrixColorFilter(props);\n    case NodeType.BlendColorFilter:\n      return Sk.BlendColorFilter(props);\n    case NodeType.LerpColorFilter:\n      return Sk.LerpColorFilter(props);\n    case NodeType.LumaColorFilter:\n      return Sk.LumaColorFilter();\n    case NodeType.LinearToSRGBGammaColorFilter:\n      return Sk.LinearToSRGBGammaColorFilter();\n    case NodeType.SRGBToLinearGammaColorFilter:\n      return Sk.SRGBToLinearGammaColorFilter();\n    // Shader\n    case NodeType.Shader:\n      return Sk.Shader(props);\n    case NodeType.ImageShader:\n      return Sk.ImageShader(props);\n    case NodeType.ColorShader:\n      return Sk.ColorShader(props);\n    case NodeType.Turbulence:\n      return Sk.Turbulence(props);\n    case NodeType.FractalNoise:\n      return Sk.FractalNoise(props);\n    case NodeType.LinearGradient:\n      return Sk.LinearGradient(props);\n    case NodeType.RadialGradient:\n      return Sk.RadialGradient(props);\n    case NodeType.SweepGradient:\n      return Sk.SweepGradient(props);\n    case NodeType.TwoPointConicalGradient:\n      return Sk.TwoPointConicalGradient(props);\n    // Path Effect\n    case NodeType.CornerPathEffect:\n      return Sk.CornerPathEffect(props);\n    case NodeType.DiscretePathEffect:\n      return Sk.DiscretePathEffect(props);\n    case NodeType.DashPathEffect:\n      return Sk.DashPathEffect(props);\n    case NodeType.Path1DPathEffect:\n      return Sk.Path1DPathEffect(props);\n    case NodeType.Path2DPathEffect:\n      return Sk.Path2DPathEffect(props);\n    case NodeType.SumPathEffect:\n      return Sk.SumPathEffect();\n    case NodeType.Line2DPathEffect:\n      return Sk.Line2DPathEffect(props);\n    // Mixed\n    case NodeType.Blend:\n      return Sk.Blend(props);\n    case NodeType.BackdropFilter:\n      return Sk.BackdropFilter(props);\n    case NodeType.Box:\n      return Sk.Box(props);\n    case NodeType.BoxShadow:\n      return Sk.BoxShadow(props);\n    default:\n      return exhaustiveCheck(type);\n  }\n};\n"]}