From eeb1794d0f58730678f55670962bea36758be46e Mon Sep 17 00:00:00 2001 From: James Burnside Date: Fri, 26 Mar 2021 13:58:17 -0700 Subject: [PATCH] Add CommonJS Support to UI component package (#93) --- .eslintignore | 7 + .github/workflows/ci.yml | 2 +- ...-55d952e0-991d-41af-a63e-b473c24e8782.json | 7 + ...-ae36604a-b594-49a4-a49a-5d0418114938.json | 7 + ...-256f361d-3142-4a1d-b3a6-c3f7f876705f.json | 7 + ...-8a1c82a2-9740-4afd-8ac3-2a3ba2569425.json | 7 + common/api-extractor/api-extractor.json | 2 +- common/config/rush/command-line.json | 3 +- common/config/rush/pnpm-lock.yaml | 474 +++++++++++------- docs/README.md | 1 + docs/contributing-guide/6. submitting-a-pr.md | 4 +- docs/infrastructure/api-extractor.md | 1 - docs/infrastructure/rollup.md | 43 ++ packages/acs-calling-declarative/package.json | 12 +- .../acs-calling-declarative/tsconfig.json | 2 +- packages/acs-chat-declarative/package.json | 12 +- packages/acs-chat-declarative/tsconfig.json | 2 +- packages/acs-chat-selector/package.json | 12 +- packages/acs-chat-selector/tsconfig.json | 2 +- packages/communication-ui/.eslintrc.js | 2 +- packages/communication-ui/package.json | 25 +- packages/communication-ui/rollup.config.js | 22 + .../communication-ui/src/components/index.ts | 11 +- .../GroupCall/ConfigurationScreen.tsx | 2 +- .../composites/GroupCall/RemoteVideoTile.tsx | 3 +- .../composites/OneToOneCall/CallListener.tsx | 3 +- .../OneToOneCall/MakeCallScreen.tsx | 2 +- .../OneToOneCall/RemoteVideoTile.tsx | 3 +- .../consumers/MapToCallControlBarProps.ts | 10 +- .../src/hooks/useFetchThread.test.ts | 2 +- .../src/hooks/useFetchThread.ts | 2 +- .../src/hooks/useFetchThreadMembers.test.ts | 14 +- .../src/hooks/useFetchThreadMembers.ts | 3 +- .../src/hooks/useSubscribeMessage.test.ts | 9 +- .../src/hooks/useSubscribeMessage.ts | 3 +- .../src/hooks/useSubscribeReadReceipt.ts | 2 +- .../useSubscribeTypingNotification.test.ts | 2 +- .../hooks/useSubscribeTypingNotification.ts | 2 +- .../src/hooks/useUpdateThreadTopicName.ts | 2 +- .../src/providers/ChatProvider.tsx | 31 +- .../src/providers/ChatProviderHelper.tsx | 43 ++ .../src/providers/ChatThreadProvider.tsx | 2 +- .../src/providers/IncomingCallsProvider.tsx | 2 +- .../communication-ui/src/providers/index.ts | 1 + .../src/utils/TypeConverter.ts | 2 +- packages/communication-ui/tsconfig.json | 16 +- rush.json | 10 +- samples/Calling/package.json | 6 +- samples/Chat/package.json | 6 +- samples/OneToOneCall/package.json | 8 +- samples/Server/package.json | 2 +- 51 files changed, 551 insertions(+), 309 deletions(-) create mode 100644 .eslintignore create mode 100644 change/@azure-acs-calling-declarative-55d952e0-991d-41af-a63e-b473c24e8782.json create mode 100644 change/@azure-acs-chat-declarative-ae36604a-b594-49a4-a49a-5d0418114938.json create mode 100644 change/@azure-acs-chat-selector-256f361d-3142-4a1d-b3a6-c3f7f876705f.json create mode 100644 change/@azure-communication-ui-8a1c82a2-9740-4afd-8ac3-2a3ba2569425.json create mode 100644 docs/infrastructure/rollup.md create mode 100644 packages/communication-ui/rollup.config.js create mode 100644 packages/communication-ui/src/providers/ChatProviderHelper.tsx diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000000..1972d4bfba6 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,7 @@ +# Add top level eslintignore file to be picked up by the eslint vscode extension +docs/ +public/ +dist/ +node_modules/ +storybook-static/ +scripts/ \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d9e2946e6ee..7a30343c27f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -75,7 +75,7 @@ jobs: # Deploy Storybook - only perform this step on main branch CI - name: Deploy Storybook if: github.ref == 'refs/heads/main' - run: npm run deploy-storybook -- --ci + run: rushx deploy-storybook -- --ci working-directory: ./packages/communication-ui env: GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }} diff --git a/change/@azure-acs-calling-declarative-55d952e0-991d-41af-a63e-b473c24e8782.json b/change/@azure-acs-calling-declarative-55d952e0-991d-41af-a63e-b473c24e8782.json new file mode 100644 index 00000000000..eab5a0c8b50 --- /dev/null +++ b/change/@azure-acs-calling-declarative-55d952e0-991d-41af-a63e-b473c24e8782.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update to remove usage of npm run", + "packageName": "@azure/acs-calling-declarative", + "email": "mail@jamesburnside.com", + "dependentChangeType": "none" +} diff --git a/change/@azure-acs-chat-declarative-ae36604a-b594-49a4-a49a-5d0418114938.json b/change/@azure-acs-chat-declarative-ae36604a-b594-49a4-a49a-5d0418114938.json new file mode 100644 index 00000000000..c9e2e2aa154 --- /dev/null +++ b/change/@azure-acs-chat-declarative-ae36604a-b594-49a4-a49a-5d0418114938.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update to remove usage of npm run", + "packageName": "@azure/acs-chat-declarative", + "email": "mail@jamesburnside.com", + "dependentChangeType": "none" +} diff --git a/change/@azure-acs-chat-selector-256f361d-3142-4a1d-b3a6-c3f7f876705f.json b/change/@azure-acs-chat-selector-256f361d-3142-4a1d-b3a6-c3f7f876705f.json new file mode 100644 index 00000000000..09e0d4f549b --- /dev/null +++ b/change/@azure-acs-chat-selector-256f361d-3142-4a1d-b3a6-c3f7f876705f.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update to remove usage of npm run", + "packageName": "@azure/acs-chat-selector", + "email": "mail@jamesburnside.com", + "dependentChangeType": "none" +} diff --git a/change/@azure-communication-ui-8a1c82a2-9740-4afd-8ac3-2a3ba2569425.json b/change/@azure-communication-ui-8a1c82a2-9740-4afd-8ac3-2a3ba2569425.json new file mode 100644 index 00000000000..6a339fdc086 --- /dev/null +++ b/change/@azure-communication-ui-8a1c82a2-9740-4afd-8ac3-2a3ba2569425.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add support for CommonJS", + "packageName": "@azure/communication-ui", + "email": "mail@jamesburnside.com", + "dependentChangeType": "patch" +} diff --git a/common/api-extractor/api-extractor.json b/common/api-extractor/api-extractor.json index 3e4c0bb0fc3..ade3ee0add5 100644 --- a/common/api-extractor/api-extractor.json +++ b/common/api-extractor/api-extractor.json @@ -1,6 +1,6 @@ { "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "mainEntryPointFilePath": "/dist/index.d.ts", + "mainEntryPointFilePath": "/dist/dist-esm/index.d.ts", "apiReport": { "enabled": true, "reportFolder": "/review/" diff --git a/common/config/rush/command-line.json b/common/config/rush/command-line.json index 2caa60f04ee..d862cc41206 100644 --- a/common/config/rush/command-line.json +++ b/common/config/rush/command-line.json @@ -51,7 +51,8 @@ "commandKind": "bulk", "name": "build:watch", "summary": "Trigger incremental build with watch command.", - "enableParallelism": false + "enableParallelism": false, + "watchForChanges": true } ], "parameters": [] diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 132046be94f..9c09f6f79c1 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -16,15 +16,18 @@ dependencies: '@microsoft/api-documenter': 7.12.12 '@microsoft/api-extractor': 7.13.2 '@octokit/rest': 18.0.15 + '@rollup/plugin-commonjs': 17.1.0_rollup@2.42.4 + '@rollup/plugin-json': 4.1.0_rollup@2.42.4 + '@rollup/plugin-node-resolve': 11.2.0_rollup@2.42.4 '@rush-temp/acs-calling-declarative': file:projects/acs-calling-declarative.tgz_prettier@2.0.5+ts-node@9.1.1 - '@rush-temp/acs-calling-sample': file:projects/acs-calling-sample.tgz_570bf42e92a70fb216c5cd4d5ed668ef '@rush-temp/acs-chat-declarative': file:projects/acs-chat-declarative.tgz_prettier@2.0.5+ts-node@9.1.1 - '@rush-temp/acs-chat-sample': file:projects/acs-chat-sample.tgz_40b0c9f7a7a0fac66e4b6fcf06de2a42 '@rush-temp/acs-chat-selector': file:projects/acs-chat-selector.tgz_prettier@2.0.5 - '@rush-temp/acs-one-to-one-call-sample': file:projects/acs-one-to-one-call-sample.tgz_570bf42e92a70fb216c5cd4d5ed668ef - '@rush-temp/acs-server-sample': file:projects/acs-server-sample.tgz + '@rush-temp/calling': file:projects/calling.tgz_570bf42e92a70fb216c5cd4d5ed668ef + '@rush-temp/chat': file:projects/chat.tgz_40b0c9f7a7a0fac66e4b6fcf06de2a42 '@rush-temp/communication-ui': file:projects/communication-ui.tgz_webpack-cli@4.5.0 + '@rush-temp/one-to-one-call': file:projects/one-to-one-call.tgz_570bf42e92a70fb216c5cd4d5ed668ef '@rush-temp/release-tools': file:projects/release-tools.tgz_typescript@4.1.5 + '@rush-temp/server': file:projects/server.tgz '@storybook/addon-actions': 6.1.21_30bc4764d4ba778218056aab0be8023f '@storybook/addon-docs': 6.1.21_025c95869cb55e8d142f5246a0455b6d '@storybook/addon-essentials': 6.1.21_489c05363155b6add536e1fef5b4fe59 @@ -116,6 +119,9 @@ dependencies: regenerator-runtime: 0.13.7 reselect: 4.0.0 rimraf: 2.7.1 + rollup: 2.42.4 + rollup-plugin-sourcemaps: 0.6.3_9135ee81d9218d0e99b56082525729b5 + rollup-plugin-svg: 2.0.0 source-map-explorer: 2.5.2 storybook-docs-toc: 1.3.1_55ac82b1aedfe80ed374987a417300da styled-components: 5.2.1_9debf3d425c3eafb0518d6c329d076f5 @@ -3678,6 +3684,48 @@ packages: react-dom: 15.x || 16.x || 16.4.0-alpha.0911da3 resolution: integrity: sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA== + /@rollup/plugin-commonjs/17.1.0_rollup@2.42.4: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.42.4 + commondir: 1.0.1 + estree-walker: 2.0.2 + glob: 7.1.6 + is-reference: 1.2.1 + magic-string: 0.25.7 + resolve: 1.20.0 + rollup: 2.42.4 + dev: false + engines: + node: '>= 8.0.0' + peerDependencies: + rollup: ^2.30.0 + resolution: + integrity: sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew== + /@rollup/plugin-json/4.1.0_rollup@2.42.4: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.42.4 + rollup: 2.42.4 + dev: false + peerDependencies: + rollup: ^1.20.0 || ^2.0.0 + resolution: + integrity: sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw== + /@rollup/plugin-node-resolve/11.2.0_rollup@2.42.4: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.42.4 + '@types/resolve': 1.17.1 + builtin-modules: 3.2.0 + deepmerge: 4.2.2 + is-module: 1.0.0 + resolve: 1.20.0 + rollup: 2.42.4 + dev: false + engines: + node: '>= 10.0.0' + peerDependencies: + rollup: ^1.20.0||^2.0.0 + resolution: + integrity: sha512-qHjNIKYt5pCcn+5RUBQxK8krhRvf1HnyVgUCcFFcweDS7fhkOLZeYh0mhHK6Ery8/bb9tvN/ubPzmfF0qjDCTA== /@rollup/plugin-node-resolve/7.1.3_rollup@1.32.1: dependencies: '@rollup/pluginutils': 3.1.0_rollup@1.32.1 @@ -3716,6 +3764,19 @@ packages: rollup: ^1.20.0||^2.0.0 resolution: integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== + /@rollup/pluginutils/3.1.0_rollup@2.42.4: + dependencies: + '@types/estree': 0.0.39 + estree-walker: 1.0.1 + picomatch: 2.2.2 + rollup: 2.42.4 + dev: false + engines: + node: '>= 8.0.0' + peerDependencies: + rollup: ^1.20.0||^2.0.0 + resolution: + integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== /@rushstack/node-core-library/3.36.0: dependencies: '@types/node': 10.17.13 @@ -5067,6 +5128,12 @@ packages: dev: false resolution: integrity: sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ== + /@types/resolve/1.17.1: + dependencies: + '@types/node': 14.14.35 + dev: false + resolution: + integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw== /@types/scheduler/0.16.1: dev: false resolution: @@ -9630,6 +9697,10 @@ packages: node: '>=4.0' resolution: integrity: sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ== + /estree-walker/0.2.1: + dev: false + resolution: + integrity: sha1-va/oCVOD2EFNXcLs9MkXO225QS4= /estree-walker/0.6.1: dev: false resolution: @@ -9638,6 +9709,10 @@ packages: dev: false resolution: integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== + /estree-walker/2.0.2: + dev: false + resolution: + integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== /esutils/2.0.3: dev: false engines: @@ -11930,6 +12005,12 @@ packages: dev: false resolution: integrity: sha1-DFLlS8yjkbssSUsh6GJtczbG45c= + /is-reference/1.2.1: + dependencies: + '@types/estree': 0.0.46 + dev: false + resolution: + integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ== /is-regex/1.1.2: dependencies: call-bind: 1.0.2 @@ -16996,6 +17077,29 @@ packages: rollup: '>=0.60.0 <3' resolution: integrity: sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw== + /rollup-plugin-sourcemaps/0.6.3_9135ee81d9218d0e99b56082525729b5: + dependencies: + '@rollup/pluginutils': 3.1.0_rollup@2.42.4 + '@types/node': 14.14.35 + rollup: 2.42.4 + source-map-resolve: 0.6.0 + dev: false + engines: + node: '>=10.0.0' + peerDependencies: + '@types/node': '>=10.0.0' + rollup: '>=0.31.2' + peerDependenciesMeta: + '@types/node': + optional: true + resolution: + integrity: sha512-paFu+nT1xvuO1tPFYXGe+XnQvg4Hjqv/eIhG8i5EspfYYPBKL57X7iVbfv55aNVASg3dzWvES9dmWsL2KhfByw== + /rollup-plugin-svg/2.0.0: + dependencies: + rollup-pluginutils: 1.5.2 + dev: false + resolution: + integrity: sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ== /rollup-plugin-terser/5.3.1_rollup@1.32.1: dependencies: '@babel/code-frame': 7.12.13 @@ -17009,6 +17113,13 @@ packages: rollup: '>=0.66.0 <3' resolution: integrity: sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w== + /rollup-pluginutils/1.5.2: + dependencies: + estree-walker: 0.2.1 + minimatch: 3.0.4 + dev: false + resolution: + integrity: sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg= /rollup-pluginutils/2.8.2: dependencies: estree-walker: 0.6.1 @@ -17024,6 +17135,15 @@ packages: hasBin: true resolution: integrity: sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A== + /rollup/2.42.4: + dev: false + engines: + node: '>=10.0.0' + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + resolution: + integrity: sha512-Zqv3EvNfcllBHyyEUM754npqsZw82VIjK34cDQMwrQ1d6aqxzeYu5yFb7smGkPU4C1Bj7HupIMeT6WU7uIdnMw== /rst-selector-parser/2.2.3: dependencies: lodash.flattendeep: 4.4.0 @@ -20078,7 +20198,59 @@ packages: integrity: sha512-txAH969cxBbODK/K7IFU64QUs3RQWw8Jm76yuqUKf/qDrKYLD4+wnF7/Gv/OxGHFrBolDGXgIR3kvD+OXQK15g== tarball: file:projects/acs-calling-declarative.tgz version: 0.0.0 - file:projects/acs-calling-sample.tgz_570bf42e92a70fb216c5cd4d5ed668ef: + file:projects/acs-chat-declarative.tgz_prettier@2.0.5+ts-node@9.1.1: + dependencies: + '@azure/communication-chat': 1.0.0-beta.4 + '@azure/communication-signaling': 1.0.0-beta.2 + '@microsoft/api-documenter': 7.12.12 + '@microsoft/api-extractor': 7.13.2 + '@types/jest': 26.0.20 + '@typescript-eslint/eslint-plugin': 4.18.0_e9e1aa536ec0b34179456e3b69e4968e + '@typescript-eslint/parser': 4.18.0_eslint@7.22.0+typescript@4.1.5 + eslint: 7.22.0 + eslint-config-prettier: 6.15.0_eslint@7.22.0 + eslint-plugin-header: 3.1.1_eslint@7.22.0 + eslint-plugin-import: 2.22.1_eslint@7.22.0 + eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2 + immer: 8.0.1 + jest: 26.6.0_ts-node@9.1.1 + nanoid: 3.1.22 + ts-jest: 26.5.3_jest@26.6.0+typescript@4.1.5 + typescript: 4.1.5 + dev: false + id: file:projects/acs-chat-declarative.tgz + name: '@rush-temp/acs-chat-declarative' + peerDependencies: + prettier: '*' + ts-node: '*' + resolution: + integrity: sha512-yS3iBC8KTy5gjPkPVv0TkKzcJMEzVi7CxgT6gmNIqVYJkHlmWmskzKNliG/1ly3fYUkcVgXFb4Th6igScOCKUw== + tarball: file:projects/acs-chat-declarative.tgz + version: 0.0.0 + file:projects/acs-chat-selector.tgz_prettier@2.0.5: + dependencies: + '@azure/communication-chat': 1.0.0-beta.4 + '@microsoft/api-documenter': 7.12.12 + '@microsoft/api-extractor': 7.13.2 + '@types/react': 16.14.5 + eslint: 7.22.0 + eslint-config-prettier: 6.15.0_eslint@7.22.0 + eslint-plugin-header: 3.1.1_eslint@7.22.0 + eslint-plugin-import: 2.22.1_eslint@7.22.0 + eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2 + memoize-one: 5.1.1 + reselect: 4.0.0 + typescript: 4.1.5 + dev: false + id: file:projects/acs-chat-selector.tgz + name: '@rush-temp/acs-chat-selector' + peerDependencies: + prettier: '*' + resolution: + integrity: sha512-vgq6DDxDUEWYFZ87cBH4q1E92dgwgtbVsPUf6YVIrtITro9kA+YrR7CmgI5smLDwJbCau5vxd9UIEASkg8cXCA== + tarball: file:projects/acs-chat-selector.tgz + version: 0.0.0 + file:projects/calling.tgz_570bf42e92a70fb216c5cd4d5ed668ef: dependencies: '@azure/communication-administration': 1.0.0-beta.3 '@azure/communication-calling': 1.0.0-beta.2 @@ -20134,8 +20306,8 @@ packages: typescript: 4.1.5 uuid: 8.3.2 dev: false - id: file:projects/acs-calling-sample.tgz - name: '@rush-temp/acs-calling-sample' + id: file:projects/calling.tgz + name: '@rush-temp/calling' peerDependencies: eslint-plugin-import: '*' eslint-plugin-jsx-a11y: '*' @@ -20143,39 +20315,10 @@ packages: webpack: '*' webpack-cli: '*' resolution: - integrity: sha512-5E76VQJnnmZv7C+QRuzmjP2NQgKU1yvkmVrk1uy88fHJJVl8G1+9F4NyRo+mU7oSPK88urYJ23G8qXpftXD2Bg== - tarball: file:projects/acs-calling-sample.tgz - version: 0.0.0 - file:projects/acs-chat-declarative.tgz_prettier@2.0.5+ts-node@9.1.1: - dependencies: - '@azure/communication-chat': 1.0.0-beta.4 - '@azure/communication-signaling': 1.0.0-beta.2 - '@microsoft/api-documenter': 7.12.12 - '@microsoft/api-extractor': 7.13.2 - '@types/jest': 26.0.20 - '@typescript-eslint/eslint-plugin': 4.18.0_e9e1aa536ec0b34179456e3b69e4968e - '@typescript-eslint/parser': 4.18.0_eslint@7.22.0+typescript@4.1.5 - eslint: 7.22.0 - eslint-config-prettier: 6.15.0_eslint@7.22.0 - eslint-plugin-header: 3.1.1_eslint@7.22.0 - eslint-plugin-import: 2.22.1_eslint@7.22.0 - eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2 - immer: 8.0.1 - jest: 26.6.0_ts-node@9.1.1 - nanoid: 3.1.22 - ts-jest: 26.5.3_jest@26.6.0+typescript@4.1.5 - typescript: 4.1.5 - dev: false - id: file:projects/acs-chat-declarative.tgz - name: '@rush-temp/acs-chat-declarative' - peerDependencies: - prettier: '*' - ts-node: '*' - resolution: - integrity: sha512-yS3iBC8KTy5gjPkPVv0TkKzcJMEzVi7CxgT6gmNIqVYJkHlmWmskzKNliG/1ly3fYUkcVgXFb4Th6igScOCKUw== - tarball: file:projects/acs-chat-declarative.tgz + integrity: sha512-PYwlIGfcB/u+Jv4BePuPKciDw4bnKNnSzu8ayjoITq0Gt2v1SATcTJX9vaLzHIFKI4CRbOzu/KRFovJg757XCg== + tarball: file:projects/calling.tgz version: 0.0.0 - file:projects/acs-chat-sample.tgz_40b0c9f7a7a0fac66e4b6fcf06de2a42: + file:projects/chat.tgz_40b0c9f7a7a0fac66e4b6fcf06de2a42: dependencies: '@azure/communication-administration': 1.0.0-beta.3 '@azure/communication-chat': 1.0.0-beta.3 @@ -20226,41 +20369,115 @@ packages: rimraf: 2.7.1 typescript: 4.1.5 dev: false - id: file:projects/acs-chat-sample.tgz - name: '@rush-temp/acs-chat-sample' + id: file:projects/chat.tgz + name: '@rush-temp/chat' peerDependencies: eslint-plugin-import: '*' eslint-plugin-jsx-a11y: '*' ts-node: '*' webpack-cli: '*' resolution: - integrity: sha512-ik/XLHRZJUbJ0X6LZFwF5Yf7XVAqfijRfTWaLtAnkrK/MIQMMaWYncEW1kNC92JU6I5ecWD6ir6cYqXOdOwK7Q== - tarball: file:projects/acs-chat-sample.tgz + integrity: sha512-hEVS1AAJYKpfHhHGM/eoNlr2amTjGg2C0Jb9I3/uK+83I4kNjvN7AuwzCguxphFmH4mcseHXadMRt/0bjueFQg== + tarball: file:projects/chat.tgz version: 0.0.0 - file:projects/acs-chat-selector.tgz_prettier@2.0.5: + file:projects/communication-ui.tgz_webpack-cli@4.5.0: dependencies: - '@azure/communication-chat': 1.0.0-beta.4 + '@azure/communication-administration': 1.0.0-beta.3 + '@azure/communication-calling': 1.0.0-beta.2 + '@azure/communication-chat': 1.0.0-beta.3 + '@azure/communication-common': 1.0.0-beta.3 + '@azure/communication-signaling': 1.0.0-beta.1 + '@azure/core-http': 1.2.3 + '@babel/core': 7.13.10 + '@babel/preset-env': 7.13.10_@babel+core@7.13.10 + '@fluentui/react': 7.164.1_b0d7ca8a0459a1df1ff516252688d92a + '@fluentui/react-icons': 0.3.10_b0d7ca8a0459a1df1ff516252688d92a + '@fluentui/react-icons-northstar': 0.51.7_b0d7ca8a0459a1df1ff516252688d92a + '@fluentui/react-northstar': 0.51.7_b0d7ca8a0459a1df1ff516252688d92a + '@fluentui/react-theme-provider': 0.18.5_b0d7ca8a0459a1df1ff516252688d92a + '@mdx-js/react': 1.6.22_react@16.14.0 '@microsoft/api-documenter': 7.12.12 '@microsoft/api-extractor': 7.13.2 + '@rollup/plugin-commonjs': 17.1.0_rollup@2.42.4 + '@rollup/plugin-json': 4.1.0_rollup@2.42.4 + '@rollup/plugin-node-resolve': 11.2.0_rollup@2.42.4 + '@storybook/addon-actions': 6.1.21_30bc4764d4ba778218056aab0be8023f + '@storybook/addon-docs': 6.1.21_025c95869cb55e8d142f5246a0455b6d + '@storybook/addon-essentials': 6.1.21_489c05363155b6add536e1fef5b4fe59 + '@storybook/addon-knobs': 6.1.21_30bc4764d4ba778218056aab0be8023f + '@storybook/addon-links': 6.1.21_react-dom@16.14.0+react@16.14.0 + '@storybook/addon-storyshots': 6.1.21_bf4eba619a81a338b8fdba9794ec01fe + '@storybook/node-logger': 6.1.21 + '@storybook/react': 6.1.21_4afa15f3c90940bbd828a24f4067472e + '@storybook/storybook-deployer': 2.8.7 + '@storybook/theming': 6.1.21_react-dom@16.14.0+react@16.14.0 + '@testing-library/jest-dom': 5.11.9 + '@testing-library/react-hooks': 3.7.0_98e0eb37a9f7280a1c5a6c886619f5b4 + '@types/classnames': 2.2.11 + '@types/jest': 26.0.20 + '@types/json-stringify-safe': 5.0.0 + '@types/node': 14.14.35 '@types/react': 16.14.5 + '@types/react-aria-live': 2.0.0 + '@types/react-dom': 16.9.11 + '@types/react-linkify': 1.0.0 + '@types/uuid': 8.3.0 + '@typescript-eslint/eslint-plugin': 4.18.0_e9e1aa536ec0b34179456e3b69e4968e + '@typescript-eslint/parser': 4.18.0_eslint@7.22.0+typescript@4.1.5 + '@uifabric/react-hooks': 7.13.12_b0d7ca8a0459a1df1ff516252688d92a + ajv: 6.12.6 + babel-jest: 26.6.3_@babel+core@7.13.10 + babel-loader: 8.1.0_6d2d9db439f797dbe04a64efdbcf144a + classnames: 2.2.6 + concurrently: 5.3.0 + copy-to-clipboard: 3.3.1 + copyfiles: 2.4.1 + core-js: 3.9.1 eslint: 7.22.0 eslint-config-prettier: 6.15.0_eslint@7.22.0 eslint-plugin-header: 3.1.1_eslint@7.22.0 eslint-plugin-import: 2.22.1_eslint@7.22.0 + eslint-plugin-jsx-a11y: 6.4.1_eslint@7.22.0 eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2 - memoize-one: 5.1.1 - reselect: 4.0.0 + eslint-plugin-react: 7.22.0_eslint@7.22.0 + eslint-plugin-react-hooks: 4.2.0_eslint@7.22.0 + husky: 4.3.8 + jest: 26.6.0_ts-node@9.1.1 + jest-fetch-mock: 3.0.3 + jest-junit: 12.0.0 + json-stringify-safe: 5.0.1 + nan: 2.14.2 + node-forge: 0.10.0 + prettier: 2.0.5 + pretty-quick: 3.1.0_prettier@2.0.5 + react: 16.14.0 + react-aria-live: 2.0.5_react@16.14.0 + react-dom: 16.14.0_react@16.14.0 + react-is: 17.0.1 + react-linkify: 1.0.0-alpha + react-test-renderer: 16.14.0_react@16.14.0 + regenerator-runtime: 0.13.7 + rollup: 2.42.4 + rollup-plugin-sourcemaps: 0.6.3_9135ee81d9218d0e99b56082525729b5 + rollup-plugin-svg: 2.0.0 + source-map-explorer: 2.5.2 + storybook-docs-toc: 1.3.1_55ac82b1aedfe80ed374987a417300da + styled-components: 5.2.1_9debf3d425c3eafb0518d6c329d076f5 + ts-jest: 26.5.3_jest@26.6.0+typescript@4.1.5 + ts-node: 9.1.1_typescript@4.1.5 typescript: 4.1.5 + uuid: 8.3.2 + webpack: 4.44.2_webpack-cli@4.5.0 dev: false - id: file:projects/acs-chat-selector.tgz - name: '@rush-temp/acs-chat-selector' + id: file:projects/communication-ui.tgz + name: '@rush-temp/communication-ui' peerDependencies: - prettier: '*' + webpack-cli: '*' resolution: - integrity: sha512-vgq6DDxDUEWYFZ87cBH4q1E92dgwgtbVsPUf6YVIrtITro9kA+YrR7CmgI5smLDwJbCau5vxd9UIEASkg8cXCA== - tarball: file:projects/acs-chat-selector.tgz + integrity: sha512-Y7RxYVhJpQ7PU+iL5/Up7amSAGmqBgd9ScP2n/xq1ByH5nAqdYf6J6uAEU/N7KDC5/B78PKlponFQ/5iX80gJQ== + tarball: file:projects/communication-ui.tgz version: 0.0.0 - file:projects/acs-one-to-one-call-sample.tgz_570bf42e92a70fb216c5cd4d5ed668ef: + file:projects/one-to-one-call.tgz_570bf42e92a70fb216c5cd4d5ed668ef: dependencies: '@azure/communication-administration': 1.0.0-beta.3 '@azure/communication-calling': 1.0.0-beta.2 @@ -20318,8 +20535,8 @@ packages: typescript: 4.1.5 uuid: 8.3.2 dev: false - id: file:projects/acs-one-to-one-call-sample.tgz - name: '@rush-temp/acs-one-to-one-call-sample' + id: file:projects/one-to-one-call.tgz + name: '@rush-temp/one-to-one-call' peerDependencies: eslint-plugin-import: '*' eslint-plugin-jsx-a11y: '*' @@ -20327,10 +20544,25 @@ packages: webpack: '*' webpack-cli: '*' resolution: - integrity: sha512-p207/qepY7DDslsvLIKF5va4/PpIB/zlq+GjhPhxWxiTalJ6GSR+YdFL7EBUOkd2noIvmc/eNyQ2TMYVSqy9Jw== - tarball: file:projects/acs-one-to-one-call-sample.tgz + integrity: sha512-7Eei6TVL74VGNBmON8HLssHISzQr8G8ImvnnvLBOTTGUat72KR7QjO16GHMr4QUYlKFLFd/+hvFFiwjvu6u/hw== + tarball: file:projects/one-to-one-call.tgz version: 0.0.0 - file:projects/acs-server-sample.tgz: + file:projects/release-tools.tgz_typescript@4.1.5: + dependencies: + '@octokit/rest': 18.0.15 + '@types/node': 14.14.35 + beachball: 1.53.2 + ts-node: 9.1.1_typescript@4.1.5 + dev: false + id: file:projects/release-tools.tgz + name: '@rush-temp/release-tools' + peerDependencies: + typescript: '*' + resolution: + integrity: sha512-z8gCO5dSCyziWJ+KCb64AK7YSaU+hep4QQ9rcswo/dTE2JpMHkrACkdV/jjOKrx0wtUHIH6BmypWIROVzaf7Zw== + tarball: file:projects/release-tools.tgz + version: 0.0.0 + file:projects/server.tgz: dependencies: '@azure/communication-chat': 1.0.0-beta.3 '@azure/communication-common': 1.0.0-beta.3 @@ -20375,116 +20607,10 @@ packages: webpack-cli: 4.5.0_webpack@4.44.2 webpack-node-externals: 2.5.2 dev: false - name: '@rush-temp/acs-server-sample' + name: '@rush-temp/server' resolution: - integrity: sha512-j4Ck8vGlOM7/2P8+HX2HafvmLRhmgjCyipETF/lDQhg+tuknAt/lhRfvG0W3DV7aQDCKaXGCPlaX4LL6pRQOgg== - tarball: file:projects/acs-server-sample.tgz - version: 0.0.0 - file:projects/communication-ui.tgz_webpack-cli@4.5.0: - dependencies: - '@azure/communication-administration': 1.0.0-beta.3 - '@azure/communication-calling': 1.0.0-beta.2 - '@azure/communication-chat': 1.0.0-beta.3 - '@azure/communication-common': 1.0.0-beta.3 - '@azure/communication-signaling': 1.0.0-beta.1 - '@azure/core-http': 1.2.3 - '@babel/core': 7.13.10 - '@babel/preset-env': 7.13.10_@babel+core@7.13.10 - '@fluentui/react': 7.164.1_b0d7ca8a0459a1df1ff516252688d92a - '@fluentui/react-icons': 0.3.10_b0d7ca8a0459a1df1ff516252688d92a - '@fluentui/react-icons-northstar': 0.51.7_b0d7ca8a0459a1df1ff516252688d92a - '@fluentui/react-northstar': 0.51.7_b0d7ca8a0459a1df1ff516252688d92a - '@fluentui/react-theme-provider': 0.18.5_b0d7ca8a0459a1df1ff516252688d92a - '@mdx-js/react': 1.6.22_react@16.14.0 - '@microsoft/api-documenter': 7.12.12 - '@microsoft/api-extractor': 7.13.2 - '@storybook/addon-actions': 6.1.21_30bc4764d4ba778218056aab0be8023f - '@storybook/addon-docs': 6.1.21_025c95869cb55e8d142f5246a0455b6d - '@storybook/addon-essentials': 6.1.21_489c05363155b6add536e1fef5b4fe59 - '@storybook/addon-knobs': 6.1.21_30bc4764d4ba778218056aab0be8023f - '@storybook/addon-links': 6.1.21_react-dom@16.14.0+react@16.14.0 - '@storybook/addon-storyshots': 6.1.21_bf4eba619a81a338b8fdba9794ec01fe - '@storybook/node-logger': 6.1.21 - '@storybook/react': 6.1.21_4afa15f3c90940bbd828a24f4067472e - '@storybook/storybook-deployer': 2.8.7 - '@storybook/theming': 6.1.21_react-dom@16.14.0+react@16.14.0 - '@testing-library/jest-dom': 5.11.9 - '@testing-library/react-hooks': 3.7.0_98e0eb37a9f7280a1c5a6c886619f5b4 - '@types/classnames': 2.2.11 - '@types/jest': 26.0.20 - '@types/json-stringify-safe': 5.0.0 - '@types/node': 14.14.35 - '@types/react': 16.14.5 - '@types/react-aria-live': 2.0.0 - '@types/react-dom': 16.9.11 - '@types/react-linkify': 1.0.0 - '@types/uuid': 8.3.0 - '@typescript-eslint/eslint-plugin': 4.18.0_e9e1aa536ec0b34179456e3b69e4968e - '@typescript-eslint/parser': 4.18.0_eslint@7.22.0+typescript@4.1.5 - '@uifabric/react-hooks': 7.13.12_b0d7ca8a0459a1df1ff516252688d92a - ajv: 6.12.6 - babel-jest: 26.6.3_@babel+core@7.13.10 - babel-loader: 8.1.0_6d2d9db439f797dbe04a64efdbcf144a - classnames: 2.2.6 - concurrently: 5.3.0 - copy-to-clipboard: 3.3.1 - copyfiles: 2.4.1 - core-js: 3.9.1 - eslint: 7.22.0 - eslint-config-prettier: 6.15.0_eslint@7.22.0 - eslint-plugin-header: 3.1.1_eslint@7.22.0 - eslint-plugin-import: 2.22.1_eslint@7.22.0 - eslint-plugin-jsx-a11y: 6.4.1_eslint@7.22.0 - eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2 - eslint-plugin-react: 7.22.0_eslint@7.22.0 - eslint-plugin-react-hooks: 4.2.0_eslint@7.22.0 - husky: 4.3.8 - jest: 26.6.0_ts-node@9.1.1 - jest-fetch-mock: 3.0.3 - jest-junit: 12.0.0 - json-stringify-safe: 5.0.1 - nan: 2.14.2 - node-forge: 0.10.0 - prettier: 2.0.5 - pretty-quick: 3.1.0_prettier@2.0.5 - react: 16.14.0 - react-aria-live: 2.0.5_react@16.14.0 - react-dom: 16.14.0_react@16.14.0 - react-is: 17.0.1 - react-linkify: 1.0.0-alpha - react-test-renderer: 16.14.0_react@16.14.0 - regenerator-runtime: 0.13.7 - source-map-explorer: 2.5.2 - storybook-docs-toc: 1.3.1_55ac82b1aedfe80ed374987a417300da - styled-components: 5.2.1_9debf3d425c3eafb0518d6c329d076f5 - ts-jest: 26.5.3_jest@26.6.0+typescript@4.1.5 - ts-node: 9.1.1_typescript@4.1.5 - typescript: 4.1.5 - uuid: 8.3.2 - webpack: 4.44.2_webpack-cli@4.5.0 - dev: false - id: file:projects/communication-ui.tgz - name: '@rush-temp/communication-ui' - peerDependencies: - webpack-cli: '*' - resolution: - integrity: sha512-fp1yMAMuub4NKtwICfLd5P1z6wCkDA+LjfTDvsMM9VLROgDrzsmR0JznDJvlR0zsBKyeRh9sSLqPzujJcnLPpQ== - tarball: file:projects/communication-ui.tgz - version: 0.0.0 - file:projects/release-tools.tgz_typescript@4.1.5: - dependencies: - '@octokit/rest': 18.0.15 - '@types/node': 14.14.35 - beachball: 1.53.2 - ts-node: 9.1.1_typescript@4.1.5 - dev: false - id: file:projects/release-tools.tgz - name: '@rush-temp/release-tools' - peerDependencies: - typescript: '*' - resolution: - integrity: sha512-z8gCO5dSCyziWJ+KCb64AK7YSaU+hep4QQ9rcswo/dTE2JpMHkrACkdV/jjOKrx0wtUHIH6BmypWIROVzaf7Zw== - tarball: file:projects/release-tools.tgz + integrity: sha512-ackzCLGN0wbDuoKMywSTx9Ge31TF5jHC+O4F6zRMnOm8p2hCNvwcwojGnnkRiYyJc2w6eHuUBp9yLwJ3wAh9hw== + tarball: file:projects/server.tgz version: 0.0.0 registry: '' specifiers: @@ -20505,15 +20631,18 @@ specifiers: '@microsoft/api-documenter': ~7.12.11 '@microsoft/api-extractor': ~7.13.2 '@octokit/rest': ~18.0.6 + '@rollup/plugin-commonjs': ~17.1.0 + '@rollup/plugin-json': ~4.1.0 + '@rollup/plugin-node-resolve': ~11.2.0 '@rush-temp/acs-calling-declarative': file:./projects/acs-calling-declarative.tgz - '@rush-temp/acs-calling-sample': file:./projects/acs-calling-sample.tgz '@rush-temp/acs-chat-declarative': file:./projects/acs-chat-declarative.tgz - '@rush-temp/acs-chat-sample': file:./projects/acs-chat-sample.tgz '@rush-temp/acs-chat-selector': file:./projects/acs-chat-selector.tgz - '@rush-temp/acs-one-to-one-call-sample': file:./projects/acs-one-to-one-call-sample.tgz - '@rush-temp/acs-server-sample': file:./projects/acs-server-sample.tgz + '@rush-temp/calling': file:./projects/calling.tgz + '@rush-temp/chat': file:./projects/chat.tgz '@rush-temp/communication-ui': file:./projects/communication-ui.tgz + '@rush-temp/one-to-one-call': file:./projects/one-to-one-call.tgz '@rush-temp/release-tools': file:./projects/release-tools.tgz + '@rush-temp/server': file:./projects/server.tgz '@storybook/addon-actions': ^6.1.1 '@storybook/addon-docs': ^6.1.18 '@storybook/addon-essentials': ^6.1.1 @@ -20605,6 +20734,9 @@ specifiers: regenerator-runtime: ^0.13.7 reselect: ~4.0.0 rimraf: ^2.6.2 + rollup: ~2.42.4 + rollup-plugin-sourcemaps: ~0.6.3 + rollup-plugin-svg: ~2.0.0 source-map-explorer: ^2.5.0 storybook-docs-toc: ~1.3.1 styled-components: ~5.2.1 diff --git a/docs/README.md b/docs/README.md index 064630d5271..845f55ac219 100644 --- a/docs/README.md +++ b/docs/README.md @@ -27,6 +27,7 @@ Looking to make a contribution to this repo? Check out our guide for a walk-thro - [GitHub Issue templates](./infrastructure/issue-templates.md) - GitHub bug and feature request templates - [Jest](./infrastructure/jest.md) - Unit test framework - [Pull Request Gates and Templates](./infrastructure/pull-requests.md) - Gates blocking PRs and the PR template +- [Rollup](./infrastructure/rollup.md) - Used to create hybrid npm package (generates commonjs bundle) - [Rush monorepo manager](./infrastructure/rush.md) - Why Rush is used and useful Rush commands ## References diff --git a/docs/contributing-guide/6. submitting-a-pr.md b/docs/contributing-guide/6. submitting-a-pr.md index 47d0629989e..eeb1f92c5ad 100644 --- a/docs/contributing-guide/6. submitting-a-pr.md +++ b/docs/contributing-guide/6. submitting-a-pr.md @@ -21,13 +21,13 @@ Once you have gotten setup with the repo, made and tested your changes, there ar To ensure we do not break any existing public APIs, we use [api-extractor](../infrastructure/api-extractor.md) across all our npm packages. This generates a file detailing all public exports of the package. You can find this file under `package-root/review/package-name.api.md`. We do this to prevent any accidental breaking changes to the packages we export, and to ensure we do not accidentally publish any internal helper classes/functions. -When a package is built using `rush build -t "package-name` or `rushx build` the api-extractor is automatically run and will update the corresponding `api.md` file. +When a package is built the api-extractor is automatically run and will update the corresponding `api.md` file. To ensure these API files have been updated, run `rush build -t "package-name` for each package you have made changes to and submit any changed `api.md` files along with your PR. #### 2. Generate a change file to describe your changes -To ensure we have high-quality changelogs when new versions are released, and make sure your contribution does not go unaccredited for, we ask you to create a change file to describe your changes. To generate the change file first make sure all your changes are committed, then run: +To ensure we have high-quality changelogs when new versions are released, and make sure your contribution does not go unaccredited for, we ask you to create a change file to describe your changes. To generate the change file first make sure all your changes are _committed_, then run: ```bash rush changelog diff --git a/docs/infrastructure/api-extractor.md b/docs/infrastructure/api-extractor.md index 609f1d8f0dc..6a9b2df1500 100644 --- a/docs/infrastructure/api-extractor.md +++ b/docs/infrastructure/api-extractor.md @@ -17,7 +17,6 @@ The api-extractor used for a number of useful features: ## How to run API Extractor API Extractor is run as part of the build commands for each package. Running `rush build -t "package-name"` will trigger the api-extractor to run. -> note: as of writing commands that perform hot reloading such as `rushx storybook` or `rushx start ` do not trigger the api extractor. If these run methods are being used for development, once you are satisfied with your changes, you will need to run `rush build -t "package-name"` for each package to ensure the api extractor file is updated. ## Configuration Files diff --git a/docs/infrastructure/rollup.md b/docs/infrastructure/rollup.md new file mode 100644 index 00000000000..794653e6ac4 --- /dev/null +++ b/docs/infrastructure/rollup.md @@ -0,0 +1,43 @@ +# Rollup + +## What is Rollup? + +[Rollup](https://rollupjs.org/guide/en/) is a bundler similar to webpack that we use to create CommonJS bundles for each npm package. This allows us to create a hybrid npm package - one that supports both ESM and CommonJS formats. + +## What does Rollup do + +We are using Rollup to transform our ESM (EcmaScript Module) output that the tsc build produces. It takes the `/dist/dist-esm/index.js` produced by tsc and transforms and flattens the output to a single `/dist/dist-cjs/index.js` CommonJS module file. + +### When is Rollup Run + +Rollup is run as part of each packages build step. + +## ESM vs CommonJS vs AMD vs UMD + +For some background context there are three main module formats: [ESM (EcmaScript Modules)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), [CommonJS](https://en.wikipedia.org/wiki/CommonJS) and [AMD (Asynchronous Module Definition)](https://en.wikipedia.org/wiki/Asynchronous_module_definition). [UMD](https://github.com/umdjs/umd) is a universal way of supporting both CommonJS and AMD (but not ESM). + +CommonJS and AMD both need the `require` syntax, e.g., + +```javascript +// Example CommonJS/AMD module import syntax +const pkg = require("pkg"); +pkg.function1(); +``` + +ESM uses the `import ... from ...` syntax and has a number of advantages such as better treeshaking. + +```javascript +// Example ESM module import syntax +import { function1, function2 } from "pkg"; +function1(); +``` + +### Why support both ESM and CommonJS + +ESM is relatively new and is slowly being adopted as the standard. It is supported in all major browsers (except IE) and in Node v13.2.0+ ([view support here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#browser_support)). + +However, to support Node versions < v.13.2.0 (for unit testing) and enable consumers of the package to make a choice for what they wish to support we have decided to support both ESM and CommonJS. At the time of writing we do not support AMD/UMD. + +## Configuration Files + +The configuration file for rollup can be found under each project root and is called `rollup.config.js`. E.g., [packages/communication-ui/rollup.config.js](https://github.com/Azure/communication-ui-sdk/blob/main/packages/communication-ui/rollup.config.js). diff --git a/packages/acs-calling-declarative/package.json b/packages/acs-calling-declarative/package.json index 9453709e964..dc2c54fc5b1 100644 --- a/packages/acs-calling-declarative/package.json +++ b/packages/acs-calling-declarative/package.json @@ -2,17 +2,17 @@ "name": "@azure/acs-calling-declarative", "version": "1.0.0-beta", "description": "ACS UI SDK", - "module": "dist/index.js", - "main": "dist/index.js", + "module": "dist/dist-esm/index.js", + "main": "dist/dist-esm/index.js", "types": "dist/acs-calling-declarative.d.ts", "scripts": { "build": "tsc && api-extractor run --local", - "build:watch": "tsc -w", + "build:watch": "rushx build", "test": "jest", - "test:coverage": "npm run test -- --coverage", + "test:coverage": "rushx test -- --coverage", "lint": "eslint \"*/**/*.{ts,tsx}\"", - "lint:fix": "npm run lint -- --fix", - "lint:quiet": "npm run lint -- --quiet", + "lint:fix": "rushx lint -- --fix", + "lint:quiet": "rushx lint -- --quiet", "api-extractor": "tsc && api-extractor run --local", "generate-doc": "api-documenter markdown -i temp -o docGen" }, diff --git a/packages/acs-calling-declarative/tsconfig.json b/packages/acs-calling-declarative/tsconfig.json index b304be4582c..8557a5edb7f 100644 --- a/packages/acs-calling-declarative/tsconfig.json +++ b/packages/acs-calling-declarative/tsconfig.json @@ -5,7 +5,7 @@ "declaration": true, "declarationMap": true, "sourceMap": true, - "outDir": "./dist/", + "outDir": "./dist/dist-esm/", "strict": true, "noImplicitAny": false, // disable for now for storybook "strictFunctionTypes": true, diff --git a/packages/acs-chat-declarative/package.json b/packages/acs-chat-declarative/package.json index 85e50d8c83b..9b02399ca74 100644 --- a/packages/acs-chat-declarative/package.json +++ b/packages/acs-chat-declarative/package.json @@ -2,17 +2,17 @@ "name": "@azure/acs-chat-declarative", "version": "1.0.0-beta", "description": "ACS UI SDK", - "module": "dist/index.js", - "main": "dist/index.js", + "module": "dist/dist-esm/index.js", + "main": "dist/dist-esm/index.js", "types": "dist/acs-chat-declarative.d.ts", "scripts": { "build": "tsc && api-extractor run --local", - "build:watch": "tsc -w", + "build:watch": "rushx build", "test": "jest", - "test:coverage": "npm run test -- --coverage", + "test:coverage": "rushx test -- --coverage", "lint": "eslint \"*/**/*.{ts,tsx}\"", - "lint:fix": "npm run lint -- --fix", - "lint:quiet": "npm run lint -- --quiet", + "lint:fix": "rushx lint -- --fix", + "lint:quiet": "rushx lint -- --quiet", "api-extractor": "tsc && api-extractor run --local", "generate-doc": "api-documenter markdown -i temp -o docGen" }, diff --git a/packages/acs-chat-declarative/tsconfig.json b/packages/acs-chat-declarative/tsconfig.json index b304be4582c..8557a5edb7f 100644 --- a/packages/acs-chat-declarative/tsconfig.json +++ b/packages/acs-chat-declarative/tsconfig.json @@ -5,7 +5,7 @@ "declaration": true, "declarationMap": true, "sourceMap": true, - "outDir": "./dist/", + "outDir": "./dist/dist-esm/", "strict": true, "noImplicitAny": false, // disable for now for storybook "strictFunctionTypes": true, diff --git a/packages/acs-chat-selector/package.json b/packages/acs-chat-selector/package.json index ec4697bfb40..1ccedee72dd 100644 --- a/packages/acs-chat-selector/package.json +++ b/packages/acs-chat-selector/package.json @@ -2,17 +2,17 @@ "name": "@azure/acs-chat-selector", "version": "1.0.0-beta", "description": "ACS UI SDK", - "module": "dist/index.js", - "main": "dist/index.js", + "module": "dist/dist-esm/index.js", + "main": "dist/dist-esm/index.js", "types": "dist/index.d.ts", "scripts": { "build": "tsc && api-extractor run --local", - "build:watch": "tsc -w", + "build:watch": "rushx build", "test": "jest --passWithNoTests", - "test:coverage": "npm run test -- --coverage", + "test:coverage": "rushx test -- --coverage", "lint": "eslint \"*/**/*.{ts,tsx}\"", - "lint:fix": "npm run lint -- --fix", - "lint:quiet": "npm run lint -- --quiet", + "lint:fix": "rushx lint -- --fix", + "lint:quiet": "rushx lint -- --quiet", "api-extractor": "tsc && api-extractor run --local", "generate-doc": "api-documenter markdown -i temp -o docGen" }, diff --git a/packages/acs-chat-selector/tsconfig.json b/packages/acs-chat-selector/tsconfig.json index b304be4582c..8557a5edb7f 100644 --- a/packages/acs-chat-selector/tsconfig.json +++ b/packages/acs-chat-selector/tsconfig.json @@ -5,7 +5,7 @@ "declaration": true, "declarationMap": true, "sourceMap": true, - "outDir": "./dist/", + "outDir": "./dist/dist-esm/", "strict": true, "noImplicitAny": false, // disable for now for storybook "strictFunctionTypes": true, diff --git a/packages/communication-ui/.eslintrc.js b/packages/communication-ui/.eslintrc.js index 351f4428fb4..eb40953c084 100644 --- a/packages/communication-ui/.eslintrc.js +++ b/packages/communication-ui/.eslintrc.js @@ -73,7 +73,7 @@ module.exports = { { // remove ban on files affected by https://github.com/microsoft/rushstack/pull/1916. // This should be removed once this issue is fixed - files: ['useFetchMessages.ts'], + files: ['useFetchMessages.ts', 'ChatProviderHelper.tsx'], rules: { '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/no-unused-vars': 'off' diff --git a/packages/communication-ui/package.json b/packages/communication-ui/package.json index 41743fd340e..64039ad59f7 100644 --- a/packages/communication-ui/package.json +++ b/packages/communication-ui/package.json @@ -2,25 +2,30 @@ "name": "@azure/communication-ui", "version": "1.0.0-beta", "description": "ACS UI SDK", - "module": "dist/index.js", - "main": "dist/index.js", + "module": "dist/dist-esm/index.js", + "main": "dist/dist-cjs/index.js", "types": "dist/communication-ui.d.ts", + "files": [ + "dist/" + ], "scripts": { - "build": "tsc && copyfiles -u 1 src/**/assets/**/* dist && api-extractor run --local", - "build:watch": "tsc -w", + "build": "rushx build:esm && rushx build:cjs && api-extractor run --local", + "build:cjs": "rollup -c --silent --failAfterWarnings", + "build:esm": "tsc && copyfiles -u 1 src/**/assets/**/* dist/dist-esm", + "build:watch": "rushx build", "build:storybook": "build-storybook -s src", "storybook": "start-storybook -p 6006 -s src --no-manager-cache", "deploy-storybook": "storybook-to-ghpages", "test": "jest", - "test:coverage": "npm run test -- --coverage", - "snapshot:update": "npm run test -- --update-snapshot", + "test:coverage": "rushx test -- --coverage", + "snapshot:update": "rushx test -- --update-snapshot", "api-extractor": "tsc && api-extractor run --local", "generate-doc": "api-documenter markdown -i temp -o docGen", "prettier": "prettier --write --config ../../.prettierrc \"**/*.js\" \"**/*.ts\"", "prettier:check": "prettier --check --config ../../.prettierrc \"**/*.js\" \"**/*.ts\"", "lint": "eslint \"*/**/*.{ts,tsx}\"", - "lint:fix": "npm run lint -- --fix", - "lint:quiet": "npm run lint -- --quiet", + "lint:fix": "rushx lint -- --fix", + "lint:quiet": "rushx lint -- --quiet", "prepack": "node scripts/cleanse-pkg \"prepublish,build,build:storybook,test,test:coverage,snapshot:update\"", "postpack": "node scripts/restore-pkg && copyfiles -E \"./*.tgz\" private-preview && copyfiles -u 2 -E \"docs/private-preview/README.md\" private-preview" }, @@ -69,6 +74,7 @@ "@mdx-js/react": "^1.6.22", "@microsoft/api-documenter": "~7.12.11", "@microsoft/api-extractor": "~7.13.2", + "@rollup/plugin-commonjs": "~17.1.0", "@storybook/addon-actions": "^6.1.1", "@storybook/addon-docs": "^6.1.18", "@storybook/addon-essentials": "^6.1.1", @@ -120,6 +126,9 @@ "react-test-renderer": "^16.14.0", "react": "^16.13.1", "regenerator-runtime": "^0.13.7", + "rollup": "~2.42.4", + "rollup-plugin-sourcemaps": "~0.6.3", + "rollup-plugin-svg": "~2.0.0", "source-map-explorer": "^2.5.0", "storybook-docs-toc": "~1.3.1", "styled-components": "~5.2.1", diff --git a/packages/communication-ui/rollup.config.js b/packages/communication-ui/rollup.config.js new file mode 100644 index 00000000000..83e01d781c9 --- /dev/null +++ b/packages/communication-ui/rollup.config.js @@ -0,0 +1,22 @@ +// © Microsoft Corporation. All rights reserved. + +import commonjs from '@rollup/plugin-commonjs'; +import sourcemaps from 'rollup-plugin-sourcemaps'; +import svg from 'rollup-plugin-svg'; +import Package from './package.json'; + +export default { + context: 'window', + external: [ + ...Object.keys(Package.dependencies), + ...Object.keys(Package.peerDependencies), + '@fluentui/react-northstar/dist/commonjs/components/Alert/Alert' + ], + input: './dist/dist-esm/index.js', + output: { + file: './dist/dist-cjs/index.js', + format: 'cjs', + sourcemap: true + }, + plugins: [commonjs(), sourcemaps(), svg()] +}; diff --git a/packages/communication-ui/src/components/index.ts b/packages/communication-ui/src/components/index.ts index 0e283112559..b1b13c798f9 100644 --- a/packages/communication-ui/src/components/index.ts +++ b/packages/communication-ui/src/components/index.ts @@ -4,17 +4,8 @@ import SendBox from './SendBox'; import TypingIndicator, { TypingIndicatorComponent } from './TypingIndicator'; import { GridLayoutComponent } from './GridLayout'; import ErrorBar, { ErrorBarComponent } from './ErrorBar'; -import { WithErrorHandling } from '../utils/WithErrorHandling'; -export { - SendBox, - TypingIndicator, - TypingIndicatorComponent, - GridLayoutComponent, - ErrorBar, - ErrorBarComponent, - WithErrorHandling -}; +export { SendBox, TypingIndicator, TypingIndicatorComponent, GridLayoutComponent, ErrorBar, ErrorBarComponent }; export { SendBoxComponent } from './SendBox'; export { ReadReceiptComponent } from './ReadReceipt'; diff --git a/packages/communication-ui/src/composites/GroupCall/ConfigurationScreen.tsx b/packages/communication-ui/src/composites/GroupCall/ConfigurationScreen.tsx index 1f439239d72..466369df4e1 100644 --- a/packages/communication-ui/src/composites/GroupCall/ConfigurationScreen.tsx +++ b/packages/communication-ui/src/composites/GroupCall/ConfigurationScreen.tsx @@ -1,7 +1,7 @@ // © Microsoft Corporation. All rights reserved. import React from 'react'; import { ErrorHandlingProps } from '../../providers/ErrorProvider'; -import { WithErrorHandling } from '../../components'; +import { WithErrorHandling } from '../../utils'; import { connectFuncsToContext, MapToCallConfigurationProps, SetupContainerProps } from '../../consumers'; import { CallConfiguration } from './CallConfiguration'; import { LocalDeviceSettings } from './LocalDeviceSettings'; diff --git a/packages/communication-ui/src/composites/GroupCall/RemoteVideoTile.tsx b/packages/communication-ui/src/composites/GroupCall/RemoteVideoTile.tsx index 667cd3b74bd..36afdab9418 100644 --- a/packages/communication-ui/src/composites/GroupCall/RemoteVideoTile.tsx +++ b/packages/communication-ui/src/composites/GroupCall/RemoteVideoTile.tsx @@ -2,7 +2,8 @@ import { Label } from '@fluentui/react'; import React from 'react'; -import { StreamMedia, VideoTile, WithErrorHandling } from '../../components'; +import { StreamMedia, VideoTile } from '../../components'; +import { WithErrorHandling } from '../../utils'; import { connectFuncsToContext, MapToRemoteVideoProps } from '../../consumers'; import { ErrorHandlingProps } from '../../providers'; import { disabledVideoHint, videoHint } from './styles/MediaGallery.styles'; diff --git a/packages/communication-ui/src/composites/OneToOneCall/CallListener.tsx b/packages/communication-ui/src/composites/OneToOneCall/CallListener.tsx index 3f36192fb78..2df1454fde5 100644 --- a/packages/communication-ui/src/composites/OneToOneCall/CallListener.tsx +++ b/packages/communication-ui/src/composites/OneToOneCall/CallListener.tsx @@ -4,8 +4,7 @@ import { Stack } from '@fluentui/react'; import React, { useEffect, useState } from 'react'; import { IncomingCallToast, IncomingCallToastProps } from './IncomingCallAlerts'; import { useIncomingCall, useMicrophone } from '../../hooks'; -import { useCallingContext } from '../../index'; -import { IncomingCallsProvider } from '../../providers'; +import { useCallingContext, IncomingCallsProvider } from '../../providers'; export type IncomingCallProps = { onIncomingCallAccepted?: () => void; diff --git a/packages/communication-ui/src/composites/OneToOneCall/MakeCallScreen.tsx b/packages/communication-ui/src/composites/OneToOneCall/MakeCallScreen.tsx index 2d51adcb6cf..53288ee1774 100644 --- a/packages/communication-ui/src/composites/OneToOneCall/MakeCallScreen.tsx +++ b/packages/communication-ui/src/composites/OneToOneCall/MakeCallScreen.tsx @@ -4,7 +4,7 @@ import { DefaultButton, IconButton, Stack, TextField } from '@fluentui/react'; import { CallIcon, VideoCameraEmphasisIcon } from '@fluentui/react-icons-northstar'; import copy from 'copy-to-clipboard'; import React, { useState } from 'react'; -import { useCallContext } from '../..'; +import { useCallContext } from '../../providers'; import { useOutgoingCall, useSubscribeToDevicePermission } from '../../hooks'; import { buttonIconStyle, diff --git a/packages/communication-ui/src/composites/OneToOneCall/RemoteVideoTile.tsx b/packages/communication-ui/src/composites/OneToOneCall/RemoteVideoTile.tsx index 0951e4bdc19..0c6eac38a2b 100644 --- a/packages/communication-ui/src/composites/OneToOneCall/RemoteVideoTile.tsx +++ b/packages/communication-ui/src/composites/OneToOneCall/RemoteVideoTile.tsx @@ -2,7 +2,8 @@ import { Label } from '@fluentui/react'; import React from 'react'; -import { StreamMedia, VideoTile, WithErrorHandling } from '../../components'; +import { StreamMedia, VideoTile } from '../../components'; +import { WithErrorHandling } from '../../utils'; import { connectFuncsToContext, MapToRemoteVideoProps } from '../../consumers'; import { ErrorHandlingProps } from '../../providers'; import { disabledVideoHint, videoHint } from './styles/MediaGallery1To1.styles'; diff --git a/packages/communication-ui/src/composites/common/consumers/MapToCallControlBarProps.ts b/packages/communication-ui/src/composites/common/consumers/MapToCallControlBarProps.ts index 4adca465740..9a821b20746 100644 --- a/packages/communication-ui/src/composites/common/consumers/MapToCallControlBarProps.ts +++ b/packages/communication-ui/src/composites/common/consumers/MapToCallControlBarProps.ts @@ -1,18 +1,16 @@ // © Microsoft Corporation. All rights reserved. import { HangupCallOptions, PermissionState as DevicePermissionState } from '@azure/communication-calling'; +import { useCallContext, useCallingContext } from '../../../providers'; +import { CommunicationUiErrorCode, CommunicationUiError } from '../../../types'; import { - useCallContext, - useCallingContext, useSubscribeToDevicePermission, useLocalVideo, useMicrophone, useScreenShare, useSubscribeToVideoDeviceList, - useGroupCall, - CommunicationUiErrorCode, - CommunicationUiError -} from '../../../'; + useGroupCall +} from '../../../hooks'; import { useCallback } from 'react'; diff --git a/packages/communication-ui/src/hooks/useFetchThread.test.ts b/packages/communication-ui/src/hooks/useFetchThread.test.ts index c6b46249bd1..fddf91f8dc2 100644 --- a/packages/communication-ui/src/hooks/useFetchThread.test.ts +++ b/packages/communication-ui/src/hooks/useFetchThread.test.ts @@ -11,7 +11,7 @@ const mockChatClient = (): ChatClientMock => { return createChatClient(); }; -jest.mock('../providers/ChatProvider', () => { +jest.mock('../providers/ChatProviderHelper', () => { return { useChatClient: jest.fn().mockImplementation( (): ChatClientMock => { diff --git a/packages/communication-ui/src/hooks/useFetchThread.ts b/packages/communication-ui/src/hooks/useFetchThread.ts index 66653d43584..12ccf798918 100644 --- a/packages/communication-ui/src/hooks/useFetchThread.ts +++ b/packages/communication-ui/src/hooks/useFetchThread.ts @@ -1,7 +1,7 @@ // © Microsoft Corporation. All rights reserved. import { useSetThread, useThreadId } from '../providers/ChatThreadProvider'; -import { useChatClient } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; import { useCallback } from 'react'; import { CommunicationUiErrorCode, CommunicationUiError } from '../types/CommunicationUiError'; diff --git a/packages/communication-ui/src/hooks/useFetchThreadMembers.test.ts b/packages/communication-ui/src/hooks/useFetchThreadMembers.test.ts index 17ad89921d6..d4d8c4051e6 100644 --- a/packages/communication-ui/src/hooks/useFetchThreadMembers.test.ts +++ b/packages/communication-ui/src/hooks/useFetchThreadMembers.test.ts @@ -45,11 +45,6 @@ jest.mock('../providers/ChatThreadProvider', () => { return mockThreadClient(); } ), - useChatClient: jest.fn().mockImplementation( - (): ChatClientMock => { - return mockChatClient(); - } - ), useSetUpdateThreadMembersError: jest.fn(() => jest.fn()), useSetThreadMembers: () => mockSetThreadMembers, useThreadId: () => 'abcde', @@ -57,13 +52,18 @@ jest.mock('../providers/ChatThreadProvider', () => { }; }); -jest.mock('../providers/ChatProvider', () => { +jest.mock('../providers/ChatProviderHelper', () => { return { useChatClient: jest.fn().mockImplementation( (): ChatClientMock => { return mockChatClient(); } - ), + ) + }; +}); + +jest.mock('../providers/ChatProvider', () => { + return { useUserId: () => mockCurrentUser }; }); diff --git a/packages/communication-ui/src/hooks/useFetchThreadMembers.ts b/packages/communication-ui/src/hooks/useFetchThreadMembers.ts index 25d54e290ed..6db93b7c824 100644 --- a/packages/communication-ui/src/hooks/useFetchThreadMembers.ts +++ b/packages/communication-ui/src/hooks/useFetchThreadMembers.ts @@ -2,7 +2,8 @@ import { ChatThreadMember } from '../types/ChatThreadMember'; import { useCallback } from 'react'; -import { useChatClient, useUserId } from '../providers/ChatProvider'; +import { useUserId } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; import { useChatThreadClient, useSetThreadMembers, diff --git a/packages/communication-ui/src/hooks/useSubscribeMessage.test.ts b/packages/communication-ui/src/hooks/useSubscribeMessage.test.ts index a3f7926bd89..fbec564a93d 100644 --- a/packages/communication-ui/src/hooks/useSubscribeMessage.test.ts +++ b/packages/communication-ui/src/hooks/useSubscribeMessage.test.ts @@ -16,13 +16,18 @@ const mockChatClient = (): ChatClientMock => { return chatClientMock; }; -jest.mock('../providers/ChatProvider', () => { +jest.mock('../providers/ChatProviderHelper', () => { return { useChatClient: jest.fn().mockImplementation( (): ChatClientMock => { return mockChatClient(); } - ), + ) + }; +}); + +jest.mock('../providers/ChatProvider', () => { + return { useUserId: () => 'dummyValueNotUsedByTest' }; }); diff --git a/packages/communication-ui/src/hooks/useSubscribeMessage.ts b/packages/communication-ui/src/hooks/useSubscribeMessage.ts index de750b50794..61ac64c5547 100644 --- a/packages/communication-ui/src/hooks/useSubscribeMessage.ts +++ b/packages/communication-ui/src/hooks/useSubscribeMessage.ts @@ -4,7 +4,8 @@ import { ChatMessage, ChatMessagePriority } from '@azure/communication-chat'; import { useCallback, useEffect } from 'react'; import { ChatMessageReceivedEvent } from '@azure/communication-signaling'; -import { useChatClient, useUserId } from '../providers/ChatProvider'; +import { useUserId } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; import { useSetChatMessages, useThreadId } from '../providers/ChatThreadProvider'; const subscribedTheadIdSet = new Set(); diff --git a/packages/communication-ui/src/hooks/useSubscribeReadReceipt.ts b/packages/communication-ui/src/hooks/useSubscribeReadReceipt.ts index af9158ff469..6faa16ce009 100644 --- a/packages/communication-ui/src/hooks/useSubscribeReadReceipt.ts +++ b/packages/communication-ui/src/hooks/useSubscribeReadReceipt.ts @@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react'; import { ReadReceipt } from '@azure/communication-chat'; -import { useChatClient } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; import { useFetchReadReceipts } from './useFetchReadReceipts'; import { useSetReceipts, useThreadId } from '../providers/ChatThreadProvider'; import { useTriggerOnErrorCallback } from '../providers/ErrorProvider'; diff --git a/packages/communication-ui/src/hooks/useSubscribeTypingNotification.test.ts b/packages/communication-ui/src/hooks/useSubscribeTypingNotification.test.ts index 06adb25951c..be1475c955e 100644 --- a/packages/communication-ui/src/hooks/useSubscribeTypingNotification.test.ts +++ b/packages/communication-ui/src/hooks/useSubscribeTypingNotification.test.ts @@ -19,7 +19,7 @@ const mockChatClient = (): ChatClientMock => { return chatClientMock; }; -jest.mock('../providers/ChatProvider', () => { +jest.mock('../providers/ChatProviderHelper', () => { return { useChatClient: jest.fn().mockImplementation( (): ChatClientMock => { diff --git a/packages/communication-ui/src/hooks/useSubscribeTypingNotification.ts b/packages/communication-ui/src/hooks/useSubscribeTypingNotification.ts index 4332471414c..43daada5d04 100644 --- a/packages/communication-ui/src/hooks/useSubscribeTypingNotification.ts +++ b/packages/communication-ui/src/hooks/useSubscribeTypingNotification.ts @@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react'; import { TypingIndicatorReceivedEvent } from '@azure/communication-signaling'; -import { useChatClient } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; export type TypingNotification = { from: string; diff --git a/packages/communication-ui/src/hooks/useUpdateThreadTopicName.ts b/packages/communication-ui/src/hooks/useUpdateThreadTopicName.ts index 1728dd86031..3d66e12542a 100644 --- a/packages/communication-ui/src/hooks/useUpdateThreadTopicName.ts +++ b/packages/communication-ui/src/hooks/useUpdateThreadTopicName.ts @@ -7,7 +7,7 @@ import { } from '../types/CommunicationUiError'; import { getErrorFromAcsResponseCode } from '../utils/SDKUtils'; import { OK } from '../constants'; -import { useChatClient } from '../providers/ChatProvider'; +import { useChatClient } from '../providers/ChatProviderHelper'; import { useChatThreadClient, useSetThread, useThreadId } from '../providers/ChatThreadProvider'; export const useUpdateThreadTopicName = (): ((topicName: string) => Promise) => { diff --git a/packages/communication-ui/src/providers/ChatProvider.tsx b/packages/communication-ui/src/providers/ChatProvider.tsx index 0f77502cc18..d8e8c03416c 100644 --- a/packages/communication-ui/src/providers/ChatProvider.tsx +++ b/packages/communication-ui/src/providers/ChatProvider.tsx @@ -1,6 +1,6 @@ // © Microsoft Corporation. All rights reserved. -import React, { Dispatch, SetStateAction, createContext, useContext, useState, useEffect } from 'react'; +import React, { useContext, useState, useEffect } from 'react'; import { ChatClient } from '@azure/communication-chat'; import { ChatThreadProvider } from './ChatThreadProvider'; @@ -15,15 +15,7 @@ import { CommunicationUiErrorFromError, CommunicationUiError } from '../types/CommunicationUiError'; - -export type ChatContextType = { - chatClient?: ChatClient; - setChatClient: Dispatch>; - userId: string; - setUserId: Dispatch>; - displayName: string; - setDisplayName: Dispatch>; -}; +import { ChatContext, ChatContextType } from './ChatProviderHelper'; let contextState: ChatContextType; @@ -31,8 +23,6 @@ export const getChatContextState = (): ChatContextType => { return contextState; }; -export const ChatContext = createContext(undefined); - const CHATPROVIDER_LOADING_STATE = 1; const CHATPROVIDER_LOADED_STATE = 2; @@ -113,23 +103,6 @@ const ChatProviderBase = (props: ChatProviderProps & ErrorHandlingProps): JSX.El export const ChatProvider = (props: ChatProviderProps & ErrorHandlingProps): JSX.Element => WithErrorHandling(ChatProviderBase, props); -export const useChatClient = (): ChatClient => { - const chatContext = useContext(ChatContext); - if (chatContext === undefined) { - throw new CommunicationUiError({ - message: 'UseChatClient invoked when ChatContext not initialized', - code: CommunicationUiErrorCode.CONFIGURATION_ERROR - }); - } - if (chatContext.chatClient === undefined) { - throw new CommunicationUiError({ - message: 'UseChatClient invoked with ChatClient not initialized', - code: CommunicationUiErrorCode.CONFIGURATION_ERROR - }); - } - return chatContext.chatClient; -}; - export const useSetChatClient = (): ((chatClient: ChatClient) => void) => { const chatContext = useContext(ChatContext); if (chatContext === undefined) { diff --git a/packages/communication-ui/src/providers/ChatProviderHelper.tsx b/packages/communication-ui/src/providers/ChatProviderHelper.tsx new file mode 100644 index 00000000000..62960aba9c1 --- /dev/null +++ b/packages/communication-ui/src/providers/ChatProviderHelper.tsx @@ -0,0 +1,43 @@ +// © Microsoft Corporation. All rights reserved. + +/** + * This file was created to extract circular dependencies between ChatProvider and ChatThreadProvider that both + * had dependencies on each other. + */ + +import { ChatClient } from '@azure/communication-chat'; +import { Dispatch, SetStateAction, useContext, createContext } from 'react'; +import { CommunicationUiErrorCode, CommunicationUiError } from '../types/CommunicationUiError'; + +// The following need explicitly imported to avoid api-extractor issues. +// These can be removed once https://github.com/microsoft/rushstack/pull/1916 is fixed. +// @ts-ignore +import React from 'react'; + +export const ChatContext = createContext(undefined); + +export type ChatContextType = { + chatClient?: ChatClient; + setChatClient: Dispatch>; + userId: string; + setUserId: Dispatch>; + displayName: string; + setDisplayName: Dispatch>; +}; + +export const useChatClient = (): ChatClient => { + const chatContext = useContext(ChatContext); + if (chatContext === undefined) { + throw new CommunicationUiError({ + message: 'UseChatClient invoked when ChatContext not initialized', + code: CommunicationUiErrorCode.CONFIGURATION_ERROR + }); + } + if (chatContext.chatClient === undefined) { + throw new CommunicationUiError({ + message: 'UseChatClient invoked with ChatClient not initialized', + code: CommunicationUiErrorCode.CONFIGURATION_ERROR + }); + } + return chatContext.chatClient; +}; diff --git a/packages/communication-ui/src/providers/ChatThreadProvider.tsx b/packages/communication-ui/src/providers/ChatThreadProvider.tsx index 06387e7b782..18da62c647e 100644 --- a/packages/communication-ui/src/providers/ChatThreadProvider.tsx +++ b/packages/communication-ui/src/providers/ChatThreadProvider.tsx @@ -4,7 +4,7 @@ import { ChatMessage, ChatThread, ChatThreadClient, ChatThreadMember, ReadReceip import { Spinner } from '@fluentui/react'; import { WithErrorHandling } from '../utils/WithErrorHandling'; import React, { Dispatch, SetStateAction, createContext, useContext, useState, useEffect } from 'react'; -import { useChatClient } from './ChatProvider'; +import { useChatClient } from './ChatProviderHelper'; import { ErrorHandlingProps } from './ErrorProvider'; import { CommunicationUiErrorCode, diff --git a/packages/communication-ui/src/providers/IncomingCallsProvider.tsx b/packages/communication-ui/src/providers/IncomingCallsProvider.tsx index baf78dcc406..021e10e1dad 100644 --- a/packages/communication-ui/src/providers/IncomingCallsProvider.tsx +++ b/packages/communication-ui/src/providers/IncomingCallsProvider.tsx @@ -4,7 +4,7 @@ import { Call, CollectionUpdatedEvent } from '@azure/communication-calling'; import React, { createContext, useState } from 'react'; import { useValidContext } from '../utils'; import { useEffect } from 'react'; -import { useCallingContext } from '../providers'; +import { useCallingContext } from './CallingProvider'; export type IncomingCallsContextType = { incomingCalls: Call[]; diff --git a/packages/communication-ui/src/providers/index.ts b/packages/communication-ui/src/providers/index.ts index d8d4070ddfe..d95ed1e961d 100644 --- a/packages/communication-ui/src/providers/index.ts +++ b/packages/communication-ui/src/providers/index.ts @@ -3,6 +3,7 @@ export * from './CallProvider'; export * from './CallingProvider'; export * from './ChatProvider'; +export * from './ChatProviderHelper'; export * from './ChatThreadProvider'; export * from './IncomingCallsProvider'; export * from './ErrorProvider'; diff --git a/packages/communication-ui/src/utils/TypeConverter.ts b/packages/communication-ui/src/utils/TypeConverter.ts index 76ed2a3ea3f..132f7c305c7 100644 --- a/packages/communication-ui/src/utils/TypeConverter.ts +++ b/packages/communication-ui/src/utils/TypeConverter.ts @@ -3,7 +3,7 @@ import { RemoteParticipant as RemoteParticipantFromSDK } from '@azure/communication-calling'; import { ListParticipant } from '../types/ListParticipant'; import { GalleryParticipant } from '../types/GalleryParticipant'; -import { getACSId } from '../utils'; +import { getACSId } from './SDKUtils'; export const convertSdkRemoteParticipantToGalleryParticipant = ( remoteParticipantFromSDK: RemoteParticipantFromSDK diff --git a/packages/communication-ui/tsconfig.json b/packages/communication-ui/tsconfig.json index aa4fa5c9fe9..2f7f49b1663 100644 --- a/packages/communication-ui/tsconfig.json +++ b/packages/communication-ui/tsconfig.json @@ -6,7 +6,7 @@ "declaration": true, "declarationMap": true, "sourceMap": true, - "outDir": "./dist/", + "outDir": "./dist/dist-esm", "strict": true, "noImplicitAny": false, // disable for now for storybook "strictFunctionTypes": true, @@ -25,20 +25,6 @@ "isolatedModules": true, "moduleResolution": "node" }, - "typedocOptions": { - "mode": "files", - "inputFiles": ["./dist/publicSDK.d.ts"], - "out": "docs/typedoc", - "includeDeclarations": true, - "excludeExternals": true, - "excludePrivate": true, - "excludeProtected": true, - "ignoreCompilerErrors": true, - "stripInternal": true, - "excludeNotExported": true, - "name": "UI SDK", - "readme": "none" - }, "include": ["src/**/*"], "exclude": ["dist", "node_modules"] } diff --git a/rush.json b/rush.json index 3f7585dae3f..7b9ac3f49f4 100644 --- a/rush.json +++ b/rush.json @@ -1,6 +1,6 @@ { "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush.schema.json", - "rushVersion": "5.40.5", + "rushVersion": "5.40.7", "pnpmVersion": "5.17.3", "pnpmOptions": { "strictPeerDependencies": true @@ -38,22 +38,22 @@ "reviewCategory": "prototypes" }, { - "packageName": "acs-calling-sample", + "packageName": "calling", "projectFolder": "samples/Calling", "reviewCategory": "prototypes" }, { - "packageName": "acs-chat-sample", + "packageName": "chat", "projectFolder": "samples/Chat", "reviewCategory": "prototypes" }, { - "packageName": "acs-one-to-one-call-sample", + "packageName": "one-to-one-call", "projectFolder": "samples/OneToOneCall", "reviewCategory": "prototypes" }, { - "packageName": "acs-server-sample", + "packageName": "server", "projectFolder": "samples/Server", "reviewCategory": "prototypes" }, diff --git a/samples/Calling/package.json b/samples/Calling/package.json index 490d02d2e1b..270caef7cd1 100644 --- a/samples/Calling/package.json +++ b/samples/Calling/package.json @@ -1,14 +1,14 @@ { - "name": "acs-calling-sample", + "name": "calling", "version": "0.0.1", "private": true, "description": "This is a sample application to show how the ACS Calling Web SDK can be used to build a group calling experience. The client-side application is a React based user interface which uses React Hooks for handling complex state while leveraging Microsoft Fluent UI for how things look.", "scripts": { "build": "react-scripts build", "package": "copyfiles -E \"build/**/*\" dist && copyfiles -E -u 3 \"../Server/dist/**/*\" dist", - "start": "concurrently \"cd ../Server && npm run start:dev\" \"rush build:watch -T acs-calling-sample\" \"npm run start:app\"", + "start": "rush build -T calling && concurrently \"cd ../Server && rushx start:dev\" \"rush build:watch -T calling\" \"rushx start:app\"", "start:app": "rimraf ./build && react-scripts start", - "start:debug": "concurrently \"cd ../Server && npm run start:debug\" \"rush build:watch -T acs-calling-sample\" \"npm run start\"", + "start:debug": "concurrently \"cd ../Server && rushx start:debug\" \"rush build:watch -T calling\" \"rushx start\"", "start:prod": "node dist/server.js", "test": "react-scripts test --env=jsdom --watchAll=false", "test:watch": "react-scripts test --env=jsdom", diff --git a/samples/Chat/package.json b/samples/Chat/package.json index 4a81375601c..01e4ab8151f 100644 --- a/samples/Chat/package.json +++ b/samples/Chat/package.json @@ -1,14 +1,14 @@ { - "name": "acs-chat-sample", + "name": "chat", "version": "0.0.1", "private": true, "description": "This is a sample application to show how the ACS Chat Web SDK can be used to build a group chat experience. The client-side application is a React based user interface which uses React Hooks for handling complex state while leveraging Microsoft Fluent UI for how things look.", "scripts": { "build": "react-scripts build", "package": "copyfiles -E \"build/**/*\" dist && copyfiles -E -u 3 \"../Server/dist/**/*\" dist", - "start": "concurrently \"cd ../Server && npm run start:dev\" \"rush build:watch -T acs-chat-sample\" \"npm run start:app\"", + "start": "concurrently \"cd ../Server && rushx start:dev\" \"rush build:watch -T chat\" \"rushx start:app\"", "start:app": "rimraf ./build && react-scripts start", - "start:debug": "concurrently \"cd ../Server && npm run start:debug\" \"rush build:watch -T acs-chat-sample\" \"npm run start\"", + "start:debug": "concurrently \"cd ../Server && rushx start:debug\" \"rush build:watch -T chat\" \"rushx start\"", "start:prod": "node dist/server.js", "test": "react-scripts test --env=jsdom --watchAll=false", "test:watch": "react-scripts test --env=jsdom", diff --git a/samples/OneToOneCall/package.json b/samples/OneToOneCall/package.json index 1016e50b02f..499e747c7b8 100644 --- a/samples/OneToOneCall/package.json +++ b/samples/OneToOneCall/package.json @@ -1,21 +1,21 @@ { - "name": "acs-one-to-one-call-sample", + "name": "one-to-one-call", "version": "0.0.1", "private": true, "description": "", "scripts": { "build": "react-scripts build", "package": "copyfiles -E \"build/**/*\" dist && copyfiles -E -u 3 \"../Server/dist/**/*\" dist", - "start": "concurrently \"cd ../Server && npm run start:dev\" \"rush build:watch -T acs-one-to-one-call-sample\" \"npm run start:app\"", + "start": "concurrently \"cd ../Server && rushx start:dev\" \"rush build:watch -T one-to-one-call\" \"rushx start:app\"", "start:app": "rimraf ./build && react-scripts start", - "start:debug": "concurrently \"cd ../Server && npm run start:debug\" \"rush build:watch -T acs-one-to-one-call-sample\" \"npm run start\"", + "start:debug": "concurrently \"cd ../Server && rushx start:debug\" \"rush build:watch -T one-to-one-call\" \"rushx start\"", "start:prod": "node dist/server.js", "build:storybook": "build-storybook -s public", "storybook": "start-storybook -p 6006 -s public --no-manager-cache", "test": "react-scripts test --env=jsdom --watchAll=false", "test:coverage": "react-scripts test --env=jsdom --coverage", "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache", - "snapshot:update": "npm run test -- --update-snapshot", + "snapshot:update": "rushx test -- --update-snapshot", "prettier": "prettier --write --config ../../.prettierrc **/*.js **/*.ts", "prettier:check": "prettier --check --config ../../.prettierrc **/*.js **/*.ts", "lint": "eslint */**/*.{ts,tsx}", diff --git a/samples/Server/package.json b/samples/Server/package.json index 115091c4091..f8ce747143e 100644 --- a/samples/Server/package.json +++ b/samples/Server/package.json @@ -1,5 +1,5 @@ { - "name": "acs-server-sample", + "name": "server", "version": "0.0.1", "private": true, "scripts": {