Support storybook dev

kat-tax · Dec 26, 2023 · 43808b5 · 43808b5
1 parent 1635200
commit 43808b5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/components/Dock.tsx b/src/components/Dock.tsx
@@ -40,8 +40,12 @@ const dockComponents: PanelCollection<IDockviewPanelProps> = {
     <Editor fs={props.params.fs} path={props.params.path} sync={props.params.sync}/>
   ),
   preview: (props: IDockviewPanelProps<{url: string}>) => (
-    // @ts-ignore
-    <iframe src={props.params.url} allow="cross-origin-isolated" credentialless/>
+    <iframe
+      src={props.params.url}
+      allow="cross-origin-isolated"
+      // @ts-ignore
+      credentialless
+    />
   ),
 };
 

diff --git a/src/hooks/useShell.ts b/src/hooks/useShell.ts
@@ -9,7 +9,7 @@ import Debug from '../utils/debug';
 
 const debug = Debug('useShell');
 
-import type {WebContainerProcess} from '@webcontainer/api';
+import type {FileSystemAPI, WebContainerProcess} from '@webcontainer/api';
 import type {GridviewPanelApi} from 'dockview';
 
 export interface ShellInstance {
@@ -19,11 +19,15 @@ export interface ShellInstance {
   start: (
     root: HTMLElement,
     panel: GridviewPanelApi,
-    onServerReady?: ServerReadyHandler,
+    onServerReady: ServerReadyHandler,
   ) => void,
 }
 
-export type ServerReadyHandler = (url: string, port: number) => void;
+export type ServerReadyHandler = (
+  url: string,
+  port: number,
+  fs: FileSystemAPI,
+) => void;
 
 export function useShell(): ShellInstance {
   const [container, setContainer] = useState<WebContainer | null>(null);
@@ -41,10 +45,19 @@ export function useShell(): ShellInstance {
     }
   }, [isDark]);
 
-  const start = useCallback(async (root: HTMLElement, panel: GridviewPanelApi, onServerReady?: ServerReadyHandler) => {
+  const start = useCallback(async (
+    root: HTMLElement,
+    panel: GridviewPanelApi,
+    onServerReady: ServerReadyHandler,
+  ) => {
     if (container) return;
     debug('Booting...');
 
+    // Specific to Storybook
+    // TODO: Move to a plugin
+    let storybookUrl = '';
+    let storybookPort = -1;
+
     // Setup shell
     const shell = await WebContainer.boot({workdirName: 'vslite'});
     await shell.fs.writeFile('.jshrc', jshRC);
@@ -95,11 +108,26 @@ export function useShell(): ShellInstance {
 
     // Pipe terminal to shell and vice versa
     terminal.onData(data => {input.write(data)});
-    jsh.output.pipeTo(new WritableStream({write(data) {terminal.write(data)}}));
+    jsh.output.pipeTo(new WritableStream({
+      write(data) {
+        terminal.write(data)
+        if (storybookUrl && data.includes('On your network:')) {
+          onServerReady(storybookUrl, storybookPort, shell.fs);
+        }
+      }
+    }));
 
     // Subscribe to events
     panel.onDidDimensionsChange(() => addon.fit());
-    shell.on('server-ready', (port, url) => onServerReady && onServerReady(url, port));
+    shell.on('server-ready', async (port, url) => {
+      debug('Server ready: ', port, url);
+      if (port === 6006) {
+        storybookUrl = url;
+        storybookPort = port;
+      } else {
+        onServerReady(url, port, shell.fs);
+      }
+    });
 
     // Set state
     setContainer(shell);

diff --git a/src/modules/panels.ts b/src/modules/panels.ts
@@ -74,6 +74,8 @@ export async function openStartFile(file: FileSystemFileHandle, fs: FileSystemAP
 
 export function createPreviewOpener(api: DockviewApi) {
   return (serverUrl: string, serverPort: number) => {
+    // Storybook can't be loaded immediately
+    if (serverPort !== 6006) return;
     const panel = api.getPanel(serverPort.toString());
     const title = `Port: ${serverPort}`;
     const url = `${serverUrl}?${Date.now()}`;