Merge pull request #98 from shoonia/update-build-2

Update build

.github/workflows/build-deploy.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
     - name: Checkout the repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Setup Node.js
       uses: actions/setup-node@v3

.github/workflows/pull-request.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
     - name: Checkout the repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
 
     - name: Setup Node.js
       uses: actions/setup-node@v3

package.json

@@ -25,23 +25,23 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
-    "@evilmartians/lefthook": "^1.5.1",
+    "@babel/preset-typescript": "^7.23.2",
+    "@evilmartians/lefthook": "^1.5.2",
     "@types/css-modules": "^1.0.3",
     "@types/jest": "^29.5.5",
-    "@types/node": "^20.8.2",
+    "@types/node": "^20.8.6",
     "@types/react-hint": "^3.2.1",
     "@types/react-modal": "^3.16.1",
-    "@types/wicg-file-system-access": "^2023.10.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@types/wicg-file-system-access": "^2023.10.1",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "css-mqpacker-webpack-plugin": "^0.12.9",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-react": "^7.33.2",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
     "html-inline-css-webpack-plugin": "^1.11.2",
@@ -54,13 +54,13 @@
     "postcss-loader": "^7.3.3",
     "postcss-simple-vars": "^7.0.1",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-css-modules": "^4.3.0",
     "stylelint-config-standard": "^34.0.0",
     "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.9.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

src/components/UploadModal/index.tsx

@@ -1,10 +1,7 @@
 import { lazy, Suspense } from 'preact/compat';
 
 const LazyModal: FC = lazy(() => {
-  return import(
-    /* webpackPrefetch: true */
-    './UploadModal'
-  ).then((i) => i.UploadModal);
+  return import('./UploadModal').then((i) => i.UploadModal);
 });
 
 export const UploadModal: FC = () => (

src/hooks/useLazyRouter.ts

@@ -4,19 +4,13 @@ import { useStoreon } from '../store';
 import { ROUTER } from '../constants';
 
 const BuilderPage: FC = lazy(() => {
-  return import(
-    /* webpackPrefetch: true */
-    '../components/BuilderPage'
-  ).then((i) => {
+  return import('../components/BuilderPage').then((i) => {
     return i.BuilderPage;
   });
 });
 
 const ValidatorPage: FC = lazy(() => {
-  return import(
-    /* webpackPrefetch: true */
-    '../components/ValidatorPage'
-  ).then((i) => {
+  return import('../components/ValidatorPage').then((i) => {
     return i.ValidatorPage;
   });
 });

webpack.config.cjs

@@ -20,6 +20,10 @@ const staticDir = resolveApp('static');
 const srcDir = resolveApp('src');
 const distDir = resolveApp('dist');
 
+/**
+ * @param {NodeJS.ProcessEnv} env
+ * @returns {webpack.Configuration}
+ */
 module.exports = ({ NODE_ENV }) => {
   const isDev = NODE_ENV === 'development';
   const isProd = NODE_ENV === 'production';
@@ -37,9 +41,7 @@ module.exports = ({ NODE_ENV }) => {
       filename: '[name].[contenthash:4].js',
       chunkFilename: '[name].[chunkhash:4].js',
       publicPath: '',
-      devtoolModuleFilenameTemplate: (info) => {
-        return relative(srcDir, info.absoluteResourcePath);
-      },
+      devtoolModuleFilenameTemplate: (i) => relative(srcDir, i.absoluteResourcePath),
       chunkLoadingGlobal: 'g',
       globalObject: 'self',
       clean: isProd,
@@ -48,6 +50,7 @@ module.exports = ({ NODE_ENV }) => {
       mangleExports: 'size',
       moduleIds: 'size',
       chunkIds: 'total-size',
+      mergeDuplicateChunks: true,
       minimize: isProd,
       minimizer: [
         new TerserPlugin({
@@ -130,12 +133,19 @@ module.exports = ({ NODE_ENV }) => {
       'exenv': '{canUseDOM:true}',
     },
     module: {
-      strictExportPresence: true,
+      parser: {
+        javascript: {
+          strictExportPresence: true,
+          dynamicImportFetchPriority: 'high',
+          dynamicImportPrefetch: true,
+          harmony: true,
+        },
+      },
       rules: [
         {
           oneOf: [
             {
-              test: /\.(js|tsx?)$/,
+              test: /\.tsx?$/,
               include: srcDir,
               loader: 'babel-loader',
               options: {
@@ -268,6 +278,7 @@ module.exports = ({ NODE_ENV }) => {
     experiments: {
       backCompat: false,
       outputModule: true,
+      topLevelAwait: true,
     },
     performance: false,
     node: false,