@shopify/react-native-skia 0.1.136 → 0.1.139

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.
Files changed (195) hide show
  1. package/README.md +4 -47
  2. package/android/build.gradle +1 -2
  3. package/cpp/api/JsiSkApi.h +0 -4
  4. package/cpp/api/JsiSkFont.h +0 -19
  5. package/cpp/api/JsiSkMatrix.h +12 -0
  6. package/cpp/api/JsiSkTypeface.h +1 -29
  7. package/lib/commonjs/mock/index.js +0 -4
  8. package/lib/commonjs/mock/index.js.map +1 -1
  9. package/lib/commonjs/renderer/Canvas.js +5 -8
  10. package/lib/commonjs/renderer/Canvas.js.map +1 -1
  11. package/lib/commonjs/renderer/components/Group.js +1 -1
  12. package/lib/commonjs/renderer/components/Group.js.map +1 -1
  13. package/lib/commonjs/renderer/components/text/Glyphs.js +4 -6
  14. package/lib/commonjs/renderer/components/text/Glyphs.js.map +1 -1
  15. package/lib/commonjs/renderer/components/text/Text.js +4 -6
  16. package/lib/commonjs/renderer/components/text/Text.js.map +1 -1
  17. package/lib/commonjs/renderer/components/text/TextPath.js +3 -4
  18. package/lib/commonjs/renderer/components/text/TextPath.js.map +1 -1
  19. package/lib/commonjs/renderer/processors/Font.js +1 -27
  20. package/lib/commonjs/renderer/processors/Font.js.map +1 -1
  21. package/lib/commonjs/renderer/processors/Transform.js +8 -15
  22. package/lib/commonjs/renderer/processors/Transform.js.map +1 -1
  23. package/lib/commonjs/skia/core/Data.js +3 -1
  24. package/lib/commonjs/skia/core/Data.js.map +1 -1
  25. package/lib/commonjs/skia/core/Image.js +4 -1
  26. package/lib/commonjs/skia/core/Image.js.map +1 -1
  27. package/lib/commonjs/skia/core/SVG.js +3 -1
  28. package/lib/commonjs/skia/core/SVG.js.map +1 -1
  29. package/lib/commonjs/skia/core/Typeface.js +4 -1
  30. package/lib/commonjs/skia/core/Typeface.js.map +1 -1
  31. package/lib/commonjs/skia/core/index.js +0 -26
  32. package/lib/commonjs/skia/core/index.js.map +1 -1
  33. package/lib/commonjs/skia/types/Font/Font.js.map +1 -1
  34. package/lib/commonjs/skia/types/Matrix.js +18 -3
  35. package/lib/commonjs/skia/types/Matrix.js.map +1 -1
  36. package/lib/commonjs/skia/types/index.js +0 -13
  37. package/lib/commonjs/skia/types/index.js.map +1 -1
  38. package/lib/commonjs/skia/web/JsiSkFont.js +0 -6
  39. package/lib/commonjs/skia/web/JsiSkFont.js.map +1 -1
  40. package/lib/commonjs/skia/web/JsiSkMatrix.js +4 -0
  41. package/lib/commonjs/skia/web/JsiSkMatrix.js.map +1 -1
  42. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js +1 -1
  43. package/lib/commonjs/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  44. package/lib/commonjs/skia/web/JsiSkia.js +0 -3
  45. package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
  46. package/lib/commonjs/values/hooks/useComputedValue.js +1 -8
  47. package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
  48. package/lib/commonjs/views/SkiaView.web.js +67 -57
  49. package/lib/commonjs/views/SkiaView.web.js.map +1 -1
  50. package/lib/commonjs/web/LoadSkiaWeb.js +29 -0
  51. package/lib/commonjs/web/LoadSkiaWeb.js.map +1 -0
  52. package/lib/commonjs/web/WithSkiaWeb.js +39 -0
  53. package/lib/commonjs/web/WithSkiaWeb.js.map +1 -0
  54. package/lib/commonjs/web/index.js +22 -12
  55. package/lib/commonjs/web/index.js.map +1 -1
  56. package/lib/module/mock/index.js +0 -4
  57. package/lib/module/mock/index.js.map +1 -1
  58. package/lib/module/renderer/Canvas.js +5 -6
  59. package/lib/module/renderer/Canvas.js.map +1 -1
  60. package/lib/module/renderer/components/Group.js +1 -1
  61. package/lib/module/renderer/components/Group.js.map +1 -1
  62. package/lib/module/renderer/components/text/Glyphs.js +4 -5
  63. package/lib/module/renderer/components/text/Glyphs.js.map +1 -1
  64. package/lib/module/renderer/components/text/Text.js +4 -5
  65. package/lib/module/renderer/components/text/Text.js.map +1 -1
  66. package/lib/module/renderer/components/text/TextPath.js +3 -3
  67. package/lib/module/renderer/components/text/TextPath.js.map +1 -1
  68. package/lib/module/renderer/processors/Font.js +0 -23
  69. package/lib/module/renderer/processors/Font.js.map +1 -1
  70. package/lib/module/renderer/processors/Transform.js +8 -15
  71. package/lib/module/renderer/processors/Transform.js.map +1 -1
  72. package/lib/module/skia/core/Data.js +3 -1
  73. package/lib/module/skia/core/Data.js.map +1 -1
  74. package/lib/module/skia/core/Image.js +2 -1
  75. package/lib/module/skia/core/Image.js.map +1 -1
  76. package/lib/module/skia/core/SVG.js +2 -1
  77. package/lib/module/skia/core/SVG.js.map +1 -1
  78. package/lib/module/skia/core/Typeface.js +2 -1
  79. package/lib/module/skia/core/Typeface.js.map +1 -1
  80. package/lib/module/skia/core/index.js +0 -2
  81. package/lib/module/skia/core/index.js.map +1 -1
  82. package/lib/module/skia/types/Font/Font.js.map +1 -1
  83. package/lib/module/skia/types/Matrix.js +12 -2
  84. package/lib/module/skia/types/Matrix.js.map +1 -1
  85. package/lib/module/skia/types/index.js +0 -1
  86. package/lib/module/skia/types/index.js.map +1 -1
  87. package/lib/module/skia/web/JsiSkFont.js +0 -6
  88. package/lib/module/skia/web/JsiSkFont.js.map +1 -1
  89. package/lib/module/skia/web/JsiSkMatrix.js +4 -0
  90. package/lib/module/skia/web/JsiSkMatrix.js.map +1 -1
  91. package/lib/module/skia/web/JsiSkTextBlobFactory.js +1 -1
  92. package/lib/module/skia/web/JsiSkTextBlobFactory.js.map +1 -1
  93. package/lib/module/skia/web/JsiSkia.js +0 -2
  94. package/lib/module/skia/web/JsiSkia.js.map +1 -1
  95. package/lib/module/values/hooks/useComputedValue.js +0 -4
  96. package/lib/module/values/hooks/useComputedValue.js.map +1 -1
  97. package/lib/module/views/SkiaView.web.js +67 -58
  98. package/lib/module/views/SkiaView.web.js.map +1 -1
  99. package/lib/module/web/LoadSkiaWeb.js +16 -0
  100. package/lib/module/web/LoadSkiaWeb.js.map +1 -0
  101. package/lib/module/web/WithSkiaWeb.js +23 -0
  102. package/lib/module/web/WithSkiaWeb.js.map +1 -0
  103. package/lib/module/web/index.js +2 -9
  104. package/lib/module/web/index.js.map +1 -1
  105. package/lib/typescript/src/renderer/Canvas.d.ts +1 -3
  106. package/lib/typescript/src/renderer/DrawingContext.d.ts +1 -2
  107. package/lib/typescript/src/renderer/processors/Font.d.ts +1 -5
  108. package/lib/typescript/src/renderer/processors/Transform.d.ts +2 -2
  109. package/lib/typescript/src/skia/core/index.d.ts +0 -2
  110. package/lib/typescript/src/skia/types/Font/Font.d.ts +0 -12
  111. package/lib/typescript/src/skia/types/Matrix.d.ts +6 -2
  112. package/lib/typescript/src/skia/types/Skia.d.ts +0 -2
  113. package/lib/typescript/src/skia/types/Typeface/Typeface.d.ts +1 -4
  114. package/lib/typescript/src/skia/types/index.d.ts +0 -1
  115. package/lib/typescript/src/skia/web/JsiSkFont.d.ts +1 -2
  116. package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts +1 -0
  117. package/lib/typescript/src/values/hooks/useComputedValue.d.ts +0 -1
  118. package/lib/typescript/src/views/SkiaView.web.d.ts +9 -11
  119. package/lib/typescript/src/web/LoadSkiaWeb.d.ts +6 -0
  120. package/lib/typescript/src/web/WithSkiaWeb.d.ts +12 -0
  121. package/lib/typescript/src/web/index.d.ts +2 -5
  122. package/package.json +5 -1
  123. package/scripts/setup-canvaskit.js +74 -0
  124. package/src/mock/index.ts +0 -4
  125. package/src/renderer/Canvas.tsx +5 -8
  126. package/src/renderer/DrawingContext.ts +1 -2
  127. package/src/renderer/components/Group.tsx +1 -1
  128. package/src/renderer/components/text/Glyphs.tsx +2 -6
  129. package/src/renderer/components/text/Text.tsx +2 -3
  130. package/src/renderer/components/text/TextPath.tsx +2 -3
  131. package/src/renderer/processors/Font.ts +2 -25
  132. package/src/renderer/processors/Transform.ts +7 -10
  133. package/src/skia/core/Data.ts +3 -1
  134. package/src/skia/core/Image.ts +3 -1
  135. package/src/skia/core/SVG.ts +3 -1
  136. package/src/skia/core/Typeface.ts +4 -6
  137. package/src/skia/core/index.ts +0 -2
  138. package/src/skia/types/Font/Font.ts +0 -13
  139. package/src/skia/types/Matrix.ts +19 -3
  140. package/src/skia/types/Skia.ts +0 -2
  141. package/src/skia/types/Typeface/Typeface.ts +1 -4
  142. package/src/skia/types/index.ts +0 -1
  143. package/src/skia/web/JsiSkFont.ts +0 -9
  144. package/src/skia/web/JsiSkMatrix.ts +4 -0
  145. package/src/skia/web/JsiSkTextBlobFactory.ts +1 -1
  146. package/src/skia/web/JsiSkia.ts +0 -2
  147. package/src/values/hooks/useComputedValue.ts +0 -5
  148. package/src/views/SkiaView.web.tsx +55 -70
  149. package/src/web/LoadSkiaWeb.tsx +24 -0
  150. package/src/web/WithSkiaWeb.tsx +37 -0
  151. package/src/web/index.ts +2 -15
  152. package/cpp/api/JsiSkFontMgr.h +0 -84
  153. package/cpp/api/JsiSkFontMgrFactory.h +0 -48
  154. package/lib/commonjs/skia/core/Paint.js +0 -28
  155. package/lib/commonjs/skia/core/Paint.js.map +0 -1
  156. package/lib/commonjs/skia/core/Path.js +0 -72
  157. package/lib/commonjs/skia/core/Path.js.map +0 -1
  158. package/lib/commonjs/skia/types/FontMgr/FontMgr.js +0 -6
  159. package/lib/commonjs/skia/types/FontMgr/FontMgr.js.map +0 -1
  160. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js +0 -6
  161. package/lib/commonjs/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  162. package/lib/commonjs/skia/types/FontMgr/index.js +0 -32
  163. package/lib/commonjs/skia/types/FontMgr/index.js.map +0 -1
  164. package/lib/commonjs/skia/web/JsiSkFontMgr.js +0 -33
  165. package/lib/commonjs/skia/web/JsiSkFontMgr.js.map +0 -1
  166. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js +0 -25
  167. package/lib/commonjs/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  168. package/lib/module/skia/core/Paint.js +0 -17
  169. package/lib/module/skia/core/Paint.js.map +0 -1
  170. package/lib/module/skia/core/Path.js +0 -53
  171. package/lib/module/skia/core/Path.js.map +0 -1
  172. package/lib/module/skia/types/FontMgr/FontMgr.js +0 -2
  173. package/lib/module/skia/types/FontMgr/FontMgr.js.map +0 -1
  174. package/lib/module/skia/types/FontMgr/FontMgrFactory.js +0 -2
  175. package/lib/module/skia/types/FontMgr/FontMgrFactory.js.map +0 -1
  176. package/lib/module/skia/types/FontMgr/index.js +0 -3
  177. package/lib/module/skia/types/FontMgr/index.js.map +0 -1
  178. package/lib/module/skia/web/JsiSkFontMgr.js +0 -23
  179. package/lib/module/skia/web/JsiSkFontMgr.js.map +0 -1
  180. package/lib/module/skia/web/JsiSkFontMgrFactory.js +0 -14
  181. package/lib/module/skia/web/JsiSkFontMgrFactory.js.map +0 -1
  182. package/lib/typescript/src/skia/core/Paint.d.ts +0 -6
  183. package/lib/typescript/src/skia/core/Path.d.ts +0 -21
  184. package/lib/typescript/src/skia/types/FontMgr/FontMgr.d.ts +0 -18
  185. package/lib/typescript/src/skia/types/FontMgr/FontMgrFactory.d.ts +0 -4
  186. package/lib/typescript/src/skia/types/FontMgr/index.d.ts +0 -2
  187. package/lib/typescript/src/skia/web/JsiSkFontMgr.d.ts +0 -9
  188. package/lib/typescript/src/skia/web/JsiSkFontMgrFactory.d.ts +0 -8
  189. package/src/skia/core/Paint.ts +0 -22
  190. package/src/skia/core/Path.ts +0 -60
  191. package/src/skia/types/FontMgr/FontMgr.ts +0 -24
  192. package/src/skia/types/FontMgr/FontMgrFactory.ts +0 -12
  193. package/src/skia/types/FontMgr/index.ts +0 -2
  194. package/src/skia/web/JsiSkFontMgr.ts +0 -38
  195. package/src/skia/web/JsiSkFontMgrFactory.ts +0 -18
@@ -2,7 +2,7 @@
2
2
  import React from "react";
3
3
  import type { PointerEvent } from "react";
4
4
  import type { LayoutChangeEvent } from "react-native";
5
- import { View } from "react-native";
5
+ import { PixelRatio, View } from "react-native";
6
6
 
7
7
  import type { SkRect, SkCanvas } from "../skia/types";
8
8
  import type { SkiaValue } from "../values";
@@ -11,13 +11,11 @@ import { JsiSkSurface } from "../skia/web/JsiSkSurface";
11
11
  import type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from "./types";
12
12
  import { TouchType } from "./types";
13
13
 
14
- export class SkiaView extends React.Component<
15
- SkiaViewProps,
16
- { width: number; height: number }
17
- > {
14
+ const pd = PixelRatio.get();
15
+
16
+ export class SkiaView extends React.Component<SkiaViewProps> {
18
17
  constructor(props: SkiaViewProps) {
19
18
  super(props);
20
- this.state = { width: -1, height: -1 };
21
19
  this._mode = props.mode ?? "default";
22
20
  }
23
21
 
@@ -25,10 +23,12 @@ export class SkiaView extends React.Component<
25
23
  private _unsubscriptions: Array<() => void> = [];
26
24
  private _touches: Array<TouchInfo> = [];
27
25
  private _canvas: SkCanvas | null = null;
28
- private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();
26
+ private _canvasRef = React.createRef<HTMLCanvasElement>();
29
27
  private _mode: DrawMode;
30
28
  private _redrawRequests = 0;
31
- private _unmounted = false;
29
+ private width = 0;
30
+ private height = 0;
31
+ private requestId = 0;
32
32
 
33
33
  private unsubscribeAll() {
34
34
  this._unsubscriptions.forEach((u) => u());
@@ -36,39 +36,37 @@ export class SkiaView extends React.Component<
36
36
  }
37
37
 
38
38
  private onLayout(evt: LayoutChangeEvent) {
39
- this.setState(
40
- {
41
- width: evt.nativeEvent.layout.width,
42
- height: evt.nativeEvent.layout.height,
43
- },
44
- () => {
45
- // Reset canvas / surface on layout change
46
- if (this._canvasRef.current) {
47
- // Create surface
48
- this._surface = new JsiSkSurface(
49
- global.CanvasKit,
50
- global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!
51
- );
52
- // Get canvas and repaint
53
- if (this._surface) {
54
- this._canvas = this._surface.getCanvas();
55
- this.requestRedraw();
56
- }
57
- }
39
+ const { CanvasKit } = global;
40
+ const { width, height } = evt.nativeEvent.layout;
41
+ this.width = width;
42
+ this.height = height;
43
+ // Reset canvas / surface on layout change
44
+ if (this._canvasRef.current) {
45
+ const canvas = this._canvasRef.current;
46
+ canvas.width = canvas.clientWidth * pd;
47
+ canvas.height = canvas.clientHeight * pd;
48
+ const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
49
+ if (!surface) {
50
+ throw new Error("Could not create surface");
58
51
  }
59
- );
52
+ this._surface = new JsiSkSurface(CanvasKit, surface);
53
+ this._canvas = this._surface.getCanvas();
54
+ this.redraw();
55
+ }
60
56
  }
61
57
 
62
58
  componentDidMount() {
63
59
  // Start render loop
60
+ this.tick();
61
+ }
62
+
63
+ componentDidUpdate() {
64
64
  this.redraw();
65
65
  }
66
66
 
67
67
  componentWillUnmount() {
68
68
  this.unsubscribeAll();
69
- this._surface = null;
70
- this._canvas = null;
71
- this._unmounted = true;
69
+ cancelAnimationFrame(this.requestId);
72
70
  }
73
71
 
74
72
  /**
@@ -83,34 +81,32 @@ export class SkiaView extends React.Component<
83
81
  /**
84
82
  * Sends a redraw request to the native SkiaView.
85
83
  */
86
- private redraw() {
84
+ private tick() {
87
85
  if (this._mode === "continuous" || this._redrawRequests > 0) {
88
86
  this._redrawRequests = 0;
89
- if (
90
- this._canvas &&
91
- this.props.onDraw &&
92
- this.state.height !== -1 &&
93
- this.state.width !== -1
94
- ) {
87
+ if (this._canvas && this.props.onDraw) {
95
88
  const touches = [...this._touches];
96
89
  this._touches = [];
97
90
  const info: DrawingInfo = {
98
- height: this.state.height,
99
- width: this.state.width,
91
+ height: this.height,
92
+ width: this.width,
100
93
  timestamp: Date.now(),
101
- touches: [touches],
94
+ touches: touches.map((t) => [t]),
102
95
  };
103
- this.props.onDraw && this.props.onDraw(this._canvas!, info);
96
+ if (this.props.onDraw) {
97
+ const canvas = this._canvas!;
98
+ canvas.save();
99
+ canvas.scale(pd, pd);
100
+ this.props.onDraw(canvas, info);
101
+ canvas.restore();
102
+ }
104
103
  this._surface?.ref.flush();
105
104
  }
106
105
  }
107
- // Always request a new redraw as long as we're not unmounted
108
- if (!this._unmounted) {
109
- requestAnimationFrame(this.redraw.bind(this));
110
- }
106
+ this.requestId = requestAnimationFrame(this.tick.bind(this));
111
107
  }
112
108
 
113
- public requestRedraw() {
109
+ public redraw() {
114
110
  this._redrawRequests++;
115
111
  }
116
112
 
@@ -125,7 +121,7 @@ export class SkiaView extends React.Component<
125
121
  */
126
122
  public setDrawMode(mode: DrawMode) {
127
123
  this._mode = mode;
128
- this.redraw();
124
+ this.tick();
129
125
  }
130
126
 
131
127
  /**
@@ -140,7 +136,7 @@ export class SkiaView extends React.Component<
140
136
  _values.forEach((v) => {
141
137
  this._unsubscriptions.push(
142
138
  v.addListener(() => {
143
- this.requestRedraw();
139
+ this.redraw();
144
140
  })
145
141
  );
146
142
  });
@@ -155,23 +151,11 @@ export class SkiaView extends React.Component<
155
151
  type: touchType,
156
152
  timestamp: Date.now(),
157
153
  });
158
- this.requestRedraw();
159
- }
160
-
161
- handleTouchStart(evt: PointerEvent) {
162
- this.handleTouchEvent(evt, TouchType.Start);
163
- }
164
-
165
- handleTouchMove(evt: PointerEvent) {
166
- this.handleTouchEvent(evt, TouchType.Active);
167
- }
168
-
169
- handleTouchEnd(evt: PointerEvent) {
170
- this.handleTouchEvent(evt, TouchType.Cancelled);
154
+ this.redraw();
171
155
  }
172
156
 
173
- handleTouchCancel(evt: PointerEvent) {
174
- this.handleTouchEvent(evt, TouchType.End);
157
+ createTouchHandler(touchType: TouchType) {
158
+ return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
175
159
  }
176
160
 
177
161
  render() {
@@ -180,12 +164,13 @@ export class SkiaView extends React.Component<
180
164
  <View {...viewProps} onLayout={this.onLayout.bind(this)}>
181
165
  <canvas
182
166
  ref={this._canvasRef}
183
- width={this.state.width}
184
- height={this.state.height}
185
- onPointerDown={this.handleTouchStart.bind(this)}
186
- onPointerMove={this.handleTouchMove.bind(this)}
187
- onPointerUp={this.handleTouchEnd.bind(this)}
188
- onPointerCancel={this.handleTouchCancel.bind(this)}
167
+ style={{ display: "flex", flex: 1 }}
168
+ onPointerDown={this.createTouchHandler(TouchType.Start)}
169
+ onPointerMove={this.createTouchHandler(TouchType.Active)}
170
+ onPointerUp={this.createTouchHandler(TouchType.End)}
171
+ onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
172
+ onPointerLeave={this.createTouchHandler(TouchType.End)}
173
+ onPointerOut={this.createTouchHandler(TouchType.End)}
189
174
  />
190
175
  </View>
191
176
  );
@@ -0,0 +1,24 @@
1
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
+ // @ts-expect-error
3
+ import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
4
+ import type {
5
+ CanvasKit as CanvasKitType,
6
+ CanvasKitInitOptions,
7
+ } from "canvaskit-wasm";
8
+
9
+ declare global {
10
+ var CanvasKit: CanvasKitType;
11
+ }
12
+
13
+ export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
14
+ if (global.CanvasKit !== undefined) {
15
+ return;
16
+ }
17
+ const CanvasKit = await CanvasKitInit(opts);
18
+ // The CanvasKit API is stored on the global object and used
19
+ // to create the JsiSKApi in the Skia.web.ts file.
20
+ global.CanvasKit = CanvasKit;
21
+ };
22
+
23
+ // We keep this function for backward compatibility
24
+ export const LoadSkia = LoadSkiaWeb;
@@ -0,0 +1,37 @@
1
+ import type { ComponentProps, ComponentType } from "react";
2
+ import React, { useMemo, lazy, Suspense } from "react";
3
+ import { Platform } from "react-native";
4
+
5
+ import { LoadSkiaWeb } from "./LoadSkiaWeb";
6
+
7
+ interface WithSkiaProps {
8
+ fallback?: ComponentProps<typeof Suspense>["fallback"];
9
+ getComponent: () => Promise<{ default: ComponentType }>;
10
+ opts?: Parameters<typeof LoadSkiaWeb>[0];
11
+ }
12
+
13
+ export const WithSkiaWeb = ({
14
+ getComponent,
15
+ fallback,
16
+ opts,
17
+ }: WithSkiaProps) => {
18
+ const Inner = useMemo(
19
+ () =>
20
+ lazy(async () => {
21
+ if (Platform.OS === "web") {
22
+ await LoadSkiaWeb(opts);
23
+ } else {
24
+ console.warn(
25
+ "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
26
+ );
27
+ }
28
+ return getComponent();
29
+ }),
30
+ [getComponent, opts]
31
+ );
32
+ return (
33
+ <Suspense fallback={fallback ?? null}>
34
+ <Inner />
35
+ </Suspense>
36
+ );
37
+ };
package/src/web/index.ts CHANGED
@@ -1,15 +1,2 @@
1
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
- // @ts-expect-error
3
- import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
4
- import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
5
-
6
- declare global {
7
- var CanvasKit: CanvasKitType;
8
- }
9
-
10
- export const LoadSkia = async () => {
11
- const CanvasKit = await CanvasKitInit();
12
- // The CanvasKit API is stored on the global object and used
13
- // to create the JsiSKApi in the Skia.web.ts file.
14
- global.CanvasKit = CanvasKit;
15
- };
1
+ export * from "./LoadSkiaWeb";
2
+ export * from "./WithSkiaWeb";
@@ -1,84 +0,0 @@
1
- #pragma once
2
-
3
- #include <memory>
4
- #include <utility>
5
-
6
- #include <jsi/jsi.h>
7
-
8
- #include "JsiSkHostObjects.h"
9
-
10
- #pragma clang diagnostic push
11
- #pragma clang diagnostic ignored "-Wdocumentation"
12
-
13
- #include <SkFont.h>
14
- #include <SkFontMgr.h>
15
- #include <SkTypeface.h>
16
-
17
- #pragma clang diagnostic pop
18
-
19
-
20
- namespace RNSkia {
21
-
22
- using namespace facebook;
23
-
24
- class JsiSkFontMgr : public JsiSkWrappingSkPtrHostObject<SkFontMgr> {
25
- public:
26
-
27
- // TODO: declare in JsiSkWrappingSkPtrHostObject via extra template parameter?
28
- JSI_PROPERTY_GET(__typename__) {
29
- return jsi::String::createFromUtf8(runtime, "FontMgr");
30
- }
31
-
32
- JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkFontMgr, __typename__))
33
-
34
- JsiSkFontMgr(std::shared_ptr<RNSkPlatformContext> context,
35
- sk_sp<SkFontMgr> fontMgr)
36
- : JsiSkWrappingSkPtrHostObject(std::move(context), std::move(fontMgr)) {}
37
-
38
- JSI_HOST_FUNCTION(countFamilies) {
39
- auto families = getObject()->countFamilies();
40
- return jsi::Value(families);
41
- }
42
-
43
- JSI_HOST_FUNCTION(getFamilyName) {
44
- auto i = arguments[0].asNumber();
45
- SkString familyName;
46
- getObject()->getFamilyName(i, &familyName);
47
- return jsi::String::createFromUtf8(runtime, familyName.c_str());
48
- }
49
-
50
- JSI_HOST_FUNCTION(matchFamilyStyle) {
51
- auto familyName = arguments[0].asString(runtime).utf8(runtime);
52
- auto fontStyle = SkFontStyle::Normal();
53
- if (count >= 2) {
54
- auto object = arguments[1].asObject(runtime);
55
- int weight = object.getProperty(runtime, "weight").asNumber();
56
- int width = object.getProperty(runtime, "width").asNumber();
57
- SkFontStyle::Slant slant = (SkFontStyle::Slant)object.getProperty(runtime, "slant").asNumber();
58
- fontStyle = SkFontStyle(width, weight, slant);
59
- }
60
- auto typeface = getObject()->matchFamilyStyle(familyName.c_str(), std::move(fontStyle));
61
- if (typeface == nullptr) {
62
- return jsi::Value::null();
63
- }
64
- return jsi::Object::createFromHostObject(
65
- runtime, std::make_shared<JsiSkTypeface>(getContext(), sk_sp<SkTypeface>(std::move(typeface))));;
66
- }
67
-
68
- JSI_EXPORT_FUNCTIONS(
69
- JSI_EXPORT_FUNC(JsiSkFontMgr, countFamilies),
70
- JSI_EXPORT_FUNC(JsiSkFontMgr, getFamilyName),
71
- JSI_EXPORT_FUNC(JsiSkFontMgr, matchFamilyStyle)
72
- )
73
-
74
- /**
75
- Returns the underlying object from a host object of this type
76
- */
77
- static sk_sp<SkFontMgr> fromValue(jsi::Runtime &runtime,
78
- const jsi::Value &obj) {
79
- return obj.asObject(runtime)
80
- .asHostObject<JsiSkFontMgr>(runtime)
81
- ->getObject();
82
- }
83
- };
84
- } // namespace RNSkia
@@ -1,48 +0,0 @@
1
- #pragma once
2
-
3
- #include <memory>
4
- #include <utility>
5
-
6
- #include <jsi/jsi.h>
7
-
8
- #include "JsiSkHostObjects.h"
9
- #include "JsiSkFontMgr.h"
10
- #include "JsiSkData.h"
11
- #include <SkFontMgr.h>
12
-
13
-
14
- namespace RNSkia {
15
-
16
- using namespace facebook;
17
-
18
- class JsiSkFontMgrFactory : public JsiSkHostObject {
19
- public:
20
- // JSI_HOST_FUNCTION(FromData) {
21
- // std::vector<sk_sp<SkData>> data;
22
- // for (int i = 0; i < count; i++) {
23
- // auto d = JsiSkData::fromValue(
24
- // runtime, arguments[i]);
25
- // data.push_back(d);
26
- // }
27
- //
28
- // auto fontMgr = SkFontMgr_New_Custom_Data(data.data(), data.size());
29
- // return jsi::Object::createFromHostObject(
30
- // runtime, std::make_shared<JsiSkFontMgr>(getContext(), fontMgr));
31
- // }
32
-
33
- JSI_HOST_FUNCTION(RefDefault) {
34
- auto fontMgr = SkFontMgr::RefDefault();
35
- return jsi::Object::createFromHostObject(
36
- runtime, std::make_shared<JsiSkFontMgr>(getContext(), std::move(fontMgr)));
37
- }
38
-
39
- JSI_EXPORT_FUNCTIONS(
40
- //JSI_EXPORT_FUNC(JsiSkFontMgrFactory, FromData),
41
- JSI_EXPORT_FUNC(JsiSkFontMgrFactory, RefDefault)
42
- )
43
-
44
- JsiSkFontMgrFactory(std::shared_ptr<RNSkPlatformContext> context)
45
- : JsiSkHostObject(std::move(context)) {}
46
- };
47
-
48
- } // namespace RNSkia
@@ -1,28 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.usePaint = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var _Skia = require("../Skia");
11
-
12
- /**
13
- * Returns a Skia Paint object
14
- * */
15
- const usePaint = (initializer, deps) => (0, _react.useMemo)(() => {
16
- console.warn("usePaint() is deprecated. Use Skia.Paint() instead.");
17
-
18
- const p = _Skia.Skia.Paint();
19
-
20
- if (initializer) {
21
- initializer(p);
22
- }
23
-
24
- return p; // eslint-disable-next-line react-hooks/exhaustive-deps
25
- }, deps);
26
-
27
- exports.usePaint = usePaint;
28
- //# sourceMappingURL=Paint.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Paint.ts"],"names":["usePaint","initializer","deps","console","warn","p","Skia","Paint"],"mappings":";;;;;;;AACA;;AAEA;;AAGA;AACA;AACA;AACO,MAAMA,QAAQ,GAAG,CACtBC,WADsB,EAEtBC,IAFsB,KAItB,oBAAQ,MAAM;AACZC,EAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;;AACA,QAAMC,CAAC,GAAGC,WAAKC,KAAL,EAAV;;AACA,MAAIN,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACI,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CANY,CAOZ;AACD,CARD,EAQGH,IARH,CAJK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkPaint } from \"../types\";\n\n/**\n * Returns a Skia Paint object\n * */\nexport const usePaint = (\n initializer?: (paint: SkPaint) => void,\n deps?: DependencyList\n) =>\n useMemo(() => {\n console.warn(\"usePaint() is deprecated. Use Skia.Paint() instead.\");\n const p = Skia.Paint();\n if (initializer) {\n initializer(p);\n }\n return p;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n"]}
@@ -1,72 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTextPath = exports.useSvgPath = exports.usePath = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var _Skia = require("../Skia");
11
-
12
- /**
13
- * Memoizes and returns a Skia Path object with optional initializer
14
- * @param initializer
15
- * @param deps
16
- * @returns
17
- */
18
- const usePath = (initializer, deps) => (0, _react.useMemo)(() => {
19
- console.warn("usePath() is deprecated. Use Skia.Path.Make() instead.");
20
-
21
- const p = _Skia.Skia.Path.Make();
22
-
23
- if (initializer) {
24
- initializer(p);
25
- }
26
-
27
- return p; // eslint-disable-next-line react-hooks/exhaustive-deps
28
- }, [initializer, deps]);
29
- /**
30
- * Initializes a Skia Path from an svg path string
31
- * @param svgpath
32
- * @returns
33
- */
34
- // MakeFromSVGString
35
-
36
-
37
- exports.usePath = usePath;
38
-
39
- const useSvgPath = svgpath => (0, _react.useMemo)(() => {
40
- console.warn("useSvgPath() is deprecated. Use Skia.Path.MakeFromSVGString() instead.");
41
-
42
- const p = _Skia.Skia.Path.MakeFromSVGString(svgpath);
43
-
44
- if (p === null) {
45
- throw new Error(`Invalid SVG path: ${svgpath}`);
46
- }
47
-
48
- return p;
49
- }, [svgpath]);
50
- /**
51
- * Initializes a Skia Path from a text string
52
- * @param svgpath
53
- * @returns
54
- */
55
-
56
-
57
- exports.useSvgPath = useSvgPath;
58
-
59
- const useTextPath = (text, x, y, font) => (0, _react.useMemo)(() => {
60
- console.warn("useTextPath() is deprecated. Use Skia.Path.MakeFromText() instead.");
61
-
62
- const p = _Skia.Skia.Path.MakeFromText(text, x, y, font);
63
-
64
- if (p === null) {
65
- throw new Error("Text path creation failed.");
66
- }
67
-
68
- return p;
69
- }, [text, x, y, font]);
70
-
71
- exports.useTextPath = useTextPath;
72
- //# sourceMappingURL=Path.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["Path.ts"],"names":["usePath","initializer","deps","console","warn","p","Skia","Path","Make","useSvgPath","svgpath","MakeFromSVGString","Error","useTextPath","text","x","y","font","MakeFromText"],"mappings":";;;;;;;AACA;;AAEA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,OAAO,GAAG,CACrBC,WADqB,EAErBC,IAFqB,KAIrB,oBAAQ,MAAM;AACZC,EAAAA,OAAO,CAACC,IAAR,CAAa,wDAAb;;AACA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUC,IAAV,EAAV;;AACA,MAAIP,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACI,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CANY,CAOZ;AACD,CARD,EAQG,CAACJ,WAAD,EAAcC,IAAd,CARH,CAJK;AAcP;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMO,UAAU,GAAIC,OAAD,IACxB,oBAAQ,MAAM;AACZP,EAAAA,OAAO,CAACC,IAAR,CACE,wEADF;;AAGA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUI,iBAAV,CAA4BD,OAA5B,CAAV;;AACA,MAAIL,CAAC,KAAK,IAAV,EAAgB;AACd,UAAM,IAAIO,KAAJ,CAAW,qBAAoBF,OAAQ,EAAvC,CAAN;AACD;;AACD,SAAOL,CAAP;AACD,CATD,EASG,CAACK,OAAD,CATH,CADK;AAYP;AACA;AACA;AACA;AACA;;;;;AACO,MAAMG,WAAW,GAAG,CAACC,IAAD,EAAeC,CAAf,EAA0BC,CAA1B,EAAqCC,IAArC,KACzB,oBAAQ,MAAM;AACZd,EAAAA,OAAO,CAACC,IAAR,CACE,oEADF;;AAGA,QAAMC,CAAC,GAAGC,WAAKC,IAAL,CAAUW,YAAV,CAAuBJ,IAAvB,EAA6BC,CAA7B,EAAgCC,CAAhC,EAAmCC,IAAnC,CAAV;;AACA,MAAIZ,CAAC,KAAK,IAAV,EAAgB;AACd,UAAM,IAAIO,KAAJ,CAAU,4BAAV,CAAN;AACD;;AACD,SAAOP,CAAP;AACD,CATD,EASG,CAACS,IAAD,EAAOC,CAAP,EAAUC,CAAV,EAAaC,IAAb,CATH,CADK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkFont, SkPath } from \"../types\";\n\n/**\n * Memoizes and returns a Skia Path object with optional initializer\n * @param initializer\n * @param deps\n * @returns\n */\nexport const usePath = (\n initializer?: (path: SkPath) => void,\n deps?: DependencyList\n) =>\n useMemo(() => {\n console.warn(\"usePath() is deprecated. Use Skia.Path.Make() instead.\");\n const p = Skia.Path.Make();\n if (initializer) {\n initializer(p);\n }\n return p;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initializer, deps]);\n\n/**\n * Initializes a Skia Path from an svg path string\n * @param svgpath\n * @returns\n */\n// MakeFromSVGString\nexport const useSvgPath = (svgpath: string) =>\n useMemo(() => {\n console.warn(\n \"useSvgPath() is deprecated. Use Skia.Path.MakeFromSVGString() instead.\"\n );\n const p = Skia.Path.MakeFromSVGString(svgpath);\n if (p === null) {\n throw new Error(`Invalid SVG path: ${svgpath}`);\n }\n return p;\n }, [svgpath]);\n\n/**\n * Initializes a Skia Path from a text string\n * @param svgpath\n * @returns\n */\nexport const useTextPath = (text: string, x: number, y: number, font: SkFont) =>\n useMemo(() => {\n console.warn(\n \"useTextPath() is deprecated. Use Skia.Path.MakeFromText() instead.\"\n );\n const p = Skia.Path.MakeFromText(text, x, y, font);\n if (p === null) {\n throw new Error(\"Text path creation failed.\");\n }\n return p;\n }, [text, x, y, font]);\n"]}
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=FontMgr.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=FontMgrFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
-
7
- var _FontMgrFactory = require("./FontMgrFactory");
8
-
9
- Object.keys(_FontMgrFactory).forEach(function (key) {
10
- if (key === "default" || key === "__esModule") return;
11
- if (key in exports && exports[key] === _FontMgrFactory[key]) return;
12
- Object.defineProperty(exports, key, {
13
- enumerable: true,
14
- get: function () {
15
- return _FontMgrFactory[key];
16
- }
17
- });
18
- });
19
-
20
- var _FontMgr = require("./FontMgr");
21
-
22
- Object.keys(_FontMgr).forEach(function (key) {
23
- if (key === "default" || key === "__esModule") return;
24
- if (key in exports && exports[key] === _FontMgr[key]) return;
25
- Object.defineProperty(exports, key, {
26
- enumerable: true,
27
- get: function () {
28
- return _FontMgr[key];
29
- }
30
- });
31
- });
32
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./FontMgrFactory\";\nexport * from \"./FontMgr\";\n"]}
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.JsiSkFontMgr = void 0;
7
-
8
- var _Host = require("./Host");
9
-
10
- class JsiSkFontMgr extends _Host.HostObject {
11
- constructor(CanvasKit) {
12
- super(CanvasKit, null, "FontMgr");
13
- }
14
-
15
- countFamilies() {
16
- console.warn("countFamilies() is deprecated. It returns 0 on React Native Web");
17
- return 0;
18
- }
19
-
20
- getFamilyName(_index) {
21
- console.warn("getFamilyName() is deprecated. It returns an empty string on React Native Web");
22
- return "";
23
- }
24
-
25
- matchFamilyStyle(_familyName, _fontStyle) {
26
- console.warn("matchFamilyStyle() is deprecated. It returns null on React Native Web");
27
- return null;
28
- }
29
-
30
- }
31
-
32
- exports.JsiSkFontMgr = JsiSkFontMgr;
33
- //# sourceMappingURL=JsiSkFontMgr.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["JsiSkFontMgr.ts"],"names":["JsiSkFontMgr","HostObject","constructor","CanvasKit","countFamilies","console","warn","getFamilyName","_index","matchFamilyStyle","_familyName","_fontStyle"],"mappings":";;;;;;;AAIA;;AAEO,MAAMA,YAAN,SACGC,gBADH,CAGP;AACEC,EAAAA,WAAW,CAACC,SAAD,EAAuB;AAChC,UAAMA,SAAN,EAAiB,IAAjB,EAAuB,SAAvB;AACD;;AAEDC,EAAAA,aAAa,GAAG;AACdC,IAAAA,OAAO,CAACC,IAAR,CACE,iEADF;AAGA,WAAO,CAAP;AACD;;AAEDC,EAAAA,aAAa,CAACC,MAAD,EAAiB;AAC5BH,IAAAA,OAAO,CAACC,IAAR,CACE,+EADF;AAGA,WAAO,EAAP;AACD;;AAEDG,EAAAA,gBAAgB,CACdC,WADc,EAEdC,UAFc,EAGK;AACnBN,IAAAA,OAAO,CAACC,IAAR,CACE,uEADF;AAGA,WAAO,IAAP;AACD;;AA3BH","sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { FontStyle, SkFontMgr, SkTypeface } from \"../types\";\n\nimport { HostObject } from \"./Host\";\n\nexport class JsiSkFontMgr\n extends HostObject<null, \"FontMgr\">\n implements SkFontMgr\n{\n constructor(CanvasKit: CanvasKit) {\n super(CanvasKit, null, \"FontMgr\");\n }\n\n countFamilies() {\n console.warn(\n \"countFamilies() is deprecated. It returns 0 on React Native Web\"\n );\n return 0;\n }\n\n getFamilyName(_index: number) {\n console.warn(\n \"getFamilyName() is deprecated. It returns an empty string on React Native Web\"\n );\n return \"\";\n }\n\n matchFamilyStyle(\n _familyName: string,\n _fontStyle?: FontStyle\n ): SkTypeface | null {\n console.warn(\n \"matchFamilyStyle() is deprecated. It returns null on React Native Web\"\n );\n return null;\n }\n}\n"]}
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.JsiSkFontMgrFactory = void 0;
7
-
8
- var _Host = require("./Host");
9
-
10
- var _JsiSkFontMgr = require("./JsiSkFontMgr");
11
-
12
- /*global atob*/
13
- class JsiSkFontMgrFactory extends _Host.Host {
14
- constructor(CanvasKit) {
15
- super(CanvasKit);
16
- }
17
-
18
- RefDefault() {
19
- return new _JsiSkFontMgr.JsiSkFontMgr(this.CanvasKit);
20
- }
21
-
22
- }
23
-
24
- exports.JsiSkFontMgrFactory = JsiSkFontMgrFactory;
25
- //# sourceMappingURL=JsiSkFontMgrFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["JsiSkFontMgrFactory.ts"],"names":["JsiSkFontMgrFactory","Host","constructor","CanvasKit","RefDefault","JsiSkFontMgr"],"mappings":";;;;;;;AAMA;;AACA;;AAPA;AASO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;AACtEC,EAAAA,WAAW,CAACC,SAAD,EAAuB;AAChC,UAAMA,SAAN;AACD;;AAEDC,EAAAA,UAAU,GAAc;AACtB,WAAO,IAAIC,0BAAJ,CAAiB,KAAKF,SAAtB,CAAP;AACD;;AAPqE","sourcesContent":["/*global atob*/\nimport type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkFontMgr } from \"../types\";\nimport type { FontMgrFactory } from \"../types/FontMgr/FontMgrFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkFontMgr } from \"./JsiSkFontMgr\";\n\nexport class JsiSkFontMgrFactory extends Host implements FontMgrFactory {\n constructor(CanvasKit: CanvasKit) {\n super(CanvasKit);\n }\n\n RefDefault(): SkFontMgr {\n return new JsiSkFontMgr(this.CanvasKit);\n }\n}\n"]}