Skip to content

Commit

Permalink
noahdarveau/Rollup changes for treeshaking (#2513)
Browse files Browse the repository at this point in the history
* Added Rollup to the library to build a tree-shakable esm version of the library and updated pipeline appropriately.
  • Loading branch information
noahdarveau-MSFT committed Sep 25, 2024
1 parent 57ea793 commit bb17ff5
Show file tree
Hide file tree
Showing 17 changed files with 987 additions and 102 deletions.
2 changes: 1 addition & 1 deletion apps/teams-test-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
26 changes: 26 additions & 0 deletions apps/tree-shaking-test-app/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
28 changes: 28 additions & 0 deletions apps/tree-shaking-test-app/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -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,
};
5 changes: 5 additions & 0 deletions apps/tree-shaking-test-app/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { barCode } from 'testlibraryfortreeshaking';
import { geoLocation } from '@microsoft/teams-js';
barCode.hasPermission();
geoLocation.requestPermission();
geoLocation.map.isSupported();
28 changes: 28 additions & 0 deletions apps/tree-shaking-test-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"
]
}
30 changes: 30 additions & 0 deletions apps/tree-shaking-test-app/webpack.config.cjs
Original file line number Diff line number Diff line change
@@ -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'],
},
};
2 changes: 1 addition & 1 deletion apps/typed-dependency-tester/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Added a Rollup built bundle of Teams-JS",
"packageName": "@microsoft/teams-js",
"email": "[email protected]",
"dependentChangeType": "patch"
}
9 changes: 9 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
File renamed without changes.
File renamed without changes.
21 changes: 18 additions & 3 deletions packages/teams-js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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/**",
Expand Down
58 changes: 58 additions & 0 deletions packages/teams-js/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -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',
],
},
};
4 changes: 2 additions & 2 deletions packages/teams-js/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
}),
Expand All @@ -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-.*/);
});
Expand All @@ -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',
},
],
Expand Down
Loading

0 comments on commit bb17ff5

Please sign in to comment.