[Blazor] Update other packages to bundle with rollup (#53117)

* Updated all other "JS" packages in compoents to bundle with rollup instead of webpack.
* CustomElements uses "ES" format as its a JSInitializer.
* AuthenticationService for msal and webassembly auth use "iife" format (immediately invoked function expression) since that's what's backwards compatible with the way they were imported.

Author: javiercn

package-lock.json

@@ -5,25 +5,18 @@
     "clean": "rimraf ./dist/Debug ./dist/Release",
     "prebuild": "npm run clean",
     "build": "npm run build:debug && npm run build:production",
-    "build:debug": "webpack --mode development --config ./webpack.config.js",
-    "build:production": "webpack --mode production --config ./webpack.config.js"
+    "build:debug": "rollup -c --environment development --forceExit",
+    "build:production": "rollup -c --environment production --forceExit"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "eslint": "^8.16.0",
-    "inspectpack": "^4.7.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "rimraf": "^3.0.2",
-    "terser": "^5.14.2",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.4.2",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2"
-  },
-  "resolutions": {
-    "ansi-regex": "5.0.1",
-    "minimist": ">=1.2.6"
+    "rollup": "^4.9.2",
+    "rollup-plugin-filesize": "^10.0.0",
+    "typescript": "^5.3.3"
   }
 }

src/Components/CustomElements/src/js/package.json

@@ -0,0 +1,74 @@
+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';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+console.log(__dirname);
+
+export default ({ environment }) => {
+
+  var 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;
+  });
+};

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

@@ -1,11 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2019",
-    "module": "commonjs",
-    "lib": [ "DOM", "ES2019" ],
-    "sourceMap": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": [ "DOM", "ES2022" ],
     "strict": true,
-    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true
   }
 }