Skip to content

Commit e71451e

Browse files
wcandillonwcandillon
authored
fix(🪢): Fix color type in headless mode (#3071)
1 parent 6bdfa74 commit e71451e

File tree

6 files changed

+190
-10
lines changed

6 files changed

+190
-10
lines changed

‎apps/headless/package.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "headless-skia",
33
"version": "1.0.0",
44
"scripts": {
5-
"test": "ts-node ./src/helloWorld.tsx",
5+
"test": "jest",
66
"tsc": "tsc"
77
},
88
"dependencies": {
@@ -11,8 +11,15 @@
1111
"typescript": "^5.2.2"
1212
},
1313
"devDependencies": {
14+
"@types/jest": "^29.5.0",
1415
"eslint": "^9.19.0",
1516
"eslint-config-react-native-wcandillon": "^3.10.2",
17+
"jest": "^29.7.0",
18+
"ts-jest": "^29.1.1",
1619
"ts-node": "^10.9.2"
20+
},
21+
"jest": {
22+
"preset": "ts-jest",
23+
"testEnvironment": "node"
1724
}
1825
}

‎apps/headless/src/helloWorld.test.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from "react";
2+
import { getSkiaExports, ColorType, Group, Circle, drawOffscreen } from "@shopify/react-native-skia/src/headless";
3+
import { LoadSkiaWeb } from "@shopify/react-native-skia/src/web/LoadSkiaWeb";
4+
5+
describe("Test Skia", () => {
6+
beforeEach(async () => {
7+
await LoadSkiaWeb();
8+
});
9+
10+
it("should properly load Skia", async () => {
11+
const { Skia } = getSkiaExports();
12+
expect(Skia).toBeDefined();
13+
});
14+
15+
it("Simple test", async () => {
16+
const { Skia } = getSkiaExports();
17+
const width = 256;
18+
const height = 256;
19+
const surface = Skia.Surface.MakeOffscreen(width, height)!;
20+
expect(surface).toBeDefined();
21+
const size = 60;
22+
const r = size * 0.33;
23+
24+
const image = drawOffscreen(
25+
surface,
26+
<Group blendMode="multiply">
27+
<Circle cx={r} cy={r} r={r} color="cyan" />
28+
<Circle cx={size - r} cy={r} r={r} color="magenta" />
29+
<Circle cx={size / 2} cy={size - r} r={r} color="yellow" />
30+
</Group>,
31+
);
32+
expect(image).toBeDefined();
33+
expect(image.encodeToBase64()).toBeDefined();
34+
});
35+
36+
it("test that ColorType is properly exported", async () => {
37+
expect(CanvasKit.ColorType.Alpha_8.value).toBe(ColorType.Alpha_8);
38+
expect(CanvasKit.ColorType.RGB_565.value).toBe(ColorType.RGB_565);
39+
//expect(CanvasKit.ColorType.ARGB_4444.value).toBe(ColorType.ARGB_4444);
40+
expect(CanvasKit.ColorType.RGBA_8888.value).toBe(
41+
ColorType.RGBA_8888
42+
);
43+
//expect(CanvasKit.ColorType.RGB_888x.value).toBe(ColorType.RGB_888x);
44+
expect(CanvasKit.ColorType.BGRA_8888.value).toBe(
45+
ColorType.BGRA_8888
46+
);
47+
expect(CanvasKit.ColorType.RGBA_1010102.value).toBe(
48+
ColorType.RGBA_1010102
49+
);
50+
//expect(CanvasKit.ColorType.BGRA_1010102.value).toBe(ColorType.BGRA_1010102);
51+
expect(CanvasKit.ColorType.RGB_101010x.value).toBe(
52+
ColorType.RGB_101010x
53+
);
54+
//expect(CanvasKit.ColorType.BGR_101010x.value).toBe(ColorType.BGR_101010x);
55+
//expect(CanvasKit.ColorType.BGR_101010x_XR.value).toBe(ColorType.BGR_101010x_XR);
56+
//expect(CanvasKit.ColorType.BGRA_10101010_XR.value).toBe(ColorType.BGRA_10101010_XR);
57+
//expect(CanvasKit.ColorType.RGBA_10x6.value).toBe(ColorType.RGBA_10x6);
58+
expect(CanvasKit.ColorType.Gray_8.value).toBe(ColorType.Gray_8);
59+
//expect(CanvasKit.ColorType.RGBA_F16Norm.value).toBe(ColorType.RGBA_F16Norm);
60+
expect(CanvasKit.ColorType.RGBA_F16.value).toBe(
61+
ColorType.RGBA_F16
62+
);
63+
//expect(CanvasKit.ColorType.RGB_F16F16F16x.value).toBe(ColorType.RGB_F16F16F16x);
64+
expect(CanvasKit.ColorType.RGBA_F32.value).toBe(
65+
ColorType.RGBA_F32
66+
);
67+
});
68+
});

‎packages/skia/src/headless/index.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@
33
import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
44
import type { ReactNode } from "react";
55

6-
import { JsiSkApi } from "../skia/web";
76
import type { SkSurface } from "../skia";
7+
import { JsiSkApi } from "../skia/web";
8+
// eslint-disable-next-line import/order
89
import { SkiaSGRoot } from "../sksg/Reconciler";
910

1011
export * from "../renderer/components";
12+
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;
1118

1219
let Skia: ReturnType<typeof JsiSkApi>;
1320

‎packages/skia/src/skia/__tests__/Enums.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
import { Path1DEffectStyle } from "../types/PathEffect";
2727
import { BlendMode } from "../types/Paint/BlendMode";
2828
import { mapKeys } from "../../renderer/typeddash";
29-
import { ColorTypeCanvasKit } from "../types/Image/ColorType.web";
29+
import { ColorType as ColorTypeCanvasKit } from "../types/Image/ColorType.web";
3030

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

‎packages/skia/src/skia/types/Image/ColorType.web.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export enum ColorTypeCanvasKit {
1+
export enum ColorType {
22
Unknown, // uninitialized
33
Alpha_8, // pixel with alpha in 8-bit byte
44
RGB_565, // pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word

‎yarn.lock

Lines changed: 104 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6389,7 +6389,7 @@ __metadata:
63896389
languageName: node
63906390
linkType: hard
63916391

6392-
"@types/jest@npm:^29.2.2":
6392+
"@types/jest@npm:^29.2.2, @types/jest@npm:^29.5.0":
63936393
version: 29.5.14
63946394
resolution: "@types/jest@npm:29.5.14"
63956395
dependencies:
@@ -7864,6 +7864,13 @@ __metadata:
78647864
languageName: node
78657865
linkType: hard
78667866

7867+
"async@npm:^3.2.3":
7868+
version: 3.2.6
7869+
resolution: "async@npm:3.2.6"
7870+
checksum: ee6eb8cd8a0ab1b58bd2a3ed6c415e93e773573a91d31df9d5ef559baafa9dab37d3b096fa7993e84585cac3697b2af6ddb9086f45d3ac8cae821bb2aab65682
7871+
languageName: node
7872+
linkType: hard
7873+
78677874
"at-least-node@npm:^1.0.0":
78687875
version: 1.0.0
78697876
resolution: "at-least-node@npm:1.0.0"
@@ -8357,7 +8364,7 @@ __metadata:
83578364
languageName: node
83588365
linkType: hard
83598366

8360-
"bs-logger@npm:0.x":
8367+
"bs-logger@npm:0.x, bs-logger@npm:^0.2.6":
83618368
version: 0.2.6
83628369
resolution: "bs-logger@npm:0.2.6"
83638370
dependencies:
@@ -8661,7 +8668,7 @@ __metadata:
86618668
languageName: node
86628669
linkType: hard
86638670

8664-
"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
8671+
"chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
86658672
version: 4.1.2
86668673
resolution: "chalk@npm:4.1.2"
86678674
dependencies:
@@ -10611,6 +10618,17 @@ __metadata:
1061110618
languageName: node
1061210619
linkType: hard
1061310620

10621+
"ejs@npm:^3.1.10":
10622+
version: 3.1.10
10623+
resolution: "ejs@npm:3.1.10"
10624+
dependencies:
10625+
jake: ^10.8.5
10626+
bin:
10627+
ejs: bin/cli.js
10628+
checksum: ce90637e9c7538663ae023b8a7a380b2ef7cc4096de70be85abf5a3b9641912dde65353211d05e24d56b1f242d71185c6d00e02cb8860701d571786d92c71f05
10629+
languageName: node
10630+
linkType: hard
10631+
1061410632
"electron-to-chromium@npm:^1.5.73":
1061510633
version: 1.5.97
1061610634
resolution: "electron-to-chromium@npm:1.5.97"
@@ -12152,6 +12170,15 @@ __metadata:
1215212170
languageName: node
1215312171
linkType: hard
1215412172

12173+
"filelist@npm:^1.0.4":
12174+
version: 1.0.4
12175+
resolution: "filelist@npm:1.0.4"
12176+
dependencies:
12177+
minimatch: ^5.0.1
12178+
checksum: a303573b0821e17f2d5e9783688ab6fbfce5d52aaac842790ae85e704a6f5e4e3538660a63183d6453834dedf1e0f19a9dadcebfa3e926c72397694ea11f5160
12179+
languageName: node
12180+
linkType: hard
12181+
1215512182
"filesize@npm:^8.0.6":
1215612183
version: 8.0.7
1215712184
resolution: "filesize@npm:8.0.7"
@@ -13295,9 +13322,12 @@ __metadata:
1329513322
resolution: "headless-skia@workspace:apps/headless"
1329613323
dependencies:
1329713324
"@shopify/react-native-skia": "workspace:*"
13325+
"@types/jest": ^29.5.0
1329813326
eslint: ^9.19.0
1329913327
eslint-config-react-native-wcandillon: ^3.10.2
13328+
jest: ^29.7.0
1330013329
react: ^18.0.0
13330+
ts-jest: ^29.1.1
1330113331
ts-node: ^10.9.2
1330213332
typescript: ^5.2.2
1330313333
languageName: unknown
@@ -14752,6 +14782,20 @@ __metadata:
1475214782
languageName: node
1475314783
linkType: hard
1475414784

14785+
"jake@npm:^10.8.5":
14786+
version: 10.9.2
14787+
resolution: "jake@npm:10.9.2"
14788+
dependencies:
14789+
async: ^3.2.3
14790+
chalk: ^4.0.2
14791+
filelist: ^1.0.4
14792+
minimatch: ^3.1.2
14793+
bin:
14794+
jake: bin/cli.js
14795+
checksum: f2dc4a086b4f58446d02cb9be913c39710d9ea570218d7681bb861f7eeaecab7b458256c946aeaa7e548c5e0686cc293e6435501e4047174a3b6a504dcbfcaae
14796+
languageName: node
14797+
linkType: hard
14798+
1475514799
"java-properties@npm:^1.0.2":
1475614800
version: 1.0.2
1475714801
resolution: "java-properties@npm:1.0.2"
@@ -15216,7 +15260,7 @@ __metadata:
1521615260
languageName: node
1521715261
linkType: hard
1521815262

15219-
"jest@npm:^29.3.1, jest@npm:^29.6.3":
15263+
"jest@npm:^29.3.1, jest@npm:^29.6.3, jest@npm:^29.7.0":
1522015264
version: 29.7.0
1522115265
resolution: "jest@npm:29.7.0"
1522215266
dependencies:
@@ -16038,7 +16082,7 @@ __metadata:
1603816082
languageName: node
1603916083
linkType: hard
1604016084

16041-
"make-error@npm:1.x, make-error@npm:^1.1.1":
16085+
"make-error@npm:1.x, make-error@npm:^1.1.1, make-error@npm:^1.3.6":
1604216086
version: 1.3.6
1604316087
resolution: "make-error@npm:1.3.6"
1604416088
checksum: b86e5e0e25f7f777b77fabd8e2cbf15737972869d852a22b7e73c17623928fccb826d8e46b9951501d3f20e51ad74ba8c59ed584f610526a48f8ccf88aaec402
@@ -17464,6 +17508,15 @@ __metadata:
1746417508
languageName: node
1746517509
linkType: hard
1746617510

17511+
"minimatch@npm:^5.0.1":
17512+
version: 5.1.6
17513+
resolution: "minimatch@npm:5.1.6"
17514+
dependencies:
17515+
brace-expansion: ^2.0.1
17516+
checksum: 7564208ef81d7065a370f788d337cd80a689e981042cb9a1d0e6580b6c6a8c9279eba80010516e258835a988363f99f54a6f711a315089b8b42694f5da9d0d77
17517+
languageName: node
17518+
linkType: hard
17519+
1746717520
"minimatch@npm:^8.0.2":
1746817521
version: 8.0.4
1746917522
resolution: "minimatch@npm:8.0.4"
@@ -22034,7 +22087,7 @@ __metadata:
2203422087
languageName: node
2203522088
linkType: hard
2203622089

22037-
"semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.1.3, semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3":
22090+
"semver@npm:^7.1.1, semver@npm:^7.1.2, semver@npm:^7.1.3, semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3, semver@npm:^7.7.1":
2203822091
version: 7.7.1
2203922092
resolution: "semver@npm:7.7.1"
2204022093
bin:
@@ -23726,6 +23779,44 @@ __metadata:
2372623779
languageName: node
2372723780
linkType: hard
2372823781

23782+
"ts-jest@npm:^29.1.1":
23783+
version: 29.3.0
23784+
resolution: "ts-jest@npm:29.3.0"
23785+
dependencies:
23786+
bs-logger: ^0.2.6
23787+
ejs: ^3.1.10
23788+
fast-json-stable-stringify: ^2.1.0
23789+
jest-util: ^29.0.0
23790+
json5: ^2.2.3
23791+
lodash.memoize: ^4.1.2
23792+
make-error: ^1.3.6
23793+
semver: ^7.7.1
23794+
type-fest: ^4.37.0
23795+
yargs-parser: ^21.1.1
23796+
peerDependencies:
23797+
"@babel/core": ">=7.0.0-beta.0 <8"
23798+
"@jest/transform": ^29.0.0
23799+
"@jest/types": ^29.0.0
23800+
babel-jest: ^29.0.0
23801+
jest: ^29.0.0
23802+
typescript: ">=4.3 <6"
23803+
peerDependenciesMeta:
23804+
"@babel/core":
23805+
optional: true
23806+
"@jest/transform":
23807+
optional: true
23808+
"@jest/types":
23809+
optional: true
23810+
babel-jest:
23811+
optional: true
23812+
esbuild:
23813+
optional: true
23814+
bin:
23815+
ts-jest: cli.js
23816+
checksum: 791f39ba74c5859596455ad5b08ed9a8431c8e3326faff8410ba4eddbe62583c19ede763d7ef0b65991ab5016ee89e420e3b0624849fd005ea3b60daf9e4fc31
23817+
languageName: node
23818+
linkType: hard
23819+
2372923820
"ts-morph@npm:^25.0.1":
2373023821
version: 25.0.1
2373123822
resolution: "ts-morph@npm:25.0.1"
@@ -23997,6 +24088,13 @@ __metadata:
2399724088
languageName: node
2399824089
linkType: hard
2399924090

24091+
"type-fest@npm:^4.37.0":
24092+
version: 4.38.0
24093+
resolution: "type-fest@npm:4.38.0"
24094+
checksum: 85fd7f3feff42bab6eac99f9f056d67932c36f834da87d68b0e89c040671415a902848c81be4d0f02919d157d7eae70dccf42c42dd2e2000d80e3ae1b97a9101
24095+
languageName: node
24096+
linkType: hard
24097+
2400024098
"type-is@npm:~1.6.18":
2400124099
version: 1.6.18
2400224100
resolution: "type-is@npm:1.6.18"

0 commit comments

Comments
 (0)