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

package/src/config/plugins.ts

@@ -0,0 +1,95 @@
+import { existsSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+import type { BuildContext } from '@genesislcap/build-kit';
+import { objToSnakeCase } from '@genesislcap/build-kit';
+import CopyPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import type { Configuration } from 'webpack';
+import { DefinePlugin } from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import WebpackPwaManifest from 'webpack-pwa-manifest';
+import WebpackBar from 'webpackbar';
+import { InjectManifest } from 'workbox-webpack-plugin';
+import { readFile } from '../utils';
+import { getFederationPlugins, federatedIndexExists, resolveFederationOptions } from './federation';
+
+const getTemplate = (cwd) => {
+  const templateApp = resolve(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;
+};
+
+export const plugins = (ctx: BuildContext): Configuration['plugins'] => {
+  const {
+    cli: { isAnalyze },
+    dirs: { cwd },
+    config: {
+      serviceWorker,
+      pwa,
+      federation,
+      app: { rootElement },
+    },
+    pkg,
+  } = ctx;
+
+  const federatedIndexPresent = federatedIndexExists();
+  const moduleFederationOptions = resolveFederationOptions(federation, pkg);
+
+  return [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: resolve(__dirname, '../../public'),
+        },
+      ],
+    }),
+    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 WebpackBar(),
+    new MiniCssExtractPlugin(),
+    (rootElement || !federatedIndexPresent) &&
+      new HtmlWebpackPlugin({
+        title: `${pkg.description}`,
+        template: getTemplate(cwd),
+        customElementTagName: rootElement,
+        minify: false,
+      }),
+    ...getFederationPlugins(federatedIndexPresent, rootElement, moduleFederationOptions, pkg),
+    isAnalyze &&
+      new BundleAnalyzerPlugin({
+        reportTitle: `Webpack Visualizer`,
+        reportFilename: join(cwd, './dist', 'webpack.stats.html'),
+        analyzerMode: 'static',
+        openAnalyzer: false,
+      }),
+    pwa &&
+      new WebpackPwaManifest({
+        ...objToSnakeCase(pwa),
+        name: pwa.name,
+        icons:
+          Array.isArray(pwa.icons) &&
+          pwa.icons.map((icon) => ({
+            sizes: icon.sizes,
+            src: resolve(cwd, icon.src),
+          })),
+      }),
+    serviceWorker &&
+      new InjectManifest({
+        swSrc: './src/' + serviceWorker.worker,
+        swDest: serviceWorker.assetName,
+        exclude: serviceWorker.exclude,
+        maximumFileSizeToCacheInBytes: serviceWorker.maximumFileSizeToCache,
+      }),
+  ].filter(Boolean);
+};

package/src/config/resolveLoader.ts

@@ -0,0 +1,19 @@
+import { resolve } from 'node:path';
+import type { BuildContext } from '@genesislcap/build-kit';
+import type { Configuration } from 'webpack';
+
+export const resolveLoader = (ctx: BuildContext): Configuration['resolveLoader'] => {
+  const {
+    dirs: { cwd, workspace },
+  } = ctx;
+  return {
+    modules: [
+      // webpack-builder node_modules
+      resolve(__dirname, '../../node_modules'),
+      // workspace folder node_modules (if set)
+      workspace ? resolve(workspace, 'node_modules') : '',
+      // package node_modules
+      resolve(cwd, 'node_modules'),
+    ].filter(Boolean),
+  };
+};

package/src/{rules/fileRules.js → config/rules/fileRules.ts}

@@ -2,7 +2,7 @@
 // In this config named capturing isn't desired.
 // May cause adverse affects with webpack.
 
-const appFileRules = {
+export const appFileRules = {
   fonts: () => ({
     test: /\.(woff|woff2|eot|ttf|otf)$/i,
     type: 'asset/resource',
@@ -20,7 +20,3 @@ const appFileRules = {
     type: 'asset/resource',
   }),
 };
-
-module.exports = {
-  appFileRules,
-};

package/src/{rules/scriptRules.js → config/rules/scriptRules.ts}

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

package/src/config/rules/styleRules.ts

@@ -0,0 +1,38 @@
+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];
+
+export const appStyleRules = {
+  headCss: () => ({
+    test: /\.css$/i,
+    include: headCssPatterns,
+    use: ['style-loader', cssLoader(), postCSSLoader()],
+  }),
+  css: (useHash = true) => ({
+    test: /\.css$/i,
+    exclude: [...headCssPatterns],
+    use: [cssLoader(), postCSSLoader()],
+  }),
+};

package/src/index.ts

@@ -1,5 +1,8 @@
 import { run, resolveBin } from '@genesislcap/build-kit';
 import type { BuildContext } from '@genesislcap/build-kit';
+import webpack from 'webpack';
+import { build, dev } from './commands';
+import { getConfig } from './config';
 
 export default async (ctx: BuildContext) => {
   const {
@@ -13,16 +16,14 @@ export default async (ctx: BuildContext) => {
     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}`);
+    const config = getConfig(ctx);
+    const compiler = webpack(config);
+    dev(compiler, config);
+  } else if (isBuild || isAnalyze) {
+    const config = getConfig(ctx);
+    const compiler = webpack(config);
+    await build(compiler);
   } else {
     throw new Error(`Unrecognised command: ${JSON.stringify(options)}`);
   }

package/src/utils/fs.ts

@@ -0,0 +1,13 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+export const readFile = (filePath) => {
+  if (!filePath) return '';
+  const resolvedPath = resolve(process.cwd(), filePath);
+  try {
+    return readFileSync(resolvedPath, 'utf8');
+  } catch (e) {
+    console.error(e);
+    return '';
+  }
+};

package/src/utils/index.ts

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

package/dist/config/configFactory.d.ts

@@ -1,7 +0,0 @@
-declare function _exports(packageJson: any, mfOptions: {}, customElementTagName: any): {
-    port: any;
-    default: {};
-    isProd: boolean;
-};
-export = _exports;
-//# sourceMappingURL=configFactory.d.ts.map

package/dist/config/configFactory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"configFactory.d.ts","sourceRoot":"","sources":["../../src/config/configFactory.js"],"names":[],"mappings":"AAyBiB;;;;EA8BhB"}

package/dist/config/configFactory.js

@@ -1,51 +0,0 @@
-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) => {
-    var _a;
-    const port = portfinderSync.getPort(((_a = packageJson.config) === null || _a === void 0 ? void 0 : _a.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/dist/config/devServers.d.ts

@@ -1,35 +0,0 @@
-export namespace devServers {
-    function _default(port?: string | number, host?: string): {
-        open: boolean;
-        historyApiFallback: boolean;
-        allowedHosts: string;
-        host: string;
-        port: string | number;
-        server: {
-            type: string;
-        };
-        client: {
-            overlay: {
-                runtimeErrors: boolean;
-            };
-        };
-        proxy: {
-            context: string[];
-            target: string;
-            secure: boolean;
-            changeOrigin: boolean;
-        }[];
-        headers: {
-            'Access-Control-Allow-Origin': string;
-            'Access-Control-Allow-Methods': string;
-            'Access-Control-Allow-Headers': string;
-        };
-        static: {
-            directory: string;
-            publicPath: string;
-            watch: boolean;
-        }[];
-    };
-    export { _default as default };
-}
-//# sourceMappingURL=devServers.d.ts.map

package/dist/config/devServers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"devServers.d.ts","sourceRoot":"","sources":["../../src/config/devServers.js"],"names":[],"mappings":";IA2BW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCR"}

package/dist/config/devServers.js

@@ -1,67 +0,0 @@
-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/dist/config/postcss.config.d.ts

@@ -1,2 +0,0 @@
-export const plugins: any[];
-//# sourceMappingURL=postcss.config.d.ts.map

package/dist/config/postcss.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"postcss.config.d.ts","sourceRoot":"","sources":["../../src/config/postcss.config.js"],"names":[],"mappings":""}

package/dist/config/postcss.config.js

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

package/dist/config/utils.d.ts

@@ -1,20 +0,0 @@
-export function getFederatedPkgName(pkgName: any): any;
-/**
- * TODO: Add prod version logic
- */
-export function getRemoteEntryUrl(port: any, host?: string): string;
-export function getRemoteEntry(name: any, port: any, host?: string): string;
-/**
- * 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.
- */
-export function getWebpackMFConfigFragment(packageJson: any, mfOptions?: {}, htmlFilename?: string): {
-    entry: string;
-    plugins: any[];
-};
-export function federatedIndexExists(): boolean;
-//# sourceMappingURL=utils.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/config/utils.js"],"names":[],"mappings":"AAUA,uDAMC;AAED;;GAEG;AACH,oEACiD;AACjD,4EAC4C;AAW5C;;;;;;;GAOG;AACH;;;EA+CC;AA5DD,gDAGC"}

package/dist/config/utils.js

@@ -1,77 +0,0 @@
-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 = Object.assign({ './index': federatedIndex }, mfExposes);
-    const remotes = Object.assign({}, mfRemotes);
-    const shared = Object.assign(Object.assign({}, 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/dist/config/webpack.common.d.ts

@@ -1,68 +0,0 @@
-declare function _exports(): {
-    entry: string;
-    plugins: any[];
-    output: {
-        strictModuleErrorHandling: boolean;
-        strictModuleExceptionHandling: boolean;
-        path: string;
-        publicPath: string;
-    };
-    resolve: {
-        extensions: string[];
-        modules: string[];
-    };
-    module: {
-        rules: ({
-            test: RegExp;
-            type: string;
-        } | {
-            test: RegExp;
-            use: {
-                loader: string;
-            }[];
-        } | {
-            test: RegExp;
-            include: RegExp[];
-            use: (string | {
-                loader: string;
-                options: {
-                    importLoaders: number;
-                };
-            } | {
-                loader: string;
-                options: {
-                    postcssOptions: {
-                        config: string;
-                    };
-                };
-            })[];
-        } | {
-            test: RegExp;
-            exclude: RegExp[];
-            use: (string | {
-                loader: string;
-                options: {
-                    importLoaders: number;
-                };
-            } | {
-                loader: string;
-                options: {
-                    postcssOptions: {
-                        config: string;
-                    };
-                };
-            })[];
-        })[];
-    };
-    experiments: {
-        topLevelAwait: boolean;
-        lazyCompilation: boolean;
-    };
-    performance: {
-        hints: boolean;
-        maxEntrypointSize: number;
-        maxAssetSize: number;
-    };
-};
-export = _exports;
-//# sourceMappingURL=webpack.common.d.ts.map

package/dist/config/webpack.common.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"webpack.common.d.ts","sourceRoot":"","sources":["../../src/config/webpack.common.js"],"names":[],"mappings":"AAkCiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0Ef"}