@genesislcap/webpack-builder 14.26.8-alpha-64bb9e2.0 → 14.27.0

package/dist/{rules → config/rules}/scriptRules.d.ts

@@ -1,14 +1,13 @@
-export namespace appScriptRules {
-    function typescript(): {
+export declare const appScriptRules: {
+    typescript: () => {
         test: RegExp;
         exclude: RegExp;
         use: {
             loader: string;
             options: {
-                configFile: string;
                 projectReferences: boolean;
             };
         }[];
     };
-}
+};
 //# sourceMappingURL=scriptRules.d.ts.map

package/dist/config/rules/scriptRules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scriptRules.d.ts","sourceRoot":"","sources":["../../../src/config/rules/scriptRules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;CAa1B,CAAC"}

package/dist/{rules → config/rules}/scriptRules.js

@@ -1,5 +1,7 @@
-const path = require('path');
-const appScriptRules = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appScriptRules = void 0;
+exports.appScriptRules = {
     typescript: () => ({
         test: /\.ts$/i,
         exclude: /node_modules/,
@@ -7,13 +9,9 @@ const appScriptRules = {
             {
                 loader: 'ts-loader',
                 options: {
-                    configFile: path.resolve(process.cwd(), './tsconfig.json'),
                     projectReferences: true,
                 },
             },
         ],
     }),
 };
-module.exports = {
-    appScriptRules,
-};

package/dist/{rules → config/rules}/styleRules.d.ts

@@ -1,5 +1,5 @@
-export namespace appStyleRules {
-    function headCss(): {
+export declare const appStyleRules: {
+    headCss: () => {
         test: RegExp;
         include: RegExp[];
         use: (string | {
@@ -11,12 +11,14 @@ export namespace appStyleRules {
             loader: string;
             options: {
                 postcssOptions: {
-                    config: string;
+                    plugins: (string | (string | {
+                        browsers: string;
+                    })[])[];
                 };
             };
         })[];
     };
-    function css(useHash?: boolean): {
+    css: (useHash?: boolean) => {
         test: RegExp;
         exclude: RegExp[];
         use: ({
@@ -28,27 +30,12 @@ export namespace appStyleRules {
             loader: string;
             options: {
                 postcssOptions: {
-                    config: string;
+                    plugins: (string | (string | {
+                        browsers: string;
+                    })[])[];
                 };
             };
         })[];
     };
-    function sass(useHash?: boolean): {
-        test: RegExp;
-        exclude: RegExp[];
-        use: (string | {
-            loader: string;
-            options: {
-                importLoaders: number;
-            };
-        } | {
-            loader: string;
-            options: {
-                postcssOptions: {
-                    config: string;
-                };
-            };
-        })[];
-    };
-}
+};
 //# sourceMappingURL=styleRules.d.ts.map

package/dist/config/rules/styleRules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleRules.d.ts","sourceRoot":"","sources":["../../../src/config/rules/styleRules.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWzB,CAAC"}

package/dist/config/rules/styleRules.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appStyleRules = void 0;
+const cssLoader = (importLoaders = 1, useHash = true) => ({
+    loader: 'css-loader',
+    options: {
+        importLoaders,
+    },
+});
+const postCSSLoader = () => ({
+    loader: 'postcss-loader',
+    options: {
+        postcssOptions: {
+            plugins: [
+                'postcss-import',
+                [
+                    'postcss-preset-env',
+                    {
+                        browsers: 'last 2 versions',
+                    },
+                ],
+            ],
+        },
+    },
+});
+const headCssPatterns = [/main\.css$/i, /head\.css$/i, /index\.css$/i];
+exports.appStyleRules = {
+    headCss: () => ({
+        test: /\.css$/i,
+        include: headCssPatterns,
+        use: ['style-loader', cssLoader(), postCSSLoader()],
+    }),
+    css: (useHash = true) => ({
+        test: /\.css$/i,
+        exclude: [...headCssPatterns],
+        use: [cssLoader(), postCSSLoader()],
+    }),
+};

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;8BAEhC,YAAY;AAAvC,wBAyBE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;8BAKhC,YAAY;AAAvC,wBAuBE"}

package/dist/index.js

@@ -2,23 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const build_kit_1 = require("@genesislcap/build-kit");
+const webpack_1 = tslib_1.__importDefault(require("webpack"));
+const commands_1 = require("./commands");
+const config_1 = require("./config");
 exports.default = (ctx) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
     const { dirs: { cwd }, cli: { isDev, isAnalyze, isBuild, options }, enable: { mft }, } = ctx;
     if (mft) {
         const mftCLI = yield (0, build_kit_1.resolveBin)('make-federated-types', '@pixability-ui/federated-types');
         (0, build_kit_1.run)(cwd, `${mftCLI}`);
     }
-    const webpack = yield (0, build_kit_1.resolveBin)('webpack');
     if (isDev) {
-        const open = !options.open ? '--no-open' : '--open';
-        const https = options.https ? '--https' : '';
-        (0, build_kit_1.run)(cwd, `${webpack} serve ${open} ${https}`);
+        const config = (0, config_1.getConfig)(ctx);
+        const compiler = (0, webpack_1.default)(config);
+        (0, commands_1.dev)(compiler, config);
     }
-    else if (isAnalyze) {
-        (0, build_kit_1.run)(cwd, `${webpack}`, true, true, Object.assign(Object.assign({}, process.env), { ANALYZE: '1' }));
-    }
-    else if (isBuild) {
-        (0, build_kit_1.run)(cwd, `${webpack}`);
+    else if (isBuild || isAnalyze) {
+        const config = (0, config_1.getConfig)(ctx);
+        const compiler = (0, webpack_1.default)(config);
+        yield (0, commands_1.build)(compiler);
     }
     else {
         throw new Error(`Unrecognised command: ${JSON.stringify(options)}`);

package/dist/utils/fs.d.ts

@@ -0,0 +1,2 @@
+export declare const readFile: (filePath: any) => string;
+//# sourceMappingURL=fs.d.ts.map

package/dist/utils/fs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs.d.ts","sourceRoot":"","sources":["../../src/utils/fs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,2BASpB,CAAC"}

package/dist/utils/fs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readFile = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
+const readFile = (filePath) => {
+    if (!filePath)
+        return '';
+    const resolvedPath = (0, node_path_1.resolve)(process.cwd(), filePath);
+    try {
+        return (0, node_fs_1.readFileSync)(resolvedPath, 'utf8');
+    }
+    catch (e) {
+        console.error(e);
+        return '';
+    }
+};
+exports.readFile = readFile;

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fs';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./fs"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/webpack-builder",
   "description": "Webpack builder",
-  "version": "14.26.8-alpha-64bb9e2.0",
+  "version": "14.27.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,7 @@
     "dev": "tsc -b ./tsconfig.json -w"
   },
   "dependencies": {
-    "@genesislcap/build-kit": "14.26.8-alpha-64bb9e2.0",
+    "@genesislcap/build-kit": "^14.27.0",
     "@module-federation/dashboard-plugin": "2.6.5",
     "@pixability-ui/federated-types": "^0.2.0",
     "camel-case": "^4.1.2",
@@ -34,14 +34,15 @@
     "typescript": "^4.5.5",
     "webpack": "^5.84.1",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^4.0.0-beta.3",
     "webpack-merge": "^5.7.3",
     "webpack-pwa-manifest": "^4.3.0",
+    "webpackbar": "^5.0.2",
     "workbox-webpack-plugin": "^6.3.0"
   },
   "devDependencies": {
     "copyfiles": "^2.4.1",
+    "pkg-types": "^1.0.2",
     "rimraf": "^5.0.0"
   },
   "repository": {
@@ -52,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dd3a56be32df4c463d53b61d67e802de7266995e"
+  "gitHead": "1a9014d142a55fa36af122935e0a6c111810fe8d"
 }

package/src/commands/build.ts

@@ -0,0 +1,24 @@
+import webpack from 'webpack';
+import type { Compiler } from 'webpack';
+
+export const build = async (compiler: Compiler) => {
+  const stats = await new Promise<webpack.Stats>((success, error) => {
+    compiler.run((err, result) => (err ? error(err) : success(result!)));
+  });
+
+  if (stats.hasErrors()) {
+    const error = new Error('Build error');
+    error.stack = stats.toString('errors-only');
+    throw error;
+  }
+
+  process.stdout.write(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+    }) + '\n\n'
+  );
+};

package/src/commands/dev.ts

@@ -0,0 +1,7 @@
+import type { Compiler, Configuration } from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+
+export const dev = async (compiler: Compiler, config: Configuration) => {
+  const server = new WebpackDevServer(config.devServer, compiler);
+  await server.start();
+};

package/src/commands/index.ts

@@ -0,0 +1,2 @@
+export * from './dev';
+export * from './build';

package/src/config/devServer.ts

@@ -0,0 +1,88 @@
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import type { BuildContext } from '@genesislcap/build-kit';
+import portfinderSync from 'portfinder-sync';
+import type { Configuration } from 'webpack';
+
+const getPort = (packageJson): number =>
+  portfinderSync.getPort(packageJson.config?.PORT || process.env.PORT || 9000);
+
+const getServer = (isHTTPS = false) => {
+  if (isHTTPS) {
+    const certDir = resolve(__dirname, '../../cert/');
+    const cert = resolve(certDir, 'localhost.crt');
+    const key = resolve(certDir, 'localhost.key');
+
+    if (existsSync(cert) && existsSync(key)) {
+      return {
+        type: 'https',
+        options: {
+          cert: readFileSync(cert),
+          key: readFileSync(key),
+        },
+      };
+    } else {
+      console.warn(`Could not load certificates from ${certDir}. Falling back to HTTP.`);
+    }
+  }
+
+  return {
+    type: 'http',
+    options: {},
+  };
+};
+
+const convertWsEndpointToHTTP = (endpoint = '', socketExt) =>
+  endpoint.replace(/^ws(s)?:\/\//, 'http$1://').replace(`/${socketExt}`, '');
+
+export const devServer = (ctx: BuildContext): Configuration['devServer'] => {
+  const {
+    cli: {
+      isDev,
+      options: { open, https },
+    },
+    dirs: { cwd },
+    env: { isCI },
+    pkg,
+  } = ctx;
+
+  if (!isDev) {
+    return;
+  }
+  const port = getPort(pkg);
+  const socketExt = process.env.SOCKET_EXT || 'gwf';
+  const target = convertWsEndpointToHTTP(process.env.API_HOST, socketExt);
+  return {
+    open: open && !isCI,
+    historyApiFallback: true,
+    allowedHosts: 'all',
+    host: 'localhost',
+    port,
+    server: getServer(https),
+    client: {
+      overlay: {
+        runtimeErrors: false,
+      },
+    },
+    proxy: [
+      {
+        context: [`/${socketExt}/**`, '/sso/**'],
+        target,
+        secure: false,
+        changeOrigin: 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: resolve(cwd, './public'),
+        publicPath: '/',
+        watch: true,
+      },
+    ],
+  };
+};

package/src/config/entry.ts

@@ -0,0 +1,24 @@
+import { resolve } from 'node:path';
+import type { BuildContext } from '@genesislcap/build-kit';
+import type { Configuration } from 'webpack';
+import { resolveFederatedIndex, federatedIndexExists } from './federation';
+
+export const entry = (ctx: BuildContext): Configuration['entry'] => {
+  const {
+    dirs: { cwd },
+    config: { serviceWorker },
+  } = ctx;
+
+  const main = federatedIndexExists()
+    ? resolveFederatedIndex()
+    : resolve(cwd, './src/' + 'index.ts');
+
+  if (serviceWorker?.registration) {
+    return {
+      main,
+      swRegistration: resolve(cwd, './src/' + serviceWorker.registration),
+    };
+  }
+
+  return main;
+};

package/src/config/federation.ts

@@ -0,0 +1,91 @@
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import DashboardPlugin from '@module-federation/dashboard-plugin';
+import { camelCase } from 'camel-case';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { PackageJson } from 'pkg-types';
+import { container } from 'webpack';
+
+const { ModuleFederationPlugin } = container;
+type ModuleFederationPluginOptions = ConstructorParameters<
+  typeof container.ModuleFederationPlugin
+>[0]; // eslint-disable-line @typescript-eslint/no-magic-numbers
+
+const remoteEntryFilename = 'remoteEntry.js';
+
+export const getFederatedPkgName = (pkgName) => {
+  try {
+    return camelCase(pkgName.split('/').pop());
+  } catch (e) {
+    return pkgName;
+  }
+};
+
+const federatedIndex = './src/index.federated.ts';
+
+export const resolveFederatedIndex = () => resolve(process.cwd(), federatedIndex);
+
+export const federatedIndexExists = () => {
+  const federatedIndexPath = resolveFederatedIndex();
+  return existsSync(federatedIndexPath);
+};
+
+/**
+ * TODO: Add prod version logic
+ */
+export const getRemoteEntryUrl = (port, host = 'localhost') =>
+  `http://${host}:${port}/${remoteEntryFilename}`;
+
+export const getRemoteEntry = (name, port, host = 'localhost') =>
+  `${name}@${getRemoteEntryUrl(port, host)}`;
+
+export const resolveFederationOptions = (
+  options: ModuleFederationPluginOptions = {},
+  pkg: PackageJson
+): ModuleFederationPluginOptions => {
+  const { name, exposes: mfExposes = {}, remotes: mfRemotes = {}, shared: mfShared = {} } = options;
+
+  const exposes = {
+    './index': federatedIndex,
+    ...mfExposes,
+  };
+
+  const shared = {
+    ...pkg.dependencies,
+    ...mfShared,
+  };
+
+  return {
+    name: name || getFederatedPkgName(pkg.name),
+    filename: remoteEntryFilename,
+    remotes: mfRemotes,
+    exposes,
+    shared,
+  };
+};
+
+export const getFederationPlugins = (
+  federatedIndexPresent: boolean,
+  rootElement: string,
+  options: ModuleFederationPluginOptions,
+  pkg: PackageJson
+) =>
+  federatedIndexPresent
+    ? [
+        new HtmlWebpackPlugin({
+          title: `${pkg.description} (Federated)`,
+          template: resolve(__dirname, '../../public/info.ejs'),
+          filename: rootElement ? 'info.html' : 'index.html',
+          inject: false,
+          // Passing arbitrary data to the template for display
+          moduleFederationDetails: JSON.stringify(options, undefined, 2),
+          minify: false,
+        }),
+        new ModuleFederationPlugin(options),
+        process.env.FEDERATION_DASHABORD_URL &&
+          new DashboardPlugin({
+            dashboardURL: `${process.env.FEDERATION_DASHABORD_URL}/api/update`,
+            publishVersion: pkg.version,
+          }),
+      ]
+    : [];

package/src/config/getConfig.ts

@@ -0,0 +1,49 @@
+import type { BuildContext } from '@genesislcap/build-kit';
+import type { Configuration } from 'webpack';
+import { devServer } from './devServer';
+import { entry } from './entry';
+import { moduleConfig } from './module';
+import { optimization } from './optimization';
+import { output } from './output';
+import { plugins } from './plugins';
+import { resolveLoader } from './resolveLoader';
+
+/**
+ *
+ * @param ctx Build context
+ * @returns Webpack config
+ */
+export const getConfig = (ctx: BuildContext): Configuration => {
+  const {
+    cli: { isDev },
+    config: { webpack },
+  } = ctx;
+
+  return {
+    entry: entry(ctx),
+    mode: isDev ? 'development' : 'production',
+    // Be aware of CSP if changing this to eval: https://github.com/symfony/webpack-encore/issues/695
+    devtool: isDev ? 'inline-source-map' : 'source-map',
+    devServer: devServer(ctx),
+    optimization: optimization(ctx),
+    plugins: plugins(ctx),
+    output: output(ctx),
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: ['node_modules'],
+    },
+    resolveLoader: resolveLoader(ctx),
+    module: moduleConfig(ctx),
+    experiments: {
+      topLevelAwait: true,
+      lazyCompilation: false,
+    },
+    performance: {
+      hints: false,
+      maxEntrypointSize: 512000,
+      maxAssetSize: 512000,
+    },
+    target: webpack?.target,
+    node: webpack?.node,
+  };
+};

package/src/config/index.ts

@@ -0,0 +1 @@
+export * from './getConfig';

package/src/config/module.ts

@@ -0,0 +1,21 @@
+import type { BuildContext } from '@genesislcap/build-kit';
+import type { Configuration } from 'webpack';
+import { appFileRules } from './rules/fileRules';
+import { appScriptRules } from './rules/scriptRules';
+import { appStyleRules } from './rules/styleRules';
+
+// module is reserved keyword in CommonJS
+export const moduleConfig = (ctx: BuildContext): Configuration['module'] => ({
+  rules: [
+    appScriptRules.typescript(),
+
+    // Files
+    appFileRules.fonts(),
+    appFileRules.html(),
+    appFileRules.images(),
+
+    // Styles
+    appStyleRules.headCss(),
+    appStyleRules.css(),
+  ],
+});

package/src/config/optimization.ts

@@ -0,0 +1,45 @@
+import type { BuildContext } from '@genesislcap/build-kit';
+import TerserPlugin from 'terser-webpack-plugin';
+import type { Configuration } from 'webpack';
+
+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('@', '')}`;
+    },
+  },
+};
+
+export const optimization = (ctx: BuildContext): Configuration['optimization'] => {
+  const {
+    config: { webpack },
+    cli: { isDev },
+  } = ctx;
+
+  // user-supplied custom config
+  if (typeof webpack?.optimization === 'function') {
+    return webpack.optimization({ isDev });
+  }
+
+  // defaults
+  return isDev
+    ? {
+        usedExports: false,
+        minimize: false,
+      }
+    : {
+        usedExports: true,
+        minimize: true,
+        minimizer: [new TerserPlugin()],
+        splitChunks: {
+          chunks: 'all',
+          maxInitialRequests: 100,
+          cacheGroups: {
+            ...vendorCacheGroup,
+          },
+        },
+      };
+};

package/src/config/output.ts

@@ -0,0 +1,42 @@
+import { resolve } from 'node:path';
+import type { BuildContext } from '@genesislcap/build-kit';
+import type { WebpackFilenames } from '@genesislcap/build-kit';
+import type { Configuration } from 'webpack';
+
+/**
+ * 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 : '/';
+
+const defaultGetters: WebpackFilenames = {
+  file: ({ isDev }) => (isDev ? '[name].js' : '[name].[contenthash].js'),
+  chunk: ({ isDev }) => (isDev ? '[name].[id].js' : '[name].[id].[contenthash].js'),
+  sourceMap: ({ isDev }) => (isDev ? '[name].js.map' : '[name].[contenthash].js.map'),
+};
+
+const filenameGetters = (config: WebpackFilenames = {}): WebpackFilenames => ({
+  file: config.file || defaultGetters.file,
+  chunk: config.chunk || defaultGetters.chunk,
+  sourceMap: config.sourceMap || defaultGetters.sourceMap,
+});
+
+export const output = (ctx: BuildContext): Configuration['output'] => {
+  const {
+    cli: { isDev },
+    dirs: { cwd },
+    config: { webpack },
+  } = ctx;
+
+  const getters = filenameGetters(webpack?.filenames);
+  return {
+    strictModuleErrorHandling: true,
+    strictModuleExceptionHandling: true,
+    path: resolve(cwd, './dist'),
+    publicPath,
+    filename: getters.file({ isDev }),
+    chunkFilename: getters.chunk({ isDev }),
+    sourceMapFilename: getters.sourceMap({ isDev }),
+  };
+};