Handle flexbox sometimes not parsing updates correctly when components were removed

Author: WillsonHaw

.changeset/three-carrots-camp.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning-plugin-flexbox": patch
+---
+
+Handle flexbox sometimes not parsing updates correctly when components were removed

packages/plugin-flexbox/src/LightningManager.ts

@@ -34,6 +34,7 @@ export class LightningManager {
         }
 
         this._elements.delete(element.id);
+        yoga.instance.applyStyle(element.id, null, true);
         yoga.instance.removeNode(element.id);
       }),
 
@@ -95,13 +96,17 @@ export class LightningManager {
   private _applyUpdates = (buffer: ArrayBuffer) => {
     const dataView = new SimpleDataView(buffer);
 
-    // See YogaManagerWorker.ts for the structure of the updates
-    while (dataView.hasSpace(1)) {
+    // See YogaManager.ts for the structure of the updates
+    while (dataView.hasSpace(12)) {
       const elementId = dataView.readUint32();
+      const x = dataView.readInt16();
+      const y = dataView.readInt16();
+      const width = dataView.readUint16();
+      const height = dataView.readUint16();
+
       const el = this._elements.get(elementId);
 
       if (!el) {
-        console.warn(`Element with ID ${elementId} not found.`);
         continue;
       }
 
@@ -121,23 +126,13 @@ export class LightningManager {
       }
 
       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);
+        dirty = el.setNodeProp('x', x) || dirty;
       }
 
       if (!skipY) {
-        dirty = el.setNodeProp('y', dataView.readInt16()) || dirty;
-      } else {
-        // Same as above
-        dataView.moveBy(2);
+        dirty = el.setNodeProp('y', y) || dirty;
       }
 
-      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) {

packages/react-lightning/src/render/index.tsx

@@ -14,7 +14,7 @@ import {
   SdfTextRenderer,
   WebGlCoreRenderer,
 } from '@lightningjs/renderer/webgl';
-import type { ComponentClass, ComponentType, ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { createContext, createElement } from 'react';
 import createReconciler from 'react-reconciler';
 import type { LightningElement } from '../types';
@@ -76,12 +76,6 @@ const defaultOptions: Partial<RenderOptions> = {
   debug: false,
 };
 
-function isReactClassComponent(
-  ReactComponent: ComponentType<unknown>,
-): ReactComponent is ComponentClass<unknown> {
-  return ReactComponent.prototype?.isReactComponent;
-}
-
 export async function createRoot(
   target: string | HTMLElement,
   options: RenderOptions | (() => RenderOptions),