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

package/src/config/utils.js

@@ -1,99 +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 = {
-    './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

@@ -1,109 +0,0 @@
-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');
-
-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

@@ -1,32 +0,0 @@
-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

@@ -1,47 +0,0 @@
-/* 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/rules/styleRules.js

@@ -1,60 +0,0 @@
-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,
-};