feat: update for electron@30 and vite@5 (#57)

* feat: update for electron@30 and vite@5

* feat: esbuild multiple main config

Breaking Changes: remove esbuild for renderer

.run/create-electron-esbuild-app var.run.xml → .run/create-app var.run.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="create-app var" type="NodeJSConfigurationType" application-parameters="var" path-to-js-file="dist/index.mjs" working-dir="$PROJECT_DIR$/packages/create-app">
+  <configuration default="false" name="create-app var" type="NodeJSConfigurationType" application-parameters="var" path-to-js-file="dist/index.js" working-dir="$PROJECT_DIR$/packages/create-app">
     <envs>
       <env name="DEBUG" value="1" />
     </envs>

package.json

@@ -17,16 +17,16 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
-    "eslint": "^8.45.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "@typescript-eslint/parser": "^7.9.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.0.0",
     "husky": "8.0.3",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.0",
-    "typescript": "~5.1.6"
+    "typescript": "~5.4.5"
   },
   "lint-staged": {
     "*.{md,json,yml}": [

packages/create-app/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 9.0.0
+
+### Breaking Changes
+
+- change to pure ESM
+- remove esbuild as renderer bundler
+
+### Changes
+
+- Updated all templates for latest electron versions.
+
 ## 8.0.0
 
 ### Breaking Changes

packages/create-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electron-esbuild/create-app",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "keywords": [
     "electron",
     "react",
@@ -9,6 +9,7 @@
     "cli",
     "create-app"
   ],
+  "type": "module",
   "description": "Create Electron esbuild powered apps with one command",
   "repository": {
     "type": "git",
@@ -18,15 +19,15 @@
   "author": "Kiyozz",
   "license": "MIT",
   "bin": {
-    "create-app": "./dist/index.mjs"
+    "create-app": "./dist/index.js"
   },
-  "exports": "./dist/index.mjs",
+  "exports": "./dist/index.js",
   "engines": {
     "node": ">=18.15.0"
   },
   "scripts": {
-    "build": "ee 'src/**' --format esm --sourcemap --clean-outdir --outdir dist --target node16",
-    "prepublishOnly": "ee 'src/**' --format esm --sourcemap --clean-outdir --outdir dist --target node16 --check-types --ts-project tsconfig.types.json",
+    "build": "ee 'src/**' --module --format esm --sourcemap --clean-outdir --outdir dist --target node16",
+    "prepublishOnly": "ee 'src/**' --module --format esm --sourcemap --clean-outdir --outdir dist --target node16 --check-types --ts-project tsconfig.types.json",
     "lint": "eslint src --ext mts,mjs,ts,js"
   },
   "files": [
@@ -47,6 +48,6 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/minimist": "^1.2.2",
     "@types/node": "^18.16.19",
-    "typescript": "~5.1.6"
+    "typescript": "~5.4.5"
   }
 }

packages/create-app/src/create-app.mts → packages/create-app/src/create-app.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
@@ -9,18 +9,18 @@ import * as fs from 'node:fs/promises'
 import * as os from 'node:os'
 import * as path from 'node:path'
 
-import { Template } from './enums/template.mjs'
-import { makeDir, write } from './helpers/fs.mjs'
+import { Template } from './enums/template.js'
+import { makeDir, write } from './helpers/fs.js'
 import {
   getPackageManager,
   PackageManagerNames,
-} from './helpers/get-package-manager.mjs'
-import { getTemplateDir } from './helpers/get-template-dir.mjs'
-import { initializeGit } from './helpers/git.mjs'
-import { isPathExists } from './helpers/is-path-exists.mjs'
-import { error } from './helpers/log.mjs'
-import { readJsonFromFile } from './helpers/read-json-from-file.mjs'
-import { Package } from './types/package.mjs'
+} from './helpers/get-package-manager.js'
+import { getTemplateDir } from './helpers/get-template-dir.js'
+import { initializeGit } from './helpers/git.js'
+import { isPathExists } from './helpers/is-path-exists.js'
+import { error } from './helpers/log.js'
+import { readJsonFromFile } from './helpers/read-json-from-file.js'
+import { Package } from './types/package.js'
 
 type CreateOptions = {
   name: string

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

@@ -1,12 +1,10 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
 
 export enum Template {
-  ReactTypeScript = 'react-ts',
-  ReactJavaScript = 'react',
   ReactViteJavaScript = 'react-vite',
   ReactViteTypeScript = 'react-vite-ts',
   MainOnlyTypeScript = 'main-ts',

packages/create-app/src/helpers/ensure-folder-empty.mts → packages/create-app/src/helpers/ensure-folder-empty.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
@@ -8,7 +8,7 @@ import { green, blue } from 'kolorist'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 
-import { isPathExists } from './is-path-exists.mjs'
+import { isPathExists } from './is-path-exists.js'
 
 export const ensureFolderEmpty = async (
   fileOrFolder: string,

packages/create-app/src/helpers/filename.mts → packages/create-app/src/helpers/filename.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/helpers/fs.mts → packages/create-app/src/helpers/fs.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/helpers/get-package-manager.mts → packages/create-app/src/helpers/get-package-manager.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/helpers/get-template-dir.mts → packages/create-app/src/helpers/get-template-dir.ts

@@ -1,12 +1,12 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
 
 import * as path from 'node:path'
 
-import { dirname } from './filename.mjs'
+import { dirname } from './filename.js'
 
 export const getTemplateDir = (template: string): string => {
   return path.resolve(dirname(import.meta), '../../templates', template)

packages/create-app/src/helpers/git.mts → packages/create-app/src/helpers/git.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/helpers/is-path-exists.mts → packages/create-app/src/helpers/is-path-exists.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

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

@@ -1,18 +1,16 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
 
 import { cyan, red, stripColors, yellow } from 'kolorist'
 
-import { Template } from '../enums/template.mjs'
+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/src/helpers/log.mts → packages/create-app/src/helpers/log.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/helpers/read-json-from-file.mts → packages/create-app/src/helpers/read-json-from-file.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

packages/create-app/src/index.mts → packages/create-app/src/index.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */
@@ -12,13 +12,13 @@ import minimist from 'minimist'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 
-import { createApp } from './create-app.mjs'
-import { Template } from './enums/template.mjs'
-import { ensureFolderEmpty } from './helpers/ensure-folder-empty.mjs'
-import { dirname } from './helpers/filename.mjs'
-import { emptyDir, isDirEmpty } from './helpers/fs.mjs'
-import { isTemplateValid, TEMPLATES } from './helpers/is-template-valid.mjs'
-import { warn } from './helpers/log.mjs'
+import { createApp } from './create-app.js'
+import { Template } from './enums/template.js'
+import { ensureFolderEmpty } from './helpers/ensure-folder-empty.js'
+import { dirname } from './helpers/filename.js'
+import { emptyDir, isDirEmpty } from './helpers/fs.js'
+import { isTemplateValid, TEMPLATES } from './helpers/is-template-valid.js'
+import { warn } from './helpers/log.js'
 
 const getVersion = async (): Promise<string> => {
   const pkgPath = path.resolve(dirname(import.meta), '../package.json')

packages/create-app/src/types/package.mts → packages/create-app/src/types/package.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Kiyozz.
+ * Copyright (c) 2024 Kiyozz.
  *
  * All rights reserved.
  */

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

@@ -1,14 +1,24 @@
-import { BuildOptions } from 'esbuild'
-import * as path from 'path'
+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,
-  target: 'node18.15.0', // electron version target
+  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

@@ -6,14 +6,17 @@
     "build": "electron-esbuild build",
     "package": "electron-builder"
   },
+  "type": "module",
+  "author": "built by electron-esbuild",
+  "description": "A simple Electron app built with electron-esbuild",
   "devDependencies": {
-    "@types/node": "^18.16.19",
-    "electron": "^25.3.0",
-    "electron-builder": "^24.4.0",
-    "electron-esbuild": "^8.0.0",
-    "electron-util": "^0.17.2",
-    "esbuild": "^0.18.14",
-    "typescript": "^5.1.6"
+    "@types/node": "^20.11.1",
+    "electron": "^30.0.6",
+    "electron-builder": "^24.13.3",
+    "electron-esbuild": "^9.0.0",
+    "electron-util": "^0.18.1",
+    "esbuild": "^0.21.2",
+    "typescript": "~5.4.5"
   },
   "build": {
     "appId": "io.comp.myapp",

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

@@ -1,23 +1,24 @@
 import { app, BrowserWindow } from 'electron'
+import { isDev } from 'electron-util/main'
 import { is } from 'electron-util'
-import * as path from 'path'
+import * as path from 'node:path'
 
 let win: BrowserWindow | null = null
 
+const dirname = path.dirname(new URL(import.meta.url).pathname)
+
 async function createWindow() {
   win = new BrowserWindow({
     width: 800,
     height: 820,
     minHeight: 600,
     minWidth: 650,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js'),
+      preload: path.join(dirname, 'preload.mjs'),
     },
     show: false,
   })
 
-  const isDev = is.development
-
   win.loadURL('https://duckduckgo.com') // load any url you want to use with electron
 
   win.on('closed', () => {
@@ -38,7 +39,7 @@ async function createWindow() {
   })
 }
 
-app.on('ready', createWindow)
+app.whenReady().then(createWindow)
 
 app.on('window-all-closed', () => {
   if (!is.macos) {

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

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2015",
+    "target": "es2020",
     "module": "esnext",
     "moduleResolution": "node",
     "sourceMap": true,