[Blazor] Centralize our JS build setup

src/Components/CustomElements/src/js/rollup.config.mjs

@@ -1,74 +1,16 @@
 import path from 'path';
-import typescript from '@rollup/plugin-typescript';
-import terser from '@rollup/plugin-terser';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import replace from '@rollup/plugin-replace';
-import filesize from 'rollup-plugin-filesize';
 import { fileURLToPath } from 'url';
+import createBaseConfig from '../../../Shared.JS/rollup.config.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-console.log(__dirname);
-
-export default ({ environment }) => {
-
-  var inputOutputMap = {
+export default createBaseConfig({
+  inputOutputMap: {
     'Microsoft.AspNetCore.Components.CustomElements.lib.module': './BlazorCustomElements.ts',
-  };
-
-  /**
-   * @type {import('rollup').RollupOptions}
-   */
-  const baseConfig = {
-    output: {
-      dir: path.join(__dirname, '/dist', environment === 'development' ? '/Debug' : '/Release'),
-      format: 'es',
-      sourcemap: true,
-      entryFileNames: '[name].js',
-      sourcemap: environment === 'development' ? 'inline' : false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: path.join(__dirname, 'tsconfig.json')
-      }),
-      replace({
-        'process.env.NODE_DEBUG': 'false',
-        'Platform.isNode': 'false',
-        preventAssignment: true
-      }),
-      terser({
-        compress: {
-          passes: 3
-        },
-        mangle: true,
-        module: false,
-        format: {
-          ecma: 2020
-        },
-        keep_classnames: false,
-        keep_fnames: false,
-        toplevel: true
-      })
-      ,
-      environment !== 'development' && filesize({ showMinifiedSize: true, showGzippedSize: true, showBrotliSize: true })
-    ],
-    treeshake: 'smallest',
-    logLevel: 'silent'
-  };
-
-  return Object.entries(inputOutputMap).map(([output, input]) => {
-    const config = {
-      ...baseConfig,
-      output: {
-        ...baseConfig.output,
-      },
-      input: { [output]: input }
-    };
-
-    return config;
-  });
-};
+  },
+  dir: __dirname,
+  updateConfig: (config, environment, _, input) => {
+    config.output.format = 'es';
+  }
+});

src/Components/CustomElements/src/js/tsconfig.json

@@ -1,9 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "lib": [ "DOM", "ES2022" ],
-    "strict": true,
-    "forceConsistentCasingInFileNames": true
-  }
+  "extends": "../../../Shared.JS/tsconfig.json",
 }

src/Components/Shared.JS/rollup.config.mjs

@@ -0,0 +1,92 @@
+import path from 'path';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import filesize from 'rollup-plugin-filesize';
+import { env } from 'process';
+
+/**
+ * @callback UpdateConfigFunction
+ * @param {import('rollup').RollupOptions} config - The Rollup configuration to update.
+ * @param {'development' | 'production' } environment - The environment we are compiling for ().
+ * @param {string} output - The bundle we are generating.
+ * @param {string} input - The entry point for the bundle.
+ */
+
+/**
+ * @typedef {Object} BaseOptions
+ * @property {Object.<string, string>} inputOutputMap - An object that maps a string key to a string.
+ * @property {string} dir - The directory for the config that we are creating.
+ * @property {UpdateConfigFunction} updateConfig - A function that updates the configuration.
+ */
+
+/**
+ *
+ * @param {BaseOptions} options
+ * @returns
+ */
+export default function createBaseConfig({ inputOutputMap, dir, updateConfig }) {
+
+  return ({ environment }) => {
+
+    /**
+     * @type {import('rollup').RollupOptions}
+     */
+    const baseConfig = {
+      output: {
+        dir: path.join(dir, '/dist', environment === 'development' ? '/Debug' : '/Release'),
+        format: 'cjs',
+        sourcemap: environment === 'development' ? true : false,
+        entryFileNames: '[name].js',
+      },
+      plugins: [
+        resolve(),
+        commonjs(),
+        typescript({
+          tsconfig: path.join(dir, 'tsconfig.json')
+        }),
+        replace({
+          'process.env.NODE_DEBUG': 'false',
+          'Platform.isNode': 'false',
+          preventAssignment: true
+        }),
+        terser({
+          compress: {
+            passes: 3
+          },
+          mangle: true,
+          module: false,
+          format: {
+            ecma: 2020
+          },
+          keep_classnames: false,
+          keep_fnames: false,
+          toplevel: true
+        }),
+        // Check the ContinuousIntegrationBuild environment variable to determine if we should show the file size.
+        env.ContinuousIntegrationBuild !== 'true' && environment !== 'development' && filesize({ showMinifiedSize: true, showGzippedSize: true, showBrotliSize: true })
+      ],
+      treeshake: 'smallest',
+      logLevel: 'silent'
+    };
+
+    return Object.entries(inputOutputMap).map(([output, input]) => {
+      const config = {
+        ...baseConfig,
+        output: {
+          ...baseConfig.output,
+        },
+        plugins: [
+          ...baseConfig.plugins
+        ],
+        input: { [output]: input }
+      };
+
+      updateConfig(config, environment, output, input);
+
+      return config;
+    });
+  };
+};

src/Components/Shared.JS/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": [ "DOM", "ES2022" ],
+    "strict": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

src/Components/Web.JS/rollup.config.mjs

@@ -1,76 +1,19 @@
 import path from 'path';
-import typescript from '@rollup/plugin-typescript';
-import terser from '@rollup/plugin-terser';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import replace from '@rollup/plugin-replace';
-import filesize from 'rollup-plugin-filesize';
 import { fileURLToPath } from 'url';
+import createBaseConfig from '../Shared.JS/rollup.config.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-console.log(__dirname);
-
-export default ({ environment }) => {
-
-  var inputOutputMap = {
+export default createBaseConfig({
+  inputOutputMap: {
     'blazor.server': './src/Boot.Server.ts',
     'blazor.web': './src/Boot.Web.ts',
     'blazor.webassembly': './src/Boot.WebAssembly.ts',
     'blazor.webview': './src/Boot.WebView.ts',
-  };
-
-  /**
-   * @type {import('rollup').RollupOptions}
-   */
-  const baseConfig = {
-    output: {
-      dir: path.join(__dirname, '/dist', environment === 'development' ? '/Debug' : '/Release'),
-      format: 'cjs',
-      sourcemap: true,
-      entryFileNames: '[name].js',
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: path.join(__dirname, 'tsconfig.json')
-      }),
-      replace({
-        'process.env.NODE_DEBUG': 'false',
-        'Platform.isNode': 'false',
-        preventAssignment: true
-      }),
-      terser({
-        compress: {
-          passes: 3
-        },
-        mangle: true,
-        module: false,
-        format: {
-          ecma: 2020
-        },
-        keep_classnames: false,
-        keep_fnames: false,
-        toplevel: true
-      })
-      ,
-      environment !== 'development' && filesize({ showMinifiedSize: true, showGzippedSize: true, showBrotliSize: true })
-    ],
-    treeshake: 'smallest',
-    logLevel: 'silent'
-  };
-
-  return Object.entries(inputOutputMap).map(([output, input]) => {
-    const config = {
-      ...baseConfig,
-      output: {
-        ...baseConfig.output,
-      },
-      input: { [output]: input }
-    };
-
+  },
+  dir: __dirname,
+  updateConfig: (config, environment, _, input) => {
     if (environment === 'development') {
       if (input.includes("WebView")) {
         config.output.sourcemap = 'inline';
@@ -80,7 +23,5 @@ export default ({ environment }) => {
     } else {
       config.output.sourcemap = false;
     }
-
-    return config;
-  });
-};
+  }
+});

src/Components/Web.JS/tsconfig.json

@@ -1,12 +1,9 @@
 {
+  "extends": "../Shared.JS/tsconfig.json",
   "compilerOptions": {
-    "moduleResolution": "node",
     "noImplicitAny": false,
     "noEmitOnError": true,
     "removeComments": false,
-    "target": "es2020",
-    "module": "es2020",
-    "lib": ["es2020", "dom"],
-    "strict": true,
-  }
+    "useDefineForClassFields": false
+  },
 }

src/Components/WebAssembly/Authentication.Msal/src/Interop/rollup.config.mjs

@@ -1,74 +1,16 @@
 import path from 'path';
-import typescript from '@rollup/plugin-typescript';
-import terser from '@rollup/plugin-terser';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import replace from '@rollup/plugin-replace';
-import filesize from 'rollup-plugin-filesize';
 import { fileURLToPath } from 'url';
+import createBaseConfig from '../../../../Shared.JS/rollup.config.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-console.log(__dirname);
-
-export default ({ environment }) => {
-
-  var inputOutputMap = {
+export default createBaseConfig({
+  inputOutputMap: {
     'AuthenticationService': './AuthenticationService.ts',
-  };
-
-  /**
-   * @type {import('rollup').RollupOptions}
-   */
-  const baseConfig = {
-    output: {
-      dir: path.join(__dirname, '/dist', environment === 'development' ? '/Debug' : '/Release'),
-      format: 'iife',
-      sourcemap: true,
-      entryFileNames: '[name].js',
-      sourcemap: environment === 'development' ? 'inline' : false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: path.join(__dirname, 'tsconfig.json')
-      }),
-      replace({
-        'process.env.NODE_DEBUG': 'false',
-        'Platform.isNode': 'false',
-        preventAssignment: true
-      }),
-      terser({
-        compress: {
-          passes: 3
-        },
-        mangle: true,
-        module: false,
-        format: {
-          ecma: 2020
-        },
-        keep_classnames: false,
-        keep_fnames: false,
-        toplevel: true
-      })
-      ,
-      environment !== 'development' && filesize({ showMinifiedSize: true, showGzippedSize: true, showBrotliSize: true })
-    ],
-    treeshake: 'smallest',
-    logLevel: 'silent'
-  };
-
-  return Object.entries(inputOutputMap).map(([output, input]) => {
-    const config = {
-      ...baseConfig,
-      output: {
-        ...baseConfig.output,
-      },
-      input: { [output]: input }
-    };
-
-    return config;
-  });
-};
+  },
+  dir: __dirname,
+  updateConfig: (config, environment, _, input) => {
+    config.output.format = 'iife';
+  }
+});