@shopify/react-native-skia 1.11.4 → 1.11.6

package/lib/module/sksg/Container.js

@@ -8,6 +8,7 @@ import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
+import "../views/api";
 const drawOnscreen = (Skia, nativeId, recording) => {
   "worklet";
 
@@ -21,8 +22,6 @@ const drawOnscreen = (Skia, nativeId, recording) => {
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 const nativeDrawOnscreen = (nativeId, recorder) => {
   "worklet";
@@ -131,6 +130,11 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
+    Rea.runOnUI(() => {
+      "worklet";
+
+      nativeDrawOnscreen(nativeId, sharedRecorder);
+    })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
@@ -139,17 +143,12 @@ class NativeReanimatedContainer extends Container {
         nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
-    Rea.runOnUI(() => {
-      "worklet";
-
-      nativeDrawOnscreen(nativeId, sharedRecorder);
-    })();
   }
 }
 export const createContainer = (Skia, nativeId) => {
-  const native = global.SkiaViewApi !== undefined;
+  const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    if (native) {
+    if (!web) {
       return new NativeReanimatedContainer(Skia, nativeId);
     } else {
       return new ReanimatedContainer(Skia, nativeId);

package/lib/module/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","unmount","unmounted","drawOnCanvas","Error","StaticContainer","redraw","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","native","global","undefined"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const native = global.SkiaViewApi !== undefined;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (native) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","unmount","unmounted","drawOnCanvas","Error","StaticContainer","redraw","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","web","global"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nimport \"../views/api\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const web = global.SkiaViewApi && global.SkiaViewApi.web;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (!web) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/Recorder/Core.js

@@ -41,6 +41,7 @@
 //   DrawAtlas = "DrawAtlas",
 // }
 export let CommandType = /*#__PURE__*/function (CommandType) {
+  // Context
   CommandType[CommandType["Group"] = 0] = "Group";
   CommandType[CommandType["SavePaint"] = 1] = "SavePaint";
   CommandType[CommandType["RestorePaint"] = 2] = "RestorePaint";
@@ -58,6 +59,7 @@ export let CommandType = /*#__PURE__*/function (CommandType) {
   CommandType[CommandType["SaveBackdropFilter"] = 14] = "SaveBackdropFilter";
   CommandType[CommandType["SaveLayer"] = 15] = "SaveLayer";
   CommandType[CommandType["RestorePaintDeclaration"] = 16] = "RestorePaintDeclaration";
+  // Drawing
   CommandType[CommandType["DrawBox"] = 17] = "DrawBox";
   CommandType[CommandType["DrawImage"] = 18] = "DrawImage";
   CommandType[CommandType["DrawCircle"] = 19] = "DrawCircle";

package/lib/module/sksg/Recorder/Core.js.map

@@ -1 +1 @@
-{"version":3,"names":["CommandType","materializeProps","command","animatedProps","key","props","value","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  DrawingNodeProps,\n} from \"../../dom/types\";\n\n// export enum CommandType {\n//   // Context\n//   Group = \"Group\",\n//   SavePaint = \"SavePaint\",\n//   RestorePaint = \"RestorePaint\",\n//   SaveCTM = \"SaveCTM\",\n//   RestoreCTM = \"RestoreCTM\",\n//   PushColorFilter = \"PushColorFilter\",\n//   PushBlurMaskFilter = \"PushBlurMaskFilter\",\n//   PushImageFilter = \"PushImageFilter\",\n//   PushPathEffect = \"PushPathEffect\",\n//   PushShader = \"PushShader\",\n//   ComposeColorFilter = \"ComposeColorFilter\",\n//   ComposeImageFilter = \"ComposeImageFilter\",\n//   ComposePathEffect = \"ComposePathEffect\",\n//   MaterializePaint = \"MaterializePaint\",\n//   SaveBackdropFilter = \"SaveBackdropFilter\",\n//   SaveLayer = \"SaveLayer\",\n//   RestorePaintDeclaration = \"RestorePaintDeclaration\",\n//   // Drawing\n//   DrawBox = \"DrawBox\",\n//   DrawImage = \"DrawImage\",\n//   DrawCircle = \"DrawCircle\",\n//   DrawPaint = \"DrawPaint\",\n//   DrawPoints = \"DrawPoints\",\n//   DrawPath = \"DrawPath\",\n//   DrawRect = \"DrawRect\",\n//   DrawRRect = \"DrawRRect\",\n//   DrawOval = \"DrawOval\",\n//   DrawLine = \"DrawLine\",\n//   DrawPatch = \"DrawPatch\",\n//   DrawVertices = \"DrawVertices\",\n//   DrawDiffRect = \"DrawDiffRect\",\n//   DrawText = \"DrawText\",\n//   DrawTextPath = \"DrawTextPath\",\n//   DrawTextBlob = \"DrawTextBlob\",\n//   DrawGlyphs = \"DrawGlyphs\",\n//   DrawPicture = \"DrawPicture\",\n//   DrawImageSVG = \"DrawImageSVG\",\n//   DrawParagraph = \"DrawParagraph\",\n//   DrawAtlas = \"DrawAtlas\",\n// }\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\nexport const materializeProps = (command: {\n  props: Record<string, unknown>;\n  animatedProps?: Record<string, SharedValue<unknown>>;\n}) => {\n  \"worklet\";\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      command.props[key] = command.animatedProps[key].value;\n    }\n  }\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\ninterface GroupCommand extends Command<CommandType.Group> {\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,WAAW,0BAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AAgDvB,OAAO,MAAMC,gBAAgB,GAAIC,OAGhC,IAAK;EACJ,SAAS;;EACT,IAAIA,OAAO,CAACC,aAAa,EAAE;IACzB,KAAK,MAAMC,GAAG,IAAIF,OAAO,CAACC,aAAa,EAAE;MACvCD,OAAO,CAACG,KAAK,CAACD,GAAG,CAAC,GAAGF,OAAO,CAACC,aAAa,CAACC,GAAG,CAAC,CAACE,KAAK;IACvD;EACF;AACF,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CACvBL,OAAgB,EAChBM,IAAO,KACmB;EAC1B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC;AAMD,OAAO,MAAMC,OAAO,GAAIP,OAAgB,IAA8B;EACpE,SAAS;;EACT,OAAOA,OAAO,CAACM,IAAI,KAAKR,WAAW,CAACU,KAAK;AAC3C,CAAC;AA+BD,OAAO,MAAMC,aAAa,GAAGA,CAC3BT,OAAgB,EAChBM,IAAO,KACuB;EAC9B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC","ignoreList":[]}
+{"version":3,"names":["CommandType","materializeProps","command","animatedProps","key","props","value","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  DrawingNodeProps,\n} from \"../../dom/types\";\n\n// export enum CommandType {\n//   // Context\n//   Group = \"Group\",\n//   SavePaint = \"SavePaint\",\n//   RestorePaint = \"RestorePaint\",\n//   SaveCTM = \"SaveCTM\",\n//   RestoreCTM = \"RestoreCTM\",\n//   PushColorFilter = \"PushColorFilter\",\n//   PushBlurMaskFilter = \"PushBlurMaskFilter\",\n//   PushImageFilter = \"PushImageFilter\",\n//   PushPathEffect = \"PushPathEffect\",\n//   PushShader = \"PushShader\",\n//   ComposeColorFilter = \"ComposeColorFilter\",\n//   ComposeImageFilter = \"ComposeImageFilter\",\n//   ComposePathEffect = \"ComposePathEffect\",\n//   MaterializePaint = \"MaterializePaint\",\n//   SaveBackdropFilter = \"SaveBackdropFilter\",\n//   SaveLayer = \"SaveLayer\",\n//   RestorePaintDeclaration = \"RestorePaintDeclaration\",\n//   // Drawing\n//   DrawBox = \"DrawBox\",\n//   DrawImage = \"DrawImage\",\n//   DrawCircle = \"DrawCircle\",\n//   DrawPaint = \"DrawPaint\",\n//   DrawPoints = \"DrawPoints\",\n//   DrawPath = \"DrawPath\",\n//   DrawRect = \"DrawRect\",\n//   DrawRRect = \"DrawRRect\",\n//   DrawOval = \"DrawOval\",\n//   DrawLine = \"DrawLine\",\n//   DrawPatch = \"DrawPatch\",\n//   DrawVertices = \"DrawVertices\",\n//   DrawDiffRect = \"DrawDiffRect\",\n//   DrawText = \"DrawText\",\n//   DrawTextPath = \"DrawTextPath\",\n//   DrawTextBlob = \"DrawTextBlob\",\n//   DrawGlyphs = \"DrawGlyphs\",\n//   DrawPicture = \"DrawPicture\",\n//   DrawImageSVG = \"DrawImageSVG\",\n//   DrawParagraph = \"DrawParagraph\",\n//   DrawAtlas = \"DrawAtlas\",\n// }\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\nexport const materializeProps = (command: {\n  props: Record<string, unknown>;\n  animatedProps?: Record<string, SharedValue<unknown>>;\n}) => {\n  \"worklet\";\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      command.props[key] = command.animatedProps[key].value;\n    }\n  }\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\ninterface GroupCommand extends Command<CommandType.Group> {\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYA,WAAW,0BAAXA,WAAW;EACrB;EADUA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAmBrB;EAnBUA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AAgDvB,OAAO,MAAMC,gBAAgB,GAAIC,OAGhC,IAAK;EACJ,SAAS;;EACT,IAAIA,OAAO,CAACC,aAAa,EAAE;IACzB,KAAK,MAAMC,GAAG,IAAIF,OAAO,CAACC,aAAa,EAAE;MACvCD,OAAO,CAACG,KAAK,CAACD,GAAG,CAAC,GAAGF,OAAO,CAACC,aAAa,CAACC,GAAG,CAAC,CAACE,KAAK;IACvD;EACF;AACF,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CACvBL,OAAgB,EAChBM,IAAO,KACmB;EAC1B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC;AAMD,OAAO,MAAMC,OAAO,GAAIP,OAAgB,IAA8B;EACpE,SAAS;;EACT,OAAOA,OAAO,CAACM,IAAI,KAAKR,WAAW,CAACU,KAAK;AAC3C,CAAC;AA+BD,OAAO,MAAMC,aAAa,GAAGA,CAC3BT,OAAgB,EAChBM,IAAO,KACuB;EAC9B,SAAS;;EACT,OAAON,OAAO,CAACM,IAAI,KAAKA,IAAI;AAC9B,CAAC","ignoreList":[]}

package/lib/module/specs/NativeSkiaModule.web.d.ts

@@ -0,0 +1,6 @@
+import type { ISkiaViewApi } from "../views/types";
+import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+export type ISkiaViewApiWeb = ISkiaViewApi & {
+    views: Record<string, SkiaPictureView>;
+    registerView(nativeId: string, view: SkiaPictureView): void;
+};

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

@@ -1,2 +1,31 @@
-
+global.SkiaViewApi = {
+  views: {},
+  web: true,
+  registerView(nativeId, view) {
+    this.views[nativeId] = view;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setJsiProperty(nativeId, name, value) {
+    if (name === "picture") {
+      this.views[`${nativeId}`].setPicture(value);
+    }
+  },
+  requestRedraw(nativeId) {
+    this.views[`${nativeId}`].redraw();
+  },
+  makeImageSnapshot(nativeId, rect) {
+    return this.views[`${nativeId}`].makeImageSnapshot(rect);
+  },
+  makeImageSnapshotAsync(nativeId, rect) {
+    return new Promise((resolve, reject) => {
+      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);
+      if (result) {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to make image snapshot"));
+      }
+    });
+  }
+};
+export {};
 //# sourceMappingURL=NativeSkiaModule.web.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":[""],"mappings":"","ignoreList":[]}
+{"version":3,"names":["global","SkiaViewApi","views","web","registerView","nativeId","view","setJsiProperty","name","value","setPicture","requestRedraw","redraw","makeImageSnapshot","rect","makeImageSnapshotAsync","Promise","resolve","reject","result","Error"],"sources":["NativeSkiaModule.web.ts"],"sourcesContent":["import type { SkRect } from \"../skia/types\";\nimport type { ISkiaViewApi } from \"../views/types\";\nimport type { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nexport type ISkiaViewApiWeb = ISkiaViewApi & {\n  views: Record<string, SkiaPictureView>;\n  registerView(nativeId: string, view: SkiaPictureView): void;\n};\n\nglobal.SkiaViewApi = {\n  views: {},\n  web: true,\n  registerView(nativeId: string, view: SkiaPictureView) {\n    this.views[nativeId] = view;\n  },\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  setJsiProperty(nativeId: number, name: string, value: any) {\n    if (name === \"picture\") {\n      this.views[`${nativeId}`].setPicture(value);\n    }\n  },\n  requestRedraw(nativeId: number) {\n    this.views[`${nativeId}`].redraw();\n  },\n  makeImageSnapshot(nativeId: number, rect?: SkRect) {\n    return this.views[`${nativeId}`].makeImageSnapshot(rect);\n  },\n  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {\n    return new Promise((resolve, reject) => {\n      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);\n      if (result) {\n        resolve(result);\n      } else {\n        reject(new Error(\"Failed to make image snapshot\"));\n      }\n    });\n  },\n} as ISkiaViewApiWeb;\n"],"mappings":"AASAA,MAAM,CAACC,WAAW,GAAG;EACnBC,KAAK,EAAE,CAAC,CAAC;EACTC,GAAG,EAAE,IAAI;EACTC,YAAYA,CAACC,QAAgB,EAAEC,IAAqB,EAAE;IACpD,IAAI,CAACJ,KAAK,CAACG,QAAQ,CAAC,GAAGC,IAAI;EAC7B,CAAC;EACD;EACAC,cAAcA,CAACF,QAAgB,EAAEG,IAAY,EAAEC,KAAU,EAAE;IACzD,IAAID,IAAI,KAAK,SAAS,EAAE;MACtB,IAAI,CAACN,KAAK,CAAC,GAAGG,QAAQ,EAAE,CAAC,CAACK,UAAU,CAACD,KAAK,CAAC;IAC7C;EACF,CAAC;EACDE,aAAaA,CAACN,QAAgB,EAAE;IAC9B,IAAI,CAACH,KAAK,CAAC,GAAGG,QAAQ,EAAE,CAAC,CAACO,MAAM,CAAC,CAAC;EACpC,CAAC;EACDC,iBAAiBA,CAACR,QAAgB,EAAES,IAAa,EAAE;IACjD,OAAO,IAAI,CAACZ,KAAK,CAAC,GAAGG,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;EAC1D,CAAC;EACDC,sBAAsBA,CAACV,QAAgB,EAAES,IAAa,EAAE;IACtD,OAAO,IAAIE,OAAO,CAAC,CAACC,OAAO,EAAEC,MAAM,KAAK;MACtC,MAAMC,MAAM,GAAG,IAAI,CAACjB,KAAK,CAAC,GAAGG,QAAQ,EAAE,CAAC,CAACQ,iBAAiB,CAACC,IAAI,CAAC;MAChE,IAAIK,MAAM,EAAE;QACVF,OAAO,CAACE,MAAM,CAAC;MACjB,CAAC,MAAM;QACLD,MAAM,CAAC,IAAIE,KAAK,CAAC,+BAA+B,CAAC,CAAC;MACpD;IACF,CAAC,CAAC;EACJ;AACF,CAAoB;AAAC","ignoreList":[]}

package/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -0,0 +1,9 @@
+import type { ViewProps } from "react-native";
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+export interface NativeProps extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    nativeID: string;
+}
+declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").CElement<import("..").SkiaPictureViewNativeProps, SkiaPictureView>;
+export default SkiaPictureViewNativeComponent;

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

@@ -0,0 +1,26 @@
+import { createElement, useEffect, useRef } from "react";
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+const SkiaPictureViewNativeComponent = ({
+  nativeID,
+  debug,
+  opaque,
+  onLayout,
+  ...viewProps
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      global.SkiaViewApi.registerView(nativeID, ref.current);
+    }
+  }, [nativeID]);
+  return /*#__PURE__*/createElement(SkiaPictureView, {
+    ref,
+    debug,
+    opaque,
+    onLayout,
+    ...viewProps
+  });
+};
+// eslint-disable-next-line import/no-default-export
+export default SkiaPictureViewNativeComponent;
+//# sourceMappingURL=SkiaPictureViewNativeComponent.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","useEffect","useRef","SkiaPictureView","SkiaPictureViewNativeComponent","nativeID","debug","opaque","onLayout","viewProps","ref","current","global","SkiaViewApi","registerView"],"sources":["SkiaPictureViewNativeComponent.web.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport { createElement, useEffect, useRef } from \"react\";\n\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\nimport type { ISkiaViewApiWeb } from \"./NativeSkiaModule.web\";\n\nexport interface NativeProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  nativeID: string;\n}\n\nconst SkiaPictureViewNativeComponent = ({\n  nativeID,\n  debug,\n  opaque,\n  onLayout,\n  ...viewProps\n}: NativeProps) => {\n  const ref = useRef(null);\n  useEffect(() => {\n    if (ref.current) {\n      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(\n        nativeID,\n        ref.current\n      );\n    }\n  }, [nativeID]);\n  return createElement(SkiaPictureView, {\n    ref,\n    debug,\n    opaque,\n    onLayout,\n    ...viewProps,\n  });\n};\n// eslint-disable-next-line import/no-default-export\nexport default SkiaPictureViewNativeComponent;\n"],"mappings":"AACA,SAASA,aAAa,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAExD,SAASC,eAAe,QAAQ,8BAA8B;AAU9D,MAAMC,8BAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACQ,CAAC,KAAK;EACjB,MAAMC,GAAG,GAAGR,MAAM,CAAC,IAAI,CAAC;EACxBD,SAAS,CAAC,MAAM;IACd,IAAIS,GAAG,CAACC,OAAO,EAAE;MACdC,MAAM,CAACC,WAAW,CAAqBC,YAAY,CAClDT,QAAQ,EACRK,GAAG,CAACC,OACN,CAAC;IACH;EACF,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EACd,oBAAOL,aAAa,CAACG,eAAe,EAAE;IACpCO,GAAG;IACHJ,KAAK;IACLC,MAAM;IACNC,QAAQ;IACR,GAAGC;EACL,CAAC,CAAC;AACJ,CAAC;AACD;AACA,eAAeL,8BAA8B","ignoreList":[]}

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

@@ -7,6 +7,7 @@ export type NativeSkiaViewProps = ViewProps & {
     opaque?: boolean;
 };
 export interface ISkiaViewApi {
+    web?: boolean;
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Node } from \"../dom/types\";\nimport type { SkImage, SkPicture, SkRect, SkSize } from \"../skia/types\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  debug?: boolean;\n  opaque?: boolean;\n};\n\nexport interface ISkiaViewApi {\n  web?: boolean;\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Pass an animated value to the onSize property to get updates when\n   * the Skia view is resized.\n   */\n  onSize?: SharedValue<SkSize>;\n\n  opaque?: boolean;\n}\n\nexport interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n\nexport interface SkiaDomViewNativeProps extends SkiaBaseViewProps {\n  root?: Node<unknown>;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/typescript/lib/commonjs/animation/functions/interpolateColors.d.ts

@@ -1,3 +1,3 @@
 export const __esModule: boolean;
 export function interpolateColors(value: any, inputRange: any, _outputRange: any): any[];
-export function mixColors(value: any, x: any, y: any): Float32Array;
+export function mixColors(value: any, x: any, y: any): Float32Array<ArrayBuffer>;

package/lib/typescript/lib/commonjs/renderer/components/image/ImageShader.d.ts

@@ -4,5 +4,5 @@ export function ImageShader({ tx, ty, fit, transform, ...props }: {
     tx?: string | undefined;
     ty?: string | undefined;
     fit?: string | undefined;
-    transform?: any[] | undefined;
+    transform?: never[] | undefined;
 }): any;

package/lib/typescript/lib/commonjs/skia/web/JsiSkColor.d.ts

@@ -1,2 +1,2 @@
 export const __esModule: boolean;
-export function Color(color: any): Float32Array;
+export function Color(color: any): Float32Array<ArrayBufferLike>;

package/lib/typescript/lib/commonjs/skia/web/JsiSkia.d.ts

@@ -5,7 +5,7 @@ export function JsiSkApi(CanvasKit: any): {
     RRectXY: (rect: any, rx: any, ry: any) => _JsiSkRRect.JsiSkRRect;
     RSXform: (scos: any, ssin: any, tx: any, ty: any) => _JsiSkRSXform.JsiSkRSXform;
     RSXformFromRadians: (scale: any, r: any, tx: any, ty: any, px: any, py: any) => _JsiSkRSXform.JsiSkRSXform;
-    Color: (color: any) => Float32Array;
+    Color: (color: any) => Float32Array<ArrayBufferLike>;
     ContourMeasureIter: (path: any, forceClosed: any, resScale: any) => _JsiSkContourMeasureIter.JsiSkContourMeasureIter;
     Paint: () => _JsiSkPaint.JsiSkPaint;
     PictureRecorder: () => _JsiSkPictureRecorder.JsiSkPictureRecorder;

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

@@ -0,0 +1 @@
+export const __esModule: boolean;

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

@@ -0,0 +1,10 @@
+export const __esModule: boolean;
+export default SkiaPictureViewNativeComponent;
+declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, ...viewProps }: {
+    [x: string]: any;
+    nativeID: any;
+    debug: any;
+    opaque: any;
+    onLayout: any;
+}): _react.DetailedReactHTMLElement<_react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+import _react = require("react");

package/lib/typescript/lib/module/animation/functions/interpolateColors.d.ts

@@ -1,2 +1,2 @@
 export function interpolateColors(value: any, inputRange: any, _outputRange: any): any[];
-export function mixColors(value: any, x: any, y: any): Float32Array;
+export function mixColors(value: any, x: any, y: any): Float32Array<ArrayBuffer>;

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

@@ -138,7 +138,7 @@ export function Mock(CanvasKit: any): {
     interpolate(x: any, input: any, output: any, type: any): any;
     Extrapolate: {};
     interpolateColors: (value: any, inputRange: any, _outputRange: any) => any[];
-    mixColors: (value: any, x: any, y: any) => Float32Array;
+    mixColors: (value: any, x: any, y: any) => Float32Array<ArrayBuffer>;
     interpolateVector: (value: any, inputRange: any, outputRange: any, options: any) => {
         x: any;
         y: any;
@@ -356,7 +356,7 @@ export function Mock(CanvasKit: any): {
         tx?: string | undefined;
         ty?: string | undefined;
         fit?: string | undefined;
-        transform?: any[] | undefined;
+        transform?: never[] | undefined;
     }) => import("react").DOMElement<any, Element>;
     ImageSVG: (props: any) => import("react").DOMElement<any, Element>;
     RadialGradient: (props: any) => import("react").DOMElement<any, Element>;

package/lib/typescript/lib/module/renderer/components/image/ImageShader.d.ts

@@ -3,6 +3,6 @@ export function ImageShader({ tx, ty, fit, transform, ...props }: {
     tx?: string | undefined;
     ty?: string | undefined;
     fit?: string | undefined;
-    transform?: any[] | undefined;
+    transform?: never[] | undefined;
 }): React.DOMElement<any, Element>;
 import React from "react";

package/lib/typescript/lib/module/skia/Skia.web.d.ts

@@ -4,7 +4,7 @@ export const Skia: {
     RRectXY: (rect: any, rx: any, ry: any) => import("./web/JsiSkRRect").JsiSkRRect;
     RSXform: (scos: any, ssin: any, tx: any, ty: any) => import("./web/JsiSkRSXform").JsiSkRSXform;
     RSXformFromRadians: (scale: any, r: any, tx: any, ty: any, px: any, py: any) => import("./web/JsiSkRSXform").JsiSkRSXform;
-    Color: (color: any) => Float32Array;
+    Color: (color: any) => Float32Array<ArrayBufferLike>;
     ContourMeasureIter: (path: any, forceClosed: any, resScale: any) => import("./web/JsiSkContourMeasureIter").JsiSkContourMeasureIter;
     Paint: () => import("./web/JsiSkPaint").JsiSkPaint;
     PictureRecorder: () => import("./web/JsiSkPictureRecorder").JsiSkPictureRecorder;

package/lib/typescript/lib/module/skia/web/JsiSkColor.d.ts

@@ -1 +1 @@
-export function Color(color: any): Float32Array;
+export function Color(color: any): Float32Array<ArrayBufferLike>;

package/lib/typescript/lib/module/skia/web/JsiSkia.d.ts

@@ -4,7 +4,7 @@ export function JsiSkApi(CanvasKit: any): {
     RRectXY: (rect: any, rx: any, ry: any) => JsiSkRRect;
     RSXform: (scos: any, ssin: any, tx: any, ty: any) => JsiSkRSXform;
     RSXformFromRadians: (scale: any, r: any, tx: any, ty: any, px: any, py: any) => JsiSkRSXform;
-    Color: (color: any) => Float32Array;
+    Color: (color: any) => Float32Array<ArrayBufferLike>;
     ContourMeasureIter: (path: any, forceClosed: any, resScale: any) => JsiSkContourMeasureIter;
     Paint: () => JsiSkPaint;
     PictureRecorder: () => JsiSkPictureRecorder;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export default SkiaPictureViewNativeComponent;
+declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLayout, ...viewProps }: {
+    [x: string]: any;
+    nativeID: any;
+    debug: any;
+    opaque: any;
+    onLayout: any;
+}): import("react").CElement<any, SkiaPictureView>;
+import { SkiaPictureView } from "../views/SkiaPictureView.web";

package/lib/typescript/src/animation/functions/interpolateColors.d.ts

@@ -1,3 +1,3 @@
 import type { Color } from "../../skia";
 export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => number[];
-export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array;
+export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array<ArrayBuffer>;

package/lib/typescript/src/dom/nodes/datatypes/Gradient.d.ts

@@ -242,9 +242,9 @@ export declare const transformOrigin: (origin: Vector, transform: Transforms3d)
     rotateY: number;
     matrix: import("../../../skia/types").Matrix4;
 }, "matrix">)[];
-export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => Float32Array;
+export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => import("../../../skia/types").SkColor;
 export declare const processGradientProps: (Skia: Skia, { colors, positions, mode, flags, ...transform }: GradientProps) => {
-    colors: Float32Array[];
+    colors: import("../../../skia/types").SkColor[];
     positions: number[] | null;
     mode: TileMode;
     flags: number | undefined;

package/lib/typescript/src/external/reanimated/buffers.d.ts

@@ -3,5 +3,5 @@ type Modifier<T> = (input: T, index: number) => void;
 export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/commonTypes").Mutable<SkHostRect[]>;
 export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/commonTypes").Mutable<SkRSXform[]>;
 export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/commonTypes").Mutable<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/commonTypes").Mutable<Float32Array[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/commonTypes").Mutable<SkColor[]>;
 export {};

package/lib/typescript/src/renderer/__tests__/setup.d.ts

@@ -24,7 +24,7 @@ export declare let fonts: {
     DinMedium: SkFont;
 };
 export declare const wait: (ms: number) => Promise<unknown>;
-export declare const resolveFile: (uri: string) => Buffer;
+export declare const resolveFile: (uri: string) => Buffer<ArrayBufferLike>;
 export declare const resolveFont: (uri: string) => number[];
 export declare const testingFonts: {
     Roboto: number[][];

package/lib/typescript/src/skia/web/JsiSkCanvas.d.ts

@@ -43,5 +43,5 @@ export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements
     concat(m: SkMatrix | number[]): void;
     drawPicture(skp: SkPicture): void;
     drawAtlas(atlas: SkImage, srcs: SkRect[], dsts: SkRSXform[], paint: SkPaint, blendMode?: BlendMode, colors?: SkColor[], sampling?: CubicResampler | FilterOptions): void;
-    readPixels(srcX: number, srcY: number, imageInfo: ImageInfo): Float32Array | Uint8Array | null;
+    readPixels(srcX: number, srcY: number, imageInfo: ImageInfo): Float32Array<ArrayBufferLike> | Uint8Array<ArrayBufferLike> | null;
 }

package/lib/typescript/src/skia/web/JsiSkImage.d.ts

@@ -9,9 +9,9 @@ export declare class JsiSkImage extends HostObject<Image, "Image"> implements Sk
     getImageInfo(): ImageInfo;
     makeShaderOptions(tx: TileMode, ty: TileMode, fm: FilterMode, mm: MipmapMode, localMatrix?: SkMatrix): SkShader;
     makeShaderCubic(tx: TileMode, ty: TileMode, B: number, C: number, localMatrix?: SkMatrix): SkShader;
-    encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array;
+    encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array<ArrayBufferLike>;
     encodeToBase64(fmt?: ImageFormat, quality?: number): string;
-    readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo): Float32Array | Uint8Array | null;
+    readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo): Float32Array<ArrayBufferLike> | Uint8Array<ArrayBufferLike> | null;
     dispose: () => void;
     makeNonTextureImage(): SkImage;
     getNativeTextureUnstable(): unknown;

package/lib/typescript/src/skia/web/JsiSkPaint.d.ts

@@ -8,7 +8,7 @@ export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements Sk
     assign(paint: JsiSkPaint): void;
     reset(): void;
     getAlphaf(): number;
-    getColor(): Float32Array;
+    getColor(): import("canvaskit-wasm").Color;
     getStrokeCap(): number;
     getStrokeJoin(): number;
     getStrokeMiter(): number;

package/lib/typescript/src/skia/web/JsiSkPicture.d.ts

@@ -6,5 +6,5 @@ export declare class JsiSkPicture extends HostObject<Picture, "Picture"> impleme
     constructor(CanvasKit: CanvasKit, ref: Picture);
     dispose: () => void;
     makeShader(tmx: TileMode, tmy: TileMode, mode: FilterMode, localMatrix?: SkMatrix, tileRect?: SkRect): JsiSkShader;
-    serialize(): Uint8Array | null;
+    serialize(): Uint8Array<ArrayBufferLike> | null;
 }

package/lib/typescript/src/skia/web/JsiSkPoint.d.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, Point } from "canvaskit-wasm";
 import type { SkPoint } from "../types";
 import { BaseHostObject } from "./Host";
 export declare class JsiSkPoint extends BaseHostObject<Point, "Point"> implements SkPoint {
-    static fromValue(point: SkPoint): Float32Array;
+    static fromValue(point: SkPoint): Float32Array<ArrayBuffer>;
     constructor(CanvasKit: CanvasKit, ref: Point);
     dispose: () => void;
     get x(): number;

package/lib/typescript/src/skia/web/JsiSkRRect.d.ts

@@ -4,7 +4,7 @@ import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
     dispose: () => void;
-    static fromValue(CanvasKit: CanvasKit, rect: InputRRect): Float32Array;
+    static fromValue(CanvasKit: CanvasKit, rect: InputRRect): Float32Array<ArrayBuffer>;
     constructor(CanvasKit: CanvasKit, rect: SkRect, rx: number, ry: number);
     get rx(): number;
     get ry(): number;

package/lib/typescript/src/skia/web/JsiSkRSXform.d.ts

@@ -3,7 +3,7 @@ import type { SkRSXform } from "../types";
 import { BaseHostObject } from "./Host";
 export type RSXform = Float32Array;
 export declare class JsiSkRSXform extends BaseHostObject<RSXform, "RSXform"> implements SkRSXform {
-    static fromValue(rsxform: SkRSXform): Float32Array;
+    static fromValue(rsxform: SkRSXform): Float32Array<ArrayBuffer>;
     constructor(CanvasKit: CanvasKit, ref: RSXform);
     set(scos: number, ssin: number, tx: number, ty: number): void;
     get scos(): number;

package/lib/typescript/src/skia/web/JsiSkRect.d.ts

@@ -2,7 +2,7 @@ import type { CanvasKit, Rect } from "canvaskit-wasm";
 import type { SkHostRect, SkRect } from "../types";
 import { BaseHostObject } from "./Host";
 export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkHostRect {
-    static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
+    static fromValue(CanvasKit: CanvasKit, rect: SkRect): Rect;
     dispose: () => void;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     setXYWH(x: number, y: number, width: number, height: number): void;

package/lib/typescript/src/sksg/Container.d.ts

@@ -1,6 +1,7 @@
 import type { Skia, SkCanvas } from "../skia/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
+import "../views/api";
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;

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

@@ -0,0 +1,6 @@
+import type { ISkiaViewApi } from "../views/types";
+import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+export type ISkiaViewApiWeb = ISkiaViewApi & {
+    views: Record<string, SkiaPictureView>;
+    registerView(nativeId: string, view: SkiaPictureView): void;
+};

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

@@ -0,0 +1,9 @@
+import type { ViewProps } from "react-native";
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+export interface NativeProps extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    nativeID: string;
+}
+declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").CElement<import("..").SkiaPictureViewNativeProps, SkiaPictureView>;
+export default SkiaPictureViewNativeComponent;

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

@@ -7,6 +7,7 @@ export type NativeSkiaViewProps = ViewProps & {
     opaque?: boolean;
 };
 export interface ISkiaViewApi {
+    web?: boolean;
     setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.4",
+  "version": "1.11.6",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/sksg/Container.ts

@@ -11,6 +11,8 @@ import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
+import "../views/api";
+
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
 
@@ -24,8 +26,6 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 
 const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
@@ -140,6 +140,10 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
+    Rea.runOnUI(() => {
+      "worklet";
+      nativeDrawOnscreen(nativeId, sharedRecorder);
+    })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
@@ -147,17 +151,13 @@ class NativeReanimatedContainer extends Container {
         nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
-    Rea.runOnUI(() => {
-      "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
-    })();
   }
 }
 
 export const createContainer = (Skia: Skia, nativeId: number) => {
-  const native = global.SkiaViewApi !== undefined;
+  const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    if (native) {
+    if (!web) {
       return new NativeReanimatedContainer(Skia, nativeId);
     } else {
       return new ReanimatedContainer(Skia, nativeId);