@shopify/react-native-skia 0.1.201 → 0.1.203

package/libs/ios/libskunicode.xcframework/Info.plist

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskunicode.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskunicode.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.201",
+  "version": "0.1.203",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -33,6 +33,8 @@
     "libs/ios/libsvg.xcframework",
     "libs/ios/libskottie.xcframework",
     "libs/ios/libsksg.xcframework",
+    "libs/ios/libskparagraph.xcframework",
+    "libs/ios/libskunicode.xcframework",
     "react-native-skia.podspec",
     "scripts/setup-canvaskit.js",
     "dist/**"

package/react-native-skia.podspec

@@ -34,8 +34,8 @@ Pod::Spec.new do |s|
     'libs/ios/libskia.xcframework', 
     'libs/ios/libsvg.xcframework', 
     'libs/ios/libskshaper.xcframework',
-    #'libs/ios/libskparagraph.xcframework',
-    #'libs/ios/libskunicode.xcframework',
+    'libs/ios/libskparagraph.xcframework',
+    'libs/ios/libskunicode.xcframework',
   ]
 
   # All iOS cpp/h files

package/src/skia/core/Data.ts

@@ -18,7 +18,7 @@ const factoryWrapper = <T>(
   }
 };
 
-const loadData = <T>(
+export const loadData = <T>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
   onError?: (err: Error) => void
@@ -37,6 +37,7 @@ const loadData = <T>(
     );
   }
 };
+
 const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   loader: () => Promise<T | null>
@@ -61,6 +62,35 @@ const useLoading = <T extends SkJSIInstance<string>>(
   return data;
 };
 
+export const useCollectionLoading = <T extends SkJSIInstance<string>>(
+  source: DataSourceParam[],
+  loader: () => Promise<(T | null)[]>
+) => {
+  const mounted = useRef(false);
+  const [data, setData] = useState<T[] | null>(null);
+  const dataRef = useRef<T[] | null>(null);
+
+  useEffect(() => {
+    mounted.current = true;
+    loader().then((result) => {
+      const value = result.filter((r) => r !== null) as T[];
+      if (mounted.current) {
+        setData(value);
+        dataRef.current = value;
+      }
+    });
+
+    return () => {
+      dataRef.current?.forEach((instance) => instance?.dispose());
+      mounted.current = false;
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source]);
+
+  return data;
+};
+
 export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,

package/src/skia/core/Font.ts

@@ -1,8 +1,11 @@
 /*global SkiaApi*/
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../Skia";
-import type { DataSourceParam } from "../types";
+import { FontSlant } from "../types";
+import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
+import { Platform } from "../../Platform";
+import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 
 import { useTypeface } from "./Typeface";
 
@@ -25,3 +28,107 @@ export const useFont = (
     }
   }, [size, typeface]);
 };
+
+type Slant = "normal" | "italic" | "oblique";
+type Weight =
+  | "normal"
+  | "bold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+interface RNFontStyle {
+  fontFamily: string;
+  fontSize: number;
+  fontStyle: Slant;
+  fontWeight: Weight;
+}
+
+const defaultFontStyle: RNFontStyle = {
+  fontFamily: "System",
+  fontSize: 14,
+  fontStyle: "normal",
+  fontWeight: "normal",
+};
+
+const slant = (s: Slant) => {
+  if (s === "italic") {
+    return FontSlant.Italic;
+  } else if (s === "oblique") {
+    return FontSlant.Oblique;
+  } else {
+    return FontSlant.Upright;
+  }
+};
+
+const weight = (fontWeight: Weight) => {
+  switch (fontWeight) {
+    case "normal":
+      return 400;
+    case "bold":
+      return 700;
+    default:
+      return parseInt(fontWeight, 10);
+  }
+};
+
+export const matchFont = (
+  inputStyle: Partial<RNFontStyle> = {},
+  fontMgr: SkFontMgr = Skia.FontMgr.System()
+) => {
+  const fontStyle = {
+    ...defaultFontStyle,
+    ...inputStyle,
+  };
+  const style = {
+    weight: weight(fontStyle.fontWeight),
+    width: 5,
+    slant: slant(fontStyle.fontStyle),
+  };
+  const typeface = fontMgr.matchFamilyStyle(fontStyle.fontFamily, style);
+  return Skia.Font(typeface, fontStyle.fontSize);
+};
+
+export const listFontFamilies = (fontMgr: SkFontMgr = Skia.FontMgr.System()) =>
+  new Array(fontMgr.countFamilies())
+    .fill(0)
+    .map((_, i) => fontMgr.getFamilyName(i));
+
+const loadTypefaces = (typefacesToLoad: Record<string, DataModule[]>) => {
+  const promises = Object.keys(typefacesToLoad).flatMap((familyName) => {
+    return typefacesToLoad[familyName].map((typefaceToLoad) => {
+      return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(
+        (data) => {
+          const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);
+          if (tf === null) {
+            throw new Error(`Couldn't create typeface for ${familyName}`);
+          }
+          return [familyName, tf] as const;
+        }
+      );
+    });
+  });
+  return Promise.all(promises);
+};
+
+export const useFonts = (sources: Record<string, DataModule[]>) => {
+  const [fontMgr, setFontMgr] = useState<null | SkTypefaceFontProvider>(null);
+
+  useEffect(() => {
+    loadTypefaces(sources).then((result) => {
+      const fMgr = Skia.TypefaceFontProvider.Make();
+      result.forEach(([familyName, typeface]) => {
+        fMgr.registerFont(typeface, familyName);
+      });
+      setFontMgr(fMgr);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return fontMgr;
+};

package/src/skia/types/Font/FontMgr.ts

@@ -0,0 +1,10 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkTypeface } from "../Typeface";
+
+import type { FontStyle } from "./Font";
+
+export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
+  countFamilies(): number;
+  getFamilyName(index: number): string;
+  matchFamilyStyle(name: string, style: FontStyle): SkTypeface;
+}

package/src/skia/types/Font/FontMgrFactory.ts

@@ -0,0 +1,5 @@
+import type { SkFontMgr } from "./FontMgr";
+
+export interface FontMgrFactory {
+  System(): SkFontMgr;
+}

package/src/skia/types/Font/index.ts

@@ -1 +1,3 @@
 export * from "./Font";
+export * from "./FontMgr";
+export * from "./FontMgrFactory";

package/src/skia/types/Paragraph/TypefaceFontProvider.ts

@@ -0,0 +1,11 @@
+import type { SkFontMgr } from "../Font";
+import type { SkTypeface } from "../Typeface";
+
+export interface SkTypefaceFontProvider extends SkFontMgr {
+  /**
+   * Registers a given typeface with the given family name.
+   * @param typeface - Typeface.
+   * @param family
+   */
+  registerFont(typeface: SkTypeface, familyName: string): void;
+}

package/src/skia/types/Paragraph/TypefaceFontProviderFactory.ts

@@ -0,0 +1,5 @@
+import type { SkTypefaceFontProvider } from "./TypefaceFontProvider";
+
+export interface TypefaceFontProviderFactory {
+  Make(): SkTypefaceFontProvider;
+}

package/src/skia/types/Skia.ts

@@ -1,7 +1,7 @@
 import type { ImageFilterFactory } from "./ImageFilter";
 import type { PathFactory } from "./Path";
 import type { ColorFilterFactory } from "./ColorFilter";
-import type { SkFont } from "./Font";
+import type { SkFont, FontMgrFactory } from "./Font";
 import type { SkTypeface, TypefaceFactory } from "./Typeface";
 import type { ImageFactory } from "./Image";
 import type { MaskFilterFactory } from "./MaskFilter";
@@ -27,7 +27,7 @@ import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
 import type { Color, SkColor } from "./Color";
-
+import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 /**
  * Declares the interface for the native Skia API
  */
@@ -51,6 +51,8 @@ export interface Skia {
   ColorFilter: ColorFilterFactory;
   Font: (typeface?: SkTypeface, size?: number) => SkFont;
   Typeface: TypefaceFactory;
+  TypefaceFontProvider: TypefaceFontProviderFactory;
+  FontMgr: FontMgrFactory;
   MaskFilter: MaskFilterFactory;
   RuntimeEffect: RuntimeEffectFactory;
   ImageFilter: ImageFilterFactory;

package/src/skia/web/Host.ts

@@ -29,7 +29,7 @@ export abstract class BaseHostObject<T, N extends string>
     this.__typename__ = typename;
   }
 
-  abstract dispose: () => void;
+  abstract dispose(): void;
 }
 
 export abstract class HostObject<T, N extends string> extends BaseHostObject<

package/src/skia/web/JsiSkFontMgr.ts

@@ -0,0 +1,26 @@
+import type { CanvasKit, FontMgr } from "canvaskit-wasm";
+
+import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
+
+import { HostObject, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkFontMgr
+  extends HostObject<FontMgr, "FontMgr">
+  implements SkFontMgr
+{
+  constructor(CanvasKit: CanvasKit, ref: FontMgr) {
+    super(CanvasKit, ref, "FontMgr");
+  }
+  dispose() {
+    this.ref.delete();
+  }
+  countFamilies() {
+    return this.ref.countFamilies();
+  }
+  getFamilyName(index: number) {
+    return this.ref.getFamilyName(index);
+  }
+  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle): SkTypeface {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkFontMgrFactory.ts

@@ -0,0 +1,22 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { FontMgrFactory } from "../types";
+
+import { Host } from "./Host";
+import { JsiSkFontMgr } from "./JsiSkFontMgr";
+
+export class JsiSkFontMgrFactory extends Host implements FontMgrFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  System() {
+    const fontMgr = this.CanvasKit.TypefaceFontProvider.Make();
+    if (!fontMgr) {
+      throw new Error("Couldn't create system font manager");
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return new JsiSkFontMgr(this.CanvasKit, fontMgr);
+  }
+}

package/src/skia/web/JsiSkTypefaceFontProvider.ts

@@ -0,0 +1,89 @@
+import type { CanvasKit, TypefaceFontProvider } from "canvaskit-wasm";
+
+import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
+import type { FontStyle, SkTypeface } from "../types";
+
+import { HostObject, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkTypefaceFontProvider
+  extends HostObject<TypefaceFontProvider, "FontMgr">
+  implements SkTypefaceFontProvider
+{
+  private allocatedPointers: number[] = [];
+
+  constructor(CanvasKit: CanvasKit, ref: TypefaceFontProvider) {
+    super(CanvasKit, ref, "FontMgr");
+  }
+
+  matchFamilyStyle(_name: string, _style: FontStyle): SkTypeface {
+    throw new NotImplementedOnRNWeb();
+  }
+  countFamilies() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return this.ref.countFamilies();
+  }
+  getFamilyName(index: number) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return this.ref.getFamilyName(index);
+  }
+  registerFont(typeface: SkTypeface, familyName: string) {
+    const strLen = lengthBytesUTF8(familyName) + 1;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const strPtr = this.CanvasKit._malloc(strLen);
+    stringToUTF8(this.CanvasKit, familyName, strPtr, strLen);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    this.ref._registerFont(typeface.ref, strPtr);
+  }
+
+  dispose() {
+    for (const ptr of this.allocatedPointers) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      this.CanvasKit._free(ptr);
+    }
+
+    this.ref.delete();
+  }
+}
+
+const lengthBytesUTF8 = (str: string) => {
+  // TextEncoder will give us the byte length in UTF8 form
+  const encoder = new TextEncoder();
+  const utf8 = encoder.encode(str);
+  return utf8.length;
+};
+
+const stringToUTF8 = (
+  CanvasKit: CanvasKit,
+  str: string,
+  outPtr: number,
+  maxBytesToWrite: number
+) => {
+  // TextEncoder will give us the byte array in UTF8 form
+  const encoder = new TextEncoder();
+  const utf8 = encoder.encode(str);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  const heap: Int8Array = CanvasKit.HEAPU8;
+
+  // Check if there's enough space
+  if (utf8.length > maxBytesToWrite) {
+    throw new Error("Not enough space to write UTF8 encoded string");
+  }
+
+  // Copy the bytes
+  for (let i = 0; i < utf8.length; i++) {
+    heap[outPtr + i] = utf8[i];
+  }
+
+  // Null terminate
+  if (utf8.length < maxBytesToWrite) {
+    heap[outPtr + utf8.length] = 0;
+  }
+};

package/src/skia/web/JsiSkTypefaceFontProviderFactory.ts

@@ -0,0 +1,18 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import { Host } from "./Host";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
+
+export class JsiSkTypefaceFontProviderFactory
+  extends Host
+  implements JsiSkTypefaceFontProviderFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make() {
+    const tf = this.CanvasKit.TypefaceFontProvider.Make();
+    return new JsiSkTypefaceFontProvider(this.CanvasKit, tf);
+  }
+}

package/src/skia/web/JsiSkia.ts

@@ -37,6 +37,8 @@ import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
 import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFactory";
+import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -102,4 +104,6 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
   },
   Surface: new JsiSkSurfaceFactory(CanvasKit),
+  TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),
+  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
 });

package/ios/RNSkia-iOS/SkiaMetalRenderer.h

@@ -1,5 +0,0 @@
-#pragma once
-
-#include "SkSurface.h"
-
-sk_sp<SkSurface> MakeOffscreenMetalSurface(int width, int height);

package/ios/RNSkia-iOS/SkiaMetalRenderer.mm

@@ -1,55 +0,0 @@
-#pragma clang diagnostic push
-#pragma clang diagnostic ignored "-Wdocumentation"
-
-#import "SkCanvas.h"
-#import "SkColorSpace.h"
-#import "SkSurface.h"
-
-#import <include/gpu/GrBackendSurface.h>
-#import <include/gpu/GrDirectContext.h>
-#import <include/gpu/ganesh/SkSurfaceGanesh.h>
-
-#pragma clang diagnostic pop
-
-#import <MetalKit/MetalKit.h>
-
-struct OffscreenRenderContext {
-  id<MTLDevice> device;
-  id<MTLCommandQueue> commandQueue;
-  sk_sp<GrDirectContext> skiaContext;
-  id<MTLTexture> texture;
-
-  OffscreenRenderContext(int width, int height) {
-    device = MTLCreateSystemDefaultDevice();
-    commandQueue =
-        id<MTLCommandQueue>(CFRetain((GrMTLHandle)[device newCommandQueue]));
-    skiaContext = GrDirectContext::MakeMetal((__bridge void *)device,
-                                             (__bridge void *)commandQueue);
-    // Create a Metal texture descriptor
-    MTLTextureDescriptor *textureDescriptor = [MTLTextureDescriptor
-        texture2DDescriptorWithPixelFormat:MTLPixelFormatBGRA8Unorm
-                                     width:width
-                                    height:height
-                                 mipmapped:NO];
-    textureDescriptor.usage =
-        MTLTextureUsageRenderTarget | MTLTextureUsageShaderRead;
-    texture = [device newTextureWithDescriptor:textureDescriptor];
-  }
-};
-
-sk_sp<SkSurface> MakeOffscreenMetalSurface(int width, int height) {
-  auto ctx = new OffscreenRenderContext(width, height);
-
-  // Create a GrBackendTexture from the Metal texture
-  GrMtlTextureInfo info;
-  info.fTexture.retain((__bridge void *)ctx->texture);
-  GrBackendTexture backendTexture(width, height, GrMipMapped::kNo, info);
-
-  // Create a SkSurface from the GrBackendTexture
-  auto surface = SkSurfaces::WrapBackendTexture(
-      ctx->skiaContext.get(), backendTexture, kTopLeft_GrSurfaceOrigin, 0,
-      kBGRA_8888_SkColorType, nullptr, nullptr,
-      [](void *addr) { delete (OffscreenRenderContext *)addr; }, ctx);
-
-  return surface;
-}