npm - @genesislcap/webpack-builder - Versions diffs - 14.25.0 - Mend

@genesislcap/webpack-builder 14.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/README.md +26 -0
package/cert/localhost.crt +25 -0
package/cert/localhost.key +28 -0
package/dist/cert/localhost.crt +25 -0
package/dist/cert/localhost.key +28 -0
package/dist/config/configFactory.d.ts +7 -0
package/dist/config/configFactory.d.ts.map +1 -0
package/dist/config/configFactory.js +51 -0
package/dist/config/devServers.d.ts +35 -0
package/dist/config/devServers.d.ts.map +1 -0
package/dist/config/devServers.js +67 -0
package/dist/config/postcss.config.d.ts +2 -0
package/dist/config/postcss.config.d.ts.map +1 -0
package/dist/config/postcss.config.js +8 -0
package/dist/config/utils.d.ts +20 -0
package/dist/config/utils.d.ts.map +1 -0
package/dist/config/utils.js +77 -0
package/dist/config/webpack.common.d.ts +68 -0
package/dist/config/webpack.common.d.ts.map +1 -0
package/dist/config/webpack.common.js +113 -0
package/dist/config/webpack.dev.d.ts +68 -0
package/dist/config/webpack.dev.d.ts.map +1 -0
package/dist/config/webpack.dev.js +31 -0
package/dist/config/webpack.prod.d.ts +68 -0
package/dist/config/webpack.prod.d.ts.map +1 -0
package/dist/config/webpack.prod.js +43 -0
package/dist/index.d.ts +4 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +26 -0
package/dist/public/favicon.ico +0 -0
package/dist/public/index.ejs +23 -0
package/dist/public/info.ejs +13 -0
package/dist/public/serve.json +3 -0
package/dist/rules/fileRules.d.ts +17 -0
package/dist/rules/fileRules.d.ts.map +1 -0
package/dist/rules/fileRules.js +24 -0
package/dist/rules/scriptRules.d.ts +14 -0
package/dist/rules/scriptRules.d.ts.map +1 -0
package/dist/rules/scriptRules.js +19 -0
package/dist/rules/styleRules.d.ts +54 -0
package/dist/rules/styleRules.d.ts.map +1 -0
package/dist/rules/styleRules.js +53 -0
package/license.txt +46 -0
package/package.json +56 -0
package/public/cert/README.md +17 -0
package/public/cert/localhost.crt +25 -0
package/public/cert/localhost.key +28 -0
package/public/favicon.ico +0 -0
package/public/index.ejs +23 -0
package/public/info.ejs +13 -0
package/public/serve.json +3 -0
package/src/config/configFactory.js +56 -0
package/src/config/devServers.js +73 -0
package/src/config/postcss.config.js +8 -0
package/src/config/utils.js +99 -0
package/src/config/webpack.common.js +117 -0
package/src/config/webpack.dev.js +32 -0
package/src/config/webpack.prod.js +47 -0
package/src/index.ts +29 -0
package/src/rules/fileRules.js +26 -0
package/src/rules/scriptRules.js +21 -0
package/src/rules/styleRules.js +60 -0
package/tsconfig.json +18 -0

package/public/cert/localhost.key ADDED Viewed

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDeF4UmMyoH3SHn
+njIOY6WDVCVVw45KViOXM+957zc7VtBgGYu75/rbNooXj9unmOHSO12sp0+yV6pK
+mmycRc+THILz8nvSldH6EwX018tRoOQJ7BIK54tczZpiZ2uswdGG5mjAHhX3Dkfr
+LoRbYtd0eaabLYINTIMxVrGiWDUn84gaso+xPQkwUVpjyiK883bEJSwa4hri64D3
+rCHSn2HxIMubRySzYKUFcExks4m5J2XZklPk/XWu4X5ojrXCqtRNyTzMCE4cZofU
+Ag5arCofuassGoFZZRtjmlEMSXxq6uSIXuel8xv9mXmbmZfB/jTN6EcNnzKLFtYN
+KVRJGs0dAgMBAAECggEAUrGLQEf4tGjgAO/kT3tG23lvVVm1F3SvV9NcrZgmho+y
+krWwU8zymMDb9h34eZTxMGguXuUFRbBildid7CoKOgp5r/9vn19tiaGfrCTVbZVs
+k001Ap5oQ6vCejVr4C1iqMoN4srQ/uZwXN87JRPOiW3qXQk6zVzZ1HslNP+G+1J+
+Q5FeaLei+nZzY+Aug8u/l1+FaE09m8xt7Rghn1sEg7IFdP+7pImkrzuykT0ceE+g
+XkQNk2YcChGuF3pV0fyXzWwwR5rYoxEtbNrc42pBTEiBtKqh6GjHjJCkqMeVQvuy
+d1PMWxyXyu2HqtzddDHVknAFlRy9KSc80AgyQOSAeQKBgQDfuPXBGbJiXewHygyX
+TkEXmGrAxQ8+Gxn8blj6LzALNjjGDiW9CwbxmVWdMbEBE3lUZi92erCYLFZUPXTa
+BdPsE1dki2T2eVWVwK/qoc44IBDCJ3LtjfODNi5OaTBvAUMzI3pYVJS0vwM86ywx
+UF3R54RHGPLdNN0So8k45QDQmwKBgQD+IlWIzigv1SEiEOaqQUoJB0Vfxq2u91eN
+ius5Wj5ONDfNv++mbr3bBuI0Bpg4u7W9i5hJVLE04GtlfjSuOX0QnkbQYu5/NbCH
+Vxw9YUwtOZJlk0kx3H6qpftYgEPwXir7fcuoXFUT7jD+Q5FWvQA76asF9zVnt9RG
+OGoB6FeopwKBgQDP9wZzxyhcakRzhS2pJPQ7M9LgeQ5PRDAmyIjroBvAAFpMOXB5
+R5vf0BKWuk942Zpqi0bJkwk/m89wJWTPGqXCCMSvUSi8OVQGjgS5Tkn9QElzweoC
+y3a23RG0j/GW7oyCKBOdspo9XmZrJY2CFdvwuI7s7FMur+plXl06Bx53ywKBgQDO
+ehjiuRUfn9t2sSKoS7maUkUERwkQcje5cZgiFfcvVO/OBFby82Df1tzshjshRSmp
+IgUN93iuzHOVl4+3yk+Zs+83GlpKEtYlcBoqqKXazL7sNlmu4EYt4gOv6S7J2ci0
+YoWYecRKGCnIPB+WyKKrCvQAOdUzOsGGeAlxGVQ3WwKBgE7fJGLuraf1hHRMuPsS
+ZGnJE93QVWOFCym34lxRWEQ3rKEXMtAhUhq/M6x5sJnv7ePTujyDoPAbAioxLS/L
+GsrvcDc91bwNs7sDTyq//n0ehf2HJMFrbdtIPblxA26dHtX7BmW6eppDhm4OV8zO
+1vSzX8HjCcx1AkcATKDA9J3e
+-----END PRIVATE KEY-----

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.ejs ADDED Viewed

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+      :not(:defined) {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <<%= htmlWebpackPlugin.options.customElementTagName %>></<%= htmlWebpackPlugin.options.customElementTagName %>>
+  </body>
+</html>

package/public/info.ejs ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <h1><%= htmlWebpackPlugin.options.title %></h1>
+    <h3>Module Federation Details</h3>
+    <pre><%= htmlWebpackPlugin.options.moduleFederationDetails %></pre>
+    Read about <a href="https://webpack.js.org/concepts/module-federation/" target="_blank">Module Federation</a> in Webpack 5.
+  </body>
+</html>

package/public/serve.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "rewrites": [ { "source": "/**", "destination": "/index.html" } ]
+}

package/src/config/configFactory.js ADDED Viewed

@@ -0,0 +1,56 @@
+const { existsSync } = require('node:fs');
+const { resolve } = require('node:path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const portfinderSync = require('portfinder-sync');
+const { merge } = require('webpack-merge');
+const { getWebpackMFConfigFragment, federatedIndexExists } = require('./utils');
+const devConfigFactory = require('./webpack.dev');
+const prodConfig = require('./webpack.prod');
+const getTemplate = () => {
+  const templateApp = resolve(process.cwd(), 'public/index.ejs');
+  const templateDefault = resolve(__dirname, '../public/index.ejs');
+  const template = existsSync(templateApp) ? templateApp : templateDefault;
+  console.log(`Using index template: ${template}`);
+  return template;
+};
+/**
+ * Webpack config factory
+ *
+ * @param packageJson The package.json file of the target package.
+ * @param mfOptions Module federation options to merged into the base options
+ * @param customElementTagName Tag name for insertion in the index.html file, ie. `foundation-xyz`
+ * @returns The the port number, webpack config (which can be extended further), and an isProd flag.
+ */
+module.exports = (packageJson, mfOptions = {}, customElementTagName) => {
+  const port = portfinderSync.getPort(packageJson.config?.PORT || process.env.PORT || 9000);
+  const isProd = process.env.NODE_ENV === 'production';
+  const envConfig = isProd ? prodConfig() : devConfigFactory(port);
+  const federatedIndexPresent = federatedIndexExists();
+  const mfConfig = federatedIndexPresent
+    ? getWebpackMFConfigFragment(
+        packageJson,
+        mfOptions,
+        customElementTagName ? 'info.html' : 'index.html'
+      )
+    : {};
+  const mergedConfig = merge(envConfig, mfConfig, {
+    plugins: [
+      ...(customElementTagName || !federatedIndexPresent
+        ? [
+            new HtmlWebpackPlugin({
+              title: `${packageJson.description}`,
+              template: getTemplate(),
+              customElementTagName,
+            }),
+          ]
+        : []),
+    ],
+  });
+  return {
+    port,
+    default: mergedConfig,
+    isProd,
+  };
+};

package/src/config/devServers.js ADDED Viewed

@@ -0,0 +1,73 @@
+const fs = require('fs');
+const path = require('path');
+const server = {
+  type: process.argv.includes('--https') ? 'https' : 'http',
+};
+if (server.type === 'https') {
+  try {
+    server.options = {
+      cert: fs.readFileSync(path.resolve(__dirname, '../cert/localhost.crt')),
+      key: fs.readFileSync(path.resolve(__dirname, '../cert/localhost.key')),
+    };
+  } catch (err) {
+    console.warn(
+      'You may be trying to run the webpack dev server in HTTPS mode without local certificates. Please see @genesislcap/webpack-builder README'
+    );
+  }
+}
+const convertWsEndpointToHTTP = (endpoint = '', socketExt) =>
+  (endpoint.startsWith('ws:')
+    ? endpoint.replace('ws:', 'http:')
+    : endpoint.startsWith('wss:')
+    ? endpoint.replace('wss:', 'https:')
+    : endpoint
+  ).replace(`/${socketExt}`, '');
+const devServers = {
+  default: (port = process.env.PORT || 9000, host = 'localhost') => {
+    const socketExt = process.env.SOCKET_EXT || 'gwf';
+    const target = convertWsEndpointToHTTP(process.env.API_HOST, socketExt);
+    return {
+      open: !process.env.CI,
+      historyApiFallback: true,
+      allowedHosts: 'all',
+      host,
+      port,
+      server,
+      client: {
+        overlay: {
+          runtimeErrors: false,
+        },
+      },
+      proxy: [
+        {
+          context: [`/${socketExt}/**`, '/sso/**'],
+          target,
+          secure: false,
+          changeOrigin: true,
+        },
+      ],
+      // disableHostCheck: true,
+      // sockHost: 'localhost',
+      // sockPort: '8080',
+      // https: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+      },
+      static: [
+        {
+          directory: path.resolve(process.cwd(), './public'),
+          publicPath: '/',
+          watch: true,
+        },
+      ],
+    };
+  },
+};
+module.exports = {
+  devServers,
+};

package/src/config/postcss.config.js ADDED Viewed

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-preset-env')({
+      browsers: 'last 2 versions',
+    }),
+  ],
+};

package/src/config/utils.js ADDED Viewed

@@ -0,0 +1,99 @@
+const { existsSync } = require('node:fs');
+const { resolve } = require('node:path');
+const DashboardPlugin = require('@module-federation/dashboard-plugin');
+const { camelCase } = require('camel-case');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const { ModuleFederationPlugin } = webpack.container;
+const remoteEntryFilename = 'remoteEntry.js';
+const getFederatedPkgName = (pkgName) => {
+  try {
+    return camelCase(pkgName.split('/').pop());
+  } catch (e) {
+    return pkgName;
+  }
+};
+/**
+ * TODO: Add prod version logic
+ */
+const getRemoteEntryUrl = (port, host = 'localhost') =>
+  `http://${host}:${port}/${remoteEntryFilename}`;
+const getRemoteEntry = (name, port, host = 'localhost') =>
+  `${name}@${getRemoteEntryUrl(port, host)}`;
+const federatedIndex = './src/index.federated.ts';
+const resolveFederatedIndex = () => resolve(process.cwd(), federatedIndex);
+const federatedIndexExists = () => {
+  const federatedIndexPath = resolveFederatedIndex();
+  return existsSync(federatedIndexPath);
+};
+/**
+ * Webpack module federation config fragment factory
+ *
+ * @param packageJson The package.json file of the target package.
+ * @param mfOptions Module federation options to merged into the base options
+ * @param htmlFilename The filename value for the report generated by the html plugin
+ * @returns A partial webpack config fragment to be merged into a final webpack config.
+ */
+const getWebpackMFConfigFragment = (packageJson, mfOptions = {}, htmlFilename = 'index.html') => {
+  const name = getFederatedPkgName(packageJson.name);
+  const deps = packageJson.dependencies;
+  const { exposes: mfExposes = {}, remotes: mfRemotes = {}, shared: mfShared = {} } = mfOptions;
+  const exposes = {
+    './index': federatedIndex,
+    ...mfExposes,
+  };
+  const remotes = {
+    ...mfRemotes,
+  };
+  const shared = {
+    ...deps,
+    ...mfShared,
+  };
+  const moduleFederationOptions = {
+    name,
+    filename: remoteEntryFilename,
+    remotes,
+    exposes,
+    shared,
+  };
+  return {
+    entry: resolveFederatedIndex(),
+    plugins: [
+      new ModuleFederationPlugin(moduleFederationOptions),
+      new DashboardPlugin({
+        dashboardURL: 'http://localhost:3000/api/update',
+        publishVersion: '1.0.0',
+      }),
+      new HtmlWebpackPlugin({
+        title: `${packageJson.description} (Federated)`,
+        template: resolve(__dirname, '../public/info.ejs'),
+        filename: htmlFilename,
+        inject: false,
+        /**
+         * Passing arbitrary data to the template for display
+         */
+        moduleFederationDetails: JSON.stringify(moduleFederationOptions, undefined, 2),
+      }),
+    ],
+  };
+};
+module.exports = {
+  getFederatedPkgName,
+  getRemoteEntryUrl,
+  getRemoteEntry,
+  getWebpackMFConfigFragment,
+  federatedIndexExists,
+};

package/src/config/webpack.common.js ADDED Viewed

@@ -0,0 +1,117 @@
+const crypto = require('crypto');
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const fs = require('fs-extra');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { DefinePlugin, ProgressPlugin } = require('webpack');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { appFileRules } = require('../rules/fileRules');
+const { appScriptRules } = require('../rules/scriptRules');
+const { appStyleRules } = require('../rules/styleRules');
+// Avoid MD4 hash for OpenSSL 3 compatibility
+// https://github.com/cockpit-project/starter-kit/commit/3220617fec508aabbbc226a87a165c21fb72e913
+// Using Webpack v5.54.0+ and output.hashFunction = "xxhash64" should make this unnecessary, however
+// builds still fail with an OpenSSL error in practice
+const cryptoOrigCreateHash = crypto.createHash;
+crypto.createHash = (algorithm) => cryptoOrigCreateHash(algorithm == 'md4' ? 'sha256' : algorithm);
+const readFile = (filePath) => {
+  if (!filePath) return '';
+  const configPath = path.resolve(process.cwd(), filePath);
+  try {
+    return fs.readFileSync(configPath, 'utf8');
+  } catch (e) {
+    console.error(e);
+    return '';
+  }
+};
+/**
+ * Switching the '/' instead of 'auto', as webpack and perhaps the html-webpack-plugin seem to get confused over
+ * mime types, and this can block deep linking. Reading through the 'Practical Module Federation' guide, we may need
+ * to revisit this, dev v prod, resolving remotes.
+ */
+const publicPath = typeof process.env.PUBLIC_PATH !== 'undefined' ? process.env.PUBLIC_PATH : '/';
+/**
+ * Webpack common config factory used as a baseline across both production and development builds.
+ * Used mainly in conjunction with ./configFactory.js, but there are a few standalone consumers in foundation-ui.
+ *
+ * @returns A common webpack config.
+ */
+module.exports = () => ({
+  entry: path.resolve(process.cwd(), './src/index.ts'),
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, '../public'),
+        },
+      ],
+    }),
+    /**
+     * TODO: Test making this dynamic using .env files and the DotEnv Webpack plugin.
+     */
+    new DefinePlugin({
+      API_HOST: JSON.stringify(process.env.API_HOST),
+      DEFAULT_ORGANISATION: JSON.stringify(process.env.DEFAULT_ORGANISATION),
+      DEFAULT_USER: JSON.stringify(process.env.DEFAULT_USER),
+      DEFAULT_PASSWORD: JSON.stringify(process.env.DEFAULT_PASSWORD),
+      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      FORCE_HTTP: JSON.stringify(process.env.FORCE_HTTP),
+      HTTP_CONFIG: JSON.stringify(readFile(process.env.HTTP_CONFIG_PATH)),
+      SOCKET_EXT: JSON.stringify(process.env.SOCKET_EXT),
+    }),
+    new ProgressPlugin(),
+    new MiniCssExtractPlugin(),
+    /**
+     * Run via 'build:webpack:stats'.
+     */
+    ...(process.env.ANALYZE
+      ? [
+          new BundleAnalyzerPlugin({
+            reportTitle: `Webpack Visualizer`,
+            reportFilename: path.join(process.cwd(), './dist', 'webpack.stats.html'),
+            analyzerMode: 'static',
+            openAnalyzer: false,
+          }),
+        ]
+      : []),
+  ],
+  output: {
+    strictModuleErrorHandling: true,
+    strictModuleExceptionHandling: true,
+    path: path.resolve(process.cwd(), './dist'),
+    publicPath,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    modules: ['node_modules'],
+  },
+  module: {
+    rules: [
+      appScriptRules.typescript(),
+      // Files
+      appFileRules.fonts(),
+      appFileRules.html(),
+      appFileRules.images(),
+      // Styles
+      appStyleRules.headCss(),
+      appStyleRules.css(),
+      appStyleRules.sass(),
+    ],
+  },
+  experiments: {
+    topLevelAwait: true,
+    lazyCompilation: false,
+    // outputModule: true,
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});

package/src/config/webpack.dev.js ADDED Viewed

@@ -0,0 +1,32 @@
+const portfinderSync = require('portfinder-sync');
+const { merge } = require('webpack-merge');
+const { devServers } = require('./devServers.js');
+const commonConfigFactory = require('./webpack.common.js');
+/**
+ * Webpack config factory for development.
+ * Used mainly in conjunction with ./configFactory.js, but there are a few standalone consumers in foundation-ui.
+ *
+ * @param port the target port to use.
+ * @returns Webpack config for development mode.
+ */
+module.exports = (port = portfinderSync.getPort(process.env.PORT || 9000)) => {
+  return merge(commonConfigFactory(), {
+    mode: 'development',
+    devtool: 'inline-source-map', // CSP?
+    output: {
+      filename: '[name].js',
+      chunkFilename: '[name].[id].js',
+      sourceMapFilename: '[name].js.map',
+      // library: {
+      //     // no name required for module
+      //     type: 'module',
+      // },
+    },
+    devServer: devServers.default(port),
+    optimization: {
+      usedExports: false,
+      minimize: false,
+    },
+  });
+};

package/src/config/webpack.prod.js ADDED Viewed

@@ -0,0 +1,47 @@
+/* eslint prefer-named-capture-group: "off" */
+// In this config named capturing isn't desired.
+// May cause adverse affects with webpack.
+const TerserPlugin = require('terser-webpack-plugin');
+const { merge } = require('webpack-merge');
+const commonConfigFactory = require('./webpack.common.js');
+const vendorCacheGroup = {
+  vendor: {
+    test: /[\\/]node_modules[\\/]/,
+    name: (module) => {
+      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+      // npm package names are URL-safe, but some servers don't like @ symbols
+      return `npm.${packageName.replace('@', '')}`;
+    },
+  },
+};
+/**
+ * Webpack config factory for production.
+ * Used mainly in conjunction with ./configFactory.js, but there are a few standalone consumers in foundation-ui.
+ *
+ * @returns Webpack config for production mode.
+ */
+module.exports = () => {
+  return merge(commonConfigFactory(), {
+    mode: 'production',
+    devtool: 'source-map',
+    output: {
+      filename: '[name].[contenthash].js',
+      chunkFilename: '[name].[id].[contenthash].js',
+      sourceMapFilename: '[name].[contenthash].js.map',
+    },
+    optimization: {
+      usedExports: true,
+      minimize: true,
+      minimizer: [new TerserPlugin()],
+      splitChunks: {
+        chunks: 'all',
+        maxInitialRequests: 100,
+        cacheGroups: {
+          ...vendorCacheGroup,
+        },
+      },
+    },
+  });
+};

package/src/index.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { run, resolveBin } from '@genesislcap/build-kit';
+import type { BuildContext } from '@genesislcap/build-kit';
+export default async (ctx: BuildContext) => {
+  const {
+    dirs: { cwd },
+    cli: { isDev, isAnalyze, isBuild, options },
+    enable: { mft },
+  } = ctx;
+  if (mft) {
+    const mftCLI = await resolveBin('make-federated-types', '@pixability-ui/federated-types');
+    run(cwd, `${mftCLI}`);
+  }
+  const webpack = await resolveBin('webpack');
+  if (isDev) {
+    const open = !options.open ? '--no-open' : '--open';
+    const https = options.https ? '--https' : '';
+    run(cwd, `${webpack} serve ${open} ${https}`);
+  } else if (isAnalyze) {
+    run(cwd, `${webpack}`, true, true, { ...process.env, ANALYZE: '1' });
+  } else if (isBuild) {
+    run(cwd, `${webpack}`);
+  } else {
+    throw new Error(`Unrecognised command: ${JSON.stringify(options)}`);
+  }
+};

package/src/rules/fileRules.js ADDED Viewed

@@ -0,0 +1,26 @@
+/* eslint prefer-named-capture-group: "off" */
+// In this config named capturing isn't desired.
+// May cause adverse affects with webpack.
+const appFileRules = {
+  fonts: () => ({
+    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+    type: 'asset/resource',
+  }),
+  html: () => ({
+    test: /\.html$/,
+    use: [
+      {
+        loader: 'html-loader',
+      },
+    ],
+  }),
+  images: () => ({
+    test: /\.(png|svg|jpg|jpeg|gif)$/i,
+    type: 'asset/resource',
+  }),
+};
+module.exports = {
+  appFileRules,
+};

package/src/rules/scriptRules.js ADDED Viewed

@@ -0,0 +1,21 @@
+const path = require('path');
+const appScriptRules = {
+  typescript: () => ({
+    test: /\.ts$/i,
+    exclude: /node_modules/,
+    use: [
+      {
+        loader: 'ts-loader',
+        options: {
+          configFile: path.resolve(process.cwd(), './tsconfig.json'),
+          projectReferences: true,
+        },
+      },
+    ],
+  }),
+};
+module.exports = {
+  appScriptRules,
+};

package/src/rules/styleRules.js ADDED Viewed

@@ -0,0 +1,60 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+const miniCssExtractLoader = () => ({
+  loader: MiniCssExtractPlugin.loader,
+  options: {
+    esModule: true,
+    modules: {
+      namedExport: true,
+    },
+  },
+});
+const cssLoader = (importLoaders = 1, useHash = true) => ({
+  loader: 'css-loader',
+  options: {
+    importLoaders,
+    // modules: {
+    //   namedExport: true,
+    //   localIdentName: '[local]' + (useHash ? '--[hash:base64:5]' : ''),
+    //   exportLocalsConvention: 'camelCaseOnly',
+    // },
+  },
+});
+const postCSSLoader = () => ({
+  loader: 'postcss-loader',
+  options: {
+    postcssOptions: {
+      config: path.resolve(__dirname, '../config/postcss.config.js'),
+    },
+  },
+});
+const headCssPatterns = [/main\.css$/i, /head\.css$/i, /index\.css$/i];
+const appStyleRules = {
+  headCss: () => ({
+    test: /\.css$/i,
+    include: headCssPatterns,
+    use: ['style-loader', cssLoader(), postCSSLoader()],
+  }),
+  css: (useHash = true) => ({
+    test: /\.css$/i,
+    exclude: [...headCssPatterns],
+    use: [cssLoader(), postCSSLoader()],
+  }),
+  sass: (useHash = true) => ({
+    test: /\.(sa|sc)ss$/i,
+    exclude: [...headCssPatterns],
+    use: [cssLoader(2), postCSSLoader(), 'sass-loader'],
+  }),
+};
+module.exports = {
+  appStyleRules,
+};

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "./dist",
+    "lib": [
+      "ES2015",
+      "ES2016",
+      "ES2017",
+      "ES2019",
+    ],
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+  },
+  "include": [
+    "src/**/*"
+  ]
+}