@mainset/bundler-webpack 0.3.4 → 0.3.6

package/dist/esm/babel.config.mjs

@@ -1,10 +1,9 @@
-const babelConfig = {
+const BABEL_CONFIG__BROWSER = {
     presets: [
         [
             '@babel/preset-env',
             {
                 targets: {
-                    node: 'current',
                     chrome: '60',
                     firefox: '60',
                     safari: '11.1',
@@ -18,4 +17,22 @@ const babelConfig = {
     ],
     plugins: [],
 };
-export default babelConfig;
+// NOTE: the SSR server bundle runs on Node only (never IE11/old browsers), so it
+// gets its own, much looser preset-env target instead of inheriting the browser
+// one — otherwise server code would be needlessly downleveled to ES5.
+const BABEL_CONFIG__NODE = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: {
+                    node: 'current',
+                },
+            },
+        ],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+    ],
+    plugins: [],
+};
+export { BABEL_CONFIG__BROWSER, BABEL_CONFIG__NODE };

package/dist/esm/generate-webpack-config.mjs

@@ -1,4 +1,4 @@
-import { merge } from '@mainset/toolkit-js';
+import { merge } from 'webpack-merge';
 import csrDevServerWebappEnvBasedConfig from './webpack-config/dev-server.csr.config.mjs';
 import ssrEnvBasedConfigs from './webpack-config/webapp.ssr.config.mjs';
 const generateEnvBasedWebpackConfig = (extendedWebpackConfig = {}) => {

package/dist/esm/webpack-config/config-fragments/common-webapp.fragment.mjs

@@ -1,8 +1,19 @@
 import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import fs from 'fs';
 import path from 'path';
+import { merge } from 'webpack-merge';
 import { commonWebpackConfigFragment } from './common.fragment.mjs';
+// The {public} folder is copied as-is into the build output, if present
+const createPublicAssetsCopyPlugin = (outputPath) => new CopyWebpackPlugin({
+    patterns: [
+        {
+            from: path.join(runtimePathById.root, 'public'),
+            to: outputPath,
+            noErrorOnMissing: true, // optional: don't error if public doesn't exist
+        },
+    ],
+});
 // The entry point for Global styles
 const cssGlobalStylesEntry = path.join(runtimePathById.src, 'styles', 'global.css');
 const scssGlobalStylesEntry = path.join(runtimePathById.src, 'styles', 'global.scss');
@@ -16,4 +27,4 @@ if (fs.existsSync(scssGlobalStylesEntry))
 const commonWebappWebpackConfigFragment = merge(commonWebpackConfigFragment, {
     entry: defaultEntry,
 });
-export { commonWebappWebpackConfigFragment };
+export { commonWebappWebpackConfigFragment, createPublicAssetsCopyPlugin };

package/dist/esm/webpack-config/config-fragments/common.fragment.mjs

@@ -9,8 +9,10 @@ const commonWebpackConfigFragment = {
             BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT,
             ...IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS,
             Object.assign(Object.assign({}, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { type: 'asset/resource', generator: {
-                    filename: '[name].[hash].[ext]',
-                    outputPath: 'dist/assets/fonts',
+                    filename: '[name].[contenthash:8].[ext]',
+                    // NOTE: the following paths are relative to the webpack output path (e.g. dist/)
+                    outputPath: 'assets/fonts/',
+                    publicPath: 'assets/fonts/',
                 } }),
         ],
     },
@@ -24,6 +26,7 @@ const commonWebpackConfigFragment = {
             // Extra / custom
             '.ts',
             '.tsx',
+            '.jsx',
         ],
     },
 };

package/dist/esm/webpack-config/config-fragments/csr-webapp.fragment.mjs

@@ -1,25 +1,14 @@
 import { runtimePathById } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
 import fs from 'fs';
 import path from 'path';
-import { commonWebappWebpackConfigFragment } from './common-webapp.fragment.mjs';
+import { merge } from 'webpack-merge';
+import { commonWebappWebpackConfigFragment, createPublicAssetsCopyPlugin, } from './common-webapp.fragment.mjs';
 // The entry point for the CSR webapp
 const defaultEntry = path.join(runtimePathById.src, 'index.ts');
 const csrEntry = path.join(runtimePathById.src, 'index.csr.ts');
 const bundlerEntry = fs.existsSync(csrEntry) ? csrEntry : defaultEntry;
 const csrWebappWebpackConfigFragment = merge(commonWebappWebpackConfigFragment, {
     entry: [bundlerEntry],
-    plugins: [
-        new CopyWebpackPlugin({
-            patterns: [
-                {
-                    from: path.join(runtimePathById.root, 'public'),
-                    to: path.join(runtimePathById.dist),
-                    noErrorOnMissing: true, // optional: don't error if public doesn't exist
-                },
-            ],
-        }),
-    ],
+    plugins: [createPublicAssetsCopyPlugin(runtimePathById.dist)],
 });
 export { csrWebappWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/module-rules/module-rules.fragment.mjs

@@ -1,23 +1,27 @@
 import { resolveHostPackageNodeModulesPath } from '@mainset/cli/runtime';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import babelConfig from '../../../babel.config.mjs';
-const BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT = {
+import { BABEL_CONFIG__BROWSER, BABEL_CONFIG__NODE, } from '../../../babel.config.mjs';
+const createBabelLoaderRule = (options) => ({
     test: /\.((ts|mts|tsx)|(js|mjs|jsx))$/,
     exclude: /node_modules/,
     use: {
         loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'babel-loader'),
-        options: babelConfig,
+        options,
     },
-};
+});
+const BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT = createBabelLoaderRule(BABEL_CONFIG__BROWSER);
+// NOTE: dedicated rule for the SSR server bundle (target: 'node') so it uses
+// {BABEL_CONFIG__NODE} instead of the browser-targeted preset-env config
+const SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT = createBabelLoaderRule(BABEL_CONFIG__NODE);
 const IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS = [
     {
         test: /\.(svg|png)$/,
         exclude: /\.source\.svg$/,
         type: 'asset/resource',
         generator: {
-            filename: '[name].[hash].[ext]',
-            outputPath: 'dist/assets/images',
+            filename: '[name].[contenthash:8].[ext]',
+            // NOTE: the following paths are relative to the webpack output path (e.g. dist/)
+            outputPath: 'assets/images/',
+            publicPath: 'assets/images/',
         },
     },
     {
@@ -25,4 +29,4 @@ const IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS = [
         type: 'asset/source',
     },
 ];
-export { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, };
+export { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, };

package/dist/esm/webpack-config/config-fragments/ssr-webapp.fragment.mjs

@@ -1,10 +1,9 @@
 var _a;
 import { runtimePathById } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
 import fs from 'fs';
 import path from 'path';
-import { commonWebappWebpackConfigFragment } from './common-webapp.fragment.mjs';
+import { merge } from 'webpack-merge';
+import { commonWebappWebpackConfigFragment, createPublicAssetsCopyPlugin, } from './common-webapp.fragment.mjs';
 // The entry point for the SSR webapp
 const defaultEntry = path.join(runtimePathById.src, 'index.ts');
 const ssrEntry = path.join(runtimePathById.src, 'index.ssr.ts');
@@ -17,16 +16,6 @@ commonWebappWebpackConfigFragment, {
     output: {
         path: ssrPublicOutputPath,
     },
-    plugins: [
-        new CopyWebpackPlugin({
-            patterns: [
-                {
-                    from: path.join(runtimePathById.root, 'public'),
-                    to: ssrPublicOutputPath,
-                    noErrorOnMissing: true, // optional: don't error if public doesn't exist
-                },
-            ],
-        }),
-    ],
+    plugins: [createPublicAssetsCopyPlugin(ssrPublicOutputPath)],
 });
 export { ssrWebappWebpackConfigFragment };

package/dist/esm/webpack-config/dev-server.csr.config.mjs

@@ -1,8 +1,8 @@
 import { runtimePathById } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
 import fs from 'fs';
 import path from 'path';
 import { pathToFileURL } from 'url';
+import { merge } from 'webpack-merge';
 import csrWebappEnvBasedConfig from './webapp.csr.config.mjs';
 const proxyConfigPath = path.join(runtimePathById.config, 'proxy.config.mjs');
 const proxyConfigByPath = fs.existsSync(proxyConfigPath)

package/dist/esm/webpack-config/server.ssr.config.mjs

@@ -1,8 +1,8 @@
 import { NODE_ENV, resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
 import path from 'path';
+import { merge } from 'webpack-merge';
 import { commonWebpackConfigFragment } from './config-fragments/common.fragment.mjs';
-import { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, } from './config-fragments/module-rules/index.mjs';
+import { CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, } from './config-fragments/module-rules/index.mjs';
 const nullLoaderModuleRules = [
     FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK,
 ].map((ruleTestRegexWebpackConfigFragment) => (Object.assign(Object.assign({}, ruleTestRegexWebpackConfigFragment), { use: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'null-loader') })));
@@ -36,7 +36,7 @@ const ssrServerCommonWebpackConfigFragment = {
     module: {
         rules: [
             // common config
-            BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT,
+            SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT,
             ...IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS,
             // do NOT bundle in SSR mode, because they are not used during rendering on the server
             ...nullLoaderModuleRules,
@@ -63,8 +63,6 @@ const generateSSRCssStylesRuleWebpackConfigFragment = ({ mode, }) => {
                                 //    without including or compiling CSS into the server bundle.
                             },
                         },
-                    }, {
-                        isSourceObjMutated: false,
                     }),
                     ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
                 ] }),
@@ -89,6 +87,7 @@ const ssrServerProdWebpackConfigFragment = {
 };
 const ssrServerDevWebpackConfigFragment = {
     mode: 'development',
+    devtool: 'inline-source-map',
     module: {
         rules: [
             generateSSRCssStylesRuleWebpackConfigFragment({

package/dist/esm/webpack-config/webapp.csr.config.mjs

@@ -1,7 +1,7 @@
 import { NODE_ENV, runtimePathById } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
+import { merge } from 'webpack-merge';
 import { csrWebappWebpackConfigFragment } from './config-fragments/csr-webapp.fragment.mjs';
 import { devWebpackConfigFragment } from './config-fragments/dev.fragment.mjs';
 import { prodWebpackConfigFragment } from './config-fragments/prod.fragment.mjs';

package/dist/esm/webpack-config/webapp.ssr.config.mjs

@@ -1,7 +1,7 @@
 import { NODE_ENV, runtimePathById } from '@mainset/cli/runtime';
-import { merge } from '@mainset/toolkit-js';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
+import { merge } from 'webpack-merge';
 import { devWebpackConfigFragment } from './config-fragments/dev.fragment.mjs';
 import { prodWebpackConfigFragment } from './config-fragments/prod.fragment.mjs';
 import { ssrWebappWebpackConfigFragment } from './config-fragments/ssr-webapp.fragment.mjs';

package/dist/types/babel.config.d.mts

@@ -0,0 +1,21 @@
+declare const BABEL_CONFIG__BROWSER: {
+    presets: (string | (string | {
+        targets: {
+            chrome: string;
+            firefox: string;
+            safari: string;
+            edge: string;
+            ie: string;
+        };
+    })[])[];
+    plugins: never[];
+};
+declare const BABEL_CONFIG__NODE: {
+    presets: (string | (string | {
+        targets: {
+            node: string;
+        };
+    })[])[];
+    plugins: never[];
+};
+export { BABEL_CONFIG__BROWSER, BABEL_CONFIG__NODE };

package/dist/types/generate-webpack-config.d.mts

@@ -1,4 +1,4 @@
 import type { Configuration as WebpackConfig } from 'webpack';
 import type { Configuration as DevServerConfig } from 'webpack-dev-server';
-declare const generateEnvBasedWebpackConfig: (extendedWebpackConfig?: WebpackConfig & DevServerConfig) => (WebpackConfig & DevServerConfig) | WebpackConfig[];
+declare const generateEnvBasedWebpackConfig: (extendedWebpackConfig?: WebpackConfig & DevServerConfig) => WebpackConfig[] | (WebpackConfig & DevServerConfig);
 export { generateEnvBasedWebpackConfig };

package/dist/types/webpack-config/config-fragments/common-webapp.fragment.d.mts

@@ -1,2 +1,4 @@
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+declare const createPublicAssetsCopyPlugin: (outputPath: string) => CopyWebpackPlugin;
 declare const commonWebappWebpackConfigFragment: import("webpack").Configuration;
-export { commonWebappWebpackConfigFragment };
+export { commonWebappWebpackConfigFragment, createPublicAssetsCopyPlugin };

package/dist/types/webpack-config/config-fragments/module-rules/module-rules.fragment.d.mts

@@ -1,4 +1,5 @@
 import type { RuleSetRule } from 'webpack';
 declare const BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT: RuleSetRule;
+declare const SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT: RuleSetRule;
 declare const IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS: RuleSetRule[];
-export { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, };
+export { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENTS, SSR_SERVER_BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mainset/bundler-webpack",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Bundler for web apps",
   "homepage": "https://github.com/mainset/dev-stack-fe/tree/main/packages/bundler-webpack",
   "bugs": {
@@ -46,17 +46,16 @@
     "terser-webpack-plugin": "^5.6.1",
     "webpack": "^5.108.4",
     "webpack-cli": "^7.2.1",
-    "webpack-dev-server": "^6.0.0"
+    "webpack-dev-server": "^6.0.0",
+    "webpack-merge": "^6.0.1"
   },
   "devDependencies": {
-    "@mainset/dev-stack-fe": "^0.2.2",
-    "@mainset/toolkit-js": "^0.2.1",
-    "@mainset/cli": "^0.6.0"
+    "@mainset/cli": "^0.7.0",
+    "@mainset/dev-stack-fe": "^0.2.2"
   },
   "peerDependencies": {
     "@mainset/cli": ">=0.5.0 <1.0.0",
-    "@mainset/dev-stack-fe": ">=0.2.0 <1.0.0",
-    "@mainset/toolkit-js": ">=0.1.0 <1.0.0"
+    "@mainset/dev-stack-fe": ">=0.2.0 <1.0.0"
   },
   "scripts": {
     "build": "ms-cli source-code --exec compile",

package/src/@types/bundler.d.ts

@@ -1,9 +1,47 @@
+// NOTE: keep in sync with the module rules in
+// ./src/webpack-config/config-fragments/module-rules/module-rules.chunk.mts —
+// declaring a pattern the bundler does not resolve makes an import type-check
+// and then fail at build time.
+// !IMPORTANT: TypeScript picks a wildcard by longest prefix, and every pattern
+// below has an empty prefix — so ties are won by the FIRST declaration. The
+// specific patterns must stay above the generic ones, otherwise
+// {styles.module.css} resolves as a plain stylesheet and {icon.source.svg} as a
+// {*.svg} asset URL.
+
+// CSS Modules: map of local class name to the generated one
+declare module '*.module.css' {
+  const styles: { [className: string]: string };
+  export = styles;
+}
 declare module '*.module.scss' {
   const styles: { [className: string]: string };
   export = styles;
 }
+declare module '*.module.sass' {
+  const styles: { [className: string]: string };
+  export = styles;
+}
 
+// NOTE: original, unprocessed SVG content
 declare module '*.source.svg' {
   const content: string;
   export default content;
 }
+
+// NOTE: plain stylesheets are imported for their side effect only
+// ({import './styles.css'}), so they expose no meaningful binding. They need a
+// declaration at all only once {noUncheckedSideEffectImports} is enabled —
+// TypeScript does not check bare side-effect imports by default.
+declare module '*.css';
+declare module '*.scss';
+declare module '*.sass';
+
+// NOTE: {asset/resource} — emits the file and exports its public URL
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}