Skip to content

Commit 839e3e9

Browse files
compulimcompulim
committed
Add UMD
1 parent aedc1b2 commit 839e3e9

21 files changed

Lines changed: 301 additions & 49 deletions

File tree

‎__tests__/html2/simple/fatModule/simple.react-umd.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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.umd-development.js",
15+
"react-dom": "/__dist__/packages/bundle/static/react-dom.umd-development.js"
16+
}
17+
}
18+
</script>
19+
<script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
20+
<script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
21+
<script type="module">
22+
import { createDirectLine, createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
23+
import { createElement } from 'react';
24+
import { render } from 'react-dom';
25+
26+
run(async function () {
27+
const {
28+
testHelpers: { createDirectLineEmulator }
29+
} = window;
30+
31+
// TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
32+
window.WebChat = { createStoreWithOptions };
33+
34+
const { directLine, store } = createDirectLineEmulator();
35+
36+
render(createElement(ReactWebChat, { directLine, store }), document.getElementById('webchat'));
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+
expect(globalThis).toHaveProperty('React.version', '16.8.6');
47+
});
48+
</script>
49+
</body>
50+
</html>

‎docs/HOSTING.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,26 @@ When deploying to locked down environment, clients may not have access to smart
127127

128128
</details>
129129

130+
<details>
131+
<summary>From React UMD (development only)</summary>
132+
133+
React runtime can also be loaded from UMD (`globalThis.React` and `globalThis.ReactDOM`). This method is intended for development use only.
134+
135+
```html
136+
<script type="importmap">
137+
{
138+
"imports": {
139+
"botframework-webchat": "https://cdn.botframework.com/4.19.0/static/botframework-webchat.js",
140+
"react": "https://cdn.botframework.com/4.19.0/static/react.umd-development.js",
141+
"react-dom": "https://cdn.botframework.com/4.19.0/static/react-dom.umd-development.js",
142+
"react-dom/client": "https://cdn.botframework.com/4.19.0/static/react-dom.umd-development/client.js"
143+
}
144+
}
145+
</script>
146+
```
147+
148+
</details>
149+
130150
### (Deprecated) IIFE/UMD: Import via `<script>`
131151

132152
> Notes: this method is deprecated and is no longer recommended. Please [import via `<script type="importmap">`](#esm-import-via-script-typeimportmap) instead.

‎lint-staged.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,10 @@ module.exports = {
3737
'packages/repack/object-assign/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-object-assign'],
3838
'packages/repack/react/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react'],
3939
'packages/repack/react@18/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-18'],
40+
'packages/repack/react@umd/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-umd'],
4041
'packages/repack/react-dom/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-dom'],
4142
'packages/repack/react-dom@18/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-dom-18'],
43+
'packages/repack/react-dom@umd/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-dom-umd'],
4244
'packages/repack/react-is/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:repack-react-is'],
4345
'packages/styles/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:styles'],
4446
'packages/support/cldr-data/src/**/*.{mjs,js,ts,tsx}': ['npm run precommit:eslint:support-cldr-data'],

‎package-lock.json‎

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

‎package.json‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,10 @@
4040
"./packages/repack/object-assign",
4141
"./packages/repack/react",
4242
"./packages/repack/react@18",
43+
"./packages/repack/react@umd",
4344
"./packages/repack/react-dom",
4445
"./packages/repack/react-dom@18",
46+
"./packages/repack/react-dom@umd",
4547
"./packages/repack/react-is",
4648
"./packages/directlinespeech",
4749
"./packages/bundle",
@@ -89,11 +91,13 @@
8991
"precommit:eslint:repack-html-react-parser": "cd packages && cd repack && cd html-react-parser && npm run precommit:eslint",
9092
"precommit:eslint:repack-microsoft-cognitiveservices-speech-sdk": "cd packages && cd repack && cd microsoft-cognitiveservices-speech-sdk && npm run precommit:eslint",
9193
"precommit:eslint:repack-object-assign": "cd packages && cd repack && cd object-assign && npm run precommit:eslint",
92-
"precommit:eslint:repack-react": "cd packages && cd repack && cd react && npm run precommit:eslint",
93-
"precommit:eslint:repack-react-18": "cd packages && cd repack && cd react@18 && npm run precommit:eslint",
9494
"precommit:eslint:repack-react-dom": "cd packages && cd repack && cd react-dom && npm run precommit:eslint",
95-
"precommit:eslint:repack-react-dom-18": "cd packages && cd repack && cd react-dom@18 && npm run precommit:eslint",
95+
"precommit:eslint:repack-react-dom@18": "cd packages && cd repack && cd react-dom@18 && npm run precommit:eslint",
96+
"precommit:eslint:repack-react-dom@umd": "cd packages && cd repack && cd react-dom@umd && npm run precommit:eslint",
9697
"precommit:eslint:repack-react-is": "cd packages && cd repack && cd react-is && npm run precommit:eslint",
98+
"precommit:eslint:repack-react": "cd packages && cd repack && cd react && npm run precommit:eslint",
99+
"precommit:eslint:repack-react@18": "cd packages && cd repack && cd react@18 && npm run precommit:eslint",
100+
"precommit:eslint:repack-react@umd": "cd packages && cd repack && cd react@umd && npm run precommit:eslint",
97101
"precommit:eslint:styles": "cd packages && cd styles && npm run precommit:eslint",
98102
"precommit:eslint:support-cldr-data": "cd packages && cd support && cd cldr-data && npm run precommit:eslint",
99103
"precommit:eslint:support-cldr-data-downloader": "cd packages && cd support && cd cldr-data-downloader && npm run precommit:eslint",
@@ -117,11 +121,13 @@
117121
"precommit:typecheck:repack-botframework-directlinejs": "cd packages && cd repack && cd botframework-directlinejs && npm run precommit:typecheck",
118122
"precommit:typecheck:repack-html-react-parser": "cd packages && cd repack && cd html-react-parser && npm run precommit:typecheck",
119123
"precommit:typecheck:repack-microsoft-cognitiveservices-speech-sdk": "cd packages && cd repack && cd microsoft-cognitiveservices-speech-sdk && npm run precommit:typecheck",
120-
"precommit:typecheck:repack-react": "cd packages && cd repack && cd react && npm run precommit:typecheck",
121-
"precommit:typecheck:repack-react-18": "cd packages && cd repack && cd react@18 && npm run precommit:typecheck",
122124
"precommit:typecheck:repack-react-dom": "cd packages && cd repack && cd react-dom && npm run precommit:typecheck",
123-
"precommit:typecheck:repack-react-dom-18": "cd packages && cd repack && cd react-dom@18 && npm run precommit:typecheck",
125+
"precommit:typecheck:repack-react-dom@18": "cd packages && cd repack && cd react-dom@18 && npm run precommit:typecheck",
126+
"precommit:typecheck:repack-react-dom@umd": "cd packages && cd repack && cd react-dom@umd && npm run precommit:typecheck",
124127
"precommit:typecheck:repack-react-is": "cd packages && cd repack && cd react-is && npm run precommit:typecheck",
128+
"precommit:typecheck:repack-react": "cd packages && cd repack && cd react && npm run precommit:typecheck",
129+
"precommit:typecheck:repack-react@18": "cd packages && cd repack && cd react@18 && npm run precommit:typecheck",
130+
"precommit:typecheck:repack-react@umd": "cd packages && cd repack && cd react@umd && npm run precommit:typecheck",
125131
"precommit:typecheck:styles": "cd packages && cd styles && npm run precommit:typecheck",
126132
"prepare": "husky",
127133
"start": "cross-env NODE_OPTIONS=--no-deprecation concurrently --kill-others --prefix-colors \"auto\" \"npm:start:*\"",
@@ -142,11 +148,13 @@
142148
"start:repack-botframework-directlinejs": "cd packages && cd repack && cd botframework-directlinejs && npm start",
143149
"start:repack-html-react-parser": "cd packages && cd repack && cd html-react-parser && npm start",
144150
"start:repack-microsoft-cognitiveservices-speech-sdk": "cd packages && cd repack && cd microsoft-cognitiveservices-speech-sdk && npm start",
145-
"start:repack-react": "cd packages && cd repack && cd react && npm start",
146-
"start:repack-react-18": "cd packages && cd repack && cd react@18 && npm start",
147151
"start:repack-react-dom": "cd packages && cd repack && cd react-dom && npm start",
148-
"start:repack-react-dom-18": "cd packages && cd repack && cd react-dom@18 && npm start",
152+
"start:repack-react-dom@18": "cd packages && cd repack && cd react-dom@18 && npm start",
153+
"start:repack-react-dom@umd": "cd packages && cd repack && cd react-dom@umd && npm start",
149154
"start:repack-react-is": "cd packages && cd repack && cd react-is && npm start",
155+
"start:repack-react": "cd packages && cd repack && cd react && npm start",
156+
"start:repack-react@18": "cd packages && cd repack && cd react@18 && npm start",
157+
"start:repack-react@umd": "cd packages && cd repack && cd react@umd && npm start",
150158
"start:server": "serve -p 5000",
151159
"start:test-dev-server": "cd packages && cd test && cd dev-server && npm start",
152160
"start:test-harness": "cd packages && cd test && cd harness && npm start",

‎packages/bundle/esbuild.static.mjs‎

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,6 @@ function createWatcherPlugin(name) {
5454
/** @type { Map<string, import('esbuild').BuildOptions> } */
5555
const configs = new Map();
5656

57-
function getPendingConfig() {
58-
for (const value of configs.values()) {
59-
if (value.write !== false) {
60-
return value;
61-
}
62-
}
63-
}
64-
6557
const BASE_CONFIG = {
6658
alias: {
6759
adaptivecards: '@msinternal/adaptivecards',
@@ -82,26 +74,9 @@ const BASE_CONFIG = {
8274
outdir: resolve(fileURLToPath(import.meta.url), `../static/`),
8375
platform: 'browser',
8476
sourcemap: true,
85-
splitting: true,
86-
write: true
77+
splitting: true
8778
};
8879

89-
async function buildNextConfig() {
90-
const config = getPendingConfig();
91-
92-
if (!config) {
93-
return;
94-
}
95-
96-
await build({
97-
...config,
98-
...BASE_CONFIG
99-
});
100-
101-
// HACK: We are using the "write" field to signal the config is completed.
102-
config.write = false;
103-
}
104-
10580
function* getKeysRecursive(exports) {
10681
for (const [key, value] of Object.entries(exports)) {
10782
yield key;
@@ -204,11 +179,30 @@ const IGNORED_OWN_PACKAGES = [
204179
}
205180
});
206181

207-
// Prevent infinite-loop.
208-
for (let i = 0; i < 10000; i++) {
209-
// eslint-disable-next-line no-await-in-loop
210-
await buildNextConfig();
211-
}
182+
configs.set('react-umd', {
183+
chunkNames: `react.umd/[name]-[hash]`, // Some web servers are not good at handling @.
184+
entryNames: `[dir]/[name]`,
185+
entryPoints: {
186+
'react.umd-development': '@msinternal/react-umd'
187+
}
188+
});
189+
190+
configs.set('react-dom-umd', {
191+
chunkNames: `react-dom.umd/[name]-[hash]`, // Some web servers are not good at handling @.
192+
entryNames: `[dir]/[name]`,
193+
entryPoints: {
194+
'react-dom.umd-development': '@msinternal/react-dom-umd'
195+
}
196+
});
197+
198+
await Promise.all(
199+
Array.from(configs.values()).map(config =>
200+
build({
201+
...config,
202+
...BASE_CONFIG
203+
})
204+
)
205+
);
212206

213207
if (watch === '--watch') {
214208
const ourConfigs = [];

‎packages/bundle/package.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,21 @@
121121
"@msinternal/botframework-directlinejs": "development",
122122
"@msinternal/botframework-webchat-react-valibot": "development",
123123
"@msinternal/botframework-webchat-tsconfig": "development",
124-
"@msinternal/isomorphic-react": "development",
124+
"@msinternal/isomorphic-react-18": "development",
125+
"@msinternal/isomorphic-react-dom-18": "development",
126+
"@msinternal/isomorphic-react-dom-umd": "development",
125127
"@msinternal/isomorphic-react-dom": "development",
128+
"@msinternal/isomorphic-react-umd": "development",
129+
"@msinternal/isomorphic-react": "development",
126130
"@msinternal/microsoft-cognitiveservices-speech-sdk": "development",
127131
"@msinternal/object-assign": "development",
132+
"@msinternal/react-18": "development",
133+
"@msinternal/react-dom-18": "development",
134+
"@msinternal/react-dom-umd": "development",
128135
"@msinternal/react-dom": "development",
129-
"@msinternal/react": "development",
130136
"@msinternal/react-is": "development",
137+
"@msinternal/react-umd": "development",
138+
"@msinternal/react": "development",
131139
"botframework-directlinespeech-sdk": "production",
132140
"botframework-webchat-api": "production",
133141
"botframework-webchat-component": "production",
@@ -207,7 +215,9 @@
207215
"@msinternal/object-assign": "0.0.0-0",
208216
"@msinternal/react": "0.0.0-0",
209217
"@msinternal/react-dom": "0.0.0-0",
218+
"@msinternal/react-dom-umd": "0.0.0-0",
210219
"@msinternal/react-is": "0.0.0-0",
220+
"@msinternal/react-umd": "0.0.0-0",
211221
"@types/dom-speech-recognition": "^0.0.6",
212222
"@types/mdast": "^4.0.4",
213223
"@types/node": "^24.1.0",

‎packages/repack/react-dom/build.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import * as esbuild from 'esbuild';
1212
'object-assign': '@msinternal/object-assign'
1313
},
1414
bundle: true,
15-
entryPoints: ['./src/index.ts'],
15+
chunkNames: 'react-dom/[name]-[hash]',
16+
entryPoints: { 'react-dom': './src/index.ts' },
1617
format: 'esm',
1718
outdir: './dist/',
1819
platform: 'browser',

‎packages/repack/react-dom/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"private": true,
77
"type": "module",
88
"exports": {
9-
".": "./dist/index.js"
9+
".": "./dist/react-dom.js"
1010
},
1111
"scripts": {
1212
"build": "node ./build.js",

‎packages/repack/react-dom@18/build.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as esbuild from 'esbuild';
1010
/** @type { import('esbuild').BuildOptions } */
1111
const config = {
1212
bundle: true,
13-
chunkNames: 'react-dom.18.[name]-[hash]',
13+
chunkNames: 'react-dom/[name]-[hash]',
1414
entryPoints: { 'react-dom': './src/index.ts', 'react-dom/client': './src/client.ts' },
1515
format: 'esm',
1616
outdir: './dist/',

0 commit comments

Comments
 (0)