New scene graph

apps/paper/src/Tests/deserialize.ts

@@ -103,7 +103,6 @@ const parseProp = (value: any, assets: Assets): any => {
     Object.keys(value).forEach((key) => {
       parsed[key] = parseProp(value[key], assets);
     });
-    console.log({ parsed });
     return parsed;
   }
   return value;

packages/skia/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
   // not be probed for tests
   modulePathIgnorePatterns: [
     "<rootDir>/lib",
-    "(setup)|(setup.(ts|tsx))$|globalSetup.ts|globalTeardown.ts",
+    "(setup)|(setup.(ts|tsx))$|globalSetup.ts|globalTeardown.ts|MockDeclaration.ts",
   ],
   transform: {
     "^.+\\.(ts|tsx)$": ["ts-jest", { tsconfig: "./tsconfig.test.json" }],

packages/skia/src/__tests__/setup.ts

@@ -82,7 +82,7 @@ export const checkImage = (
       if (diffPixelsCount > maxPixelDiff && !shouldFail) {
         console.log(`${p} didn't match`);
         fs.writeFileSync(`${p}.test.png`, PNG.sync.write(toTest));
-        fs.writeFileSync(`${p}-diff-test.png`, PNG.sync.write(diffImage));
+        //fs.writeFileSync(`${p}-diff-test.png`, PNG.sync.write(diffImage));
       }
       if (shouldFail) {
         expect(diffPixelsCount).not.toBeLessThanOrEqual(maxPixelDiff);

packages/skia/src/dom/nodes/datatypes/Circle.ts

@@ -2,10 +2,11 @@
 
 import type { CircleDef, ScalarCircleDef } from "../../types";
 
-export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef => {
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx !== undefined;
+  return (def as any).cx !== undefined;
+};
 
 export const processCircle = (def: CircleDef) => {
   if (isCircleScalarDef(def)) {

packages/skia/src/dom/nodes/datatypes/Path.ts

@@ -16,5 +16,6 @@ export const processPath = (Skia: Skia, rawPath: PathDef) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isPathDef = (def: any): def is PathDef =>
-  typeof def === "string" || isPath(def);
+export const isPathDef = (def: any): def is PathDef => {
+  return typeof def === "string" || isPath(def);
+};

packages/skia/src/dom/nodes/datatypes/Rect.ts

@@ -7,18 +7,19 @@ import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 import { processRadius } from "./Radius";
 
 export const isEdge = (pos: Vector, b: SkRect) => {
-  "worklet";
   return (
     pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
   );
 };
 
 // We have an issue to check property existence on JSI backed instances
-const isRRectCtor = (def: RRectDef): def is RRectCtor =>
-  (def as any).rect === undefined;
+const isRRectCtor = (def: RRectDef): def is RRectCtor => {
+  return (def as any).rect === undefined;
+};
 // We have an issue to check property existence on JSI backed instances
-const isRectCtor = (def: RectDef): def is RectCtor =>
-  (def as any).rect === undefined;
+const isRectCtor = (def: RectDef): def is RectCtor => {
+  return (def as any).rect === undefined;
+};
 
 export const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {

packages/skia/src/dom/types/DeclarationContext.ts

@@ -1,3 +1,5 @@
+"worklet";
+
 import type {
   SkShader,
   SkPaint,
@@ -25,8 +27,11 @@ export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
 class Declaration<T> {
   private decls: T[] = [];
   private indexes = [0];
+  private composer?: Composer<T>;
 
-  constructor(private composer?: Composer<T>) {}
+  constructor(composer?: Composer<T>) {
+    this.composer = composer;
+  }
 
   private get index() {
     return this.indexes[this.indexes.length - 1];
@@ -53,6 +58,9 @@ class Declaration<T> {
   }
 
   popAllAsOne() {
+    if (this.decls.length === 0) {
+      return undefined;
+    }
     if (!this.composer) {
       throw new Error("No composer for this type of declaration");
     }
@@ -62,14 +70,16 @@ class Declaration<T> {
 }
 
 export class DeclarationContext {
+  public Skia: Skia;
   readonly paints: Declaration<SkPaint>;
   readonly maskFilters: Declaration<SkMaskFilter>;
   readonly shaders: Declaration<SkShader>;
   readonly pathEffects: Declaration<SkPathEffect>;
   readonly imageFilters: Declaration<SkImageFilter>;
   readonly colorFilters: Declaration<SkColorFilter>;
 
-  constructor(private Skia: Skia) {
+  constructor(Skia: Skia) {
+    this.Skia = Skia;
     const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
     const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
       this.Skia.ImageFilter

packages/skia/src/external/reanimated/renderHelpers.ts

@@ -6,8 +6,8 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-let HAS_REANIMATED = false;
-let HAS_REANIMATED_3 = false;
+export let HAS_REANIMATED = false;
+export let HAS_REANIMATED_3 = false;
 try {
   require("react-native-reanimated");
   HAS_REANIMATED = true;

packages/skia/src/renderer/HostConfig.ts

@@ -78,7 +78,6 @@ export const skHostConfig: SkiaHostConfig = {
   /**
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
-  now: Date.now,
   supportsMutation: true,
   isPrimaryRenderer: false,
   supportsPersistence: false,
@@ -242,6 +241,7 @@ export const skHostConfig: SkiaHostConfig = {
   insertBefore: (parent, child, before) => {
     insertBefore(parent, child, before);
   },
+
   // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
   getCurrentEventPriority: () => DefaultEventPriority,
   beforeActiveInstanceBlur: () => {},

packages/skia/src/renderer/__tests__/setup.tsx

@@ -8,15 +8,13 @@ import type { Server, WebSocket } from "ws";
 
 import type * as SkiaExports from "../../index";
 import { JsiSkApi } from "../../skia/web/JsiSkia";
-import type { Node } from "../../dom/nodes";
-import { JsiSkDOM } from "../../dom/nodes";
 import { Group } from "../components";
 import type { SkImage, SkFont, Skia, SkCanvas } from "../../skia/types";
 import { isPath } from "../../skia/types";
 import { E2E } from "../../__tests__/setup";
-import { SkiaRoot } from "../Reconciler";
-import { JsiDrawingContext } from "../../dom/types/DrawingContext";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
+import { SkiaSGRoot } from "../../sksg/Reconciler";
+import type { Node } from "../../sksg/nodes";
 
 import { SkiaObject } from "./e2e/setup";
 
@@ -172,11 +170,6 @@ export const importSkia = (): typeof SkiaExports => {
   };
 };
 
-export const getSkDOM = () => {
-  const { Skia } = importSkia();
-  return new JsiSkDOM({ Skia }, false);
-};
-
 export const PIXEL_RATIO = 3;
 export const fontSize = 32 * PIXEL_RATIO;
 export const width = 256 * PIXEL_RATIO;
@@ -197,21 +190,20 @@ export const mountCanvas = (element: ReactNode) => {
   expect(ckSurface).toBeDefined();
   const canvas = ckSurface.getCanvas();
 
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
   return {
     surface: ckSurface,
     root,
     draw: () => {
-      const ctx = new JsiDrawingContext(Skia, canvas);
-      root.dom.render(ctx);
+      root.drawOnCanvas(canvas);
     },
   };
 };
 
 export const serialize = (element: ReactNode) => {
   const { root } = mountCanvas(element);
-  const serialized = serializeNode(root.dom);
+  const serialized = serializeNode(root.sg);
   return JSON.stringify(serialized);
 };
 
@@ -228,6 +220,8 @@ interface SerializedNode {
 const serializeSkOjects = (obj: any): any => {
   if (typeof obj === "function") {
     return { __typename__: "Function", source: `${obj.toString()}` };
+  } else if (obj instanceof Float32Array) {
+    return { __typename__: "Float32Array", value: Array.from(obj) };
   } else if (Array.isArray(obj)) {
     return obj.map((item) => serializeSkOjects(item));
   } else if (obj && typeof obj === "object" && "__typename__" in obj) {
@@ -316,7 +310,7 @@ const serializeSkOjects = (obj: any): any => {
 
 const serializeNode = (node: Node<any>): SerializedNode => {
   const props: any = {};
-  const ogProps = node.getProps();
+  const ogProps = node.props;
   if (ogProps) {
     Object.keys(ogProps)
       .filter((key) => key !== "children")
@@ -327,7 +321,7 @@ const serializeNode = (node: Node<any>): SerializedNode => {
   return {
     type: node.type,
     props,
-    children: node.children().map((child) => serializeNode(child)),
+    children: node.children.map((child) => serializeNode(child)),
   };
 };
 

packages/skia/src/renderer/processors/Animations/Animations.ts

@@ -1,8 +1,4 @@
-export type SharedValueType<T = number> = {
-  value: T;
-};
-
-export type AnimatedProp<T> = T | SharedValueType<T>;
+export type AnimatedProp<T> = T | { value: T };
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"

packages/skia/src/renderer/typeddash.ts

@@ -1,5 +1,7 @@
-export const mapKeys = <T extends object>(obj: T) =>
-  Object.keys(obj) as (keyof T)[];
+export const mapKeys = <T extends object>(obj: T) => {
+  "worklet";
+  return Object.keys(obj) as (keyof T)[];
+};
 
 export const exhaustiveCheck = (a: never): never => {
   "worklet";

packages/skia/src/skia/types/Path/Path.ts

@@ -47,8 +47,10 @@ export enum PathVerb {
 
 export type PathCommand = number[];
 
-export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath =>
-  obj !== null && obj.__typename__ === "Path";
+export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath => {
+  "worklet";
+  return obj !== null && obj.__typename__ === "Path";
+};
 
 export interface SkPath extends SkJSIInstance<"Path"> {
   /**

packages/skia/src/skia/types/Shader/Shader.ts

@@ -1,3 +1,5 @@
+"worklet";
+
 import type { SkJSIInstance } from "../JsiInstance";
 import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
@@ -18,12 +20,13 @@ export interface Uniforms {
   [name: string]: Uniform;
 }
 
-const isVector = (obj: unknown): obj is Vector =>
+const isVector = (obj: unknown): obj is Vector => {
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (obj as any).x !== undefined && (obj as any).y !== undefined;
+  return (obj as any).x !== undefined && (obj as any).y !== undefined;
+};
 
-const processValue = (values: number[], value: Uniform) => {
+function processValue(values: number[], value: Uniform) {
   if (typeof value === "number") {
     values.push(value);
   } else if (Array.isArray(value)) {
@@ -33,7 +36,7 @@ const processValue = (values: number[], value: Uniform) => {
   } else if (value instanceof Float32Array) {
     values.push(...value);
   }
-};
+}
 
 export const processUniforms = (
   source: SkRuntimeEffect,

packages/skia/src/sksg/Container.ts

@@ -0,0 +1,102 @@
+import { type SharedValue } from "react-native-reanimated";
+
+import Rea from "../external/reanimated/ReanimatedProxy";
+import type { Skia, SkCanvas } from "../skia/types";
+import {
+  HAS_REANIMATED,
+  HAS_REANIMATED_3,
+} from "../external/reanimated/renderHelpers";
+
+import { DrawingContext } from "./DrawingContext";
+import type { Node } from "./nodes";
+import { draw, isSharedValue } from "./nodes";
+
+const drawOnscreen = (Skia: Skia, nativeId: number, root: Node[]) => {
+  "worklet";
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  // TODO: This is only support from 3.15 and above (check the exact version)
+  // This could be polyfilled in C++ if needed (or in JS via functions only?)
+  const ctx = new DrawingContext(Skia, canvas);
+  root.forEach((node) => {
+    draw(ctx, node);
+  });
+  const picture = rec.finishRecordingAsPicture();
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+export class Container {
+  public _root: Node[] = [];
+  public unmounted = false;
+
+  private values = new Set<SharedValue<unknown>>();
+  private mapperId: number | null = null;
+
+  constructor(public Skia: Skia, private nativeId: number) {}
+
+  get root() {
+    return this._root;
+  }
+
+  set root(root: Node[]) {
+    const isOnscreen = this.nativeId !== -1;
+    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
+      throw new Error("React Native Skia only supports Reanimated 3 and above");
+    }
+    if (isOnscreen) {
+      if (this.mapperId !== null) {
+        Rea.stopMapper(this.mapperId);
+      }
+      const { nativeId, Skia } = this;
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        drawOnscreen(Skia, nativeId, root);
+      }, Array.from(this.values));
+    }
+    this._root = root;
+  }
+
+  clear() {
+    console.log("clear container");
+  }
+
+  redraw() {
+    const isOnscreen = this.nativeId !== -1;
+    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
+      throw new Error("React Native Skia only supports Reanimated 3 and above");
+    }
+    if (isOnscreen) {
+      const { nativeId, Skia, root } = this;
+      Rea.runOnUI(() => {
+        drawOnscreen(Skia, nativeId, root);
+      })();
+    }
+  }
+
+  getNativeId() {
+    return this.nativeId;
+  }
+
+  unregisterValues(values: object) {
+    Object.values(values)
+      .filter(isSharedValue)
+      .forEach((value) => {
+        this.values.delete(value);
+      });
+  }
+
+  registerValues(values: object) {
+    Object.values(values)
+      .filter(isSharedValue)
+      .forEach((value) => {
+        this.values.add(value);
+      });
+  }
+
+  drawOnCanvas(canvas: SkCanvas) {
+    const ctx = new DrawingContext(this.Skia, canvas);
+    this.root.forEach((node) => {
+      draw(ctx, node);
+    });
+  }
+}