@shopify/react-native-skia 0.1.115

package/lib/module/views/SkiaView.js

@@ -0,0 +1,149 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from "react";
+import { requireNativeComponent } from "react-native";
+let SkiaViewNativeId = 1000;
+const NativeSkiaView = requireNativeComponent("ReactNativeSkiaView");
+const {
+  SkiaViewApi
+} = global;
+export class SkiaView extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_nativeId", void 0);
+
+    _defineProperty(this, "_animatingValues", []);
+
+    this._nativeId = SkiaViewNativeId++;
+    const {
+      onDraw
+    } = props;
+
+    if (onDraw) {
+      assertDrawCallbacksEnabled();
+      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+    }
+  }
+
+  get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      onDraw
+    } = this.props;
+
+    if (onDraw !== prevProps.onDraw) {
+      assertDrawCallbacksEnabled();
+      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+    }
+  }
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+
+
+  makeImageSnapshot(rect) {
+    assertDrawCallbacksEnabled();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+
+
+  redraw() {
+    assertDrawCallbacksEnabled();
+    SkiaViewApi.invalidateSkiaView(this._nativeId);
+  }
+  /**
+   * Updates the drawing mode for the skia view. This is the same
+   * as declaratively setting the mode property on the SkiaView.
+   * There are two drawing modes, "continuous" and "default",
+   * where the continuous mode will continuously redraw the view and
+   * the default mode will only redraw when any of the regular react
+   * properties are changed like size and margins.
+   * @param mode Drawing mode to use.
+   */
+
+
+  setDrawMode(mode) {
+    assertDrawCallbacksEnabled();
+    SkiaViewApi.setDrawMode(this._nativeId, mode);
+  }
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+
+
+  registerValues(values) {
+    assertDrawCallbacksEnabled();
+    return SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+  /**
+   * Increases the number of animations active in the view.
+   */
+
+
+  addAnimation(owner) {
+    if (this._animatingValues.findIndex(p => p === owner) === -1) {
+      this._animatingValues.push(owner);
+    }
+
+    if (this._animatingValues.length === 1) {
+      if (this.props.mode === "default" || this.props.mode === undefined) {
+        //console.log("SkiaView addAnimation - mode changed to continuous");
+        this.setDrawMode("continuous");
+      }
+    }
+  }
+  /**
+   * Decreases the number of animations active in the view.
+   */
+
+
+  removeAnimation(owner) {
+    const indexOfOwner = this._animatingValues.indexOf(owner);
+
+    if (indexOfOwner !== -1) {
+      // Remove
+      this._animatingValues = this._animatingValues.filter(p => p !== owner);
+    }
+
+    if (this._animatingValues.length === 0) {
+      if (this.props.mode === "default" || this.props.mode === undefined) {
+        //console.log("SkiaView removeAnimation - mode changed to default");
+        this.setDrawMode("default");
+      }
+    }
+  }
+
+  render() {
+    const {
+      style,
+      mode,
+      debug = false
+    } = this.props;
+    return /*#__PURE__*/React.createElement(NativeSkiaView, {
+      style: style,
+      collapsable: false,
+      nativeID: `${this._nativeId}`,
+      mode: mode,
+      debug: debug
+    });
+  }
+
+}
+
+const assertDrawCallbacksEnabled = () => {
+  if (SkiaViewApi === null || SkiaViewApi.setDrawCallback == null || SkiaViewApi.invalidateSkiaView == null) {
+    throw Error("Skia Api is not enabled.");
+  }
+};
+//# sourceMappingURL=SkiaView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SkiaView.tsx"],"names":["React","requireNativeComponent","SkiaViewNativeId","NativeSkiaView","SkiaViewApi","global","SkiaView","Component","constructor","props","_nativeId","onDraw","assertDrawCallbacksEnabled","setDrawCallback","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","invalidateSkiaView","setDrawMode","mode","registerValues","values","registerValuesInView","addAnimation","owner","_animatingValues","findIndex","p","push","length","undefined","removeAnimation","indexOfOwner","indexOf","filter","render","style","debug","Error"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkImage, SkRect } from \"../skia\";\nimport type { SkiaReadonlyValue } from \"../values\";\n\nimport type {\n  DrawMode,\n  NativeSkiaViewProps,\n  RNSkiaDrawCallback,\n  RNSkiaViewProps,\n} from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\n);\n\ndeclare global {\n  var SkiaViewApi: {\n    invalidateSkiaView: (nativeId: number) => void;\n    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n    setDrawCallback: (\n      nativeId: number,\n      callback: RNSkiaDrawCallback | undefined\n    ) => void;\n    setDrawMode: (nativeId: number, mode: DrawMode) => void;\n    registerValuesInView: (\n      nativeId: number,\n      values: SkiaReadonlyValue<unknown>[]\n    ) => () => void;\n  };\n}\n\nconst { SkiaViewApi } = global;\n\nexport class SkiaView extends React.Component<RNSkiaViewProps> {\n  constructor(props: RNSkiaViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n    }\n  }\n\n  private _nativeId: number;\n  private _animatingValues: Array<unknown> = [];\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: RNSkiaViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertDrawCallbacksEnabled();\n      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);\n    }\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    assertDrawCallbacksEnabled();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertDrawCallbacksEnabled();\n    SkiaViewApi.invalidateSkiaView(this._nativeId);\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    assertDrawCallbacksEnabled();\n    SkiaViewApi.setDrawMode(this._nativeId, mode);\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: SkiaReadonlyValue<unknown>[]) {\n    assertDrawCallbacksEnabled();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  /**\n   * Increases the number of animations active in the view.\n   */\n  public addAnimation(owner: unknown) {\n    if (this._animatingValues.findIndex((p) => p === owner) === -1) {\n      this._animatingValues.push(owner);\n    }\n\n    if (this._animatingValues.length === 1) {\n      if (this.props.mode === \"default\" || this.props.mode === undefined) {\n        //console.log(\"SkiaView addAnimation - mode changed to continuous\");\n        this.setDrawMode(\"continuous\");\n      }\n    }\n  }\n\n  /**\n   * Decreases the number of animations active in the view.\n   */\n  public removeAnimation(owner: unknown) {\n    const indexOfOwner = this._animatingValues.indexOf(owner);\n    if (indexOfOwner !== -1) {\n      // Remove\n      this._animatingValues = this._animatingValues.filter((p) => p !== owner);\n    }\n    if (this._animatingValues.length === 0) {\n      if (this.props.mode === \"default\" || this.props.mode === undefined) {\n        //console.log(\"SkiaView removeAnimation - mode changed to default\");\n        this.setDrawMode(\"default\");\n      }\n    }\n  }\n\n  render() {\n    const { style, mode, debug = false } = this.props;\n    return (\n      <NativeSkiaView\n        style={style}\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n}\n\nconst assertDrawCallbacksEnabled = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setDrawCallback == null ||\n    SkiaViewApi.invalidateSkiaView == null\n  ) {\n    throw Error(\"Skia Api is not enabled.\");\n  }\n};\n"]}

package/lib/module/views/index.js

@@ -0,0 +1,5 @@
+export * from "./SkiaView";
+export * from "./types";
+export * from "./useDrawCallback";
+export * from "./useTouchHandler";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,mBAAd","sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"]}

package/lib/module/views/types.js

@@ -0,0 +1,9 @@
+export let TouchType;
+
+(function (TouchType) {
+  TouchType[TouchType["Start"] = 0] = "Start";
+  TouchType[TouchType["Active"] = 1] = "Active";
+  TouchType[TouchType["End"] = 2] = "End";
+  TouchType[TouchType["Cancelled"] = 3] = "Cancelled";
+})(TouchType || (TouchType = {}));
+//# sourceMappingURL=types.js.map

package/lib/module/views/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAWA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/Canvas\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\nexport type RNSkiaViewProps = ViewProps & {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n};\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n"]}

package/lib/module/views/useDrawCallback.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+
+/**
+ * Creates a memoized callback for the onDraw handler of a Skia component.
+ * @param callback The callback to memoize.
+ * @param deps Dependencies for the callback.
+ * */
+export const useDrawCallback = function (callback) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return useMemo(() => {
+    return callback; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};
+//# sourceMappingURL=useDrawCallback.js.map

package/lib/module/views/useDrawCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrawCallback.ts"],"names":["useMemo","useDrawCallback","callback","deps"],"mappings":"AACA,SAASA,OAAT,QAAwB,OAAxB;;AAIA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAG,UAC7BC,QAD6B,EAG1B;AAAA,MADHC,IACG,uEADoB,EACpB;AACH,SAAOH,OAAO,CAAC,MAAM;AACnB,WAAOE,QAAP,CADmB,CAEnB;AACD,GAHa,EAGXC,IAHW,CAAd;AAID,CARM","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport type { RNSkiaDrawCallback } from \"./types\";\n\n/**\n * Creates a memoized callback for the onDraw handler of a Skia component.\n * @param callback The callback to memoize.\n * @param deps Dependencies for the callback.\n * */\nexport const useDrawCallback = (\n  callback: RNSkiaDrawCallback,\n  deps: DependencyList = []\n) => {\n  return useMemo(() => {\n    return callback;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n"]}

package/lib/module/views/useTouchHandler.js

@@ -0,0 +1,64 @@
+import { useCallback, useRef } from "react";
+import { PixelRatio } from "react-native";
+import { TouchType } from "./types";
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler only handles single taps.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+
+export const useTouchHandler = function (handlers) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const prevTouchInfoRef = useRef();
+  const prevVelocityRef = useRef({
+    x: 0,
+    y: 0
+  });
+  return useCallback(history => {
+    // Process all items in the current touch history
+    history.forEach(touches => {
+      var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouchInfoRef$cur3, _prevTouchInfoRef$cur4, _prevTouchInfoRef$cur5, _prevTouchInfoRef$cur6;
+
+      if (touches.length === 0) {
+        return;
+      } // Get the next touch
+
+
+      const touch = touches[0]; // Calculate the velocity from the previous touch.
+
+      const timeDiffseconds = touch.timestamp - ((_prevTouchInfoRef$cur = (_prevTouchInfoRef$cur2 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
+      const distX = touch.x - ((_prevTouchInfoRef$cur3 = (_prevTouchInfoRef$cur4 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur4 === void 0 ? void 0 : _prevTouchInfoRef$cur4.x) !== null && _prevTouchInfoRef$cur3 !== void 0 ? _prevTouchInfoRef$cur3 : touch.x);
+      const distY = touch.y - ((_prevTouchInfoRef$cur5 = (_prevTouchInfoRef$cur6 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur6 === void 0 ? void 0 : _prevTouchInfoRef$cur6.y) !== null && _prevTouchInfoRef$cur5 !== void 0 ? _prevTouchInfoRef$cur5 : touch.y);
+
+      if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled) {
+        if (timeDiffseconds > 0) {
+          prevVelocityRef.current.x = distX / timeDiffseconds / PixelRatio.get();
+          prevVelocityRef.current.y = distY / timeDiffseconds / PixelRatio.get();
+        }
+      }
+
+      const extendedTouchInfo = { ...touch,
+        velocityX: prevVelocityRef.current.x,
+        velocityY: prevVelocityRef.current.y
+      }; // Save previous touch
+
+      prevTouchInfoRef.current = touch;
+
+      if (touch.type === TouchType.Start) {
+        prevVelocityRef.current.x = 0;
+        prevVelocityRef.current.y = 0;
+        handlers.onStart && handlers.onStart(touch);
+      } else if (touch.type === TouchType.Active) {
+        handlers.onActive && handlers.onActive(extendedTouchInfo);
+      } else {
+        handlers.onActive && handlers.onActive(extendedTouchInfo);
+        handlers.onEnd && handlers.onEnd(extendedTouchInfo);
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};
+//# sourceMappingURL=useTouchHandler.js.map

package/lib/module/views/useTouchHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useTouchHandler","handlers","deps","prevTouchInfoRef","prevVelocityRef","x","y","history","forEach","touches","length","touch","timeDiffseconds","timestamp","current","distX","distY","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single taps.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<TouchInfo>();\n  const prevVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      if (touches.length === 0) {\n        return;\n      }\n      // Get the next touch\n      const touch = touches[0];\n\n      // Calculate the velocity from the previous touch.\n      const timeDiffseconds =\n        touch.timestamp -\n        (prevTouchInfoRef.current?.timestamp ?? touch.timestamp);\n\n      const distX = touch.x - (prevTouchInfoRef.current?.x ?? touch.x);\n      const distY = touch.y - (prevTouchInfoRef.current?.y ?? touch.y);\n\n      if (\n        touch.type !== TouchType.Start &&\n        touch.type !== TouchType.End &&\n        touch.type !== TouchType.Cancelled\n      ) {\n        if (timeDiffseconds > 0) {\n          prevVelocityRef.current.x =\n            distX / timeDiffseconds / PixelRatio.get();\n          prevVelocityRef.current.y =\n            distY / timeDiffseconds / PixelRatio.get();\n        }\n      }\n\n      const extendedTouchInfo: ExtendedTouchInfo = {\n        ...touch,\n        velocityX: prevVelocityRef.current.x,\n        velocityY: prevVelocityRef.current.y,\n      };\n\n      // Save previous touch\n      prevTouchInfoRef.current = touch;\n\n      if (touch.type === TouchType.Start) {\n        prevVelocityRef.current.x = 0;\n        prevVelocityRef.current.y = 0;\n        handlers.onStart && handlers.onStart(touch);\n      } else if (touch.type === TouchType.Active) {\n        handlers.onActive && handlers.onActive(extendedTouchInfo);\n      } else {\n        handlers.onActive && handlers.onActive(extendedTouchInfo);\n        handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n"]}

package/lib/typescript/index.d.ts

@@ -0,0 +1 @@
+export * from "./src";

package/lib/typescript/scripts/install-npm.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export * from "./reanimated";

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

@@ -0,0 +1 @@
+export * from "./useSharedValueEffect";

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

@@ -0,0 +1,11 @@
+declare type SharedValueTypeWrapper<T = number> = {
+    value: T;
+};
+/**
+ * Connects a shared value from reanimated to a SkiaView or Canvas
+ * so whenever the shared value changes the SkiaView will redraw.
+ * @param cb Callback that will be called whenever the shared value changes.
+ * @param values One or more shared values to listen for.
+ */
+export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueTypeWrapper<T>, ...values: SharedValueTypeWrapper<T>[]) => void;
+export {};

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

@@ -0,0 +1,6 @@
+import "./skia/NativeSetup";
+export * from "./renderer";
+export * from "./views";
+export * from "./skia";
+export * from "./external";
+export * from "./values";

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { RefObject, ReactNode, ComponentProps, Context } from "react";
+import ReactReconciler from "react-reconciler";
+import { SkiaView } from "../views";
+import type { TouchHandler } from "../views";
+import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import { Container } from "./nodes";
+export declare const useContextBridge: (...contexts: Context<any>[]) => ({ children }: {
+    children: ReactNode;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+interface CanvasContext {
+    width: number;
+    height: number;
+}
+declare const CanvasContext: React.Context<CanvasContext | null>;
+export declare const useCanvas: () => CanvasContext;
+export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>>;
+export declare const useCanvasRef: () => React.RefObject<SkiaView>;
+export interface CanvasProps extends ComponentProps<typeof SkiaView> {
+    ref?: RefObject<SkiaView>;
+    children: ReactNode;
+    onTouch?: TouchHandler;
+    fontMgr?: FontMgr;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "mode" | "debug" | "onDraw" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;
+export {};

package/lib/typescript/src/renderer/DependencyManager.d.ts

@@ -0,0 +1,21 @@
+import type { RefObject } from "react";
+import type { SkiaView } from "../views";
+import type { SkiaReadonlyValue } from "../values";
+import type { Node } from "./nodes";
+declare type Unsubscribe = () => void;
+declare type Props = {
+    [key: string]: unknown;
+};
+export declare class DependencyManager {
+    ref: RefObject<SkiaView>;
+    subscriptions: Map<Node, {
+        values: SkiaReadonlyValue<unknown>[];
+        unsubscribe: null | Unsubscribe;
+    }>;
+    constructor(ref: RefObject<SkiaView>);
+    unSubscribeNode(node: Node): void;
+    subscribeNode(node: Node, props: Props): void;
+    subscribe(): void;
+    unsubscribe(): void;
+}
+export {};

package/lib/typescript/src/renderer/DrawingContext.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+import type { DrawingInfo, SkiaView } from "../views";
+import type { SkCanvas, SkPaint } from "../skia";
+import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import type { Vector } from "./processors/math/Vector";
+export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
+    canvas: SkCanvas;
+    paint: SkPaint;
+    opacity: number;
+    center: Vector;
+    ref: RefObject<SkiaView>;
+    fontMgr: FontMgr;
+}

package/lib/typescript/src/renderer/HostConfig.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="node" />
+import type { HostConfig } from "react-reconciler";
+import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
+import { NodeType } from "./nodes";
+export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            skDeclaration: DeclarationProps<any>;
+            skDrawing: DrawingProps<any>;
+        }
+    }
+}
+declare type Instance = Node;
+declare type Props = any;
+declare type TextInstance = Node;
+declare type SuspenseInstance = Instance;
+declare type HydratableInstance = Instance;
+declare type PublicInstance = Instance;
+declare type HostContext = null;
+declare type UpdatePayload = true;
+declare type ChildSet = unknown;
+declare type TimeoutHandle = NodeJS.Timeout;
+declare type NoTimeout = -1;
+declare type SkiaHostConfig = HostConfig<NodeType, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout>;
+export declare const skHostConfig: SkiaHostConfig;
+export {};

package/lib/typescript/src/renderer/components/Blend.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { BlendMode } from "../../skia";
+import type { AnimatedProps, SkEnum } from "../processors";
+interface BlendProps {
+    mode: SkEnum<typeof BlendMode>;
+    children?: ReactNode | ReactNode[];
+}
+export declare const Blend: (props: AnimatedProps<BlendProps>) => JSX.Element;
+export {};

package/lib/typescript/src/renderer/components/Compose.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { AnimatedProps } from "../processors/Animations/Animations";
+export interface ComposeProps {
+    children: ReactNode | ReactNode[];
+}
+export declare const Compose: (props: AnimatedProps<ComposeProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/Defs.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export interface DefsProps {
+    children: ReactNode | ReactNode[];
+}
+export declare const Defs: (props: DefsProps) => JSX.Element;

package/lib/typescript/src/renderer/components/Group.d.ts

@@ -0,0 +1,9 @@
+import type { RefObject } from "react";
+import type { SkPaint } from "../../skia";
+import type { CustomPaintProps, TransformProps, AnimatedProps, ClipDef } from "../processors";
+export interface GroupProps extends CustomPaintProps, TransformProps {
+    clip?: ClipDef;
+    invertClip?: boolean;
+    layer?: RefObject<SkPaint> | SkPaint | boolean;
+}
+export declare const Group: (props: AnimatedProps<GroupProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/Mask.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+interface MaskProps {
+    mode: "luminance" | "alpha";
+    clip: boolean;
+    mask: ReactNode | ReactNode[];
+    children: ReactNode | ReactNode[];
+}
+export declare const Mask: {
+    ({ children, mask, mode, clip }: MaskProps): JSX.Element;
+    defaultProps: {
+        mode: string;
+        clip: boolean;
+    };
+};
+export {};

package/lib/typescript/src/renderer/components/Paint.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import React from "react";
+import type { SkPaint } from "../../skia";
+import type { CustomPaintProps, AnimatedProps } from "../processors";
+export declare const usePaintRef: () => React.RefObject<SkPaint>;
+export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
+    children?: ReactNode | ReactNode[];
+}
+export declare const Paint: React.ForwardRefExoticComponent<AnimatedProps<PaintProps> & React.RefAttributes<SkPaint>>;

package/lib/typescript/src/renderer/components/backdrop/BackdropBlur.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AnimatedProps, Radius } from "../../processors";
+import type { BackdropFilterProps } from "./BackdropFilter";
+interface BackdropBlurProps extends Omit<BackdropFilterProps, "filter"> {
+    blur: Radius;
+}
+export declare const BackdropBlur: ({ blur, children, ...props }: AnimatedProps<BackdropBlurProps>) => JSX.Element;
+export {};

package/lib/typescript/src/renderer/components/backdrop/BackdropFilter.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { AnimatedProps } from "../../processors";
+import type { GroupProps } from "../Group";
+export interface BackdropFilterProps extends GroupProps {
+    filter: ReactNode | ReactNode[];
+}
+export declare const BackdropFilter: ({ filter: filterChild, children: groupChildren, ...props }: AnimatedProps<BackdropFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BackdropFilter";
+export * from "./BackdropBlur";

package/lib/typescript/src/renderer/components/colorFilters/BlendColor.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { BlendMode } from "../../../skia";
+import type { SkEnum, AnimatedProps } from "../../processors";
+import type { Color } from "../../../skia";
+export interface BlendColorProps {
+    mode: SkEnum<typeof BlendMode>;
+    color: Color;
+    children?: ReactNode | ReactNode[];
+}
+export declare const BlendColor: (props: AnimatedProps<BlendColorProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/Compose.d.ts

@@ -0,0 +1,3 @@
+import type { SkColorFilter } from "../../../skia";
+import type { DeclarationResult } from "../../nodes";
+export declare const composeColorFilter: (cf: SkColorFilter, children: DeclarationResult[]) => import("../../../skia").SkImageFilter | SkColorFilter;

package/lib/typescript/src/renderer/components/colorFilters/Lerp.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+export interface LerpProps {
+    t: number;
+    children: ReactNode | ReactNode[];
+}
+export declare const Lerp: (props: AnimatedProps<LerpProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/LinearToSRGBGamma.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+export interface LinearToSRGBGammaProps {
+}
+export declare const LinearToSRGBGamma: (props: AnimatedProps<LinearToSRGBGammaProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/LumaColorFilter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+export interface LumaColorFilterProps {
+}
+export declare const LumaColorFilter: (props: AnimatedProps<LumaColorFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/Matrix.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { AnimatedProps } from "../../processors";
+interface ColorMatrixProps {
+    matrix: number[];
+    children?: ReactNode | ReactNode[];
+}
+export declare const ColorMatrix: (props: AnimatedProps<ColorMatrixProps>) => JSX.Element;
+export declare const OpacityMatrix: (opacity: number) => number[];
+export {};

package/lib/typescript/src/renderer/components/colorFilters/SRGBToLinearGamma.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+export interface SRGBToLinearGammaProps {
+}
+export declare const SRGBToLinearGamma: (props: AnimatedProps<SRGBToLinearGammaProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Matrix";
+export * from "./BlendColor";
+export * from "./Lerp";
+export * from "./LinearToSRGBGamma";
+export * from "./SRGBToLinearGamma";
+export * from "./LumaColorFilter";

package/lib/typescript/src/renderer/components/image/BoxFit.d.ts

@@ -0,0 +1,23 @@
+import type { SkRect } from "../../../skia";
+export declare type Fit = "cover" | "contain" | "fill" | "fitHeight" | "fitWidth" | "none" | "scaleDown";
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare const size: (width?: number, height?: number) => {
+    width: number;
+    height: number;
+};
+export declare const rect2rect: (src: SkRect, dst: SkRect) => readonly [{
+    readonly translateX: number;
+}, {
+    readonly translateY: number;
+}, {
+    readonly scaleX: number;
+}, {
+    readonly scaleY: number;
+}];
+export declare const fitRects: (fit: Fit, rect: SkRect, { x, y, width, height }: SkRect) => {
+    src: SkRect;
+    dst: SkRect;
+};

package/lib/typescript/src/renderer/components/image/Image.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { SkImage } from "../../../skia";
+import type { CustomPaintProps, RectDef, AnimatedProps } from "../../processors";
+import type { Fit } from "./BoxFit";
+export declare type SourceImageProps = {
+    image: SkImage;
+};
+export declare type BaseImageProps = RectDef & SourceImageProps & {
+    fit: Fit;
+};
+export declare type ImageProps = CustomPaintProps & BaseImageProps;
+export declare const Image: {
+    (props: AnimatedProps<ImageProps>): JSX.Element;
+    defaultProps: {
+        x: number;
+        y: number;
+        fit: string;
+    };
+};

package/lib/typescript/src/renderer/components/image/ImageSVG.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SkSVG } from "../../../skia";
+import type { AnimatedProps, RectDef } from "../../processors";
+export declare type ImageSVGProps = RectDef & {
+    svg: SkSVG;
+};
+export declare const ImageSVG: (props: AnimatedProps<ImageSVGProps>) => JSX.Element;