Merge branch 'rollback/esm-settings' into develop

Author: iamWing

.eslintrc.cjs

@@ -89,8 +89,10 @@ const specialConfig = {
   files: [
     '**/*.config.js',
     '**/*.config.cjs',
+    '**/*.config.mjs',
     '**/*.config.*.js',
     '**/*.config.*.cjs',
+    '**/*.config.*.mjs',
   ],
   rules: {
     ...baseConfig.rules,

CHANGELOG_V4+.md

@@ -5,6 +5,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- File extension of Jest & Webpack config files to `mjs`.
+- NPM `test` script:
+  - Removed `jest --clearCache` at the beginning as the updated Jest & ts-jest
+    settings execute the dynamic import lines with no issue.
+  - Disabled Node experimental warning message by setting `NODE_NO_WARNINGS=1`.
+- Rolled back the value of `moduleResolution` in `tsconfig` to `Node` (means
+  `.js` file extension on relative imports is now __OPTIONAL__).
+- Enhanced function `pathsToESModuleNameMapper` in `jest.config.js` to return a
+  less clumsy mapping object.
 
 ## [v4.1.2] - 2022-08-15
 ### Added

jest.config.js renamed to jest.config.mjs

@@ -21,13 +21,16 @@ function pathsToESModuleNameMapper() {
     const [key, val] = entry;
 
     if (/.*\(\.\*\)\$$/.test(key)) {
-      const convertedKey = `${key.substring(0, key.length - 1)}\\.js$`;
+      // eslint-disable-next-line prefer-template
+      const convertedKey = key.substring(0, key.length - 2)
+        + '[^\\.js])(\\.js)?$';
       esmMap[convertedKey] = val;
     }
-
-    esmMap[key] = val;
   });
 
+  // Append the mapping for relative paths without path alias.
+  esmMap['^(\\.{1,2}/.*)\\.js$'] = '$1';
+
   return esmMap;
 }
 

package.json

@@ -2,13 +2,12 @@
   "name": "electron-react-typescript-webpack-boilerplate",
   "version": "4.1.2",
   "description": "Pre-configured boilerplate for Electron + React + TypeScript",
-  "type": "module",
   "main": "./dist/main.bundle.js",
   "scripts": {
     "start": "electron ./dist/main.bundle.js",
     "dev": "rimraf dist && cross-env NODE_ENV=development webpack --watch --progress --color",
     "prod": "rimraf dist && cross-env NODE_ENV=production webpack --progress --color",
-    "test": "jest --clearCache && cross-env NODE_ENV=test NODE_OPTIONS=--experimental-vm-modules jest",
+    "test": "cross-env NODE_ENV=test NODE_OPTIONS=--experimental-vm-modules NODE_NO_WARNINGS=1 jest",
     "watch-test": "npm run test -- --watchAll",
     "next-rc": "npm --no-git-tag-version version prerelease --preid=rc",
     "next-patch": "npm --no-git-tag-version version patch",

src/main/main.ts

@@ -4,7 +4,7 @@
 import * as path from 'path';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BrowserWindow, app, ipcMain } from 'electron';
-import * as nodeEnv from '_utils/node-env.js';
+import * as nodeEnv from '_utils/node-env';
 
 let mainWindow: Electron.BrowserWindow | undefined;
 

src/preload/preload.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { contextBridge } from 'electron';
-import ipcAPI from '_preload/ipc-api.js';
+import ipcAPI from '_preload/ipc-api';
 
 contextBridge.exposeInMainWorld('ipcAPI', ipcAPI);

src/renderer/renderer.tsx

@@ -4,9 +4,9 @@
 // Import the styles here to process them with webpack
 import '_public/style.css';
 
-import App from '_renderer/App.js';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
+import App from '_renderer/App';
 
 const container = document.getElementById('app');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

src/types/global.d.ts

@@ -1,7 +1,7 @@
 declare global {
   interface Window {
     /** APIs for Electron IPC */
-    ipcAPI?: typeof import('_preload/ipc-api.js').default
+    ipcAPI?: typeof import('_preload/ipc-api').default
   }
 }
 

tests/main/main.spec.ts

@@ -1,6 +1,6 @@
 import { jest } from '@jest/globals';
 import { BrowserWindow } from 'electron';
-import { exportedForTests } from '_main/main.js';
+import { exportedForTests } from '_main/main';
 
 jest.mock('electron', () => ({
   app: {

tests/utils/node-env.spec.ts

@@ -4,7 +4,7 @@ test('NODE_ENV=test', async () => {
   process.env.NODE_ENV = 'test';
   jest.resetModules();
 
-  const nodeEnv = await import('_utils/node-env.js');
+  const nodeEnv = await import('_utils/node-env');
 
   expect(nodeEnv.test).toBeTruthy();
   expect(nodeEnv.dev).toBeFalsy();
@@ -15,7 +15,7 @@ test('NODE_ENV=development', async () => {
   process.env.NODE_ENV = 'development';
   jest.resetModules();
 
-  const nodeEnv = await import('_utils/node-env.js');
+  const nodeEnv = await import('_utils/node-env');
 
   expect(nodeEnv.dev).toBeTruthy();
   expect(nodeEnv.prod).toBeFalsy();
@@ -26,7 +26,7 @@ test('NODE_ENV=production', async () => {
   process.env.NODE_ENV = 'production';
   jest.resetModules();
 
-  const nodeEnv = await import('_utils/node-env.js');
+  const nodeEnv = await import('_utils/node-env');
 
   expect(nodeEnv.prod).toBeTruthy();
   expect(nodeEnv.dev).toBeFalsy();

tsconfig.eslint.json

@@ -9,7 +9,9 @@
     ".eslintrc.cjs",
     "**/*.config.js",
     "**/*.config.cjs",
+    "**/*.config.mjs",
     "**/*.config.*.js",
-    "**/*.config.*.cjs"
+    "**/*.config.*.cjs",
+    "**/*.config.*.mjs"
   ]
 }

tsconfig.json

@@ -3,7 +3,7 @@
     "strict": true,
     "baseUrl": ".",
     "module": "ES2020",
-    "moduleResolution": "Node16",
+    "moduleResolution": "Node",
     "paths": {
       "_/*": ["src/*"],
       "_public/*": ["public/*"],

webpack.config.js renamed to webpack.config.mjs

@@ -20,7 +20,7 @@ const commonConfig = {
   output: { path: path.join(__dirname, 'dist') },
   node: { __dirname: false, __filename: false },
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/.*\/+.+\.js$/, (resource) => {
+    new webpack.NormalModuleReplacementPlugin(/^\S+\/\S+\.js$/, (resource) => {
       // eslint-disable-next-line no-param-reassign
       resource.request = resource.request.replace(/\.js$/, '');
     }),
@@ -68,7 +68,6 @@ const mainConfig = merge(commonConfig, {
             const jsonContent = JSON.parse(content);
             const electronVersion = jsonContent.devDependencies.electron;
 
-            delete jsonContent.type;
             delete jsonContent.devDependencies;
             delete jsonContent.optionalDependencies;
             delete jsonContent.scripts;