@tomjs/create-app 1.7.0 → 2.0.0

package/templates/electron-react/electron/main/index.ts

@@ -1,14 +1,23 @@
-import '../polyfills';
-
 import { release } from 'node:os';
 import { join } from 'node:path';
+import { ELECTRON_EXIT } from '@tomjs/vite-plugin-electron/electron';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
 
+console.log('Electron Main Process!');
+
+const isDev = process.env.NODE_ENV === 'development';
+process.env.DIST = join(__dirname, '../renderer');
+
+console.log('process.env.DIST', process.env.DIST);
+console.log('process.env.VITE_DEV_SERVER_URL', process.env.VITE_DEV_SERVER_URL);
+
 // Disable GPU Acceleration for Windows 7
-if (release().startsWith('6.1')) app.disableHardwareAcceleration();
+if (release().startsWith('6.1'))
+  app.disableHardwareAcceleration();
 
 // Set application name for Windows 10+ notifications
-if (process.platform === 'win32') app.setAppUserModelId(app.getName());
+if (process.platform === 'win32')
+  app.setAppUserModelId(app.getName());
 
 if (!app.requestSingleInstanceLock()) {
   app.quit();
@@ -18,24 +27,19 @@ if (!app.requestSingleInstanceLock()) {
 // Remove electron security warnings
 // This warning only shows in development mode
 // Read more on https://www.electronjs.org/docs/latest/tutorial/security
-process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
-
-const isDev = process.env.NODE_ENV === 'development';
+// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 let win: BrowserWindow | null = null;
-// package.json "type":"module", must use mjs extension
-const preload = join(__dirname, '../preload/index.mjs');
-const serverUrl = process.env.VITE_DEV_SERVER_URL as string;
-const rendererDist = join(__dirname, '../renderer');
-const indexHtml = join(rendererDist, 'index.html');
-const publicPath = serverUrl ? join(__dirname, '../../public') : rendererDist;
+// Here, you can also use other preload
+const preload = join(__dirname, '../preload/index.js');
+const url = process.env.VITE_DEV_SERVER_URL as string;
+const indexHtml = join(process.env.DIST, 'index.html');
 
 function createWindow() {
   win = new BrowserWindow({
     title: 'Main window',
     width: 800,
     height: 700,
-    icon: join(publicPath, 'img/icon.png'),
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
@@ -47,12 +51,11 @@ function createWindow() {
   });
 
   if (isDev) {
-    win.loadURL(serverUrl);
+    // electron-vite-vue#298
+    win.loadURL(url);
     // Open devTool if the app is not packaged
-    setTimeout(() => {
-      win?.webContents.openDevTools();
-    }, 500);
-  } else {
+  }
+  else {
     win.loadFile(indexHtml);
   }
 
@@ -63,7 +66,8 @@ function createWindow() {
 
   // Make all links open with the browser, not with the application
   win.webContents.setWindowOpenHandler(({ url }) => {
-    if (url.startsWith('https:')) shell.openExternal(url);
+    if (url.startsWith('https:'))
+      shell.openExternal(url);
     return { action: 'deny' };
   });
   // win.webContents.on('will-navigate', (event, url) => { }) #344
@@ -73,32 +77,48 @@ app.whenReady().then(async () => {
   createWindow();
 
   if (isDev) {
-    const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
-      '@tomjs/electron-devtools-installer'
-    );
-
-    installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
-      .then(exts => {
-        console.log(
-          'Added Extension: ',
-          exts.map(s => s.name),
-        );
-      })
-      .catch(() => {
-        console.log('Failed to install extensions');
-      });
+    try {
+      const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
+        '@tomjs/electron-devtools-installer',
+      );
+
+      installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+        .then((exts) => {
+          // console.log('Added Extension: ', exts.name);
+          // console.log('Added Extension: ', exts.name);
+
+          // Open devTool if the app is not packaged
+          if (win) {
+            win.webContents.openDevTools();
+          }
+
+          console.log(
+            'Added Extension: ',
+            exts.map(s => s.name),
+          );
+        })
+        .catch((err) => {
+          console.log('Failed to install extensions');
+          console.error(err);
+        });
+    }
+    catch (e) {
+      console.error(e);
+    }
   }
 });
 
 app.on('window-all-closed', () => {
   win = null;
-  if (process.platform !== 'darwin') app.quit();
+  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();
+    if (win.isMinimized())
+      win.restore();
     win.focus();
   }
 });
@@ -107,7 +127,8 @@ app.on('activate', () => {
   const allWindows = BrowserWindow.getAllWindows();
   if (allWindows.length) {
     allWindows[0].focus();
-  } else {
+  }
+  else {
     createWindow();
   }
 });
@@ -122,9 +143,19 @@ ipcMain.handle('open-win', (_, arg) => {
     },
   });
 
-  if (serverUrl) {
-    childWindow.loadURL(`${serverUrl}#${arg}`);
-  } else {
+  if (process.env.VITE_DEV_SERVER_URL) {
+    childWindow.loadURL(`${url}#${arg}`);
+  }
+  else {
     childWindow.loadFile(indexHtml, { hash: arg });
   }
 });
+
+process.on('message', (data) => {
+  // electron exit message
+  if (data === ELECTRON_EXIT) {
+    if (isDev && win) {
+      win.webContents.closeDevTools();
+    }
+  }
+});

package/templates/electron-react/electron/preload/index.ts

@@ -0,0 +1,4 @@
+import os from 'node:os';
+
+console.log('Electron Preload Process!');
+console.log(os.homedir());

package/templates/electron-react/index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <title>Vite + Electron + React + TS</title>
+    <title>Vite + Electron + React</title>
   </head>
 
   <body>

package/templates/electron-react/package.json

@@ -1,3 +1,37 @@
 {
-  "description": "vite + electron + react"
+  "name": "template-react",
+  "version": "0.0.0",
+  "private": true,
+  "description": "vite + react",
+  "main": "./dist/main/index.js",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "vite",
+    "debug": "cross-env VITE_ELECTRON_DEBUG=1 vite",
+    "build": "vite build",
+    "build:pack": "cross-env VITE_ELECTRON_BUILDER=1 vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tomjs/electron-devtools-installer": "^4.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^2.3.9",
+    "@tomjs/vite-plugin-electron": "^2.0.2",
+    "@types/node": "^20.19.25",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "cross-env": "^10.1.0",
+    "electron": "^39.2.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-electron-renderer": "^0.14.6"
+  }
 }

package/templates/electron-react/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@swc/core'
+  - electron
+  - electron-winstaller
+  - esbuild
+  - simple-git-hooks

package/templates/electron-react/src/App.css

@@ -1,22 +1,25 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
   padding: 2rem;
+  margin: 0 auto;
   text-align: center;
 }
 
 .logo {
   height: 6em;
   padding: 1.5em;
-  will-change: filter;
   transition: filter 300ms;
+  will-change: filter;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.electron:hover {
   filter: drop-shadow(0 0 2em #1b1c26aa);
 }
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
@@ -25,6 +28,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/templates/electron-react/src/App.tsx

@@ -1,17 +1,17 @@
 import os from 'node:os';
 import { useState } from 'react';
-import viteLogo from '/vite.svg';
 import electronLogo from './assets/electron.svg';
 import reactLogo from './assets/react.svg';
-
 import './App.css';
 
+import viteLogo from '/vite.svg';
+
 function App() {
   const [count, setCount] = useState(0);
 
   const versions = ['chrome', 'node', 'electron']
     .map(s => `${s}: ${process.versions[s]}`)
-    .concat(['platform: ' + os.platform() + ' ' + os.arch()]);
+    .concat([`platform: ${os.platform()} ${os.arch()}`]);
 
   return (
     <>
@@ -29,9 +29,16 @@ function App() {
       <h1>Vite + Electron + React</h1>
       <div className="card">
         <div style={{ marginBottom: '1em' }}>{versions.join(', ')}</div>
-        <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
+        <button onClick={() => setCount(count => count + 1)}>
+          count is
+          {count}
+        </button>
         <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
+          Edit
+          {' '}
+          <code>src/App.tsx</code>
+          {' '}
+          and save to test HMR
         </p>
       </div>
       <p className="read-the-docs">Click on the Vite and React logos to learn more</p>

package/templates/electron-react/src/index.css

@@ -1,13 +1,13 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
+  font-synthesis: none;
+  line-height: 1.5;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
-  font-synthesis: none;
+  color-scheme: light dark;
+  background-color: #242424;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -19,16 +19,17 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
 
 body {
-  margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  margin: 0;
 }
 
 h1 {
@@ -37,19 +38,21 @@ h1 {
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
   padding: 0.6em 1.2em;
+  font-family: inherit;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
+  background-color: #1a1a1a;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -60,9 +63,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

package/templates/electron-react/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tomjs/tsconfig/react-dom.json",
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"]
+}

package/templates/{base/electron → electron-react}/tsconfig.node.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "composite": true
   },
-  "include": ["electron", "package.json", "vite.config.ts"]
+  "include": ["electron", "vite.config.ts"]
 }

package/templates/electron-react/vite.config.ts

@@ -1,27 +1,14 @@
-import path from 'node:path';
 import electron from '@tomjs/vite-plugin-electron';
-import renderer from '@tomjs/vite-plugin-electron-renderer';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
-import pkg from './package.json';
+import renderer from 'vite-plugin-electron-renderer';
 
-// https://vitejs.dev/config/
-export default defineConfig(() => {
-  process.env.APP_BUILD_TIME = Date.now() + '';
-  process.env.APP_VERSION = pkg.version;
-
-  return {
-    envPrefix: ['VITE_', 'APP_'],
-    resolve: {
-      alias: {
-        '@': path.join(__dirname, 'src'),
-      },
-    },
-    plugins: [
-      react(),
-      electron(),
-      // Use Node.js API in the Renderer process
-      renderer(),
-    ],
-  };
+export default defineConfig({
+  plugins: [
+    react(),
+    electron({
+      external: ['fs-extra'],
+    }),
+    renderer(),
+  ],
 });

package/templates/electron-vue/.vscode/launch.json

@@ -0,0 +1,48 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Electron",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "args": [
+        "."
+      ],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
+      ],
+      "preLaunchTask": "npm:dev"
+    },
+    {
+      "name": "Debug Web",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      },
+      "args": [
+        "."
+      ],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "${workspaceFolder}/**/*.cjs",
+        "${workspaceFolder}/**/*.mjs",
+        "!**/node_modules/**"
+      ],
+      "preLaunchTask": "npm:debug"
+    }
+  ]
+}

package/templates/electron-vue/.vscode/tasks.json

@@ -0,0 +1,67 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "label": "npm:dev",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\\/?([\\w\\-]\\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[tomjs:electron\\] startup electron*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "debug",
+      "label": "npm:debug",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "regexp": "^([a-zA-Z]\\:\\/?([\\w\\-]\\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[tomjs:electron\\] startup electron*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

package/templates/electron-vue/README.md

@@ -1,3 +1,3 @@
-# electron-vue
+# vue
 
 vite + electron + vue

package/templates/electron-vue/_eslint.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from '@tomjs/eslint';
+
+export default defineConfig({
+  rules: {
+    'no-console': 'off',
+    'n/prefer-global/process': 'off',
+  },
+});

package/templates/electron-vue/electron/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-electron/env" />