@openmrs/webpack-config 10.0.1-pre.5322 → 10.0.1-pre.5364

package/dist/index.js

@@ -44,16 +44,21 @@ exports.optimizationConfig = exports.watchConfig = exports.assetRuleConfig = exp
  */
 const fs_1 = require("fs");
 const path_1 = require("path");
+const browserslist_1 = __importDefault(require("browserslist"));
+const node_1 = require("browserslist/node");
+const browserslist_config_openmrs_1 = __importDefault(require("browserslist-config-openmrs"));
 const clean_webpack_plugin_1 = require("clean-webpack-plugin");
 const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
 // eslint-disable-next-line no-restricted-imports
 const lodash_1 = require("lodash");
 const semver_1 = require("semver");
-const webpack_1 = require("@module-federation/enhanced/webpack");
-const webpack_2 = require("webpack");
+const webpack_1 = require("webpack");
+// webpack's own browsers-to-features mapping
+const browserslistTargetHandler_1 = __importDefault(require("webpack/lib/config/browserslistTargetHandler"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const webpack_stats_plugin_1 = require("webpack-stats-plugin");
+const webpack_2 = require("@module-federation/enhanced/webpack");
 const production = 'production';
 // Read from our own pin rather than `@module-federation/enhanced/package.json`, which its `exports` map
 // makes unreadable. `parse` rather than `coerce`, so that loosening the pin to a range disables the skew
@@ -61,6 +66,25 @@ const production = 'production';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const moduleFederationPin = require('../package.json').dependencies['@module-federation/enhanced'];
 const moduleFederationVersion = (0, semver_1.parse)(moduleFederationPin);
+// The subset of what `browserslistTargetHandler.resolve` reports that `output.environment` accepts;
+// the rest describe the platform and available APIs, and webpack's schema rejects them here.
+const environmentFlags = [
+    'arrowFunction',
+    'asyncFunction',
+    'bigIntLiteral',
+    'const',
+    'destructuring',
+    'document',
+    'dynamicImport',
+    'dynamicImportInWorker',
+    'forOf',
+    'globalThis',
+    'importMetaDirnameAndFilename',
+    'methodShorthand',
+    'module',
+    'optionalChaining',
+    'templateLiteral',
+];
 /**
  * Prepended to this app's entry chunks. Without it, an app running under an app shell too old to
  * publish the runtime globals fails with a `TypeError` from inside minified runtime code. All three
@@ -98,6 +122,95 @@ function getFrameworkVersion() {
         return '5.x';
     }
 }
+/**
+ * The browserslist queries swc compiles this module against, falling back to OpenMRS's shared config
+ * when the module declares none, so that frontend RFC 0003 stays the single source of truth. Given no
+ * target at all swc down-levels to ES5, and every supported browser pays for transform helpers it
+ * doesn't need.
+ *
+ * `@openmrs/rspack-config` has a copy of this; keep them in step. `browser-targets.test.ts` compares
+ * what the two hand their loaders and fails if they drift.
+ *
+ * @param root The directory of the module being built
+ */
+function browserslistQueries(root) {
+    var _a, _b;
+    const warnings = [];
+    // deliberately unguarded
+    const loaded = browserslist_1.default.loadConfig({ path: root });
+    const configured = loaded === undefined ? [] : Array.isArray(loaded) ? loaded : [loaded];
+    if (loaded !== undefined && configured.length === 0) {
+        // warn when a browserlist config is empty
+        warnings.push(`This module declares a browserslist config, but it resolves to no queries for the ` +
+            `${(_b = (_a = process.env.BROWSERSLIST_ENV) !== null && _a !== void 0 ? _a : process.env.NODE_ENV) !== null && _b !== void 0 ? _b : production} environment. ` +
+            `Targeting ${browserslist_config_openmrs_1.default.join(', ')} instead.`);
+    }
+    const expanded = expandBrowserslistExtends(configured.length > 0 ? configured : browserslist_config_openmrs_1.default, root, warnings);
+    return { queries: expanded.length > 0 ? expanded : browserslist_config_openmrs_1.default, warnings };
+}
+function expandBrowserslistExtends(queries, root, warnings, seen = new Set()) {
+    // Split on commas because a browserslist config may be a single string of them
+    return queries.flatMap((query) => query
+        .split(',')
+        .flatMap((part) => {
+        const extended = /^extends\s+(.+)$/i.exec(part.trim());
+        if (!extended) {
+            return [part.trim()];
+        }
+        const name = extended[1].trim();
+        if (seen.has(name)) {
+            return [];
+        }
+        seen.add(name);
+        try {
+            // browserslist's own loader, rather than a bare `require` so we handle the same syntax
+            const resolved = (0, node_1.loadQueries)({ path: root }, name);
+            return expandBrowserslistExtends(Array.isArray(resolved) ? resolved : [resolved], root, warnings, seen);
+        }
+        catch (err) {
+            // Only browserslist's own verdict on a named config is survivable: not installed, or refused
+            // for its name.
+            const notInstalled = (err === null || err === void 0 ? void 0 : err.code) === 'MODULE_NOT_FOUND';
+            const refused = (err === null || err === void 0 ? void 0 : err.browserslist) === true;
+            if (!notInstalled && !refused) {
+                throw err;
+            }
+            warnings.push(`Could not load the browserslist config "${name}" (${err.message}). ` +
+                `Targeting ${browserslist_config_openmrs_1.default.join(', ')} instead.`);
+            return browserslist_config_openmrs_1.default;
+        }
+    })
+        .filter((part) => part.length > 0));
+}
+/** Reports how a module's browsers were worked out, where a developer will actually see it. */
+class BrowserslistWarningsPlugin {
+    constructor(messages) {
+        this.messages = messages;
+    }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap('OpenmrsBrowserslistWarnings', (compilation) => {
+            for (const message of this.messages) {
+                compilation.warnings.push(new webpack_1.WebpackError(message));
+            }
+        });
+    }
+}
+/**
+ * The `output.environment` flags for a set of browserslist queries: which JavaScript features webpack
+ * may use in the runtime it generates.
+ *
+ * Derived with webpack's own browserslist target handler, so the browsers-to-features mapping is the
+ * caniuse-backed one webpack uses for `target: 'browserslist'` rather than a table maintained here.
+ * `resolve` also reports platform and API properties that `output.environment` rejects, hence the
+ * filter to the flags webpack's schema accepts.
+ *
+ * @param queries Browserslist queries, already `extends`-expanded
+ * @param root The directory of the module being built, for resolving relative queries
+ */
+function browserEnvironment(queries, root) {
+    const supported = browserslistTargetHandler_1.default.resolve((0, browserslist_1.default)(queries, { path: root }));
+    return Object.fromEntries(environmentFlags.filter((flag) => typeof supported[flag] === 'boolean').map((flag) => [flag, supported[flag]]));
+}
 function makeIdent(name) {
     if (name.includes('/')) {
         name = name.slice(name.indexOf('/'));
@@ -176,6 +289,7 @@ exports.default = (env, argv = {}) => {
     const outDir = (0, path_1.dirname)(browser || main);
     const srcFile = (0, path_1.resolve)(root, browser ? main : types);
     const ident = makeIdent(name);
+    const { queries: browserTargets, warnings: browserslistWarnings } = browserslistQueries(root);
     const frameworkVersion = getFrameworkVersion();
     const routes = (0, path_1.resolve)(root, 'src', 'routes.json');
     const hasRoutesDefined = fileExistsSync(routes);
@@ -202,12 +316,22 @@ exports.default = (env, argv = {}) => {
             publicPath: 'auto',
             path: (0, path_1.resolve)(root, outDir),
             hashFunction: 'xxhash64',
+            environment: browserEnvironment(browserTargets, root),
         }, module: {
             rules: [
                 (0, lodash_1.merge)({
                     test: /\.m?(js|ts|tsx)$/,
                     exclude: /node_modules/,
-                    use: require.resolve('swc-loader'),
+                    use: {
+                        loader: require.resolve('swc-loader'),
+                        options: {
+                            env: {
+                                targets: browserTargets,
+                            },
+                            // ignore a project .swcrc to match rspack behavior
+                            swcrc: false,
+                        },
+                    },
                 }, exports.scriptRuleConfig),
                 (0, lodash_1.merge)({
                     test: /\.css$/,
@@ -237,7 +361,7 @@ exports.default = (env, argv = {}) => {
                     type: 'asset/source',
                 }),
             ],
-        }, mode, devtool: mode === production ? 'hidden-nosources-source-map' : 'source-map', devServer: {
+        }, mode, target: 'web', devtool: mode === production ? 'hidden-nosources-source-map' : 'source-map', devServer: {
             headers: {
                 'Access-Control-Allow-Origin': '*',
             },
@@ -257,6 +381,7 @@ exports.default = (env, argv = {}) => {
                 maxInitialRequests: 1,
             },
         }, exports.optimizationConfig), plugins: [
+            browserslistWarnings.length > 0 && new BrowserslistWarningsPlugin(browserslistWarnings),
             new fork_ts_checker_webpack_plugin_1.default({
                 issue: {
                     exclude: [
@@ -271,10 +396,10 @@ exports.default = (env, argv = {}) => {
             new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
                 analyzerMode: env && env.analyze ? 'server' : 'disabled',
             }),
-            new webpack_2.DefinePlugin({
+            new webpack_1.DefinePlugin({
                 'process.env.FRAMEWORK_VERSION': JSON.stringify(frameworkVersion),
             }),
-            new webpack_1.ModuleFederationPlugin({
+            new webpack_2.ModuleFederationPlugin({
                 // Look in the `esm-dynamic-loading` framework package for an explanation of how modules
                 // get loaded into the application.
                 name,
@@ -336,11 +461,11 @@ exports.default = (env, argv = {}) => {
             // The two runtime packages a remote can safely borrow from the app shell; see the
             // `ExternalsPlugin` block in `@openmrs/rspack-config` for why only these two are shareable,
             // what still ships per remote, and why this is a plugin rather than an `externals` entry.
-            new webpack_2.ExternalsPlugin('global', {
+            new webpack_1.ExternalsPlugin('global', {
                 '@module-federation/sdk': '_OPENMRS_FEDERATION_SDK',
                 '@module-federation/error-codes': '_OPENMRS_FEDERATION_ERROR_CODES',
             }),
-            new webpack_2.BannerPlugin({
+            new webpack_1.BannerPlugin({
                 raw: true,
                 entryOnly: true,
                 test: /\.[cm]?js$/,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/webpack-config",
-  "version": "10.0.1-pre.5322",
+  "version": "10.0.1-pre.5364",
   "license": "MPL-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,6 +33,8 @@
   "dependencies": {
     "@module-federation/enhanced": "2.8.1",
     "@swc/core": "1.15.21",
+    "browserslist": "4.28.9",
+    "browserslist-config-openmrs": "^1.0.1",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "5.2.7",

package/src/index.ts

@@ -38,23 +38,30 @@
  */
 import { existsSync, statSync } from 'fs';
 import { basename, dirname, resolve } from 'path';
+import browserslist from 'browserslist';
+import { loadQueries } from 'browserslist/node';
+import defaultBrowserslistQueries from 'browserslist-config-openmrs';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 // eslint-disable-next-line no-restricted-imports
 import { isArray, merge, mergeWith } from 'lodash';
 import { inc, parse } from 'semver';
-import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 import {
   BannerPlugin,
+  type Compiler,
   DefinePlugin,
   ExternalsPlugin,
   type ModuleOptions,
   type RuleSetRule,
+  WebpackError,
   type WebpackOptionsNormalized as WebpackConfiguration,
 } from 'webpack';
+// webpack's own browsers-to-features mapping
+import browserslistTargetHandler from 'webpack/lib/config/browserslistTargetHandler';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { StatsWriterPlugin } from 'webpack-stats-plugin';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
 
 type OpenmrsWebpackConfig = Omit<Partial<WebpackConfiguration>, 'module' | 'output'> & {
   module: ModuleOptions;
@@ -70,6 +77,26 @@ const production = 'production';
 const moduleFederationPin: string = require('../package.json').dependencies['@module-federation/enhanced'];
 const moduleFederationVersion = parse(moduleFederationPin);
 
+// The subset of what `browserslistTargetHandler.resolve` reports that `output.environment` accepts;
+// the rest describe the platform and available APIs, and webpack's schema rejects them here.
+const environmentFlags = [
+  'arrowFunction',
+  'asyncFunction',
+  'bigIntLiteral',
+  'const',
+  'destructuring',
+  'document',
+  'dynamicImport',
+  'dynamicImportInWorker',
+  'forOf',
+  'globalThis',
+  'importMetaDirnameAndFilename',
+  'methodShorthand',
+  'module',
+  'optionalChaining',
+  'templateLiteral',
+] as const;
+
 /**
  * Prepended to this app's entry chunks. Without it, an app running under an app shell too old to
  * publish the runtime globals fails with a `TypeError` from inside minified runtime code. All three
@@ -111,6 +138,132 @@ function getFrameworkVersion() {
   }
 }
 
+/** What a module's browsers resolved to, plus anything worth telling the developer about getting there. */
+type BrowserPolicy = { queries: Array<string>; warnings: Array<string> };
+
+/**
+ * The browserslist queries swc compiles this module against, falling back to OpenMRS's shared config
+ * when the module declares none, so that frontend RFC 0003 stays the single source of truth. Given no
+ * target at all swc down-levels to ES5, and every supported browser pays for transform helpers it
+ * doesn't need.
+ *
+ * `@openmrs/rspack-config` has a copy of this; keep them in step. `browser-targets.test.ts` compares
+ * what the two hand their loaders and fails if they drift.
+ *
+ * @param root The directory of the module being built
+ */
+function browserslistQueries(root: string): BrowserPolicy {
+  const warnings: Array<string> = [];
+  // deliberately unguarded
+  const loaded = browserslist.loadConfig({ path: root });
+  const configured = loaded === undefined ? [] : Array.isArray(loaded) ? loaded : [loaded];
+
+  if (loaded !== undefined && configured.length === 0) {
+    // warn when a browserlist config is empty
+    warnings.push(
+      `This module declares a browserslist config, but it resolves to no queries for the ` +
+        `${process.env.BROWSERSLIST_ENV ?? process.env.NODE_ENV ?? production} environment. ` +
+        `Targeting ${defaultBrowserslistQueries.join(', ')} instead.`,
+    );
+  }
+
+  const expanded = expandBrowserslistExtends(
+    configured.length > 0 ? configured : defaultBrowserslistQueries,
+    root,
+    warnings,
+  );
+
+  return { queries: expanded.length > 0 ? expanded : defaultBrowserslistQueries, warnings };
+}
+
+function expandBrowserslistExtends(
+  queries: Array<string>,
+  root: string,
+  warnings: Array<string>,
+  seen = new Set<string>(),
+): Array<string> {
+  // Split on commas because a browserslist config may be a single string of them
+  return queries.flatMap((query) =>
+    query
+      .split(',')
+      .flatMap((part) => {
+        const extended = /^extends\s+(.+)$/i.exec(part.trim());
+
+        if (!extended) {
+          return [part.trim()];
+        }
+
+        const name = extended[1].trim();
+
+        if (seen.has(name)) {
+          return [];
+        }
+
+        seen.add(name);
+
+        try {
+          // browserslist's own loader, rather than a bare `require` so we handle the same syntax
+          const resolved = loadQueries({ path: root }, name);
+
+          return expandBrowserslistExtends(Array.isArray(resolved) ? resolved : [resolved], root, warnings, seen);
+        } catch (err) {
+          // Only browserslist's own verdict on a named config is survivable: not installed, or refused
+          // for its name.
+          const notInstalled = (err as { code?: string })?.code === 'MODULE_NOT_FOUND';
+          const refused = (err as { browserslist?: boolean })?.browserslist === true;
+
+          if (!notInstalled && !refused) {
+            throw err;
+          }
+
+          warnings.push(
+            `Could not load the browserslist config "${name}" (${(err as Error).message}). ` +
+              `Targeting ${defaultBrowserslistQueries.join(', ')} instead.`,
+          );
+
+          return defaultBrowserslistQueries;
+        }
+      })
+      .filter((part) => part.length > 0),
+  );
+}
+
+/** Reports how a module's browsers were worked out, where a developer will actually see it. */
+class BrowserslistWarningsPlugin {
+  constructor(private readonly messages: Array<string>) {}
+
+  apply(compiler: Compiler) {
+    compiler.hooks.thisCompilation.tap('OpenmrsBrowserslistWarnings', (compilation) => {
+      for (const message of this.messages) {
+        compilation.warnings.push(new WebpackError(message));
+      }
+    });
+  }
+}
+
+/**
+ * The `output.environment` flags for a set of browserslist queries: which JavaScript features webpack
+ * may use in the runtime it generates.
+ *
+ * Derived with webpack's own browserslist target handler, so the browsers-to-features mapping is the
+ * caniuse-backed one webpack uses for `target: 'browserslist'` rather than a table maintained here.
+ * `resolve` also reports platform and API properties that `output.environment` rejects, hence the
+ * filter to the flags webpack's schema accepts.
+ *
+ * @param queries Browserslist queries, already `extends`-expanded
+ * @param root The directory of the module being built, for resolving relative queries
+ */
+function browserEnvironment(queries: Array<string>, root: string): WebpackConfiguration['output']['environment'] {
+  const supported = browserslistTargetHandler.resolve(browserslist(queries, { path: root })) as Record<
+    string,
+    boolean | null | undefined
+  >;
+
+  return Object.fromEntries(
+    environmentFlags.filter((flag) => typeof supported[flag] === 'boolean').map((flag) => [flag, supported[flag]]),
+  );
+}
+
 function makeIdent(name: string): string {
   if (name.includes('/')) {
     name = name.slice(name.indexOf('/'));
@@ -201,6 +354,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
   const outDir = dirname(browser || main);
   const srcFile = resolve(root, browser ? main : types);
   const ident = makeIdent(name);
+  const { queries: browserTargets, warnings: browserslistWarnings } = browserslistQueries(root);
   const frameworkVersion = getFrameworkVersion();
   const routes = resolve(root, 'src', 'routes.json');
   const hasRoutesDefined = fileExistsSync(routes);
@@ -232,6 +386,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
       publicPath: 'auto',
       path: resolve(root, outDir),
       hashFunction: 'xxhash64',
+      environment: browserEnvironment(browserTargets, root),
     },
     module: {
       rules: [
@@ -239,7 +394,16 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
           {
             test: /\.m?(js|ts|tsx)$/,
             exclude: /node_modules/,
-            use: require.resolve('swc-loader'),
+            use: {
+              loader: require.resolve('swc-loader'),
+              options: {
+                env: {
+                  targets: browserTargets,
+                },
+                // ignore a project .swcrc to match rspack behavior
+                swcrc: false,
+              },
+            },
           },
           scriptRuleConfig,
         ),
@@ -282,6 +446,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
       ],
     },
     mode,
+    target: 'web',
     devtool: mode === production ? 'hidden-nosources-source-map' : 'source-map',
     devServer: {
       headers: {
@@ -313,6 +478,7 @@ export default (env: Record<string, string>, argv: Record<string, string> = {})
       optimizationConfig,
     ),
     plugins: [
+      browserslistWarnings.length > 0 && new BrowserslistWarningsPlugin(browserslistWarnings),
       new ForkTsCheckerWebpackPlugin({
         issue: {
           exclude: [