fix(flexbox): Prevent unserializable styles passed to flexbox worker

Author: WillsonHaw

.changeset/cyan-wolves-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning-plugin-flexbox": patch
+---
+
+(flexbox) Prevent unserializable values being passed to worker"

packages/plugin-flexbox/src/YogaManagerWorker.ts

@@ -2,6 +2,7 @@ import type { LightningElementStyle } from '@plextv/react-lightning';
 import { EventEmitter } from 'tseep';
 import { NodeOperations } from './types/NodeOperations';
 import { SimpleDataView } from './util/SimpleDataView';
+import { toSerializableValue } from './util/toSerializableValue';
 import Worker from './worker?worker&inline';
 import type { YogaManager, YogaManagerEvents } from './YogaManager';
 
@@ -64,8 +65,6 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
   let _sizeRequestPromise: Promise<void> | null = null;
 
   function flushSendStyles() {
-    const needsRender = _needsRender;
-
     if (Object.keys(_stylesToSend).length === 0) {
       return;
     }
@@ -76,7 +75,7 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
 
     worker.postMessage({
       method: 'applyStyles',
-      args: [_stylesToSend, !needsRender],
+      args: [_stylesToSend, !_needsRender],
     });
 
     _needsRender = false;
@@ -92,14 +91,23 @@ function wrapWorker<T>(worker: Worker): Workerized<T> {
     skipRender = false,
   ) {
     if (style) {
-      if (!_stylesToSend[elementId]) {
+      let styleToSend = _stylesToSend[elementId];
+
+      if (!styleToSend) {
         _numStylesToSend++;
+        styleToSend = {};
+        _stylesToSend[elementId] = styleToSend;
       }
 
-      _stylesToSend[elementId] = {
-        ..._stylesToSend[elementId],
-        ...style,
-      };
+      // Add style props if they're serializable
+      for (const [key, value] of Object.entries(style)) {
+        const serializedValue = toSerializableValue(key, value);
+
+        if (serializedValue != null) {
+          // @ts-expect-error
+          styleToSend[key] = serializedValue;
+        }
+      }
     } else {
       delete _stylesToSend[elementId];
       _numStylesToSend--;

packages/plugin-flexbox/src/util/toSerializableValue.ts

@@ -0,0 +1,42 @@
+function isPrimitiveValue(
+  valueType:
+    | 'string'
+    | 'number'
+    | 'bigint'
+    | 'boolean'
+    | 'symbol'
+    | 'undefined'
+    | 'object'
+    | 'function',
+): boolean {
+  return (
+    valueType === 'string' ||
+    valueType === 'number' ||
+    valueType === 'boolean' ||
+    valueType === 'bigint'
+  );
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: Any value can be passed in
+export function toSerializableValue<T>(key: string, value: any): T | null {
+  const valueType = typeof value;
+
+  if (isPrimitiveValue(valueType)) {
+    return value as T;
+  } else if (valueType === 'object') {
+    // Only transforms can be objects
+    if (key === 'transform') {
+      return value as T;
+    } else if ('current' in value && isPrimitiveValue(typeof value.current)) {
+      // ...unless it's a reanimated animation. Unfortunately, there's no real
+      // good way to serialize animations. There's also no real good way to
+      // keep this logic in the reanimated plugin, so we'll just have to do it
+      // here.
+      return value.current as T;
+    }
+
+    return null;
+  }
+
+  return null;
+}