built in websocket server for withStorybook

examples/expo-example/.storybook/index.tsx

@@ -7,7 +7,7 @@ const StorybookUIRoot = view.getStorybookUI({
     getItem: AsyncStorage.getItem,
     setItem: AsyncStorage.setItem,
   },
-  // enableWebsockets: true,
+  enableWebsockets: true,
 
   // initialSelection: { kind: 'TextInput', name: 'Basic' },
   // isUIHidden: true,

examples/expo-example/babel.config.js

@@ -1,7 +1,22 @@
+// const path = require('path');
+
 module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
     plugins: [['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }]],
+    // plugins: [
+    //   [
+    //     'babel-plugin-react-docgen',
+    //     {
+    //       ignore: [
+    //         '**/node_modules/**',
+    //         '**/__tests__/**',
+    //         '**/__mocks__/**',
+    //         path.resolve(__dirname, '../../node_modules/*'),
+    //       ],
+    //     },
+    //   ],
+    // ],
   };
 };

examples/expo-example/metro.config.js

@@ -19,4 +19,8 @@ const withStorybook = require('@storybook/react-native/metro/withStorybook');
 module.exports = withStorybook(defaultConfig, {
   enabled: process.env.STORYBOOK_ENABLED === 'true',
   configPath: path.resolve(__dirname, './.storybook'),
+  websockets: {
+    port: 7007,
+    host: 'localhost',
+  },
 });

packages/react-native/metro/withStorybook.js

@@ -1,14 +1,39 @@
 const path = require('path');
 const fs = require('fs');
 const { generate } = require('../scripts/generate');
+const { WebSocketServer } = require('ws');
 
 let alreadyReplaced = false;
 
-module.exports = (config, { configPath, enabled }) => {
+module.exports = (config, { configPath, enabled, websockets }) => {
   if (!enabled) {
     return config;
   }
 
+  if (websockets) {
+    const port = websockets.port ?? 7007;
+
+    const host = websockets.host ?? 'localhost';
+
+    const wss = new WebSocketServer({ port, host });
+
+    wss.on('connection', function connection(ws) {
+      console.log('websocket connection established');
+
+      ws.on('error', console.error);
+
+      ws.on('message', function message(data) {
+        try {
+          const json = JSON.parse(data.toString());
+
+          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+  }
+
   generate({
     configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
   });

packages/react-native/package.json

@@ -53,7 +53,8 @@
     "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
     "type-fest": "~2.19",
-    "util": "^0.12.4"
+    "util": "^0.12.4",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",

yarn.lock

@@ -5084,6 +5084,7 @@ __metadata:
     type-fest: "npm:~2.19"
     typescript: "npm:~5.3.3"
     util: "npm:^0.12.4"
+    ws: "npm:^8.18.0"
   peerDependencies:
     "@gorhom/bottom-sheet": ">=4"
     react: "*"
@@ -20007,7 +20008,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.16.0, ws@npm:^8.2.3":
+"ws@npm:^8.11.0, ws@npm:^8.12.1, ws@npm:^8.16.0, ws@npm:^8.18.0, ws@npm:^8.2.3":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
   peerDependencies: