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/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();
     });
 }

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

@@ -1,19 +1,19 @@
 import type { ActionLocation } from '@onlook/models/actions';
 import { WebviewChannels } from '@onlook/models/constants';
 import type { DomElement } from '@onlook/models/element';
-import { ipcRenderer } from 'electron';
 import { buildLayerTree } from '../dom';
 import { getDomElementByDomId } from '../elements';
 import { getDomElement } from '../elements/helpers';
 import { elementFromDomId } from '/common/helpers';
+import type { TOnlookWindow } from '../api';
 
 export function publishStyleUpdate(domId: string) {
     const domEl = getDomElementByDomId(domId, true);
     if (!domEl) {
         console.error('No domEl found for style update event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.STYLE_UPDATED, { domEl });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.STYLE_UPDATED, { domEl });
 }
 
 export function publishInsertElement(
@@ -27,7 +27,11 @@ export function publishInsertElement(
         console.error('No domEl or layerMap found for insert element event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_INSERTED, { domEl, layerMap, editText });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_INSERTED, {
+        domEl,
+        layerMap,
+        editText,
+    });
 }
 
 export function publishRemoveElement(location: ActionLocation) {
@@ -39,7 +43,10 @@ export function publishRemoveElement(location: ActionLocation) {
         console.error('No parentDomEl or layerMap found for remove element event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_REMOVED, { parentDomEl, layerMap });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_REMOVED, {
+        parentDomEl,
+        layerMap,
+    });
 }
 
 export function publishMoveElement(domEl: DomElement) {
@@ -50,7 +57,10 @@ export function publishMoveElement(domEl: DomElement) {
         console.error('No domEl or layerMap found for move element event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_MOVED, { domEl, layerMap });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_MOVED, {
+        domEl,
+        layerMap,
+    });
 }
 
 export function publishGroupElement(domEl: DomElement) {
@@ -61,7 +71,10 @@ export function publishGroupElement(domEl: DomElement) {
         console.error('No domEl or layerMap found for group element event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_GROUPED, { domEl, layerMap });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_GROUPED, {
+        domEl,
+        layerMap,
+    });
 }
 
 export function publishUngroupElement(parentEl: DomElement) {
@@ -72,7 +85,10 @@ export function publishUngroupElement(parentEl: DomElement) {
         console.error('No parentEl or layerMap found for ungroup element event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_UNGROUPED, { parentEl, layerMap });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_UNGROUPED, {
+        parentEl,
+        layerMap,
+    });
 }
 
 export function publishEditText(domEl: DomElement) {
@@ -83,5 +99,8 @@ export function publishEditText(domEl: DomElement) {
         console.error('No domEl or layerMap found for edit text event');
         return;
     }
-    ipcRenderer.sendToHost(WebviewChannels.ELEMENT_TEXT_EDITED, { domEl, layerMap });
+    (window as TOnlookWindow).onlook.bridge.send(WebviewChannels.ELEMENT_TEXT_EDITED, {
+        domEl,
+        layerMap,
+    });
 }