Skip to content

Commit 6bebdf3

Browse files
compulimcompulim
committed
Support fat module
1 parent 1ae8f70 commit 6bebdf3

47 files changed

Lines changed: 333 additions & 120 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎__tests__/html2/simple/fatModule/fluentTheme.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
<style type="text/css">
8+
/* TODO: [P*] Can we eliminate this style? */
9+
.fui-FluentProvider,
10+
.webchat-fluent {
11+
height: 100%;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<main id="webchat"></main>
17+
<script type="importmap">
18+
{
19+
"imports": {
20+
"@fluentui/react-components": "https://esm.sh/@fluentui/react-components?deps=react@18.3.1&exports=FluentProvider,createDarkTheme,webLightTheme",
21+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
22+
"botframework-webchat/internal": "/__dist__/packages/bundle/dist/botframework-webchat/internal.mjs",
23+
"botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/dist/botframework-webchat-fluent-theme.mjs",
24+
"react": "https://esm.sh/react@18",
25+
"react-dom": "https://esm.sh/react-dom@18",
26+
"react-dom/": "https://esm.sh/react-dom@18/"
27+
}
28+
}
29+
</script>
30+
<script type="module">
31+
import React from 'react';
32+
33+
// We should allow using React from environment.
34+
// When web devs import Web Chat as <script type="module">, we want to enable customization.
35+
// Customization requires React.createElement() and calling some hooks.
36+
window.React = React;
37+
</script>
38+
<script type="module">
39+
import { FluentProvider, createDarkTheme, webLightTheme } from '@fluentui/react-components';
40+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
41+
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
42+
import { createElement } from 'react';
43+
import { createRoot } from 'react-dom/client';
44+
45+
const { useStyleOptions } = hooks;
46+
const {
47+
testHelpers: { createDirectLineEmulator }
48+
} = window;
49+
50+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
51+
window.WebChat = { createStoreWithOptions };
52+
53+
run(async function () {
54+
const { directLine, store } = createDirectLineEmulator();
55+
56+
const fluentTheme = {
57+
...createDarkTheme({
58+
10: '#12174c',
59+
20: '#1a1f5b',
60+
30: '#21276a',
61+
40: '#293079',
62+
50: '#303788',
63+
60: '#384097',
64+
70: '#4049a7',
65+
80: '#151e80',
66+
90: '#4f59c5',
67+
100: '#5661d4',
68+
110: '#5e69e3',
69+
120: '#7982e8',
70+
130: '#949bec',
71+
140: '#afb5f1',
72+
150: '#c9cdf6',
73+
160: '#e4e6fa'
74+
}),
75+
colorNeutralBackground1Disabled: '#101010',
76+
colorNeutralBackground1Hover: '#101010',
77+
colorNeutralForeground5: '#424242'
78+
};
79+
80+
createRoot(document.getElementsByTagName('main')[0]).render(
81+
createElement(
82+
FluentProvider,
83+
{ className: 'fui-FluentProvider', theme: fluentTheme },
84+
createElement(
85+
FluentThemeProvider,
86+
{ variant: 'fluent' },
87+
createElement(ReactWebChat, { directLine, store })
88+
)
89+
)
90+
);
91+
92+
await pageConditions.uiConnected();
93+
94+
await directLine.emulateIncomingActivity('Hello, World!');
95+
96+
await pageConditions.numActivitiesShown(1);
97+
98+
await host.snapshot('local');
99+
});
100+
</script>
101+
</body>
102+
</html>

‎__tests__/html2/simple/fatModule/fluentTheme.html.snap-1.png‎

9.04 KB
Loading

‎__tests__/html2/simple/fatModule/supportPolymiddleware.reactDOMRender.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{
1212
"imports": {
1313
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14-
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat.middleware.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
1515
"react": "https://esm.sh/react@18",
1616
"react-dom": "https://esm.sh/react-dom@18",
1717
"react-dom/": "https://esm.sh/react-dom@18/"

‎__tests__/html2/simple/fatModule/supportPolymiddleware.renderWebChat.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
{
1212
"imports": {
1313
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14-
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat.middleware.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
1515
"react": "https://esm.sh/react@18",
1616
"react-dom": "https://esm.sh/react-dom@18"
1717
}

‎package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/bundle/internal.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// This is required for Webpack 4 which does not support named exports.
2+
// eslint-disable-next-line no-undef
3+
module.exports = require('./dist/botframework-webchat.internal.js');

‎packages/bundle/package.json‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"name": "botframework-webchat",
33
"version": "0.0.0-0",
44
"description": "A highly-customizable web-based chat client for Azure Bot Services.",
5-
"main": "./dist/botframework-webchat.js",
6-
"types": "./dist/botframework-webchat.d.ts",
5+
"main": "./exports/botframework-webchat.js",
6+
"types": "./exports/botframework-webchat.d.ts",
77
"exports": {
88
".": {
99
"import": {
@@ -16,15 +16,26 @@
1616
"default": "./exports/botframework-webchat.js"
1717
}
1818
},
19+
"./internal": {
20+
"import": {
21+
"bundle // TODO: [P*] Think if we should export fat/bundled using conditions": "./dist/botframework-webchat/internal.d.mts",
22+
"types": "./exports/botframework-webchat/internal.d.mts",
23+
"default": "./exports/botframework-webchat/internal.mjs"
24+
},
25+
"require": {
26+
"types": "./exports/botframework-webchat/internal.d.ts",
27+
"default": "./exports/botframework-webchat/internal.js"
28+
}
29+
},
1930
"./middleware": {
2031
"import": {
21-
"bundle // TODO: [P*] Think if we should export fat/bundled using conditions": "./dist/botframework-webchat.middleware.d.mts",
22-
"types": "./exports/botframework-webchat.middleware.d.mts",
23-
"default": "./exports/botframework-webchat.middleware.mjs"
32+
"bundle // TODO: [P*] Think if we should export fat/bundled using conditions": "./dist/botframework-webchat/middleware.d.mts",
33+
"types": "./exports/botframework-webchat/middleware.d.mts",
34+
"default": "./exports/botframework-webchat/middleware.mjs"
2435
},
2536
"require": {
26-
"types": "./exports/botframework-webchat.middleware.d.ts",
27-
"default": "./exports/botframework-webchat.middleware.js"
37+
"types": "./exports/botframework-webchat/middleware.d.ts",
38+
"default": "./exports/botframework-webchat/middleware.js"
2839
}
2940
}
3041
},
@@ -44,6 +55,8 @@
4455
"files": [
4556
"./dist/**/*",
4657
"./exports/**/*",
58+
"./internal.js",
59+
"./middleware.js",
4760
"./src/**/*"
4861
],
4962
"tsd": {
@@ -60,7 +73,9 @@
6073
"scripts": {
6174
"build": "npm run build:tsup && npm run build:validate",
6275
"build:tsup": "tsup",
63-
"build:validate": "if grep -R -n -F --include='*.d.ts' --include='*.d.mts' '@msinternal/' ./dist/; then echo '*.d.ts files should not import \"@msinternal/*\"' >&2; exit 1; fi",
76+
"build:validate": "npm run build:validate:import && npm run build:validate:internal",
77+
"build:validate:import": "if grep -R -n -P --include='*.mjs' '}\\s*from\\s*\"[^.]' ./dist/; then echo '*.mjs files should not import from other packages' >&2; exit 1; fi",
78+
"build:validate:internal": "if grep -R -n -F --include='*.d.ts' --include='*.d.mts' '@msinternal/' ./dist/; then echo '*.d.ts files should not import \"@msinternal/*\"' >&2; exit 1; fi",
6479
"bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
6580
"bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
6681
"bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",

‎packages/bundle/src/exports/internal.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export { type ActivityMiddleware, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
2+
export {
3+
createActivityBorderMiddleware,
4+
createActivityGroupingMiddleware,
5+
DecoratorComposer,
6+
type DecoratorMiddleware
7+
} from 'botframework-webchat-api/decorator';
8+
export { WebChatDecorator } from 'botframework-webchat-component/decorator';
9+
export { createIconComponent, PartGrouping, useLiveRegion } from 'botframework-webchat-component/internal';
10+
export { getOrgSchemaMessage, type DirectLineCardAction, type WebChatActivity } from 'botframework-webchat-core';

‎packages/bundle/tsup.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ function buildApplyConfig(format: Format, bundled: boolean) {
3838
},
3939
entry: {
4040
'botframework-webchat': './src/exports/full.ts',
41-
'botframework-webchat.middleware': './src/exports/middleware.ts'
41+
'botframework-webchat/internal': './src/exports/internal.ts',
42+
'botframework-webchat/middleware': './src/exports/middleware.ts'
4243
},
4344
env: {
4445
// Followings are required by microsoft-cognitiveservices-speech-sdk:

‎packages/fluent-theme/.eslintrc.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,12 @@ env:
99
rules:
1010
react/destructuring-assignment: off
1111
react/require-default-props: off
12+
no-restricted-imports:
13+
- error
14+
- patterns:
15+
- group:
16+
- botframework-webchat-*
17+
- '!botframework-webchat-base' # It is okay to import from private packages.
18+
- '!botframework-webchat-react-valibot' # It is okay to import from private packages.
19+
- '!botframework-webchat-styles' # It is okay to import from private packages.
20+
message: Imports only from "bundle" package but not other packages under it

0 commit comments

Comments
 (0)