Skip to content

Commit 73332a3

Browse files
compulimcompulim
authored
Reorganize /static through vendor chunks (#5595)
* Add react@18 and react-dom@18 * No need object-assign aliasing * Exporting allowlisted packages only * Remove unnecessary dependencies * Remove async * Auto exporting own packages * Remove comments * Remove unnecessary code * Add doc * Restructure * Readability * Readability * Readability * Readability * Readability * Readability * More contents * Clarification * Add links * Fix plugins * Add middleware test for tsx * Add esm.run * Use named exports * Add simple test * Clean up * Fix build * Add React 18 tests * Clean up * 4.19.0 * Add reads * Readability * Wordings * Add "Step X:" * Code clarity * New line * Readability * Add UMD * Better UMD snippet * Add snapshot * Rename * Rename plugin * Readability * Mark 16.8.6 as baseline * Readability * Fix react.18 filename * ESM build for test harness and page object * Move all fatModule test to use ESM harness and page-object * Fix speech token * Clean up * Apply PR suggestions * Fix test-to-code ratio
1 parent a260c56 commit 73332a3

File tree

69 files changed

+1367
-447
lines changed

Some content is hidden

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

69 files changed

+1367
-447
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
139139
- `component`: `botframework-webchat-component/component`, `botframework-webchat-component/hook`
140140
- (Experimental) Added support for importing via `<script type="module">`, by [@compulim](https://github.com/compulim) in PR [#5592](https://github.com/microsoft/BotFramework-WebChat/pull/5592)
141141
- Added support for `botframework-webchat-fluent-theme` package, by [@compulim](https://github.com/compulim) in PR [#5593](https://github.com/microsoft/BotFramework-WebChat/pull/5593)
142+
- Bundling vendor chunks, by [@compulim](https://github.com/compulim) in PR [#5595](https://github.com/microsoft/BotFramework-WebChat/pull/5595)
142143

143144
### Changed
144145

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
<html lang="en-US">
33
<head>
44
<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>
75
</head>
86
<body>
97
<main id="webchat"></main>
@@ -17,6 +15,9 @@
1715
}
1816
</script>
1917
<script type="module">
18+
import '/test-harness.mjs';
19+
import '/test-page-object.mjs';
20+
2021
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
2122

2223
run(async function () {

‎__tests__/html2/simple/fatModule/esm.run/adaptiveCards.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
13+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
14+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
15+
}
16+
}
17+
</script>
18+
<script type="module">
19+
import '/test-harness.mjs';
20+
import '/test-page-object.mjs';
21+
22+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
23+
24+
run(async function () {
25+
const {
26+
testHelpers: { createDirectLineEmulator }
27+
} = window;
28+
29+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
30+
window.WebChat = { createStoreWithOptions };
31+
32+
const { directLine, store } = createDirectLineEmulator();
33+
34+
renderWebChat(
35+
{
36+
directLine,
37+
store
38+
},
39+
document.getElementById('webchat')
40+
);
41+
42+
await pageConditions.uiConnected();
43+
44+
await directLine.emulateIncomingActivity({
45+
attachments: [
46+
{
47+
content: {
48+
type: 'AdaptiveCard',
49+
body: [
50+
{
51+
type: 'TextBlock',
52+
text: 'You can choose one of the followings.'
53+
}
54+
],
55+
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
56+
version: '1.2',
57+
actions: [
58+
{
59+
type: 'Action.Submit',
60+
title: 'What time is it?'
61+
},
62+
{
63+
type: 'Action.Submit',
64+
title: 'What is the weather?'
65+
}
66+
]
67+
},
68+
contentType: 'application/vnd.microsoft.card.adaptive'
69+
}
70+
],
71+
from: { id: 'bot', role: 'bot' },
72+
text: 'What can I do for you?',
73+
type: 'message'
74+
});
75+
76+
await pageConditions.numActivitiesShown(1);
77+
78+
await host.snapshot('local');
79+
80+
expect(typeof globalThis.React).toBe('undefined');
81+
});
82+
</script>
83+
</body>
84+
</html>

‎__tests__/html2/simple/fatModule/esm.run/adaptiveCards.html.snap-1.png‎

17.5 KB
Loading

‎__tests__/html2/simple/fatModule/esm.run/simple.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+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
13+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
14+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
15+
}
16+
}
17+
</script>
18+
<script type="module">
19+
import '/test-harness.mjs';
20+
import '/test-page-object.mjs';
21+
22+
import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
23+
24+
run(async function () {
25+
const {
26+
testHelpers: { createDirectLineEmulator }
27+
} = window;
28+
29+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
30+
window.WebChat = { createStoreWithOptions };
31+
32+
const { directLine, store } = createDirectLineEmulator();
33+
34+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
35+
36+
await pageConditions.uiConnected();
37+
38+
await directLine.emulateIncomingActivity('Hello, World!');
39+
40+
await pageConditions.numActivitiesShown(1);
41+
42+
await host.snapshot('local');
43+
44+
expect(typeof globalThis.React).toBe('undefined');
45+
});
46+
</script>
47+
</body>
48+
</html>

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

8.67 KB
Loading

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
13+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
14+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
15+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
16+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import '/test-harness.mjs';
22+
import '/test-page-object.mjs';
23+
24+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
25+
import { useStyleOptions } from 'botframework-webchat/hook';
26+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
27+
import { createElement } from 'react';
28+
import { render } from 'react-dom';
29+
30+
const {
31+
testHelpers: { createDirectLineEmulator }
32+
} = window;
33+
34+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
35+
window.WebChat = { createStoreWithOptions };
36+
37+
run(async function () {
38+
const { directLine, store } = createDirectLineEmulator();
39+
40+
function MyMiddleware({ nextResult }) {
41+
// THEN: Web Chat hooks can be called.
42+
const [{ accent }] = useStyleOptions();
43+
44+
return createElement(
45+
'div',
46+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
47+
nextResult?.render({})
48+
);
49+
}
50+
51+
render(
52+
createElement(ReactWebChat, {
53+
directLine,
54+
polymiddleware: [
55+
createActivityPolymiddleware(
56+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
57+
)
58+
],
59+
store
60+
}),
61+
document.getElementsByTagName('main')[0]
62+
);
63+
64+
await pageConditions.uiConnected();
65+
66+
await directLine.emulateIncomingActivity('Hello, World!');
67+
68+
await pageConditions.numActivitiesShown(1);
69+
70+
await host.snapshot('local');
71+
});
72+
</script>
73+
</body>
74+
</html>

‎__tests__/html2/simple/fatModule/esm.run/supportPolymiddleware.reactDOMRender.html.snap-1.png‎

8.73 KB
Loading

‎__tests__/html2/simple/fatModule/esm.run/supportPolymiddleware.reactDOMRender.withCreateRoot.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
</head>
6+
<body>
7+
<main id="webchat"></main>
8+
<script type="importmap">
9+
{
10+
"imports": {
11+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
12+
"botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
13+
"botframework-webchat/middleware": "/__dist__/packages/bundle/static/botframework-webchat/middleware.js",
14+
"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/+esm",
15+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/+esm",
16+
"react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/client/+esm"
17+
}
18+
}
19+
</script>
20+
<script type="module">
21+
import '/test-harness.mjs';
22+
import '/test-page-object.mjs';
23+
24+
import { createDirectLine, createStoreWithOptions, hooks, ReactWebChat } from 'botframework-webchat';
25+
import { useStyleOptions } from 'botframework-webchat/hook';
26+
import { activityComponent, createActivityPolymiddleware } from 'botframework-webchat/middleware';
27+
import { createElement } from 'react';
28+
import { createRoot } from 'react-dom/client';
29+
30+
const {
31+
testHelpers: { createDirectLineEmulator }
32+
} = window;
33+
34+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
35+
window.WebChat = { createStoreWithOptions };
36+
37+
run(async function () {
38+
const { directLine, store } = createDirectLineEmulator();
39+
40+
function MyMiddleware({ nextResult }) {
41+
// THEN: Web Chat hooks can be called.
42+
const [{ accent }] = useStyleOptions();
43+
44+
return createElement(
45+
'div',
46+
{ style: { borderColor: accent, borderStyle: 'solid', borderWidth: 2 } },
47+
nextResult?.render({})
48+
);
49+
}
50+
51+
createRoot(document.getElementsByTagName('main')[0]).render(
52+
createElement(ReactWebChat, {
53+
directLine,
54+
polymiddleware: [
55+
createActivityPolymiddleware(
56+
next => request => activityComponent(MyMiddleware, { nextResult: next(request) })
57+
)
58+
],
59+
store
60+
})
61+
);
62+
63+
await pageConditions.uiConnected();
64+
65+
await directLine.emulateIncomingActivity('Hello, World!');
66+
67+
await pageConditions.numActivitiesShown(1);
68+
69+
await host.snapshot('local');
70+
});
71+
</script>
72+
</body>
73+
</html>

‎__tests__/html2/simple/fatModule/esm.run/supportPolymiddleware.reactDOMRender.withCreateRoot.html.snap-1.png‎

8.73 KB
Loading

0 commit comments

Comments
 (0)