Skip to content

Commit 1898c00

Browse files
compulimcompulim
authored
Add support for <script type="module"> (a.k.a. fat module) (#5592)
* First attempt * Clean up * Ignore static * Better separator * Add importmap * Add static * Add version number * Clean up * Short chunk name * Unify entryNames * Use __ (double underscore) * Add sourcemap * Better React * Clean up * Add version number * Save ReactDOM * Use React CJS without global * Add Speech SDK * Repack * Add base64-js * Fix eslint * Repack botframework-directlinejs * Better esbuild src * Repack react and react-dom * Add sourcemap * Repack react-is * Clean up * Add @types/* * Clean up * Delete object-assign * Delete object-assign * Cheaper object-assign * Remove unnecessary devDependencies * Clean up * Add comment for 1.45.0 * Fix eslint * Remove isConcurrentMode * Bump to react-is@16 * Revert * Add precommit * Debump to 1.17.0 * Add repack * Fix npm start for repacks * Fix npm run build * Add start:static * Better message * Better message * Clean up * Add first fat module test * Add more tests * Add more exports and tests * Use isomorphic React * Add snapshot * Fix watch mode * Isomorphic React as esbuild plugin * Fix npm run build * Remove isomorphic React * Rename to skip * Add to lint-staged * Fix dev server * Add npm start html-react-parser * Remove comment * Clean up * Don't print token * Add test for createRoot * Fix import react-dom * Add entry * Add static * Upload static artifact
1 parent e48fbd9 commit 1898c00

File tree

82 files changed

+2290
-281
lines changed

Some content is hidden

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

82 files changed

+2290
-281
lines changed

‎.dockerignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
!/__tests__
33
/__tests__/__image_snapshots__
44
!/packages/bundle/dist
5+
!/packages/bundle/static
56
!/packages/debug-theme/dist
67
!/packages/fluent-theme/dist
78
!/packages/playground/build

‎.github/workflows/daily-release.yaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ jobs:
7878
uses: actions/upload-artifact@v4
7979
with:
8080
name: bundles
81-
path: packages/bundle/dist/**/*
81+
path: |
82+
packages/bundle/dist/**/*
83+
packages/bundle/stable/**/*
8284
8385
- name: Upload tarballs
8486
uses: actions/upload-artifact@v4

‎.github/workflows/preview-branch.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ jobs:
6161
uses: actions/upload-artifact@v2
6262
with:
6363
name: bundle
64-
path: 'packages/bundle/dist/**/*'
64+
path: |
65+
packages/bundle/dist/**/*
66+
packages/bundle/stable/**/*
6567
6668
- name: Upload npm-tarball
6769
uses: actions/upload-artifact@v2

‎.github/workflows/pull-request-validation.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ jobs:
5757
./package.json
5858
./__tests__/
5959
./packages/bundle/dist/
60+
./packages/bundle/static/
6061
./packages/debug-theme/dist/
6162
./packages/fluent-theme/dist/
6263
./packages/test/harness/

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
137137
- `api`: `botframework-webchat-api/hook`
138138
- `bundle`: `botframework-webchat/component`, `botframework-webchat/decorator` (internal-use), `botframework-webchat/hook`
139139
- `component`: `botframework-webchat-component/component`, `botframework-webchat-component/hook`
140+
- (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)
140141

141142
### Changed
142143

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

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

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

17.5 KB
Loading

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

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

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

17.5 KB
Loading

__tests__/html2/simple/fatModule/simple.skip.html renamed to __tests__/html2/simple/fatModule/esm.sh/simple.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
<script type="importmap">
1111
{
1212
"imports": {
13-
"botframework-webchat": "/__dist__/packages/bundle/dist/botframework-webchat.mjs"
13+
"botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
14+
"react": "https://esm.sh/react@18",
15+
"react-dom": "https://esm.sh/react-dom@18"
1416
}
1517
}
1618
</script>
@@ -27,13 +29,7 @@
2729

2830
const { directLine, store } = createDirectLineEmulator();
2931

30-
renderWebChat(
31-
{
32-
directLine,
33-
store
34-
},
35-
document.getElementById('webchat')
36-
);
32+
renderWebChat({ directLine, store }, document.getElementById('webchat'));
3733

3834
await pageConditions.uiConnected();
3935

@@ -42,6 +38,8 @@
4238
await pageConditions.numActivitiesShown(1);
4339

4440
await host.snapshot('local');
41+
42+
expect(typeof globalThis.React).toBe('undefined');
4543
});
4644
</script>
4745
</body>

0 commit comments

Comments
 (0)