@shopify/react-native-skia 2.8.0 → 2.9.0

package/lib/module/Platform/Platform.web.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 // Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
 // this shim only reproduces react-native-web's default View styling.
 const View = ({
@@ -37,8 +37,12 @@ export const Platform = {
   PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
   // window is not defined on node
   resolveAsset: source => {
-    if (isRNModule(source)) {
-      if (typeof source === "number" && typeof require === "function") {
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    if (isRNModule(asset)) {
+      if (typeof require === "function") {
         const {
           getAssetByID
         } = require("react-native/Libraries/Image/AssetRegistry");
@@ -46,16 +50,13 @@ export const Platform = {
           httpServerLocation,
           name,
           type
-        } = getAssetByID(source);
+        } = getAssetByID(asset);
         const uri = `${httpServerLocation}/${name}.${type}`;
         return uri;
       }
       throw new Error("Asset source is a number - this is not supported on the web");
     }
-    if ("uri" in source) {
-      return source.uri;
-    }
-    return source.default;
+    return asset.uri;
   },
   findNodeHandle: () => {
     throw new Error("findNodeHandle is not supported on the web");

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","isRNModule","View","children","style","rawStyle","cssStyles","alignItems","backgroundColor","border","boxSizing","display","flexBasis","flexDirection","flexShrink","listStyle","margin","minHeight","minWidth","padding","position","textDecoration","zIndex","createElement","Platform","OS","PixelRatio","window","devicePixelRatio","resolveAsset","source","require","getAssetByID","httpServerLocation","name","type","uri","Error","default","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React, { useMemo } from \"react\";\nimport type { ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):\n// this shim only reproduces react-native-web's default View styling.\nconst View = (({ children, style: rawStyle }: ViewProps) => {\n  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n  const cssStyles = useMemo(() => {\n    return {\n      alignItems: \"stretch\" as const,\n      backgroundColor: \"transparent\" as const,\n      border: \"0 solid black\" as const,\n      boxSizing: \"border-box\" as const,\n      display: \"flex\" as const,\n      flexBasis: \"auto\" as const,\n      flexDirection: \"column\" as const,\n      flexShrink: 0,\n      listStyle: \"none\" as const,\n      margin: 0,\n      minHeight: 0,\n      minWidth: 0,\n      padding: 0,\n      position: \"relative\" as const,\n      textDecoration: \"none\" as const,\n      zIndex: 0,\n      ...style,\n    };\n  }, [style]);\n\n  return <div style={cssStyles}>{children}</div>;\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n  OS: \"web\",\n  PixelRatio: typeof window !== \"undefined\" ? window.devicePixelRatio : 1, // window is not defined on node\n  resolveAsset: (source: DataModule) => {\n    if (isRNModule(source)) {\n      if (typeof source === \"number\" && typeof require === \"function\") {\n        const {\n          getAssetByID,\n        } = require(\"react-native/Libraries/Image/AssetRegistry\");\n        const { httpServerLocation, name, type } = getAssetByID(source);\n        const uri = `${httpServerLocation}/${name}.${type}`;\n        return uri;\n      }\n      throw new Error(\n        \"Asset source is a number - this is not supported on the web\"\n      );\n    }\n    if (\"uri\" in source) {\n      return source.uri;\n    }\n    return source.default;\n  },\n  findNodeHandle: () => {\n    throw new Error(\"findNodeHandle is not supported on the web\");\n  },\n  View,\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAItC,SAASC,UAAU,QAAQ,eAAe;AAI1C;AACA;AACA,MAAMC,IAAI,GAAIA,CAAC;EAAEC,QAAQ;EAAEC,KAAK,EAAEC;AAAoB,CAAC,KAAK;EAC1D,MAAMD,KAAK,GAAGJ,OAAO,CAAC,MAAOK,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC,CAAmB,EAAE,CAACA,QAAQ,CAAC,CAAC;EAC1E,MAAMC,SAAS,GAAGN,OAAO,CAAC,MAAM;IAC9B,OAAO;MACLO,UAAU,EAAE,SAAkB;MAC9BC,eAAe,EAAE,aAAsB;MACvCC,MAAM,EAAE,eAAwB;MAChCC,SAAS,EAAE,YAAqB;MAChCC,OAAO,EAAE,MAAe;MACxBC,SAAS,EAAE,MAAe;MAC1BC,aAAa,EAAE,QAAiB;MAChCC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,MAAe;MAC1BC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC;MACZC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE,UAAmB;MAC7BC,cAAc,EAAE,MAAe;MAC/BC,MAAM,EAAE,CAAC;MACT,GAAGlB;IACL,CAAC;EACH,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,oBAAOL,KAAA,CAAAwB,aAAA;IAAKnB,KAAK,EAAEE;EAAU,GAAEH,QAAc,CAAC;AAChD,CAAqC;AAErC,OAAO,MAAMqB,QAAmB,GAAG;EACjCC,EAAE,EAAE,KAAK;EACTC,UAAU,EAAE,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,gBAAgB,GAAG,CAAC;EAAE;EACzEC,YAAY,EAAGC,MAAkB,IAAK;IACpC,IAAI7B,UAAU,CAAC6B,MAAM,CAAC,EAAE;MACtB,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAI,OAAOC,OAAO,KAAK,UAAU,EAAE;QAC/D,MAAM;UACJC;QACF,CAAC,GAAGD,OAAO,CAAC,4CAA4C,CAAC;QACzD,MAAM;UAAEE,kBAAkB;UAAEC,IAAI;UAAEC;QAAK,CAAC,GAAGH,YAAY,CAACF,MAAM,CAAC;QAC/D,MAAMM,GAAG,GAAG,GAAGH,kBAAkB,IAAIC,IAAI,IAAIC,IAAI,EAAE;QACnD,OAAOC,GAAG;MACZ;MACA,MAAM,IAAIC,KAAK,CACb,6DACF,CAAC;IACH;IACA,IAAI,KAAK,IAAIP,MAAM,EAAE;MACnB,OAAOA,MAAM,CAACM,GAAG;IACnB;IACA,OAAON,MAAM,CAACQ,OAAO;EACvB,CAAC;EACDC,cAAc,EAAEA,CAAA,KAAM;IACpB,MAAM,IAAIF,KAAK,CAAC,4CAA4C,CAAC;EAC/D,CAAC;EACDnC;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","isRNModule","unwrapModule","View","children","style","rawStyle","cssStyles","alignItems","backgroundColor","border","boxSizing","display","flexBasis","flexDirection","flexShrink","listStyle","margin","minHeight","minWidth","padding","position","textDecoration","zIndex","createElement","Platform","OS","PixelRatio","window","devicePixelRatio","resolveAsset","source","asset","require","getAssetByID","httpServerLocation","name","type","uri","Error","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport React, { useMemo } from \"react\";\nimport type { ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule, unwrapModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):\n// this shim only reproduces react-native-web's default View styling.\nconst View = (({ children, style: rawStyle }: ViewProps) => {\n  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n  const cssStyles = useMemo(() => {\n    return {\n      alignItems: \"stretch\" as const,\n      backgroundColor: \"transparent\" as const,\n      border: \"0 solid black\" as const,\n      boxSizing: \"border-box\" as const,\n      display: \"flex\" as const,\n      flexBasis: \"auto\" as const,\n      flexDirection: \"column\" as const,\n      flexShrink: 0,\n      listStyle: \"none\" as const,\n      margin: 0,\n      minHeight: 0,\n      minWidth: 0,\n      padding: 0,\n      position: \"relative\" as const,\n      textDecoration: \"none\" as const,\n      zIndex: 0,\n      ...style,\n    };\n  }, [style]);\n\n  return <div style={cssStyles}>{children}</div>;\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n  OS: \"web\",\n  PixelRatio: typeof window !== \"undefined\" ? window.devicePixelRatio : 1, // window is not defined on node\n  resolveAsset: (source: DataModule) => {\n    const asset = unwrapModule(source);\n    if (typeof asset === \"string\") {\n      return asset;\n    }\n    if (isRNModule(asset)) {\n      if (typeof require === \"function\") {\n        const {\n          getAssetByID,\n        } = require(\"react-native/Libraries/Image/AssetRegistry\");\n        const { httpServerLocation, name, type } = getAssetByID(asset);\n        const uri = `${httpServerLocation}/${name}.${type}`;\n        return uri;\n      }\n      throw new Error(\n        \"Asset source is a number - this is not supported on the web\"\n      );\n    }\n    return asset.uri;\n  },\n  findNodeHandle: () => {\n    throw new Error(\"findNodeHandle is not supported on the web\");\n  },\n  View,\n};\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAItC,SAASC,UAAU,EAAEC,YAAY,QAAQ,eAAe;AAIxD;AACA;AACA,MAAMC,IAAI,GAAIA,CAAC;EAAEC,QAAQ;EAAEC,KAAK,EAAEC;AAAoB,CAAC,KAAK;EAC1D,MAAMD,KAAK,GAAGL,OAAO,CAAC,MAAOM,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC,CAAmB,EAAE,CAACA,QAAQ,CAAC,CAAC;EAC1E,MAAMC,SAAS,GAAGP,OAAO,CAAC,MAAM;IAC9B,OAAO;MACLQ,UAAU,EAAE,SAAkB;MAC9BC,eAAe,EAAE,aAAsB;MACvCC,MAAM,EAAE,eAAwB;MAChCC,SAAS,EAAE,YAAqB;MAChCC,OAAO,EAAE,MAAe;MACxBC,SAAS,EAAE,MAAe;MAC1BC,aAAa,EAAE,QAAiB;MAChCC,UAAU,EAAE,CAAC;MACbC,SAAS,EAAE,MAAe;MAC1BC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,CAAC;MACZC,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE,UAAmB;MAC7BC,cAAc,EAAE,MAAe;MAC/BC,MAAM,EAAE,CAAC;MACT,GAAGlB;IACL,CAAC;EACH,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,oBAAON,KAAA,CAAAyB,aAAA;IAAKnB,KAAK,EAAEE;EAAU,GAAEH,QAAc,CAAC;AAChD,CAAqC;AAErC,OAAO,MAAMqB,QAAmB,GAAG;EACjCC,EAAE,EAAE,KAAK;EACTC,UAAU,EAAE,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,gBAAgB,GAAG,CAAC;EAAE;EACzEC,YAAY,EAAGC,MAAkB,IAAK;IACpC,MAAMC,KAAK,GAAG9B,YAAY,CAAC6B,MAAM,CAAC;IAClC,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE;MAC7B,OAAOA,KAAK;IACd;IACA,IAAI/B,UAAU,CAAC+B,KAAK,CAAC,EAAE;MACrB,IAAI,OAAOC,OAAO,KAAK,UAAU,EAAE;QACjC,MAAM;UACJC;QACF,CAAC,GAAGD,OAAO,CAAC,4CAA4C,CAAC;QACzD,MAAM;UAAEE,kBAAkB;UAAEC,IAAI;UAAEC;QAAK,CAAC,GAAGH,YAAY,CAACF,KAAK,CAAC;QAC9D,MAAMM,GAAG,GAAG,GAAGH,kBAAkB,IAAIC,IAAI,IAAIC,IAAI,EAAE;QACnD,OAAOC,GAAG;MACZ;MACA,MAAM,IAAIC,KAAK,CACb,6DACF,CAAC;IACH;IACA,OAAOP,KAAK,CAACM,GAAG;EAClB,CAAC;EACDE,cAAc,EAAEA,CAAA,KAAM;IACpB,MAAM,IAAID,KAAK,CAAC,4CAA4C,CAAC;EAC/D,CAAC;EACDpC;AACF,CAAC","ignoreList":[]}

package/lib/module/skia/core/Font.d.ts

@@ -1,18 +1,33 @@
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 /**
  * Returns a Skia Font object
  * */
 export declare const useFont: (font: DataSourceParam, size?: number, onError?: (err: Error) => void) => import("../types").SkFont | null;
-type Slant = "normal" | "italic" | "oblique";
-type Weight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-interface RNFontStyle {
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | FontWeight;
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
     fontFamily: string;
     fontSize: number;
-    fontStyle: Slant;
-    fontWeight: Weight;
+    fontStyle: RNFontSlant;
+    fontWeight: RNFontWeight;
 }
 export declare const matchFont: (inputStyle?: Partial<RNFontStyle>, fontMgr?: SkFontMgr) => import("../types").SkFont;
 export declare const listFontFamilies: (fontMgr?: SkFontMgr) => string[];
 export declare const useFonts: (sources: Record<string, DataModule[]>) => SkTypefaceFontProvider | null;
-export {};

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

@@ -1,7 +1,7 @@
 /*global SkiaApi*/
 import { useEffect, useMemo, useState } from "react";
 import { Skia } from "../Skia";
-import { FontSlant } from "../types";
+import { FontSlant, FontWeight } from "../types";
 import { Platform } from "../../Platform";
 import { useTypeface } from "./Typeface";
 const defaultFontSize = 14;
@@ -19,6 +19,25 @@ export const useFont = (font, size = defaultFontSize, onError) => {
     }
   }, [size, typeface]);
 };
+
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+
 const defaultFontStyle = {
   fontFamily: "System",
   fontSize: defaultFontSize,
@@ -26,7 +45,9 @@ const defaultFontStyle = {
   fontWeight: "normal"
 };
 const slant = s => {
-  if (s === "italic") {
+  if (typeof s === "number") {
+    return s;
+  } else if (s === "italic") {
     return FontSlant.Italic;
   } else if (s === "oblique") {
     return FontSlant.Oblique;
@@ -37,11 +58,11 @@ const slant = s => {
 const weight = fontWeight => {
   switch (fontWeight) {
     case "normal":
-      return 400;
+      return FontWeight.Normal;
     case "bold":
-      return 700;
+      return FontWeight.Bold;
     default:
-      return parseInt(fontWeight, 10);
+      return typeof fontWeight === "number" ? fontWeight : parseInt(fontWeight, 10);
   }
 };
 export const matchFont = (inputStyle = {}, fontMgr = Skia.FontMgr.System()) => {

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","Skia","FontSlant","Platform","useTypeface","defaultFontSize","useFont","font","size","onError","typeface","Font","defaultFontStyle","fontFamily","fontSize","fontStyle","fontWeight","slant","s","Italic","Oblique","Upright","weight","parseInt","matchFont","inputStyle","fontMgr","FontMgr","System","style","width","matchFamilyStyle","listFontFamilies","families","Set","i","countFamilies","add","getFamilyName","Array","from","loadTypefaces","typefacesToLoad","promises","Object","keys","flatMap","familyName","map","typefaceToLoad","Data","fromURI","resolveAsset","then","data","tf","Typeface","MakeFreeTypeFaceFromData","Error","Promise","all","useFonts","sources","setFontMgr","result","fMgr","TypefaceFontProvider","Make","forEach","registerFont"],"sources":["Font.ts"],"sourcesContent":["/*global SkiaApi*/\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport { FontSlant } from \"../types\";\nimport type { DataModule, DataSourceParam, SkFontMgr } from \"../types\";\nimport { Platform } from \"../../Platform\";\nimport type { SkTypefaceFontProvider } from \"../types/Paragraph/TypefaceFontProvider\";\n\nimport { useTypeface } from \"./Typeface\";\n\nconst defaultFontSize = 14;\n\n/**\n * Returns a Skia Font object\n * */\nexport const useFont = (\n  font: DataSourceParam,\n  size = defaultFontSize,\n  onError?: (err: Error) => void\n) => {\n  const typeface = useTypeface(font, onError);\n  return useMemo(() => {\n    if (typeface) {\n      return Skia.Font(typeface, size);\n    } else {\n      return null;\n    }\n  }, [size, typeface]);\n};\n\ntype Slant = \"normal\" | \"italic\" | \"oblique\";\ntype Weight =\n  | \"normal\"\n  | \"bold\"\n  | \"100\"\n  | \"200\"\n  | \"300\"\n  | \"400\"\n  | \"500\"\n  | \"600\"\n  | \"700\"\n  | \"800\"\n  | \"900\";\n\ninterface RNFontStyle {\n  fontFamily: string;\n  fontSize: number;\n  fontStyle: Slant;\n  fontWeight: Weight;\n}\n\nconst defaultFontStyle: RNFontStyle = {\n  fontFamily: \"System\",\n  fontSize: defaultFontSize,\n  fontStyle: \"normal\",\n  fontWeight: \"normal\",\n};\n\nconst slant = (s: Slant) => {\n  if (s === \"italic\") {\n    return FontSlant.Italic;\n  } else if (s === \"oblique\") {\n    return FontSlant.Oblique;\n  } else {\n    return FontSlant.Upright;\n  }\n};\n\nconst weight = (fontWeight: Weight) => {\n  switch (fontWeight) {\n    case \"normal\":\n      return 400;\n    case \"bold\":\n      return 700;\n    default:\n      return parseInt(fontWeight, 10);\n  }\n};\n\nexport const matchFont = (\n  inputStyle: Partial<RNFontStyle> = {},\n  fontMgr: SkFontMgr = Skia.FontMgr.System()\n) => {\n  const fontStyle = {\n    ...defaultFontStyle,\n    ...inputStyle,\n  };\n  const style = {\n    weight: weight(fontStyle.fontWeight),\n    width: 5,\n    slant: slant(fontStyle.fontStyle),\n  };\n  const typeface = fontMgr.matchFamilyStyle(fontStyle.fontFamily, style);\n  return Skia.Font(typeface, fontStyle.fontSize);\n};\n\nexport const listFontFamilies = (\n  fontMgr: SkFontMgr = Skia.FontMgr.System()\n) => {\n  const families = new Set<string>();\n  for (let i = 0; i < fontMgr.countFamilies(); i++) {\n    families.add(fontMgr.getFamilyName(i));\n  }\n  return Array.from(families);\n};\n\nconst loadTypefaces = (typefacesToLoad: Record<string, DataModule[]>) => {\n  const promises = Object.keys(typefacesToLoad).flatMap((familyName) => {\n    return typefacesToLoad[familyName].map((typefaceToLoad) => {\n      return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(\n        (data) => {\n          const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);\n          if (tf === null) {\n            throw new Error(`Couldn't create typeface for ${familyName}`);\n          }\n          return [familyName, tf] as const;\n        }\n      );\n    });\n  });\n  return Promise.all(promises);\n};\n\nexport const useFonts = (sources: Record<string, DataModule[]>) => {\n  const [fontMgr, setFontMgr] = useState<null | SkTypefaceFontProvider>(null);\n\n  useEffect(() => {\n    loadTypefaces(sources).then((result) => {\n      const fMgr = Skia.TypefaceFontProvider.Make();\n      result.forEach(([familyName, typeface]) => {\n        fMgr.registerFont(typeface, familyName);\n      });\n      setFontMgr(fMgr);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return fontMgr;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","Skia","FontSlant","FontWeight","Platform","useTypeface","defaultFontSize","useFont","font","size","onError","typeface","Font","defaultFontStyle","fontFamily","fontSize","fontStyle","fontWeight","slant","s","Italic","Oblique","Upright","weight","Normal","Bold","parseInt","matchFont","inputStyle","fontMgr","FontMgr","System","style","width","matchFamilyStyle","listFontFamilies","families","Set","i","countFamilies","add","getFamilyName","Array","from","loadTypefaces","typefacesToLoad","promises","Object","keys","flatMap","familyName","map","typefaceToLoad","Data","fromURI","resolveAsset","then","data","tf","Typeface","MakeFreeTypeFaceFromData","Error","Promise","all","useFonts","sources","setFontMgr","result","fMgr","TypefaceFontProvider","Make","forEach","registerFont"],"sources":["Font.ts"],"sourcesContent":["/*global SkiaApi*/\nimport { useEffect, useMemo, useState } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport { FontSlant, FontWeight } from \"../types\";\nimport type { DataModule, DataSourceParam, SkFontMgr } from \"../types\";\nimport { Platform } from \"../../Platform\";\nimport type { SkTypefaceFontProvider } from \"../types/Paragraph/TypefaceFontProvider\";\n\nimport { useTypeface } from \"./Typeface\";\n\nconst defaultFontSize = 14;\n\n/**\n * Returns a Skia Font object\n * */\nexport const useFont = (\n  font: DataSourceParam,\n  size = defaultFontSize,\n  onError?: (err: Error) => void\n) => {\n  const typeface = useTypeface(font, onError);\n  return useMemo(() => {\n    if (typeface) {\n      return Skia.Font(typeface, size);\n    } else {\n      return null;\n    }\n  }, [size, typeface]);\n};\n\n/**\n * React Native style font slant, as found in the `fontStyle` property of\n * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.\n */\nexport type RNFontSlant = \"normal\" | \"italic\" | \"oblique\" | FontSlant;\n\n/**\n * React Native style font weight, as found in the `fontWeight` property of\n * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values\n * used by the Paragraph API are accepted as well.\n */\nexport type RNFontWeight =\n  | \"normal\"\n  | \"bold\"\n  | \"100\"\n  | \"200\"\n  | \"300\"\n  | \"400\"\n  | \"500\"\n  | \"600\"\n  | \"700\"\n  | \"800\"\n  | \"900\"\n  | FontWeight;\n\n/**\n * Font style accepted by {@link matchFont}.\n * `fontStyle` and `fontWeight` accept both the React Native string values\n * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same\n * values can be shared with the Paragraph API.\n */\nexport interface RNFontStyle {\n  fontFamily: string;\n  fontSize: number;\n  fontStyle: RNFontSlant;\n  fontWeight: RNFontWeight;\n}\n\nconst defaultFontStyle: RNFontStyle = {\n  fontFamily: \"System\",\n  fontSize: defaultFontSize,\n  fontStyle: \"normal\",\n  fontWeight: \"normal\",\n};\n\nconst slant = (s: RNFontSlant): FontSlant => {\n  if (typeof s === \"number\") {\n    return s;\n  } else if (s === \"italic\") {\n    return FontSlant.Italic;\n  } else if (s === \"oblique\") {\n    return FontSlant.Oblique;\n  } else {\n    return FontSlant.Upright;\n  }\n};\n\nconst weight = (fontWeight: RNFontWeight): FontWeight => {\n  switch (fontWeight) {\n    case \"normal\":\n      return FontWeight.Normal;\n    case \"bold\":\n      return FontWeight.Bold;\n    default:\n      return typeof fontWeight === \"number\"\n        ? fontWeight\n        : (parseInt(fontWeight, 10) as FontWeight);\n  }\n};\n\nexport const matchFont = (\n  inputStyle: Partial<RNFontStyle> = {},\n  fontMgr: SkFontMgr = Skia.FontMgr.System()\n) => {\n  const fontStyle = {\n    ...defaultFontStyle,\n    ...inputStyle,\n  };\n  const style = {\n    weight: weight(fontStyle.fontWeight),\n    width: 5,\n    slant: slant(fontStyle.fontStyle),\n  };\n  const typeface = fontMgr.matchFamilyStyle(fontStyle.fontFamily, style);\n  return Skia.Font(typeface, fontStyle.fontSize);\n};\n\nexport const listFontFamilies = (\n  fontMgr: SkFontMgr = Skia.FontMgr.System()\n) => {\n  const families = new Set<string>();\n  for (let i = 0; i < fontMgr.countFamilies(); i++) {\n    families.add(fontMgr.getFamilyName(i));\n  }\n  return Array.from(families);\n};\n\nconst loadTypefaces = (typefacesToLoad: Record<string, DataModule[]>) => {\n  const promises = Object.keys(typefacesToLoad).flatMap((familyName) => {\n    return typefacesToLoad[familyName].map((typefaceToLoad) => {\n      return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(\n        (data) => {\n          const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);\n          if (tf === null) {\n            throw new Error(`Couldn't create typeface for ${familyName}`);\n          }\n          return [familyName, tf] as const;\n        }\n      );\n    });\n  });\n  return Promise.all(promises);\n};\n\nexport const useFonts = (sources: Record<string, DataModule[]>) => {\n  const [fontMgr, setFontMgr] = useState<null | SkTypefaceFontProvider>(null);\n\n  useEffect(() => {\n    loadTypefaces(sources).then((result) => {\n      const fMgr = Skia.TypefaceFontProvider.Make();\n      result.forEach(([familyName, typeface]) => {\n        fMgr.registerFont(typeface, familyName);\n      });\n      setFontMgr(fMgr);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return fontMgr;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/skia/types/Data/Data.d.ts

@@ -1,17 +1,18 @@
 import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 type RNModule = number;
-type ESModule = {
-    __esModule: true;
-    default: string;
-};
 type MetroAsset = {
     uri: string;
     width: number;
     height: number;
 };
+type ESModule = {
+    __esModule: true;
+    default: RNModule | MetroAsset | string;
+};
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
 export type DataSourceParam = DataSource | null | undefined;
 export declare const isRNModule: (mod: DataModule) => mod is RNModule;
+export declare const unwrapModule: (mod: DataModule) => RNModule | MetroAsset | string;
 export {};

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

@@ -1,2 +1,7 @@
 export const isRNModule = mod => typeof mod === "number";
+
+// Since Expo SDK 52, on web, require() may return an ES module interop
+// object ({ default: <asset> }) instead of the asset itself.
+// See https://github.com/Shopify/react-native-skia/issues/2784
+export const unwrapModule = mod => typeof mod === "object" && mod !== null && "default" in mod ? mod.default : mod;
 //# sourceMappingURL=Data.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["isRNModule","mod"],"sources":["Data.ts"],"sourcesContent":["import type { SkJSIInstance } from \"../JsiInstance\";\n\nexport type SkData = SkJSIInstance<\"Data\">;\n\ntype RNModule = number;\ntype ESModule = {\n  __esModule: true;\n  default: string;\n};\ntype MetroAsset = {\n  uri: string;\n  width: number;\n  height: number;\n};\n\nexport type DataModule = RNModule | ESModule | MetroAsset;\nexport type DataSource = DataModule | string | Uint8Array;\nexport type DataSourceParam = DataSource | null | undefined;\n\nexport const isRNModule = (mod: DataModule): mod is RNModule =>\n  typeof mod === \"number\";\n"],"mappings":"AAmBA,OAAO,MAAMA,UAAU,GAAIC,GAAe,IACxC,OAAOA,GAAG,KAAK,QAAQ","ignoreList":[]}
+{"version":3,"names":["isRNModule","mod","unwrapModule","default"],"sources":["Data.ts"],"sourcesContent":["import type { SkJSIInstance } from \"../JsiInstance\";\n\nexport type SkData = SkJSIInstance<\"Data\">;\n\ntype RNModule = number;\ntype MetroAsset = {\n  uri: string;\n  width: number;\n  height: number;\n};\ntype ESModule = {\n  __esModule: true;\n  default: RNModule | MetroAsset | string;\n};\n\nexport type DataModule = RNModule | ESModule | MetroAsset;\nexport type DataSource = DataModule | string | Uint8Array;\nexport type DataSourceParam = DataSource | null | undefined;\n\nexport const isRNModule = (mod: DataModule): mod is RNModule =>\n  typeof mod === \"number\";\n\n// Since Expo SDK 52, on web, require() may return an ES module interop\n// object ({ default: <asset> }) instead of the asset itself.\n// See https://github.com/Shopify/react-native-skia/issues/2784\nexport const unwrapModule = (\n  mod: DataModule\n): RNModule | MetroAsset | string =>\n  typeof mod === \"object\" && mod !== null && \"default\" in mod\n    ? mod.default\n    : mod;\n"],"mappings":"AAmBA,OAAO,MAAMA,UAAU,GAAIC,GAAe,IACxC,OAAOA,GAAG,KAAK,QAAQ;;AAEzB;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GACvBD,GAAe,IAEf,OAAOA,GAAG,KAAK,QAAQ,IAAIA,GAAG,KAAK,IAAI,IAAI,SAAS,IAAIA,GAAG,GACvDA,GAAG,CAACE,OAAO,GACXF,GAAG","ignoreList":[]}

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

@@ -5,7 +5,7 @@ import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
-    measureText(_text: string, _paint?: SkPaint | undefined): SkRect;
+    measureText(text: string, paint?: SkPaint | undefined): SkRect;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

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

@@ -1,4 +1,4 @@
-import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
+import { HostObject, getEnum } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -7,8 +7,49 @@ export class JsiSkFont extends HostObject {
   constructor(CanvasKit, ref) {
     super(CanvasKit, ref, "Font");
   }
-  measureText(_text, _paint) {
-    return throwNotImplementedOnRNWeb();
+  measureText(text, paint) {
+    // CanvasKit doesn't expose SkFont::measureText directly, so we polyfill
+    // it: for each glyph we take its ink bounds (relative to its own origin),
+    // offset it by the accumulated advance, and union the results. This
+    // matches the bounds computed natively by SkFont::measureText.
+    const glyphs = this.ref.getGlyphIDs(text);
+    if (glyphs.length === 0) {
+      return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
+    }
+    const skPaint = paint ? JsiSkPaint.fromValue(paint) : null;
+    // Flattened rectangles: 4 floats (left, top, right, bottom) per glyph.
+    const bounds = this.ref.getGlyphBounds(glyphs, skPaint);
+    const advances = this.ref.getGlyphWidths(glyphs, skPaint);
+    let left = 0;
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    let isEmpty = true;
+    let xPos = 0;
+    for (let i = 0; i < glyphs.length; i++) {
+      const l = bounds[i * 4] + xPos;
+      const t = bounds[i * 4 + 1];
+      const r = bounds[i * 4 + 2] + xPos;
+      const b = bounds[i * 4 + 3];
+      xPos += advances[i];
+      // Skip empty glyph bounds (e.g. whitespace), like SkRect::join does.
+      if (l >= r || t >= b) {
+        continue;
+      }
+      if (isEmpty) {
+        left = l;
+        top = t;
+        right = r;
+        bottom = b;
+        isEmpty = false;
+      } else {
+        left = Math.min(left, l);
+        top = Math.min(top, t);
+        right = Math.max(right, r);
+        bottom = Math.max(bottom, b);
+      }
+    }
+    return new JsiSkRect(this.CanvasKit, this.CanvasKit.LTRBRect(left, top, right, bottom));
   }
   getTextWidth(text, paint) {
     const ids = this.getGlyphIDs(text);

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

@@ -1 +1 @@
-{"version":3,"names":["HostObject","getEnum","throwNotImplementedOnRNWeb","JsiSkPaint","JsiSkPoint","JsiSkRect","JsiSkTypeface","JsiSkFont","constructor","CanvasKit","ref","measureText","_text","_paint","getTextWidth","text","paint","ids","getGlyphIDs","widths","getGlyphWidths","reduce","a","b","getMetrics","result","ascent","descent","leading","bounds","undefined","str","numCodePoints","glyphs","fromValue","getGlyphIntercepts","positions","top","bottom","map","p","Array","from","flat","getScaleX","getSize","getSkewX","isEmbolden","getTypeface","tf","setEdging","edging","setEmbeddedBitmaps","embeddedBitmaps","setHinting","hinting","setLinearMetrics","linearMetrics","setScaleX","sx","setSize","points","setSkewX","setEmbolden","embolden","setSubpixel","subpixel","setTypeface","face"],"sources":["JsiSkFont.ts"],"sourcesContent":["import type { CanvasKit, Font } from \"canvaskit-wasm\";\n\nimport type {\n  FontEdging,\n  FontHinting,\n  SkFont,\n  SkPaint,\n  SkPoint,\n  SkRect,\n  SkTypeface,\n} from \"../types\";\n\nimport { HostObject, getEnum, throwNotImplementedOnRNWeb } from \"./Host\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { JsiSkTypeface } from \"./JsiSkTypeface\";\n\nexport class JsiSkFont extends HostObject<Font, \"Font\"> implements SkFont {\n  constructor(CanvasKit: CanvasKit, ref: Font) {\n    super(CanvasKit, ref, \"Font\");\n  }\n\n  measureText(_text: string, _paint?: SkPaint | undefined) {\n    return throwNotImplementedOnRNWeb<SkRect>();\n  }\n\n  getTextWidth(text: string, paint?: SkPaint | undefined) {\n    const ids = this.getGlyphIDs(text);\n    const widths = this.getGlyphWidths(ids, paint);\n    return widths.reduce((a, b) => a + b, 0);\n  }\n\n  getMetrics() {\n    const result = this.ref.getMetrics();\n    return {\n      ascent: result.ascent,\n      descent: result.descent,\n      leading: result.leading,\n      bounds: result.bounds\n        ? new JsiSkRect(this.CanvasKit, result.bounds)\n        : undefined,\n    };\n  }\n\n  getGlyphIDs(str: string, numCodePoints?: number) {\n    // TODO: Fix return value in the C++ implementation\n    return [...this.ref.getGlyphIDs(str, numCodePoints)];\n  }\n\n  // TODO: Fix return value in the C++ implementation, it return float32\n  getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {\n    return [\n      ...this.ref.getGlyphWidths(\n        glyphs,\n        paint ? JsiSkPaint.fromValue(paint) : null\n      ),\n    ];\n  }\n\n  getGlyphIntercepts(\n    glyphs: number[],\n    positions: SkPoint[],\n    top: number,\n    bottom: number\n  ) {\n    return [\n      ...this.ref.getGlyphIntercepts(\n        glyphs,\n        positions.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),\n        top,\n        bottom\n      ),\n    ];\n  }\n\n  getScaleX() {\n    return this.ref.getScaleX();\n  }\n\n  getSize() {\n    return this.ref.getSize();\n  }\n\n  getSkewX() {\n    return this.ref.getSkewX();\n  }\n\n  isEmbolden() {\n    return this.ref.isEmbolden();\n  }\n\n  getTypeface() {\n    const tf = this.ref.getTypeface();\n    return tf ? new JsiSkTypeface(this.CanvasKit, tf) : null;\n  }\n\n  setEdging(edging: FontEdging) {\n    this.ref.setEdging(getEnum(this.CanvasKit, \"FontEdging\", edging));\n  }\n\n  setEmbeddedBitmaps(embeddedBitmaps: boolean) {\n    this.ref.setEmbeddedBitmaps(embeddedBitmaps);\n  }\n\n  setHinting(hinting: FontHinting) {\n    this.ref.setHinting(getEnum(this.CanvasKit, \"FontHinting\", hinting));\n  }\n\n  setLinearMetrics(linearMetrics: boolean) {\n    this.ref.setLinearMetrics(linearMetrics);\n  }\n\n  setScaleX(sx: number) {\n    this.ref.setScaleX(sx);\n  }\n\n  setSize(points: number) {\n    this.ref.setSize(points);\n  }\n\n  setSkewX(sx: number) {\n    this.ref.setSkewX(sx);\n  }\n\n  setEmbolden(embolden: boolean) {\n    this.ref.setEmbolden(embolden);\n  }\n\n  setSubpixel(subpixel: boolean) {\n    this.ref.setSubpixel(subpixel);\n  }\n\n  setTypeface(face: SkTypeface | null) {\n    this.ref.setTypeface(face ? JsiSkTypeface.fromValue(face) : null);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["HostObject","getEnum","JsiSkPaint","JsiSkPoint","JsiSkRect","JsiSkTypeface","JsiSkFont","constructor","CanvasKit","ref","measureText","text","paint","glyphs","getGlyphIDs","length","XYWHRect","skPaint","fromValue","bounds","getGlyphBounds","advances","getGlyphWidths","left","top","right","bottom","isEmpty","xPos","i","l","t","r","b","Math","min","max","LTRBRect","getTextWidth","ids","widths","reduce","a","getMetrics","result","ascent","descent","leading","undefined","str","numCodePoints","getGlyphIntercepts","positions","map","p","Array","from","flat","getScaleX","getSize","getSkewX","isEmbolden","getTypeface","tf","setEdging","edging","setEmbeddedBitmaps","embeddedBitmaps","setHinting","hinting","setLinearMetrics","linearMetrics","setScaleX","sx","setSize","points","setSkewX","setEmbolden","embolden","setSubpixel","subpixel","setTypeface","face"],"sources":["JsiSkFont.ts"],"sourcesContent":["import type { CanvasKit, Font, Paint } from \"canvaskit-wasm\";\n\nimport type {\n  FontEdging,\n  FontHinting,\n  SkFont,\n  SkPaint,\n  SkPoint,\n  SkRect,\n  SkTypeface,\n} from \"../types\";\n\nimport { HostObject, getEnum } from \"./Host\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { JsiSkTypeface } from \"./JsiSkTypeface\";\n\nexport class JsiSkFont extends HostObject<Font, \"Font\"> implements SkFont {\n  constructor(CanvasKit: CanvasKit, ref: Font) {\n    super(CanvasKit, ref, \"Font\");\n  }\n\n  measureText(text: string, paint?: SkPaint | undefined): SkRect {\n    // CanvasKit doesn't expose SkFont::measureText directly, so we polyfill\n    // it: for each glyph we take its ink bounds (relative to its own origin),\n    // offset it by the accumulated advance, and union the results. This\n    // matches the bounds computed natively by SkFont::measureText.\n    const glyphs = this.ref.getGlyphIDs(text);\n    if (glyphs.length === 0) {\n      return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));\n    }\n    const skPaint = paint ? JsiSkPaint.fromValue<Paint>(paint) : null;\n    // Flattened rectangles: 4 floats (left, top, right, bottom) per glyph.\n    const bounds = this.ref.getGlyphBounds(glyphs, skPaint);\n    const advances = this.ref.getGlyphWidths(glyphs, skPaint);\n    let left = 0;\n    let top = 0;\n    let right = 0;\n    let bottom = 0;\n    let isEmpty = true;\n    let xPos = 0;\n    for (let i = 0; i < glyphs.length; i++) {\n      const l = bounds[i * 4] + xPos;\n      const t = bounds[i * 4 + 1];\n      const r = bounds[i * 4 + 2] + xPos;\n      const b = bounds[i * 4 + 3];\n      xPos += advances[i];\n      // Skip empty glyph bounds (e.g. whitespace), like SkRect::join does.\n      if (l >= r || t >= b) {\n        continue;\n      }\n      if (isEmpty) {\n        left = l;\n        top = t;\n        right = r;\n        bottom = b;\n        isEmpty = false;\n      } else {\n        left = Math.min(left, l);\n        top = Math.min(top, t);\n        right = Math.max(right, r);\n        bottom = Math.max(bottom, b);\n      }\n    }\n    return new JsiSkRect(\n      this.CanvasKit,\n      this.CanvasKit.LTRBRect(left, top, right, bottom)\n    );\n  }\n\n  getTextWidth(text: string, paint?: SkPaint | undefined) {\n    const ids = this.getGlyphIDs(text);\n    const widths = this.getGlyphWidths(ids, paint);\n    return widths.reduce((a, b) => a + b, 0);\n  }\n\n  getMetrics() {\n    const result = this.ref.getMetrics();\n    return {\n      ascent: result.ascent,\n      descent: result.descent,\n      leading: result.leading,\n      bounds: result.bounds\n        ? new JsiSkRect(this.CanvasKit, result.bounds)\n        : undefined,\n    };\n  }\n\n  getGlyphIDs(str: string, numCodePoints?: number) {\n    // TODO: Fix return value in the C++ implementation\n    return [...this.ref.getGlyphIDs(str, numCodePoints)];\n  }\n\n  // TODO: Fix return value in the C++ implementation, it return float32\n  getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {\n    return [\n      ...this.ref.getGlyphWidths(\n        glyphs,\n        paint ? JsiSkPaint.fromValue(paint) : null\n      ),\n    ];\n  }\n\n  getGlyphIntercepts(\n    glyphs: number[],\n    positions: SkPoint[],\n    top: number,\n    bottom: number\n  ) {\n    return [\n      ...this.ref.getGlyphIntercepts(\n        glyphs,\n        positions.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),\n        top,\n        bottom\n      ),\n    ];\n  }\n\n  getScaleX() {\n    return this.ref.getScaleX();\n  }\n\n  getSize() {\n    return this.ref.getSize();\n  }\n\n  getSkewX() {\n    return this.ref.getSkewX();\n  }\n\n  isEmbolden() {\n    return this.ref.isEmbolden();\n  }\n\n  getTypeface() {\n    const tf = this.ref.getTypeface();\n    return tf ? new JsiSkTypeface(this.CanvasKit, tf) : null;\n  }\n\n  setEdging(edging: FontEdging) {\n    this.ref.setEdging(getEnum(this.CanvasKit, \"FontEdging\", edging));\n  }\n\n  setEmbeddedBitmaps(embeddedBitmaps: boolean) {\n    this.ref.setEmbeddedBitmaps(embeddedBitmaps);\n  }\n\n  setHinting(hinting: FontHinting) {\n    this.ref.setHinting(getEnum(this.CanvasKit, \"FontHinting\", hinting));\n  }\n\n  setLinearMetrics(linearMetrics: boolean) {\n    this.ref.setLinearMetrics(linearMetrics);\n  }\n\n  setScaleX(sx: number) {\n    this.ref.setScaleX(sx);\n  }\n\n  setSize(points: number) {\n    this.ref.setSize(points);\n  }\n\n  setSkewX(sx: number) {\n    this.ref.setSkewX(sx);\n  }\n\n  setEmbolden(embolden: boolean) {\n    this.ref.setEmbolden(embolden);\n  }\n\n  setSubpixel(subpixel: boolean) {\n    this.ref.setSubpixel(subpixel);\n  }\n\n  setTypeface(face: SkTypeface | null) {\n    this.ref.setTypeface(face ? JsiSkTypeface.fromValue(face) : null);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/skia/types/Data/Data.d.ts

@@ -1,2 +1,3 @@
 export const __esModule: boolean;
 export function isRNModule(mod: any): mod is number;
+export function unwrapModule(mod: any): any;

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

@@ -1,7 +1,7 @@
 export const __esModule: boolean;
 export class JsiSkFont extends _Host.HostObject {
     constructor(CanvasKit: any, ref: any);
-    measureText(_text: any, _paint: any): jest.Mock<any, any, any>;
+    measureText(text: any, paint: any): _JsiSkRect.JsiSkRect;
     getTextWidth(text: any, paint: any): any;
     getMetrics(): {
         ascent: any;

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

@@ -195,6 +195,7 @@ export function Mock(CanvasKit: any): {
     rrect: (r: any, rx: any, ry: any) => import("../../..").SkRRect;
     processTransform2d: (transforms: any) => any;
     isRNModule: (mod: any) => mod is number;
+    unwrapModule: (mod: any) => any;
     ColorSpace: {
         SRGB: string;
         DisplayP3: string;

package/lib/typescript/lib/module/skia/types/Data/Data.d.ts

@@ -1 +1,2 @@
 export function isRNModule(mod: any): mod is number;
+export function unwrapModule(mod: any): any;

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

@@ -1,6 +1,6 @@
 export class JsiSkFont extends HostObject {
     constructor(CanvasKit: any, ref: any);
-    measureText(_text: any, _paint: any): jest.Mock<any, any, any>;
+    measureText(text: any, paint: any): JsiSkRect;
     getTextWidth(text: any, paint: any): any;
     getMetrics(): {
         ascent: any;

package/lib/typescript/src/skia/core/Font.d.ts

@@ -1,18 +1,33 @@
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 /**
  * Returns a Skia Font object
  * */
 export declare const useFont: (font: DataSourceParam, size?: number, onError?: (err: Error) => void) => import("../types").SkFont | null;
-type Slant = "normal" | "italic" | "oblique";
-type Weight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-interface RNFontStyle {
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | FontWeight;
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
     fontFamily: string;
     fontSize: number;
-    fontStyle: Slant;
-    fontWeight: Weight;
+    fontStyle: RNFontSlant;
+    fontWeight: RNFontWeight;
 }
 export declare const matchFont: (inputStyle?: Partial<RNFontStyle>, fontMgr?: SkFontMgr) => import("../types").SkFont;
 export declare const listFontFamilies: (fontMgr?: SkFontMgr) => string[];
 export declare const useFonts: (sources: Record<string, DataModule[]>) => SkTypefaceFontProvider | null;
-export {};

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

@@ -1,17 +1,18 @@
 import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 type RNModule = number;
-type ESModule = {
-    __esModule: true;
-    default: string;
-};
 type MetroAsset = {
     uri: string;
     width: number;
     height: number;
 };
+type ESModule = {
+    __esModule: true;
+    default: RNModule | MetroAsset | string;
+};
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
 export type DataSourceParam = DataSource | null | undefined;
 export declare const isRNModule: (mod: DataModule) => mod is RNModule;
+export declare const unwrapModule: (mod: DataModule) => RNModule | MetroAsset | string;
 export {};

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

@@ -5,7 +5,7 @@ import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
-    measureText(_text: string, _paint?: SkPaint | undefined): SkRect;
+    measureText(text: string, paint?: SkPaint | undefined): SkRect;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -32,7 +32,8 @@
     "cpp/**/*.{h,cpp}",
     "apple/**",
     "react-native-skia.podspec",
-    "dist/**"
+    "dist/**",
+    "libs/.graphite"
   ],
   "scripts": {
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
@@ -140,6 +141,11 @@
     "react-native-skia-apple-tvos": "150.0.0",
     "react-reconciler": "0.31.0"
   },
+  "graphiteDependencies": {
+    "react-native-skia-graphite-android": "150.0.0",
+    "react-native-skia-graphite-apple-ios": "150.0.0",
+    "react-native-skia-graphite-apple-macos": "150.0.0"
+  },
   "eslintIgnore": [
     "node_modules/",
     "lib/"

package/react-native-skia.podspec

@@ -29,10 +29,8 @@ end
 # re-copied and CocoaPods picks up the change. This is best-effort: if `pod install`
 # does not detect the change, a clean reinstall fixes it (acceptable until the upcoming
 # Swift Package Manager migration).
-install_apple_skia_libs = lambda do |base_dir|
-  { 'ios' => 'react-native-skia-apple-ios',
-    'macos' => 'react-native-skia-apple-macos',
-    'tvos' => 'react-native-skia-apple-tvos' }.each do |platform, pkg_name|
+install_apple_skia_libs = lambda do |base_dir, packages|
+  packages.each do |platform, pkg_name|
     pkg_dir = resolve_node_package.call(pkg_name, base_dir)
     next if pkg_dir.nil?
 
@@ -54,9 +52,18 @@ install_apple_skia_libs = lambda do |base_dir|
   end
 end
 
-# Graphite downloads its binaries directly into libs/; only the default build needs
-# the npm packages copied in.
-install_apple_skia_libs.call(__dir__) unless use_graphite
+# The default (Ganesh) build ships its binaries in the react-native-skia-apple-*
+# npm packages, the Graphite build in react-native-skia-graphite-apple-* (no tvOS).
+# During in-repo development install-skia-graphite downloads the binaries directly
+# into libs/ and the graphite packages are absent from node_modules, in which case
+# the copy below is a no-op and the downloaded binaries are used as-is.
+apple_skia_packages = use_graphite ?
+  { 'ios' => 'react-native-skia-graphite-apple-ios',
+    'macos' => 'react-native-skia-graphite-apple-macos' } :
+  { 'ios' => 'react-native-skia-apple-ios',
+    'macos' => 'react-native-skia-apple-macos',
+    'tvos' => 'react-native-skia-apple-tvos' }
+install_apple_skia_libs.call(__dir__, apple_skia_packages)
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ?
@@ -71,14 +78,15 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
 # Add Dawn library for Graphite builds (contains dawn::native symbols)
 framework_names += ['libdawn_combined'] if use_graphite
 
-# Verify that the prebuilt binaries are available (copied in above, or downloaded by
-# install-skia-graphite for Graphite builds).
+# Verify that the prebuilt binaries are available (copied in above from the npm
+# packages, or downloaded by install-skia-graphite for in-repo Graphite builds).
 unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
+  expected_packages = apple_skia_packages.values.join(', ')
   Pod::UI.warn "#{'-' * 72}"
   Pod::UI.warn "react-native-skia: Skia prebuilt binaries not found in libs/!"
   Pod::UI.warn ""
   Pod::UI.warn "Make sure dependencies are installed (yarn install / npm install) so that"
-  Pod::UI.warn "the react-native-skia-apple-* packages are present, then run `pod install` again."
+  Pod::UI.warn "the #{expected_packages} packages are present, then run `pod install` again."
   Pod::UI.warn "#{'-' * 72}"
   raise "react-native-skia: Skia prebuilt binaries not found. Run `yarn install` then `pod install` to fix this."
 end

package/src/Platform/Platform.ts

@@ -7,7 +7,7 @@ import {
 } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -15,12 +15,11 @@ export const Platform: IPlatform = {
   OS: RNPlatform.OS,
   PixelRatio: PixelRatio.get(),
   resolveAsset: (source: DataModule) => {
-    // eslint-disable-next-line no-nested-ternary
-    return isRNModule(source)
-      ? Image.resolveAssetSource(source).uri
-      : "uri" in source
-        ? source.uri
-        : source.default;
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    return isRNModule(asset) ? Image.resolveAssetSource(asset).uri : asset.uri;
   },
   findNodeHandle,
   View,