Skip to content

Commit f299931

Browse files
wcandillonwcandillon
authored
fix(🌎): Upgrade to CanvasKit 0.40 (#3073)
1 parent e71451e commit f299931

File tree

9 files changed

+100
-70
lines changed

9 files changed

+100
-70
lines changed

Diff for: ‎packages/skia/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
"ws": "8.18.0"
123123
},
124124
"dependencies": {
125-
"canvaskit-wasm": "0.39.1",
125+
"canvaskit-wasm": "0.40.0",
126126
"react-reconciler": "0.27.0"
127127
},
128128
"eslintIgnore": [

Diff for: ‎packages/skia/src/__tests__/setup.ts

+67-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable max-len */
12
import path from "path";
23
import fs from "fs";
34

@@ -97,8 +98,69 @@ export const checkImage = (
9798
return 0;
9899
};
99100

101+
declare global {
102+
// eslint-disable-next-line @typescript-eslint/no-namespace
103+
namespace jest {
104+
interface Matchers<R> {
105+
/**
106+
* Checks if values are approximately equal within the given tolerance.
107+
* Works with:
108+
* - Single numbers
109+
* - Arrays of numbers
110+
* - Float32Arrays
111+
* - SVG path strings (compares numeric values with tolerance)
112+
*
113+
* @param expected - The expected value to compare against
114+
* @param tolerance - The maximum allowed difference between elements (default: 0.01)
115+
*/
116+
toBeApproximatelyEqual(
117+
expected: number | number[] | Float32Array | string,
118+
tolerance?: number
119+
): R;
120+
}
121+
}
122+
}
123+
100124
expect.extend({
101-
toBeApproximatelyEqual(_received, _argument, tolerance = 0.1) {
125+
toBeApproximatelyEqual(_received, _argument, tolerance = 0.01) {
126+
// Handle SVG path strings
127+
if (typeof _received === "string" && typeof _argument === "string") {
128+
// Parse SVG path strings to extract numerical values
129+
const parsePathString = (pathStr: string): number[] => {
130+
// Extract all numeric values (including decimals) from the path string
131+
const numbers = pathStr.match(/-?\d+(?:\.\d+)?/g) || [];
132+
return numbers.map(Number);
133+
};
134+
135+
const receivedPoints = parsePathString(_received);
136+
const argumentPoints = parsePathString(_argument);
137+
138+
if (receivedPoints.length !== argumentPoints.length) {
139+
return {
140+
pass: false,
141+
message: () =>
142+
`SVG paths have different number of points: ${receivedPoints.length} vs ${argumentPoints.length}`,
143+
};
144+
}
145+
146+
for (let i = 0; i < receivedPoints.length; i++) {
147+
if (
148+
isNaN(receivedPoints[i]) ||
149+
isNaN(argumentPoints[i]) ||
150+
Math.abs(receivedPoints[i] - argumentPoints[i]) > tolerance
151+
) {
152+
return {
153+
pass: false,
154+
message: () =>
155+
`SVG path points differ more than ${tolerance} at position ${i}: ${receivedPoints[i]} vs ${argumentPoints[i]}`,
156+
};
157+
}
158+
}
159+
160+
return { pass: true, message: () => "SVG paths are approximately equal" };
161+
}
162+
163+
// Original logic for numbers and arrays
102164
const received =
103165
Array.isArray(_received) || _received instanceof Float32Array
104166
? _received
@@ -110,6 +172,7 @@ expect.extend({
110172
if (received.length !== argument.length) {
111173
return { pass: false, message: () => "Arrays have different lengths" };
112174
}
175+
113176
for (let i = 0; i < received.length; i++) {
114177
if (
115178
isNaN(argument[i]) ||
@@ -127,3 +190,6 @@ ${diffString}`,
127190
return { pass: true, message: () => "Arrays are approximately equal" };
128191
},
129192
});
193+
194+
// Export empty object to make this a module
195+
export {};

Diff for: ‎packages/skia/src/headless/index.ts

-6
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,10 @@ import type { ReactNode } from "react";
55

66
import type { SkSurface } from "../skia";
77
import { JsiSkApi } from "../skia/web";
8-
// eslint-disable-next-line import/order
98
import { SkiaSGRoot } from "../sksg/Reconciler";
109

1110
export * from "../renderer/components";
1211
export * from "../skia/types";
13-
// TODO: there is current an issue where the ColorType enum is not matching the Skia and CanvasKit version.
14-
// For node and web we need to export our own enum.
15-
// We will consolidate this.
16-
import { ColorType as CanvasKitColorType } from "../skia/types/Image/ColorType.web";
17-
export const ColorType = CanvasKitColorType;
1812

1913
let Skia: ReturnType<typeof JsiSkApi>;
2014

Diff for: ‎packages/skia/src/renderer/__tests__/e2e/Matrix4.spec.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -217,8 +217,7 @@ describe("Matrix4", () => {
217217
},
218218
{ matrix }
219219
);
220-
// eslint-disable-next-line @typescript-eslint/no-explicit-any, jest/valid-expect
221-
(expect(result) as any).toBeApproximatelyEqual(
220+
expect(result).toBeApproximatelyEqual(
222221
toMatrix3(
223222
processTransform3d([
224223
{ translate: [width / 2, height / 2] },

Diff for: ‎packages/skia/src/renderer/__tests__/e2e/Paths.spec.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ describe("Paths", () => {
110110
path.trim(0.0001, 1.00001, false);
111111
return path.toSVGString();
112112
});
113-
expect(result).toEqual("M20 20.0048L20 40L40 20");
113+
expect(result).toBeApproximatelyEqual("M20 20.0048L20 40L40 20");
114114
});
115115
it("should accept [0, 1.2] as trim value", async () => {
116116
const result = await surface.eval((Skia) => {
@@ -142,17 +142,19 @@ describe("Paths", () => {
142142
path.interpolate(path2, 1.0001)!.toSVGString(),
143143
path.interpolate(path2, 1.2)!.toSVGString(),
144144
path.interpolate(path2, 2)!.toSVGString(),
145-
];
145+
].join(" ");
146146
});
147-
expect(result).toEqual([
148-
"M-20 -20L20 0L0 60",
149-
"M0 0L20 20L20 40",
150-
"M0.002 0.002L20 20.002L20.002 39.998",
151-
"M20 20L20 40L40 20",
152-
"M20.002 20.002L20 40.002L40.002 19.998",
153-
"M24 24L20 44L44 16",
154-
"M40 40L20 60L60 0",
155-
]);
147+
expect(result).toBeApproximatelyEqual(
148+
[
149+
"M-20 -20L20 0L0 60",
150+
"M0 0L20 20L20 40",
151+
"M0.002 0.002L20 20.002L20.002 39.998",
152+
"M20 20L20 40L40 20",
153+
"M20.002 20.002L20 40.002L40.002 19.998",
154+
"M24 24L20 44L44 16",
155+
"M40 40L20 60L60 0",
156+
].join(" ")
157+
);
156158
});
157159
it("should add a path", async () => {
158160
const result = await surface.eval((Skia) => {

Diff for: ‎packages/skia/src/skia/__tests__/Enums.spec.ts

+11-23
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
AlphaType,
55
BlurStyle,
66
ClipOp,
7+
ColorType,
78
FillType,
89
FilterMode,
910
FontEdging,
@@ -26,7 +27,6 @@ import {
2627
import { Path1DEffectStyle } from "../types/PathEffect";
2728
import { BlendMode } from "../types/Paint/BlendMode";
2829
import { mapKeys } from "../../renderer/typeddash";
29-
import { ColorType as ColorTypeCanvasKit } from "../types/Image/ColorType.web";
3030

3131
import { setupSkia } from "./setup";
3232

@@ -71,7 +71,7 @@ describe("Enums", () => {
7171
});
7272
it("Should match Image enums values with CanvasKit", () => {
7373
const { CanvasKit } = setupSkia();
74-
checkEnum(ColorTypeCanvasKit, CanvasKit.ColorType);
74+
checkEnum(ColorType, CanvasKit.ColorType);
7575
checkEnum(AlphaType, CanvasKit.AlphaType);
7676
checkEnum(ImageFormat, CanvasKit.ImageFormat);
7777
checkEnum(MipmapMode, CanvasKit.MipmapMode);
@@ -114,35 +114,23 @@ describe("Enums", () => {
114114
it("Should match color types with CanvasKit", () => {
115115
const { CanvasKit } = setupSkia();
116116
//expect(CanvasKit.ColorType.Unknown.value).toBe(ColorType.Unknown);
117-
expect(CanvasKit.ColorType.Alpha_8.value).toBe(ColorTypeCanvasKit.Alpha_8);
118-
expect(CanvasKit.ColorType.RGB_565.value).toBe(ColorTypeCanvasKit.RGB_565);
117+
expect(CanvasKit.ColorType.Alpha_8.value).toBe(ColorType.Alpha_8);
118+
expect(CanvasKit.ColorType.RGB_565.value).toBe(ColorType.RGB_565);
119119
//expect(CanvasKit.ColorType.ARGB_4444.value).toBe(ColorType.ARGB_4444);
120-
expect(CanvasKit.ColorType.RGBA_8888.value).toBe(
121-
ColorTypeCanvasKit.RGBA_8888
122-
);
120+
expect(CanvasKit.ColorType.RGBA_8888.value).toBe(ColorType.RGBA_8888);
123121
//expect(CanvasKit.ColorType.RGB_888x.value).toBe(ColorType.RGB_888x);
124-
expect(CanvasKit.ColorType.BGRA_8888.value).toBe(
125-
ColorTypeCanvasKit.BGRA_8888
126-
);
127-
expect(CanvasKit.ColorType.RGBA_1010102.value).toBe(
128-
ColorTypeCanvasKit.RGBA_1010102
129-
);
122+
expect(CanvasKit.ColorType.BGRA_8888.value).toBe(ColorType.BGRA_8888);
123+
expect(CanvasKit.ColorType.RGBA_1010102.value).toBe(ColorType.RGBA_1010102);
130124
//expect(CanvasKit.ColorType.BGRA_1010102.value).toBe(ColorType.BGRA_1010102);
131-
expect(CanvasKit.ColorType.RGB_101010x.value).toBe(
132-
ColorTypeCanvasKit.RGB_101010x
133-
);
125+
expect(CanvasKit.ColorType.RGB_101010x.value).toBe(ColorType.RGB_101010x);
134126
//expect(CanvasKit.ColorType.BGR_101010x.value).toBe(ColorType.BGR_101010x);
135127
//expect(CanvasKit.ColorType.BGR_101010x_XR.value).toBe(ColorType.BGR_101010x_XR);
136128
//expect(CanvasKit.ColorType.BGRA_10101010_XR.value).toBe(ColorType.BGRA_10101010_XR);
137129
//expect(CanvasKit.ColorType.RGBA_10x6.value).toBe(ColorType.RGBA_10x6);
138-
expect(CanvasKit.ColorType.Gray_8.value).toBe(ColorTypeCanvasKit.Gray_8);
130+
expect(CanvasKit.ColorType.Gray_8.value).toBe(ColorType.Gray_8);
139131
//expect(CanvasKit.ColorType.RGBA_F16Norm.value).toBe(ColorType.RGBA_F16Norm);
140-
expect(CanvasKit.ColorType.RGBA_F16.value).toBe(
141-
ColorTypeCanvasKit.RGBA_F16
142-
);
132+
expect(CanvasKit.ColorType.RGBA_F16.value).toBe(ColorType.RGBA_F16);
143133
//expect(CanvasKit.ColorType.RGB_F16F16F16x.value).toBe(ColorType.RGB_F16F16F16x);
144-
expect(CanvasKit.ColorType.RGBA_F32.value).toBe(
145-
ColorTypeCanvasKit.RGBA_F32
146-
);
134+
expect(CanvasKit.ColorType.RGBA_F32.value).toBe(ColorType.RGBA_F32);
147135
});
148136
});

Diff for: ‎packages/skia/src/skia/__tests__/Path.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ describe("Path", () => {
1818
const svg2 =
1919
"M128 191.877C104.213 216.339 80.8869 228.058 66.7826 219.915C52.6783 211.772 51.1647 185.712 60.4559 152.88C27.3773 144.511 5.56522 130.17 5.56522 113.884C5.56522 97.5975 27.3773 83.2565 60.4559 74.8871C51.1647 42.0555 52.6783 15.9952 66.7826 7.85209C80.8869 -0.291009 104.213 11.4283 128 35.8905C151.787 11.4283 175.113 -0.291018 189.217 7.85208C203.322 15.9952 204.835 42.0555 195.544 74.8871C228.623 83.2565 250.435 97.5975 250.435 113.884C250.435 130.17 228.623 144.511 195.544 152.88C204.835 185.712 203.322 211.772 189.217 219.915C175.113 228.058 151.787 216.339 128 191.877ZM71.7826 211.255C69.497 209.936 67.0111 206.926 65.6137 200.393C64.2166 193.861 64.1969 184.917 65.9598 173.914C66.9004 168.042 68.3234 161.739 70.2187 155.109C79.9755 157.106 90.5237 158.614 101.637 159.545C108.001 168.704 114.58 177.085 121.189 184.536C116.395 189.493 111.647 193.877 107.033 197.627C98.385 204.655 90.6292 209.111 84.2739 211.167C77.9172 213.223 74.0682 212.575 71.7826 211.255ZM185.781 72.6589C187.677 66.0285 189.1 59.7251 190.04 53.8539C191.803 42.8506 191.783 33.9062 190.386 27.3744C188.989 20.8411 186.503 17.8319 184.217 16.5123C181.932 15.1928 178.083 14.5444 171.726 16.6009C165.371 18.6569 157.615 23.112 148.967 30.1404C144.353 33.8906 139.605 38.2747 134.811 43.2312C141.42 50.6819 147.999 59.0631 154.363 68.2223C165.476 69.1534 176.025 70.6611 185.781 72.6589ZM121.189 43.2312C116.395 38.2747 111.647 33.8906 107.033 30.1404C98.385 23.112 90.6292 18.6569 84.2739 16.6009C77.9172 14.5445 74.0682 15.1928 71.7826 16.5123C69.497 17.8319 67.0111 20.8411 65.6137 27.3744C64.2166 33.9062 64.1969 42.8506 65.9598 53.8539C66.9004 59.7251 68.3234 66.0286 70.2187 72.6589C79.9755 70.6611 90.5237 69.1534 101.637 68.2223C108.001 59.0631 114.58 50.682 121.189 43.2312ZM114.51 67.4164C118.965 61.3763 123.485 55.7626 128 50.6258C132.515 55.7626 137.035 61.3763 141.49 67.4164C137.06 67.231 132.559 67.1359 128 67.1359C123.441 67.1359 118.94 67.231 114.51 67.4164ZM94.503 78.9676C87.0448 79.8054 79.9231 80.9132 73.2171 82.2548C75.4082 88.7331 78.0097 95.4546 81.0133 102.333C83.0676 98.4035 85.2357 94.4581 87.5152 90.5098C89.7947 86.5615 92.1276 82.7112 94.503 78.9676ZM86.3696 113.884C89.3439 107.821 92.6143 101.678 96.1754 95.5098C99.7366 89.3416 103.422 83.4378 107.185 77.8307C113.922 77.3752 120.878 77.1359 128 77.1359C135.122 77.1359 142.078 77.3752 148.815 77.8307C152.578 83.4378 156.263 89.3416 159.825 95.5098C163.386 101.678 166.656 107.821 169.63 113.884C166.656 119.946 163.386 126.089 159.825 132.258C156.263 138.426 152.578 144.33 148.815 149.937C142.078 150.392 135.122 150.632 128 150.632C120.878 150.632 113.922 150.392 107.185 149.937C103.422 144.33 99.7366 138.426 96.1754 132.258C92.6143 126.089 89.3439 119.946 86.3696 113.884ZM75.2747 113.884C70.5243 103.793 66.5558 93.9046 63.4076 84.4561C56.7179 86.1298 50.5474 88.0492 44.9926 90.1702C34.5819 94.1452 26.8457 98.6344 21.8875 103.11C16.9283 107.587 15.5652 111.245 15.5652 113.884C15.5652 116.523 16.9283 120.18 21.8875 124.657C26.8457 129.133 34.5819 133.622 44.9926 137.597C50.5474 139.718 56.7179 141.638 63.4076 143.311C66.5558 133.863 70.5243 123.974 75.2747 113.884ZM73.2171 145.513C75.4082 139.034 78.0097 132.313 81.0133 125.435C83.0676 129.364 85.2357 133.309 87.5152 137.258C89.7947 141.206 92.1276 145.056 94.503 148.8C87.0448 147.962 79.9231 146.854 73.2171 145.513ZM154.363 159.545C165.476 158.614 176.024 157.106 185.781 155.109C187.677 161.739 189.1 168.042 190.04 173.914C191.803 184.917 191.783 193.861 190.386 200.393C188.989 206.926 186.503 209.936 184.217 211.255C181.932 212.575 178.083 213.223 171.726 211.167C165.371 209.111 157.615 204.655 148.967 197.627C144.353 193.877 139.605 189.493 134.811 184.536C141.42 177.085 147.999 168.704 154.363 159.545ZM141.49 160.351C137.035 166.391 132.515 172.005 128 177.142C123.485 172.005 118.965 166.391 114.51 160.351C118.94 160.536 123.441 160.632 128 160.632C132.559 160.632 137.06 160.536 141.49 160.351ZM161.497 148.8C163.872 145.056 166.205 141.206 168.485 137.258C170.764 133.309 172.932 129.364 174.987 125.435C177.99 132.313 180.592 139.034 182.783 145.513C176.077 146.854 168.955 147.962 161.497 148.8ZM180.725 113.884C185.476 123.974 189.444 133.863 192.592 143.311C199.282 141.638 205.453 139.718 211.007 137.597C221.418 133.622 229.154 129.133 234.112 124.657C239.072 120.18 240.435 116.523 240.435 113.884C240.435 111.245 239.072 107.587 234.112 103.11C229.154 98.6344 221.418 94.1452 211.007 90.1702C205.453 88.0492 199.282 86.1298 192.592 84.4561C189.444 93.9046 185.476 103.793 180.725 113.884ZM174.987 102.333C177.99 95.4546 180.592 88.7331 182.783 82.2548C176.077 80.9132 168.955 79.8054 161.497 78.9676C163.872 82.7112 166.205 86.5615 168.485 90.5098C170.764 94.4581 172.932 98.4035 174.987 102.333Z";
2020
const p1 = roundtrip(Skia, Skia.Path.MakeFromSVGString(svg1)!);
21-
expect(p1.toSVGString()).toBe(svg1);
21+
expect(p1.toSVGString()).toBeApproximatelyEqual(svg1);
2222

2323
const paint = Skia.Paint();
2424
paint.setAntiAlias(true);
2525
paint.setColor(Skia.Color("cyan"));
2626
canvas.drawPath(p1, paint);
2727
const p2 = roundtrip(Skia, Skia.Path.MakeFromSVGString(svg2)!);
28-
expect(p2.toSVGString()).toBe(svg2);
28+
expect(p2.toSVGString()).toBeApproximatelyEqual(svg2);
2929

3030
p2.setFillType(FillType.EvenOdd);
3131
canvas.drawPath(p2, paint);

Diff for: ‎packages/skia/src/skia/types/Image/ColorType.web.ts

-19
This file was deleted.

Diff for: ‎yarn.lock

+5-5
Original file line numberDiff line numberDiff line change
@@ -5506,7 +5506,7 @@ __metadata:
55065506
"@types/react": ^18.2.6
55075507
"@types/react-reconciler": 0.28.9
55085508
"@types/ws": 8.5.3
5509-
canvaskit-wasm: 0.39.1
5509+
canvaskit-wasm: 0.40.0
55105510
eslint: 8
55115511
eslint-config-react-native-wcandillon: ^3.10.2
55125512
eslint-plugin-import: 2.27.5
@@ -8610,12 +8610,12 @@ __metadata:
86108610
languageName: node
86118611
linkType: hard
86128612

8613-
"canvaskit-wasm@npm:0.39.1":
8614-
version: 0.39.1
8615-
resolution: "canvaskit-wasm@npm:0.39.1"
8613+
"canvaskit-wasm@npm:0.40.0":
8614+
version: 0.40.0
8615+
resolution: "canvaskit-wasm@npm:0.40.0"
86168616
dependencies:
86178617
"@webgpu/types": 0.1.21
8618-
checksum: da62926fc81f424a781e148b4d76bb5fc9b0188f136090b3b287522dc653cb002bfb406e2eff45b55fcc1cafbc7629f988e20ad6c777bab85c1bb09e1091a5e2
8618+
checksum: 983e6b2a32babcbf0a8c29412fee57305d55b7e9603d5ba1e4c68f082fb649433cd1eb8cfddf17dda6dc041ef2c77eb9d9c7f0cba852f6f75f4e78809547d9c5
86198619
languageName: node
86208620
linkType: hard
86218621

0 commit comments

Comments
 (0)