feat(template-vite): switch to esm by default.

packages/template/vite-typescript/tmpl/main.ts

@@ -17,11 +17,12 @@ const createWindow = () => {
     width: 800,
     height: 600,
     webPreferences: {
+      // Load preload.mjs when the { "type": "module" }, else load preload.js
       preload: path.join(__dirname, 'preload.mjs'),
     },
   });
 
-  // and load the index.html of the app.
+  // Load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {

packages/template/vite-typescript/tmpl/vite.base.config.ts

@@ -7,6 +7,8 @@ export const builtins = ['electron', ...builtinModules.map((m) => [m, `node:${m}
 
 export const external = [...builtins, ...Object.keys('dependencies' in pkg ? (pkg.dependencies as Record<string, unknown>) : {})];
 
+export const esmodule = pkg.type === 'module';
+
 export function getBuildConfig(env: ConfigEnv<'build'>): UserConfig {
   const { root, mode, command } = env;
 

packages/template/vite-typescript/tmpl/vite.main.config.ts

@@ -1,6 +1,6 @@
 import type { ConfigEnv, UserConfig } from 'vite';
 import { defineConfig, mergeConfig } from 'vite';
-import { getBuildConfig, getBuildDefine, external, pluginHotRestart } from './vite.base.config';
+import { getBuildConfig, getBuildDefine, external, esmodule, pluginHotRestart } from './vite.base.config';
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
@@ -12,7 +12,7 @@ export default defineConfig((env) => {
       lib: {
         entry: forgeConfigSelf.entry!,
         fileName: () => '[name].js',
-        formats: ['es'],
+        formats: [esmodule ? 'es' : 'cjs'],
       },
       rollupOptions: {
         external,

packages/template/vite-typescript/tmpl/vite.preload.config.ts

@@ -1,11 +1,12 @@
 import type { ConfigEnv, UserConfig } from 'vite';
 import { defineConfig, mergeConfig } from 'vite';
-import { getBuildConfig, external, pluginHotRestart } from './vite.base.config';
+import { getBuildConfig, external, esmodule, pluginHotRestart } from './vite.base.config';
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
   const forgeEnv = env as ConfigEnv<'build'>;
   const { forgeConfigSelf } = forgeEnv;
+  const ext = esmodule ? 'mjs' : 'js';
   const config: UserConfig = {
     build: {
       rollupOptions: {
@@ -18,8 +19,8 @@ export default defineConfig((env) => {
           format: 'cjs',
           // It should not be split chunks.
           inlineDynamicImports: true,
-          entryFileNames: '[name].mjs',
-          chunkFileNames: '[name].mjs',
+          entryFileNames: `[name].${ext}`,
+          chunkFileNames: `[name].${ext}`,
           assetFileNames: '[name].[ext]',
         },
       },

packages/template/vite/tmpl/main.js

@@ -17,11 +17,12 @@ const createWindow = () => {
     width: 800,
     height: 600,
     webPreferences: {
+      // Load preload.mjs when the { "type": "module" }, else load preload.js
       preload: path.join(__dirname, 'preload.mjs'),
     },
   });
 
-  // and load the index.html of the app.
+  // Load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
   } else {

packages/template/vite/tmpl/vite.base.config.js

@@ -5,6 +5,8 @@ export const builtins = ['electron', ...builtinModules.map((m) => [m, `node:${m}
 
 export const external = [...builtins, ...Object.keys(pkg.dependencies || {})];
 
+export const esmodule = pkg.type === 'module';
+
 /** @type {(env: import('vite').ConfigEnv<'build'>) => import('vite').UserConfig} */
 export const getBuildConfig = (env) => {
   const { root, mode, command } = env;

packages/template/vite/tmpl/vite.main.config.js

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vite';
-import { getBuildConfig, getBuildDefine, external, pluginHotRestart } from './vite.base.config';
+import { getBuildConfig, getBuildDefine, external, esmodule, pluginHotRestart } from './vite.base.config';
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
@@ -12,7 +12,7 @@ export default defineConfig((env) => {
       lib: {
         entry: forgeConfigSelf.entry,
         fileName: () => '[name].js',
-        formats: ['es'],
+        formats: [esmodule ? 'es' : 'cjs'],
       },
       rollupOptions: {
         external,

packages/template/vite/tmpl/vite.preload.config.js

@@ -1,11 +1,12 @@
 import { defineConfig, mergeConfig } from 'vite';
-import { getBuildConfig, external, pluginHotRestart } from './vite.base.config';
+import { getBuildConfig, external, esmodule, pluginHotRestart } from './vite.base.config';
 
 // https://vitejs.dev/config
 export default defineConfig((env) => {
   /** @type {import('vite').ConfigEnv<'build'>} */
   const forgeEnv = env;
   const { forgeConfigSelf } = forgeEnv;
+  const ext = esmodule ? 'mjs' : 'js';
   /** @type {import('vite').UserConfig} */
   const config = {
     build: {
@@ -19,8 +20,8 @@ export default defineConfig((env) => {
           format: 'cjs',
           // It should not be split chunks.
           inlineDynamicImports: true,
-          entryFileNames: '[name].mjs',
-          chunkFileNames: '[name].mjs',
+          entryFileNames: `[name].${ext}`,
+          chunkFileNames: `[name].${ext}`,
           assetFileNames: '[name].[ext]',
         },
       },