@shopify/react-native-skia 0.1.137 → 0.1.138

package/android/build.gradle

@@ -133,8 +133,7 @@ android {
 
     externalNativeBuild {
         cmake {
-            path file('CMakeLists.txt')
-            version '3.10.2'
+            path file('CMakeLists.txt')            
         }
     }
 

package/cpp/api/JsiSkTypeface.h

@@ -22,24 +22,12 @@ using namespace facebook;
 
 class JsiSkTypeface : public JsiSkWrappingSkPtrHostObject<SkTypeface> {
 public:
-  JSI_PROPERTY_GET(bold) {
-    RNSkLogger::warnToJavascriptConsole(runtime, "Typeface.bold is deprecated and will be removed in a future release.");
-    return jsi::Value(getObject()->isBold());
-  }
-  
-  JSI_PROPERTY_GET(italic) {
-    RNSkLogger::warnToJavascriptConsole(runtime, "Typeface.italic is deprecated and will be removed in a future release.");
-    return jsi::Value(getObject()->isItalic());
-  }
-  
   // TODO: declare in JsiSkWrappingSkPtrHostObject via extra template parameter?
   JSI_PROPERTY_GET(__typename__) {
     return jsi::String::createFromUtf8(runtime, "Typeface");
   }
 
-  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkTypeface, bold),
-                              JSI_EXPORT_PROP_GET(JsiSkTypeface, italic),
-                              JSI_EXPORT_PROP_GET(JsiSkTypeface, __typename__))
+  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkTypeface, __typename__))
 
   JsiSkTypeface(std::shared_ptr<RNSkPlatformContext> context,
                 sk_sp<SkTypeface> typeface)
@@ -64,22 +52,6 @@ public:
     return jsi::Object::createFromHostObject(
               runtime, std::make_shared<JsiSkTypeface>(std::move(context), std::move(tf)));
   }
-
-private:
-  static SkFontStyle getFontStyleFromNumber(int fontStyle) {
-    switch (fontStyle) {
-    case 0:
-      return SkFontStyle::Normal();
-    case 1:
-      return SkFontStyle::Bold();
-    case 2:
-      return SkFontStyle::Italic();
-    case 3:
-      return SkFontStyle::BoldItalic();
-    default:
-      return SkFontStyle::Normal();
-    };
-  }
 };
 
 } // namespace RNSkia

package/lib/commonjs/skia/core/Data.js

@@ -28,12 +28,15 @@ const factoryWrapper = (data2, factory, onError) => {
 
 const loadDataCollection = (sources, factory, onError) => Promise.all(sources.map(source => loadData(source, factory, onError)));
 
-const loadData = (source, factory, onError) => {
-  if (source instanceof Uint8Array) {
-    return new Promise(resolve => resolve(factoryWrapper(_Skia.Skia.Data.fromBytes(source), factory, onError)));
+const loadData = async (source, factory, onError) => {
+  if (source === null) {
+    return null;
+  } else if (source instanceof Uint8Array) {
+    return factoryWrapper(_Skia.Skia.Data.fromBytes(source), factory, onError);
   } else {
     const uri = typeof source === "string" ? source : resolveAsset(source);
-    return _Skia.Skia.Data.fromURI(uri).then(d => factoryWrapper(d, factory, onError));
+    const d = await _Skia.Skia.Data.fromURI(uri);
+    return factoryWrapper(d, factory, onError);
   }
 };
 

package/lib/commonjs/skia/core/Data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Data.ts"],"names":["resolveAsset","source","Platform","OS","default","Image","resolveAssetSource","uri","factoryWrapper","data2","factory","onError","factoryResult","Error","loadDataCollection","sources","Promise","all","map","loadData","Uint8Array","resolve","Skia","Data","fromBytes","fromURI","then","d","useLoading","loader","deps","data","setData","prevSourceRef","current","useDataCollection","useRawData","identity","useData"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useRef, useEffect, useState } from \"react\";\nimport { Image, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSource } from \"../types\";\n\nconst resolveAsset = (source: ReturnType<typeof require>) => {\n  return Platform.OS === \"web\"\n    ? source.default\n    : Image.resolveAssetSource(source).uri;\n};\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<(T | null)[]> =>\n  Promise.all(sources.map((source) => loadData(source, factory, onError)));\n\nconst loadData = <T>(\n  source: DataSource,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source instanceof Uint8Array) {\n    return new Promise((resolve) =>\n      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))\n    );\n  } else {\n    const uri = typeof source === \"string\" ? source : resolveAsset(source);\n    return Skia.Data.fromURI(uri).then((d) =>\n      factoryWrapper(d, factory, onError)\n    );\n  }\n};\n\ntype Source = DataSource | null | undefined;\n\nconst useLoading = <T>(\n  source: Source,\n  loader: () => Promise<T | null>,\n  deps: DependencyList = []\n) => {\n  const [data, setData] = useState<T | null>(null);\n  const prevSourceRef = useRef<Source>();\n  useEffect(() => {\n    if (prevSourceRef.current !== source) {\n      prevSourceRef.current = source;\n      loader().then(setData);\n    } else {\n      setData(null);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n  return data;\n};\n\nexport const useDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) =>\n  useLoading(\n    sources,\n    () => loadDataCollection(sources, factory, onError),\n    deps\n  );\n\nexport const useRawData = <T>(\n  source: DataSource | null | undefined,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useLoading(source, () => loadData(source, factory, onError), deps);\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSource | null | undefined,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useRawData(source, identity, onError, deps);\n"]}
+{"version":3,"sources":["Data.ts"],"names":["resolveAsset","source","Platform","OS","default","Image","resolveAssetSource","uri","factoryWrapper","data2","factory","onError","factoryResult","Error","loadDataCollection","sources","Promise","all","map","loadData","Uint8Array","Skia","Data","fromBytes","d","fromURI","useLoading","loader","deps","data","setData","prevSourceRef","current","then","useDataCollection","useRawData","identity","useData"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useRef, useEffect, useState } from \"react\";\nimport { Image, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSource } from \"../types\";\n\nconst resolveAsset = (source: ReturnType<typeof require>) => {\n  return Platform.OS === \"web\"\n    ? source.default\n    : Image.resolveAssetSource(source).uri;\n};\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<(T | null)[]> =>\n  Promise.all(sources.map((source) => loadData(source, factory, onError)));\n\nconst loadData = async <T>(\n  source: DataSource,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source === null) {\n    return null;\n  } else if (source instanceof Uint8Array) {\n    return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);\n  } else {\n    const uri = typeof source === \"string\" ? source : resolveAsset(source);\n    const d = await Skia.Data.fromURI(uri);\n    return factoryWrapper(d, factory, onError);\n  }\n};\n\ntype Source = DataSource | null | undefined;\n\nconst useLoading = <T>(\n  source: Source,\n  loader: () => Promise<T | null>,\n  deps: DependencyList = []\n) => {\n  const [data, setData] = useState<T | null>(null);\n  const prevSourceRef = useRef<Source>();\n  useEffect(() => {\n    if (prevSourceRef.current !== source) {\n      prevSourceRef.current = source;\n      loader().then(setData);\n    } else {\n      setData(null);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n  return data;\n};\n\nexport const useDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) =>\n  useLoading(\n    sources,\n    () => loadDataCollection(sources, factory, onError),\n    deps\n  );\n\nexport const useRawData = <T>(\n  source: DataSource | null | undefined,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useLoading(source, () => loadData(source, factory, onError), deps);\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSource | null | undefined,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useRawData(source, identity, onError, deps);\n"]}

package/lib/commonjs/skia/types/Matrix.js

@@ -16,7 +16,7 @@ exports.MatrixIndex = MatrixIndex;
   MatrixIndex[MatrixIndex["TransY"] = 5] = "TransY";
   MatrixIndex[MatrixIndex["Persp0"] = 6] = "Persp0";
   MatrixIndex[MatrixIndex["Persp1"] = 7] = "Persp1";
-  MatrixIndex[MatrixIndex["persp2"] = 8] = "persp2";
+  MatrixIndex[MatrixIndex["Persp2"] = 8] = "Persp2";
 })(MatrixIndex || (exports.MatrixIndex = MatrixIndex = {}));
 
 const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";

package/lib/commonjs/skia/types/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"mappings":";;;;;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,2BAAAA,W;;AAYL,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;;;;AA0CA,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;AACH,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzC,UAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;AACfA,QAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACD,OAFD,MAEO;AACLN,QAAAA,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;AACD;;AACD;AACD;;AACDM,IAAAA,eAAe,CAACT,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CA9CM;;;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIO,MAAMF,SAAS,GAAII,GAAD,IAAiB;AACxC,SAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"]}
+{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"mappings":";;;;;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,2BAAAA,W;;AAYL,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;;;;AA0CA,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;AACH,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzC,UAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;AACfA,QAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACD,OAFD,MAEO;AACLN,QAAAA,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;AACD;;AACD;AACD;;AACDM,IAAAA,eAAe,CAACT,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CA9CM;;;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIO,MAAMF,SAAS,GAAII,GAAD,IAAiB;AACxC,SAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  Persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"]}

package/lib/commonjs/views/SkiaView.web.js

@@ -113,7 +113,7 @@ class SkiaView extends _react.default.Component {
           height: this.state.height,
           width: this.state.width,
           timestamp: Date.now(),
-          touches: [touches]
+          touches: touches.map(t => [t])
         };
         this.props.onDraw && this.props.onDraw(this._canvas, info);
         (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
@@ -175,20 +175,8 @@ class SkiaView extends _react.default.Component {
     this.redraw();
   }
 
-  handleTouchStart(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Start);
-  }
-
-  handleTouchMove(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Active);
-  }
-
-  handleTouchEnd(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Cancelled);
-  }
-
-  handleTouchCancel(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.End);
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -203,10 +191,12 @@ class SkiaView extends _react.default.Component {
       ref: this._canvasRef,
       width: this.state.width,
       height: this.state.height,
-      onPointerDown: this.handleTouchStart.bind(this),
-      onPointerMove: this.handleTouchMove.bind(this),
-      onPointerUp: this.handleTouchEnd.bind(this),
-      onPointerCancel: this.handleTouchCancel.bind(this)
+      onPointerDown: this.createTouchHandler(_types.TouchType.Start),
+      onPointerMove: this.createTouchHandler(_types.TouchType.Active),
+      onPointerUp: this.createTouchHandler(_types.TouchType.End),
+      onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(_types.TouchType.End),
+      onPointerOut: this.createTouchHandler(_types.TouchType.End)
     }));
   }
 

package/lib/commonjs/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["SkiaView","React","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","JsiSkSurface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","handleTouchStart","TouchType","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["SkiaView","React","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","JsiSkSurface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","createTouchHandler","render","debug","viewProps","TouchType","Start","Active","End","Cancelled"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: touches.map((t) => [t]),\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"]}

package/lib/commonjs/web/LoadSkiaWeb.js

@@ -11,8 +11,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
-const LoadSkiaWeb = async () => {
-  const CanvasKit = await (0, _canvaskit.default)(); // The CanvasKit API is stored on the global object and used
+const LoadSkiaWeb = async opts => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+
+  const CanvasKit = await (0, _canvaskit.default)(opts); // The CanvasKit API is stored on the global object and used
   // to create the JsiSKApi in the Skia.web.ts file.
 
   global.CanvasKit = CanvasKit;

package/lib/commonjs/web/LoadSkiaWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAQO,MAAMA,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAM,yBAAxB,CADqC,CAErC;AACA;;AACAC,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;;;AACO,MAAME,QAAQ,GAAGH,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAWO,MAAMA,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAM,wBAAcF,IAAd,CAAxB,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;;;AACO,MAAME,QAAQ,GAAGL,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type {\n  CanvasKit as CanvasKitType,\n  CanvasKitInitOptions,\n} from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {\n  if (global.CanvasKit !== undefined) {\n    return;\n  }\n  const CanvasKit = await CanvasKitInit(opts);\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}

package/lib/commonjs/web/WithSkiaWeb.js

@@ -18,19 +18,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const WithSkiaWeb = _ref => {
   let {
     getComponent,
-    fallback
+    fallback,
+    opts
   } = _ref;
   const Inner = (0, _react.useMemo)(() => /*#__PURE__*/(0, _react.lazy)(async () => {
     if (_reactNative.Platform.OS === "web") {
-      await (0, _LoadSkiaWeb.LoadSkiaWeb)();
+      await (0, _LoadSkiaWeb.LoadSkiaWeb)(opts);
     } else {
       console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
     }
 
     return getComponent();
-  }), [getComponent]);
+  }), [getComponent, opts]);
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: fallback
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
   }, /*#__PURE__*/_react.default.createElement(Inner, null));
 };
 

package/lib/commonjs/web/WithSkiaWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["WithSkiaWeb","getComponent","fallback","Inner","Platform","OS","console","warn"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAOO,MAAMA,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAG,oBACZ,mBACE,iBAAK,YAAY;AACf,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAM,+BAAN;AACD,KAFD,MAEO;AACLC,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAON,YAAY,EAAnB;AACD,GATD,CAFU,EAYZ,CAACA,YAAD,CAZY,CAAd;AAcA,sBACE,6BAAC,eAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,6BAAC,KAAD,OADF,CADF;AAKD,CApBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n}\n\nexport const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb();\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent]\n  );\n  return (\n    <Suspense fallback={fallback}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["WithSkiaWeb","getComponent","fallback","opts","Inner","Platform","OS","console","warn"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAQO,MAAMA,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAG,oBACZ,mBACE,iBAAK,YAAY;AACf,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAM,8BAAYH,IAAZ,CAAN;AACD,KAFD,MAEO;AACLI,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOP,YAAY,EAAnB;AACD,GATD,CAFU,EAYZ,CAACA,YAAD,EAAeE,IAAf,CAZY,CAAd;AAcA,sBACE,6BAAC,eAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,6BAAC,KAAD,OADF,CADF;AAKD,CAxBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}

package/lib/module/skia/core/Data.js

@@ -19,12 +19,15 @@ const factoryWrapper = (data2, factory, onError) => {
 
 const loadDataCollection = (sources, factory, onError) => Promise.all(sources.map(source => loadData(source, factory, onError)));
 
-const loadData = (source, factory, onError) => {
-  if (source instanceof Uint8Array) {
-    return new Promise(resolve => resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError)));
+const loadData = async (source, factory, onError) => {
+  if (source === null) {
+    return null;
+  } else if (source instanceof Uint8Array) {
+    return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);
   } else {
     const uri = typeof source === "string" ? source : resolveAsset(source);
-    return Skia.Data.fromURI(uri).then(d => factoryWrapper(d, factory, onError));
+    const d = await Skia.Data.fromURI(uri);
+    return factoryWrapper(d, factory, onError);
   }
 };
 

package/lib/module/skia/core/Data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Data.ts"],"names":["useRef","useEffect","useState","Image","Platform","Skia","resolveAsset","source","OS","default","resolveAssetSource","uri","factoryWrapper","data2","factory","onError","factoryResult","Error","loadDataCollection","sources","Promise","all","map","loadData","Uint8Array","resolve","Data","fromBytes","fromURI","then","d","useLoading","loader","deps","data","setData","prevSourceRef","current","useDataCollection","useRawData","identity","useData"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useRef, useEffect, useState } from \"react\";\nimport { Image, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSource } from \"../types\";\n\nconst resolveAsset = (source: ReturnType<typeof require>) => {\n  return Platform.OS === \"web\"\n    ? source.default\n    : Image.resolveAssetSource(source).uri;\n};\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<(T | null)[]> =>\n  Promise.all(sources.map((source) => loadData(source, factory, onError)));\n\nconst loadData = <T>(\n  source: DataSource,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source instanceof Uint8Array) {\n    return new Promise((resolve) =>\n      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))\n    );\n  } else {\n    const uri = typeof source === \"string\" ? source : resolveAsset(source);\n    return Skia.Data.fromURI(uri).then((d) =>\n      factoryWrapper(d, factory, onError)\n    );\n  }\n};\n\ntype Source = DataSource | null | undefined;\n\nconst useLoading = <T>(\n  source: Source,\n  loader: () => Promise<T | null>,\n  deps: DependencyList = []\n) => {\n  const [data, setData] = useState<T | null>(null);\n  const prevSourceRef = useRef<Source>();\n  useEffect(() => {\n    if (prevSourceRef.current !== source) {\n      prevSourceRef.current = source;\n      loader().then(setData);\n    } else {\n      setData(null);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n  return data;\n};\n\nexport const useDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) =>\n  useLoading(\n    sources,\n    () => loadDataCollection(sources, factory, onError),\n    deps\n  );\n\nexport const useRawData = <T>(\n  source: DataSource | null | undefined,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useLoading(source, () => loadData(source, factory, onError), deps);\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSource | null | undefined,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useRawData(source, identity, onError, deps);\n"]}
+{"version":3,"sources":["Data.ts"],"names":["useRef","useEffect","useState","Image","Platform","Skia","resolveAsset","source","OS","default","resolveAssetSource","uri","factoryWrapper","data2","factory","onError","factoryResult","Error","loadDataCollection","sources","Promise","all","map","loadData","Uint8Array","Data","fromBytes","d","fromURI","useLoading","loader","deps","data","setData","prevSourceRef","current","then","useDataCollection","useRawData","identity","useData"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useRef, useEffect, useState } from \"react\";\nimport { Image, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSource } from \"../types\";\n\nconst resolveAsset = (source: ReturnType<typeof require>) => {\n  return Platform.OS === \"web\"\n    ? source.default\n    : Image.resolveAssetSource(source).uri;\n};\n\nconst factoryWrapper = <T>(\n  data2: SkData,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n) => {\n  const factoryResult = factory(data2);\n  if (factoryResult === null) {\n    onError && onError(new Error(\"Could not load data\"));\n    return null;\n  } else {\n    return factoryResult;\n  }\n};\n\nconst loadDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<(T | null)[]> =>\n  Promise.all(sources.map((source) => loadData(source, factory, onError)));\n\nconst loadData = async <T>(\n  source: DataSource,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void\n): Promise<T | null> => {\n  if (source === null) {\n    return null;\n  } else if (source instanceof Uint8Array) {\n    return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);\n  } else {\n    const uri = typeof source === \"string\" ? source : resolveAsset(source);\n    const d = await Skia.Data.fromURI(uri);\n    return factoryWrapper(d, factory, onError);\n  }\n};\n\ntype Source = DataSource | null | undefined;\n\nconst useLoading = <T>(\n  source: Source,\n  loader: () => Promise<T | null>,\n  deps: DependencyList = []\n) => {\n  const [data, setData] = useState<T | null>(null);\n  const prevSourceRef = useRef<Source>();\n  useEffect(() => {\n    if (prevSourceRef.current !== source) {\n      prevSourceRef.current = source;\n      loader().then(setData);\n    } else {\n      setData(null);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n  return data;\n};\n\nexport const useDataCollection = <T>(\n  sources: DataSource[],\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) =>\n  useLoading(\n    sources,\n    () => loadDataCollection(sources, factory, onError),\n    deps\n  );\n\nexport const useRawData = <T>(\n  source: DataSource | null | undefined,\n  factory: (data: SkData) => T,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useLoading(source, () => loadData(source, factory, onError), deps);\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n  source: DataSource | null | undefined,\n  onError?: (err: Error) => void,\n  deps?: DependencyList\n) => useRawData(source, identity, onError, deps);\n"]}

package/lib/module/skia/types/Matrix.js

@@ -9,7 +9,7 @@ export let MatrixIndex;
   MatrixIndex[MatrixIndex["TransY"] = 5] = "TransY";
   MatrixIndex[MatrixIndex["Persp0"] = 6] = "Persp0";
   MatrixIndex[MatrixIndex["Persp1"] = 7] = "Persp1";
-  MatrixIndex[MatrixIndex["persp2"] = 8] = "persp2";
+  MatrixIndex[MatrixIndex["Persp2"] = 8] = "Persp2";
 })(MatrixIndex || (MatrixIndex = {}));
 
 export const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";

package/lib/module/skia/types/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"mappings":"AAEA,WAAYA,WAAZ;;WAAYA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,KAAAA,W;;AAYZ,OAAO,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;AA0CP,OAAO,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;AACH,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzC,UAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;AACfA,QAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACD,OAFD,MAEO;AACLN,QAAAA,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;AACD;;AACD;AACD;;AACDM,IAAAA,eAAe,CAACT,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CA9CM;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIA,OAAO,MAAMF,SAAS,GAAII,GAAD,IAAiB;AACxC,SAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"]}
+{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"mappings":"AAEA,WAAYA,WAAZ;;WAAYA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,KAAAA,W;;AAYZ,OAAO,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;AA0CP,OAAO,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;AACH,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzC,UAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;AACfA,QAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACD,OAFD,MAEO;AACLN,QAAAA,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;AACD;;AACD;AACD;;AACDM,IAAAA,eAAe,CAACT,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CA9CM;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIA,OAAO,MAAMF,SAAS,GAAII,GAAD,IAAiB;AACxC,SAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  Persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"]}

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

@@ -101,7 +101,7 @@ export class SkiaView extends React.Component {
           height: this.state.height,
           width: this.state.width,
           timestamp: Date.now(),
-          touches: [touches]
+          touches: touches.map(t => [t])
         };
         this.props.onDraw && this.props.onDraw(this._canvas, info);
         (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
@@ -163,20 +163,8 @@ export class SkiaView extends React.Component {
     this.redraw();
   }
 
-  handleTouchStart(evt) {
-    this.handleTouchEvent(evt, TouchType.Start);
-  }
-
-  handleTouchMove(evt) {
-    this.handleTouchEvent(evt, TouchType.Active);
-  }
-
-  handleTouchEnd(evt) {
-    this.handleTouchEvent(evt, TouchType.Cancelled);
-  }
-
-  handleTouchCancel(evt) {
-    this.handleTouchEvent(evt, TouchType.End);
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -191,10 +179,12 @@ export class SkiaView extends React.Component {
       ref: this._canvasRef,
       width: this.state.width,
       height: this.state.height,
-      onPointerDown: this.handleTouchStart.bind(this),
-      onPointerMove: this.handleTouchMove.bind(this),
-      onPointerUp: this.handleTouchEnd.bind(this),
-      onPointerCancel: this.handleTouchCancel.bind(this)
+      onPointerDown: this.createTouchHandler(TouchType.Start),
+      onPointerMove: this.createTouchHandler(TouchType.Active),
+      onPointerUp: this.createTouchHandler(TouchType.End),
+      onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(TouchType.End),
+      onPointerOut: this.createTouchHandler(TouchType.End)
     }));
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","createTouchHandler","render","debug","viewProps","Start","Active","End","Cancelled"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: touches.map((t) => [t]),\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"]}

package/lib/module/web/LoadSkiaWeb.js

@@ -1,8 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-export const LoadSkiaWeb = async () => {
-  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
+export const LoadSkiaWeb = async opts => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+
+  const CanvasKit = await CanvasKitInit(opts); // The CanvasKit API is stored on the global object and used
   // to create the JsiSKApi in the Skia.web.ts file.
 
   global.CanvasKit = CanvasKit;

package/lib/module/web/LoadSkiaWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADqC,CAErC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;AACA,OAAO,MAAME,QAAQ,GAAGH,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAUA,OAAO,MAAMC,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAMJ,aAAa,CAACE,IAAD,CAArC,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;AACA,OAAO,MAAME,QAAQ,GAAGL,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type {\n  CanvasKit as CanvasKitType,\n  CanvasKitInitOptions,\n} from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {\n  if (global.CanvasKit !== undefined) {\n    return;\n  }\n  const CanvasKit = await CanvasKitInit(opts);\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}

package/lib/module/web/WithSkiaWeb.js

@@ -4,19 +4,20 @@ import { LoadSkiaWeb } from "./LoadSkiaWeb";
 export const WithSkiaWeb = _ref => {
   let {
     getComponent,
-    fallback
+    fallback,
+    opts
   } = _ref;
   const Inner = useMemo(() => /*#__PURE__*/lazy(async () => {
     if (Platform.OS === "web") {
-      await LoadSkiaWeb();
+      await LoadSkiaWeb(opts);
     } else {
       console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
     }
 
     return getComponent();
-  }), [getComponent]);
+  }), [getComponent, opts]);
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: fallback
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
   }, /*#__PURE__*/React.createElement(Inner, null));
 };
 //# sourceMappingURL=WithSkiaWeb.js.map

package/lib/module/web/WithSkiaWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAOA,OAAO,MAAMC,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAGR,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACM,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAML,WAAW,EAAjB;AACD,KAFD,MAEO;AACLM,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOL,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,oBAAC,KAAD,OADF,CADF;AAKD,CApBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n}\n\nexport const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb();\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent]\n  );\n  return (\n    <Suspense fallback={fallback}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAGT,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAMN,WAAW,CAACI,IAAD,CAAjB;AACD,KAFD,MAEO;AACLG,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAON,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,EAAeE,IAAf,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,oBAAC,KAAD,OADF,CADF;AAKD,CAxBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -9,7 +9,7 @@ export declare enum MatrixIndex {
     TransY = 5,
     Persp0 = 6,
     Persp1 = 7,
-    persp2 = 8
+    Persp2 = 8
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {

package/lib/typescript/src/skia/types/Typeface/Typeface.d.ts

@@ -1,5 +1,2 @@
 import type { SkJSIInstance } from "../JsiInstance";
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-    readonly bold: boolean;
-    readonly italic: boolean;
-}
+export declare type SkTypeface = SkJSIInstance<"Typeface">;

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

@@ -3,6 +3,7 @@ import type { PointerEvent } from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import type { DrawMode, SkiaViewProps } from "./types";
+import { TouchType } from "./types";
 export declare class SkiaView extends React.Component<SkiaViewProps, {
     width: number;
     height: number;
@@ -48,9 +49,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
      */
     registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
-    handleTouchStart(evt: PointerEvent): void;
-    handleTouchMove(evt: PointerEvent): void;
-    handleTouchEnd(evt: PointerEvent): void;
-    handleTouchCancel(evt: PointerEvent): void;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
     render(): JSX.Element;
 }

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -1,6 +1,6 @@
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
 declare global {
     var CanvasKit: CanvasKitType;
 }
-export declare const LoadSkiaWeb: () => Promise<void>;
-export declare const LoadSkia: () => Promise<void>;
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentProps, ComponentType } from "react";
 import { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
 interface WithSkiaProps {
-    fallback: ComponentProps<typeof Suspense>["fallback"];
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
     getComponent: () => Promise<{
         default: ComponentType;
     }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
 }
-export declare const WithSkiaWeb: ({ getComponent, fallback }: WithSkiaProps) => JSX.Element;
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
 export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.137",
+  "version": "0.1.138",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/skia/core/Data.ts

@@ -32,20 +32,19 @@ const loadDataCollection = <T>(
 ): Promise<(T | null)[]> =>
   Promise.all(sources.map((source) => loadData(source, factory, onError)));
 
-const loadData = <T>(
+const loadData = async <T>(
   source: DataSource,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source instanceof Uint8Array) {
-    return new Promise((resolve) =>
-      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
-    );
+  if (source === null) {
+    return null;
+  } else if (source instanceof Uint8Array) {
+    return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);
   } else {
     const uri = typeof source === "string" ? source : resolveAsset(source);
-    return Skia.Data.fromURI(uri).then((d) =>
-      factoryWrapper(d, factory, onError)
-    );
+    const d = await Skia.Data.fromURI(uri);
+    return factoryWrapper(d, factory, onError);
   }
 };
 

package/src/skia/types/Matrix.ts

@@ -9,7 +9,7 @@ export enum MatrixIndex {
   TransY = 5,
   Persp0 = 6,
   Persp1 = 7,
-  persp2 = 8,
+  Persp2 = 8,
 }
 
 export const isMatrix = (obj: unknown): obj is SkMatrix =>

package/src/skia/types/Typeface/Typeface.ts

@@ -1,6 +1,3 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-  readonly bold: boolean;
-  readonly italic: boolean;
-}
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/views/SkiaView.web.tsx

@@ -98,7 +98,7 @@ export class SkiaView extends React.Component<
           height: this.state.height,
           width: this.state.width,
           timestamp: Date.now(),
-          touches: [touches],
+          touches: touches.map((t) => [t]),
         };
         this.props.onDraw && this.props.onDraw(this._canvas!, info);
         this._surface?.ref.flush();
@@ -158,20 +158,8 @@ export class SkiaView extends React.Component<
     this.redraw();
   }
 
-  handleTouchStart(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Start);
-  }
-
-  handleTouchMove(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Active);
-  }
-
-  handleTouchEnd(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.Cancelled);
-  }
-
-  handleTouchCancel(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.End);
+  createTouchHandler(touchType: TouchType) {
+    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -182,10 +170,12 @@ export class SkiaView extends React.Component<
           ref={this._canvasRef}
           width={this.state.width}
           height={this.state.height}
-          onPointerDown={this.handleTouchStart.bind(this)}
-          onPointerMove={this.handleTouchMove.bind(this)}
-          onPointerUp={this.handleTouchEnd.bind(this)}
-          onPointerCancel={this.handleTouchCancel.bind(this)}
+          onPointerDown={this.createTouchHandler(TouchType.Start)}
+          onPointerMove={this.createTouchHandler(TouchType.Active)}
+          onPointerUp={this.createTouchHandler(TouchType.End)}
+          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
+          onPointerLeave={this.createTouchHandler(TouchType.End)}
+          onPointerOut={this.createTouchHandler(TouchType.End)}
         />
       </View>
     );

package/src/web/LoadSkiaWeb.tsx

@@ -1,14 +1,20 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+import type {
+  CanvasKit as CanvasKitType,
+  CanvasKitInitOptions,
+} from "canvaskit-wasm";
 
 declare global {
   var CanvasKit: CanvasKitType;
 }
 
-export const LoadSkiaWeb = async () => {
-  const CanvasKit = await CanvasKitInit();
+export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+  const CanvasKit = await CanvasKitInit(opts);
   // The CanvasKit API is stored on the global object and used
   // to create the JsiSKApi in the Skia.web.ts file.
   global.CanvasKit = CanvasKit;

package/src/web/WithSkiaWeb.tsx

@@ -5,16 +5,21 @@ import { Platform } from "react-native";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 
 interface WithSkiaProps {
-  fallback: ComponentProps<typeof Suspense>["fallback"];
+  fallback?: ComponentProps<typeof Suspense>["fallback"];
   getComponent: () => Promise<{ default: ComponentType }>;
+  opts?: Parameters<typeof LoadSkiaWeb>[0];
 }
 
-export const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {
+export const WithSkiaWeb = ({
+  getComponent,
+  fallback,
+  opts,
+}: WithSkiaProps) => {
   const Inner = useMemo(
     () =>
       lazy(async () => {
         if (Platform.OS === "web") {
-          await LoadSkiaWeb();
+          await LoadSkiaWeb(opts);
         } else {
           console.warn(
             "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
@@ -22,10 +27,10 @@ export const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {
         }
         return getComponent();
       }),
-    [getComponent]
+    [getComponent, opts]
   );
   return (
-    <Suspense fallback={fallback}>
+    <Suspense fallback={fallback ?? null}>
       <Inner />
     </Suspense>
   );