chore(🎮): add headless app example (#2945)

Author: wcandillon

apps/docs/docs/getting-started/headless.md

@@ -15,11 +15,12 @@ You will notice in the example below that the import URL looks different than th
 
 ```tsx
 import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/commonjs/web/LoadSkiaWeb";
-import { Fill, makeOffscreenSurface, drawOffscreen, getSkiaExports } from "@shopify/react-native-skia/lib/commonjs/headless";
+import { Circle, drawOffscreen, getSkiaExports, Group, makeOffscreenSurface } from "@shopify/react-native-skia/lib/commonjs/headless";
 
 (async () => {
   const width = 256;
   const height = 256;
+  const size = 60;
   const r = size * 0.33;
   await LoadSkiaWeb();
   // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()

apps/headless/README.md

@@ -0,0 +1,13 @@
+## Commands
+
+**Install Dependencies**
+
+```console
+yarn install
+```
+
+**Run**
+
+```console
+bun ./src/helloWorld.tsx
+```

apps/headless/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "headless-skia",
+	"version": "1.0.0",
+	"scripts": {
+		"test": "ts-node ./src/helloWorld.tsx",
+		"tsc": "tsc"
+	},
+	"dependencies": {
+		"@shopify/react-native-skia": "workspace:*",
+		"react": "^18.0.0",
+		"typescript": "^5.2.2"
+	},
+	"devDependencies": {
+		"eslint": "^9.19.0",
+		"eslint-config-react-native-wcandillon": "^3.10.2",
+		"ts-node": "^10.9.2"
+	}
+}

apps/headless/src/helloWorld.tsx

@@ -0,0 +1,34 @@
+import {
+	Circle,
+	drawOffscreen,
+	getSkiaExports,
+	Group,
+	makeOffscreenSurface,
+} from "@shopify/react-native-skia/src/headless";
+import { LoadSkiaWeb } from "@shopify/react-native-skia/src/web/LoadSkiaWeb";
+import React from "react";
+
+// https://shopify.github.io/react-native-skia/docs/getting-started/headless/
+(async () => {
+	const width = 256;
+	const height = 256;
+	const size = 60;
+	const r = size * 0.33;
+	await LoadSkiaWeb();
+	// Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
+	// Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
+	const { Skia: _ } = getSkiaExports();
+	const surface = makeOffscreenSurface(width, height);
+	const image = drawOffscreen(
+		surface,
+		<Group blendMode="multiply">
+			<Circle cx={r} cy={r} r={r} color="cyan" />
+			<Circle cx={size - r} cy={r} r={r} color="magenta" />
+			<Circle cx={size / 2} cy={size - r} r={r} color="yellow" />
+		</Group>,
+	);
+	console.log(image.encodeToBase64());
+	// Cleaning up CanvasKit resources
+	image.dispose();
+	surface.dispose();
+})();

apps/headless/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "eslint-config-react-native-wcandillon/tsconfig.base",
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "commonjs",
+    "lib": ["es2018", "dom"],
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "rootDir": "./src"
+  }
+}

packages/skia/src/sksg/Container.ts

@@ -2,6 +2,7 @@ import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
+import type { ISkiaViewApi } from "../views/types";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -11,6 +12,10 @@ import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
+declare global {
+  var SkiaViewApi: ISkiaViewApi;
+}
+
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";