Skip to content

Commit e48fbd9

Browse files
compulimcompulim
authored
Unify and improve named exports (#5588)
* Fix npm start * Add outDirWithTemp * Update to Speech SDK 1.45.0 * Remove unused compile result * Transform Speech SDK * Simplify exports * Fold actual layer into exports * Exports internal * Revert "Fold actual layer into exports" This reverts commit 26227ef. * Rename bundle to iife * Rename path * Update api boot * Redo bundle boot * Redo component boot * Redo bundle boot * Include component hooks * Change to "set" philosophy * Clean up * Add more fullSet/minimalSet * Remove old code and rename *set to * * Skip tests * Fix default export * Fix default export * Fix tsd * Clean up * Fix nonce * Export middleware in IIFE * Comment out UMD resolve * Add more UMD * Inject CSS for code splitting * Use re-export * Clean up typing * Freeze state * Add comment * Use re-export * Use re-export * Fix minimal import * Use re-export and cleanup * Remove minimal exports * Use re-export * Clean up * Add exports * Use bundle/decorator * Clean up * Add entry
1 parent 0f28670 commit e48fbd9

File tree

107 files changed

+1438
-903
lines changed

Some content is hidden

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

107 files changed

+1438
-903
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
132132
- Unified build info and injection of `<meta>` tag, in PR [#5571](https://github.com/microsoft/BotFramework-WebChat/pull/5571), by [@compulim](https://github.com/compulim)
133133
- Added documentation for `isPartOf` property, in PR [#5573](https://github.com/microsoft/BotFramework-WebChat/pull/5573), by [@compulim](https://github.com/compulim)
134134
- `fluent-theme`: Changed dependencies to import solely from the "bundle" package, in PR [#5584](https://github.com/microsoft/BotFramework-WebChat/pull/5584), by [@compulim](https://github.com/compulim)
135+
- Improved bundling, in PR [#5588](https://github.com/microsoft/BotFramework-WebChat/pull/5588), by [@compulim](https://github.com/compulim)
136+
- New named exports
137+
- `api`: `botframework-webchat-api/hook`
138+
- `bundle`: `botframework-webchat/component`, `botframework-webchat/decorator` (internal-use), `botframework-webchat/hook`
139+
- `component`: `botframework-webchat-component/component`, `botframework-webchat-component/hook`
135140

136141
### Changed
137142

‎__tests__/html2/simple/fatModule/fluentTheme.skip.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/simple.skip.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
</head>
8+
<body>
9+
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs"
14+
}
15+
}
16+
</script>
17+
<script type="module">
18+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
19+
20+
run(async function () {
21+
const {
22+
testHelpers: { createDirectLineEmulator }
23+
} = window;
24+
25+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
26+
window.WebChat = { createStoreWithOptions };
27+
28+
const { directLine, store } = createDirectLineEmulator();
29+
30+
renderWebChat(
31+
{
32+
directLine,
33+
store
34+
},
35+
document.getElementById('webchat')
36+
);
37+
38+
await pageConditions.uiConnected();
39+
40+
await directLine.emulateIncomingActivity('Hello, World!');
41+
42+
await pageConditions.numActivitiesShown(1);
43+
44+
await host.snapshot('local');
45+
});
46+
</script>
47+
</body>
48+
</html>

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
</head>
8+
<body>
9+
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
15+
"react": "https://esm.sh/react@18",
16+
"react-dom": "https://esm.sh/react-dom@18",
17+
"react-dom/": "https://esm.sh/react-dom@18/"
18+
}
19+
}
20+
</script>
21+
<script type="module">
22+
import React from 'react';
23+
24+
// We should allow using React from environment.
25+
// When web devs import Web Chat as <script type="module">, we want to enable customization.
26+
// Customization requires React.createElement() and calling some hooks.
27+
window.React = React;
28+
</script>
29+
<script type="module">
30+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
31+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
32+
import { createElement } from 'react';
33+
import { createRoot } from 'react-dom/client';
34+
35+
const { useStyleOptions } = hooks;
36+
const {
37+
testHelpers: { createDirectLineEmulator }
38+
} = window;
39+
40+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
41+
window.WebChat = { createStoreWithOptions };
42+
43+
run(async function () {
44+
const { directLine, store } = createDirectLineEmulator();
45+
46+
function MyMiddleware({ nextResult }) {
47+
// THEN: Web Chat hooks can be called.
48+
const [{ accent }] = useStyleOptions();
49+
50+
return createElement(
51+
'div',
52+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
53+
nextResult?.render({})
54+
);
55+
}
56+
57+
createRoot(document.getElementsByTagName('main')[0]).render(
58+
createElement(ReactWebChat, {
59+
directLine,
60+
polymiddleware: [
61+
createActivityPolymiddleware(
62+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
63+
)
64+
],
65+
store
66+
})
67+
);
68+
69+
await pageConditions.uiConnected();
70+
71+
await directLine.emulateIncomingActivity('Hello, World!');
72+
73+
await pageConditions.numActivitiesShown(1);
74+
75+
await host.snapshot('local');
76+
});
77+
</script>
78+
</body>
79+
</html>

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
</head>
8+
<body>
9+
<main id="webchat"></main>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs",
14+
"botframework-webchat/middleware": "/__dist__/packages/bundle/dist/botframework-webchat/middleware.mjs",
15+
"react": "https://esm.sh/react@18",
16+
"react-dom": "https://esm.sh/react-dom@18"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import React from 'react';
22+
import ReactDOM from 'react-dom';
23+
24+
// We should allow using React from environment.
25+
// When web devs import Web Chat as <script type="module">, we want to enable customization.
26+
// Customization requires React.createElement() and calling some hooks.
27+
window.React = React;
28+
window.ReactDOM = ReactDOM;
29+
</script>
30+
<script type="module">
31+
import { createDirectLine, createStoreWithOptions, hooks, renderWebChat } from 'botframework-webchat';
32+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
33+
import { createElement } from 'react';
34+
35+
const { useStyleOptions } = hooks;
36+
const {
37+
testHelpers: { createDirectLineEmulator }
38+
} = window;
39+
40+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
41+
window.WebChat = { createStoreWithOptions };
42+
43+
run(async function () {
44+
const { directLine, store } = createDirectLineEmulator();
45+
46+
function MyMiddleware({ nextResult }) {
47+
// THEN: Web Chat hooks can be called.
48+
const [{ accent }] = useStyleOptions();
49+
50+
return createElement(
51+
'div',
52+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
53+
nextResult?.render({})
54+
);
55+
}
56+
57+
renderWebChat(
58+
{
59+
directLine,
60+
polymiddleware: [
61+
createActivityPolymiddleware(
62+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
63+
)
64+
],
65+
store
66+
},
67+
document.getElementsByTagName('main')[0]
68+
);
69+
70+
await pageConditions.uiConnected();
71+
72+
await directLine.emulateIncomingActivity('Hello, World!');
73+
74+
await pageConditions.numActivitiesShown(1);
75+
76+
await host.snapshot('local');
77+
});
78+
</script>
79+
</body>
80+
</html>

__tests__/html2/simple.emulator.html renamed to __tests__/html2/simple/simple.emulator.html

File renamed without changes.

__tests__/html2/simple.html renamed to __tests__/html2/simple/simple.html

File renamed without changes.

__tests__/html2/simple.offline.html renamed to __tests__/html2/simple/simple.offline.html

File renamed without changes.

‎jest.legacy.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ const TRANSFORM_IGNORE_PACKAGES = [
4141
'unist-util-stringify-position',
4242
'uuid',
4343

44+
// Related to Speech SDK.
45+
'microsoft-cognitiveservices-speech-sdk',
46+
4447
// Related to Adaptive Cards.
4548
'dom7',
4649
'ssr-window',

0 commit comments

Comments
 (0)