feat: esbuild multiple main config

Breaking Changes: remove esbuild for renderer

packages/create-app/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Breaking Changes
 
 - change to pure ESM
+- remove esbuild as renderer bundler
 
 ### Changes
 

packages/create-app/src/enums/template.ts

@@ -5,8 +5,6 @@
  */
 
 export enum Template {
-  ReactTypeScript = 'react-ts',
-  ReactJavaScript = 'react',
   ReactViteJavaScript = 'react-vite',
   ReactViteTypeScript = 'react-vite-ts',
   MainOnlyTypeScript = 'main-ts',

packages/create-app/src/helpers/is-template-valid.ts

@@ -11,8 +11,6 @@ import { Template } from '../enums/template.js'
 export const TEMPLATES = [
   yellow(Template.MainOnlyJavaScript),
   yellow(Template.MainOnlyTypeScript),
-  cyan(Template.ReactJavaScript),
-  cyan(Template.ReactTypeScript),
   cyan(Template.ReactViteJavaScript),
   cyan(Template.ReactViteTypeScript),
   red(Template.SvelteJavaScript),

packages/create-app/templates/main-ts/esbuild.main.config.ts

@@ -1,15 +1,24 @@
-import { BuildOptions } from 'esbuild'
+import type { BuildOptions } from 'esbuild'
 import * as path from 'node:path'
 
-const config: BuildOptions = {
+const main: BuildOptions = {
   platform: 'node',
-  entryPoints: [
-    path.resolve('src/main/main.ts'),
-    path.resolve('src/main/preload.ts'),
-  ],
+  entryPoints: [path.resolve('src/main/main.ts')],
   bundle: true,
   format: 'esm',
   target: 'node20.11.1', // electron version target
 }
 
-export default config
+const preload: BuildOptions = {
+  platform: 'node',
+  entryPoints: [path.resolve('src/main/preload.ts')],
+  bundle: true,
+  format: 'esm',
+  target: 'node20.11.1', // electron version target
+  // it is important to use .mjs extension for preload script because of how electron load preload script
+  outExtension: {
+    '.js': '.mjs',
+  }
+}
+
+export default [main, preload]

packages/create-app/templates/main-ts/package.json

@@ -7,11 +7,13 @@
     "package": "electron-builder"
   },
   "type": "module",
+  "author": "built by electron-esbuild",
+  "description": "A simple Electron app built with electron-esbuild",
   "devDependencies": {
     "@types/node": "^20.11.1",
     "electron": "^30.0.6",
     "electron-builder": "^24.13.3",
-    "electron-esbuild": "^8.0.0",
+    "electron-esbuild": "^9.0.0",
     "electron-util": "^0.18.1",
     "esbuild": "^0.21.2",
     "typescript": "~5.4.5"

packages/create-app/templates/main-ts/src/main/main.ts

@@ -14,7 +14,7 @@ async function createWindow() {
     minHeight: 600,
     minWidth: 650,
     webPreferences: {
-      preload: path.join(dirname, 'preload.js'),
+      preload: path.join(dirname, 'preload.mjs'),
     },
     show: false,
   })

packages/create-app/templates/main/esbuild.main.config.js

@@ -1,13 +1,25 @@
 import * as path from 'node:path'
 
-/** @var {Partial<import('esbuild').BuildOptions>} */
-export default {
+/** @var {import('esbuild').BuildOptions} */
+const main = {
   platform: 'node',
-  entryPoints: [
-    path.resolve('src/main/main.js'),
-    path.resolve('src/main/preload.js'),
-  ],
+  entryPoints: [path.resolve('src/main/main.js')],
   bundle: true,
   format: 'esm',
   target: 'node20.11.1', // electron version target
 }
+
+/** @var {import('esbuild').BuildOptions} */
+const preload = {
+  platform: 'node',
+  entryPoints: [path.resolve('src/main/preload.js')],
+  bundle: true,
+  format: 'esm',
+  target: 'node20.11.1', // electron version target
+  // it is important to use .mjs extension for preload script because of how electron load preload script
+  outExtension: {
+    '.js': '.mjs',
+  }
+}
+
+export default [main, preload]

packages/create-app/templates/main/package.json

@@ -7,10 +7,12 @@
     "package": "electron-builder"
   },
   "type": "module",
+  "author": "built by electron-esbuild",
+  "description": "A simple Electron app built with electron-esbuild",
   "devDependencies": {
     "electron": "^30.0.6",
     "electron-builder": "^24.13.3",
-    "electron-esbuild": "^8.0.0",
+    "electron-esbuild": "^9.0.0",
     "electron-util": "^0.18.1",
     "esbuild": "^0.21.2"
   },

packages/create-app/templates/main/src/main/main.js

@@ -15,7 +15,7 @@ async function createWindow() {
     minHeight: 600,
     minWidth: 650,
     webPreferences: {
-      preload: path.join(dirname, 'preload.js'),
+      preload: path.join(dirname, 'preload.mjs'),
     },
     show: false,
   })