noahdarveau/Rollup changes for treeshaking (#2513)

noahdarveau-MSFT · web-flow · commit bb17ff5dbbe6 · 2024-09-25T21:16:33.000Z
* Added Rollup to the library to build a tree-shakable esm version of the library and updated pipeline appropriately.
diff --git a/apps/teams-test-app/package.json b/apps/teams-test-app/package.json
@@ -10,7 +10,7 @@
     "build:CDN": "pnpm lint && webpack --config webpack.cdn.config.js",
     "build:local": "pnpm lint && webpack --config webpack.local.config.js && pnpm copy",
     "clean": "rimraf ./build",
-    "copy": "shx cp ../../packages/teams-js/dist/MicrosoftTeams.min.js ./build/ && shx cp ../../packages/teams-js/dist/MicrosoftTeams.min.js.map ./build/",
+    "copy": "shx cp ../../packages/teams-js/dist/umd/MicrosoftTeams.min.js ./build/ && shx cp ../../packages/teams-js/dist/umd/MicrosoftTeams.min.js.map ./build/",
     "lint": "pnpm eslint ./src --max-warnings 0 --fix --ext .tsx",
     "start": "pnpm start:bundle",
     "start:bundle": "webpack serve",
diff --git a/apps/tree-shaking-test-app/package.json b/apps/tree-shaking-test-app/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tree-shaking-test-app",
+  "private": true,
+  "author": "Noah",
+  "description": "Test app to test the tree-shakability of TeamsJS",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "type": "module",
+  "scripts": {
+    "build-rollup": "pnpm clean && rollup --c",
+    "build-webpack": "webpack",
+    "clean": "rimraf ./dist"
+  },
+  "dependencies": {
+    "@microsoft/teams-js": "workspace:*"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-terser": "0.4.4",
+    "rollup": "^4.18.0",
+    "webpack": "^5.18.0",
+    "webpack-cli": "^4.3.1",
+    "testlibraryfortreeshaking": "^1.0.24"
+  }
+}
diff --git a/apps/tree-shaking-test-app/rollup.config.mjs b/apps/tree-shaking-test-app/rollup.config.mjs
@@ -0,0 +1,28 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+
+// rollup.config.mjs
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/bundle.js',
+      format: 'es',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/bundle.min.js',
+      format: 'es',
+      plugins: [terser()],
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    nodeResolve({
+      extension: ['.js', '.ts', '.d.ts', '.json'],
+    }),
+    typescript(),
+  ],
+  treeshake: true,
+};
diff --git a/apps/tree-shaking-test-app/src/index.ts b/apps/tree-shaking-test-app/src/index.ts
@@ -0,0 +1,5 @@
+import { barCode } from 'testlibraryfortreeshaking';
+import { geoLocation } from '@microsoft/teams-js';
+barCode.hasPermission();
+geoLocation.requestPermission();
+geoLocation.map.isSupported();
diff --git a/apps/tree-shaking-test-app/tsconfig.json b/apps/tree-shaking-test-app/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "es6",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "sourceMap": true,
+    "outDir": "./dist"
+  },
+  "include": ["src"],
+  "exclude": [
+    "**/build/*",
+    "build",
+    "node_modules",
+    "**/*.test.*",
+    "webpack.config.js",
+    "webpack.cdn.config.js",
+    "webpack.cdnV1.config.js",
+    "webpack.local.config.js"
+  ]
+}
diff --git a/apps/tree-shaking-test-app/webpack.config.cjs b/apps/tree-shaking-test-app/webpack.config.cjs
@@ -0,0 +1,30 @@
+/* eslint @typescript-eslint/no-var-requires: off*/
+/* eslint-disable no-undef */
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'development',
+  optimization: {
+    usedExports: true,
+    innerGraph: true,
+    sideEffects: false,
+  },
+  devtool: false,
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+};
diff --git a/apps/typed-dependency-tester/package.json b/apps/typed-dependency-tester/package.json
@@ -6,7 +6,7 @@
   "version": "0.0.1",
   "scripts": {
     "build": "pnpm i && pnpm copy && pnpm tsc && pnpm clean",
-    "copy": "cp ./node_modules/@microsoft/teams-js/dist/MicrosoftTeams.d.ts ./ || xcopy .\\node_modules\\@microsoft\\teams-js\\dist\\MicrosoftTeams.d.ts .\\ /Y",
+    "copy": "cp ./node_modules/@microsoft/teams-js/dist/umd/MicrosoftTeams.d.ts ./ || xcopy .\\node_modules\\@microsoft\\teams-js\\dist\\umd\\MicrosoftTeams.d.ts .\\ /Y",
     "clean": "rimraf node_modules && rimraf MicrosoftTeams.d.ts"
   },
   "dependencies": {},
diff --git a/change/@microsoft-teams-js-87505803-bfad-44bd-a44d-f2ba244c46ad.json b/change/@microsoft-teams-js-87505803-bfad-44bd-a44d-f2ba244c46ad.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added a Rollup built bundle of Teams-JS",
+  "packageName": "@microsoft/teams-js",
+  "email": "noahdarveau@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -41,6 +41,12 @@
     "@mixer/webpack-bundle-compare": "^0.1.1",
     "@next/eslint-plugin-next": "^14.2.4",
     "@octokit/core": "^3.6.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "5.0.7",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.5.2",
     "@types/jscodeshift": "^0.11.11",
@@ -80,9 +86,12 @@
     "path": "^0.12.7",
     "prettier": "^3.3.2",
     "rimraf": "^5.0.7",
+    "rollup": "^3.21.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "shx": "^0.3.4",
     "style-loader": "^3.3.4",
     "ts-jest": "^29.1.2",
+    "tslib": "^2.3.1",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typedoc": "^0.24.8",
diff --git a/packages/teams-js/.eslintrc.cjs b/packages/teams-js/.eslintrc.cjs
diff --git a/packages/teams-js/jest.config.cjs b/packages/teams-js/jest.config.cjs
diff --git a/packages/teams-js/package.json b/packages/teams-js/package.json
@@ -8,10 +8,14 @@
     "type": "git",
     "url": "https://github.com/OfficeDev/microsoft-teams-library-js"
   },
-  "main": "./dist/MicrosoftTeams.min.js",
-  "typings": "./dist/MicrosoftTeams.d.ts",
+  "main": "./dist/umd/MicrosoftTeams.min.js",
+  "typings": "./dist/umd/MicrosoftTeams.d.ts",
+  "module": "./dist/esm/packages/teams-js/src/index.js",
+  "type": "module",
   "scripts": {
-    "build": "pnpm lint && webpack && pnpm docs:validate",
+    "build": "pnpm clean && pnpm lint && pnpm build-rollup && pnpm build-webpack && pnpm docs:validate",
+    "build-rollup": "pnpm clean && rollup -c",
+    "build-webpack": "webpack",
     "clean": "rimraf ./dist",
     "docs": "pnpm typedoc",
     "docs:validate": "pnpm typedoc --emit none",
@@ -27,6 +31,17 @@
   "devDependencies": {
     "@types/debug": "^4.1.7"
   },
+  "sideEffects": [
+    "src/internal/communication.ts",
+    "src/internal/nestedAppAuthUtils.ts",
+    "src/internal/utils.ts",
+    "src/internal/videoEffectsUtils.ts",
+    "src/private/constants.ts",
+    "src/private/interfaces.ts",
+    "src/public/constants.ts",
+    "src/public/handlers.ts",
+    "src/public/interfaces.ts"
+  ],
   "license": "MIT",
   "files": [
     "dist/**",
diff --git a/packages/teams-js/rollup.config.mjs b/packages/teams-js/rollup.config.mjs
@@ -0,0 +1,58 @@
+// rollup.config.mjs
+
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+
+import version from './package.json' assert { type: 'json' };
+
+export default {
+  input: './src/index.ts',
+  output: {
+    dir: 'dist/esm',
+    name: '@microsoft/teams-js',
+    format: 'es',
+    preserveModules: true,
+    entryFileNames: '[name].js',
+    sourcemap: false,
+    plugins: [terser()],
+    globals: {
+      buffer: 'Buffer',
+      tty: 'tty',
+      util: 'util',
+      os: 'os',
+    },
+  },
+  preserveEntrySignatures: 'strict',
+  plugins: [
+    nodeResolve({
+      extensions: ['.js', '.ts', '.d.ts', '.json'],
+    }),
+    replace({
+      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      PACKAGE_VERSION: JSON.stringify(version.version),
+    }),
+    typescript(),
+    json(),
+    commonjs(),
+    nodePolyfills(),
+  ],
+  treeshake: {
+    moduleSideEffects: [
+      'src/internal/communication.ts',
+      'src/internal/nestedAppAuthUtils.ts',
+      'src/internal/utils.ts',
+      'src/internal/videoEffectsUtils.ts',
+      'src/private/constants.ts',
+      'src/private/interfaces.ts',
+      'src/public/constants.ts',
+      'src/public/handlers.ts',
+      'src/public/interfaces.ts',
+    ],
+  },
+};
diff --git a/packages/teams-js/tsconfig.json b/packages/teams-js/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.common.json",
   "compilerOptions": {
-    "outDir": "./dist",
-    "declarationDir": "./dts",
+    "outDir": "./dist/esm",
+    "declarationDir": "./dist/esm/packages/teams-js/dts",
     "lib": ["DOM", "ES2015", "ES5"],
     "module": "es6",
     "moduleResolution": "node",
diff --git a/packages/teams-js/webpack.config.cjs b/packages/teams-js/webpack.config.cjs
@@ -23,7 +23,7 @@ module.exports = {
     filename: '[name].js',
     // the following setting is required for SRI to work
     crossOriginLoading: 'anonymous',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'dist/umd'),
     library: {
       name: libraryName,
       type: 'umd',
@@ -75,8 +75,8 @@ module.exports = {
 
     new DtsBundleWebpack({
       name: '@microsoft/teams-js',
-      main: 'dts/index.d.ts',
-      out: '~/dist/MicrosoftTeams.d.ts',
+      main: './dist/esm/packages/teams-js/dts',
+      out: '~/dist/umd/MicrosoftTeams.d.ts',
       removeSource: true,
       outputAsModuleFolder: true,
     }),
@@ -98,7 +98,7 @@ module.exports = {
     {
       apply: (compiler) => {
         compiler.hooks.done.tap('wsi-test', () => {
-          const manifest = JSON.parse(readFileSync(join(__dirname, 'dist/MicrosoftTeams-manifest.json'), 'utf-8'));
+          const manifest = JSON.parse(readFileSync(join(__dirname, 'dist/umd/MicrosoftTeams-manifest.json'), 'utf-8'));
           // If for some reason hash was not generated for the assets, this test will fail in build.
           expect(manifest['MicrosoftTeams.min.js'].integrity).toMatch(/sha384-.*/);
         });
@@ -110,7 +110,7 @@ module.exports = {
         onEnd: {
           copy: [
             {
-              source: './dist/MicrosoftTeams.min.js',
+              source: './dist/umd/MicrosoftTeams.min.js',
               destination: '../../apps/blazor-test-app/wwwroot/js/MicrosoftTeams.min.js',
             },
           ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tools/yaml-templates/build-test-publish.yml b/tools/yaml-templates/build-test-publish.yml
