@machtwatch/react-script 1.2.11-alpha.27 → 1.2.11-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.27",
+  "version": "1.2.11-alpha.29",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -65,7 +65,6 @@
     "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",

package/scripts/build.js

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

package/scripts/start.js

@@ -7,13 +7,13 @@ 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 config = require('config').util.loadFileConfigs(`${paths.appPath}/config`);
-
-console.log('RUNNING LOCALL X')
+const requireApp = createRequire(`${paths.appPath}/package.json`);
+const { loadConfig } = requireApp('c12');
 
 const { format } = run;
 
@@ -71,12 +71,18 @@ 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(config => config.name === 'client');
+  const clientConfig = webpackConfig.find(c => c.name === 'client');
 
   clientConfig.entry.client = [path.resolve(`${__dirname}/lib/webpackHotDevClient`)]
     .concat(clientConfig.entry.client)
@@ -111,7 +117,7 @@ async function start() {
   );
 
   // Configure compilation
-  await run(clean);
+  await run(clean, config);
 
   const clientCompiler = webpack(clientConfig);
   const serverCompiler = webpack(serverConfig);
@@ -189,12 +195,14 @@ async function start() {
           checkForUpdate(true);
         }
       })
-      .catch(error => {
+      .catch(async 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
-          app = require(`${paths.appBuild}/server`).default;
+          const bundle = require(`${paths.appBuild}/server`);
+          const loaded = bundle instanceof Promise ? await bundle : bundle;
+          app = loaded.default;
           console.warn(`${hmrPrefix}App has been reloaded.`);
         } else {
           console.warn(
@@ -225,7 +233,9 @@ async function start() {
 
   // Load compiled src/server.js as a middleware
   // eslint-disable-next-line global-require, import/no-unresolved
-  app = require(`${paths.appBuild}/server`).default;
+  const bundle = require(`${paths.appBuild}/server`);
+  const loaded = bundle instanceof Promise ? await bundle : bundle;
+  app = loaded.default;
   appPromiseIsResolved = true;
   appPromiseResolve();
 

package/scripts/utils/clean.js

@@ -1,11 +1,9 @@
-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() {
+function clean(config) {
   return Promise.all([
     cleanDir('build/*', {
       nosort: true,

package/scripts/webpack.config.js

@@ -21,8 +21,6 @@ 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 = [];
@@ -57,6 +55,8 @@ 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,6 +151,9 @@ const isModuleCSS = module => (
 // -----------------------------------------------------------------------------
 const webpackConfig = ({ isClient }) => ({
   mode,
+  experiments: {
+    topLevelAwait: true,
+  },
   cache: { type: 'filesystem' },
 
   output: {
@@ -172,6 +175,7 @@ const webpackConfig = ({ isClient }) => ({
       '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 } : {}),
     },
     conditionNames: ['import', 'require', 'node', 'default'],
   },
@@ -479,6 +483,7 @@ const clientConfig = {
       https: false,
       util: false,
       buffer: false,
+      assert: false,
     }
   },
   module: {
@@ -573,7 +578,6 @@ 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,
@@ -756,7 +760,6 @@ 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
@@ -775,4 +778,5 @@ const serverConfig = {
 
 let configs = smp.wrap([clientConfig, serverConfig]);
 
-module.exports = configs;
+  return configs;
+};