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

apps/studio/electron/main/index.ts

@@ -1,6 +1,7 @@
 import { APP_NAME, APP_SCHEMA, MainChannels } from '@onlook/models/constants';
-import { BrowserWindow, app, shell } from 'electron';
+import { BrowserWindow, app, protocol, shell } from 'electron';
 import fixPath from 'fix-path';
+import fs from 'node:fs';
 import { createRequire } from 'node:module';
 import os from 'node:os';
 import path from 'node:path';
@@ -93,6 +94,10 @@ const initMainWindow = () => {
 
 const setupAppEventListeners = () => {
     app.whenReady().then(() => {
+        protocol.handle('onlook', (request) => {
+            const filePath = path.join(__dirname, '../preload/webview.js');
+            return new Response(fs.readFileSync(filePath));
+        });
         initMainWindow();
     });
 
@@ -173,7 +178,24 @@ const setupAppEventListeners = () => {
 };
 
 // Main function
-const main = async () => {
+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,
@@ -24,44 +23,69 @@ import { editText, startEditingText, stopEditingText } from './elements/text';
 import { setWebviewId } from './state';
 import { getTheme, setTheme } from './theme';
 
-export function setApi() {
-    contextBridge.exposeInMainWorld('api', {
-        // Misc
-        processDom,
-        getComputedStyleByDomId,
-        updateElementInstance,
-        setWebviewId,
-        getFirstOnlookElement,
+const onlookApi = {
+    // Misc
+    processDom,
+    getComputedStyleByDomId,
+    updateElementInstance,
+    setWebviewId,
+    getFirstOnlookElement,
 
-        // Elements
-        getElementAtLoc,
-        getDomElementByDomId,
-        setElementType,
-        getElementType,
-        getParentElement,
-        getChildrenCount,
-        getOffsetParent,
+    // Elements
+    getElementAtLoc,
+    getDomElementByDomId,
+    setElementType,
+    getElementType,
+    getParentElement,
+    getChildrenCount,
+    getOffsetParent,
 
-        // Actions
-        getActionLocation,
-        getActionElementByDomId,
-        getInsertLocation,
-        getRemoveActionFromDomId,
+    // Actions
+    getActionLocation,
+    getActionElementByDomId,
+    getInsertLocation,
+    getRemoveActionFromDomId,
 
-        // Theme
-        getTheme,
-        setTheme,
+    // Theme
+    getTheme,
+    setTheme,
 
-        // Drag
-        startDrag,
-        drag,
-        endDrag,
-        getElementIndex,
-        endAllDrag,
+    // Drag
+    startDrag,
+    drag,
+    endDrag,
+    getElementIndex,
+    endAllDrag,
 
-        // Edit text
-        startEditingText,
-        editText,
-        stopEditingText,
-    });
+    // 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() {
+    (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

@@ -8,7 +8,7 @@ import type {
 } from '@onlook/models/actions';
 import { WebviewChannels } from '@onlook/models/constants';
 import type { StyleChange } from '@onlook/models/style';
-import { ipcRenderer } from 'electron';
+import type { TOnlookWindow } from '../api';
 import { processDom } from '../dom';
 import { groupElements, ungroupElements } from '../elements/dom/group';
 import { insertImage, removeImage } from '../elements/dom/image';
@@ -30,17 +30,19 @@ import {
 export function listenForEvents() {
     listenForWindowEvents();
     listenForDomMutation();
-    listenForEditEvents();
+
+    // TODO: Disabled for debugging. This is listening to all events instead of specific ones.
+    // listenForEditEvents();
 }
 
 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, StyleChange>>;
@@ -50,7 +52,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;
@@ -62,13 +64,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;
@@ -79,7 +81,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;
@@ -90,7 +92,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;
@@ -102,7 +104,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;
@@ -114,7 +116,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;
@@ -123,15 +125,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();
     });
 }