refactor(draft): replace <webview> with <iframe>

apps/studio/electron/main/index.ts

@@ -1,5 +1,5 @@
 import { APP_NAME, APP_SCHEMA } from '@onlook/models/constants';
-import { BrowserWindow, app, shell } from 'electron';
+import { BrowserWindow, app, shell, protocol } from 'electron';
 import fixPath from 'fix-path';
 import { createRequire } from 'node:module';
 import os from 'node:os';
@@ -11,6 +11,7 @@ import { listenForIpcMessages, removeIpcListeners } from './events';
 import run from './run';
 import terminal from './run/terminal';
 import { updater } from './update';
+import fs from 'node:fs';
 
 // Help main inherit $PATH defined in dotfiles (.bashrc/.bash_profile/.zshrc/etc).
 fixPath();
@@ -142,6 +143,10 @@ const listenForExitEvents = () => {
 
 const setupAppEventListeners = () => {
     app.whenReady().then(() => {
+        protocol.handle('onlook', (request) => {
+            const filePath = path.join(__dirname, '../preload/webview.js');
+            return new Response(fs.readFileSync(filePath));
+        });
         listenForExitEvents();
         initMainWindow();
     });
@@ -190,6 +195,20 @@ const main = () => {
     setupEnvironment();
     configurePlatformSpecifics();
 
+    // Register onlook protocol handler for browser-compatible preload script urls
+    protocol.registerSchemesAsPrivileged([
+        {
+            scheme: 'onlook',
+            privileges: {
+                standard: true,
+                secure: true,
+                allowServiceWorkers: true,
+                supportFetchAPI: true,
+                stream: true,
+            },
+        },
+    ]);
+
     if (!app.requestSingleInstanceLock()) {
         app.quit();
         process.exit(0);

apps/studio/electron/preload/webview/api.ts

@@ -1,4 +1,3 @@
-import { contextBridge } from 'electron';
 import { processDom } from './dom';
 import {
     getChildrenCount,
@@ -22,42 +21,67 @@ import { editText, startEditingText, stopEditingText } from './elements/text';
 import { setWebviewId } from './state';
 import { getTheme, setTheme } from './theme';
 
+const onlookApi = {
+    // Misc
+    processDom,
+    getComputedStyleByDomId,
+    updateElementInstance,
+    setWebviewId,
+
+    // Elements
+    getElementAtLoc,
+    getDomElementByDomId,
+    setElementType,
+    getElementType,
+    getParentElement,
+    getChildrenCount,
+
+    // Actions
+    getActionLocation,
+    getActionElementByDomId,
+    getInsertLocation,
+    getRemoveActionFromDomId,
+
+    // Theme
+    getTheme,
+    setTheme,
+
+    // Drag
+    startDrag,
+    drag,
+    endDrag,
+    getElementIndex,
+    endAllDrag,
+
+    // Edit text
+    startEditingText,
+    editText,
+    stopEditingText,
+};
+
+export type TOnlookWindow = typeof window & {
+    _onlookWebviewId: string;
+    onlook: {
+        api: typeof onlookApi;
+        bridge: {
+            send: (channel: string, data?: any, transfer?: Transferable[]) => void;
+            receive: (handler: (event: MessageEvent, data?: any) => void) => void;
+        };
+    };
+};
+
 export function setApi() {
-    contextBridge.exposeInMainWorld('api', {
-        // Misc
-        processDom,
-        getComputedStyleByDomId,
-        updateElementInstance,
-        setWebviewId,
-
-        // Elements
-        getElementAtLoc,
-        getDomElementByDomId,
-        setElementType,
-        getElementType,
-        getParentElement,
-        getChildrenCount,
-
-        // Actions
-        getActionLocation,
-        getActionElementByDomId,
-        getInsertLocation,
-        getRemoveActionFromDomId,
-
-        // Theme
-        getTheme,
-        setTheme,
-
-        // Drag
-        startDrag,
-        drag,
-        endDrag,
-        getElementIndex,
-        endAllDrag,
-
-        // Edit text
-        startEditingText,
-        editText,
-        stopEditingText,
-    });
+    (window as TOnlookWindow).onlook = {
+        api: onlookApi,
+        bridge: {
+            send: (channel: string, data?: any, transfer?: Transferable[]) => {
+                window.parent.postMessage({ type: channel, data }, '*', transfer);
+            },
+            receive: (handler: (event: MessageEvent, data?: any) => void) => {
+                window.addEventListener('message', (event) => {
+                    handler(event, event.data);
+                });
+            },
+        },
+    };
 }

apps/studio/electron/preload/webview/dom.ts

@@ -1,11 +1,11 @@
 import { EditorAttributes, WebviewChannels } from '@onlook/models/constants';
 import type { LayerNode } from '@onlook/models/element';
-import { ipcRenderer } from 'electron';
 import { debounce } from './bundles/helpers';
 import { getOrAssignDomId } from './ids';
 import { getWebviewId } from './state';
 import { isValidHtmlElement } from '/common/helpers';
 import { getInstanceId, getOid } from '/common/helpers/ids';
+import type { TOnlookWindow } from './api';
 
 const processDebounced = debounce((root: HTMLElement) => {
     const webviewId = getWebviewId();
@@ -30,7 +30,7 @@ const processDebounced = debounce((root: HTMLElement) => {
         return false;
     }
 
-    ipcRenderer.sendToHost(WebviewChannels.DOM_PROCESSED, {
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.DOM_PROCESSED, {
         layerMap: Object.fromEntries(layerMap),
         rootNode,
     });

apps/studio/electron/preload/webview/elements/style.ts

@@ -5,7 +5,7 @@ export function getStyles(element: HTMLElement): {
     defined: Record<string, string>;
     computed: Record<string, string>;
 } {
-    const computed = getComputedStyle(element);
+    const computed = getElementComputedStyle(element);
     const inline = getInlineStyles(element);
     const stylesheet = getStylesheetStyles(element);
 
@@ -27,10 +27,10 @@ export function getComputedStyleByDomId(domId: string): Record<string, string> {
     if (!element) {
         return {};
     }
-    return getComputedStyle(element as HTMLElement);
+    return getElementComputedStyle(element as HTMLElement);
 }
 
-function getComputedStyle(element: HTMLElement): Record<string, string> {
+function getElementComputedStyle(element: HTMLElement): Record<string, string> {
     const computedStyle = jsonClone(window.getComputedStyle(element)) as unknown as Record<
         string,
         string

apps/studio/electron/preload/webview/events/dom.ts

@@ -1,7 +1,7 @@
 import { EditorAttributes, WebviewChannels } from '@onlook/models/constants';
 import type { LayerNode } from '@onlook/models/element';
-import { ipcRenderer } from 'electron';
 import { buildLayerTree } from '../dom';
+import type { TOnlookWindow } from '../api';
 
 export function listenForDomMutation() {
     const targetNode = document.body;
@@ -46,7 +46,7 @@ export function listenForDomMutation() {
         }
 
         if (added.size > 0 || removed.size > 0) {
-            ipcRenderer.sendToHost(WebviewChannels.WINDOW_MUTATED, {
+            (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.WINDOW_MUTATED, {
                 added: Object.fromEntries(added),
                 removed: Object.fromEntries(removed),
             });

apps/studio/electron/preload/webview/events/index.ts

@@ -7,7 +7,6 @@ import type {
     ImageContentData,
 } from '@onlook/models/actions';
 import { WebviewChannels } from '@onlook/models/constants';
-import { ipcRenderer } from 'electron';
 import { processDom } from '../dom';
 import { groupElements, ungroupElements } from '../elements/dom/group';
 import { insertImage, removeImage } from '../elements/dom/image';
@@ -25,6 +24,7 @@ import {
     publishStyleUpdate,
     publishUngroupElement,
 } from './publish';
+import type { TOnlookWindow } from '../api';
 
 export function listenForEvents() {
     listenForWindowEvents();
@@ -34,12 +34,12 @@ export function listenForEvents() {
 
 function listenForWindowEvents() {
     window.addEventListener('resize', () => {
-        ipcRenderer.sendToHost(WebviewChannels.WINDOW_RESIZED);
+        (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.WINDOW_RESIZED);
     });
 }
 
 function listenForEditEvents() {
-    ipcRenderer.on(WebviewChannels.UPDATE_STYLE, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { domId, change } = data as {
             domId: string;
             change: Change<Record<string, string>>;
@@ -48,7 +48,7 @@ function listenForEditEvents() {
         publishStyleUpdate(domId);
     });
 
-    ipcRenderer.on(WebviewChannels.INSERT_ELEMENT, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { element, location, editText } = data as {
             element: ActionElement;
             location: ActionLocation;
@@ -60,13 +60,13 @@ function listenForEditEvents() {
         }
     });
 
-    ipcRenderer.on(WebviewChannels.REMOVE_ELEMENT, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { location } = data as { location: ActionLocation };
         removeElement(location);
         publishRemoveElement(location);
     });
 
-    ipcRenderer.on(WebviewChannels.MOVE_ELEMENT, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { domId, newIndex } = data as {
             domId: string;
             newIndex: number;
@@ -77,7 +77,7 @@ function listenForEditEvents() {
         }
     });
 
-    ipcRenderer.on(WebviewChannels.EDIT_ELEMENT_TEXT, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { domId, content } = data as {
             domId: string;
             content: string;
@@ -88,7 +88,7 @@ function listenForEditEvents() {
         }
     });
 
-    ipcRenderer.on(WebviewChannels.GROUP_ELEMENTS, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { parent, container, children } = data as {
             parent: ActionTarget;
             container: GroupContainer;
@@ -100,7 +100,7 @@ function listenForEditEvents() {
         }
     });
 
-    ipcRenderer.on(WebviewChannels.UNGROUP_ELEMENTS, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { parent, container, children } = data as {
             parent: ActionTarget;
             container: GroupContainer;
@@ -112,7 +112,7 @@ function listenForEditEvents() {
         }
     });
 
-    ipcRenderer.on(WebviewChannels.INSERT_IMAGE, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { domId, image } = data as {
             domId: string;
             image: ImageContentData;
@@ -121,15 +121,15 @@ function listenForEditEvents() {
         publishStyleUpdate(domId);
     });
 
-    ipcRenderer.on(WebviewChannels.REMOVE_IMAGE, (_, data) => {
+    (window as TOnlookWindow).onlook.bridge.receive((_, data) => {
         const { domId } = data as {
             domId: string;
         };
         removeImage(domId);
         publishStyleUpdate(domId);
     });
 
-    ipcRenderer.on(WebviewChannels.CLEAN_AFTER_WRITE_TO_CODE, () => {
+    (window as TOnlookWindow).onlook.bridge.receive(() => {
         processDom();
     });
 }