@solidtv/renderer 1.0.0

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@solidtv/renderer",
+  "version": "1.0.0",
+  "description": "SolidTV Renderer",
+  "type": "module",
+  "main": "./dist/exports/index.js",
+  "exports": {
+    ".": "./dist/exports/index.js",
+    "./utils": "./dist/exports/utils.js",
+    "./canvas": "./dist/exports/canvas.js",
+    "./canvas/shaders": "./dist/exports/canvas-shaders.js",
+    "./webgl": "./dist/exports/webgl.js",
+    "./webgl/shaders": "./dist/exports/webgl-shaders.js",
+    "./inspector": "./dist/exports/inspector.js"
+  },
+  "scripts": {
+    "start": "cd examples && pnpm start",
+    "start:prod": "cd examples && pnpm start:prod",
+    "build": "tsc --build",
+    "build:docker": "cd visual-regression && pnpm build:docker",
+    "watch": "tsc --build --watch",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "test:visual": "cd visual-regression && pnpm test:visual",
+    "test:visual:update": "cd visual-regression && pnpm test:visual:update",
+    "test:visual:update-ci": "cd visual-regression && pnpm test:visual:update-ci",
+    "lint": "pnpm run lint:prettier && pnpm run lint:eslint",
+    "lint:fix": "pnpm run lint:fix:prettier && pnpm run lint:fix:eslint",
+    "lint:prettier": "prettier --check \"**/*.{ts,js,cjs,md}\"",
+    "lint:fix:prettier": "prettier --write \"**/*.{ts,js,cjs,md}\"",
+    "lint:eslint": "eslint .",
+    "lint:fix:eslint": "eslint --fix .",
+    "typedoc": "typedoc",
+    "prepare": "husky install",
+    "prepack": "pnpm run build",
+    "node-version": "node --version",
+    "release": "release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solid-tv/renderer.git"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "SolidTV",
+    "SolidJS",
+    "WebGL",
+    "JS",
+    "WPE"
+  ],
+  "author": "Chris Lorenzo",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/solid-tv/renderer/issues"
+  },
+  "homepage": "https://github.com/solid-tv/renderer#readme",
+  "devDependencies": {
+    "@types/node": "^20.19.17",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
+    "@vitest/coverage-v8": "^2.1.9",
+    "concurrently": "^8.2.2",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^8.10.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.3.0",
+    "prettier": "^2.8.8",
+    "release-it": "^17.10.0",
+    "typedoc": "^0.28.13",
+    "typescript": "~5.9.2",
+    "vitest": "^2.1.9",
+    "vitest-mock-extended": "^2.0.2"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{js,cjs,md}": "prettier --write"
+  },
+  "files": [
+    "dist",
+    "src",
+    "exports",
+    "LICENSE",
+    "NOTICE",
+    "README.md",
+    "scripts"
+  ],
+  "packageManager": "pnpm@10.17.0",
+  "engines": {
+    "npm": ">= 10.0.0",
+    "pnpm": ">= 10.17.0",
+    "node": ">= 18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/common/CommonTypes.ts

@@ -0,0 +1,145 @@
+import type { CoreNodeRenderState } from '../core/CoreNode.js';
+import type { TextureError } from '../core/TextureError.js';
+
+/**
+ * Types shared between Main Space and Core Space
+ *
+ * @remarks
+ *
+ * @module
+ */
+
+/**
+ * Represents a width and height.
+ */
+export interface Dimensions {
+  w: number;
+  h: number;
+}
+
+/**
+ * Payload for when text is loaded
+ */
+export type NodeTextLoadedPayload = {
+  type: 'text';
+  dimensions: Dimensions;
+};
+
+/**
+ * Payload for when texture is loaded
+ */
+export type NodeTextureLoadedPayload = {
+  type: 'texture';
+  dimensions: Dimensions;
+};
+
+/**
+ * Combined type for all loaded payloads
+ */
+export type NodeLoadedPayload =
+  | NodeTextLoadedPayload
+  | NodeTextureLoadedPayload;
+
+/**
+ * Payload for when text failed to load
+ */
+export type NodeTextFailedPayload = {
+  type: 'text';
+  error: Error;
+};
+
+/**
+ * Payload for when texture failed to load
+ */
+export type NodeTextureFailedPayload = {
+  type: 'texture';
+  error: TextureError;
+};
+
+/**
+ * Payload for when texture failed to load
+ */
+export type NodeTextureFreedPayload = {
+  type: 'texture';
+};
+
+/**
+ * Payload for when node renderable status changes
+ */
+export type NodeRenderablePayload = {
+  type: 'renderable';
+  isRenderable: boolean;
+};
+
+/**
+ * Combined type for all failed payloads
+ */
+export type NodeFailedPayload =
+  | NodeTextFailedPayload
+  | NodeTextureFailedPayload;
+
+/**
+ * Event handler for when the texture/text of a node has loaded
+ */
+export type NodeLoadedEventHandler = (
+  target: any,
+  payload: NodeLoadedPayload,
+) => void;
+
+/**
+ * Event handler for when the texture/text of a node has failed to load
+ */
+export type NodeFailedEventHandler = (
+  target: any,
+  payload: NodeFailedPayload,
+) => void;
+
+/**
+ * Event handler for when the renderable status of a node changes
+ */
+export type NodeRenderableEventHandler = (
+  target: any,
+  payload: NodeRenderablePayload,
+) => void;
+
+export type NodeRenderStatePayload = {
+  type: 'renderState';
+  payload: CoreNodeRenderState;
+};
+
+export type NodeRenderStateEventHandler = (
+  target: any,
+  payload: NodeRenderStatePayload,
+) => void;
+
+/**
+ * Event payload for when an FpsUpdate event is emitted by either the Stage or
+ * MainRenderer
+ */
+export interface FpsUpdatePayload {
+  fps: number;
+  contextSpyData: Record<string, number> | null;
+}
+
+/**
+ * Event payload for when a frame tick event is emitted by the Stage
+ */
+export interface FrameTickPayload {
+  time: number;
+  delta: number;
+}
+
+/**
+ * Event payload for when a an animtion tick event is emitted
+ */
+export interface AnimationTickPayload {
+  progress: number;
+}
+
+/**
+ * Event payload for when an RenderUpdate event is emitted by the Stage
+ */
+export interface RenderUpdatePayload {
+  quads: number;
+  renderOps: number;
+}

package/src/common/EventEmitter.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { IEventEmitter } from './IEventEmitter.js';
+
+/**
+ * EventEmitter base class
+ */
+export class EventEmitter implements IEventEmitter {
+  private eventListeners: { [eventName: string]: any } = {};
+
+  on(event: string, listener: (target: any, data: any) => void): void {
+    let listeners = this.eventListeners[event];
+    if (!listeners) {
+      listeners = [];
+    }
+    listeners.push(listener);
+    this.eventListeners[event] = listeners;
+  }
+
+  off(event: string, listener?: (target: any, data: any) => void): void {
+    const listeners = this.eventListeners[event];
+    if (!listeners) {
+      return;
+    }
+    if (!listener) {
+      delete this.eventListeners[event];
+      return;
+    }
+    const index = listeners.indexOf(listener);
+    if (index >= 0) {
+      listeners.splice(index, 1);
+    }
+  }
+
+  once(event: string, listener: (target: any, data: any) => void): void {
+    const onceListener = (target: any, data: any) => {
+      this.off(event, onceListener);
+      listener(target, data);
+    };
+    this.on(event, onceListener);
+  }
+
+  emit(event: string, data?: any): void {
+    const listeners = this.eventListeners[event];
+    if (!listeners) {
+      return;
+    }
+    [...listeners].forEach((listener) => {
+      listener(this, data);
+    });
+  }
+
+  removeAllListeners() {
+    this.eventListeners = {};
+  }
+}

package/src/common/IAnimationController.ts

@@ -0,0 +1,65 @@
+export type AnimationControllerState =
+  | 'scheduled'
+  | 'running'
+  | 'paused'
+  | 'stopped';
+
+/**
+ * Animation Controller interface
+ *
+ * @remarks
+ * This interface is used to control animations. It provides methods to start,
+ * stop, pause, and restore animations. It also provides a way to wait for the
+ * animation to stop.
+ */
+export interface IAnimationController {
+  /**
+   * Start the animation
+   *
+   * @remarks
+   * If the animation is paused this method will resume the animation.
+   */
+  start(): IAnimationController;
+  /**
+   * Stop the animation
+   *
+   * @remarks
+   * Resets the animation to the start state
+   */
+  stop(): IAnimationController;
+  /**
+   * Pause the animation
+   */
+  pause(): IAnimationController;
+  /**
+   * Restore the animation to the original values
+   */
+  restore(): IAnimationController;
+
+  /**
+   * Promise that resolves when the last active animation is stopped (including
+   * when the animation finishes naturally).
+   *
+   * @remarks
+   * The Promise returned by this method is reset every time the animation
+   * enters a new start/stop cycle. This means you must call `start()` before
+   * calling this method if you want to wait for the animation to stop.
+   *
+   * This method always returns a resolved promise if the animation is currently
+   * in a stopped state.
+   *
+   * @returns
+   */
+  waitUntilStopped(): Promise<void>;
+
+  /**
+   * Current state of the animation
+   *
+   * @remarks
+   * - `stopped` - The animation is currently stopped (at the beggining or end
+   *   of the animation)
+   * - `running` - The animation is currently running
+   * - `paused` - The animation is currently paused
+   */
+  readonly state: AnimationControllerState;
+}

package/src/common/IEventEmitter.ts

@@ -0,0 +1,11 @@
+export interface IEventEmitter<
+  T extends object = { [s: string]: (target: any, data: any) => void },
+> {
+  on<K extends keyof T>(event: Extract<K, string>, listener: T[K]): void;
+  once<K extends keyof T>(event: Extract<K, string>, listener: T[K]): void;
+  off<K extends keyof T>(event: Extract<K, string>, listener: T[K]): void;
+  emit<K extends keyof T>(
+    event: Extract<K, string>,
+    data: Parameters<any>[1],
+  ): void;
+}

package/src/core/Autosizer.ts

@@ -0,0 +1,205 @@
+import { UpdateType, type CoreNode } from './CoreNode.js';
+import type { Coord } from './lib/utils.js';
+
+export enum AutosizeMode {
+  Children = 0,
+  Texture = 1,
+}
+
+export enum AutosizeUpdateType {
+  None = 0,
+  Filtered = 1,
+  All = 2,
+}
+
+const applyDimensions = (node: CoreNode, w: number, h: number) => {
+  node.props.w = w;
+  node.props.h = h;
+  node.setUpdateType(UpdateType.Local);
+};
+
+const getFilteredChildren = (
+  children: number[],
+  childMap: Map<number, CoreNode>,
+) => {
+  const filtered: CoreNode[] = [];
+  while (children.length > 0) {
+    const id = children.pop()!;
+    const child = childMap.get(id)!;
+    filtered.push(child);
+  }
+  return filtered;
+};
+
+let autosizerId = 0;
+
+export class Autosizer {
+  public id = autosizerId++;
+  mode: AutosizeMode = AutosizeMode.Children;
+  updateType: AutosizeUpdateType = AutosizeUpdateType.All;
+  lastWidth: number = 0;
+  lastHeight: number = 0;
+  lastHasChanged: boolean = false;
+
+  flaggedChildren: number[] = [];
+  childMap: Map<number, CoreNode> = new Map();
+
+  minX = Infinity;
+  minY = Infinity;
+  maxX = -Infinity;
+  maxY = -Infinity;
+
+  corners: [Coord, Coord, Coord, Coord] = [
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+  ];
+
+  constructor(public node: CoreNode) {
+    if (node.texture !== null) {
+      this.mode = AutosizeMode.Texture;
+    }
+  }
+
+  attach(node: CoreNode) {
+    this.childMap.set(node.id, node);
+    node.parentAutosizer = this;
+
+    //bubble down to attach to grandchildren
+    if (node.children.length > 0 && node.autosizer === null) {
+      const children = node.children;
+      for (let i = 0; i < children.length; i++) {
+        this.attach(children[i]!);
+      }
+    }
+  }
+
+  detach(node: CoreNode) {
+    if (this.childMap.delete(node.id) === true) {
+      node.parentAutosizer = null;
+      if (node.children.length > 0 && node.autosizer === null) {
+        const children = node.children;
+        for (let i = 0; i < children.length; i++) {
+          this.detach(children[i]!);
+        }
+      }
+      //detached a child, need full update
+      this.setUpdateType(AutosizeUpdateType.All);
+    }
+  }
+
+  patch(id: number) {
+    const entry = this.childMap.get(id);
+    if (entry === undefined) {
+      return;
+    }
+    this.flaggedChildren.push(id);
+    this.setUpdateType(AutosizeUpdateType.Filtered);
+  }
+
+  setUpdateType(updateType: AutosizeUpdateType) {
+    this.updateType |= updateType;
+    this.node.setUpdateType(UpdateType.Autosize);
+  }
+
+  setMode(mode: AutosizeMode) {
+    this.mode = mode;
+    this.setUpdateType(AutosizeUpdateType.All);
+  }
+
+  update() {
+    const node = this.node;
+
+    if (
+      this.mode === AutosizeMode.Texture &&
+      node.texture !== null &&
+      node.texture.dimensions !== null
+    ) {
+      const { w, h } = node.texture.dimensions;
+      if (w !== node.w || h !== node.h) {
+        applyDimensions(node, w, h);
+      }
+      this.lastWidth = w;
+      this.lastHeight = h;
+      this.updateType = AutosizeUpdateType.None;
+      return;
+    }
+
+    let filtered: CoreNode[] =
+      this.updateType === AutosizeUpdateType.Filtered
+        ? getFilteredChildren(this.flaggedChildren, this.childMap)
+        : Array.from(this.childMap.values());
+
+    if (filtered.length === 0) {
+      return;
+    }
+
+    const corners = this.corners;
+    let minX = this.minX;
+    let minY = this.minY;
+    let maxX = this.maxX;
+    let maxY = this.maxY;
+
+    for (let i = 0; i < filtered.length; i++) {
+      const child = filtered[i]!;
+      if (child.isRenderable === false || child.localTransform === undefined) {
+        continue;
+      }
+
+      const { tx, ty, ta, tb, tc, td } = child.localTransform;
+      const w = child.props.w;
+      const h = child.props.h;
+
+      const childMinX = tx;
+      const childMaxX = tx + w * ta;
+      const childMinY = ty;
+      const childMaxY = ty + h * td;
+
+      corners[0].x = childMinX;
+      corners[0].y = childMinY;
+      corners[1].x = childMaxX;
+
+      //no rotation/scale
+      if (tb === 0 && tc === 0) {
+        corners[1].y = childMinY;
+        corners[2].x = childMaxX;
+        corners[2].y = childMaxY;
+        corners[3].x = childMinX;
+        corners[3].y = childMaxY;
+      } else {
+        corners[1].y = tx + w * tc;
+        corners[2].x = tx + w * ta + h * tb;
+        corners[2].y = ty + w * tc + h * td;
+        corners[3].x = tx + h * tb;
+        corners[3].y = ty + h * td;
+      }
+
+      for (let j = 0; j < 4; j++) {
+        const corner = corners[j]!;
+        if (corner.x < minX) minX = corner.x;
+        if (corner.y < minY) minY = corner.y;
+        if (corner.x > maxX) maxX = corner.x;
+        if (corner.y > maxY) maxY = corner.y;
+      }
+    }
+    this.updateType = AutosizeUpdateType.None;
+
+    const newWidth = maxX > 0 ? maxX : 0;
+    const newHeight = maxY > 0 ? maxY : 0;
+
+    applyDimensions(node, newWidth, newHeight);
+    this.lastWidth = newWidth;
+    this.lastHeight = newHeight;
+  }
+
+  destroy() {
+    if (this.childMap.size > 0) {
+      for (const child of this.childMap.values()) {
+        child.parentAutosizer = null;
+      }
+    }
+    this.childMap.clear();
+    this.flaggedChildren.length = 0;
+  }
+}