@machtwatch/react-script 1.2.11-alpha.30 → 1.2.11-alpha.32

package/config/babel/babel-custom-loader.js

@@ -1,70 +1,66 @@
 module.exports = () => ({
-  customOptions({ transform_runtime, isClient, ...loader }) {
-    return {
-      loader,
-      custom: { ...transform_runtime, isClient }
-    };
-  },
-  config(cfg) {
-    return {
-      ...cfg.options,
-      presets: [
-        [
-          require('@babel/preset-env'),
-          {
-            modules: false,
-            useBuiltIns: 'usage',
-            corejs: '3.22'
-          }
-        ],
-        require('@babel/preset-react'),
+    customOptions({ transform_runtime, ...loader }) {
+      return {
+        loader,
+        custom: { ...transform_runtime }
+      };
+    },
+    config(cfg) {
+      return {
+        ...cfg.options,
+        presets: [
+          [
+            require('@babel/preset-env'),
+            {
+              modules: false,
+              useBuiltIns: 'usage',
+              corejs: '3.22'
+            }
+          ],
+          require('@babel/preset-react'),
 
-      ],
-      plugins: [
-        require('@babel/plugin-transform-runtime'),
-        require('@babel/plugin-proposal-function-bind'),
-        require('@babel/plugin-proposal-export-default-from'),
-        require('@babel/plugin-proposal-export-namespace-from'),
-        require('@babel/plugin-proposal-throw-expressions'),
-        require('@babel/plugin-syntax-dynamic-import'),
-        require('@babel/plugin-proposal-json-strings'),
-        require('@loadable/babel-plugin'),
-        [require('babel-plugin-transform-imports'), {
-          '@machtwatch/react-ui': {
-            transform: '@machtwatch/react-ui/lib/${member}',
-            preventFullImport: true
-          }
-        }],
-        [require('@babel/plugin-proposal-decorators'), {
-          legacy: true
-        }],
-        [require('@babel/plugin-proposal-optional-chaining'), {
-          loose: true
-        }],
-        [require('@babel/plugin-proposal-class-properties'), {
-          loose: true
-        }],
-        [require('@babel/plugin-proposal-private-methods'), { loose: true }],
-        [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
-        [require('babel-plugin-add-module-exports'), {
-          addDefaultProperty: true
-        }],
-        ...(cfg.options.isClient && !cfg.options.compact ? [
-          require.resolve('react-refresh/babel')
-        ] : [
+        ],
+        plugins: [
+          require('@babel/plugin-transform-runtime'),
+          require('@babel/plugin-proposal-function-bind'),
+          require('@babel/plugin-proposal-export-default-from'),
+          require('@babel/plugin-proposal-export-namespace-from'),
+          require('@babel/plugin-proposal-throw-expressions'),
+          require('@babel/plugin-syntax-dynamic-import'),
+          require('@babel/plugin-proposal-json-strings'),
+          require('@loadable/babel-plugin'),
+          [require('babel-plugin-transform-imports'), {
+            '@machtwatch/react-ui': {
+              transform: '@machtwatch/react-ui/lib/${member}',
+              preventFullImport: true
+            }
+          }],
+          [require('@babel/plugin-proposal-decorators'), {
+            legacy: true
+          }],
+          [require('@babel/plugin-proposal-optional-chaining'), {
+            loose: true
+          }],
+          [require('@babel/plugin-proposal-class-properties'), {
+            loose: true
+          }],
+          [require('@babel/plugin-proposal-private-methods'), { loose: true }],
+          [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+          [require('babel-plugin-add-module-exports'), {
+            addDefaultProperty: true
+          }],
           ...(cfg.options.compact ? [
             require('@babel/plugin-transform-react-inline-elements'),
             require('@babel/plugin-transform-react-constant-elements')
-          ] : [])
-        ]),
-        ...(cfg.options.plugins || [])
-      ],
-    };
-  },
-  result(result) {
-    return {
-      ...result,
-      code: `${result.code} \n// Generated by babel-custom-loader`
-    };
-  },
-});
+          ] : []),
+          ...(cfg.options.plugins || [])
+        ],
+      };
+    },
+    result(result) {
+      return {
+        ...result,
+        code: `${result.code} \n// Generated by babel-custom-loader`
+      };
+    },
+  });

package/config/jest/createJestConfig.js

@@ -4,7 +4,7 @@ const path = require('path');
 const fs = require('fs');
 const merge = require('deepmerge');
 
-module.exports = (resolve, rootDir, srcRoots, appConfig) => {
+module.exports = (resolve, rootDir, srcRoots) => {
   const toRelRootDir = f => '<rootDir>/' + path.relative(rootDir || '', f);
   const extendedPath = path.join(process.cwd(), 'extended-jest.config.js');
 
@@ -26,9 +26,6 @@ module.exports = (resolve, rootDir, srcRoots, appConfig) => {
   }
 
   const config = {
-    globals: {
-      CONFIG: appConfig && (appConfig.globals || appConfig),
-    },
     setupFiles: [resolve('scripts/utils/polyfills.js')],
     testMatch: [
       "<rootDir>/src/shared/**/*.(spec|test).{js,jsx,mjs}"

package/config/jest/jest-setup.js

@@ -1 +1,4 @@
 import "@testing-library/jest-dom";
+import config from 'config';
+
+global.CONFIG = config.globals;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.30",
+  "version": "1.2.11-alpha.32",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -51,10 +51,9 @@
     "@babel/preset-react": "^7.17.12",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "13.0.0",
+    "@testing-library/react": "^11.2.7",
     "assets-webpack-plugin": "7.1.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^26.3.0",
@@ -65,6 +64,7 @@
     "browser-sync": "^2.26.7",
     "child_process": "^1.0.2",
     "compression-webpack-plugin": "^10.0.0",
+    "config": "^3.3.9",
     "core-js": "^3.23.3",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^4.0.0",
@@ -91,14 +91,10 @@
     "postcss-import": "^14.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^7.7.1",
-    "process": "0.11.10",
     "promise": "^8.0.2",
     "purgecss-webpack-plugin": "^4.1.3",
-    "react": "18.3.1",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "18.3.1",
-    "react-error-overlay": "6.0.11",
-    "react-refresh": "0.18.0",
+    "react-error-overlay": "6.0.9",
     "recluster": "^0.4.5",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^2.6.3",

package/scripts/build.js

@@ -5,18 +5,14 @@ const run = require('./utils/run');
 const clean = require('./utils/clean');
 const copy = require('./utils/copy');
 const pkg = require('../package.json');
-const paths = require('../config/paths');
-const { createRequire } = require('module');
-
-const requireApp = createRequire(`${paths.appPath}/package.json`);
-const { loadConfig } = requireApp('c12');
+const webpackConfig = require('./webpack.config');
 
 /**
  * Compiles the project from source files into a distributable
  * format and copies it to the output (build) folder.
  */
 
-function bundle(webpackConfig) {
+function bundle() {
   return new Promise((resolve, reject) => {
     webpack(webpackConfig).run((err, stats) => {
       if (err) {
@@ -31,15 +27,9 @@ function bundle(webpackConfig) {
 }
 
 async function build() {
-  const { config } = await loadConfig({
-    cwd: paths.appPath,
-  });
-
-  const webpackConfig = await require('./webpack.config')(config);
-
-  await run(clean, config);
+  await run(clean);
   await run(copy);
-  await run(bundle.bind(null, webpackConfig));
+  await run(bundle);
 
   if (process.argv.includes('--docker')) {
     cp.spawnSync('docker', ['build', '-t', pkg.name, '.'], { stdio: 'inherit' })

package/scripts/lib/webpackHotDevClient.js

@@ -10,38 +10,38 @@ const {
   stopReportingRuntimeErrors,
 } = require('react-error-overlay');
 
-// setEditorHandler(errorLocation => {
-//   const fileName = encodeURIComponent(errorLocation.fileName);
-//   const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
-// 
-//   fetch(
-//     // Keep in sync with react-dev-utils/errorOverlayMiddleware
-//     `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
-//   );
-// });
+setEditorHandler(errorLocation => {
+  const fileName = encodeURIComponent(errorLocation.fileName);
+  const lineNumber = encodeURIComponent(errorLocation.lineNumber || 1);
 
-// hotClient.useCustomOverlay({
-//   showProblems(type, errors) {
-//     const formatted = formatWebpackMessages({
-//       errors,
-//       warnings: [],
-//     });
-// 
-//     reportBuildError(formatted.errors[0]);
-//   },
-//   clear() {
-//     dismissBuildError();
-//   },
-// });
+  fetch(
+    // Keep in sync with react-dev-utils/errorOverlayMiddleware
+    `${launchEditorEndpoint}?fileName=${fileName}&lineNumber=${lineNumber}`,
+  );
+});
+
+hotClient.useCustomOverlay({
+  showProblems(type, errors) {
+    const formatted = formatWebpackMessages({
+      errors,
+      warnings: [],
+    });
+
+    reportBuildError(formatted.errors[0]);
+  },
+  clear() {
+    dismissBuildError();
+  },
+});
 
 hotClient.setOptionsAndConnect({
   name: 'client',
   reload: true,
 });
 
-// startReportingRuntimeErrors({
-//   filename: '/assets/client.js',
-// });
+startReportingRuntimeErrors({
+  filename: '/assets/client.js',
+});
 
 if (module.hot) {
   module.hot.dispose(stopReportingRuntimeErrors);

package/scripts/start.js

@@ -7,13 +7,11 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 
 const paths = require('../config/paths');
-
+const webpackConfig = require('./webpack.config');
 const run = require('./utils/run');
 const clean = require('./utils/clean');
-const { createRequire } = require('module');
 
-const requireApp = createRequire(`${paths.appPath}/package.json`);
-const { loadConfig } = requireApp('c12');
+const config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
 
 const { format } = run;
 
@@ -71,18 +69,12 @@ async function start() {
     return server;
   }
 
-  const { config } = await loadConfig({
-    cwd: paths.appPath,
-  });
-
-  const webpackConfig = await require('./webpack.config')(config);
-
   server = express();
   server.use(errorOverlayMiddleware());
   server.use(express.static(paths.appPublic));
 
   // Configure client-side hot module replacement
-  const clientConfig = webpackConfig.find(c => c.name === 'client');
+  const clientConfig = webpackConfig.find(config => config.name === 'client');
 
   clientConfig.entry.client = [path.resolve(`${__dirname}/lib/webpackHotDevClient`)]
     .concat(clientConfig.entry.client)
@@ -117,7 +109,7 @@ async function start() {
   );
 
   // Configure compilation
-  await run(clean, config);
+  await run(clean);
 
   const clientCompiler = webpack(clientConfig);
   const serverCompiler = webpack(serverConfig);
@@ -195,14 +187,12 @@ async function start() {
           checkForUpdate(true);
         }
       })
-      .catch(async error => {
+      .catch(error => {
         if (['abort', 'fail'].includes(app.hot.status())) {
           console.warn(`${hmrPrefix}Cannot apply update.`);
           delete require.cache[require.resolve(`${paths.appBuild}/server`)];
           // eslint-disable-next-line global-require, import/no-unresolved
-          const bundle = require(`${paths.appBuild}/server`);
-          const loaded = bundle instanceof Promise ? await bundle : bundle;
-          app = loaded.default;
+          app = require(`${paths.appBuild}/server`).default;
           console.warn(`${hmrPrefix}App has been reloaded.`);
         } else {
           console.warn(
@@ -233,9 +223,7 @@ async function start() {
 
   // Load compiled src/server.js as a middleware
   // eslint-disable-next-line global-require, import/no-unresolved
-  const bundle = require(`${paths.appBuild}/server`);
-  const loaded = bundle instanceof Promise ? await bundle : bundle;
-  app = loaded.default;
+  app = require(`${paths.appBuild}/server`).default;
   appPromiseIsResolved = true;
   appPromiseResolve();
 

package/scripts/test.js

@@ -9,43 +9,32 @@ process.on('unhandledRejection', err => {
 
 const jest = require('jest');
 const path = require('path');
-const { createRequire } = require('module');
 
 const createJestConfig = require('../config/jest/createJestConfig');
 const paths = require('../config/paths');
 
-const requireApp = createRequire(`${paths.appPath}/package.json`);
-const { loadConfig } = requireApp('c12');
-
 require('../config/env');
 
-async function start() {
-  const { config } = await loadConfig({ cwd: paths.appPath });
-
-  let argv = process.argv.slice(2);
-
-  if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
-    argv.push('--watchAll');
-  }
+let argv = process.argv.slice(2);
 
-  const jestConfig = createJestConfig(
-    relativePath => path.resolve(__dirname, '..', relativePath),
-    path.resolve(paths.appSrc, '..'),
-    paths.srcPaths,
-    config
-  );
+if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
+  argv.push('--watchAll');
+}
 
-  argv.push(
-    '--config',
-    JSON.stringify(
-      jestConfig
-    )
-  );
+const jestConfig = createJestConfig(
+  relativePath => path.resolve(__dirname, '..', relativePath),
+  path.resolve(paths.appSrc, '..'),
+  paths.srcPaths
+);
 
-  const testEnvironment = 'jsdom';
-  argv.push('--coverage', '--env', testEnvironment);
+argv.push(
+  '--config',
+  JSON.stringify(
+    jestConfig
+  )
+);
 
-  jest.run(argv);
-}
+const testEnvironment = 'jsdom';
+argv.push('--coverage', '--env', testEnvironment);
 
-start();
+jest.run(argv);

package/scripts/utils/clean.js

@@ -1,9 +1,11 @@
+const paths = require('../../config/paths');
+const config = require('config').util.loadFileConfigs(paths.appPath + '/config');
 const { cleanDir } = require('../lib/fs');
 
 /**
  * Cleans up the output (build) directory.
  */
-function clean(config) {
+function clean() {
   return Promise.all([
     cleanDir('build/*', {
       nosort: true,

package/scripts/webpack.config.js

@@ -17,10 +17,11 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
 const crypto = require('crypto');
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const paths = require('../config/paths');
 
+const config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
+
 const pkg = require(`${paths.appPath}/package.json`);
 const { name, version } = pkg;
 const topLevelFrameworkPaths = [];
@@ -55,8 +56,6 @@ const mode = isDevEnv ? 'development' : 'production';
 const isRuntimeDev = DEV_SERVER === 'true';
 const smp = new SpeedMeasurePlugin({ disable: !MEASURE });
 
-module.exports = async (config) => {
-
 console.log(
   `Building webpack project ${name}@${version}\n`,
   Object.entries({
@@ -151,9 +150,6 @@ const isModuleCSS = module => (
 // -----------------------------------------------------------------------------
 const webpackConfig = ({ isClient }) => ({
   mode,
-  experiments: {
-    topLevelAwait: true,
-  },
   cache: { type: 'filesystem' },
 
   output: {
@@ -171,13 +167,9 @@ const webpackConfig = ({ isClient }) => ({
       '@hooks': path.resolve(paths.appSrc, 'hooks'),
       '@components': path.resolve(paths.appSrc, 'components'),
       '@baseComponents': path.resolve(paths.appSrc, 'base_components'),
-      'react/jsx-runtime': require.resolve('react/jsx-runtime'),
-      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
-      'react/jsx-runtime.js': require.resolve('react/jsx-runtime'),
-      'react/jsx-dev-runtime.js': require.resolve('react/jsx-dev-runtime'),
-      ...(isClient ? { c12: false } : {}),
+      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
+      'react/jsx-runtime': 'react/jsx-runtime.js'
     },
-    conditionNames: ['import', 'require', 'node', 'default'],
   },
 
   resolveLoader: {
@@ -202,7 +194,6 @@ const webpackConfig = ({ isClient }) => ({
           babelrc: false,
           configFile: false,
           compact: isProdEnv,
-          isClient,
           cacheDirectory: true,
           cacheCompression: false,
           customize: path.resolve(__dirname, '../config/babel/babel-custom-loader.js'),
@@ -216,9 +207,6 @@ const webpackConfig = ({ isClient }) => ({
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto',
-        resolve: {
-          fullySpecified: false,
-        }
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -313,6 +301,8 @@ const styleLoaders = ({ isClient }) => [
               root: `${paths.appSrc}/styles/`
             }
           ],
+          'tailwindcss/nesting',
+          'tailwindcss',
           [
             'postcss-preset-env',
             {
@@ -323,7 +313,6 @@ const styleLoaders = ({ isClient }) => [
               browsers: pkg.browserslist
             }
           ],
-          'tailwindcss',
           'postcss-modules-values',
           'postcss-flexbugs-fixes'
         ],
@@ -483,7 +472,6 @@ const clientConfig = {
       https: false,
       util: false,
       buffer: false,
-      assert: false,
     }
   },
   module: {
@@ -520,6 +508,8 @@ const clientConfig = {
                       root: `${paths.appSrc}/styles/`
                     }
                   ],
+                  'tailwindcss/nesting',
+                  'tailwindcss',
                   [
                     'postcss-preset-env',
                     {
@@ -528,7 +518,6 @@ const clientConfig = {
                       browsers: pkg.browserslist,
                     }
                   ],
-                  'tailwindcss',
                   'postcss-modules-values',
                   'postcss-flexbugs-fixes',
                 ],
@@ -564,9 +553,6 @@ const clientConfig = {
       extensions: ['less'],
       exclude: ['node_modules', 'coverage'],
     }),
-    isRuntimeDev && new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
     new webpack.HotModuleReplacementPlugin(),
     new SubresourceIntegrityPlugin(),
     new LoadablePlugin({
@@ -578,14 +564,12 @@ const clientConfig = {
     // Define free variables
     // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     new webpack.DefinePlugin({
+      CONFIG: JSON.stringify(config.globals),
       'process.env.DEV_SERVER': isRuntimeDev,
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       'process.env.BROWSER': true,
       __DEVTOOLS__: isVerbose  // <-------- DISABLE redux-devtools HERE
     }),
-    new webpack.ProvidePlugin({
-      process: 'process/browser.js',
-    }),
 
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
@@ -760,6 +744,7 @@ const serverConfig = {
     // Define free variables
     // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     new webpack.DefinePlugin({
+      CONFIG: JSON.stringify(config.globals),
       'process.env.DEV_SERVER': isRuntimeDev,
       'process.env.BROWSER': false,
       __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
@@ -778,5 +763,4 @@ const serverConfig = {
 
 let configs = smp.wrap([clientConfig, serverConfig]);
 
-  return configs;
-};
+module.exports = configs;