feat: added the "Open Preview in a New Tab" (#1101)

* added the "Open Preview in a New Tab"

* enhancement

[Open Preview] [▼] // Two buttons side by side
|
+-- [Mobile (375x667)] // Dropdown menu
|-- [Tablet (768x1024)]
|-- [Laptop (1366x768)]
+-- [Desktop (1920x1080)]

* Update Preview.tsx

* Update Preview.tsx

app/components/workbench/Preview.tsx

@@ -1,5 +1,5 @@
-import { useStore } from '@nanostores/react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useStore } from '@nanostores/react';
 import { IconButton } from '~/components/ui/IconButton';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { PortDropdown } from './PortDropdown';
@@ -7,6 +7,19 @@ import { ScreenshotSelector } from './ScreenshotSelector';
 
 type ResizeSide = 'left' | 'right' | null;
 
+interface WindowSize {
+  name: string;
+  width: number;
+  height: number;
+}
+
+const WINDOW_SIZES: WindowSize[] = [
+  { name: 'Mobile (375x667)', width: 375, height: 667 },
+  { name: 'Tablet (768x1024)', width: 768, height: 1024 },
+  { name: 'Laptop (1366x768)', width: 1366, height: 768 },
+  { name: 'Desktop (1920x1080)', width: 1920, height: 1080 },
+];
+
 export const Preview = memo(() => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -15,6 +28,7 @@ export const Preview = memo(() => {
   const [activePreviewIndex, setActivePreviewIndex] = useState(0);
   const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isPreviewOnly, setIsPreviewOnly] = useState(false);
   const hasSelectedPreview = useRef(false);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
@@ -27,7 +41,7 @@ export const Preview = memo(() => {
   const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
 
   // Use percentage for width
-  const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
+  const [widthPercent, setWidthPercent] = useState<number>(37.5);
 
   const resizingState = useRef({
     isResizing: false,
@@ -37,8 +51,10 @@ export const Preview = memo(() => {
     windowWidth: window.innerWidth,
   });
 
-  // Define the scaling factor
-  const SCALING_FACTOR = 2; // Adjust this value to increase/decrease sensitivity
+  const SCALING_FACTOR = 2;
+
+  const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false);
+  const [selectedWindowSize, setSelectedWindowSize] = useState<WindowSize>(WINDOW_SIZES[0]);
 
   useEffect(() => {
     if (!activePreview) {
@@ -79,7 +95,6 @@ export const Preview = memo(() => {
     [],
   );
 
-  // When previews change, display the lowest port if user hasn't selected a preview
   useEffect(() => {
     if (previews.length > 1 && !hasSelectedPreview.current) {
       const minPortIndex = previews.reduce(findMinPortIndex, 0);
@@ -122,7 +137,6 @@ export const Preview = memo(() => {
       return;
     }
 
-    // Prevent text selection
     document.body.style.userSelect = 'none';
 
     resizingState.current.isResizing = true;
@@ -134,7 +148,7 @@ export const Preview = memo(() => {
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
 
-    e.preventDefault(); // Prevent any text selection on mousedown
+    e.preventDefault();
   };
 
   const onMouseMove = (e: MouseEvent) => {
@@ -145,7 +159,6 @@ export const Preview = memo(() => {
     const dx = e.clientX - resizingState.current.startX;
     const windowWidth = resizingState.current.windowWidth;
 
-    // Apply scaling factor to increase sensitivity
     const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
 
     let newWidthPercent = resizingState.current.startWidthPercent;
@@ -156,7 +169,6 @@ export const Preview = memo(() => {
       newWidthPercent = resizingState.current.startWidthPercent - dxPercent;
     }
 
-    // Clamp the width between 10% and 90%
     newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
 
     setWidthPercent(newWidthPercent);
@@ -168,17 +180,12 @@ export const Preview = memo(() => {
     document.removeEventListener('mousemove', onMouseMove);
     document.removeEventListener('mouseup', onMouseUp);
 
-    // Restore text selection
     document.body.style.userSelect = '';
   };
 
-  // Handle window resize to ensure widthPercent remains valid
   useEffect(() => {
     const handleWindowResize = () => {
-      /*
-       * Optional: Adjust widthPercent if necessary
-       * For now, since widthPercent is relative, no action is needed
-       */
+      // Optional: Adjust widthPercent if necessary
     };
 
     window.addEventListener('resize', handleWindowResize);
@@ -188,7 +195,6 @@ export const Preview = memo(() => {
     };
   }, []);
 
-  // A small helper component for the handle's "grip" icon
   const GripIcon = () => (
     <div
       style={{
@@ -213,8 +219,33 @@ export const Preview = memo(() => {
     </div>
   );
 
+  const openInNewWindow = (size: WindowSize) => {
+    if (activePreview?.baseUrl) {
+      const match = activePreview.baseUrl.match(/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/);
+
+      if (match) {
+        const previewId = match[1];
+        const previewUrl = `/webcontainer/preview/${previewId}`;
+        const newWindow = window.open(
+          previewUrl,
+          '_blank',
+          `noopener,noreferrer,width=${size.width},height=${size.height},menubar=no,toolbar=no,location=no,status=no`,
+        );
+
+        if (newWindow) {
+          newWindow.focus();
+        }
+      } else {
+        console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
+      }
+    }
+  };
+
   return (
-    <div ref={containerRef} className="w-full h-full flex flex-col relative">
+    <div
+      ref={containerRef}
+      className={`w-full h-full flex flex-col relative ${isPreviewOnly ? 'fixed inset-0 z-50 bg-white' : ''}`}
+    >
       {isPortDropdownOpen && (
         <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
       )}
@@ -225,10 +256,7 @@ export const Preview = memo(() => {
           onClick={() => setIsSelectionMode(!isSelectionMode)}
           className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
         />
-        <div
-          className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
-        focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
-        >
+        <div className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
           <input
             title="URL"
             ref={inputRef}
@@ -261,26 +289,65 @@ export const Preview = memo(() => {
           />
         )}
 
-        {/* Device mode toggle button */}
         <IconButton
           icon="i-ph:devices"
           onClick={toggleDeviceMode}
           title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
         />
 
-        {/* Fullscreen toggle button */}
+        <IconButton
+          icon="i-ph:layout-light"
+          onClick={() => setIsPreviewOnly(!isPreviewOnly)}
+          title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'}
+        />
+
         <IconButton
           icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
           onClick={toggleFullscreen}
           title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
         />
+
+        <div className="relative">
+          <IconButton
+            icon="i-ph:arrow-square-out"
+            onClick={() => openInNewWindow(selectedWindowSize)}
+            title={`Open Preview in ${selectedWindowSize.name} Window`}
+          />
+          <IconButton
+            icon="i-ph:caret-down"
+            onClick={() => setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)}
+            className="ml-1"
+            title="Select Window Size"
+          />
+
+          {isWindowSizeDropdownOpen && (
+            <>
+              <div className="fixed inset-0 z-50" onClick={() => setIsWindowSizeDropdownOpen(false)} />
+              <div className="absolute right-0 top-full mt-1 z-50 bg-bolt-elements-background-depth-2 rounded-lg shadow-lg border border-bolt-elements-borderColor overflow-hidden">
+                {WINDOW_SIZES.map((size) => (
+                  <button
+                    key={size.name}
+                    className="w-full px-4 py-2 text-left hover:bg-bolt-elements-background-depth-3 text-sm whitespace-nowrap"
+                    onClick={() => {
+                      setSelectedWindowSize(size);
+                      setIsWindowSizeDropdownOpen(false);
+                      openInNewWindow(size);
+                    }}
+                  >
+                    {size.name}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
       </div>
 
       <div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
         <div
           style={{
             width: isDeviceModeOn ? `${widthPercent}%` : '100%',
-            height: '100%', // Always full height
+            height: '100%',
             overflow: 'visible',
             background: '#fff',
             position: 'relative',
@@ -294,7 +361,8 @@ export const Preview = memo(() => {
                 title="preview"
                 className="border-none w-full h-full bg-white"
                 src={iframeUrl}
-                allowFullScreen
+                sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
+                allow="cross-origin-isolated"
               />
               <ScreenshotSelector
                 isSelectionMode={isSelectionMode}
@@ -308,7 +376,6 @@ export const Preview = memo(() => {
 
           {isDeviceModeOn && (
             <>
-              {/* Left handle */}
               <div
                 onMouseDown={(e) => startResizing(e, 'left')}
                 style={{
@@ -333,7 +400,6 @@ export const Preview = memo(() => {
                 <GripIcon />
               </div>
 
-              {/* Right handle */}
               <div
                 onMouseDown={(e) => startResizing(e, 'right')}
                 style={{

app/lib/stores/previews.ts

@@ -1,27 +1,192 @@
 import type { WebContainer } from '@webcontainer/api';
 import { atom } from 'nanostores';
 
+// Extend Window interface to include our custom property
+declare global {
+  interface Window {
+    _tabId?: string;
+  }
+}
+
 export interface PreviewInfo {
   port: number;
   ready: boolean;
   baseUrl: string;
 }
 
+// Create a broadcast channel for preview updates
+const PREVIEW_CHANNEL = 'preview-updates';
+
 export class PreviewsStore {
   #availablePreviews = new Map<number, PreviewInfo>();
   #webcontainer: Promise<WebContainer>;
+  #broadcastChannel: BroadcastChannel;
+  #lastUpdate = new Map<string, number>();
+  #watchedFiles = new Set<string>();
+  #refreshTimeouts = new Map<string, NodeJS.Timeout>();
+  #REFRESH_DELAY = 300;
+  #storageChannel: BroadcastChannel;
 
   previews = atom<PreviewInfo[]>([]);
 
   constructor(webcontainerPromise: Promise<WebContainer>) {
     this.#webcontainer = webcontainerPromise;
+    this.#broadcastChannel = new BroadcastChannel(PREVIEW_CHANNEL);
+    this.#storageChannel = new BroadcastChannel('storage-sync-channel');
+
+    // Listen for preview updates from other tabs
+    this.#broadcastChannel.onmessage = (event) => {
+      const { type, previewId } = event.data;
+
+      if (type === 'file-change') {
+        const timestamp = event.data.timestamp;
+        const lastUpdate = this.#lastUpdate.get(previewId) || 0;
+
+        if (timestamp > lastUpdate) {
+          this.#lastUpdate.set(previewId, timestamp);
+          this.refreshPreview(previewId);
+        }
+      }
+    };
+
+    // Listen for storage sync messages
+    this.#storageChannel.onmessage = (event) => {
+      const { storage, source } = event.data;
+
+      if (storage && source !== this._getTabId()) {
+        this._syncStorage(storage);
+      }
+    };
+
+    // Override localStorage setItem to catch all changes
+    if (typeof window !== 'undefined') {
+      const originalSetItem = localStorage.setItem;
+
+      localStorage.setItem = (...args) => {
+        originalSetItem.apply(localStorage, args);
+        this._broadcastStorageSync();
+      };
+    }
 
     this.#init();
   }
 
+  // Generate a unique ID for this tab
+  private _getTabId(): string {
+    if (typeof window !== 'undefined') {
+      if (!window._tabId) {
+        window._tabId = Math.random().toString(36).substring(2, 15);
+      }
+
+      return window._tabId;
+    }
+
+    return '';
+  }
+
+  // Sync storage data between tabs
+  private _syncStorage(storage: Record<string, string>) {
+    if (typeof window !== 'undefined') {
+      Object.entries(storage).forEach(([key, value]) => {
+        try {
+          const originalSetItem = Object.getPrototypeOf(localStorage).setItem;
+          originalSetItem.call(localStorage, key, value);
+        } catch (error) {
+          console.error('[Preview] Error syncing storage:', error);
+        }
+      });
+
+      // Force a refresh after syncing storage
+      const previews = this.previews.get();
+      previews.forEach((preview) => {
+        const previewId = this.getPreviewId(preview.baseUrl);
+
+        if (previewId) {
+          this.refreshPreview(previewId);
+        }
+      });
+
+      // Reload the page content
+      if (typeof window !== 'undefined' && window.location) {
+        const iframe = document.querySelector('iframe');
+
+        if (iframe) {
+          iframe.src = iframe.src;
+        }
+      }
+    }
+  }
+
+  // Broadcast storage state to other tabs
+  private _broadcastStorageSync() {
+    if (typeof window !== 'undefined') {
+      const storage: Record<string, string> = {};
+
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+
+        if (key) {
+          storage[key] = localStorage.getItem(key) || '';
+        }
+      }
+
+      this.#storageChannel.postMessage({
+        type: 'storage-sync',
+        storage,
+        source: this._getTabId(),
+        timestamp: Date.now(),
+      });
+    }
+  }
+
   async #init() {
     const webcontainer = await this.#webcontainer;
 
+    // Listen for server ready events
+    webcontainer.on('server-ready', (port, url) => {
+      console.log('[Preview] Server ready on port:', port, url);
+      this.broadcastUpdate(url);
+
+      // Initial storage sync when preview is ready
+      this._broadcastStorageSync();
+    });
+
+    try {
+      // Watch for file changes
+      const watcher = await webcontainer.fs.watch('**/*', { persistent: true });
+
+      // Use the native watch events
+      (watcher as any).addEventListener('change', async () => {
+        const previews = this.previews.get();
+
+        for (const preview of previews) {
+          const previewId = this.getPreviewId(preview.baseUrl);
+
+          if (previewId) {
+            this.broadcastFileChange(previewId);
+          }
+        }
+      });
+
+      // Watch for DOM changes that might affect storage
+      if (typeof window !== 'undefined') {
+        const observer = new MutationObserver((_mutations) => {
+          // Broadcast storage changes when DOM changes
+          this._broadcastStorageSync();
+        });
+
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+          attributes: true,
+        });
+      }
+    } catch (error) {
+      console.error('[Preview] Error setting up watchers:', error);
+    }
+
+    // Listen for port events
     webcontainer.on('port', (port, type, url) => {
       let previewInfo = this.#availablePreviews.get(port);
 
@@ -44,6 +209,101 @@ export class PreviewsStore {
       previewInfo.baseUrl = url;
 
       this.previews.set([...previews]);
+
+      if (type === 'open') {
+        this.broadcastUpdate(url);
+      }
+    });
+  }
+
+  // Helper to extract preview ID from URL
+  getPreviewId(url: string): string | null {
+    const match = url.match(/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/);
+    return match ? match[1] : null;
+  }
+
+  // Broadcast state change to all tabs
+  broadcastStateChange(previewId: string) {
+    const timestamp = Date.now();
+    this.#lastUpdate.set(previewId, timestamp);
+
+    this.#broadcastChannel.postMessage({
+      type: 'state-change',
+      previewId,
+      timestamp,
     });
   }
+
+  // Broadcast file change to all tabs
+  broadcastFileChange(previewId: string) {
+    const timestamp = Date.now();
+    this.#lastUpdate.set(previewId, timestamp);
+
+    this.#broadcastChannel.postMessage({
+      type: 'file-change',
+      previewId,
+      timestamp,
+    });
+  }
+
+  // Broadcast update to all tabs
+  broadcastUpdate(url: string) {
+    const previewId = this.getPreviewId(url);
+
+    if (previewId) {
+      const timestamp = Date.now();
+      this.#lastUpdate.set(previewId, timestamp);
+
+      this.#broadcastChannel.postMessage({
+        type: 'file-change',
+        previewId,
+        timestamp,
+      });
+    }
+  }
+
+  // Method to refresh a specific preview
+  refreshPreview(previewId: string) {
+    // Clear any pending refresh for this preview
+    const existingTimeout = this.#refreshTimeouts.get(previewId);
+
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+
+    // Set a new timeout for this refresh
+    const timeout = setTimeout(() => {
+      const previews = this.previews.get();
+      const preview = previews.find((p) => this.getPreviewId(p.baseUrl) === previewId);
+
+      if (preview) {
+        preview.ready = false;
+        this.previews.set([...previews]);
+
+        requestAnimationFrame(() => {
+          preview.ready = true;
+          this.previews.set([...previews]);
+        });
+      }
+
+      this.#refreshTimeouts.delete(previewId);
+    }, this.#REFRESH_DELAY);
+
+    this.#refreshTimeouts.set(previewId, timeout);
+  }
+}
+
+// Create a singleton instance
+let previewsStore: PreviewsStore | null = null;
+
+export function usePreviewStore() {
+  if (!previewsStore) {
+    /*
+     * Initialize with a Promise that resolves to WebContainer
+     * This should match how you're initializing WebContainer elsewhere
+     */
+    previewsStore = new PreviewsStore(Promise.resolve({} as WebContainer));
+  }
+
+  return previewsStore;
 }

app/routes/webcontainer.preview.$id.tsx

@@ -0,0 +1,92 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare';
+import { useLoaderData } from '@remix-run/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const PREVIEW_CHANNEL = 'preview-updates';
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const previewId = params.id;
+
+  if (!previewId) {
+    throw new Response('Preview ID is required', { status: 400 });
+  }
+
+  return json({ previewId });
+}
+
+export default function WebContainerPreview() {
+  const { previewId } = useLoaderData<typeof loader>();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const broadcastChannelRef = useRef<BroadcastChannel>();
+  const [previewUrl, setPreviewUrl] = useState('');
+
+  // Handle preview refresh
+  const handleRefresh = useCallback(() => {
+    if (iframeRef.current && previewUrl) {
+      // Force a clean reload
+      iframeRef.current.src = '';
+      requestAnimationFrame(() => {
+        if (iframeRef.current) {
+          iframeRef.current.src = previewUrl;
+        }
+      });
+    }
+  }, [previewUrl]);
+
+  // Notify other tabs that this preview is ready
+  const notifyPreviewReady = useCallback(() => {
+    if (broadcastChannelRef.current && previewUrl) {
+      broadcastChannelRef.current.postMessage({
+        type: 'preview-ready',
+        previewId,
+        url: previewUrl,
+        timestamp: Date.now(),
+      });
+    }
+  }, [previewId, previewUrl]);
+
+  useEffect(() => {
+    // Initialize broadcast channel
+    broadcastChannelRef.current = new BroadcastChannel(PREVIEW_CHANNEL);
+
+    // Listen for preview updates
+    broadcastChannelRef.current.onmessage = (event) => {
+      if (event.data.previewId === previewId) {
+        if (event.data.type === 'refresh-preview' || event.data.type === 'file-change') {
+          handleRefresh();
+        }
+      }
+    };
+
+    // Construct the WebContainer preview URL
+    const url = `https://${previewId}.local-credentialless.webcontainer-api.io`;
+    setPreviewUrl(url);
+
+    // Set the iframe src
+    if (iframeRef.current) {
+      iframeRef.current.src = url;
+    }
+
+    // Notify other tabs that this preview is ready
+    notifyPreviewReady();
+
+    // Cleanup
+    return () => {
+      broadcastChannelRef.current?.close();
+    };
+  }, [previewId, handleRefresh, notifyPreviewReady]);
+
+  return (
+    <div className="w-full h-full">
+      <iframe
+        ref={iframeRef}
+        title="WebContainer Preview"
+        className="w-full h-full border-none"
+        sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
+        allow="cross-origin-isolated"
+        loading="eager"
+        onLoad={notifyPreviewReady}
+      />
+    </div>
+  );
+}