@shopify/react-native-skia 1.11.5 → 1.11.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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

package/src/renderer/Canvas.tsx

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,

package/src/sksg/Container.ts

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

package/src/specs/NativeSkiaModule.web.ts

@@ -0,0 +1,38 @@
+import type { SkRect } from "../skia/types";
+import type { ISkiaViewApi } from "../views/types";
+import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+export type ISkiaViewApiWeb = ISkiaViewApi & {
+  views: Record<string, SkiaPictureView>;
+  registerView(nativeId: string, view: SkiaPictureView): void;
+};
+
+global.SkiaViewApi = {
+  views: {},
+  web: true,
+  registerView(nativeId: string, view: SkiaPictureView) {
+    this.views[nativeId] = view;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setJsiProperty(nativeId: number, name: string, value: any) {
+    if (name === "picture") {
+      this.views[`${nativeId}`].setPicture(value);
+    }
+  },
+  requestRedraw(nativeId: number) {
+    this.views[`${nativeId}`].redraw();
+  },
+  makeImageSnapshot(nativeId: number, rect?: SkRect) {
+    return this.views[`${nativeId}`].makeImageSnapshot(rect);
+  },
+  makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {
+    return new Promise((resolve, reject) => {
+      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);
+      if (result) {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to make image snapshot"));
+      }
+    });
+  },
+} as ISkiaViewApiWeb;

package/src/specs/SkiaPictureViewNativeComponent.web.ts

@@ -0,0 +1,39 @@
+import type { ViewProps } from "react-native";
+import { createElement, useEffect, useRef } from "react";
+
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+import type { ISkiaViewApiWeb } from "./NativeSkiaModule.web";
+
+export interface NativeProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  nativeID: string;
+}
+
+const SkiaPictureViewNativeComponent = ({
+  nativeID,
+  debug,
+  opaque,
+  onLayout,
+  ...viewProps
+}: NativeProps) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) {
+      (global.SkiaViewApi as ISkiaViewApiWeb).registerView(
+        nativeID,
+        ref.current
+      );
+    }
+  }, [nativeID]);
+  return createElement(SkiaPictureView, {
+    ref,
+    debug,
+    opaque,
+    onLayout,
+    ...viewProps,
+  });
+};
+// eslint-disable-next-line import/no-default-export
+export default SkiaPictureViewNativeComponent;

package/src/views/types.ts

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

package/cpp/jsi/JsiValue.cpp

@@ -1,345 +0,0 @@
-#include "JsiValue.h"
-
-namespace RNJsi {
-
-JsiValue::JsiValue() : _type(PropType::Undefined) {}
-
-JsiValue::JsiValue(jsi::Runtime &runtime, const jsi::Value &value)
-    : JsiValue() {
-  setCurrent(runtime, value);
-}
-
-void JsiValue::setCurrent(jsi::Runtime &runtime, const jsi::Value &value) {
-  _stringValue = "";
-  _hostObject = nullptr;
-  _hostFunction = nullptr;
-  _props.clear();
-  _array.clear();
-  _keysCache.clear();
-
-  if (value.isNumber()) {
-    _type = PropType::Number;
-    _numberValue = value.asNumber();
-  } else if (value.isBool()) {
-    _type = PropType::Bool;
-    _boolValue = value.getBool();
-  } else if (value.isString()) {
-    _type = PropType::String;
-    _stringValue = value.asString(runtime).utf8(runtime);
-  } else if (value.isUndefined()) {
-    _type = PropType::Undefined;
-  } else if (value.isNull()) {
-    _type = PropType::Null;
-  } else if (value.isObject()) {
-    setObject(runtime, value);
-  } else {
-    throw std::runtime_error("Could not store jsi::Value of provided type");
-  }
-}
-
-bool JsiValue::getAsBool() const {
-  if (_type != PropType::Bool) {
-    throw std::runtime_error("Expected type bool, got " +
-                             getTypeAsString(_type));
-  }
-  return _boolValue;
-}
-
-double JsiValue::getAsNumber() const {
-  if (_type != PropType::Number) {
-    throw std::runtime_error("Expected type number, got " +
-                             getTypeAsString(_type));
-  }
-  return _numberValue;
-}
-
-const std::string &JsiValue::getAsString() const {
-  if (_type == PropType::Number) {
-    return std::to_string(_numberValue);
-  }
-  if (_type != PropType::String) {
-    throw std::runtime_error("Expected type string, got " +
-                             getTypeAsString(_type));
-  }
-  return _stringValue;
-}
-
-const std::vector<JsiValue> &JsiValue::getAsArray() const {
-  if (_type != PropType::Array) {
-    throw std::runtime_error("Expected type array, got " +
-                             getTypeAsString(_type));
-  }
-  return _array;
-}
-
-const JsiValue &JsiValue::getValue(PropId name) const {
-  if (_type != PropType::Object) {
-    throw std::runtime_error("Expected type object, got " +
-                             getTypeAsString(_type));
-  }
-  return _props.at(name);
-}
-
-bool JsiValue::hasValue(PropId name) const {
-  if (_type != PropType::Object) {
-    throw std::runtime_error("Expected type object, got " +
-                             getTypeAsString(_type));
-  }
-  return _props.count(name) > 0;
-}
-
-std::vector<PropId> JsiValue::getKeys() const {
-  if (_type != PropType::Object) {
-    throw std::runtime_error("Expected type object, got " +
-                             getTypeAsString(_type));
-  }
-  return _keysCache;
-}
-
-std::shared_ptr<jsi::HostObject> JsiValue::getAsHostObject() const {
-  if (_type != PropType::HostObject) {
-    throw std::runtime_error("Expected type host object, got " +
-                             getTypeAsString(_type));
-  }
-  return _hostObject;
-}
-
-jsi::HostFunctionType JsiValue::getAsHostFunction() const {
-  if (_type != PropType::HostFunction) {
-    throw std::runtime_error("Expected type host function, got " +
-                             getTypeAsString(_type));
-  }
-  return _hostFunction;
-}
-
-const jsi::HostFunctionType JsiValue::getAsFunction() const {
-  return getAsHostFunction();
-}
-
-std::string JsiValue::asString() const {
-  switch (_type) {
-  case PropType::Null:
-    return "(null)";
-  case PropType::Undefined:
-    return "(undefined)";
-  case PropType::Number:
-    return std::to_string(_numberValue);
-  case PropType::Bool:
-    return std::to_string(_boolValue);
-  case PropType::String:
-    return _stringValue;
-  case PropType::Object:
-    return "[Object]";
-  case PropType::Array:
-    return "[Array]";
-  case PropType::HostObject:
-    return "[HostObject]";
-  case PropType::HostFunction:
-    return "[HostFunction]";
-  }
-}
-
-jsi::Value JsiValue::getAsJsiValue(jsi::Runtime &runtime) const {
-  switch (_type) {
-  case PropType::Undefined:
-    return jsi::Value::undefined();
-  case PropType::Null:
-    return jsi::Value::null();
-  case PropType::Number:
-    return _numberValue;
-  case PropType::Bool:
-    return _boolValue;
-  case PropType::String:
-    return jsi::String::createFromUtf8(runtime, _stringValue);
-  case PropType::Object:
-    return getObject(runtime);
-  case PropType::Array:
-    return getArray(runtime);
-  case PropType::HostObject:
-    return getHostObject(runtime);
-  case PropType::HostFunction:
-    return getHostFunction(runtime);
-  }
-}
-
-std::string JsiValue::getTypeAsString(PropType type) {
-  switch (type) {
-  case PropType::Undefined:
-    return "undefined";
-  case PropType::Null:
-    return "null";
-  case PropType::Number:
-    return "number";
-  case PropType::Bool:
-    return "boolean";
-  case PropType::String:
-    return "string";
-  case PropType::Object:
-    return "object";
-  case PropType::Array:
-    return "array";
-  case PropType::HostObject:
-    return "hostobject";
-  case PropType::HostFunction:
-    return "hostfunction";
-  }
-}
-
-void JsiValue::setObject(jsi::Runtime &runtime, const jsi::Value &value) {
-  auto obj = value.asObject(runtime);
-  if (obj.isFunction(runtime)) {
-    setFunction(runtime, value);
-  } else if (obj.isArray(runtime)) {
-    setArray(runtime, obj);
-  } else if (obj.isHostObject(runtime)) {
-    setHostObject(runtime, obj);
-  } else {
-    _type = PropType::Object;
-    // Read object keys
-    auto keys = obj.getPropertyNames(runtime);
-    size_t size = keys.size(runtime);
-    _keysCache.clear();
-    _keysCache.reserve(size);
-    _props.clear();
-    _props.reserve(size);
-
-    for (size_t i = 0; i < size; ++i) {
-      auto key = JsiPropId::get(
-          keys.getValueAtIndex(runtime, i).asString(runtime).utf8(runtime));
-      try {
-        _props.try_emplace(key, runtime, obj.getProperty(runtime, key));
-        _keysCache.push_back(key);
-      } catch (jsi::JSError e) {
-        throw jsi::JSError(runtime,
-                           "Could not set property for key " +
-                               std::string(key) + ":\n" + e.getMessage(),
-                           e.getStack());
-      }
-    }
-  }
-}
-
-jsi::Object JsiValue::getObject(jsi::Runtime &runtime) const {
-  assert(_type == PropType::Object);
-  auto obj = jsi::Object(runtime);
-  for (auto &p : _props) {
-    obj.setProperty(runtime, p.first, p.second.getAsJsiValue(runtime));
-  }
-  return obj;
-}
-
-bool JsiValue::operator!=(const JsiValue &other) const {
-  return !(this->operator==(other));
-}
-
-bool JsiValue::operator==(const JsiValue &other) const {
-
-  if (other.getType() != getType()) {
-    return false;
-  }
-
-  switch (_type) {
-  case PropType::Null:
-  case PropType::Undefined:
-    return true;
-  case PropType::Number:
-    return _numberValue == other.getAsNumber();
-  case PropType::Bool:
-    return _boolValue == other.getAsBool();
-  case PropType::String:
-    return _stringValue == other.getAsString();
-  case PropType::Object: {
-    if (_props.size() != other.getProps().size()) {
-      return false;
-    }
-    for (auto &p : _props) {
-      auto t = p.second.operator==(other.getValue(p.first));
-      if (!t) {
-        return false;
-      }
-    }
-    return true;
-  }
-  case PropType::Array: {
-    auto otherArr = other.getAsArray();
-    if (_array.size() != otherArr.size()) {
-      return false;
-    }
-    for (size_t i = 0; i < _array.size(); ++i) {
-      if (!_array[i].operator==(otherArr[i])) {
-        return false;
-      }
-    }
-    return true;
-  }
-  case PropType::HostObject:
-    return getAsHostObject() == other.getAsHostObject();
-  case PropType::HostFunction:
-    // Unable to compare host functions
-    return false;
-  }
-
-  throw std::runtime_error(
-      "Wrong type in equals call. Should not happen. File a bug.");
-
-  return false;
-}
-
-void JsiValue::setFunction(jsi::Runtime &runtime, const jsi::Value &value) {
-  auto func = value.asObject(runtime).asFunction(runtime);
-  if (func.isHostFunction(runtime)) {
-    _type = PropType::HostFunction;
-    _hostFunction = func.getHostFunction(runtime);
-  } else {
-    _type = PropType::HostFunction;
-    auto obj = std::make_shared<jsi::Object>(value.asObject(runtime));
-    _hostFunction = [obj](jsi::Runtime &runtime, const jsi::Value &thisValue,
-                          const jsi::Value *arguments,
-                          size_t count) -> jsi::Value {
-      auto func = obj->asFunction(runtime);
-      if (thisValue.isNull() || thisValue.isUndefined()) {
-        return func.call(runtime, arguments, count);
-      } else {
-        return func.callWithThis(runtime, thisValue.asObject(runtime),
-                                 arguments, count);
-      }
-    };
-  }
-}
-
-jsi::Object JsiValue::getHostFunction(jsi::Runtime &runtime) const {
-  assert(_type == PropType::HostFunction);
-  return jsi::Function::createFromHostFunction(
-      runtime, jsi::PropNameID::forUtf8(runtime, "fn"), 0, _hostFunction);
-}
-
-void JsiValue::setArray(jsi::Runtime &runtime, const jsi::Object &obj) {
-  _type = PropType::Array;
-  auto arr = obj.asArray(runtime);
-  size_t size = arr.size(runtime);
-  _array.reserve(size);
-  for (size_t i = 0; i < size; ++i) {
-    _array.emplace_back(runtime, arr.getValueAtIndex(runtime, i));
-  }
-}
-
-jsi::Array JsiValue::getArray(jsi::Runtime &runtime) const {
-  assert(_type == PropType::Array);
-  jsi::Array arr = jsi::Array(runtime, _array.size());
-  for (size_t i = 0; i < _array.size(); ++i) {
-    arr.setValueAtIndex(runtime, i, _array[i].getAsJsiValue(runtime));
-  }
-  return arr;
-}
-
-void JsiValue::setHostObject(jsi::Runtime &runtime, const jsi::Object &obj) {
-  _type = PropType::HostObject;
-  _hostObject = obj.asHostObject(runtime);
-}
-
-jsi::Object JsiValue::getHostObject(jsi::Runtime &runtime) const {
-  assert(_type == PropType::HostObject);
-  return jsi::Object::createFromHostObject(runtime, _hostObject);
-}
-
-} // namespace RNJsi