Merge pull request #8 from onlook-dev/improvements

.gitignore

@@ -16,6 +16,7 @@ release
 
 # Editor directories and files
 .vscode/.debug.env
+.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.vscode/settings.json

@@ -9,5 +9,6 @@
  ],
  "url": "https://json.schemastore.org/electron-builder"
  }
- ]
-}
+ ],
+ "github.copilot.inlineSuggest.enable": true
+}

docs/CONTRIBUTING.md

@@ -0,0 +1,10 @@
+The built directory structure
+```
+├─┬ dist-electron
+│ ├─┬ main
+│ │ └── index.js > Electron-Main
+│ └─┬ preload
+│ └── index.mjs > Preload-Scripts
+├─┬ dist
+│ └── index.html > Electron-Renderer
+```

electron/main/index.ts

@@ -1,24 +1,13 @@
-import { BrowserWindow, app, ipcMain, screen, shell } from 'electron'
+import { BrowserWindow, app, 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 { update } from './update'
 
 const require = createRequire(import.meta.url)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-// The built directory structure
-//
-// ├─┬ dist-electron
-// │ ├─┬ main
-// │ │ └── index.js > Electron-Main
-// │ └─┬ preload
-// │ └── index.mjs > Preload-Scripts
-// ├─┬ dist
-// │ └── index.html > Electron-Renderer
-//
 process.env.APP_ROOT = path.join(__dirname, '../..')
 
 export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
@@ -44,7 +33,18 @@ let win: BrowserWindow | null = null
 const preload = path.join(__dirname, '../preload/index.mjs')
 const indexHtml = path.join(RENDERER_DIST, 'index.html')
 
-async function createWindow() {
+
+function loadWindowContent(win: BrowserWindow) {
+ // Load URL or file based on the environment
+ if (VITE_DEV_SERVER_URL) {
+ win.loadURL(VITE_DEV_SERVER_URL);
+ win.webContents.openDevTools();
+ } else {
+ win.loadFile(indexHtml);
+ }
+}
+
+function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  win = new BrowserWindow({
  title: APP_NAME,
@@ -59,68 +59,45 @@ async function createWindow() {
  preload,
  webviewTag: true,
  },
- })
+ });
+ return win;
+}
 
- if (VITE_DEV_SERVER_URL) { // #298
- win.loadURL(VITE_DEV_SERVER_URL)
- // Open devTool if the app is not packaged
- win.webContents.openDevTools()
- } else {
- win.loadFile(indexHtml)
- }
+function initMainWindow() {
+ const win = createWindow();
+ loadWindowContent(win);
 
- // Test actively push message to the Electron-Renderer
- win.webContents.on('did-finish-load', () => {
- win?.webContents.send('main-process-message', new Date().toLocaleString())
- })
-
- // Make all links open with the browser, not with the application
+ // Ensure links open externally
  win.webContents.setWindowOpenHandler(({ url }) => {
- if (url.startsWith('https:')) shell.openExternal(url)
- return { action: 'deny' }
- })
-
- // Auto update
- update(win)
+ if (url.startsWith('https:')) shell.openExternal(url);
+ return { action: 'deny' };
+ });
 }
 
-app.whenReady().then(createWindow)
+function setListeners() {
+ app.whenReady().then(initMainWindow)
 
-app.on('window-all-closed', () => {
- win = null
- if (process.platform !== 'darwin') app.quit()
-})
-
-app.on('second-instance', () => {
- if (win) {
- // Focus on the main window if the user tried to open another
- if (win.isMinimized()) win.restore()
- win.focus()
- }
-})
+ app.on('window-all-closed', () => {
+ win = null
+ if (process.platform !== 'darwin') app.quit()
+ })
 
-app.on('activate', () => {
- const allWindows = BrowserWindow.getAllWindows()
- if (allWindows.length) {
- allWindows[0].focus()
- } else {
- createWindow()
- }
-})
+ app.on('second-instance', () => {
+ if (win) {
+ // Focus on the main window if the user tried to open another
+ if (win.isMinimized()) win.restore()
+ win.focus()
+ }
+ })
 
-// New window example arg: new windows url
-ipcMain.handle('open-win', (_, arg) => {
- const childWindow = new BrowserWindow({
- webPreferences: {
- preload,
- nodeIntegration: true,
- contextIsolation: false,
- },
+ app.on('activate', () => {
+ const allWindows = BrowserWindow.getAllWindows()
+ if (allWindows.length) {
+ allWindows[0].focus()
+ } else {
+ initMainWindow()
+ }
  })
+}
 
- if (VITE_DEV_SERVER_URL) {
- childWindow.loadURL(`${VITE_DEV_SERVER_URL}#${arg}`)
- } else {
- childWindow.loadFile(indexHtml, { hash: arg })
- }
-})
+setListeners() 

electron/preload/index.ts

@@ -51,8 +51,6 @@ const api = {
  },
 };
 
-// Expose methods to renderer process
 contextBridge.exposeInMainWorld('Main', api);
-
 // WARN: Using the ipcRenderer directly in the browser through the contextBridge is insecure
 contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer);

src/App.tsx

@@ -5,7 +5,7 @@ import ProjectEditor from './routes/editor';
 function App() {
  return (
  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
- <div className="flex flex-col h-screen w-screen bg-black">
+ <div className="flex flex-col bg-black h-screen w-screen">
  <AppBar />
  <ProjectEditor />
  </div>

src/index.css

@@ -77,4 +77,10 @@
 
 .appbar {
  -webkit-app-region: drag;
+}
+
+body, #root {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
 }