@shopify/react-native-skia 2.5.2 → 2.5.4

package/lib/module/specs/WebGPUViewNativeComponent.web.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet } from "react-native";
+import { contextIdToId } from "./utils";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function debounce(func, wait, immediate = false) {
+  let timeout;
+  return function debounced(...args) {
+    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) {
+  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) {
+  const {
+    contextId,
+    style,
+    transparent,
+    ...rest
+  } = props;
+  const canvasElm = useRef(null);
+  useEffect(() => {
+    const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ...rest,
+    id: contextIdToId(contextId),
+    style: {
+      ...styles.view,
+      ...styles.flex1,
+      ...(transparent === false ? {
+        backgroundColor: "white"
+      } : {}),
+      ...(typeof style === "object" ? style : {})
+    },
+    ref: ref => {
+      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
+  }
+});
+//# sourceMappingURL=WebGPUViewNativeComponent.web.js.map

package/lib/module/specs/WebGPUViewNativeComponent.web.js.map

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

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

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

package/lib/module/specs/utils.js

@@ -0,0 +1,5 @@
+// Only used on the web
+export function contextIdToId(contextId) {
+  return "rnwgpu-canvas-" + contextId;
+}
+//# sourceMappingURL=utils.js.map

package/lib/module/specs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contextIdToId","contextId"],"sources":["utils.ts"],"sourcesContent":["// Only used on the web\nexport function contextIdToId(contextId: number) {\n  return \"rnwgpu-canvas-\" + contextId;\n}\n"],"mappings":"AAAA;AACA,OAAO,SAASA,aAAaA,CAACC,SAAiB,EAAE;EAC/C,OAAO,gBAAgB,GAAGA,SAAS;AACrC","ignoreList":[]}

package/lib/module/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/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.4",
   "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/react-native-skia.podspec

@@ -18,6 +18,9 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
                    'libskunicode_core', 'libskunicode_libgrapheme',
                    'libskottie', 'libsksg']
 
+# Add Dawn library for Graphite builds (contains dawn::native symbols)
+framework_names += ['libdawn_combined'] if use_graphite
+
 # Verify that prebuilt binaries have been installed by the postinstall script
 unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
   Pod::UI.warn "#{'-' * 72}"

package/scripts/install-libs.js

@@ -3,7 +3,6 @@
 
 const path = require("path");
 const fs = require("fs");
-const { execSync } = require("child_process");
 
 const useGraphite =
   process.env.SK_GRAPHITE === "1" ||
@@ -11,6 +10,21 @@ const useGraphite =
 const prefix = useGraphite ? "react-native-skia-graphite" : "react-native-skia";
 const libsDir = path.join(__dirname, "..", "libs");
 
+function copySync(src, dest, options) {
+  if (!src.includes("*")) {
+    return fs.cpSync(src, dest, options);
+  }
+
+  const wildcardSplit = src.split("*");
+  const basePath = wildcardSplit[0];
+  const files = fs.readdirSync(basePath);
+  files
+    .filter(file => file.endsWith(wildcardSplit[1]))
+    .forEach((file) => {
+      return fs.cpSync(path.join(basePath, file), path.join(dest, file), options);
+    });
+}
+
 // --- Apple platforms ---
 
 let iosPackage, macosPackage;
@@ -49,30 +63,14 @@ console.log("-- Skia iOS package: " + iosPackage);
 console.log("-- Skia macOS package: " + macosPackage);
 
 // Clean and copy Apple frameworks
-execSync(
-  "rm -rf " +
-    path.join(libsDir, "ios") +
-    " " +
-    path.join(libsDir, "macos") +
-    " " +
-    path.join(libsDir, "tvos")
-);
+fs.rmSync(path.join(libsDir, "ios"), { recursive: true, force: true });
+fs.rmSync(path.join(libsDir, "macos"), { recursive: true, force: true });
+fs.rmSync(path.join(libsDir, "tvos"), { recursive: true, force: true });
 fs.mkdirSync(path.join(libsDir, "ios"), { recursive: true });
 fs.mkdirSync(path.join(libsDir, "macos"), { recursive: true });
-execSync(
-  'cp -R "' +
-    iosPackage +
-    '/libs/"*.xcframework "' +
-    path.join(libsDir, "ios") +
-    '/"'
-);
-execSync(
-  'cp -R "' +
-    macosPackage +
-    '/libs/"*.xcframework "' +
-    path.join(libsDir, "macos") +
-    '/"'
-);
+
+copySync(iosPackage + '/libs/*.xcframework', path.join(libsDir, "ios"), {recursive: true});
+copySync(macosPackage + '/libs/*.xcframework', path.join(libsDir, "macos"), {recursive: true});
 
 // Handle tvOS (non-Graphite only)
 if (!useGraphite) {
@@ -82,13 +80,7 @@ if (!useGraphite) {
     );
     console.log("-- Skia tvOS package: " + tvosPackage);
     fs.mkdirSync(path.join(libsDir, "tvos"), { recursive: true });
-    execSync(
-      'cp -R "' +
-        tvosPackage +
-        '/libs/"*.xcframework "' +
-        path.join(libsDir, "tvos") +
-        '/"'
-    );
+    copySync(tvosPackage + '/libs/*.xcframework', path.join(libsDir, "tvos"), {recursive: true});
   } catch (e) {
     console.log("-- tvOS package not found, skipping");
   }
@@ -125,7 +117,7 @@ console.log("-- Skia Android package: " + androidPackage);
 
 // Copy Android libs (per-ABI static libraries)
 const androidDest = path.join(libsDir, "android");
-execSync("rm -rf " + androidDest);
-execSync('cp -R "' + androidSrcLibs + '" "' + androidDest + '"');
+fs.rmSync(androidDest, { recursive: true, force: true });
+copySync(androidSrcLibs, androidDest, {recursive: true});
 
 console.log("-- Copied Android libs to libs/android/");

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,