Improve yoga when running with workers

This should prevent postMessage from being the bottleneck for calling yoga in a worker

Author: WillsonHaw

.changeset/every-words-check.md

@@ -0,0 +1,7 @@
+---
+"@plextv/react-native-lightning-example": patch
+"@plextv/react-lightning": patch
+"@plextv/react-lightning-plugin-flexbox": patch
+---
+
+More optimizations with yoga workers

.vscode/settings.json

@@ -5,11 +5,16 @@
     "source.fixAll.biome": "explicit"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["lightningjs", "threadx"],
+  "cSpell.words": [
+    "lightningjs",
+    "threadx"
+  ],
   "biome.enabled": true,
   "json.schemas": [
     {
-      "fileMatch": ["manifest.json"],
+      "fileMatch": [
+        "manifest.json"
+      ],
       "url": "https://json.schemastore.org/chrome-manifest.json"
     }
   ],
@@ -27,5 +32,6 @@
   },
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
-}
+  },
+  "vitest.disableWorkspaceWarning": true
+}

apps/react-native-lightning-example/src/index.tsx

@@ -194,7 +194,7 @@ AppRegistry.runApplication('plex', {
   } as RenderOptions,
   pluginOptions: {
     flexbox: {
-      useWebWorker: false,
+      useWebWorker: true,
     },
   },
 });

packages/plugin-flexbox/src/LightningManager.ts

@@ -2,24 +2,16 @@ import type {
   LightningElement,
   LightningElementStyle,
 } from '@plextv/react-lightning';
-import {
-  UPDATE_HEIGHT,
-  UPDATE_WIDTH,
-  UPDATE_X,
-  UPDATE_Y,
-} from './types/UpdateFlags';
 import type { YogaOptions } from './types/YogaOptions';
+import { SimpleDataView } from './util/SimpleDataView';
 import yoga from './yoga';
 
-const DEBOUNCE_DELAY = 1;
-
 /**
- * Manages the lifecycle of Yoga nodes for Lightning elements. This can only be done on the main thread and not the worker thread.
+ * Manages the lifecycle of Yoga nodes for Lightning elements. This can only be
+ * done on the main thread and not the worker thread.
  */
 export class LightningManager {
   private _elements = new Map<number, LightningElement>();
-  private _stylesToSend: Record<number, Partial<LightningElementStyle>> = {};
-  private _needsRender: null | number = null;
 
   public async init(yogaOptions?: YogaOptions) {
     await yoga.load(yogaOptions);
@@ -42,53 +34,51 @@ export class LightningManager {
         }
 
         this._elements.delete(element.id);
-        await yoga.instance.removeNode(element.id);
-        this._render(element.id);
+        yoga.instance.removeNode(element.id);
       }),
 
       element.on('childAdded', async (child, index) => {
-        await yoga.instance.addChildNode(element.id, child.id, index);
-
-        await this.applyStyle(element.id, element.props.style);
+        yoga.instance.addChildNode(element.id, child.id, index);
+        this.applyStyle(element.id, element.style);
       }),
 
       element.on('childRemoved', async (child) => {
-        await yoga.instance.removeNode(child.id);
-
-        this._render(element.id);
+        // This will remove any pending worker style updates that haven't been sent
+        yoga.instance.applyStyle(child.id, null, true);
+        yoga.instance.removeNode(child.id);
       }),
 
       element.on('stylesChanged', async () => {
-        await this.applyStyle(element.id, element.props.style);
+        this.applyStyle(element.id, element.props.style);
       }),
 
       element.on('textureLoaded', async (node, event) => {
-        // Text elements will already have its height and width set on the
-        // node before loaded event is fired, so we need to set it on the yoga
-        // node. If there's a maxWidth set, we should clamp the text to that size.
+        // Text elements will already have its height and width set on the node
+        // before loaded event is fired, so we need to set it on the yoga node.
+        // If there's a maxWidth set, we should clamp the text to that size.
         // TODO: Get a proper return type
-        const computedSize = await yoga.instance.getClampedSize(element.id);
-
-        if (
-          computedSize !== null &&
-          computedSize > 0 &&
-          event.dimensions.width > computedSize
-        ) {
-          node.contain = 'width';
-          node.width = computedSize;
+        if (element.isTextElement) {
+          const computedSize = await yoga.instance.getClampedSize(element.id);
+
+          if (
+            computedSize !== null &&
+            computedSize > 0 &&
+            event.dimensions.width > computedSize
+          ) {
+            node.contain = 'width';
+            node.width = computedSize;
+          }
         }
 
-        await this.applyStyle(element.id, {
+        this.applyStyle(element.id, {
           width: node.width,
           height: node.height,
         });
-
-        this._render(element.id);
       }),
     ];
   }
 
-  public async applyStyle(
+  public applyStyle(
     elementId: number,
     style?: Partial<LightningElementStyle> | null,
     skipRender = false,
@@ -97,55 +87,17 @@ export class LightningManager {
       return;
     }
 
-    // if (style) {
-    //   this._stylesToSend[elementId] = {
-    //     ...this._stylesToSend[elementId],
-    //     ...style,
-    //   };
-    // } else {
-    //   delete this._stylesToSend[elementId];
-    // }
-
-    // if (!skipRender) {
-    //   this._needsRender = elementId;
-    // }
-
     if (style) {
-      await yoga.instance.applyStyle(elementId, style);
-    }
-
-    if (!skipRender) {
-      await this._render(elementId);
+      yoga.instance.applyStyle(elementId, style, skipRender);
     }
-
-    // return this._sendStyles();
   }
 
-  private _sendStyles = debounced(async (): Promise<void> => {
-    if (Object.keys(this._stylesToSend).length === 0) {
-      return;
-    }
-
-    await yoga.instance.applyStyles(this._stylesToSend);
-    this._stylesToSend = {};
-
-    if (this._needsRender !== null) {
-      await this._render(this._needsRender);
-      this._needsRender = null;
-    }
-  }, DEBOUNCE_DELAY);
-
   private _applyUpdates = (buffer: ArrayBuffer) => {
-    const dataView = new DataView(buffer);
+    const dataView = new SimpleDataView(buffer);
 
     // See YogaManagerWorker.ts for the structure of the updates
-    const numItems = dataView.getUint32(0);
-    let offset = 4;
-
-    for (let i = 0; i < numItems; i++) {
-      const elementId = dataView.getUint32(offset);
-      offset += 4;
-
+    while (dataView.hasSpace(1)) {
+      const elementId = dataView.readUint32();
       const el = this._elements.get(elementId);
 
       if (!el) {
@@ -168,65 +120,37 @@ export class LightningManager {
           el.style.transform?.translateY === undefined;
       }
 
-      const flags = dataView.getUint8(offset);
-      offset += 1;
-
-      if (flags & UPDATE_X) {
-        if (!skipX) {
-          dirty = el.setNodeProp('x', dataView.getInt16(offset)) || dirty;
-        }
-
-        offset += 2;
+      if (!skipX) {
+        dirty = el.setNodeProp('x', dataView.readInt16()) || dirty;
+      } else {
+        // If the x is skipped, we still need to read the value to maintain the
+        // correct offset in the data view.
+        dataView.moveBy(2);
       }
 
-      if (flags & UPDATE_Y) {
-        if (!skipY) {
-          dirty = el.setNodeProp('y', dataView.getInt16(offset)) || dirty;
-        }
-
-        offset += 2;
+      if (!skipY) {
+        dirty = el.setNodeProp('y', dataView.readInt16()) || dirty;
+      } else {
+        // Same as above
+        dataView.moveBy(2);
       }
 
-      if (flags & UPDATE_WIDTH) {
-        dirty = el.setNodeProp('width', dataView.getUint16(offset)) || dirty;
-        offset += 2;
+      const width = dataView.readUint16();
+      const height = dataView.readUint16();
+
+      // If width is 0, we should not set it on the node, as it will cause
+      // layout issues.
+      if (width !== 0) {
+        dirty = el.setNodeProp('width', width) || dirty;
       }
 
-      if (flags & UPDATE_HEIGHT) {
-        dirty = el.setNodeProp('height', dataView.getUint16(offset)) || dirty;
-        offset += 2;
+      if (height !== 0) {
+        dirty = el.setNodeProp('height', height) || dirty;
       }
 
       if (dirty) {
         el.emitLayoutEvent();
       }
     }
   };
-
-  private async _render(elementId: number) {
-    yoga.instance.queueRender(elementId);
-  }
-}
-
-function debounced<T extends (...args: unknown[]) => void | Promise<void>>(
-  fn: T,
-  delay: number,
-): T {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
-  let lastArgs: unknown[];
-
-  const debouncedFn = function (this: unknown, ...args: unknown[]) {
-    lastArgs = args;
-
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-
-    timeout = setTimeout(() => {
-      timeout = null;
-      fn.apply(this, lastArgs);
-    }, delay);
-  };
-
-  return debouncedFn as T;
 }

packages/plugin-flexbox/src/YogaManager.spec.ts

@@ -1,12 +1,7 @@
 import type { LightningElementStyle } from '@plextv/react-lightning';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-  UPDATE_HEIGHT,
-  UPDATE_WIDTH,
-  UPDATE_X,
-  UPDATE_Y,
-} from './types/UpdateFlags';
 import type { YogaOptions } from './types/YogaOptions';
+import { SimpleDataView } from './util/SimpleDataView';
 import { YogaManager } from './YogaManager';
 
 // Mock the yoga-layout/load module
@@ -315,29 +310,15 @@ describe('YogaManager', () => {
         yogaManager.on('render', (arrayBuffer) => {
           expect(arrayBuffer.byteLength).toBeGreaterThan(0); // Ensure some data is present
 
-          const dataView = new DataView(arrayBuffer);
-          let offset = 0;
-
-          // Number of nodes
-          expect(dataView.getUint32(offset)).toBe(numNodes);
-          offset += 4;
+          const dataView = new SimpleDataView(arrayBuffer);
 
           // Check each node's data
           for (let i = 0; i < numNodes; i++) {
-            expect(dataView.getUint32(offset)).toBe(i); // Node ID
-            offset += 4;
-            expect(dataView.getUint8(offset)).toBe(
-              UPDATE_X | UPDATE_Y | UPDATE_WIDTH | UPDATE_HEIGHT,
-            ); // Flags
-            offset += 1;
-            expect(dataView.getInt16(offset)).toBe(10); // x
-            offset += 2;
-            expect(dataView.getInt16(offset)).toBe(20); // y
-            offset += 2;
-            expect(dataView.getInt16(offset)).toBe(100); // width
-            offset += 2;
-            expect(dataView.getInt16(offset)).toBe(50); // height
-            offset += 2;
+            expect(dataView.readUint32()).toBe(i); // Node ID
+            expect(dataView.readInt16()).toBe(10); // x
+            expect(dataView.readInt16()).toBe(20); // y
+            expect(dataView.readInt16()).toBe(100); // width
+            expect(dataView.readInt16()).toBe(50); // height
           }
 
           resolve();