chore: Clean up storybook and lightning

- A little more straightforward to create react-lightning apps
- Fixes issues with multiple instances of react-lightning (eg for storybook)
- Fixes storybook stories logging multiple renderer errors

Note: lightning renderer beta14 seems to have issues with multiple instances of
lightning rendering text with multiple renderers. When using storybook you'll
need to refresh the page each time to fix text rendering for now.

Author: WillsonHaw

apps/react-lightning-example/src/components/Button.tsx

@@ -11,7 +11,7 @@ const containerStyles: LightningElementStyle = {
   w: 330,
   h: 100,
   borderRadius: 15,
-  border: { width: 3, color: 0xffffffff },
+  border: { w: 3, color: 0xffffffff },
   display: 'flex' as const,
   justifyContent: 'center' as const,
   alignItems: 'center' as const,

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

@@ -1,11 +1,7 @@
-import {
-  Canvas,
-  createRoot as createRootLng,
-  type RenderOptions,
-} from '@plextv/react-lightning';
+import { Canvas, type RenderOptions } from '@plextv/react-lightning';
 import { plugin as cssTransformPlugin } from '@plextv/react-lightning-plugin-css-transform';
 import { plugin as flexPlugin } from '@plextv/react-lightning-plugin-flexbox';
-import { createRoot as createRootDom } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { keyMap } from './keyMap';
 import { AnimationPage } from './pages/AnimationPage';
@@ -70,7 +66,7 @@ const options: RenderOptions = {
     },
   ],
   numImageWorkers: window.navigator.hardwareConcurrency || 2,
-  plugins: [cssTransformPlugin(), flexPlugin()],
+  plugins: [cssTransformPlugin(), flexPlugin({ useWebWorker: true })],
   shaders: [
     'Border',
     'Shadow',
@@ -85,8 +81,6 @@ const options: RenderOptions = {
   },
 };
 
-const lngAsRoot = true;
-
 const App = () => (
   <Canvas keyMap={keyMap} options={options}>
     <RouterProvider router={router} />
@@ -99,14 +93,4 @@ if (!appElement) {
   throw new Error('No app element found');
 }
 
-if (lngAsRoot) {
-  createRootLng(appElement, options)
-    .then((root) => {
-      root.render(<App />);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-} else {
-  createRootDom(appElement).render(<App />);
-}
+createRoot(appElement).render(<App />);

apps/react-lightning-example/src/pages/Page60.tsx

@@ -29,7 +29,6 @@ export const Question = ({
           fontSize: 48,
           maxLines: 3,
           textAlign: 'center',
-          autosize: false,
           h: TEXT_HEIGHT,
           y: TEXT_HEIGHT / 2,
           maxWidth: w,
@@ -58,31 +57,29 @@ export const Page60 = () => {
   }, []);
 
   return (
-    <>
-      <Column
-        focusable
-        style={{
-          gap: 20,
-          zIndex: 10,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          w: 1920,
-          h: 1080,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Row style={{ gap: 20 }}>
-          <Button onPress={addText}>Add text</Button>
-          <Button onPress={reduceW}>Shrink</Button>
-          <Button onPress={increaseW}>Grow</Button>
-        </Row>
+    <Column
+      focusable
+      style={{
+        gap: 20,
+        zIndex: 10,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        w: 1920,
+        h: 1080,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Row style={{ gap: 20 }}>
+        <Button onPress={addText}>Add text</Button>
+        <Button onPress={reduceW}>Shrink</Button>
+        <Button onPress={increaseW}>Grow</Button>
+      </Row>
 
-        <Question text={text} w={w} />
-        <Question text="This is a multi line test. Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
-        <Question text="This is a truncation test. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu sem, placerat eu egestas eu, rutrum id neque. Integer rhoncus faucibus ante a tempor. Fusce mollis est sit amet nunc fermentum, ut pellentesque nisl ultrices. Duis ac dolor sed odio feugiat venenatis in ut est. Proin tincidunt posuere accumsan. Etiam lobortis ultrices bibendum. Vivamus consectetur nulla quis mollis aliquet. Nam scelerisque justo in nibh ornare, eu dapibus quam pulvinar. In a libero placerat, sagittis ante quis, maximus turpis. Proin neque eros, eleifend vel est hendrerit, pharetra laoreet nibh. Donec sed urna eu mi iaculis sollicitudin eu in ante. Aliquam ultrices blandit sem, eget suscipit ipsum bibendum in. Fusce nec lorem id dui interdum vestibulum." />
-      </Column>
-    </>
+      <Question text={text} w={w} />
+      <Question text="This is a multi line test. Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
+      <Question text="This is a truncation test. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu sem, placerat eu egestas eu, rutrum id neque. Integer rhoncus faucibus ante a tempor. Fusce mollis est sit amet nunc fermentum, ut pellentesque nisl ultrices. Duis ac dolor sed odio feugiat venenatis in ut est. Proin tincidunt posuere accumsan. Etiam lobortis ultrices bibendum. Vivamus consectetur nulla quis mollis aliquet. Nam scelerisque justo in nibh ornare, eu dapibus quam pulvinar. In a libero placerat, sagittis ante quis, maximus turpis. Proin neque eros, eleifend vel est hendrerit, pharetra laoreet nibh. Donec sed urna eu mi iaculis sollicitudin eu in ante. Aliquam ultrices blandit sem, eget suscipit ipsum bibendum in. Fusce nec lorem id dui interdum vestibulum." />
+    </Column>
   );
 };

apps/react-lightning-example/src/pages/ShaderPage.tsx

@@ -2,29 +2,27 @@ import { Column } from '@plextv/react-lightning-components';
 
 export const ShaderPage = () => {
   return (
-    <>
-      <Column
-        focusable
-        style={{
-          gap: 20,
-          zIndex: 10,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          w: 1920,
-          h: 1080,
-          justifyContent: 'center',
-          alignItems: 'center',
+    <Column
+      focusable
+      style={{
+        gap: 20,
+        zIndex: 10,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        w: 1920,
+        h: 1080,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <lng-view
+        shader={{
+          type: 'MyCustomShader',
+          props: {},
         }}
-      >
-        <lng-view
-          shader={{
-            type: 'MyCustomShader',
-            props: {},
-          }}
-          style={{ w: 300, h: 300 }}
-        />
-      </Column>
-    </>
+        style={{ w: 300, h: 300 }}
+      />
+    </Column>
   );
 };

apps/react-lightning-example/src/pages/TexturePage.tsx

@@ -2,33 +2,31 @@ import { Column } from '@plextv/react-lightning-components';
 
 export const TexturePage = () => {
   return (
-    <>
-      <Column
-        focusable
-        style={{
-          gap: 20,
-          zIndex: 10,
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          w: 1920,
-          h: 1080,
-          justifyContent: 'center',
-          alignItems: 'center',
+    <Column
+      focusable
+      style={{
+        gap: 20,
+        zIndex: 10,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        w: 1920,
+        h: 1080,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <lng-view
+        texture={{
+          type: 'MyCustomTexture',
+          props: {
+            percent: 55,
+            w: 300,
+            h: 300,
+          },
         }}
-      >
-        <lng-view
-          texture={{
-            type: 'MyCustomTexture',
-            props: {
-              percent: 55,
-              w: 300,
-              h: 300,
-            },
-          }}
-          style={{ w: 300, h: 300, color: 0xe5a00dff }}
-        />
-      </Column>
-    </>
+        style={{ w: 300, h: 300, color: 0xe5a00dff }}
+      />
+    </Column>
   );
 };

apps/react-native-lightning-example/package.json

@@ -15,10 +15,10 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "react-native build-lightning",
+    "build": "vite build",
     "clean": "del ./dist",
-    "dev": "react-native run-lightning",
-    "preview": "react-native preview-lightning",
+    "dev": "vite --host",
+    "preview": "vite preview --host --port 3333",
     "test:unit": "vitest run --passWithNoTests"
   },
   "dependencies": {
@@ -40,10 +40,10 @@
     "@plextv/vite-plugin-msdf-fontgen": "workspace:*",
     "@plextv/vite-plugin-react-native-lightning": "workspace:*",
     "@plextv/vite-plugin-react-reanimated-lightning": "workspace:*",
-    "@react-native-community/cli": "15.1.3",
     "@repo/typescript-config": "workspace:*",
     "@shopify/flash-list": "1.8.3",
     "@types/react": "18.3.14",
+    "@types/react-dom": "18.3.1",
     "@vitejs/plugin-legacy": "^7.0.0",
     "typescript": "5.8.3"
   },
@@ -53,7 +53,6 @@
   "//": "unsure why react-dom needed to be ignored...",
   "depcheck": {
     "ignoreMatches": [
-      "@react-native-community/cli",
       "typescript",
       "react-dom"
     ]

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

@@ -1,6 +1,7 @@
-import { Canvas, type RenderOptions } from '@plextv/react-lightning';
+import { Canvas } from '@plextv/react-lightning';
 import { Column, Row } from '@plextv/react-lightning-components';
 import '@plextv/react-lightning-plugin-flexbox/jsx';
+import { getReactNativePlugins } from '@plextv/react-native-lightning';
 import type { LinkingOptions } from '@react-navigation/native';
 import {
   createNavigatorFactory,
@@ -10,7 +11,8 @@ import {
   useNavigation,
   useNavigationBuilder,
 } from '@react-navigation/native';
-import { AppRegistry, Button } from 'react-native';
+import { createRoot } from 'react-dom/client';
+import { Button } from 'react-native';
 import { ErrorBoundary } from './ErrorBoundary';
 import { keyMap } from './keyMap';
 import { AnimationBuilderTest } from './pages/AnimationBuilderTest';
@@ -160,7 +162,51 @@ const MainApp = () => {
 const App = () => {
   return (
     <ErrorBoundary>
-      <Canvas keyMap={keyMap}>
+      <Canvas
+        keyMap={keyMap}
+        options={{
+          numImageWorkers: window.navigator.hardwareConcurrency - 1 || 2,
+          fonts: [
+            {
+              type: 'sdf',
+              fontFamily: 'sans-serif',
+              atlasUrl: '/fonts/Ubuntu-Bold.msdf.png',
+              atlasDataUrl: '/fonts/Ubuntu-Bold.msdf.json',
+              metrics: {
+                ascender: 776,
+                descender: -185,
+                lineGap: 56,
+                unitsPerEm: 1000,
+              },
+            },
+            {
+              type: 'sdf',
+              fontFamily: 'sans-serif',
+              atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
+              atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',
+              metrics: {
+                ascender: 776,
+                descender: -185,
+                lineGap: 56,
+                unitsPerEm: 1000,
+              },
+            },
+          ],
+          plugins: getReactNativePlugins([], {
+            flexbox: {
+              useWebWorker: true,
+            },
+          }),
+          shaders: [
+            'Border',
+            'Shadow',
+            'Rounded',
+            'RoundedWithBorder',
+            'RoundedWithShadow',
+            'RoundedWithBorderAndShadow',
+          ],
+        }}
+      >
         <NavigationContainer linking={linking} theme={DarkTheme}>
           <MainApp />
         </NavigationContainer>
@@ -169,50 +215,10 @@ const App = () => {
   );
 };
 
-AppRegistry.registerComponent('plex', () => App);
-AppRegistry.runApplication('plex', {
-  rootId: 'app',
-  renderOptions: {
-    driver: 'normal',
-    numImageWorkers: window.navigator.hardwareConcurrency - 1 || 2,
-    fonts: [
-      {
-        type: 'sdf',
-        fontFamily: 'sans-serif',
-        atlasUrl: '/fonts/Ubuntu-Bold.msdf.png',
-        atlasDataUrl: '/fonts/Ubuntu-Bold.msdf.json',
-        metrics: {
-          ascender: 776,
-          descender: -185,
-          lineGap: 56,
-          unitsPerEm: 1000,
-        },
-      },
-      {
-        type: 'sdf',
-        fontFamily: 'sans-serif',
-        atlasUrl: '/fonts/Ubuntu-Regular.msdf.png',
-        atlasDataUrl: '/fonts/Ubuntu-Regular.msdf.json',
-        metrics: {
-          ascender: 776,
-          descender: -185,
-          lineGap: 56,
-          unitsPerEm: 1000,
-        },
-      },
-    ],
-    shaders: [
-      'Border',
-      'Shadow',
-      'Rounded',
-      'RoundedWithBorder',
-      'RoundedWithShadow',
-      'RoundedWithBorderAndShadow',
-    ],
-  } as RenderOptions,
-  pluginOptions: {
-    flexbox: {
-      useWebWorker: true,
-    },
-  },
-});
+const appElement = document.getElementById('app');
+
+if (!appElement) {
+  throw new Error('No app element found');
+}
+
+createRoot(appElement).render(<App />);