@shopify/react-native-skia 2.5.2 → 2.5.3

package/lib/module/views/WebGPUCanvas.js

@@ -0,0 +1,57 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useImperativeHandle, useRef, useState } from "react";
+import { View, Platform } from "react-native";
+import WebGPUNativeView from "../specs/WebGPUViewNativeComponent";
+let CONTEXT_COUNTER = 1;
+function generateContextId() {
+  return CONTEXT_COUNTER++;
+}
+export const WebGPUCanvas = ({
+  transparent,
+  ref,
+  ...props
+}) => {
+  const viewRef = useRef(null);
+  const [contextId] = useState(() => generateContextId());
+  useImperativeHandle(ref, () => ({
+    getContextId: () => contextId,
+    getNativeSurface: () => {
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error("[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.");
+      }
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    getContext(contextName) {
+      if (contextName !== "webgpu") {
+        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+      }
+      if (!viewRef.current) {
+        throw new Error("[WebGPU] Cannot get context before mount");
+      }
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error("[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.");
+      }
+      // getBoundingClientRect became stable in RN 0.83
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = viewRef.current;
+      const size = "getBoundingClientRect" in view ? view.getBoundingClientRect() : view.unstable_getBoundingClientRect();
+      return RNWebGPU.MakeWebGPUCanvasContext(contextId, size.width, size.height);
+    }
+  }));
+
+  // WebGPU Canvas is not supported on web
+  if (Platform.OS === "web") {
+    return /*#__PURE__*/React.createElement(View, props);
+  }
+  return /*#__PURE__*/React.createElement(View, _extends({
+    collapsable: false,
+    ref: viewRef
+  }, props), /*#__PURE__*/React.createElement(WebGPUNativeView, {
+    style: {
+      flex: 1
+    },
+    contextId: contextId,
+    transparent: !!transparent
+  }));
+};
+//# sourceMappingURL=WebGPUCanvas.js.map

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

@@ -0,0 +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":[]}

package/lib/module/views/WebGPUCanvas.web.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+export interface NativeCanvas {
+    surface: bigint;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent: _transparent, ref: _ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from "react";
+// WebGPU Canvas is not supported on web
+export const WebGPUCanvas = ({
+  transparent: _transparent,
+  ref: _ref,
+  ...props
+}) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  return /*#__PURE__*/React.createElement("div", props);
+};
+//# sourceMappingURL=WebGPUCanvas.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","WebGPUCanvas","transparent","_transparent","ref","_ref","props","createElement"],"sources":["WebGPUCanvas.web.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeCanvas {\n  surface: bigint;\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\n// WebGPU Canvas is not supported on web\nexport const WebGPUCanvas = ({\n  transparent: _transparent,\n  ref: _ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  return <div {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA0BzB;AACA,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAC3BC,WAAW,EAAEC,YAAY;EACzBC,GAAG,EAAEC,IAAI;EACT,GAAGC;AACc,CAAC,KAAK;EACvB;EACA;EACA,oBAAON,KAAA,CAAAO,aAAA,QAASD,KAAQ,CAAC;AAC3B,CAAC","ignoreList":[]}

package/lib/module/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/lib/module/views/index.js

@@ -1,3 +1,4 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaPictureView\";\nexport * from \"./types\";\n"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,SAAS","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaPictureView\";\nexport * from \"./types\";\nexport * from \"./WebGPUCanvas\";\n"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,gBAAgB","ignoreList":[]}

package/lib/typescript/lib/commonjs/mock/index.d.ts

@@ -1,6 +1,7 @@
 export const __esModule: boolean;
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    WebGPUCanvas: typeof import("react-native").View;
     SkiaPictureView: typeof import("react-native").View;
     JsiSkImage: typeof _JsiSkImage.JsiSkImage;
     drawAsPicture: () => undefined;

package/lib/typescript/lib/commonjs/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+declare const _default: any;
+export default _default;

package/lib/typescript/lib/commonjs/specs/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+export default WebGPUViewNativeComponent;
+declare function WebGPUViewNativeComponent(props: any): any;

package/lib/typescript/lib/commonjs/specs/utils.d.ts

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export function contextIdToId(contextId: any): string;

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

@@ -0,0 +1,6 @@
+export const __esModule: boolean;
+export function WebGPUCanvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): any;

package/lib/typescript/lib/commonjs/views/WebGPUCanvas.web.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: boolean;
+export function WebGPUCanvas({ transparent: _transparent, ref: _ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): any;

package/lib/typescript/lib/module/mock/index.d.ts

@@ -1,5 +1,6 @@
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    WebGPUCanvas: typeof import("react-native").View;
     SkiaPictureView: typeof import("react-native").View;
     JsiSkImage: typeof JsiSkImage;
     drawAsPicture: () => undefined;
@@ -128,7 +129,8 @@ export function Mock(CanvasKit: any): {
     isEdge: (pos: any, b: any) => boolean;
     processRect: (Skia: any, def: any) => any;
     processRRect: (Skia: any, def: any) => any;
-    inflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, ty?: number) => any;
+    inflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, // Reanimated hooks
+    ty?: number) => any;
     deflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, ty?: number) => any;
     processRadius: (Skia: any, radius: any) => any;
     isCircleScalarDef: (def: any) => boolean;

package/lib/typescript/lib/module/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<object>;
+export default _default;

package/lib/typescript/lib/module/specs/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,2 @@
+export default function WebGPUViewNativeComponent(props: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+import React from "react";

package/lib/typescript/lib/module/specs/utils.d.ts

@@ -0,0 +1 @@
+export function contextIdToId(contextId: any): string;

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

@@ -0,0 +1,7 @@
+export function WebGPUCanvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): React.CElement<import("react-native").ViewProps, View>;
+import { View } from "react-native";
+import React from "react";

package/lib/typescript/lib/module/views/WebGPUCanvas.web.d.ts

@@ -0,0 +1,8 @@
+export function WebGPUCanvas({ transparent: _transparent, ref: _ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): React.DetailedReactHTMLElement<{
+    [x: string]: any;
+}, HTMLElement>;
+import React from "react";

package/lib/typescript/lib/module/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/lib/typescript/src/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,8 @@
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/lib/typescript/src/specs/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+export default function WebGPUViewNativeComponent(props: NativeProps): React.JSX.Element;

package/lib/typescript/src/specs/utils.d.ts

@@ -0,0 +1 @@
+export declare function contextIdToId(contextId: number): string;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+declare global {
+    var RNWebGPU: {
+        gpu: GPU;
+        fabric: boolean;
+        getNativeSurface: (contextId: number) => NativeCanvas;
+        MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+    };
+}
+type SurfacePointer = bigint;
+export interface NativeCanvas {
+    surface: SurfacePointer;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent, ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+export interface NativeCanvas {
+    surface: bigint;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent: _transparent, ref: _ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

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

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/package.json

@@ -9,7 +9,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -147,7 +147,8 @@
     },
     "ios": {
       "componentProvider": {
-        "SkiaPictureView": "SkiaPictureView"
+        "SkiaPictureView": "SkiaPictureView",
+        "WebGPUView": "WebGPUView"
       }
     }
   },

package/src/external/reanimated/useVideo.ts

@@ -22,7 +22,7 @@ const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
   if (Platform.OS === "android") {
     const tex = currentFrame.value;
     if (tex) {
-      currentFrame.value = tex.makeNonTextureImage();
+      currentFrame.value = tex; //.makeNonTextureImage();
       tex.dispose();
     }
   }
@@ -32,9 +32,6 @@ const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
   "worklet";
   const img = video.nextImage();
   if (img) {
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
     currentFrame.value = img;
     copyFrameOnAndroid(currentFrame);
   }

package/src/mock/index.ts

@@ -23,6 +23,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    WebGPUCanvas: require("react-native").View,
     SkiaPictureView: require("react-native").View,
     JsiSkImage: JsiSkImage,
     drawAsPicture: Noop,

package/src/skia/types/Surface/SurfaceFactory.ts

@@ -27,5 +27,9 @@ export interface SurfaceFactory {
    * @param height - number of pixels of the height of the drawable area.
    * @param opts - optional surface options (e.g. colorSpace: "display-p3" | "srgb").
    */
-  MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;
+  MakeOffscreen: (
+    width: number,
+    height: number,
+    opts?: SurfaceOptions
+  ) => SkSurface | null;
 }

package/src/sksg/Container.native.ts

@@ -10,6 +10,9 @@ import { visit } from "./Recorder/Visitor";
 import "../skia/NativeSetup";
 import "../views/api";
 
+// create local reference for `strictGlobal` option in Worklets
+const { SkiaViewApi } = globalThis;
+
 const nativeDrawOnscreen = (
   nativeId: number,
   recorder: JsiRecorder,

package/src/sksg/Container.web.ts

@@ -12,6 +12,9 @@ import { Container, StaticContainer } from "./StaticContainer";
 import "../skia/NativeSetup";
 import "../views/api";
 
+// create local reference for `strictGlobal` option in Worklets
+const { SkiaViewApi } = globalThis;
+
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
   const rec = Skia.PictureRecorder();

package/src/specs/WebGPUViewNativeComponent.ts

@@ -0,0 +1,11 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("WebGPUView");

package/src/specs/WebGPUViewNativeComponent.web.ts

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+import { contextIdToId } from "./utils";
+
+export interface NativeProps extends ViewProps {
+  contextId: Int32;
+  transparent: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+  immediate = false
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function debounced(
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ) {
+    const context = this;
+    const callNow = immediate && !timeout;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = undefined;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+function resizeCanvas(canvas: HTMLCanvasElement | null) {
+  if (!canvas) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+
+  const { height, width } = canvas.getBoundingClientRect();
+  canvas.setAttribute("height", (height * dpr).toString());
+  canvas.setAttribute("width", (width * dpr).toString());
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function WebGPUViewNativeComponent(
+  props: NativeProps
+): React.JSX.Element {
+  const { contextId, style, transparent, ...rest } = props;
+
+  const canvasElm = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return React.createElement("canvas", {
+    ...rest,
+    id: contextIdToId(contextId),
+    style: {
+      ...styles.view,
+      ...styles.flex1,
+      ...(transparent === false ? { backgroundColor: "white" } : {}),
+      ...(typeof style === "object" ? style : {}),
+    },
+    ref: (ref: HTMLCanvasElement) => {
+      canvasElm.current = ref;
+      if (ref) {
+        resizeCanvas(ref);
+      }
+    },
+  });
+}
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  view: {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    border: "0 solid black",
+    boxSizing: "border-box",
+    display: "flex",
+    flexBasis: "auto",
+    flexDirection: "column",
+    flexShrink: 0,
+    listStyle: "none",
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+  },
+});

package/src/specs/utils.ts

@@ -0,0 +1,4 @@
+// Only used on the web
+export function contextIdToId(contextId: number) {
+  return "rnwgpu-canvas-" + contextId;
+}

package/src/views/WebGPUCanvas.tsx

@@ -0,0 +1,109 @@
+import React, { useImperativeHandle, useRef, useState } from "react";
+import type { ViewProps } from "react-native";
+import { View, Platform } from "react-native";
+
+import WebGPUNativeView from "../specs/WebGPUViewNativeComponent";
+
+let CONTEXT_COUNTER = 1;
+function generateContextId() {
+  return CONTEXT_COUNTER++;
+}
+
+declare global {
+  var RNWebGPU: {
+    gpu: GPU;
+    fabric: boolean;
+    getNativeSurface: (contextId: number) => NativeCanvas;
+    MakeWebGPUCanvasContext: (
+      contextId: number,
+      width: number,
+      height: number
+    ) => RNCanvasContext;
+  };
+}
+
+type SurfacePointer = bigint;
+
+export interface NativeCanvas {
+  surface: SurfacePointer;
+  width: number;
+  height: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
+export type RNCanvasContext = GPUCanvasContext & {
+  present: () => void;
+};
+
+export interface WebGPUCanvasRef {
+  getContextId: () => number;
+  getContext(contextName: "webgpu"): RNCanvasContext | null;
+  getNativeSurface: () => NativeCanvas;
+}
+
+interface WebGPUCanvasProps extends ViewProps {
+  transparent?: boolean;
+  ref?: React.Ref<WebGPUCanvasRef>;
+}
+
+export const WebGPUCanvas = ({
+  transparent,
+  ref,
+  ...props
+}: WebGPUCanvasProps) => {
+  const viewRef = useRef(null);
+  const [contextId] = useState(() => generateContextId());
+
+  useImperativeHandle(ref, () => ({
+    getContextId: () => contextId,
+    getNativeSurface: () => {
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error(
+          "[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled."
+        );
+      }
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    getContext(contextName: "webgpu"): RNCanvasContext | null {
+      if (contextName !== "webgpu") {
+        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+      }
+      if (!viewRef.current) {
+        throw new Error("[WebGPU] Cannot get context before mount");
+      }
+      if (typeof RNWebGPU === "undefined") {
+        throw new Error(
+          "[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled."
+        );
+      }
+      // getBoundingClientRect became stable in RN 0.83
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = viewRef.current as any;
+      const size =
+        "getBoundingClientRect" in view
+          ? view.getBoundingClientRect()
+          : view.unstable_getBoundingClientRect();
+      return RNWebGPU.MakeWebGPUCanvasContext(
+        contextId,
+        size.width,
+        size.height
+      );
+    },
+  }));
+
+  // WebGPU Canvas is not supported on web
+  if (Platform.OS === "web") {
+    return <View {...props} />;
+  }
+
+  return (
+    <View collapsable={false} ref={viewRef} {...props}>
+      <WebGPUNativeView
+        style={{ flex: 1 }}
+        contextId={contextId}
+        transparent={!!transparent}
+      />
+    </View>
+  );
+};