@shopify/react-native-skia 1.11.6 → 1.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/renderer/Canvas.d.ts +3 -2
- package/lib/commonjs/renderer/Canvas.js +4 -2
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/module/renderer/Canvas.js +1 -1
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/typescript/lib/commonjs/renderer/Canvas.d.ts +2 -3
- package/lib/typescript/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/typescript/src/renderer/Canvas.d.ts +3 -2
- package/package.json +1 -1
- package/src/renderer/Canvas.tsx +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
|
@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useCanvasRef = exports.Canvas = void 0;
|
|
7
|
-
var _react = require("react");
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
|
|
9
9
|
var _SkiaPictureViewNativeComponent = _interopRequireDefault(require("../specs/SkiaPictureViewNativeComponent"));
|
|
10
10
|
var _Reconciler = require("../sksg/Reconciler");
|
|
11
11
|
var _skia = require("../skia");
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
15
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
16
|
const useCanvasRef = () => (0, _react.useRef)(null);
|
|
15
17
|
exports.useCanvasRef = useCanvasRef;
|
|
@@ -95,7 +97,7 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
95
97
|
return nativeId;
|
|
96
98
|
}
|
|
97
99
|
}));
|
|
98
|
-
return /*#__PURE__*/
|
|
100
|
+
return /*#__PURE__*/_react.default.createElement(NativeSkiaPictureView, _extends({
|
|
99
101
|
collapsable: false,
|
|
100
102
|
nativeID: `${nativeId}`,
|
|
101
103
|
debug: debug,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","NativeSkiaPictureView","SkiaPictureViewNativeComponent","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\ninterface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n console.warn(\"The `mode` property in `Canvas` is deprecated.\");\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
-
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
2
|
+
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
3
3
|
import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
|
|
4
4
|
import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
|
|
5
5
|
import { SkiaSGRoot } from "../sksg/Reconciler";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","useCanvasRef","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","console","warn","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\ninterface CanvasRef extends FC<CanvasProps> {\n makeImageSnapshot(rect?: SkRect): SkImage;\n makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n redraw(): void;\n getNativeId(): number;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n console.warn(\"The `mode` property in `Canvas` is deprecated.\");\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n SkiaViewApi.requestRedraw(nativeId);\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export const __esModule: boolean;
|
|
2
|
-
export const Canvas:
|
|
3
|
-
export function useCanvasRef():
|
|
4
|
-
import _react = require("react");
|
|
2
|
+
export const Canvas: any;
|
|
3
|
+
export function useCanvasRef(): any;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export function useCanvasRef():
|
|
2
|
-
export const Canvas:
|
|
1
|
+
export function useCanvasRef(): React.MutableRefObject<null>;
|
|
2
|
+
export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
|
3
|
+
import React from "react";
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
|
+
import React from "react";
|
|
2
3
|
import type { ViewProps } from "react-native";
|
|
3
4
|
import type { SharedValue } from "react-native-reanimated";
|
|
4
5
|
import type { SkImage, SkRect, SkSize } from "../skia/types";
|
|
@@ -8,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
|
|
|
8
9
|
redraw(): void;
|
|
9
10
|
getNativeId(): number;
|
|
10
11
|
}
|
|
11
|
-
export declare const useCanvasRef: () =>
|
|
12
|
+
export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
|
|
12
13
|
export interface CanvasProps extends ViewProps {
|
|
13
14
|
debug?: boolean;
|
|
14
15
|
opaque?: boolean;
|
|
15
16
|
onSize?: SharedValue<SkSize>;
|
|
16
17
|
mode?: "continuous" | "default";
|
|
17
18
|
}
|
|
18
|
-
export declare const Canvas:
|
|
19
|
+
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
|
19
20
|
export {};
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"setup-skia-web": "./scripts/setup-canvaskit.js"
|
|
9
9
|
},
|
|
10
10
|
"title": "React Native Skia",
|
|
11
|
-
"version": "1.11.
|
|
11
|
+
"version": "1.11.7",
|
|
12
12
|
"description": "High-performance React Native Graphics using Skia",
|
|
13
13
|
"main": "lib/module/index.js",
|
|
14
14
|
"react-native": "src/index.ts",
|
package/src/renderer/Canvas.tsx
CHANGED