Skip to content

Commit dfb2e72

Browse files
OEvgenyOEvgeny
committed
WIP: browser modules MVP
1 parent e998c56 commit dfb2e72

File tree

7 files changed

+138
-2
lines changed

7 files changed

+138
-2
lines changed

‎__tests__/__image_snapshots__/html/simple-html-module-simple-html-1-snap.png

29.7 KB
Loading

‎__tests__/html2/module/simple.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
<script type="importmap">
8+
{
9+
"imports": {
10+
"react": "https://esm.sh/[email protected]",
11+
"react-dom": "https://esm.sh/[email protected]",
12+
"micromark": "https://esm.sh/micromark"
13+
}
14+
}
15+
</script>
16+
</head>
17+
<body>
18+
<main id="webchat"></main>
19+
<script type="module">
20+
// FIXME: test utils rely on WebChat global
21+
import * as WebChat from '/__dist__/webchat-module.mjs';
22+
window.WebChat = WebChat;
23+
24+
import { renderWebChat, createDirectLine } from '/__dist__/webchat-module.mjs';
25+
26+
run(async function () {
27+
renderWebChat(
28+
{
29+
directLine: createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
30+
store: testHelpers.createStore()
31+
},
32+
document.getElementById('webchat')
33+
);
34+
35+
await pageConditions.uiConnected();
36+
37+
await pageObjects.sendMessageViaSendBox('tell me a story');
38+
await pageConditions.numActivitiesShown(4);
39+
40+
await host.snapshot();
41+
});
42+
</script>
43+
</body>
44+
</html>

‎packages/bundle/src/bundle/module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import addVersion from './addVersion';
2+
import * as minimal from '../module/exports-minimal';
3+
4+
const buildInfo = Object.freeze({
5+
...minimal.buildInfo,
6+
buildTool: process.env.build_tool,
7+
moduleFormat: process.env.module_format
8+
});
9+
10+
// Until we have a development-specific bundle, we are not shipping createStoreWithDevTools in bundle.
11+
const { createStoreWithDevTools: _createStoreWithDevTools, ...finalMinimal } = minimal;
12+
13+
export * from '../module/exports-minimal';
14+
15+
export default Object.freeze({
16+
...finalMinimal,
17+
buildInfo
18+
});
19+
20+
export function defineMeta() {
21+
addVersion(buildInfo);
22+
}

‎packages/bundle/tsup.config.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable require-unicode-regexp */
12
import path from 'path';
23
import { defineConfig } from 'tsup';
34
import baseConfig from '../../tsup.base.config';
@@ -50,6 +51,26 @@ const config: typeof baseConfig = {
5051
]
5152
};
5253

54+
const externalCjsToEsmPlugin = external => ({
55+
name: 'external',
56+
setup(build) {
57+
const escape = text => `^${text.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')}$`;
58+
// eslint-disable-next-line security/detect-non-literal-regexp
59+
const filter = new RegExp(external.map(escape).join('|'));
60+
build.onResolve({ filter: /.*/, namespace: 'external' }, args => ({
61+
path: args.path,
62+
external: true
63+
}));
64+
build.onResolve({ filter }, args => ({
65+
path: args.path,
66+
namespace: 'external'
67+
}));
68+
build.onLoad({ filter: /.*/, namespace: 'external' }, args => ({
69+
contents: `export * from ${JSON.stringify(args.path)}\nimport * as pkg from ${JSON.stringify(args.path)}\nexport default pkg\n`
70+
}));
71+
}
72+
});
73+
5374
export default defineConfig([
5475
// Build IIFE before CJS/ESM to make npm start faster.
5576
{
@@ -72,6 +93,45 @@ export default defineConfig([
7293
platform: 'browser',
7394
target: [...config.target, 'es2019']
7495
},
96+
{
97+
...config,
98+
dts: false,
99+
entry: {
100+
'webchat-module': './src/bundle/module.ts'
101+
},
102+
env: {
103+
...config.env,
104+
module_format: 'module'
105+
},
106+
esbuildPlugins: [...config.esbuildPlugins, externalCjsToEsmPlugin(['react', 'react-dom'])],
107+
format: 'esm',
108+
platform: 'browser',
109+
shims: true,
110+
splitting: false,
111+
target: ['es2023'],
112+
noExternal: [
113+
'@babel/runtime',
114+
'botframework-directlinejs',
115+
'botframework-webchat-api',
116+
'botframework-webchat-component',
117+
'botframework-webchat-core',
118+
'classnames',
119+
'core-js',
120+
'math-random',
121+
'mdast-util-from-markdown',
122+
'memoize-one',
123+
'prop-types',
124+
'punycode',
125+
'react-dom',
126+
'react',
127+
'url-search-params-polyfill'
128+
// TODO: these packages are needed for full build
129+
// decide how we should organize the full build:
130+
// 'micromark',
131+
// 'sanitize-html',
132+
// 'shiki',
133+
]
134+
},
75135
{
76136
...config,
77137
format: 'esm'

‎packages/component/src/providers/HTMLContentTransformCOR/HTMLContentTransformComposer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type HTMLContentTransformComposerProps = Readonly<{
1111
middleware?: readonly HTMLContentTransformMiddleware[] | undefined;
1212
}>;
1313

14-
const HTMLContentTransformComposer = memo(({ children, middleware }: HTMLContentTransformComposerProps) => {
14+
const HTMLContentTransformComposer = memo(({ children, middleware = [] }: HTMLContentTransformComposerProps) => {
1515
const transform = useMemo<HTMLContentTransformFunction>(() => {
1616
const enhancers = middleware.map(enhancer => enhancer()).reverse();
1717

‎serve-test.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@
7979
"source": "/__dist__/webchat-minimal.js.map",
8080
"destination": "packages/bundle/dist/webchat-minimal.js.map"
8181
},
82+
{
83+
"source": "/__dist__/webchat-module.mjs",
84+
"destination": "packages/bundle/dist/webchat-module.mjs"
85+
},
86+
{
87+
"source": "/__dist__/webchat-module.mjs.map",
88+
"destination": "packages/bundle/dist/webchat-module.mjs.map"
89+
},
8290
{
8391
"source": "/test-harness.js",
8492
"destination": "packages/test/harness/dist/test-harness.js"

‎serve.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
{ "source": "/webchat-es5.js", "destination": "packages/bundle/dist/webchat-es5.js" },
3333
{ "source": "/webchat-es5.js.map", "destination": "packages/bundle/dist/webchat-es5.js.map" },
3434
{ "source": "/webchat-minimal.js", "destination": "packages/bundle/dist/webchat-minimal.js" },
35-
{ "source": "/webchat-minimal.js.map", "destination": "packages/bundle/dist/webchat-minimal.js.map" }
35+
{ "source": "/webchat-minimal.js.map", "destination": "packages/bundle/dist/webchat-minimal.js.map" },
36+
{ "source": "/webchat-module.mjs", "destination": "packages/bundle/dist/webchat-module.mjs" },
37+
{ "source": "/webchat-module.mjs.map", "destination": "packages/bundle/dist/webchat-module.mjs.map" }
3638
]
3739
}

0 commit comments

Comments
 (0)