@shopify/react-native-skia 2.9.0 → 2.9.1

package/lib/module/views/WebGPUCanvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useImperativeHandle","useRef","useState","View","Platform","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","contextId","getContextId","getNativeSurface","RNWebGPU","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","OS","createElement","_extends","collapsable","style","flex"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEpE,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAE7C,OAAOC,gBAAgB,MAAM,oCAAoC;AAEjE,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AAwCA,OAAO,MAAME,YAAY,GAAGA,CAAC;EAC3BC,WAAW;EACXC,GAAG;EACH,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,OAAO,GAAGX,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACY,SAAS,CAAC,GAAGX,QAAQ,CAAC,MAAMK,iBAAiB,CAAC,CAAC,CAAC;EAEvDP,mBAAmB,CAACU,GAAG,EAAE,OAAO;IAC9BI,YAAY,EAAEA,CAAA,KAAMD,SAAS;IAC7BE,gBAAgB,EAAEA,CAAA,KAAM;MACtB,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAIC,KAAK,CACb,uEACF,CAAC;MACH;MACA,OAAOD,QAAQ,CAACD,gBAAgB,CAACF,SAAS,CAAC;IAC7C,CAAC;IACDK,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIF,KAAK,CAAC,iCAAiCE,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACP,OAAO,CAACQ,OAAO,EAAE;QACpB,MAAM,IAAIH,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA,IAAI,OAAOD,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAIC,KAAK,CACb,uEACF,CAAC;MACH;MACA;MACA;MACA,MAAMI,IAAI,GAAGT,OAAO,CAACQ,OAAc;MACnC,MAAME,IAAI,GACR,uBAAuB,IAAID,IAAI,GAC3BA,IAAI,CAACE,qBAAqB,CAAC,CAAC,GAC5BF,IAAI,CAACG,8BAA8B,CAAC,CAAC;MAC3C,OAAOR,QAAQ,CAACS,uBAAuB,CACrCZ,SAAS,EACTS,IAAI,CAACI,KAAK,EACVJ,IAAI,CAACK,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,IAAIvB,QAAQ,CAACwB,EAAE,KAAK,KAAK,EAAE;IACzB,oBAAO7B,KAAA,CAAA8B,aAAA,CAAC1B,IAAI,EAAKQ,KAAQ,CAAC;EAC5B;EAEA,oBACEZ,KAAA,CAAA8B,aAAA,CAAC1B,IAAI,EAAA2B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACrB,GAAG,EAAEE;EAAQ,GAAKD,KAAK,gBAC/CZ,KAAA,CAAA8B,aAAA,CAACxB,gBAAgB;IACf2B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBpB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useImperativeHandle","useRef","useState","View","Platform","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","contextId","RNWebGPU","destroyContext","getContextId","getNativeSurface","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","OS","createElement","_extends","collapsable","style","flex"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n    // Retires a canvas context; called by the Canvas on unmount (the Canvas\n    // owns the native registry entry for its contextId).\n    destroyContext: (contextId: number) => void;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  // Retire the native registry entry for this contextId on unmount. When a\n  // native surface is still attached, this is a no-op and the native view's\n  // own teardown retires the entry instead — which keeps StrictMode's\n  // simulated unmount (which re-runs effects without unmounting native views)\n  // from orphaning a live surface.\n  useEffect(() => {\n    return () => {\n      if (typeof RNWebGPU !== \"undefined\") {\n        RNWebGPU.destroyContext(contextId);\n      }\n    };\n  }, [contextId]);\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE/E,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAE7C,OAAOC,gBAAgB,MAAM,oCAAoC;AAEjE,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AA2CA,OAAO,MAAME,YAAY,GAAGA,CAAC;EAC3BC,WAAW;EACXC,GAAG;EACH,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,OAAO,GAAGX,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACY,SAAS,CAAC,GAAGX,QAAQ,CAAC,MAAMK,iBAAiB,CAAC,CAAC,CAAC;;EAEvD;EACA;EACA;EACA;EACA;EACAR,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAI,OAAOe,QAAQ,KAAK,WAAW,EAAE;QACnCA,QAAQ,CAACC,cAAc,CAACF,SAAS,CAAC;MACpC;IACF,CAAC;EACH,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEfb,mBAAmB,CAACU,GAAG,EAAE,OAAO;IAC9BM,YAAY,EAAEA,CAAA,KAAMH,SAAS;IAC7BI,gBAAgB,EAAEA,CAAA,KAAM;MACtB,IAAI,OAAOH,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAII,KAAK,CACb,uEACF,CAAC;MACH;MACA,OAAOJ,QAAQ,CAACG,gBAAgB,CAACJ,SAAS,CAAC;IAC7C,CAAC;IACDM,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIF,KAAK,CAAC,iCAAiCE,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACR,OAAO,CAACS,OAAO,EAAE;QACpB,MAAM,IAAIH,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA,IAAI,OAAOJ,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAII,KAAK,CACb,uEACF,CAAC;MACH;MACA;MACA;MACA,MAAMI,IAAI,GAAGV,OAAO,CAACS,OAAc;MACnC,MAAME,IAAI,GACR,uBAAuB,IAAID,IAAI,GAC3BA,IAAI,CAACE,qBAAqB,CAAC,CAAC,GAC5BF,IAAI,CAACG,8BAA8B,CAAC,CAAC;MAC3C,OAAOX,QAAQ,CAACY,uBAAuB,CACrCb,SAAS,EACTU,IAAI,CAACI,KAAK,EACVJ,IAAI,CAACK,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,IAAIxB,QAAQ,CAACyB,EAAE,KAAK,KAAK,EAAE;IACzB,oBAAO/B,KAAA,CAAAgC,aAAA,CAAC3B,IAAI,EAAKQ,KAAQ,CAAC;EAC5B;EAEA,oBACEb,KAAA,CAAAgC,aAAA,CAAC3B,IAAI,EAAA4B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACtB,GAAG,EAAEE;EAAQ,GAAKD,KAAK,gBAC/Cb,KAAA,CAAAgC,aAAA,CAACzB,gBAAgB;IACf4B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBrB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/typescript/src/views/WebGPUCanvas.d.ts

@@ -6,6 +6,7 @@ declare global {
         fabric: boolean;
         getNativeSurface: (contextId: number) => NativeCanvas;
         MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+        destroyContext: (contextId: number) => void;
     };
 }
 type SurfacePointer = bigint;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -127,7 +127,7 @@
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
-    "tar": "^7.5.16",
+    "tar": "^7.5.19",
     "ts-jest": "29.4.3",
     "tsx": "^4.21.0",
     "typescript": "^5.2.2",

package/src/views/WebGPUCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { ViewProps } from "react-native";
 import { View, Platform } from "react-native";
 
@@ -19,6 +19,9 @@ declare global {
       width: number,
       height: number
     ) => RNCanvasContext;
+    // Retires a canvas context; called by the Canvas on unmount (the Canvas
+    // owns the native registry entry for its contextId).
+    destroyContext: (contextId: number) => void;
   };
 }
 
@@ -55,6 +58,19 @@ export const WebGPUCanvas = ({
   const viewRef = useRef(null);
   const [contextId] = useState(() => generateContextId());
 
+  // Retire the native registry entry for this contextId on unmount. When a
+  // native surface is still attached, this is a no-op and the native view's
+  // own teardown retires the entry instead — which keeps StrictMode's
+  // simulated unmount (which re-runs effects without unmounting native views)
+  // from orphaning a live surface.
+  useEffect(() => {
+    return () => {
+      if (typeof RNWebGPU !== "undefined") {
+        RNWebGPU.destroyContext(contextId);
+      }
+    };
+  }, [contextId]);
+
   useImperativeHandle(ref, () => ({
     getContextId: () => contextId,
     getNativeSurface: () => {