@shopify/react-native-skia 1.0.3 → 1.0.5

package/lib/module/external/reanimated/buffers.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","Skia","startMapper","stopMapper","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","Array","fill","map","values","mod","deps","Object","__closure","mapperId","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: Modifier<T>\n) => {\n  const buffer = useMemo(\n    () => new Array(size).fill(0).map(bufferInitializer),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n  const values = useSharedValue(buffer);\n  const mod = modifier as WorkletFunction;\n  const deps = Object.values(mod.__closure ?? {});\n  const mapperId = startMapper(() => {\n    \"worklet\";\n    buffer.forEach((val, index) => {\n      modifier(val, index);\n    });\n    notifyChange(values);\n  }, deps);\n\n  useEffect(() => {\n    return () => {\n      stopMapper(mapperId);\n    };\n  }, [mapperId]);\n\n  return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n  useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n  useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAI1C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,WAAW,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAiB;AACzE,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGX,OAAO,CACpB,MAAM,IAAIY,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,MAAM,GAAGX,cAAc,CAACO,MAAM,CAAC;EACrC,MAAMK,GAAG,GAAGP,QAA2B;EACvC,MAAMQ,IAAI,GAAGC,MAAM,CAACH,MAAM,EAAAL,cAAA,GAACM,GAAG,CAACG,SAAS,cAAAT,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMU,QAAQ,GAAGlB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTS,MAAM,CAACU,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7Bd,QAAQ,CAACa,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFlB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXI,UAAU,CAACiB,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMS,aAAa,GAAGA,CAACjB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAACwB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEhB,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMiB,gBAAgB,GAAGA,CAACnB,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC0B,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMmB,cAAc,GAAGA,CAACrB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC4B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC8B,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}
+{"version":3,"names":["useEffect","useMemo","Skia","startMapper","stopMapper","makeMutable","notifyChange","useBufferValue","size","bufferInitializer","Array","fill","map","useBuffer","modifier","_mod$__closure","values","mod","deps","Object","__closure","mapperId","value","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, makeMutable } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBufferValue = <T>(size: number, bufferInitializer: () => T) =>\n  useMemo(\n    () => makeMutable(new Array(size).fill(0).map(bufferInitializer)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [size]\n  );\n\nconst useBuffer = <T>(\n  size: number,\n  bufferInitializer: () => T,\n  modifier: Modifier<T>\n) => {\n  const values = useBufferValue(size, bufferInitializer);\n  const mod = modifier as WorkletFunction;\n  const deps = [size, ...Object.values(mod.__closure ?? {})];\n  const mapperId = startMapper(() => {\n    \"worklet\";\n    values.value.forEach((val, index) => {\n      modifier(val, index);\n    });\n    notifyChange(values);\n  }, deps);\n\n  useEffect(() => {\n    return () => {\n      stopMapper(mapperId);\n    };\n  }, [mapperId]);\n\n  return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n  useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n  useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n  useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n  useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAI1C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,WAAW,EAAEC,UAAU,EAAEC,WAAW,QAAQ,iBAAiB;AACtE,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,cAAc,GAAGA,CAAIC,IAAY,EAAEC,iBAA0B,KACjER,OAAO,CACL,MAAMI,WAAW,CAAC,IAAIK,KAAK,CAACF,IAAI,CAAC,CAACG,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACH,iBAAiB,CAAC,CAAC;AACjE;AACA,CAACD,IAAI,CACP,CAAC;AAEH,MAAMK,SAAS,GAAGA,CAChBL,IAAY,EACZC,iBAA0B,EAC1BK,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGT,cAAc,CAACC,IAAI,EAAEC,iBAAiB,CAAC;EACtD,MAAMQ,GAAG,GAAGH,QAA2B;EACvC,MAAMI,IAAI,GAAG,CAACV,IAAI,EAAE,GAAGW,MAAM,CAACH,MAAM,EAAAD,cAAA,GAACE,GAAG,CAACG,SAAS,cAAAL,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC,CAAC;EAC1D,MAAMM,QAAQ,GAAGlB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTa,MAAM,CAACM,KAAK,CAACC,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MACnCX,QAAQ,CAACU,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFnB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXI,UAAU,CAACiB,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMU,aAAa,GAAGA,CAAClB,IAAY,EAAEM,QAA8B,KACxED,SAAS,CAACL,IAAI,EAAE,MAAMN,IAAI,CAACyB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEb,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMc,gBAAgB,GAAGA,CAACpB,IAAY,EAAEM,QAA6B,KAC1ED,SAAS,CAACL,IAAI,EAAE,MAAMN,IAAI,CAAC2B,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEf,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMgB,cAAc,GAAGA,CAACtB,IAAY,EAAEM,QAA2B,KACtED,SAAS,CAACL,IAAI,EAAE,MAAMN,IAAI,CAAC6B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEjB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMkB,cAAc,GAAGA,CAACxB,IAAY,EAAEM,QAA2B,KACtED,SAAS,CAACL,IAAI,EAAE,MAAMN,IAAI,CAAC+B,KAAK,CAAC,OAAO,CAAC,EAAEnB,QAAQ,CAAC"}

package/lib/module/external/reanimated/moduleWrapper.d.ts

@@ -10,5 +10,6 @@ export declare const startMapper: (worklet: () => void, inputs?: unknown[], outp
 export declare const stopMapper: (mapperID: number) => void;
 export declare const runOnJS: any;
 export declare const runOnUI: any;
+export declare const makeMutable: <T>(val: T) => SharedValue<T>;
 export declare const useAnimatedReaction: <T>(prepare: () => T, react: (v: T) => void, dependencies?: DependencyList) => void;
 export declare const isSharedValue: <T>(value: unknown) => value is SharedValue<T>;

package/lib/module/external/reanimated/moduleWrapper.js

@@ -1,4 +1,4 @@
-var _Reanimated, _Reanimated2, _Reanimated3, _Reanimated4, _Reanimated5, _Reanimated6, _Reanimated7, _Reanimated8;
+var _Reanimated, _Reanimated2, _Reanimated3, _Reanimated4, _Reanimated5, _Reanimated6, _Reanimated7, _Reanimated8, _Reanimated9;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 // This one is needed for the deprecated useSharedValue function
@@ -29,7 +29,8 @@ export const startMapper = ((_Reanimated4 = Reanimated2) === null || _Reanimated
 export const stopMapper = ((_Reanimated5 = Reanimated2) === null || _Reanimated5 === void 0 ? void 0 : _Reanimated5.stopMapper) || throwOnMissingReanimated;
 export const runOnJS = ((_Reanimated6 = Reanimated2) === null || _Reanimated6 === void 0 ? void 0 : _Reanimated6.runOnJS) || throwOnMissingReanimated;
 export const runOnUI = ((_Reanimated7 = Reanimated2) === null || _Reanimated7 === void 0 ? void 0 : _Reanimated7.runOnUI) || throwOnMissingReanimated;
-export const useAnimatedReaction = ((_Reanimated8 = Reanimated2) === null || _Reanimated8 === void 0 ? void 0 : _Reanimated8.useAnimatedReaction) || throwOnMissingReanimated;
+export const makeMutable = ((_Reanimated8 = Reanimated2) === null || _Reanimated8 === void 0 ? void 0 : _Reanimated8.makeMutable) || throwOnMissingReanimated;
+export const useAnimatedReaction = ((_Reanimated9 = Reanimated2) === null || _Reanimated9 === void 0 ? void 0 : _Reanimated9.useAnimatedReaction) || throwOnMissingReanimated;
 export const isSharedValue = value => {
   return !!value && (Reanimated3 ? Reanimated3.isSharedValue(value) : value.value !== undefined);
 };

package/lib/module/external/reanimated/moduleWrapper.js.map

@@ -1 +1 @@
-{"version":3,"names":["Reanimated2","Reanimated3","reanimatedVersion","require","version","includes","e","HAS_REANIMATED2","HAS_REANIMATED3","throwOnMissingReanimated","Error","useSharedValue","_Reanimated","useDerivedValue","_Reanimated2","useFrameCallback","_Reanimated3","startMapper","_Reanimated4","stopMapper","_Reanimated5","runOnJS","_Reanimated6","runOnUI","_Reanimated7","useAnimatedReaction","_Reanimated8","isSharedValue","value","undefined"],"sources":["moduleWrapper.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DependencyList } from \"react\";\nimport type {\n  DerivedValue,\n  FrameCallback,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\n\n// This one is needed for the deprecated useSharedValue function\n// We can remove it once we remove the deprecation\n\nlet Reanimated2: any;\n\nlet Reanimated3: any;\nlet reanimatedVersion: string;\n\ntry {\n  Reanimated2 = require(\"react-native-reanimated\");\n  reanimatedVersion = require(\"react-native-reanimated/package.json\").version;\n  if (\n    reanimatedVersion &&\n    (reanimatedVersion >= \"3.0.0\" || reanimatedVersion.includes(\"3.0.0-\"))\n  ) {\n    Reanimated3 = Reanimated2;\n  }\n} catch (e) {}\n\nexport const HAS_REANIMATED2 = !!Reanimated2;\nexport const HAS_REANIMATED3 = !!Reanimated3;\n\nexport function throwOnMissingReanimated() {\n  if (!HAS_REANIMATED2) {\n    throw new Error(\n      \"Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \\\n      react-native-skia's integration layer API.\"\n    );\n  }\n}\n\nexport const useSharedValue: <T>(\n  init: T,\n  oneWayReadsOnly?: boolean\n) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;\n\nexport const useDerivedValue: <T>(\n  processor: () => T,\n  dependencies?: DependencyList\n) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;\n\nexport const useFrameCallback: (\n  callback: (frameInfo: FrameInfo) => void,\n  autostart?: boolean\n) => FrameCallback = Reanimated2?.useFrameCallback || throwOnMissingReanimated;\n\nexport const startMapper: (\n  worklet: () => void,\n  inputs?: unknown[],\n  outputs?: unknown[]\n) => number = Reanimated2?.startMapper || throwOnMissingReanimated;\n\nexport const stopMapper: (mapperID: number) => void =\n  Reanimated2?.stopMapper || throwOnMissingReanimated;\n\nexport const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;\nexport const runOnUI = Reanimated2?.runOnUI || throwOnMissingReanimated;\n\nexport const useAnimatedReaction: <T>(\n  prepare: () => T,\n  react: (v: T) => void,\n  dependencies?: DependencyList\n) => void = Reanimated2?.useAnimatedReaction || throwOnMissingReanimated;\n\nexport const isSharedValue = <T>(value: unknown): value is SharedValue<T> => {\n  return (\n    !!value &&\n    (Reanimated3\n      ? Reanimated3.isSharedValue(value)\n      : (value as any).value !== undefined)\n  );\n};\n"],"mappings":";AAAA;;AASA;AACA;;AAEA,IAAIA,WAAgB;AAEpB,IAAIC,WAAgB;AACpB,IAAIC,iBAAyB;AAE7B,IAAI;EACFF,WAAW,GAAGG,OAAO,CAAC,yBAAyB,CAAC;EAChDD,iBAAiB,GAAGC,OAAO,CAAC,sCAAsC,CAAC,CAACC,OAAO;EAC3E,IACEF,iBAAiB,KAChBA,iBAAiB,IAAI,OAAO,IAAIA,iBAAiB,CAACG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EACtE;IACAJ,WAAW,GAAGD,WAAW;EAC3B;AACF,CAAC,CAAC,OAAOM,CAAC,EAAE,CAAC;AAEb,OAAO,MAAMC,eAAe,GAAG,CAAC,CAACP,WAAW;AAC5C,OAAO,MAAMQ,eAAe,GAAG,CAAC,CAACP,WAAW;AAE5C,OAAO,SAASQ,wBAAwBA,CAAA,EAAG;EACzC,IAAI,CAACF,eAAe,EAAE;IACpB,MAAM,IAAIG,KAAK,CACb;AACN,iDACI,CAAC;EACH;AACF;AAEA,OAAO,MAAMC,cAGM,GAAG,EAAAC,WAAA,GAAAZ,WAAW,cAAAY,WAAA,uBAAXA,WAAA,CAAaD,cAAc,KAAIF,wBAAwB;AAE7E,OAAO,MAAMI,eAGO,GAAG,EAAAC,YAAA,GAAAd,WAAW,cAAAc,YAAA,uBAAXA,YAAA,CAAaD,eAAe,KAAIJ,wBAAwB;AAE/E,OAAO,MAAMM,gBAGK,GAAG,EAAAC,YAAA,GAAAhB,WAAW,cAAAgB,YAAA,uBAAXA,YAAA,CAAaD,gBAAgB,KAAIN,wBAAwB;AAE9E,OAAO,MAAMQ,WAIF,GAAG,EAAAC,YAAA,GAAAlB,WAAW,cAAAkB,YAAA,uBAAXA,YAAA,CAAaD,WAAW,KAAIR,wBAAwB;AAElE,OAAO,MAAMU,UAAsC,GACjD,EAAAC,YAAA,GAAApB,WAAW,cAAAoB,YAAA,uBAAXA,YAAA,CAAaD,UAAU,KAAIV,wBAAwB;AAErD,OAAO,MAAMY,OAAO,GAAG,EAAAC,YAAA,GAAAtB,WAAW,cAAAsB,YAAA,uBAAXA,YAAA,CAAaD,OAAO,KAAIZ,wBAAwB;AACvE,OAAO,MAAMc,OAAO,GAAG,EAAAC,YAAA,GAAAxB,WAAW,cAAAwB,YAAA,uBAAXA,YAAA,CAAaD,OAAO,KAAId,wBAAwB;AAEvE,OAAO,MAAMgB,mBAIJ,GAAG,EAAAC,YAAA,GAAA1B,WAAW,cAAA0B,YAAA,uBAAXA,YAAA,CAAaD,mBAAmB,KAAIhB,wBAAwB;AAExE,OAAO,MAAMkB,aAAa,GAAOC,KAAc,IAA8B;EAC3E,OACE,CAAC,CAACA,KAAK,KACN3B,WAAW,GACRA,WAAW,CAAC0B,aAAa,CAACC,KAAK,CAAC,GAC/BA,KAAK,CAASA,KAAK,KAAKC,SAAS,CAAC;AAE3C,CAAC"}
+{"version":3,"names":["Reanimated2","Reanimated3","reanimatedVersion","require","version","includes","e","HAS_REANIMATED2","HAS_REANIMATED3","throwOnMissingReanimated","Error","useSharedValue","_Reanimated","useDerivedValue","_Reanimated2","useFrameCallback","_Reanimated3","startMapper","_Reanimated4","stopMapper","_Reanimated5","runOnJS","_Reanimated6","runOnUI","_Reanimated7","makeMutable","_Reanimated8","useAnimatedReaction","_Reanimated9","isSharedValue","value","undefined"],"sources":["moduleWrapper.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { DependencyList } from \"react\";\nimport type {\n  DerivedValue,\n  FrameCallback,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\n\n// This one is needed for the deprecated useSharedValue function\n// We can remove it once we remove the deprecation\n\nlet Reanimated2: any;\n\nlet Reanimated3: any;\nlet reanimatedVersion: string;\n\ntry {\n  Reanimated2 = require(\"react-native-reanimated\");\n  reanimatedVersion = require(\"react-native-reanimated/package.json\").version;\n  if (\n    reanimatedVersion &&\n    (reanimatedVersion >= \"3.0.0\" || reanimatedVersion.includes(\"3.0.0-\"))\n  ) {\n    Reanimated3 = Reanimated2;\n  }\n} catch (e) {}\n\nexport const HAS_REANIMATED2 = !!Reanimated2;\nexport const HAS_REANIMATED3 = !!Reanimated3;\n\nexport function throwOnMissingReanimated() {\n  if (!HAS_REANIMATED2) {\n    throw new Error(\n      \"Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \\\n      react-native-skia's integration layer API.\"\n    );\n  }\n}\n\nexport const useSharedValue: <T>(\n  init: T,\n  oneWayReadsOnly?: boolean\n) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;\n\nexport const useDerivedValue: <T>(\n  processor: () => T,\n  dependencies?: DependencyList\n) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;\n\nexport const useFrameCallback: (\n  callback: (frameInfo: FrameInfo) => void,\n  autostart?: boolean\n) => FrameCallback = Reanimated2?.useFrameCallback || throwOnMissingReanimated;\n\nexport const startMapper: (\n  worklet: () => void,\n  inputs?: unknown[],\n  outputs?: unknown[]\n) => number = Reanimated2?.startMapper || throwOnMissingReanimated;\n\nexport const stopMapper: (mapperID: number) => void =\n  Reanimated2?.stopMapper || throwOnMissingReanimated;\n\nexport const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;\nexport const runOnUI = Reanimated2?.runOnUI || throwOnMissingReanimated;\nexport const makeMutable: <T>(val: T) => SharedValue<T> =\n  Reanimated2?.makeMutable || throwOnMissingReanimated;\n\nexport const useAnimatedReaction: <T>(\n  prepare: () => T,\n  react: (v: T) => void,\n  dependencies?: DependencyList\n) => void = Reanimated2?.useAnimatedReaction || throwOnMissingReanimated;\n\nexport const isSharedValue = <T>(value: unknown): value is SharedValue<T> => {\n  return (\n    !!value &&\n    (Reanimated3\n      ? Reanimated3.isSharedValue(value)\n      : (value as any).value !== undefined)\n  );\n};\n"],"mappings":";AAAA;;AASA;AACA;;AAEA,IAAIA,WAAgB;AAEpB,IAAIC,WAAgB;AACpB,IAAIC,iBAAyB;AAE7B,IAAI;EACFF,WAAW,GAAGG,OAAO,CAAC,yBAAyB,CAAC;EAChDD,iBAAiB,GAAGC,OAAO,CAAC,sCAAsC,CAAC,CAACC,OAAO;EAC3E,IACEF,iBAAiB,KAChBA,iBAAiB,IAAI,OAAO,IAAIA,iBAAiB,CAACG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EACtE;IACAJ,WAAW,GAAGD,WAAW;EAC3B;AACF,CAAC,CAAC,OAAOM,CAAC,EAAE,CAAC;AAEb,OAAO,MAAMC,eAAe,GAAG,CAAC,CAACP,WAAW;AAC5C,OAAO,MAAMQ,eAAe,GAAG,CAAC,CAACP,WAAW;AAE5C,OAAO,SAASQ,wBAAwBA,CAAA,EAAG;EACzC,IAAI,CAACF,eAAe,EAAE;IACpB,MAAM,IAAIG,KAAK,CACb;AACN,iDACI,CAAC;EACH;AACF;AAEA,OAAO,MAAMC,cAGM,GAAG,EAAAC,WAAA,GAAAZ,WAAW,cAAAY,WAAA,uBAAXA,WAAA,CAAaD,cAAc,KAAIF,wBAAwB;AAE7E,OAAO,MAAMI,eAGO,GAAG,EAAAC,YAAA,GAAAd,WAAW,cAAAc,YAAA,uBAAXA,YAAA,CAAaD,eAAe,KAAIJ,wBAAwB;AAE/E,OAAO,MAAMM,gBAGK,GAAG,EAAAC,YAAA,GAAAhB,WAAW,cAAAgB,YAAA,uBAAXA,YAAA,CAAaD,gBAAgB,KAAIN,wBAAwB;AAE9E,OAAO,MAAMQ,WAIF,GAAG,EAAAC,YAAA,GAAAlB,WAAW,cAAAkB,YAAA,uBAAXA,YAAA,CAAaD,WAAW,KAAIR,wBAAwB;AAElE,OAAO,MAAMU,UAAsC,GACjD,EAAAC,YAAA,GAAApB,WAAW,cAAAoB,YAAA,uBAAXA,YAAA,CAAaD,UAAU,KAAIV,wBAAwB;AAErD,OAAO,MAAMY,OAAO,GAAG,EAAAC,YAAA,GAAAtB,WAAW,cAAAsB,YAAA,uBAAXA,YAAA,CAAaD,OAAO,KAAIZ,wBAAwB;AACvE,OAAO,MAAMc,OAAO,GAAG,EAAAC,YAAA,GAAAxB,WAAW,cAAAwB,YAAA,uBAAXA,YAAA,CAAaD,OAAO,KAAId,wBAAwB;AACvE,OAAO,MAAMgB,WAA0C,GACrD,EAAAC,YAAA,GAAA1B,WAAW,cAAA0B,YAAA,uBAAXA,YAAA,CAAaD,WAAW,KAAIhB,wBAAwB;AAEtD,OAAO,MAAMkB,mBAIJ,GAAG,EAAAC,YAAA,GAAA5B,WAAW,cAAA4B,YAAA,uBAAXA,YAAA,CAAaD,mBAAmB,KAAIlB,wBAAwB;AAExE,OAAO,MAAMoB,aAAa,GAAOC,KAAc,IAA8B;EAC3E,OACE,CAAC,CAACA,KAAK,KACN7B,WAAW,GACRA,WAAW,CAAC4B,aAAa,CAACC,KAAK,CAAC,GAC/BA,KAAK,CAASA,KAAK,KAAKC,SAAS,CAAC;AAE3C,CAAC"}

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

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 import type { SkSurface } from "../skia";
-export * from "../renderer/components";
-export declare const makeOffscreenSurface: (width: number, height: number) => any;
+export declare const makeOffscreenSurface: (width: number, height: number) => SkSurface;
+export declare const getSkiaExports: () => {
+    Skia: import("../skia/types").Skia;
+};
 export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => import("../skia").SkImage;

package/lib/module/headless/index.js

@@ -4,9 +4,6 @@
 import { JsiSkApi } from "../skia/web";
 import { SkiaRoot } from "../renderer/Reconciler";
 import { JsiDrawingContext } from "../dom/types";
-export * from "../renderer/components";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 let Skia;
 export const makeOffscreenSurface = (width, height) => {
   if (!Skia) {
@@ -18,12 +15,21 @@ export const makeOffscreenSurface = (width, height) => {
   }
   return surface;
 };
+export const getSkiaExports = () => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+  return {
+    Skia
+  };
+};
 export const drawOffscreen = (surface, element) => {
   const root = new SkiaRoot(Skia, false);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
+  root.unmount();
   surface.flush();
   return surface.makeImageSnapshot();
 };

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

@@ -1 +1 @@
-{"version":3,"names":["JsiSkApi","SkiaRoot","JsiDrawingContext","Skia","makeOffscreenSurface","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","drawOffscreen","element","root","render","canvas","getCanvas","ctx","dom","flush","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { SkiaRoot } from \"../renderer/Reconciler\";\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkSurface } from \"../skia\";\n\nexport * from \"../renderer/components\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Skia: any;\n\nexport const makeOffscreenSurface = (width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  return surface;\n};\n\nexport const drawOffscreen = (surface: SkSurface, element: ReactNode) => {\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const canvas = surface.getCanvas();\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  surface.flush();\n  return surface.makeImageSnapshot();\n};\n"],"mappings":"AAAA;AACA;;AAIA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,iBAAiB,QAAQ,cAAc;AAGhD,cAAc,wBAAwB;;AAEtC;AACA,IAAIC,IAAS;AAEb,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAa,EAAEC,MAAc,KAAK;EACrE,IAAI,CAACH,IAAI,EAAE;IACTA,IAAI,GAAGH,QAAQ,CAACO,SAAS,CAAC;EAC5B;EACA,MAAMC,OAAO,GAAGL,IAAI,CAACM,OAAO,CAACC,aAAa,CAACL,KAAK,EAAEC,MAAM,CAAC;EACzD,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIG,KAAK,CAAC,0BAA0B,CAAC;EAC7C;EACA,OAAOH,OAAO;AAChB,CAAC;AAED,OAAO,MAAMI,aAAa,GAAGA,CAACJ,OAAkB,EAAEK,OAAkB,KAAK;EACvE,MAAMC,IAAI,GAAG,IAAIb,QAAQ,CAACE,IAAI,EAAE,KAAK,CAAC;EACtCW,IAAI,CAACC,MAAM,CAACF,OAAO,CAAC;EACpB,MAAMG,MAAM,GAAGR,OAAO,CAACS,SAAS,CAAC,CAAC;EAClC,MAAMC,GAAG,GAAG,IAAIhB,iBAAiB,CAACC,IAAI,EAAEa,MAAM,CAAC;EAC/CF,IAAI,CAACK,GAAG,CAACJ,MAAM,CAACG,GAAG,CAAC;EACpBV,OAAO,CAACY,KAAK,CAAC,CAAC;EACf,OAAOZ,OAAO,CAACa,iBAAiB,CAAC,CAAC;AACpC,CAAC"}
+{"version":3,"names":["JsiSkApi","SkiaRoot","JsiDrawingContext","Skia","makeOffscreenSurface","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","getSkiaExports","drawOffscreen","element","root","render","canvas","getCanvas","ctx","dom","unmount","flush","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { SkiaRoot } from \"../renderer/Reconciler\";\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkSurface } from \"../skia\";\n\nlet Skia: ReturnType<typeof JsiSkApi>;\n\nexport const makeOffscreenSurface = (width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  return surface;\n};\n\nexport const getSkiaExports = () => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  return { Skia };\n};\n\nexport const drawOffscreen = (surface: SkSurface, element: ReactNode) => {\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const canvas = surface.getCanvas();\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  root.unmount();\n  surface.flush();\n  return surface.makeImageSnapshot();\n};\n"],"mappings":"AAAA;AACA;;AAIA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,iBAAiB,QAAQ,cAAc;AAGhD,IAAIC,IAAiC;AAErC,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAa,EAAEC,MAAc,KAAK;EACrE,IAAI,CAACH,IAAI,EAAE;IACTA,IAAI,GAAGH,QAAQ,CAACO,SAAS,CAAC;EAC5B;EACA,MAAMC,OAAO,GAAGL,IAAI,CAACM,OAAO,CAACC,aAAa,CAACL,KAAK,EAAEC,MAAM,CAAC;EACzD,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIG,KAAK,CAAC,0BAA0B,CAAC;EAC7C;EACA,OAAOH,OAAO;AAChB,CAAC;AAED,OAAO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,IAAI,CAACT,IAAI,EAAE;IACTA,IAAI,GAAGH,QAAQ,CAACO,SAAS,CAAC;EAC5B;EACA,OAAO;IAAEJ;EAAK,CAAC;AACjB,CAAC;AAED,OAAO,MAAMU,aAAa,GAAGA,CAACL,OAAkB,EAAEM,OAAkB,KAAK;EACvE,MAAMC,IAAI,GAAG,IAAId,QAAQ,CAACE,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACF,OAAO,CAAC;EACpB,MAAMG,MAAM,GAAGT,OAAO,CAACU,SAAS,CAAC,CAAC;EAClC,MAAMC,GAAG,GAAG,IAAIjB,iBAAiB,CAACC,IAAI,EAAEc,MAAM,CAAC;EAC/CF,IAAI,CAACK,GAAG,CAACJ,MAAM,CAACG,GAAG,CAAC;EACpBJ,IAAI,CAACM,OAAO,CAAC,CAAC;EACdb,OAAO,CAACc,KAAK,CAAC,CAAC;EACf,OAAOd,OAAO,CAACe,iBAAiB,CAAC,CAAC;AACpC,CAAC"}

package/lib/module/renderer/Offscreen.js

@@ -17,6 +17,7 @@ export const drawAsPicture = element => {
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   const picture = recorder.finishRecordingAsPicture();
+  root.unmount();
   return picture;
 };
 export const drawAsImage = (element, size) => {

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

@@ -1 +1 @@
-{"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.\n  if (!isOnMainThread() || Platform.OS === \"web\") {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGtB,IAAI,CAACuB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC7B,cAAc,CAAC,CAAC,IAAIF,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;IAC9C,OAAO0B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}
+{"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","unmount","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n  \"worklet\";\n  return (\n    (typeof _WORKLET !== \"undefined\" && _WORKLET === true) ||\n    Platform.OS === \"web\"\n  );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n  const recorder = Skia.PictureRecorder();\n  const canvas = recorder.beginRecording();\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  const picture = recorder.finishRecordingAsPicture();\n  root.unmount();\n  return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n  return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n  \"worklet\";\n  const surface = Skia.Surface.MakeOffscreen(\n    size.width * pd,\n    size.height * pd\n  )!;\n  const canvas = surface.getCanvas();\n  canvas.scale(pd, pd);\n  canvas.drawPicture(picture);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.\n  if (!isOnMainThread() || Platform.OS === \"web\") {\n    return image.makeNonTextureImage();\n  } else {\n    return image;\n  }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnDL,IAAI,CAACM,OAAO,CAAC,CAAC;EACd,OAAOF,OAAO;AAChB,CAAC;AAED,OAAO,MAAMG,WAAW,GAAGA,CAACZ,OAAqB,EAAEa,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACf,aAAa,CAACC,OAAO,CAAC,EAAEa,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACL,OAAkB,EAAEI,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGvB,IAAI,CAACwB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMZ,MAAM,GAAGa,OAAO,CAACK,SAAS,CAAC,CAAC;EAClClB,MAAM,CAACmB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBZ,MAAM,CAACoB,WAAW,CAACd,OAAO,CAAC;EAC3BO,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC9B,cAAc,CAAC,CAAC,IAAIF,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;IAC9C,OAAO2B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}

package/lib/module/skia/web/JsiSkImage.d.ts

@@ -3,7 +3,8 @@ import type { FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode, Ima
 import { HostObject } from "./Host";
 export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
-    constructor(CanvasKit: CanvasKit, ref: Image);
+    private releaseCtx?;
+    constructor(CanvasKit: CanvasKit, ref: Image, releaseCtx?: (() => void) | undefined);
     height(): number;
     width(): number;
     getImageInfo(): ImageInfo;

package/lib/module/skia/web/JsiSkImage.js

@@ -32,10 +32,14 @@ export const toBase64String = bytes => {
   }
 };
 export class JsiSkImage extends HostObject {
-  constructor(CanvasKit, ref) {
+  constructor(CanvasKit, ref, releaseCtx) {
     super(CanvasKit, ref, "Image");
+    this.releaseCtx = releaseCtx;
     _defineProperty(this, "dispose", () => {
       this.ref.delete();
+      if (this.releaseCtx) {
+        this.releaseCtx();
+      }
     });
   }
   height() {
@@ -77,6 +81,9 @@ export class JsiSkImage extends HostObject {
     const bytes = this.encodeToBytes(fmt, quality);
     return toBase64String(bytes);
   }
+
+  // TODO: this is leaking on Web
+  // Add signature with allocated buffer
   readPixels(srcX, srcY, imageInfo) {
     var _imageInfo$width, _imageInfo$height;
     const info = this.getImageInfo();
@@ -90,7 +97,25 @@ export class JsiSkImage extends HostObject {
     return this.ref.readPixels(srcX !== null && srcX !== void 0 ? srcX : 0, srcY !== null && srcY !== void 0 ? srcY : 0, pxInfo);
   }
   makeNonTextureImage() {
-    return new JsiSkImage(this.CanvasKit, this.CanvasKit.MakeImageFromEncoded(this.encodeToBytes()));
+    const partialInfo = this.ref.getImageInfo();
+    const colorSpace = this.ref.getColorSpace();
+    const info = {
+      ...partialInfo,
+      colorSpace
+    };
+    var pixelLen = info.width * info.height * 4;
+    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);
+    const pixels = this.ref.readPixels(0, 0, info, pixelPtr, info.width * 4);
+    if (!pixels) {
+      throw new Error("Could not create image from bytes");
+    }
+    const img = this.CanvasKit.MakeImage(info, pixels, info.width * 4);
+    if (!img) {
+      throw new Error("Could not create image from bytes");
+    }
+    return new JsiSkImage(this.CanvasKit, img, () => {
+      this.CanvasKit.Free(pixelPtr);
+    });
   }
 }
 //# sourceMappingURL=JsiSkImage.js.map

package/lib/module/skia/web/JsiSkImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["getEnum","HostObject","JsiSkMatrix","JsiSkShader","toBase64String","bytes","Buffer","from","toString","CHUNK_SIZE","index","length","result","slice","Math","min","String","fromCharCode","apply","btoa","JsiSkImage","constructor","CanvasKit","ref","_defineProperty","delete","height","width","getImageInfo","info","colorType","value","alphaType","makeShaderOptions","tx","ty","fm","mm","localMatrix","TileMode","FilterMode","MipmapMode","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","ImageFormat","Error","encodeToBase64","readPixels","srcX","srcY","imageInfo","_imageInfo$width","_imageInfo$height","pxInfo","colorSpace","ColorSpace","SRGB","AlphaType","ColorType","makeNonTextureImage","MakeImageFromEncoded"],"sources":["JsiSkImage.ts"],"sourcesContent":["import type {\n  CanvasKit,\n  ImageInfo as CKImageInfo,\n  Image,\n} from \"canvaskit-wasm\";\n\nimport type {\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n  ImageFormat,\n  ImageInfo,\n} from \"../types\";\n\nimport { getEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\n// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js\nexport const toBase64String = (bytes: Uint8Array) => {\n  if (typeof Buffer !== \"undefined\") {\n    // Are we on node?\n    return Buffer.from(bytes).toString(\"base64\");\n  } else {\n    // From https://stackoverflow.com/a/25644409\n    // because the naive solution of\n    //     btoa(String.fromCharCode.apply(null, bytes));\n    // would occasionally throw \"Maximum call stack size exceeded\"\n    var CHUNK_SIZE = 0x8000; //arbitrary number\n    var index = 0;\n    var { length } = bytes;\n    var result = \"\";\n    var slice;\n    while (index < length) {\n      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      result += String.fromCharCode.apply(null, slice as any);\n      index += CHUNK_SIZE;\n    }\n    return btoa(result);\n  }\n};\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(CanvasKit: CanvasKit, ref: Image) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  getImageInfo(): ImageInfo {\n    const info = this.ref.getImageInfo();\n    return {\n      width: info.width,\n      height: info.height,\n      colorType: info.colorType.value,\n      alphaType: info.alphaType.value,\n    };\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        getEnum(this.CanvasKit.TileMode, tx),\n        getEnum(this.CanvasKit.TileMode, ty),\n        getEnum(this.CanvasKit.FilterMode, fm),\n        getEnum(this.CanvasKit.MipmapMode, mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        getEnum(this.CanvasKit.TileMode, tx),\n        getEnum(this.CanvasKit.TileMode, ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(\n        getEnum(this.CanvasKit.ImageFormat, fmt),\n        quality\n      );\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(getEnum(this.CanvasKit.ImageFormat, fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return toBase64String(bytes);\n  }\n\n  readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo) {\n    const info = this.getImageInfo();\n    const pxInfo: CKImageInfo = {\n      colorSpace: this.CanvasKit.ColorSpace.SRGB,\n      width: imageInfo?.width ?? info.width,\n      height: imageInfo?.height ?? info.height,\n      alphaType: getEnum(\n        this.CanvasKit.AlphaType,\n        (imageInfo ?? info).alphaType\n      ),\n      colorType: getEnum(\n        this.CanvasKit.ColorType,\n        (imageInfo ?? info).colorType\n      ),\n    };\n    return this.ref.readPixels(srcX ?? 0, srcY ?? 0, pxInfo);\n  }\n\n  dispose = () => {\n    this.ref.delete();\n  };\n\n  makeNonTextureImage(): SkImage {\n    return new JsiSkImage(\n      this.CanvasKit,\n      this.CanvasKit.MakeImageFromEncoded(this.encodeToBytes())!\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["getEnum","HostObject","JsiSkMatrix","JsiSkShader","toBase64String","bytes","Buffer","from","toString","CHUNK_SIZE","index","length","result","slice","Math","min","String","fromCharCode","apply","btoa","JsiSkImage","constructor","CanvasKit","ref","releaseCtx","_defineProperty","delete","height","width","getImageInfo","info","colorType","value","alphaType","makeShaderOptions","tx","ty","fm","mm","localMatrix","TileMode","FilterMode","MipmapMode","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","ImageFormat","Error","encodeToBase64","readPixels","srcX","srcY","imageInfo","_imageInfo$width","_imageInfo$height","pxInfo","colorSpace","ColorSpace","SRGB","AlphaType","ColorType","makeNonTextureImage","partialInfo","getColorSpace","pixelLen","pixelPtr","Malloc","Uint8Array","pixels","img","MakeImage","Free"],"sources":["JsiSkImage.ts"],"sourcesContent":["import type {\n  CanvasKit,\n  ImageInfo as CKImageInfo,\n  Image,\n} from \"canvaskit-wasm\";\n\nimport type {\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n  ImageFormat,\n  ImageInfo,\n} from \"../types\";\n\nimport { getEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\n// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js\nexport const toBase64String = (bytes: Uint8Array) => {\n  if (typeof Buffer !== \"undefined\") {\n    // Are we on node?\n    return Buffer.from(bytes).toString(\"base64\");\n  } else {\n    // From https://stackoverflow.com/a/25644409\n    // because the naive solution of\n    //     btoa(String.fromCharCode.apply(null, bytes));\n    // would occasionally throw \"Maximum call stack size exceeded\"\n    var CHUNK_SIZE = 0x8000; //arbitrary number\n    var index = 0;\n    var { length } = bytes;\n    var result = \"\";\n    var slice;\n    while (index < length) {\n      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      result += String.fromCharCode.apply(null, slice as any);\n      index += CHUNK_SIZE;\n    }\n    return btoa(result);\n  }\n};\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(\n    CanvasKit: CanvasKit,\n    ref: Image,\n    private releaseCtx?: () => void\n  ) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  getImageInfo(): ImageInfo {\n    const info = this.ref.getImageInfo();\n    return {\n      width: info.width,\n      height: info.height,\n      colorType: info.colorType.value,\n      alphaType: info.alphaType.value,\n    };\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        getEnum(this.CanvasKit.TileMode, tx),\n        getEnum(this.CanvasKit.TileMode, ty),\n        getEnum(this.CanvasKit.FilterMode, fm),\n        getEnum(this.CanvasKit.MipmapMode, mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        getEnum(this.CanvasKit.TileMode, tx),\n        getEnum(this.CanvasKit.TileMode, ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(\n        getEnum(this.CanvasKit.ImageFormat, fmt),\n        quality\n      );\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(getEnum(this.CanvasKit.ImageFormat, fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return toBase64String(bytes);\n  }\n\n  // TODO: this is leaking on Web\n  // Add signature with allocated buffer\n  readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo) {\n    const info = this.getImageInfo();\n    const pxInfo: CKImageInfo = {\n      colorSpace: this.CanvasKit.ColorSpace.SRGB,\n      width: imageInfo?.width ?? info.width,\n      height: imageInfo?.height ?? info.height,\n      alphaType: getEnum(\n        this.CanvasKit.AlphaType,\n        (imageInfo ?? info).alphaType\n      ),\n      colorType: getEnum(\n        this.CanvasKit.ColorType,\n        (imageInfo ?? info).colorType\n      ),\n    };\n    return this.ref.readPixels(srcX ?? 0, srcY ?? 0, pxInfo);\n  }\n\n  dispose = () => {\n    this.ref.delete();\n    if (this.releaseCtx) {\n      this.releaseCtx();\n    }\n  };\n\n  makeNonTextureImage(): SkImage {\n    const partialInfo = this.ref.getImageInfo();\n    const colorSpace = this.ref.getColorSpace();\n    const info = {\n      ...partialInfo,\n      colorSpace,\n    };\n\n    var pixelLen = info.width * info.height * 4;\n    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);\n    const pixels = this.ref.readPixels(\n      0,\n      0,\n      info,\n      pixelPtr,\n      info.width * 4\n    ) as Uint8Array | null;\n    if (!pixels) {\n      throw new Error(\"Could not create image from bytes\");\n    }\n    const img = this.CanvasKit.MakeImage(info, pixels, info.width * 4);\n    if (!img) {\n      throw new Error(\"Could not create image from bytes\");\n    }\n    return new JsiSkImage(this.CanvasKit, img, () => {\n      this.CanvasKit.Free(pixelPtr);\n    });\n  }\n}\n"],"mappings":"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"}

package/lib/module/skia/web/JsiSkSurface.d.ts

@@ -2,7 +2,8 @@ import type { CanvasKit, Surface } from "canvaskit-wasm";
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
-    constructor(CanvasKit: CanvasKit, ref: Surface);
+    private releaseCtx?;
+    constructor(CanvasKit: CanvasKit, ref: Surface, releaseCtx?: (() => void) | undefined);
     dispose: () => void;
     flush(): void;
     getCanvas(): SkCanvas;

package/lib/module/skia/web/JsiSkSurface.js

@@ -6,10 +6,14 @@ import { JsiSkCanvas } from "./JsiSkCanvas";
 import { JsiSkImage } from "./JsiSkImage";
 import { JsiSkRect } from "./JsiSkRect";
 export class JsiSkSurface extends HostObject {
-  constructor(CanvasKit, ref) {
+  constructor(CanvasKit, ref, releaseCtx) {
     super(CanvasKit, ref, "Surface");
+    this.releaseCtx = releaseCtx;
     _defineProperty(this, "dispose", () => {
       this.ref.delete();
+      if (this.releaseCtx) {
+        this.releaseCtx();
+      }
     });
   }
   flush() {

package/lib/module/skia/web/JsiSkSurface.js.map

@@ -1 +1 @@
-{"version":3,"names":["HostObject","JsiSkCanvas","JsiSkImage","JsiSkRect","JsiSkSurface","constructor","CanvasKit","ref","_defineProperty","delete","flush","getCanvas","makeImageSnapshot","bounds","image","Array","from","fromValue","undefined"],"sources":["JsiSkSurface.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SkCanvas, SkImage, SkRect, SkSurface } from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport { JsiSkCanvas } from \"./JsiSkCanvas\";\nimport { JsiSkImage } from \"./JsiSkImage\";\nimport { JsiSkRect } from \"./JsiSkRect\";\n\nexport class JsiSkSurface\n  extends HostObject<Surface, \"Surface\">\n  implements SkSurface\n{\n  constructor(CanvasKit: CanvasKit, ref: Surface) {\n    super(CanvasKit, ref, \"Surface\");\n  }\n\n  dispose = () => {\n    this.ref.delete();\n  };\n\n  flush() {\n    this.ref.flush();\n  }\n\n  getCanvas(): SkCanvas {\n    return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());\n  }\n\n  makeImageSnapshot(bounds?: SkRect): SkImage {\n    const image = this.ref.makeImageSnapshot(\n      bounds\n        ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))\n        : undefined\n    );\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n}\n"],"mappings":";;;AAIA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,SAAS,QAAQ,aAAa;AAEvC,OAAO,MAAMC,YAAY,SACfJ,UAAU,CAEpB;EACEK,WAAWA,CAACC,SAAoB,EAAEC,GAAY,EAAE;IAC9C,KAAK,CAACD,SAAS,EAAEC,GAAG,EAAE,SAAS,CAAC;IAACC,eAAA,kBAGzB,MAAM;MACd,IAAI,CAACD,GAAG,CAACE,MAAM,CAAC,CAAC;IACnB,CAAC;EAJD;EAMAC,KAAKA,CAAA,EAAG;IACN,IAAI,CAACH,GAAG,CAACG,KAAK,CAAC,CAAC;EAClB;EAEAC,SAASA,CAAA,EAAa;IACpB,OAAO,IAAIV,WAAW,CAAC,IAAI,CAACK,SAAS,EAAE,IAAI,CAACC,GAAG,CAACI,SAAS,CAAC,CAAC,CAAC;EAC9D;EAEAC,iBAAiBA,CAACC,MAAe,EAAW;IAC1C,MAAMC,KAAK,GAAG,IAAI,CAACP,GAAG,CAACK,iBAAiB,CACtCC,MAAM,GACFE,KAAK,CAACC,IAAI,CAACb,SAAS,CAACc,SAAS,CAAC,IAAI,CAACX,SAAS,EAAEO,MAAM,CAAC,CAAC,GACvDK,SACN,CAAC;IACD,OAAO,IAAIhB,UAAU,CAAC,IAAI,CAACI,SAAS,EAAEQ,KAAK,CAAC;EAC9C;AACF"}
+{"version":3,"names":["HostObject","JsiSkCanvas","JsiSkImage","JsiSkRect","JsiSkSurface","constructor","CanvasKit","ref","releaseCtx","_defineProperty","delete","flush","getCanvas","makeImageSnapshot","bounds","image","Array","from","fromValue","undefined"],"sources":["JsiSkSurface.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SkCanvas, SkImage, SkRect, SkSurface } from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport { JsiSkCanvas } from \"./JsiSkCanvas\";\nimport { JsiSkImage } from \"./JsiSkImage\";\nimport { JsiSkRect } from \"./JsiSkRect\";\n\nexport class JsiSkSurface\n  extends HostObject<Surface, \"Surface\">\n  implements SkSurface\n{\n  constructor(\n    CanvasKit: CanvasKit,\n    ref: Surface,\n    private releaseCtx?: () => void\n  ) {\n    super(CanvasKit, ref, \"Surface\");\n  }\n\n  dispose = () => {\n    this.ref.delete();\n    if (this.releaseCtx) {\n      this.releaseCtx();\n    }\n  };\n\n  flush() {\n    this.ref.flush();\n  }\n\n  getCanvas(): SkCanvas {\n    return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());\n  }\n\n  makeImageSnapshot(bounds?: SkRect): SkImage {\n    const image = this.ref.makeImageSnapshot(\n      bounds\n        ? Array.from(JsiSkRect.fromValue(this.CanvasKit, bounds))\n        : undefined\n    );\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n}\n"],"mappings":";;;AAIA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,SAAS,QAAQ,aAAa;AAEvC,OAAO,MAAMC,YAAY,SACfJ,UAAU,CAEpB;EACEK,WAAWA,CACTC,SAAoB,EACpBC,GAAY,EACJC,UAAuB,EAC/B;IACA,KAAK,CAACF,SAAS,EAAEC,GAAG,EAAE,SAAS,CAAC;IAAC,KAFzBC,UAAuB,GAAvBA,UAAuB;IAAAC,eAAA,kBAKvB,MAAM;MACd,IAAI,CAACF,GAAG,CAACG,MAAM,CAAC,CAAC;MACjB,IAAI,IAAI,CAACF,UAAU,EAAE;QACnB,IAAI,CAACA,UAAU,CAAC,CAAC;MACnB;IACF,CAAC;EAPD;EASAG,KAAKA,CAAA,EAAG;IACN,IAAI,CAACJ,GAAG,CAACI,KAAK,CAAC,CAAC;EAClB;EAEAC,SAASA,CAAA,EAAa;IACpB,OAAO,IAAIX,WAAW,CAAC,IAAI,CAACK,SAAS,EAAE,IAAI,CAACC,GAAG,CAACK,SAAS,CAAC,CAAC,CAAC;EAC9D;EAEAC,iBAAiBA,CAACC,MAAe,EAAW;IAC1C,MAAMC,KAAK,GAAG,IAAI,CAACR,GAAG,CAACM,iBAAiB,CACtCC,MAAM,GACFE,KAAK,CAACC,IAAI,CAACd,SAAS,CAACe,SAAS,CAAC,IAAI,CAACZ,SAAS,EAAEQ,MAAM,CAAC,CAAC,GACvDK,SACN,CAAC;IACD,OAAO,IAAIjB,UAAU,CAAC,IAAI,CAACI,SAAS,EAAES,KAAK,CAAC;EAC9C;AACF"}

package/lib/module/skia/web/JsiSkSurfaceFactory.js

@@ -5,11 +5,22 @@ export class JsiSkSurfaceFactory extends Host {
     super(CanvasKit);
   }
   Make(width, height) {
-    const surface = this.CanvasKit.MakeSurface(width, height);
+    var pixelLen = width * height * 4;
+    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);
+    const surface = this.CanvasKit.MakeRasterDirectSurface({
+      width: width,
+      height: height,
+      colorType: this.CanvasKit.ColorType.RGBA_8888,
+      alphaType: this.CanvasKit.AlphaType.Unpremul,
+      colorSpace: this.CanvasKit.ColorSpace.SRGB
+    }, pixelPtr, width * 4);
     if (!surface) {
       return null;
     }
-    return new JsiSkSurface(this.CanvasKit, surface);
+    surface.getCanvas().clear(this.CanvasKit.TRANSPARENT);
+    return new JsiSkSurface(this.CanvasKit, surface, () => {
+      this.CanvasKit.Free(pixelPtr);
+    });
   }
   MakeOffscreen(width, height) {
     // OffscreenCanvas may be unvailable in some environments.

package/lib/module/skia/web/JsiSkSurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","surface","MakeSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","webglContext","GetWebGLContext","grContext","MakeWebGLContext","Error","MakeRenderTarget"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);\n      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);\n      if (!grContext) {\n        throw new Error(\"Could not make a graphics context\");\n      }\n      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,mBAAmB,SAASF,IAAI,CAA2B;EACtEG,WAAWA,CAACC,SAAoB,EAAE;IAChC,KAAK,CAACA,SAAS,CAAC;EAClB;EAEAC,IAAIA,CAACC,KAAa,EAAEC,MAAc,EAAE;IAClC,MAAMC,OAAO,GAAG,IAAI,CAACJ,SAAS,CAACK,WAAW,CAACH,KAAK,EAAEC,MAAM,CAAC;IACzD,IAAI,CAACC,OAAO,EAAE;MACZ,OAAO,IAAI;IACb;IACA,OAAO,IAAIP,YAAY,CAAC,IAAI,CAACG,SAAS,EAAEI,OAAO,CAAC;EAClD;EAEAE,aAAaA,CAACJ,KAAa,EAAEC,MAAc,EAAE;IAC3C;IACA;IACA,MAAMI,EAAE,GAAIC,UAAU,CAASC,eAAe;IAC9C,IAAIL,OAAuB;IAC3B,IAAIG,EAAE,KAAKG,SAAS,EAAE;MACpBN,OAAO,GAAG,IAAI,CAACJ,SAAS,CAACK,WAAW,CAACH,KAAK,EAAEC,MAAM,CAAC;IACrD,CAAC,MAAM;MACL,MAAMQ,SAAS,GAAG,IAAIJ,EAAE,CAACL,KAAK,EAAEC,MAAM,CAAC;MACvC,MAAMS,YAAY,GAAG,IAAI,CAACZ,SAAS,CAACa,eAAe,CAACF,SAAS,CAAC;MAC9D,MAAMG,SAAS,GAAG,IAAI,CAACd,SAAS,CAACe,gBAAgB,CAACH,YAAY,CAAC;MAC/D,IAAI,CAACE,SAAS,EAAE;QACd,MAAM,IAAIE,KAAK,CAAC,mCAAmC,CAAC;MACtD;MACAZ,OAAO,GAAG,IAAI,CAACJ,SAAS,CAACiB,gBAAgB,CAACH,SAAS,EAAEZ,KAAK,EAAEC,MAAM,CAAC;IACrE;IACA,IAAI,CAACC,OAAO,EAAE;MACZ,OAAO,IAAI;IACb;IACA,OAAO,IAAIP,YAAY,CAAC,IAAI,CAACG,SAAS,EAAEI,OAAO,CAAC;EAClD;AACF"}
+{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","pixelLen","pixelPtr","Malloc","Uint8Array","surface","MakeRasterDirectSurface","colorType","ColorType","RGBA_8888","alphaType","AlphaType","Unpremul","colorSpace","ColorSpace","SRGB","getCanvas","clear","TRANSPARENT","Free","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","MakeSurface","offscreen","webglContext","GetWebGLContext","grContext","MakeWebGLContext","Error","MakeRenderTarget"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    var pixelLen = width * height * 4;\n    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);\n    const surface = this.CanvasKit.MakeRasterDirectSurface(\n      {\n        width: width,\n        height: height,\n        colorType: this.CanvasKit.ColorType.RGBA_8888,\n        alphaType: this.CanvasKit.AlphaType.Unpremul,\n        colorSpace: this.CanvasKit.ColorSpace.SRGB,\n      },\n      pixelPtr,\n      width * 4\n    );\n    if (!surface) {\n      return null;\n    }\n    surface.getCanvas().clear(this.CanvasKit.TRANSPARENT);\n    return new JsiSkSurface(this.CanvasKit, surface, () => {\n      this.CanvasKit.Free(pixelPtr);\n    });\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);\n      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);\n      if (!grContext) {\n        throw new Error(\"Could not make a graphics context\");\n      }\n      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,OAAO,MAAMC,mBAAmB,SAASF,IAAI,CAA2B;EACtEG,WAAWA,CAACC,SAAoB,EAAE;IAChC,KAAK,CAACA,SAAS,CAAC;EAClB;EAEAC,IAAIA,CAACC,KAAa,EAAEC,MAAc,EAAE;IAClC,IAAIC,QAAQ,GAAGF,KAAK,GAAGC,MAAM,GAAG,CAAC;IACjC,MAAME,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACM,MAAM,CAACC,UAAU,EAAEH,QAAQ,CAAC;IAC5D,MAAMI,OAAO,GAAG,IAAI,CAACR,SAAS,CAACS,uBAAuB,CACpD;MACEP,KAAK,EAAEA,KAAK;MACZC,MAAM,EAAEA,MAAM;MACdO,SAAS,EAAE,IAAI,CAACV,SAAS,CAACW,SAAS,CAACC,SAAS;MAC7CC,SAAS,EAAE,IAAI,CAACb,SAAS,CAACc,SAAS,CAACC,QAAQ;MAC5CC,UAAU,EAAE,IAAI,CAAChB,SAAS,CAACiB,UAAU,CAACC;IACxC,CAAC,EACDb,QAAQ,EACRH,KAAK,GAAG,CACV,CAAC;IACD,IAAI,CAACM,OAAO,EAAE;MACZ,OAAO,IAAI;IACb;IACAA,OAAO,CAACW,SAAS,CAAC,CAAC,CAACC,KAAK,CAAC,IAAI,CAACpB,SAAS,CAACqB,WAAW,CAAC;IACrD,OAAO,IAAIxB,YAAY,CAAC,IAAI,CAACG,SAAS,EAAEQ,OAAO,EAAE,MAAM;MACrD,IAAI,CAACR,SAAS,CAACsB,IAAI,CAACjB,QAAQ,CAAC;IAC/B,CAAC,CAAC;EACJ;EAEAkB,aAAaA,CAACrB,KAAa,EAAEC,MAAc,EAAE;IAC3C;IACA;IACA,MAAMqB,EAAE,GAAIC,UAAU,CAASC,eAAe;IAC9C,IAAIlB,OAAuB;IAC3B,IAAIgB,EAAE,KAAKG,SAAS,EAAE;MACpBnB,OAAO,GAAG,IAAI,CAACR,SAAS,CAAC4B,WAAW,CAAC1B,KAAK,EAAEC,MAAM,CAAC;IACrD,CAAC,MAAM;MACL,MAAM0B,SAAS,GAAG,IAAIL,EAAE,CAACtB,KAAK,EAAEC,MAAM,CAAC;MACvC,MAAM2B,YAAY,GAAG,IAAI,CAAC9B,SAAS,CAAC+B,eAAe,CAACF,SAAS,CAAC;MAC9D,MAAMG,SAAS,GAAG,IAAI,CAAChC,SAAS,CAACiC,gBAAgB,CAACH,YAAY,CAAC;MAC/D,IAAI,CAACE,SAAS,EAAE;QACd,MAAM,IAAIE,KAAK,CAAC,mCAAmC,CAAC;MACtD;MACA1B,OAAO,GAAG,IAAI,CAACR,SAAS,CAACmC,gBAAgB,CAACH,SAAS,EAAE9B,KAAK,EAAEC,MAAM,CAAC;IACrE;IACA,IAAI,CAACK,OAAO,EAAE;MACZ,OAAO,IAAI;IACb;IACA,OAAO,IAAIX,YAAY,CAAC,IAAI,CAACG,SAAS,EAAEQ,OAAO,CAAC;EAClD;AACF"}

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

@@ -10,5 +10,6 @@ export declare const startMapper: (worklet: () => void, inputs?: unknown[], outp
 export declare const stopMapper: (mapperID: number) => void;
 export declare const runOnJS: any;
 export declare const runOnUI: any;
+export declare const makeMutable: <T>(val: T) => SharedValue<T>;
 export declare const useAnimatedReaction: <T>(prepare: () => T, react: (v: T) => void, dependencies?: DependencyList) => void;
 export declare const isSharedValue: <T>(value: unknown) => value is SharedValue<T>;

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

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 import type { SkSurface } from "../skia";
-export * from "../renderer/components";
-export declare const makeOffscreenSurface: (width: number, height: number) => any;
+export declare const makeOffscreenSurface: (width: number, height: number) => SkSurface;
+export declare const getSkiaExports: () => {
+    Skia: import("../skia/types").Skia;
+};
 export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => import("../skia").SkImage;

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

@@ -3,7 +3,8 @@ import type { FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode, Ima
 import { HostObject } from "./Host";
 export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
-    constructor(CanvasKit: CanvasKit, ref: Image);
+    private releaseCtx?;
+    constructor(CanvasKit: CanvasKit, ref: Image, releaseCtx?: (() => void) | undefined);
     height(): number;
     width(): number;
     getImageInfo(): ImageInfo;

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

@@ -2,7 +2,8 @@ import type { CanvasKit, Surface } from "canvaskit-wasm";
 import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
-    constructor(CanvasKit: CanvasKit, ref: Surface);
+    private releaseCtx?;
+    constructor(CanvasKit: CanvasKit, ref: Surface, releaseCtx?: (() => void) | undefined);
     dispose: () => void;
     flush(): void;
     getCanvas(): SkCanvas;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -49,7 +49,7 @@
     "test": "jest",
     "e2e": "E2E=true yarn test -i e2e",
     "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module",
-    "release": "standard-version"
+    "release": "semantic-release"
   },
   "repository": {
     "type": "git",
@@ -106,7 +106,6 @@
     "react-native": "0.72.6",
     "react-native-builder-bob": "0.18.2",
     "react-native-reanimated": "3.6.2",
-    "standard-version": "^9.5.0",
     "ts-jest": "29.1.1",
     "typescript": "5.1.6",
     "ws": "8.11.0"

package/react-native-skia.podspec

@@ -28,7 +28,7 @@ Pod::Spec.new do |s|
     "HEADER_SEARCH_PATHS" => '"$(PODS_TARGET_SRCROOT)/cpp/"/**'
   }
 
-  s.frameworks = 'GLKit', 'MetalKit'
+  s.frameworks = 'MetalKit'
 
   s.ios.vendored_frameworks = [
     'libs/ios/libskia.xcframework', 

package/src/external/reanimated/buffers.ts

@@ -4,27 +4,29 @@ import type { WorkletFunction } from "react-native-reanimated/lib/typescript/rea
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";
 
-import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
+import { startMapper, stopMapper, makeMutable } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 
 type Modifier<T> = (input: T, index: number) => void;
 
+const useBufferValue = <T>(size: number, bufferInitializer: () => T) =>
+  useMemo(
+    () => makeMutable(new Array(size).fill(0).map(bufferInitializer)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [size]
+  );
+
 const useBuffer = <T>(
   size: number,
   bufferInitializer: () => T,
   modifier: Modifier<T>
 ) => {
-  const buffer = useMemo(
-    () => new Array(size).fill(0).map(bufferInitializer),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [size]
-  );
-  const values = useSharedValue(buffer);
+  const values = useBufferValue(size, bufferInitializer);
   const mod = modifier as WorkletFunction;
-  const deps = Object.values(mod.__closure ?? {});
+  const deps = [size, ...Object.values(mod.__closure ?? {})];
   const mapperId = startMapper(() => {
     "worklet";
-    buffer.forEach((val, index) => {
+    values.value.forEach((val, index) => {
       modifier(val, index);
     });
     notifyChange(values);

package/src/external/reanimated/moduleWrapper.ts

@@ -64,6 +64,8 @@ export const stopMapper: (mapperID: number) => void =
 
 export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;
 export const runOnUI = Reanimated2?.runOnUI || throwOnMissingReanimated;
+export const makeMutable: <T>(val: T) => SharedValue<T> =
+  Reanimated2?.makeMutable || throwOnMissingReanimated;
 
 export const useAnimatedReaction: <T>(
   prepare: () => T,

package/src/headless/index.ts

@@ -8,10 +8,7 @@ import { SkiaRoot } from "../renderer/Reconciler";
 import { JsiDrawingContext } from "../dom/types";
 import type { SkSurface } from "../skia";
 
-export * from "../renderer/components";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let Skia: any;
+let Skia: ReturnType<typeof JsiSkApi>;
 
 export const makeOffscreenSurface = (width: number, height: number) => {
   if (!Skia) {
@@ -24,12 +21,20 @@ export const makeOffscreenSurface = (width: number, height: number) => {
   return surface;
 };
 
+export const getSkiaExports = () => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+  return { Skia };
+};
+
 export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaRoot(Skia, false);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
+  root.unmount();
   surface.flush();
   return surface.makeImageSnapshot();
 };

package/src/renderer/Offscreen.tsx

@@ -24,6 +24,7 @@ export const drawAsPicture = (element: ReactElement) => {
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   const picture = recorder.finishRecordingAsPicture();
+  root.unmount();
   return picture;
 };
 

package/src/skia/web/JsiSkImage.ts

@@ -45,7 +45,11 @@ export const toBase64String = (bytes: Uint8Array) => {
 };
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
-  constructor(CanvasKit: CanvasKit, ref: Image) {
+  constructor(
+    CanvasKit: CanvasKit,
+    ref: Image,
+    private releaseCtx?: () => void
+  ) {
     super(CanvasKit, ref, "Image");
   }
 
@@ -128,6 +132,8 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return toBase64String(bytes);
   }
 
+  // TODO: this is leaking on Web
+  // Add signature with allocated buffer
   readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo) {
     const info = this.getImageInfo();
     const pxInfo: CKImageInfo = {
@@ -148,12 +154,37 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   dispose = () => {
     this.ref.delete();
+    if (this.releaseCtx) {
+      this.releaseCtx();
+    }
   };
 
   makeNonTextureImage(): SkImage {
-    return new JsiSkImage(
-      this.CanvasKit,
-      this.CanvasKit.MakeImageFromEncoded(this.encodeToBytes())!
-    );
+    const partialInfo = this.ref.getImageInfo();
+    const colorSpace = this.ref.getColorSpace();
+    const info = {
+      ...partialInfo,
+      colorSpace,
+    };
+
+    var pixelLen = info.width * info.height * 4;
+    const pixelPtr = this.CanvasKit.Malloc(Uint8Array, pixelLen);
+    const pixels = this.ref.readPixels(
+      0,
+      0,
+      info,
+      pixelPtr,
+      info.width * 4
+    ) as Uint8Array | null;
+    if (!pixels) {
+      throw new Error("Could not create image from bytes");
+    }
+    const img = this.CanvasKit.MakeImage(info, pixels, info.width * 4);
+    if (!img) {
+      throw new Error("Could not create image from bytes");
+    }
+    return new JsiSkImage(this.CanvasKit, img, () => {
+      this.CanvasKit.Free(pixelPtr);
+    });
   }
 }