Fix flexbox web worker race condition

Author: WillsonHaw

.changeset/icy-toes-report.md

@@ -0,0 +1,7 @@
+---
+"@plextv/react-native-lightning-example": patch
+"@plextv/react-lightning-example": patch
+"@plextv/react-lightning-plugin-flexbox": patch
+---
+
+Fix race condition in flexbox worker mode

apps/react-lightning-example/vite.config.mjs

@@ -39,11 +39,6 @@ const config = {
     },
     force: true,
   },
-  define: {
-    'process.env': JSON.stringify({
-      NODE_ENV: process.env.NODE_ENV,
-    }),
-  },
 };
 
 export default config;

apps/react-native-lightning-example/vite.config.mjs

@@ -4,7 +4,7 @@ import reactReanimatedLightningPlugin from '@plextv/vite-plugin-react-reanimated
 import legacy from '@vitejs/plugin-legacy';
 import { defineConfig } from 'vite';
 
-const config = defineConfig({
+const config = defineConfig((env) => ({
   base: './',
   plugins: [
     reactNativeLightningPlugin(),
@@ -30,11 +30,10 @@ const config = defineConfig({
     hmr: false,
   },
   define: {
-    'process.env': JSON.stringify({
-      NODE_ENV: process.env.NODE_ENV,
-    }),
-    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+    __DEV__: JSON.stringify(
+      (env.mode ?? process.env.NODE_ENV) !== 'production',
+    ),
   },
-});
+}));
 
 export default config;

apps/storybook/.storybook/main.ts

@@ -16,10 +16,9 @@ const config: StorybookConfig = {
   },
   viteFinal(config) {
     config.define = {
-      'process.env': JSON.stringify({
-        NODE_ENV: process.env.NODE_ENV,
-      }),
-      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+      __DEV__: JSON.stringify(
+        (config.mode ?? process.env.NODE_ENV) !== 'production',
+      ),
     };
 
     config.plugins = [

packages/plugin-flexbox/src/YogaManagerWorker.ts

@@ -2,7 +2,7 @@ import type { LightningElementStyle } from '@plextv/react-lightning';
 import { EventEmitter } from 'tseep';
 import { NodeOperations } from './types/NodeOperations';
 import { SimpleDataView } from './util/SimpleDataView';
-import Worker from './worker?worker';
+import Worker from './worker?worker&inline';
 import type { YogaManager, YogaManagerEvents } from './YogaManager';
 
 const DELAY_DURATION = 1;
@@ -50,9 +50,16 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
   const _eventEmitter = new EventEmitter<YogaManagerEvents>();
   let _stylesToSend: Record<number, Partial<LightningElementStyle>> = {};
   let _needsRender = false;
-  // TODO: Handle possible overflows
-  const _childOperations = new SimpleDataView();
-  const _sizeRequests = new SimpleDataView();
+  const _childOperations = new SimpleDataView(
+    undefined,
+    undefined,
+    flushChildOperations,
+  );
+  const _sizeRequests = new SimpleDataView(
+    undefined,
+    undefined,
+    flushSizeRequests,
+  );
   let _sizeRequestPromise: Promise<void> | null = null;
 
   const queueSendStyles = delay(() => {
@@ -62,6 +69,10 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
       return;
     }
 
+    // If we need to send styles, make sure we send any pending
+    // child operations first
+    flushChildOperations();
+
     worker.postMessage({
       method: 'applyStyles',
       args: [_stylesToSend, !needsRender],
@@ -90,7 +101,7 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
     queueSendStyles();
   }
 
-  const queueSendNodeOperations = delay(() => {
+  function flushChildOperations() {
     const buffer = _childOperations.buffer;
 
     if (buffer.byteLength === 0) {
@@ -106,7 +117,9 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
     }
 
     _childOperations.reset();
-  }, DELAY_DURATION);
+  }
+
+  const queueSendNodeOperations = delay(flushChildOperations, DELAY_DURATION);
 
   function nodeOperation(
     method: 'addNode' | 'removeNode' | 'addChildNode',
@@ -150,7 +163,7 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
     queueSendNodeOperations();
   }
 
-  const queueSendSizeRequests = delay(() => {
+  function flushSizeRequests() {
     if (_sizeRequestPromise) {
       return _sizeRequestPromise;
     }
@@ -207,7 +220,9 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
 
       _sizeRequests.reset();
     });
-  }, DELAY_DURATION);
+  }
+
+  const queueSendSizeRequests = delay(flushSizeRequests, DELAY_DURATION);
 
   function getClampedSize(elementId: number) {
     const callbackId = getId();

templates/app-template/vite.config.ts

@@ -22,11 +22,6 @@ const config: InlineConfig = {
   build: {
     target: 'esnext',
   },
-  define: {
-    'process.env': JSON.stringify({
-      NODE_ENV: process.env.NODE_ENV,
-    }),
-  },
 };
 
 export default config;