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

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) => {
+module.exports = (resolve, rootDir, srcRoots, appConfig) => {
   const toRelRootDir = f => '<rootDir>/' + path.relative(rootDir || '', f);
   const extendedPath = path.join(process.cwd(), 'extended-jest.config.js');
 
@@ -26,6 +26,9 @@ module.exports = (resolve, rootDir, srcRoots) => {
   }
 
   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,4 +1 @@
 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.29",
+  "version": "1.2.11-alpha.31",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -80,8 +80,6 @@
     "imagemin-webp-webpack-plugin": "^3.3.6",
     "intersection-observer": "^0.5.1",
     "jest": "^26.4.2",
-    "less": "^4.2.1",
-    "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^0.5.1",
     "null-loader": "^4.0.1",
@@ -107,7 +105,7 @@
     "speed-measure-webpack-plugin": "^1.5.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",
-    "stylelint-config-recommended-less": "^3.0.1",
+    "stylelint-config-recommended": "^14.0.1",
     "stylelint-webpack-plugin": "^5.0.1",
     "tailwindcss": "^3.4.17",
     "terser": "^5.14.1",

package/scripts/test.js

@@ -9,32 +9,43 @@ 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');
 
-let argv = process.argv.slice(2);
+async function start() {
+  const { config } = await loadConfig({ cwd: paths.appPath });
 
-if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
-  argv.push('--watchAll');
-}
+  let argv = process.argv.slice(2);
+
+  if (argv.indexOf('--coverage') === -1 && argv.indexOf('--watchAll') === -1) {
+    argv.push('--watchAll');
+  }
 
-const jestConfig = createJestConfig(
-  relativePath => path.resolve(__dirname, '..', relativePath),
-  path.resolve(paths.appSrc, '..'),
-  paths.srcPaths
-);
+  const jestConfig = createJestConfig(
+    relativePath => path.resolve(__dirname, '..', relativePath),
+    path.resolve(paths.appSrc, '..'),
+    paths.srcPaths,
+    config
+  );
 
-argv.push(
-  '--config',
-  JSON.stringify(
-    jestConfig
-  )
-);
+  argv.push(
+    '--config',
+    JSON.stringify(
+      jestConfig
+    )
+  );
 
-const testEnvironment = 'jsdom';
-argv.push('--coverage', '--env', testEnvironment);
+  const testEnvironment = 'jsdom';
+  argv.push('--coverage', '--env', testEnvironment);
+
+  jest.run(argv);
+}
 
-jest.run(argv);
+start();

package/scripts/webpack.config.js

@@ -285,64 +285,52 @@ const webpackConfig = ({ isClient }) => ({
   stats: 'minimal'
 });
 
-const styleLoaders = ({ isClient }) => [
-  {
-    loader: 'css-loader',
-    options: {
-      modules: {
-        exportOnlyLocals: !isClient,
-        localIdentName: '[local]',
+  const styleLoaders = ({ isClient }) => [
+    {
+      loader: 'css-loader',
+      options: {
+        modules: {
+          exportOnlyLocals: !isClient,
+          localIdentName: '[local]',
+        },
+        importLoaders: 2,
       },
-      importLoaders: 2,
     },
-  },
-  {
-    loader: require.resolve('postcss-loader'),
-    options: {
-      postcssOptions: {
-        ident: 'postcss',
-        config: false,
-        plugins: [
-          [
-            'postcss-import',
-            {
-              addModulesDirectories: [
-                path.resolve(__dirname, '../node_modules'),
-                `${paths.appPath}/node_modules`
-              ],
-              root: `${paths.appSrc}/styles/`
-            }
-          ],
-          [
-            'postcss-preset-env',
-            {
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-              browsers: pkg.browserslist
-            }
+    {
+      loader: require.resolve('postcss-loader'),
+      options: {
+        postcssOptions: {
+          ident: 'postcss',
+          config: false,
+          plugins: [
+            [
+              'postcss-import',
+              {
+                addModulesDirectories: [
+                  path.resolve(__dirname, '../node_modules'),
+                  `${paths.appPath}/node_modules`
+                ],
+                root: `${paths.appSrc}/styles/`
+              }
+            ],
+            [
+              'postcss-preset-env',
+              {
+                autoprefixer: {
+                  flexbox: 'no-2009',
+                },
+                stage: 3,
+                browsers: pkg.browserslist
+              }
+            ],
+            'tailwindcss',
+            'postcss-modules-values',
+            'postcss-flexbugs-fixes'
           ],
-          'tailwindcss',
-          'postcss-modules-values',
-          'postcss-flexbugs-fixes'
-        ],
+        },
       },
     },
-  },
-  {
-    loader: 'less-loader',
-    options: {
-      lessOptions: {
-        javascriptEnabled: true,
-        paths: [
-          `${paths.appSrc}/styles`,
-          `${paths.appPath}/node_modules/@machtwatch/react-ui`,
-        ],
-      }
-    },
-  },
-];
+  ];
 
 //
 // Configuration for the client-side bundle (client.js)
@@ -537,55 +525,37 @@ const clientConfig = {
           },
         ],
       },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          ...styleLoaders({ isClient: true }).filter(
-            (loader) => loader.loader !== 'less-loader'
-          ),
-          {
-            loader: 'less-loader',
-            options: {
-              lessOptions: {
-                javascriptEnabled: true,
-                paths: [`${paths.appSrc}/styles`],
-              },
-            },
-          },
-        ],
-      }
-    ]
-  },
-  plugins: [
-    ...baseClientConfig.plugins,
-    new StyleLintPlugin({
-      configFile: `${paths.appPath}/.stylelintrc.json`,
-      extensions: ['less'],
-      exclude: ['node_modules', 'coverage'],
-    }),
-    isRuntimeDev && new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new SubresourceIntegrityPlugin(),
-    new LoadablePlugin({
-      writeToDisk: {
-        filename: paths.appBuild
-      },
-      outputAsset: false
-    }),
-    // Define free variables
-    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    new webpack.DefinePlugin({
-      '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',
-    }),
+      ]
+    },
+    plugins: [
+      ...baseClientConfig.plugins,
+      new StyleLintPlugin({
+        configFile: `${paths.appPath}/.stylelintrc.json`,
+        extensions: ['css'],
+        exclude: ['node_modules', 'coverage'],
+      }),
+      isRuntimeDev && new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+      new SubresourceIntegrityPlugin(),
+      new LoadablePlugin({
+        writeToDisk: {
+          filename: paths.appBuild
+        },
+        outputAsset: false
+      }),
+      // Define free variables
+      // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+      new webpack.DefinePlugin({
+        '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
@@ -692,82 +662,76 @@ const clientConfig = {
   devtool: isDevEnv && useSourceMap ? 'eval' : false,
 };
 
-//
-// Configuration for the server-side bundle (server.js)
-// -----------------------------------------------------------------------------
-const baseServerConfig = webpackConfig({ isClient: false });
-const serverConfig = {
-  ...baseServerConfig,
-  name: 'server',
-  target: 'node',
-  devtool: isDevEnv && useSourceMap ? 'eval' : false,
-  performance: false,
-  optimization: {
-    nodeEnv: false,
-    splitChunks: {
-      name: false,
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          chunks: 'all',
-          enforce: true
+  //
+  // Configuration for the server-side bundle (server.js)
+  // -----------------------------------------------------------------------------
+  const baseServerConfig = webpackConfig({ isClient: false });
+  const serverConfig = {
+    ...baseServerConfig,
+    name: 'server',
+    target: 'node',
+    devtool: isDevEnv && useSourceMap ? 'eval' : false,
+    performance: false,
+    optimization: {
+      nodeEnv: false,
+      splitChunks: {
+        name: false,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            chunks: 'all',
+            enforce: true
+          }
         }
-      }
-    },
-    minimize: isProdEnv,
-    minimizer: [
-      new TerserPlugin(),
-      new CssMinimizerPlugin()
-    ]
-  },
-  entry: {
-    server: [
-      path.resolve(__dirname, './utils/polyfills.js'),
-      `${paths.appSrc}/server.js`
-    ]
-  },
-  output: {
-    ...baseServerConfig.output,
-    path: paths.appBuild,
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-  },
-  module: {
-    ...baseServerConfig.module,
-    rules: [
-      ...baseServerConfig.module.rules,
-      {
-        test: /\.css$/,
-        use: styleLoaders({ isClient: false }).filter(
-          (loader) => loader.loader !== 'less-loader'
-        ),
-      },
-      {
-        test: /\.less$/,
-        use: styleLoaders({ isClient: false }),
       },
+      minimize: isProdEnv,
+      minimizer: [
+        new TerserPlugin(),
+        new CssMinimizerPlugin()
+      ]
+    },
+    entry: {
+      server: [
+        path.resolve(__dirname, './utils/polyfills.js'),
+        `${paths.appSrc}/server.js`
+      ]
+    },
+    output: {
+      ...baseServerConfig.output,
+      path: paths.appBuild,
+      filename: '[name].js',
+      libraryTarget: 'commonjs2',
+    },
+    module: {
+      ...baseServerConfig.module,
+      rules: [
+        ...baseServerConfig.module.rules,
+        {
+          test: /\.css$/,
+          use: styleLoaders({ isClient: false }),
+        },
+      ],
+    },
+    externalsPresets: { node: true },
+    externals: [
+      nodeExternals({
+        allowlist: [/^driver\.js/],
+      }),
+      /^\.\/assets\.json$/,
     ],
-  },
-  externalsPresets: { node: true },
-  externals: [
-    nodeExternals({
-      allowlist: [/^driver\.js/],
-    }),
-    /^\.\/assets\.json$/,
-  ],
-  plugins: [
-    ...baseServerConfig.plugins,
-    // Define free variables
-    // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-    new webpack.DefinePlugin({
-      'process.env.DEV_SERVER': isRuntimeDev,
-      'process.env.BROWSER': false,
-      __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
-    }),
-    // Do not create separate chunks of the server bundle
-    // https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
-    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
-  ].filter(Boolean),
+    plugins: [
+      ...baseServerConfig.plugins,
+      // Define free variables
+      // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+      new webpack.DefinePlugin({
+        'process.env.DEV_SERVER': isRuntimeDev,
+        'process.env.BROWSER': false,
+        __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
+      }),
+      // Do not create separate chunks of the server bundle
+      // https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
+      new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
+    ].filter(Boolean),
 
   node: {
     global: false,