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

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

@@ -0,0 +1,70 @@
+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'),
+
+      ],
+      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')
+        ] : [
+          ...(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`
+    };
+  },
+});

package/config/env.js

@@ -0,0 +1,67 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [paths.dotenv].filter(Boolean);
+const appDirectory = fs.realpathSync(process.cwd());
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({ path: dotenvFile })
+    );
+  };
+});
+
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+      }
+    );
+
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+};
+
+module.exports = getClientEnvironment;

package/config/jest/babelTransform.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const babelJest = require('babel-jest');
+
+module.exports = babelJest.createTransformer({
+  babelrc: false,
+  presets: [
+    ['@babel/preset-react'],
+    ['@babel/preset-env', {
+      modules: 'auto',
+      useBuiltIns: 'entry',
+      corejs: 3,
+    }]
+  ],
+  plugins: [
+    require('@babel/plugin-transform-runtime'),
+    require('@babel/plugin-syntax-dynamic-import'),
+    require('@babel/plugin-proposal-export-default-from'),
+    require('babel-plugin-dynamic-import-node'),
+    [require('babel-plugin-transform-imports'), {
+      '@machtwatch/react-ui': {
+        transform: '@machtwatch/react-ui/lib/${member}',
+        preventFullImport: true
+      }
+    }]
+  ]
+});

package/config/jest/createJestConfig.js

@@ -0,0 +1,91 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const merge = require('deepmerge');
+
+module.exports = (resolve, rootDir, srcRoots, appConfig) => {
+  const toRelRootDir = f => '<rootDir>/' + path.relative(rootDir || '', f);
+  const extendedPath = path.join(process.cwd(), 'extended-jest.config.js');
+
+  let isExtendedConfigExisted = false;
+  let extendedConfig = {};
+
+  try {
+    isExtendedConfigExisted = fs.existsSync(extendedPath);
+  } catch (err) {
+    console.error(err.message);
+  }
+
+  if (isExtendedConfigExisted) {
+    try {
+      extendedConfig = require(extendedPath);
+    } catch (err) {
+      console.error(err.message);
+    }
+  }
+
+  const config = {
+    globals: {
+      CONFIG: appConfig && (appConfig.globals || appConfig),
+    },
+    setupFiles: [resolve('scripts/utils/polyfills.js')],
+    testMatch: [
+      "<rootDir>/src/shared/**/*.(spec|test).{js,jsx,mjs}"
+    ],
+    collectCoverageFrom: [
+      "src/shared/**/*.{js,jsx,mjs}"
+    ],
+    coverageThreshold: {
+      global: {
+        branches: 80,
+        functions: 80,
+        lines: 80,
+        statements: 80
+      }
+    },
+    coverageReporters: [
+      "lcov",
+      "html"
+    ],
+    roots: srcRoots.map(toRelRootDir),
+    testEnvironment: 'node',
+    testEnvironmentOptions: {
+      url: 'http://localhost'
+    },
+    transform: {
+      '^.+\\.(js|jsx|mjs|cjs)$': resolve('config/jest/babelTransform.js'),
+      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
+      '^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
+      '^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve('config/jest/fileTransform.js'),
+    },
+    transformIgnorePatterns: [
+      '^.+\\.module\\.css$',
+    ],
+    moduleFileExtensions: [
+      'web.js',
+      'mjs',
+      'js',
+      'json',
+      'web.jsx',
+      'jsx',
+      'node',
+    ],
+    testPathIgnorePatterns: [
+      "/node_modules/",
+      "<rootDir>/tests/",
+      "<rootDir>/src/*.js",
+      "<rootDir>/graphql/"
+    ],
+    setupFilesAfterEnv: [resolve('config/jest/jest-setup.js'), '<rootDir>/jest-setup.js'],
+    verbose: true,
+  };
+
+  const combinedConfig = merge(config, extendedConfig);
+
+  if (rootDir) {
+    config.rootDir = rootDir;
+  }
+
+  return combinedConfig;
+};

package/config/jest/cssTransform.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  process() {
+    return {
+      code: 'module.exports = {};'
+    };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

package/config/jest/fileTransform.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const path = require('path');
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return {
+        code: `module.exports = {
+          __esModule: true,
+          default: ${assetFilename},
+          ReactComponent: () => ${assetFilename},
+        };`
+      };
+    }
+
+    return {
+      code: `module.exports = ${assetFilename};`
+    };
+  },
+};

package/config/jest/graphqlTransform.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const loader = require('graphql-tag/loader');
+
+module.exports = {
+  process(src) {
+    return {
+      code: loader.call({ cacheable() {} }, src)
+    };
+  },
+};

package/config/jest/jest-setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/config/paths.js

@@ -0,0 +1,48 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+// Make sure any symlinks in the project folder are resolved:
+const appDirectory = fs.realpathSync(process.cwd());
+
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
+
+const useTemplate = appDirectory === fs.realpathSync(path.join(__dirname, '..'));
+
+if (useTemplate) {
+  module.exports = {
+    dotenv: resolveOwn('template/.env'),
+    appPath: resolveOwn('template/'),
+    appBuild: resolveOwn('template/build'),
+    appPublic: resolveOwn('template/public'),
+    appIndexJs: resolveOwn('template/src/index.js'),
+    appPackageJson: resolveOwn('template/package.json'),
+    appSrc: resolveOwn('template/src'),
+    appConfig: resolveOwn('template/config/default'),
+    appNodeModules: resolveOwn('template/node_modules'),
+  };
+} else {
+  module.exports = {
+    dotenv: resolveApp('.env'),
+    appPath: resolveApp('.'),
+    appBuild: resolveApp('build'),
+    appPublic: resolveApp('public'),
+    appPackageJson: resolveApp('package.json'),
+    appSrc: resolveApp('src'),
+    appConfig: resolveApp('config/default'),
+    appNodeModules: resolveApp('node_modules'),
+  };
+}
+
+module.exports.srcPaths = [module.exports.appSrc];
+module.exports.useYarn = fs.existsSync(path.join(module.exports.appPath, 'yarn.lock'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machtwatch/react-script",
-  "version": "1.2.11-alpha.28",
+  "version": "1.2.11-alpha.30",
   "description": "Machtwatch React script",
   "author": "Danny Reza Miloen <danny@machtwatch.co.id>",
   "contributors": [],
@@ -15,6 +15,7 @@
   },
   "files": [
     "bin",
+    "config",
     "scripts"
   ],
   "main": "./bin/react-script.js",

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();