Emit ESM build via tsup (#5148)

* Rename to .jsx * Ignore /dist/ * Rename to .jsx * Rename to .jsx * Rename to .jsx * Revert "Rename to .jsx" This reverts commit 324f8f0. * Revert "Rename to .jsx" This reverts commit 04a77e5. * Revert "Rename to .jsx" This reverts commit d68dea2. * Revert "Rename to .jsx" This reverts commit d111d1b. * Compile globalize under /src/ * Remove connectToWebChat * Fix main field * Remove connectToWebChat * Fix globalize * Rename to .ts * Rename to .ts * Use internal Observable for typing * Improve type portability * Remove unneeded @ts-expect-error * Fix types * Remove unneeded polyfill * Fix typing * Fix props typing * Use internal hook * Improve type portability * Use ESNext * Fix typing * Fix typing and improve type portability * Use globalThis * Fix typing * Use @types/dom-speech-recognition * Add .js to import * Add tsup * Typo * Fix precommit * Add fluent-theme * Update tsd * Fix deprecated tests * Fix flakiness * Use ESM for Webpack * Add instrumentation to tsup * Fix ES5 build * Skip *.worker.js * Hack synthetic import * Move NODE_ENV to run * Instrument TypeScript files * Add @istanbuljs/nyc-config-typescript * Our own istanbuljs plugin * Add local dependencies * Use babel.profile.config.json * Add @babel/preset-react * Inherit base ESBuild plug-ins * Update YouTube player * Don't collect coverage under packages/test * Add coverage to fluent-theme * Skip coverage from packages/test * Remove coveragePathIgnorePatterns * Add latest tag style * Add default exports * Add types field * Add pack-all script * Remove older tag * Remove older tag * Revert import from index * Clean up * Clean up * Better comment * Add type * Clean up naming * Remove commented code * Mark microsoft-cognitiveservices-speech-sdk as no external * Add entry * Add 4.17.0 * Add theme pack * Add theme pack support * Update meta tag * Move default to the last * Zip without directory * Tag CJS build * Update README.md Co-authored-by: Eugene <[email protected]> * Rename transpiler to build-tool * Update babel.config.json for build_tool --------- Co-authored-by: Eugene <[email protected]>
microsoft · Apr 30, 2024 · 73ee44a · 73ee44a
1 parent edca85d
commit 73ee44a
Show file tree

Hide file tree

Showing 162 changed files with 4,600 additions and 1,687 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -118,6 +118,16 @@ body:
         - Others or unrelated
     validations:
       required: true
+  - type: dropdown
+    id: theme-pack
+    attributes:
+      label: Which theme pack does this issue affect?
+      multiple: true
+      options:
+        - I did not test it on other theme packs
+        - Fluent UI
+    validations:
+      required: true
   - type: input
     id: url
     attributes:

diff --git a/.github/workflows/pull-request-validation.yml b/.github/workflows/pull-request-validation.yml
@@ -48,7 +48,7 @@ jobs:
 
       - run: npm run bootstrap
 
-      - run: npm run build --if-present
+      - run: npm run build --if-present # Add instrumentation code
 
       - name: Pack Docker artifact
         run: |
@@ -187,12 +187,20 @@ jobs:
 
       - run: npm run build --if-present
 
-      - name: Run tsd under packages/bundle
-        run: ./node_modules/.bin/tsd
+      - name: Run tsd under packages/bundle (CJS)
+        run: ./node_modules/.bin/tsd -t ./lib/index.d.ts
+        working-directory: ./packages/bundle
+
+      - name: Run tsd under packages/bundle (ESM)
+        run: ./node_modules/.bin/tsd -t ./dist/botframework-webchat.d.mts
         working-directory: ./packages/bundle
 
-      - name: Run tsd under packages/core
-        run: ./node_modules/.bin/tsd
+      - name: Run tsd under packages/core (CJS)
+        run: ./node_modules/.bin/tsd -t ./lib/index.d.ts
+        working-directory: ./packages/core
+
+      - name: Run tsd under packages/core (ESM)
+        run: ./node_modules/.bin/tsd -t ./dist/botframework-webchat-core.d.mts
         working-directory: ./packages/core
 
   html-test:

diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,12 @@
 /__tests__/__image_snapshots__/**/__diff_output__
 /.env
+/*.tgz
 /coverage
 /debug.log
 /gh-pages
 /lerna-debug.log
 /node_modules
+/tarball.zip
 
 # Do not commit binaries
 /chromedriver*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  `useSendMessage` hook is updated to support sending attachments with a message. To reduce complexity, the `useSendFiles` hook is being deprecated. The hook will be removed on or after 2026-04-03
 -  `styleOptions.uploadThumbnailHeight` and `styleOptions.uploadThumbnailWidth` must be a `number` of pixels
 -  `useSuggestedActions` type is updated to align with its actual implementation, by [@OEvgeny](https://github.com/OEvgeny), in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
+-  Removed deprecated code: `connect*`, `useRenderActivity`, `useRenderActivityStatus`, `useRenderAvatar`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Added named exports in both CommonJS and ES Modules module format, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 
 ### Added
 
@@ -54,18 +56,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  (Experimental) Added `<LocalizeString />` component which can be used to localize strings, by [@OEvgeny](https://github.com/OEvgeny) in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
+-  Added `moduleFormat` and `transpiler` build info to `<meta>` tag, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 
 ### Fixed
 
 -  Fixes [#5050](https://github.com/microsoft/BotFramework-WebChat/issues/5050). Fixed focus should not blur briefly after tapping on a suggested action, by [@compulim](https://github.com/compulim), in PR [#5097](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5097)
 -  Fixes [#5111](https://github.com/microsoft/BotFramework-WebChat/issues/5111). Fixed keyboard help screen to use HTML description list, by [@compulim](https://github.com/compulim), in PR [#5116](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5116)
 -  Fixes [#5080](https://github.com/microsoft/BotFramework-WebChat/issues/5080). Fixed `dateToLocaleISOString` for handling sub-hour, by [@marclundgren](https://github.com/marclundgren), in PR [#5114](https://github.com/microsoft/BotFramework-WebChat/pull/5114)
 -  Fixes [#5146](https://github.com/microsoft/BotFramework-WebChat/issues/5146). Fixed chat history focus indicator should not show up on tap, by [@OEvgeny](https://github.com/OEvgeny), in PR [#5145](https://github.com/microsoft/BotFramework-WebChat/pull/5145)
+-  Fixes type portability issues by exporting types from all exported code, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Fixes missing exports of `useNotifications`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 
 ### Changed
 
 -  Moved pull request validation pipeline to GitHub Actions, by [@compulim](https://github.com/compulim), in PR [#4976](https://github.com/microsoft/BotFramework-WebChat/pull/4976)
--  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973) and PR [#5115](https://github.com/microsoft/BotFramework-WebChat/pull/5115)
+-  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973), PR [#5115](https://github.com/microsoft/BotFramework-WebChat/pull/5115), and PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148)
    -  Notes: Some components/features in Adaptive Cards are in preview and not ready for production use. Web Chat does not support these components and features
    -  Production dependencies
       -  [`[email protected]`](https://npmjs.com/package/adaptivecards)
@@ -82,7 +87,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Development dependencies
       -  [`@types/[email protected]`](https://npmjs.com/package/@types/dom-speech-recognition)
       -  [`@types/[email protected]`](https://npmjs.com/package/@types/node)
-      -  [`@types/react@18.2.42`](https://npmjs.com/package/@types/react)
+      -  [`@types/react@16.14.60`](https://npmjs.com/package/@types/react)
       -  [`@typescript-eslint/[email protected]`](https://npmjs.com/package/@typescript-eslint/eslint-plugin)
       -  [`@typescript-eslint/[email protected]`](https://npmjs.com/package/@typescript-eslint/parser)
       -  [`[email protected]`](https://npmjs.com/package/axe-core)

diff --git a/README.md b/README.md
@@ -19,6 +19,41 @@ Web Chat supports [Content Security Policy (CSP)](https://developer.mozilla.org/
 
 > This section points out important version notes. For further information, please see the related links and check the [`CHANGELOG.md`](https://github.com/microsoft/BotFramework-WebChat/blob/main/CHANGELOG.md)
 
+### 4.17.0 notable changes
+
+#### Debut of ES Modules
+
+Web Chat now exports as ES Modules (named exports) along with CommonJS (named and unnamed exports).
+
+#### Improvement to file upload experience
+
+End-user can now add a message and confirm before uploading their file to the bot. To opt-out of the new experience, pass `sendAttachmentOn: 'send'` in style options.
+
+#### Theme pack support
+
+We are excited to add theme pack support. Developers can now pack all their customization in a single package and publish it to NPM.
+
+#### Experimental Fluent UI theme pack
+
+We are excited to announce Fluent UI theme pack is in the work and is currently in experimental phase. This theme pack is designed for web developers who want to bring a native Copilot user experience to their customers.
+
+We will continue to add new features and support both white-label experience and Fluent UI experience with the same level of parity.
+
+You can wrap Web Chat with `<FluentThemeProvider>` to try out the new experience.
+
+```tsx
+import ReactWebChat from 'botframework-webchat';
+import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
+
+export default function MyComponent() {
+   return (
+      <FluentThemeProvider>
+         <ReactWebChat />
+      </FluentThemeProvider>
+   );
+}
+```
+
 ### 4.16.1 notable changes
 
 Web Chat now supports [Adaptive Cards schema up to 1.6](https://adaptivecards.io/explorer/). Some features in Adaptive Cards are in preview or designed to use outside of Bot Framework. Web Chat does not support these features.

diff --git a/...ks-use-render-activity-js-use-render-activity-should-render-activity-1-snap.png b/...ks-use-render-activity-js-use-render-activity-should-render-activity-1-snap.png
diff --git a/...y-status-js-use-render-activity-status-should-render-activity-status-1-snap.png b/...y-status-js-use-render-activity-status-should-render-activity-status-1-snap.png
diff --git a/...ml/hooks-use-render-avatar-js-use-render-avatar-should-render-avatar-1-snap.png b/...ml/hooks-use-render-avatar-js-use-render-avatar-should-render-avatar-1-snap.png
diff --git a/__tests__/html/fluentTheme/fluentThemeFallback.dark.html b/__tests__/html/fluentTheme/fluentThemeFallback.dark.html
@@ -114,6 +114,7 @@
         expect(document.activeElement).toBe(
           document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadButton1}"]`)
         );
+        await pageConditions.scrollToBottomCompleted();
         await host.snapshot();
 
         // THEN: Close keypad

diff --git a/__tests__/html/fluentTheme/simple.html b/__tests__/html/fluentTheme/simple.html
@@ -40,9 +40,16 @@
         await pageConditions.numActivitiesShown(1);
 
         // THEN: Fluent theme should be loaded.
-        expect(
-          document.querySelector('meta[name="botframework-webchat-fluent-theme:version"]').getAttribute('name')
-        ).toBeTruthy();
+        const buildInfo = Object.fromEntries(
+          document
+            .querySelector('head > meta[name="botframework-webchat:fluent-theme"]')
+            .content.split(';')
+            .map(value => value.trim().split('='))
+        );
+
+        expect(buildInfo).toHaveProperty('build-tool', 'tsup');
+        expect(buildInfo).toHaveProperty('module-format', 'esmodules');
+        expect(buildInfo.version).toMatch(/^\d+\.\d+\.\d+($|-)/u);
 
         expect(window.WebChat.FluentThemeProvider).toBeTruthy();
 

diff --git a/__tests__/html/fluentTheme/telephoneKeypad.showHide.html b/__tests__/html/fluentTheme/telephoneKeypad.showHide.html
@@ -50,6 +50,7 @@
         expect(document.activeElement).toBe(
           document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadButton1}"]`)
         );
+        await pageConditions.scrollToBottomCompleted();
         await host.snapshot();
 
         // WHEN: ESCAPE key is pressed.

diff --git a/__tests__/html/fluentTheme/telephoneKeypad.tap.html b/__tests__/html/fluentTheme/telephoneKeypad.tap.html
@@ -58,6 +58,7 @@
         expect(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButton5)).toBeTruthy();
         expect(document.activeElement).toBe(pageElements.byTestId(WebChat.testIds.sendBoxTelephoneKeypadButton5));
 
+        await pageConditions.scrollToBottomCompleted();
         await host.snapshot();
       });
     </script>

diff --git a/__tests__/html/hooks.useRenderActivity.html b/__tests__/html/hooks.useRenderActivity.html
diff --git a/__tests__/html/hooks.useRenderActivity.js b/__tests__/html/hooks.useRenderActivity.js
diff --git a/__tests__/html/hooks.useRenderActivityStatus.html b/__tests__/html/hooks.useRenderActivityStatus.html
diff --git a/__tests__/html/hooks.useRenderActivityStatus.js b/__tests__/html/hooks.useRenderActivityStatus.js