@shopify/react-native-skia 0.1.142 → 0.1.146

package/lib/module/renderer/DependencyManager.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["DependencyManager.tsx"],"names":["isSelector","isValue","DependencyManager","constructor","ref","Map","unSubscribeNode","node","subscription","subscriptions","get","unsubscribe","delete","subscribeNode","props","values","Object","filter","v","map","value","length","set","subscribe","current","Error","forEach","registerValues","clear"],"mappings":";;AAKA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,cAApC;AAMA,OAAO,MAAMC,iBAAN,CAAwB;AAO7BC,EAAAA,WAAW,CAACC,GAAD,EAA2B;AAAA;;AAAA,2CAFlC,IAAIC,GAAJ,EAEkC;;AACpC,SAAKD,GAAL,GAAWA,GAAX;AACD;;AAEDE,EAAAA,eAAe,CAACC,IAAD,EAAa;AAC1B,UAAMC,YAAY,GAAG,KAAKC,aAAL,CAAmBC,GAAnB,CAAuBH,IAAvB,CAArB;;AACA,QAAIC,YAAY,IAAIA,YAAY,CAACG,WAAjC,EAA8C;AAC5CH,MAAAA,YAAY,CAACG,WAAb;AACD;;AACD,SAAKF,aAAL,CAAmBG,MAAnB,CAA0BL,IAA1B;AACD;;AAEDM,EAAAA,aAAa,CAACN,IAAD,EAAaO,KAAb,EAA2B;AACtC,UAAMC,MAAM,GAAGC,MAAM,CAACD,MAAP,CAAcD,KAAd,EACZG,MADY,CACJC,CAAD,IAAOjB,OAAO,CAACiB,CAAD,CAAP,IAAclB,UAAU,CAACkB,CAAD,CAD1B,EAEZC,GAFY,CAEPD,CAAD,IAAQlB,UAAU,CAACkB,CAAD,CAAV,GAAgBA,CAAC,CAACE,KAAlB,GAA2BF,CAF3B,CAAf;;AAIA,QAAIH,MAAM,CAACM,MAAP,GAAgB,CAApB,EAAuB;AACrB,WAAKZ,aAAL,CAAmBa,GAAnB,CAAuBf,IAAvB,EAA6B;AAAEQ,QAAAA,MAAF;AAAUJ,QAAAA,WAAW,EAAE;AAAvB,OAA7B;AACD;AACF;;AAEDY,EAAAA,SAAS,GAAG;AACV,QAAI,KAAKnB,GAAL,CAASoB,OAAT,KAAqB,IAAzB,EAA+B;AAC7B,YAAM,IAAIC,KAAJ,CAAU,uBAAV,CAAN;AACD;;AACD,SAAKhB,aAAL,CAAmBiB,OAAnB,CAA4BlB,YAAD,IAAkB;AAC3C,UAAIA,YAAY,CAACG,WAAb,KAA6B,IAAjC,EAAuC;AACrCH,QAAAA,YAAY,CAACG,WAAb,GAA2B,KAAKP,GAAL,CAASoB,OAAT,CAAkBG,cAAlB,CACzBnB,YAAY,CAACO,MADY,CAA3B;AAGD;AACF,KAND;AAOD;;AAEDJ,EAAAA,WAAW,GAAG;AACZ,SAAKF,aAAL,CAAmBiB,OAAnB,CAA2B,QAAqB;AAAA,UAApB;AAAEf,QAAAA;AAAF,OAAoB;;AAC9C,UAAIA,WAAJ,EAAiB;AACfA,QAAAA,WAAW;AACZ;AACF,KAJD;AAKA,SAAKF,aAAL,CAAmBmB,KAAnB;AACD;;AAjD4B","sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { SkiaView } from \"../views\";\nimport type { SkiaValue } from \"../values\";\n\nimport { isSelector, isValue } from \"./processors\";\nimport type { Node } from \"./nodes\";\n\ntype Unsubscribe = () => void;\ntype Props = { [key: string]: unknown };\n\nexport class DependencyManager {\n  ref: RefObject<SkiaView>;\n  subscriptions: Map<\n    Node,\n    { values: SkiaValue<unknown>[]; unsubscribe: null | Unsubscribe }\n  > = new Map();\n\n  constructor(ref: RefObject<SkiaView>) {\n    this.ref = ref;\n  }\n\n  unSubscribeNode(node: Node) {\n    const subscription = this.subscriptions.get(node);\n    if (subscription && subscription.unsubscribe) {\n      subscription.unsubscribe();\n    }\n    this.subscriptions.delete(node);\n  }\n\n  subscribeNode(node: Node, props: Props) {\n    const values = Object.values(props)\n      .filter((v) => isValue(v) || isSelector(v))\n      .map((v) => (isSelector(v) ? v.value : (v as SkiaValue<unknown>)));\n\n    if (values.length > 0) {\n      this.subscriptions.set(node, { values, unsubscribe: null });\n    }\n  }\n\n  subscribe() {\n    if (this.ref.current === null) {\n      throw new Error(\"Canvas ref is not set\");\n    }\n    this.subscriptions.forEach((subscription) => {\n      if (subscription.unsubscribe === null) {\n        subscription.unsubscribe = this.ref.current!.registerValues(\n          subscription.values\n        );\n      }\n    });\n  }\n\n  unsubscribe() {\n    this.subscriptions.forEach(({ unsubscribe }) => {\n      if (unsubscribe) {\n        unsubscribe();\n      }\n    });\n    this.subscriptions.clear();\n  }\n}\n"]}
+{"version":3,"sources":["DependencyManager.tsx"],"names":["isSelector","isValue","mapKeys","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"]}

package/lib/module/renderer/HostConfig.js

@@ -63,7 +63,7 @@ const removeNode = (parent, child) => {
   bustBranchMemoization(parent);
   const index = parent.children.indexOf(child);
   parent.children.splice(index, 1);
-  child.depMgr.unSubscribeNode(child); // unsubscribe to all children as well
+  child.depMgr.unsubscribeNode(child); // unsubscribe to all children as well
 
   for (const c of child.children) {
     removeNode(child, c);
@@ -209,7 +209,23 @@ export const skHostConfig = {
     }
 
     bustBranchMemoization(instance);
-    instance.props = nextProps;
+
+    if (instance instanceof DrawingNode) {
+      const {
+        onDraw,
+        skipProcessing,
+        ...props
+      } = nextProps;
+      instance.props = props;
+    } else if (instance instanceof DeclarationNode) {
+      const {
+        onDeclare,
+        ...props
+      } = nextProps;
+      instance.props = props;
+    } else {
+      throw new Error("Unsupported instance commitUpdate " + instance.constructor.name);
+    }
   },
 
   commitTextUpdate: (_textInstance, _oldText, _newText) => {//  textInstance.instance = newText;

package/lib/module/renderer/HostConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HostConfig.ts"],"names":["DeclarationNode","DrawingNode","NodeType","exhaustiveCheck","shallowEq","DEBUG","debug","console","log","allChildrenAreMemoized","node","memoizable","child","children","memoized","bustBranchMemoization","parent","ancestor","bustBranchMemoizable","appendNode","push","removeNode","index","indexOf","splice","depMgr","unSubscribeNode","c","insertBefore","before","beforeIndex","createNode","container","type","props","Drawing","onDraw","skipProcessing","p1","Declaration","onDeclare","p2","skHostConfig","now","Date","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","finalizeContainerChildren","resetAfterCommit","redraw","getPublicInstance","prepareUpdate","instance","oldProps","newProps","propsAreEqual","commitUpdate","_updatePayload","prevProps","nextProps","_internalHandle","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","preparePortalMount","removeChild","removeChildFromContainer","insertInContainerBefore"],"mappings":"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","sourcesContent":["/*global NodeJS*/\nimport type { HostConfig } from \"react-reconciler\";\n\nimport type { Node, Container, DeclarationProps, DrawingProps } from \"./nodes\";\nimport { DeclarationNode, DrawingNode, NodeType } from \"./nodes\";\nimport { exhaustiveCheck, shallowEq } from \"./typeddash\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDeclaration: DeclarationProps<any>;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDrawing: DrawingProps<any>;\n    }\n  }\n}\n\ntype Instance = Node;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Props = any;\ntype TextInstance = Node;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = true;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\nconst allChildrenAreMemoized = (node: Instance) => {\n  if (!node.memoizable) {\n    return false;\n  }\n  for (const child of node.children) {\n    if (!child.memoized) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst bustBranchMemoization = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoized = null;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst bustBranchMemoizable = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoizable = false;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst appendNode = (parent: Node, child: Node) => {\n  child.parent = parent;\n  bustBranchMemoization(parent);\n  if (!child.memoizable) {\n    bustBranchMemoizable(parent);\n  }\n  if (!parent.memoizable) {\n    child.memoizable = false;\n  }\n  parent.children.push(child);\n};\n\nconst removeNode = (parent: Node, child: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  parent.children.splice(index, 1);\n  child.depMgr.unSubscribeNode(child);\n  // unsubscribe to all children as well\n  for (const c of child.children) {\n    removeNode(child, c);\n  }\n};\n\nconst insertBefore = (parent: Node, child: Node, before: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  if (index !== -1) {\n    parent.children.splice(index, 1);\n  }\n  const beforeIndex = parent.children.indexOf(before);\n  parent.children.splice(beforeIndex, 0, child);\n};\n\nconst createNode = (container: Container, type: NodeType, props: Props) => {\n  switch (type) {\n    case NodeType.Drawing:\n      const { onDraw, skipProcessing, ...p1 } = props;\n      return new DrawingNode(container.depMgr, onDraw, skipProcessing, p1);\n    case NodeType.Declaration:\n      const { onDeclare, ...p2 } = props;\n      return new DeclarationNode(container.depMgr, onDeclare, p2);\n    default:\n      // TODO: here we need to throw a nice error message\n      // This is the error that will show up when the user uses nodes not supported by Skia (View, Audio, etc)\n      return exhaustiveCheck(type);\n  }\n};\n\nexport const skHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  now: Date.now,\n\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\", container, child);\n    appendNode(container, child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Node) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    props,\n    container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    return createNode(container, type, props) as Node;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  finalizeContainerChildren: () => {\n    debug(\"finalizeContainerChildren\");\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    instance,\n    type,\n    oldProps,\n    newProps,\n    _rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual && !instance.memoizable) {\n      return null;\n    }\n    debug(\"update \", type);\n    return true;\n  },\n\n  commitUpdate(\n    instance,\n    _updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {\n      return;\n    }\n    bustBranchMemoization(instance);\n    instance.props = nextProps;\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.children.splice(0);\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  insertInContainerBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n};\n"]}
+{"version":3,"sources":["HostConfig.ts"],"names":["DeclarationNode","DrawingNode","NodeType","exhaustiveCheck","shallowEq","DEBUG","debug","console","log","allChildrenAreMemoized","node","memoizable","child","children","memoized","bustBranchMemoization","parent","ancestor","bustBranchMemoizable","appendNode","push","removeNode","index","indexOf","splice","depMgr","unsubscribeNode","c","insertBefore","before","beforeIndex","createNode","container","type","props","Drawing","onDraw","skipProcessing","p1","Declaration","onDeclare","p2","skHostConfig","now","Date","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","finalizeContainerChildren","resetAfterCommit","redraw","getPublicInstance","prepareUpdate","instance","oldProps","newProps","propsAreEqual","commitUpdate","_updatePayload","prevProps","nextProps","_internalHandle","constructor","name","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","preparePortalMount","removeChild","removeChildFromContainer","insertInContainerBefore"],"mappings":"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","sourcesContent":["/*global NodeJS*/\nimport type { HostConfig } from \"react-reconciler\";\n\nimport type { Node, Container, DeclarationProps, DrawingProps } from \"./nodes\";\nimport { DeclarationNode, DrawingNode, NodeType } from \"./nodes\";\nimport { exhaustiveCheck, shallowEq } from \"./typeddash\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDeclaration: DeclarationProps<any>;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDrawing: DrawingProps<any>;\n    }\n  }\n}\n\ntype Instance = Node;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Props = any;\ntype TextInstance = Node;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = true;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\nconst allChildrenAreMemoized = (node: Instance) => {\n  if (!node.memoizable) {\n    return false;\n  }\n  for (const child of node.children) {\n    if (!child.memoized) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst bustBranchMemoization = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoized = null;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst bustBranchMemoizable = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoizable = false;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst appendNode = (parent: Node, child: Node) => {\n  child.parent = parent;\n  bustBranchMemoization(parent);\n  if (!child.memoizable) {\n    bustBranchMemoizable(parent);\n  }\n  if (!parent.memoizable) {\n    child.memoizable = false;\n  }\n  parent.children.push(child);\n};\n\nconst removeNode = (parent: Node, child: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  parent.children.splice(index, 1);\n  child.depMgr.unsubscribeNode(child);\n  // unsubscribe to all children as well\n  for (const c of child.children) {\n    removeNode(child, c);\n  }\n};\n\nconst insertBefore = (parent: Node, child: Node, before: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  if (index !== -1) {\n    parent.children.splice(index, 1);\n  }\n  const beforeIndex = parent.children.indexOf(before);\n  parent.children.splice(beforeIndex, 0, child);\n};\n\nconst createNode = (container: Container, type: NodeType, props: Props) => {\n  switch (type) {\n    case NodeType.Drawing:\n      const { onDraw, skipProcessing, ...p1 } = props;\n      return new DrawingNode(container.depMgr, onDraw, skipProcessing, p1);\n    case NodeType.Declaration:\n      const { onDeclare, ...p2 } = props;\n      return new DeclarationNode(container.depMgr, onDeclare, p2);\n    default:\n      // TODO: here we need to throw a nice error message\n      // This is the error that will show up when the user uses nodes not supported by Skia (View, Audio, etc)\n      return exhaustiveCheck(type);\n  }\n};\n\nexport const skHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  now: Date.now,\n\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\", container, child);\n    appendNode(container, child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Node) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    props,\n    container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    return createNode(container, type, props) as Node;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  finalizeContainerChildren: () => {\n    debug(\"finalizeContainerChildren\");\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    instance,\n    type,\n    oldProps,\n    newProps,\n    _rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual && !instance.memoizable) {\n      return null;\n    }\n    debug(\"update \", type);\n    return true;\n  },\n\n  commitUpdate(\n    instance,\n    _updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {\n      return;\n    }\n    bustBranchMemoization(instance);\n    if (instance instanceof DrawingNode) {\n      const { onDraw, skipProcessing, ...props } = nextProps;\n      instance.props = props;\n    } else if (instance instanceof DeclarationNode) {\n      const { onDeclare, ...props } = nextProps;\n      instance.props = props;\n    } else {\n      throw new Error(\n        \"Unsupported instance commitUpdate \" + instance.constructor.name\n      );\n    }\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.children.splice(0);\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  insertInContainerBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n};\n"]}

package/lib/module/renderer/components/Blend.js

@@ -4,6 +4,11 @@ import React from "react";
 import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import { enumKey } from "../processors/Paint";
+
+const childrenAreImageFilters = children => children.every(child => isImageFilter(child));
+
+const childrenAreShaders = children => children.every(child => isShader(child));
+
 const onDeclare = createDeclaration((_ref, children, _ref2) => {
   let {
     mode
@@ -11,13 +16,24 @@ const onDeclare = createDeclaration((_ref, children, _ref2) => {
   let {
     Skia
   } = _ref2;
-  const [inner, outer] = children;
   const blend = BlendMode[enumKey(mode)];
 
-  if (isImageFilter(outer) && isImageFilter(inner)) {
-    return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-  } else if (isShader(outer) && isShader(inner)) {
-    return Skia.Shader.MakeBlend(blend, outer, inner);
+  if (childrenAreImageFilters(children)) {
+    return children.reverse().reduce((inner, outer) => {
+      if (inner === null) {
+        return outer;
+      }
+
+      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+    }, null);
+  } else if (childrenAreShaders(children)) {
+    return children.reverse().reduce((inner, outer) => {
+      if (inner === null) {
+        return outer;
+      }
+
+      return Skia.Shader.MakeBlend(blend, outer, inner);
+    }, null);
   }
 
   throw new Error("<Blend /> can only blend Shaders or ImageFilters");

package/lib/module/renderer/components/Blend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Blend.tsx"],"names":["React","isImageFilter","BlendMode","isShader","createDeclaration","enumKey","onDeclare","children","mode","Skia","inner","outer","blend","ImageFilter","MakeBlend","Shader","Error","Blend","props"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,aAAT,EAAwBC,SAAxB,EAAmCC,QAAnC,QAAmD,kBAAnD;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,SAASC,OAAT,QAAwB,qBAAxB;AAOA,MAAMC,SAAS,GAAGF,iBAAiB,CACjC,OAAWG,QAAX,YAAkC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AAChC,QAAM,CAACC,KAAD,EAAQC,KAAR,IAAiBJ,QAAvB;AACA,QAAMK,KAAK,GAAGV,SAAS,CAACG,OAAO,CAACG,IAAD,CAAR,CAAvB;;AACA,MAAIP,aAAa,CAACU,KAAD,CAAb,IAAwBV,aAAa,CAACS,KAAD,CAAzC,EAAkD;AAChD,WAAOD,IAAI,CAACI,WAAL,CAAiBC,SAAjB,CAA2BF,KAA3B,EAAkCD,KAAlC,EAAyCD,KAAzC,CAAP;AACD,GAFD,MAEO,IAAIP,QAAQ,CAACQ,KAAD,CAAR,IAAmBR,QAAQ,CAACO,KAAD,CAA/B,EAAwC;AAC7C,WAAOD,IAAI,CAACM,MAAL,CAAYD,SAAZ,CAAsBF,KAAtB,EAA6BD,KAA7B,EAAoCD,KAApC,CAAP;AACD;;AACD,QAAM,IAAIM,KAAJ,CAAU,kDAAV,CAAN;AACD,CAVgC,CAAnC;AAaA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAe,IAAA,SAAS,EAAEZ;AAA1B,KAAyCY,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { isImageFilter, BlendMode, isShader } from \"../../skia/types\";\nimport { createDeclaration } from \"../nodes\";\nimport type { AnimatedProps, SkEnum } from \"../processors\";\nimport { enumKey } from \"../processors/Paint\";\n\ninterface BlendProps {\n  mode: SkEnum<typeof BlendMode>;\n  children?: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<BlendProps>(\n  ({ mode }, children, { Skia }) => {\n    const [inner, outer] = children;\n    const blend = BlendMode[enumKey(mode)];\n    if (isImageFilter(outer) && isImageFilter(inner)) {\n      return Skia.ImageFilter.MakeBlend(blend, outer, inner);\n    } else if (isShader(outer) && isShader(inner)) {\n      return Skia.Shader.MakeBlend(blend, outer, inner);\n    }\n    throw new Error(\"<Blend /> can only blend Shaders or ImageFilters\");\n  }\n);\n\nexport const Blend = (props: AnimatedProps<BlendProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
+{"version":3,"sources":["Blend.tsx"],"names":["React","isImageFilter","BlendMode","isShader","createDeclaration","enumKey","childrenAreImageFilters","children","every","child","childrenAreShaders","onDeclare","mode","Skia","blend","reverse","reduce","inner","outer","ImageFilter","MakeBlend","Shader","Error","Blend","props"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,aAAT,EAAwBC,SAAxB,EAAmCC,QAAnC,QAAmD,kBAAnD;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,SAASC,OAAT,QAAwB,qBAAxB;;AAGA,MAAMC,uBAAuB,GAC3BC,QAD8B,IAG9BA,QAAQ,CAACC,KAAT,CAAgBC,KAAD,IAAWR,aAAa,CAACQ,KAAD,CAAvC,CAHF;;AAKA,MAAMC,kBAAkB,GACtBH,QADyB,IAEEA,QAAQ,CAACC,KAAT,CAAgBC,KAAD,IAAWN,QAAQ,CAACM,KAAD,CAAlC,CAF7B;;AASA,MAAME,SAAS,GAAGP,iBAAiB,CACjC,OAAWG,QAAX,YAAkC;AAAA,MAAjC;AAAEK,IAAAA;AAAF,GAAiC;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AAChC,QAAMC,KAAK,GAAGZ,SAAS,CAACG,OAAO,CAACO,IAAD,CAAR,CAAvB;;AACA,MAAIN,uBAAuB,CAACC,QAAD,CAA3B,EAAuC;AACrC,WAAOA,QAAQ,CAACQ,OAAT,GAAmBC,MAAnB,CAAgD,CAACC,KAAD,EAAQC,KAAR,KAAkB;AACvE,UAAID,KAAK,KAAK,IAAd,EAAoB;AAClB,eAAOC,KAAP;AACD;;AACD,aAAOL,IAAI,CAACM,WAAL,CAAiBC,SAAjB,CAA2BN,KAA3B,EAAkCI,KAAlC,EAAyCD,KAAzC,CAAP;AACD,KALM,EAKJ,IALI,CAAP;AAMD,GAPD,MAOO,IAAIP,kBAAkB,CAACH,QAAD,CAAtB,EAAkC;AACvC,WAAOA,QAAQ,CAACQ,OAAT,GAAmBC,MAAnB,CAA2C,CAACC,KAAD,EAAQC,KAAR,KAAkB;AAClE,UAAID,KAAK,KAAK,IAAd,EAAoB;AAClB,eAAOC,KAAP;AACD;;AACD,aAAOL,IAAI,CAACQ,MAAL,CAAYD,SAAZ,CAAsBN,KAAtB,EAA6BI,KAA7B,EAAoCD,KAApC,CAAP;AACD,KALM,EAKJ,IALI,CAAP;AAMD;;AACD,QAAM,IAAIK,KAAJ,CAAU,kDAAV,CAAN;AACD,CAnBgC,CAAnC;AAsBA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAe,IAAA,SAAS,EAAEb;AAA1B,KAAyCa,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport type { SkImageFilter, SkShader } from \"../../skia/types\";\nimport { isImageFilter, BlendMode, isShader } from \"../../skia/types\";\nimport { createDeclaration } from \"../nodes\";\nimport type { AnimatedProps, SkEnum } from \"../processors\";\nimport { enumKey } from \"../processors/Paint\";\nimport type { DeclarationResult } from \"../nodes/Declaration\";\n\nconst childrenAreImageFilters = (\n  children: DeclarationResult[]\n): children is SkImageFilter[] =>\n  children.every((child) => isImageFilter(child));\n\nconst childrenAreShaders = (\n  children: DeclarationResult[]\n): children is SkShader[] => children.every((child) => isShader(child));\n\ninterface BlendProps {\n  mode: SkEnum<typeof BlendMode>;\n  children?: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<BlendProps>(\n  ({ mode }, children, { Skia }) => {\n    const blend = BlendMode[enumKey(mode)];\n    if (childrenAreImageFilters(children)) {\n      return children.reverse().reduce<SkImageFilter | null>((inner, outer) => {\n        if (inner === null) {\n          return outer;\n        }\n        return Skia.ImageFilter.MakeBlend(blend, outer, inner);\n      }, null);\n    } else if (childrenAreShaders(children)) {\n      return children.reverse().reduce<SkShader | null>((inner, outer) => {\n        if (inner === null) {\n          return outer;\n        }\n        return Skia.Shader.MakeBlend(blend, outer, inner);\n      }, null);\n    }\n    throw new Error(\"<Blend /> can only blend Shaders or ImageFilters\");\n  }\n);\n\nexport const Blend = (props: AnimatedProps<BlendProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/components/backdrop/BackdropFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BackdropFilter.tsx"],"names":["React","createDrawing","getInput","Group","disableFilterMemoization","children","forEach","child","memoizable","onDraw","ctx","_","node","toFilter","visit","filter","Skia","Error","canvas","saveLayer","undefined","restore","BackdropFilter","filterChild","groupChildren","props"],"mappings":"AACA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,aAAT,QAA8B,aAA9B;AAEA,SAASC,QAAT,QAAyB,0BAAzB;AAEA,SAASC,KAAT,QAAsB,UAAtB;;AAEA,MAAMC,wBAAwB,GAAIC,QAAD,IAA+B;AAC9DA,EAAAA,QAAQ,CAACC,OAAT,CAAkBC,KAAD,IAAW;AAC1BA,IAAAA,KAAK,CAACC,UAAN,GAAmB,KAAnB;AACAJ,IAAAA,wBAAwB,CAACG,KAAK,CAACF,QAAP,CAAxB;AACD,GAHD;AAID,CALD;;AAWA,MAAMI,MAAM,GAAGR,aAAa,CAAsB,CAACS,GAAD,EAAMC,CAAN,EAASC,IAAT,KAAkB;AAClER,EAAAA,wBAAwB,CAACQ,IAAI,CAACP,QAAN,CAAxB;AACA,QAAMQ,QAAQ,GAAGD,IAAI,CAACE,KAAL,CAAWJ,GAAX,CAAjB;AACA,QAAMK,MAAM,GAAGb,QAAQ,CAACQ,GAAG,CAACM,IAAL,EAAWH,QAAX,CAAvB;;AACA,MAAI,CAACE,MAAL,EAAa;AACX,UAAM,IAAIE,KAAJ,CAAU,4CAAV,CAAN;AACD;;AACD,QAAM;AAAEC,IAAAA;AAAF,MAAaR,GAAnB;AACAQ,EAAAA,MAAM,CAACC,SAAP,CAAiBC,SAAjB,EAA4B,IAA5B,EAAkCL,MAAlC;AACAG,EAAAA,MAAM,CAACG,OAAP;AACD,CAV2B,CAA5B;AAYA,OAAO,MAAMC,cAAc,GAAG,QAIY;AAAA,MAJX;AAC7BP,IAAAA,MAAM,EAAEQ,WADqB;AAE7BlB,IAAAA,QAAQ,EAAEmB,aAFmB;AAG7B,OAAGC;AAH0B,GAIW;AACxC,sBACE,oBAAC,KAAD,EAAWA,KAAX,eACE;AAAW,IAAA,MAAM,EAAEhB,MAAnB;AAA2B,IAAA,cAAc;AAAzC,KACGc,WADH,CADF,EAIGC,aAJH,CADF;AAQD,CAbM","sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport type { AnimatedProps } from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport type { Node } from \"../../nodes\";\nimport { getInput } from \"../imageFilters/getInput\";\nimport type { GroupProps } from \"../Group\";\nimport { Group } from \"../Group\";\n\nconst disableFilterMemoization = (children: Node<unknown>[]) => {\n  children.forEach((child) => {\n    child.memoizable = false;\n    disableFilterMemoization(child.children);\n  });\n};\n\nexport interface BackdropFilterProps extends GroupProps {\n  filter: ReactNode | ReactNode[];\n}\n\nconst onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {\n  disableFilterMemoization(node.children);\n  const toFilter = node.visit(ctx);\n  const filter = getInput(ctx.Skia, toFilter);\n  if (!filter) {\n    throw new Error(\"No image filter provided to the background\");\n  }\n  const { canvas } = ctx;\n  canvas.saveLayer(undefined, null, filter);\n  canvas.restore();\n});\n\nexport const BackdropFilter = ({\n  filter: filterChild,\n  children: groupChildren,\n  ...props\n}: AnimatedProps<BackdropFilterProps>) => {\n  return (\n    <Group {...props}>\n      <skDrawing onDraw={onDraw} skipProcessing>\n        {filterChild}\n      </skDrawing>\n      {groupChildren}\n    </Group>\n  );\n};\n"]}
+{"version":3,"sources":["BackdropFilter.tsx"],"names":["React","createDrawing","getInput","Group","disableFilterMemoization","children","forEach","child","memoizable","onDraw","ctx","_","node","toFilter","visit","filter","Skia","Error","canvas","saveLayer","undefined","restore","BackdropFilter","filterChild","groupChildren","props"],"mappings":"AACA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,aAAT,QAA8B,aAA9B;AAEA,SAASC,QAAT,QAAyB,0BAAzB;AAEA,SAASC,KAAT,QAAsB,UAAtB;;AAEA,MAAMC,wBAAwB,GAAIC,QAAD,IAAsB;AACrDA,EAAAA,QAAQ,CAACC,OAAT,CAAkBC,KAAD,IAAW;AAC1BA,IAAAA,KAAK,CAACC,UAAN,GAAmB,KAAnB;AACAJ,IAAAA,wBAAwB,CAACG,KAAK,CAACF,QAAP,CAAxB;AACD,GAHD;AAID,CALD;;AAWA,MAAMI,MAAM,GAAGR,aAAa,CAAsB,CAACS,GAAD,EAAMC,CAAN,EAASC,IAAT,KAAkB;AAClER,EAAAA,wBAAwB,CAACQ,IAAI,CAACP,QAAN,CAAxB;AACA,QAAMQ,QAAQ,GAAGD,IAAI,CAACE,KAAL,CAAWJ,GAAX,CAAjB;AACA,QAAMK,MAAM,GAAGb,QAAQ,CAACQ,GAAG,CAACM,IAAL,EAAWH,QAAX,CAAvB;;AACA,MAAI,CAACE,MAAL,EAAa;AACX,UAAM,IAAIE,KAAJ,CAAU,4CAAV,CAAN;AACD;;AACD,QAAM;AAAEC,IAAAA;AAAF,MAAaR,GAAnB;AACAQ,EAAAA,MAAM,CAACC,SAAP,CAAiBC,SAAjB,EAA4B,IAA5B,EAAkCL,MAAlC;AACAG,EAAAA,MAAM,CAACG,OAAP;AACD,CAV2B,CAA5B;AAYA,OAAO,MAAMC,cAAc,GAAG,QAIY;AAAA,MAJX;AAC7BP,IAAAA,MAAM,EAAEQ,WADqB;AAE7BlB,IAAAA,QAAQ,EAAEmB,aAFmB;AAG7B,OAAGC;AAH0B,GAIW;AACxC,sBACE,oBAAC,KAAD,EAAWA,KAAX,eACE;AAAW,IAAA,MAAM,EAAEhB,MAAnB;AAA2B,IAAA,cAAc;AAAzC,KACGc,WADH,CADF,EAIGC,aAJH,CADF;AAQD,CAbM","sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport type { AnimatedProps } from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport type { Node } from \"../../nodes\";\nimport { getInput } from \"../imageFilters/getInput\";\nimport type { GroupProps } from \"../Group\";\nimport { Group } from \"../Group\";\n\nconst disableFilterMemoization = (children: Node[]) => {\n  children.forEach((child) => {\n    child.memoizable = false;\n    disableFilterMemoization(child.children);\n  });\n};\n\nexport interface BackdropFilterProps extends GroupProps {\n  filter: ReactNode | ReactNode[];\n}\n\nconst onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {\n  disableFilterMemoization(node.children);\n  const toFilter = node.visit(ctx);\n  const filter = getInput(ctx.Skia, toFilter);\n  if (!filter) {\n    throw new Error(\"No image filter provided to the background\");\n  }\n  const { canvas } = ctx;\n  canvas.saveLayer(undefined, null, filter);\n  canvas.restore();\n});\n\nexport const BackdropFilter = ({\n  filter: filterChild,\n  children: groupChildren,\n  ...props\n}: AnimatedProps<BackdropFilterProps>) => {\n  return (\n    <Group {...props}>\n      <skDrawing onDraw={onDraw} skipProcessing>\n        {filterChild}\n      </skDrawing>\n      {groupChildren}\n    </Group>\n  );\n};\n"]}

package/lib/module/renderer/components/imageFilters/Morphology.js

@@ -14,7 +14,7 @@ const onDeclare = createDeclaration((_ref, children, _ref2) => {
   } = _ref2;
   const input = getInput(Skia, children);
   const r = processRadius(Skia, radius);
-  const factory = operator === "dilate" ? Skia.ImageFilter.MakeDilate : Skia.ImageFilter.MakeErode;
+  const factory = operator === "dilate" ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter) : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);
   return factory(r.x, r.y, input);
 });
 export const Morphology = props => {

package/lib/module/renderer/components/imageFilters/Morphology.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Morphology.tsx"],"names":["React","createDeclaration","processRadius","getInput","onDeclare","children","radius","operator","Skia","input","r","factory","ImageFilter","MakeDilate","MakeErode","x","y","Morphology","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,iBAAT,QAAkC,yBAAlC;AAEA,SAASC,aAAT,QAA8B,yBAA9B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AAQA,MAAMC,SAAS,GAAGH,iBAAiB,CACjC,OAAuBI,QAAvB,YAA8C;AAAA,MAA7C;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA6C;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AAC5C,QAAMC,KAAK,GAAGN,QAAQ,CAACK,IAAD,EAAOH,QAAP,CAAtB;AACA,QAAMK,CAAC,GAAGR,aAAa,CAACM,IAAD,EAAOF,MAAP,CAAvB;AACA,QAAMK,OAAO,GACXJ,QAAQ,KAAK,QAAb,GACIC,IAAI,CAACI,WAAL,CAAiBC,UADrB,GAEIL,IAAI,CAACI,WAAL,CAAiBE,SAHvB;AAIA,SAAOH,OAAO,CAACD,CAAC,CAACK,CAAH,EAAML,CAAC,CAACM,CAAR,EAAWP,KAAX,CAAd;AACD,CATgC,CAAnC;AAYA,OAAO,MAAMQ,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEd;AAA1B,KAAyCc,KAAzC,EAAP;AACD,CAFM;AAIPD,UAAU,CAACE,YAAX,GAA0B;AACxBZ,EAAAA,QAAQ,EAAE;AADc,CAA1B","sourcesContent":["import React from \"react\";\n\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps, Radius } from \"../../processors\";\nimport { processRadius } from \"../../processors/Radius\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface MorphologyProps {\n  operator: \"erode\" | \"dilate\";\n  radius: Radius;\n  children?: React.ReactNode | React.ReactNode[];\n}\n\nconst onDeclare = createDeclaration<MorphologyProps>(\n  ({ radius, operator }, children, { Skia }) => {\n    const input = getInput(Skia, children);\n    const r = processRadius(Skia, radius);\n    const factory =\n      operator === \"dilate\"\n        ? Skia.ImageFilter.MakeDilate\n        : Skia.ImageFilter.MakeErode;\n    return factory(r.x, r.y, input);\n  }\n);\n\nexport const Morphology = (props: AnimatedProps<MorphologyProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nMorphology.defaultProps = {\n  operator: \"dilate\",\n};\n"]}
+{"version":3,"sources":["Morphology.tsx"],"names":["React","createDeclaration","processRadius","getInput","onDeclare","children","radius","operator","Skia","input","r","factory","ImageFilter","MakeDilate","bind","MakeErode","x","y","Morphology","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,iBAAT,QAAkC,yBAAlC;AAEA,SAASC,aAAT,QAA8B,yBAA9B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AAQA,MAAMC,SAAS,GAAGH,iBAAiB,CACjC,OAAuBI,QAAvB,YAA8C;AAAA,MAA7C;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA6C;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AAC5C,QAAMC,KAAK,GAAGN,QAAQ,CAACK,IAAD,EAAOH,QAAP,CAAtB;AACA,QAAMK,CAAC,GAAGR,aAAa,CAACM,IAAD,EAAOF,MAAP,CAAvB;AACA,QAAMK,OAAO,GACXJ,QAAQ,KAAK,QAAb,GACIC,IAAI,CAACI,WAAL,CAAiBC,UAAjB,CAA4BC,IAA5B,CAAiCN,IAAI,CAACI,WAAtC,CADJ,GAEIJ,IAAI,CAACI,WAAL,CAAiBG,SAAjB,CAA2BD,IAA3B,CAAgCN,IAAI,CAACI,WAArC,CAHN;AAIA,SAAOD,OAAO,CAACD,CAAC,CAACM,CAAH,EAAMN,CAAC,CAACO,CAAR,EAAWR,KAAX,CAAd;AACD,CATgC,CAAnC;AAYA,OAAO,MAAMS,UAAU,GAAIC,KAAD,IAA2C;AACnE,sBAAO;AAAe,IAAA,SAAS,EAAEf;AAA1B,KAAyCe,KAAzC,EAAP;AACD,CAFM;AAIPD,UAAU,CAACE,YAAX,GAA0B;AACxBb,EAAAA,QAAQ,EAAE;AADc,CAA1B","sourcesContent":["import React from \"react\";\n\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps, Radius } from \"../../processors\";\nimport { processRadius } from \"../../processors/Radius\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface MorphologyProps {\n  operator: \"erode\" | \"dilate\";\n  radius: Radius;\n  children?: React.ReactNode | React.ReactNode[];\n}\n\nconst onDeclare = createDeclaration<MorphologyProps>(\n  ({ radius, operator }, children, { Skia }) => {\n    const input = getInput(Skia, children);\n    const r = processRadius(Skia, radius);\n    const factory =\n      operator === \"dilate\"\n        ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter)\n        : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);\n    return factory(r.x, r.y, input);\n  }\n);\n\nexport const Morphology = (props: AnimatedProps<MorphologyProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nMorphology.defaultProps = {\n  operator: \"dilate\",\n};\n"]}

package/lib/module/renderer/components/imageFilters/Shadow.js

@@ -25,7 +25,7 @@ const onDeclare = createDeclaration((_ref, children, _ref2) => {
   if (inner) {
     factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
   } else {
-    factory = shadowOnly ? Skia.ImageFilter.MakeDropShadowOnly : Skia.ImageFilter.MakeDropShadow;
+    factory = shadowOnly ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter) : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);
   }
 
   return factory(dx, dy, blur, blur, color, input);

package/lib/module/renderer/components/imageFilters/Shadow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Shadow.tsx"],"names":["React","createDeclaration","processColor","getInput","MakeInnerShadow","onDeclare","children","dx","dy","blur","color","cl","shadowOnly","inner","opacity","Skia","input","factory","bind","ImageFilter","MakeDropShadowOnly","MakeDropShadow","Shadow","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,iBAAT,QAAkC,yBAAlC;AAGA,SAASC,YAAT,QAA6B,wBAA7B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AACA,SAASC,eAAT,QAAgC,eAAhC;AAWA,MAAMC,SAAS,GAAGJ,iBAAiB,CACjC,OAEEK,QAFF,YAIK;AAAA,MAHH;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAK,EAAEC,EAAvB;AAA2BC,IAAAA,UAA3B;AAAuCC,IAAAA;AAAvC,GAGG;AAAA,MADH;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GACG;AACH,QAAMC,KAAK,GAAGb,QAAQ,CAACY,IAAD,EAAOT,QAAP,CAAtB;AACA,QAAMI,KAAK,GAAGR,YAAY,CAACa,IAAD,EAAOJ,EAAP,EAAWG,OAAX,CAA1B;AACA,MAAIG,OAAJ;;AACA,MAAIJ,KAAJ,EAAW;AACTI,IAAAA,OAAO,GAAGb,eAAe,CAACc,IAAhB,CAAqB,IAArB,EAA2BH,IAA3B,EAAiCH,UAAjC,CAAV;AACD,GAFD,MAEO;AACLK,IAAAA,OAAO,GAAGL,UAAU,GAChBG,IAAI,CAACI,WAAL,CAAiBC,kBADD,GAEhBL,IAAI,CAACI,WAAL,CAAiBE,cAFrB;AAGD;;AACD,SAAOJ,OAAO,CAACV,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqBC,KAArB,EAA4BM,KAA5B,CAAd;AACD,CAjBgC,CAAnC;AAoBA,OAAO,MAAMM,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAe,IAAA,SAAS,EAAElB;AAA1B,KAAyCkB,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/types\";\nimport { processColor } from \"../../processors/Color\";\n\nimport { getInput } from \"./getInput\";\nimport { MakeInnerShadow } from \"./InnerShadow\";\n\nexport interface ShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  inner?: boolean;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<ShadowProps>(\n  (\n    { dx, dy, blur, color: cl, shadowOnly, inner },\n    children,\n    { opacity, Skia }\n  ) => {\n    const input = getInput(Skia, children);\n    const color = processColor(Skia, cl, opacity);\n    let factory;\n    if (inner) {\n      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);\n    } else {\n      factory = shadowOnly\n        ? Skia.ImageFilter.MakeDropShadowOnly\n        : Skia.ImageFilter.MakeDropShadow;\n    }\n    return factory(dx, dy, blur, blur, color, input);\n  }\n);\n\nexport const Shadow = (props: AnimatedProps<ShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
+{"version":3,"sources":["Shadow.tsx"],"names":["React","createDeclaration","processColor","getInput","MakeInnerShadow","onDeclare","children","dx","dy","blur","color","cl","shadowOnly","inner","opacity","Skia","input","factory","bind","ImageFilter","MakeDropShadowOnly","MakeDropShadow","Shadow","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,iBAAT,QAAkC,yBAAlC;AAGA,SAASC,YAAT,QAA6B,wBAA7B;AAEA,SAASC,QAAT,QAAyB,YAAzB;AACA,SAASC,eAAT,QAAgC,eAAhC;AAWA,MAAMC,SAAS,GAAGJ,iBAAiB,CACjC,OAEEK,QAFF,YAIK;AAAA,MAHH;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAK,EAAEC,EAAvB;AAA2BC,IAAAA,UAA3B;AAAuCC,IAAAA;AAAvC,GAGG;AAAA,MADH;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GACG;AACH,QAAMC,KAAK,GAAGb,QAAQ,CAACY,IAAD,EAAOT,QAAP,CAAtB;AACA,QAAMI,KAAK,GAAGR,YAAY,CAACa,IAAD,EAAOJ,EAAP,EAAWG,OAAX,CAA1B;AACA,MAAIG,OAAJ;;AACA,MAAIJ,KAAJ,EAAW;AACTI,IAAAA,OAAO,GAAGb,eAAe,CAACc,IAAhB,CAAqB,IAArB,EAA2BH,IAA3B,EAAiCH,UAAjC,CAAV;AACD,GAFD,MAEO;AACLK,IAAAA,OAAO,GAAGL,UAAU,GAChBG,IAAI,CAACI,WAAL,CAAiBC,kBAAjB,CAAoCF,IAApC,CAAyCH,IAAI,CAACI,WAA9C,CADgB,GAEhBJ,IAAI,CAACI,WAAL,CAAiBE,cAAjB,CAAgCH,IAAhC,CAAqCH,IAAI,CAACI,WAA1C,CAFJ;AAGD;;AACD,SAAOF,OAAO,CAACV,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqBC,KAArB,EAA4BM,KAA5B,CAAd;AACD,CAjBgC,CAAnC;AAoBA,OAAO,MAAMM,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAe,IAAA,SAAS,EAAElB;AAA1B,KAAyCkB,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/types\";\nimport { processColor } from \"../../processors/Color\";\n\nimport { getInput } from \"./getInput\";\nimport { MakeInnerShadow } from \"./InnerShadow\";\n\nexport interface ShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  inner?: boolean;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<ShadowProps>(\n  (\n    { dx, dy, blur, color: cl, shadowOnly, inner },\n    children,\n    { opacity, Skia }\n  ) => {\n    const input = getInput(Skia, children);\n    const color = processColor(Skia, cl, opacity);\n    let factory;\n    if (inner) {\n      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);\n    } else {\n      factory = shadowOnly\n        ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter)\n        : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);\n    }\n    return factory(dx, dy, blur, blur, color, input);\n  }\n);\n\nexport const Shadow = (props: AnimatedProps<ShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/nodes/Declaration.js

@@ -1,7 +1,7 @@
 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; }
 
 import { useCallback } from "react";
-import { isAnimated, materialize } from "../processors";
+import { isAnimated } from "../processors";
 import { Node } from "./Node";
 export const createDeclaration = cb => cb;
 export const useDeclaration = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -23,13 +23,12 @@ export class DeclarationNode extends Node {
   }
 
   get props() {
-    return this._props;
+    return this.resolvedProps;
   }
 
   draw(ctx) {
     const children = this.visit(ctx);
-    const props = materialize(this.props);
-    const obj = this.onDeclare(props, children, ctx);
+    const obj = this.onDeclare(this.props, children, ctx);
     return obj;
   }
 

package/lib/module/renderer/nodes/Declaration.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","materialize","Node","createDeclaration","cb","useDeclaration","deps","isDeclarationNode","node","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAIA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,eAAxC;AAIA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;AAOP,OAAO,MAAMC,iBAAiB,GAC5BC,IAD+B,IAEMA,IAAI,YAAYC,eAFhD;AAQP,OAAO,MAAMA,eAAN,SAAiCP,IAAjC,CAAyC;AAG9CQ,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAACd,UAAU,CAACa,KAAD,CAA9B;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAACd,UAAU,CAACa,KAAD,CAA7B;AACA,UAAMA,KAAN,GAAcA,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKE,MAAZ;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,QAAQ,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAAjB;AACA,UAAMJ,KAAK,GAAGZ,WAAW,CAAC,KAAKY,KAAN,CAAzB;AACA,UAAMO,GAAG,GAAG,KAAKR,SAAL,CAAeC,KAAf,EAAsBK,QAAtB,EAAgCD,GAAhC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA3B6C","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\nimport { isAnimated, materialize } from \"../processors\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { SkJSIInstance } from \"../../skia/types\";\n\nimport { Node } from \"./Node\";\n\nexport type DeclarationResult = SkJSIInstance<string> | null;\n\ntype DeclarationCallback<T> = (\n  props: T,\n  children: DeclarationResult[],\n  ctx: DrawingContext\n) => DeclarationResult;\n\nexport const createDeclaration = <T,>(\n  cb: DeclarationCallback<T>\n): DeclarationCallback<T> => cb;\n\nexport const useDeclaration = <P,>(\n  cb: DeclarationCallback<P>,\n  deps?: DependencyList\n) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport const isDeclarationNode = (\n  node: Node\n): node is DeclarationNode<unknown> => node instanceof DeclarationNode;\n\nexport interface DeclarationProps<P> {\n  onDeclare: DeclarationCallback<P>;\n}\n\nexport class DeclarationNode<P> extends Node<P> {\n  private onDeclare: DeclarationCallback<P>;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDeclare: DeclarationCallback<P>,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    super.memoizable = !isAnimated(props);\n    this.onDeclare = onDeclare;\n  }\n\n  set props(props: AnimatedProps<P>) {\n    this.memoizable = !isAnimated(props);\n    super.props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  draw(ctx: DrawingContext) {\n    const children = this.visit(ctx);\n    const props = materialize(this.props);\n    const obj = this.onDeclare(props, children, ctx);\n    return obj;\n  }\n}\n"]}
+{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","Node","createDeclaration","cb","useDeclaration","deps","isDeclarationNode","node","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","resolvedProps","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAIA,SAASC,UAAT,QAA2B,eAA3B;AAIA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAN,WAAW,CAACI,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;AAOP,OAAO,MAAMC,iBAAiB,GAAQC,IAAL,IAC/BA,IAAI,YAAYC,eADX;AAOP,OAAO,MAAMA,eAAN,SAAiCP,IAAjC,CAAyC;AAG9CQ,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAACb,UAAU,CAACY,KAAD,CAA9B;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAACb,UAAU,CAACY,KAAD,CAA7B;AACA,UAAMA,KAAN,GAAcA,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAM;AACb,WAAO,KAAKE,aAAZ;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,QAAQ,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAAjB;AACA,UAAMG,GAAG,GAAG,KAAKR,SAAL,CAAe,KAAKC,KAApB,EAA2BK,QAA3B,EAAqCD,GAArC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA1B6C","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\nimport { isAnimated } from \"../processors\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { SkJSIInstance } from \"../../skia/types\";\n\nimport { Node } from \"./Node\";\n\nexport type DeclarationResult = SkJSIInstance<string> | null;\n\ntype DeclarationCallback<T> = (\n  props: T,\n  children: DeclarationResult[],\n  ctx: DrawingContext\n) => DeclarationResult;\n\nexport const createDeclaration = <T,>(\n  cb: DeclarationCallback<T>\n): DeclarationCallback<T> => cb;\n\nexport const useDeclaration = <P,>(\n  cb: DeclarationCallback<P>,\n  deps?: DependencyList\n) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport const isDeclarationNode = <P,>(node: Node): node is DeclarationNode<P> =>\n  node instanceof DeclarationNode;\n\nexport interface DeclarationProps<P> {\n  onDeclare: DeclarationCallback<P>;\n}\n\nexport class DeclarationNode<P> extends Node<P> {\n  private onDeclare: DeclarationCallback<P>;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDeclare: DeclarationCallback<P>,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    super.memoizable = !isAnimated(props);\n    this.onDeclare = onDeclare;\n  }\n\n  set props(props: AnimatedProps<P>) {\n    this.memoizable = !isAnimated(props);\n    super.props = props;\n  }\n\n  get props(): P {\n    return this.resolvedProps;\n  }\n\n  draw(ctx: DrawingContext) {\n    const children = this.visit(ctx);\n    const obj = this.onDeclare(this.props, children, ctx);\n    return obj;\n  }\n}\n"]}

package/lib/module/renderer/nodes/Drawing.js

@@ -1,7 +1,6 @@
 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; }
 
 import { useCallback } from "react";
-import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia/types";
 import { processPaint } from "../processors";
 import { Node } from "./Node";
@@ -21,17 +20,15 @@ export class DrawingNode extends Node {
   }
 
   draw(ctx) {
-    const drawingProps = materialize(this.props);
-
     if (this.skipProcessing) {
-      this.onDraw(ctx, drawingProps, this);
+      this.onDraw(ctx, this.props, this);
     } else {
       const declarations = this.visit(ctx);
-      const paint = processPaint(ctx.Skia, ctx.paint.copy(), ctx.opacity, drawingProps, declarations);
+      const paint = processPaint(ctx.Skia, ctx.paint.copy(), ctx.opacity, this.props, declarations);
       [paint, ...declarations.filter(isPaint)].forEach(currentPaint => {
         this.onDraw({ ...ctx,
           paint: currentPaint
-        }, drawingProps, this);
+        }, this.props, this);
       });
     }
   }

package/lib/module/renderer/nodes/Drawing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","materialize","isPaint","processPaint","Node","createDrawing","cb","useDrawing","deps","DrawingNode","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","drawingProps","declarations","visit","paint","Skia","copy","opacity","filter","forEach","currentPaint"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAIA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,OAAT,QAAwB,kBAAxB;AAEA,SAASC,YAAT,QAA6B,eAA7B;AAEA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,aAAa,GAAQC,EAAL,IAC3BA,EADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACAR,WAAW,CAACM,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CAFN;AAUP,OAAO,MAAMC,WAAN,SAA6BL,IAA7B,CAAqC;AAI1CM,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITC,KAJS,EAKT;AACA,UAAMH,MAAN,EAAcG,KAAd;;AADA;;AAAA;;AAEA,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDE,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,YAAY,GAAGhB,WAAW,CAAC,KAAKa,KAAN,CAAhC;;AACA,QAAI,KAAKD,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,YAAY,GAAG,KAAKC,KAAL,CAAWH,GAAX,CAArB;AACA,YAAMI,KAAK,GAAGjB,YAAY,CACxBa,GAAG,CAACK,IADoB,EAExBL,GAAG,CAACI,KAAJ,CAAUE,IAAV,EAFwB,EAGxBN,GAAG,CAACO,OAHoB,EAIxBN,YAJwB,EAKxBC,YALwB,CAA1B;AAOA,OAACE,KAAD,EAAQ,GAAGF,YAAY,CAACM,MAAb,CAAoBtB,OAApB,CAAX,EAAyCuB,OAAzC,CAAkDC,YAAD,IAAkB;AACjE,aAAKd,MAAL,CAAY,EAAE,GAAGI,GAAL;AAAUI,UAAAA,KAAK,EAAEM;AAAjB,SAAZ,EAA6CT,YAA7C,EAA2D,IAA3D;AACD,OAFD;AAGD;AACF;;AAhCyC","sourcesContent":["import type { DependencyList, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { materialize } from \"../processors/Animations/Animations\";\nimport { isPaint } from \"../../skia/types\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport { processPaint } from \"../processors\";\n\nimport { Node } from \"./Node\";\n\ntype DrawingCallback<P> = (\n  ctx: DrawingContext,\n  props: P,\n  node: Node<P>\n) => void;\n\ntype OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;\n\nexport const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>\n  cb;\n\nexport const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport type DrawingProps<T> = {\n  onDraw: DrawingCallback<T>;\n  skipProcessing?: boolean;\n  children?: ReactNode | ReactNode[];\n};\n\nexport class DrawingNode<P> extends Node<P> {\n  onDraw: DrawingCallback<P>;\n  skipProcessing: boolean;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDraw: DrawingCallback<P>,\n    skipProcessing: boolean,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    this.onDraw = onDraw;\n    this.skipProcessing = skipProcessing;\n  }\n\n  draw(ctx: DrawingContext) {\n    const drawingProps = materialize(this.props);\n    if (this.skipProcessing) {\n      this.onDraw(ctx, drawingProps, this);\n    } else {\n      const declarations = this.visit(ctx);\n      const paint = processPaint(\n        ctx.Skia,\n        ctx.paint.copy(),\n        ctx.opacity,\n        drawingProps,\n        declarations\n      );\n      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {\n        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);\n      });\n    }\n  }\n}\n"]}
+{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","isPaint","processPaint","Node","createDrawing","cb","useDrawing","deps","DrawingNode","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","declarations","visit","paint","Skia","copy","opacity","filter","forEach","currentPaint"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAIA,SAASC,OAAT,QAAwB,kBAAxB;AAEA,SAASC,YAAT,QAA6B,eAA7B;AAEA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,aAAa,GAAQC,EAAL,IAC3BA,EADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CAFN;AAUP,OAAO,MAAMC,WAAN,SAA6BL,IAA7B,CAAqC;AAI1CM,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITC,KAJS,EAKT;AACA,UAAMH,MAAN,EAAcG,KAAd;;AADA;;AAAA;;AAEA,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDE,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,QAAI,KAAKH,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiB,KAAKF,KAAtB,EAA6B,IAA7B;AACD,KAFD,MAEO;AACL,YAAMG,YAAY,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAArB;AACA,YAAMG,KAAK,GAAGhB,YAAY,CACxBa,GAAG,CAACI,IADoB,EAExBJ,GAAG,CAACG,KAAJ,CAAUE,IAAV,EAFwB,EAGxBL,GAAG,CAACM,OAHoB,EAIxB,KAAKR,KAJmB,EAKxBG,YALwB,CAA1B;AAOA,OAACE,KAAD,EAAQ,GAAGF,YAAY,CAACM,MAAb,CAAoBrB,OAApB,CAAX,EAAyCsB,OAAzC,CAAkDC,YAAD,IAAkB;AACjE,aAAKb,MAAL,CAAY,EAAE,GAAGI,GAAL;AAAUG,UAAAA,KAAK,EAAEM;AAAjB,SAAZ,EAA6C,KAAKX,KAAlD,EAAyD,IAAzD;AACD,OAFD;AAGD;AACF;;AA/ByC","sourcesContent":["import type { DependencyList, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { isPaint } from \"../../skia/types\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport { processPaint } from \"../processors\";\n\nimport { Node } from \"./Node\";\n\ntype DrawingCallback<P> = (\n  ctx: DrawingContext,\n  props: P,\n  node: Node<P>\n) => void;\n\ntype OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;\n\nexport const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>\n  cb;\n\nexport const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport type DrawingProps<P> = {\n  onDraw: DrawingCallback<P>;\n  skipProcessing?: boolean;\n  children?: ReactNode | ReactNode[];\n};\n\nexport class DrawingNode<P> extends Node<P> {\n  onDraw: DrawingCallback<P>;\n  skipProcessing: boolean;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDraw: DrawingCallback<P>,\n    skipProcessing: boolean,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    this.onDraw = onDraw;\n    this.skipProcessing = skipProcessing;\n  }\n\n  draw(ctx: DrawingContext) {\n    if (this.skipProcessing) {\n      this.onDraw(ctx, this.props, this);\n    } else {\n      const declarations = this.visit(ctx);\n      const paint = processPaint(\n        ctx.Skia,\n        ctx.paint.copy(),\n        ctx.opacity,\n        this.props,\n        declarations\n      );\n      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {\n        this.onDraw({ ...ctx, paint: currentPaint }, this.props, this);\n      });\n    }\n  }\n}\n"]}

package/lib/module/renderer/nodes/Node.js

@@ -8,10 +8,11 @@ export let NodeType;
 })(NodeType || (NodeType = {}));
 
 export class Node {
+  // This cast is ok because we understand that the dependency manager will setup the initial props
   constructor(depMgr, props) {
     _defineProperty(this, "children", []);
 
-    _defineProperty(this, "_props", void 0);
+    _defineProperty(this, "resolvedProps", {});
 
     _defineProperty(this, "memoizable", false);
 
@@ -21,20 +22,21 @@ export class Node {
 
     _defineProperty(this, "depMgr", void 0);
 
-    this._props = props;
     this.depMgr = depMgr;
-    this.depMgr.unSubscribeNode(this);
+    this.updatePropSubscriptions(props);
+  }
+
+  updatePropSubscriptions(props) {
     this.depMgr.subscribeNode(this, props);
   }
 
   set props(props) {
-    this.depMgr.unSubscribeNode(this);
-    this.depMgr.subscribeNode(this, props);
-    this._props = props;
+    this.depMgr.unsubscribeNode(this);
+    this.updatePropSubscriptions(props);
   }
 
   get props() {
-    return this._props;
+    return this.resolvedProps;
   }
 
   visit(ctx, children) {