Merge pull request #2086 from Shopify/headless

Minor update to the headless API

Author: wcandillon

docs/docs/getting-started/headless.md

@@ -15,25 +15,29 @@ 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, draw } from "@shopify/react-native-skia/lib/commonjs/headless";
+import { Fill, makeOffscreenSurface, drawOffscreen } from "@shopify/react-native-skia/lib/commonjs/headless";
 
 (async () => {
   const width = 256;
   const height = 256;
   const r = size * 0.33;
   await LoadSkiaWeb();
-  const image = draw(
+  const surface = makeOffscreenSurface(width, height);
+  const image = draw(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>, width, height);
+      <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();
 })();
 ```
 

package/src/headless/index.ts

@@ -6,26 +6,30 @@ import type { ReactNode } from "react";
 import { JsiSkApi } from "../skia/web";
 import { SkiaRoot } from "../renderer/Reconciler";
 import { JsiDrawingContext } from "../dom/types";
+import type { SkSurface } from "../skia";
 
 export * from "../renderer/components";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let Skia: any;
 
-export const draw = (element: ReactNode, width: number, height: number) => {
+export const makeOffscreenSurface = (width: number, height: number) => {
   if (!Skia) {
     Skia = JsiSkApi(CanvasKit);
   }
   const surface = Skia.Surface.MakeOffscreen(width, height);
   if (surface === null) {
     throw new Error("Couldn't create surface!");
   }
+  return surface;
+};
+
+export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   surface.flush();
-  const image = surface.makeImageSnapshot();
-  return image;
+  return surface.makeImageSnapshot();
 };