Set up webview preload script to start editing (#9)

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,8 @@
 
 ### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
 
-- [ ] Bug fix
-- [ ] New Feature
+- [ ] New feature
 - [ ] Documentation update
+- [ ] Bug fix
+- [ ] Refactor
 - [ ] Other

electron/main/index.ts

@@ -1,9 +1,9 @@
-import { BrowserWindow, app, screen, shell } from 'electron'
+import { BrowserWindow, app, ipcMain, screen, shell } from 'electron'
 import { createRequire } from 'node:module'
 import os from 'node:os'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { APP_NAME } from '../../src/lib/constants'
+import { APP_NAME, MainChannel } from '../../src/lib/constants'
 
 const require = createRequire(import.meta.url)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -30,10 +30,10 @@ if (!app.requestSingleInstanceLock()) {
 }
 
 let win: BrowserWindow | null = null
-const preload = path.join(__dirname, '../preload/index.mjs')
+const preload = path.join(__dirname, '../preload/index.js')
+const webviewPreload = path.join(__dirname, '../preload/webview.js')
 const indexHtml = path.join(RENDERER_DIST, 'index.html')
 
-
 function loadWindowContent(win: BrowserWindow) {
   // Load URL or file based on the environment
   if (VITE_DEV_SERVER_URL) {
@@ -98,6 +98,10 @@ function setListeners() {
       initMainWindow()
     }
   })
+
+  ipcMain.handle(MainChannel.WEBVIEW_PRELOAD_PATH, () => {
+    return webviewPreload
+  })
 }
 
 setListeners() 

electron/preload/webview.ts

@@ -0,0 +1,61 @@
+import { ipcRenderer } from 'electron';
+
+const documentBodyInit = () => {
+    // Context Menu
+    window.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        ipcRenderer.send('show-context-menu', {
+            contextMenuMeta: { x: e.x, y: e.y },
+        });
+    });
+
+    window.addEventListener('wheel', (e) => {
+        ipcRenderer.sendToHost('pass-scroll-data', {
+            coordinates: { x: e.deltaX, y: e.deltaY },
+            innerHeight: document.body.scrollHeight,
+            innerWidth: window.innerWidth,
+        });
+    });
+
+    window.addEventListener('dom-ready', () => {
+        const { body } = document;
+        const html = document.documentElement;
+
+        const height = Math.max(
+            body.scrollHeight,
+            body.offsetHeight,
+            html.clientHeight,
+            html.scrollHeight,
+            html.offsetHeight
+        );
+
+        ipcRenderer.sendToHost('pass-scroll-data', {
+            coordinates: { x: 0, y: 0 },
+            innerHeight: height,
+            innerWidth: window.innerWidth,
+        });
+    });
+};
+
+ipcRenderer.on('context-menu-command', (_, command) => {
+    ipcRenderer.sendToHost('context-menu-command', command);
+});
+
+const documentBodyWaitHandle = setInterval(() => {
+    window.onerror = function logError(errorMsg, url, lineNumber) {
+        // eslint-disable-next-line no-console
+        console.log(`Unhandled error: ${errorMsg} ${url} ${lineNumber}`);
+        // Code to run when an error has occurred on the page
+    };
+
+    if (window?.document?.body) {
+        clearInterval(documentBodyWaitHandle);
+        try {
+            documentBodyInit();
+        } catch (err) {
+            console.log('Error in documentBodyInit:', err);
+        }
+        return;
+    }
+    console.log('document.body not ready');
+}, 300);

src/lib/constants.ts

@@ -1,5 +1,6 @@
 export enum MainChannel {
     NOTIFICATION = 'notification',
+    WEBVIEW_PRELOAD_PATH = 'webview-preload-path',
 }
 
 export const APP_NAME = 'Onlook';

src/routes/editor/FrameList.tsx

@@ -1,10 +1,51 @@
-import React, { useRef } from 'react';
+import { MainChannel } from '@/lib/constants';
+import { useEffect, useRef, useState } from 'react';
 
 function FrameList() {
-    const webviewRef = useRef(null);
-    return (
-        <webview ref={webviewRef} className='w-[96rem] h-[54rem]' src="https://www.framer.com/" ></webview>
-    );
+    const ref = useRef(null);
+    const [webviewPreloadPath, setWebviewPreloadPath] = useState<string>('');
+
+    useEffect(() => {
+        window.Main.invoke(MainChannel.WEBVIEW_PRELOAD_PATH).then((preloadPath: any) => {
+            setWebviewPreloadPath(preloadPath);
+        });
+
+        if (!ref.current) {
+            return;
+        }
+        const webview = ref.current as Electron.WebviewTag;
+        const handlerRemovers: (() => void)[] = [];
+
+        webview.addEventListener('dom-ready', () => {
+            console.log('dom-ready');
+        });
+
+        const ipcMessageHandler = (e: Electron.IpcMessageEvent) => {
+            console.log("🚀 ~ ipcMessageHandler ~ e.channel:", e.channel)
+        };
+
+        webview.addEventListener('ipc-message', ipcMessageHandler);
+        handlerRemovers.push(() => {
+            webview.removeEventListener('ipc-message', ipcMessageHandler);
+        });
+
+        return () => {
+            handlerRemovers.forEach((handlerRemover) => {
+                handlerRemover();
+            });
+        };
+    }, [ref, webviewPreloadPath]);
+
+    if (webviewPreloadPath)
+        return (
+            <webview
+                ref={ref}
+                className='w-[96rem] h-[54rem]'
+                src="https://www.framer.com/"
+                preload={`file://${webviewPreloadPath}`}
+                allowpopups={"true" as any}
+            ></webview>
+        );
 }
 
 export default FrameList;

vite.config.ts

@@ -44,16 +44,22 @@ export default defineConfig(({ command }) => {
           },
         },
         preload: {
-          // Shortcut of `build.rollupOptions.input`.
-          // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
-          input: 'electron/preload/index.ts',
+          input: {
+            index: 'electron/preload/index.ts',
+            webview: 'electron/preload/webview.ts',
+          },
           vite: {
             build: {
               sourcemap: sourcemap ? 'inline' : undefined, // #332
               minify: isBuild,
               outDir: 'dist-electron/preload',
               rollupOptions: {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
+                output: {
+                  format: 'cjs', // Set format to CommonJS
+                  entryFileNames: '[name].js', // Ensure the file extension is .js
+                  inlineDynamicImports: false,
+                }
               },
             },
           },