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]>

Author: compulim

.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:

.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:

.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*

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)

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.

__tests__/__image_snapshots__/html/hooks-use-render-activity-js-use-render-activity-should-render-activity-1-snap.png

@@ -114,6 +114,7 @@
         expect(document.activeElement).toBe(
           document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadButton1}"]`)
         );
+        await pageConditions.scrollToBottomCompleted();
         await host.snapshot();
 
         // THEN: Close keypad

__tests__/__image_snapshots__/html/hooks-use-render-activity-status-js-use-render-activity-status-should-render-activity-status-1-snap.png

@@ -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();