Fix tsup configuration for vanilla Webpack 4 without babel-loader (#5322)

* Update barrel files

* Emit CJS as ES2019

* Force code splitting in CJS

* Add entry

Author: compulim

CHANGELOG.md

@@ -808,6 +808,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    -  Fixed typings of `useFocus` and `useLocalizer`
 -  Fixes [#3165](https://github.com/microsoft/BotFramework-WebChat/issues/3165) and [#4094](https://github.com/microsoft/BotFramework-WebChat/issues/4094). Allowlist `aria-label` for links in Markdown and skip unrecognized attributes or invalid curly brackets, by [@compulim](https://github.com/compulim), in PR [#4095](https://github.com/microsoft/BotFramework-WebChat/pull/4095)
 -  Fixes [#4190](https://github.com/microsoft/BotFramework-WebChat/issues/4190). Recent Markdown curly bracket fix should not break IE11 due to unsupported "u" flag in `RegExp`, by [@compulim](https://github.com/compulim), in PR [#4191](https://github.com/microsoft/BotFramework-WebChat/pull/4191)
+-  Improved importability in vanilla Webpack 4 without `babel-loader`, by [@compulim](https://github.com/compulim), in PR [#5322](https://github.com/microsoft/BotFramework-WebChat/pull/5322)
 
 ### Changed
 

packages/api/decorator.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./dist/botframework-webchat-api.decorator');
+module.exports = require('./dist/botframework-webchat-api.decorator.js');

packages/api/internal.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./dist/botframework-webchat-api.internal');
+module.exports = require('./dist/botframework-webchat-api.internal.js');

packages/api/tsup.config.ts

@@ -1,13 +1,24 @@
 import { defineConfig } from 'tsup';
 import baseConfig from '../../tsup.base.config';
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-webchat-api': './src/index.ts',
     'botframework-webchat-api.internal': './src/internal.ts',
     'botframework-webchat-api.decorator': './src/decorator/index.ts'
+  }
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm',
+    noExternal: ['globalize']
   },
-  noExternal: ['globalize'],
-  format: ['esm', 'cjs']
-});
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/base/tsup.config.ts

@@ -1,11 +1,22 @@
 import { defineConfig } from 'tsup';
 import baseConfig from '../../tsup.base.config';
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-webchat-base': './src/index.ts',
     'botframework-webchat-base.utils': './src/utils/index.ts'
+  }
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
   },
-  format: ['esm', 'cjs']
-});
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/base/utils.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./dist/botframework-webchat-base.utils');
+module.exports = require('./dist/botframework-webchat-base.utils.js');

packages/bundle/tsup.config.ts

@@ -13,7 +13,7 @@ const resolveCognitiveServicesToES2015 = {
   }
 };
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-webchat': './src/index.ts',
@@ -34,6 +34,17 @@ export default defineConfig({
     'memoize-one',
     'microsoft-cognitiveservices-speech-sdk',
     'web-speech-cognitive-services'
-  ],
-  format: ['esm', 'cjs']
-});
+  ]
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
+  },
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/component/decorator.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./lib/decorator/index');
+module.exports = require('./dist/botframework-webchat-component.decorator.js');

packages/component/internal.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./lib/internal');
+module.exports = require('./dist/botframework-webchat-component.internal.js');

packages/component/tsup.config.ts

@@ -1,10 +1,10 @@
+import { injectCSSPlugin } from 'botframework-webchat-styles/build';
 import { defineConfig } from 'tsup';
 import baseConfig from '../../tsup.base.config';
 import { componentStyleContent as componentStyleContentPlaceholder } from './src/Styles/createStyles';
 import { decoratorStyleContent as decoratorStyleContentPlaceholder } from './src/decorator/private/createStyles';
-import { injectCSSPlugin } from 'botframework-webchat-styles/build';
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   loader: {
     ...baseConfig.loader,
@@ -18,6 +18,17 @@ export default defineConfig({
     'botframework-webchat-component': './src/index.ts',
     'botframework-webchat-component.internal': './src/internal.ts',
     'botframework-webchat-component.decorator': './src/decorator/index.ts'
+  }
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
   },
-  format: ['esm', 'cjs']
-});
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/core/tsup.config.ts

@@ -1,10 +1,21 @@
 import { defineConfig } from 'tsup';
 import baseConfig from '../../tsup.base.config';
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-webchat-core': './src/index.ts'
+  }
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
   },
-  format: ['esm', 'cjs']
-});
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/directlinespeech/tsup.config.ts

@@ -13,7 +13,7 @@ const resolveCognitiveServicesToES2015 = {
   }
 };
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-directlinespeech-sdk': './src/index.js'
@@ -29,4 +29,16 @@ export default defineConfig({
   esbuildPlugins: [resolveCognitiveServicesToES2015],
   // We need to internalize event-target-shim because it appear as transient packages with a different version.
   noExternal: ['event-target-shim']
-});
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
+  },
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

packages/fluent-theme/tsup.config.ts

@@ -44,7 +44,8 @@ export default defineConfig([
       '.css': 'local-css'
     },
     esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })],
-    format: ['cjs']
+    format: ['cjs'],
+    target: [...baseConfig.target, 'es2019']
   },
   {
     ...baseConfig,

packages/styles/tsup.config.ts

@@ -1,12 +1,23 @@
 import { defineConfig } from 'tsup';
 import baseConfig from '../../tsup.base.config';
 
-export default defineConfig({
+const config: typeof baseConfig = {
   ...baseConfig,
   entry: {
     'botframework-webchat-styles': './src/index.ts',
     'botframework-webchat-styles.build': './src/build/index.ts',
     'botframework-webchat-styles.react': './src/react/index.ts'
+  }
+};
+
+export default defineConfig([
+  {
+    ...config,
+    format: 'esm'
   },
-  format: ['esm', 'cjs']
-});
+  {
+    ...config,
+    format: 'cjs',
+    target: [...config.target, 'es2019']
+  }
+]);

tsup.base.config.ts

@@ -1,11 +1,13 @@
-import { defineConfig, type Options } from 'tsup';
+import { type Options } from 'tsup';
 import { babelPlugin, defaultPredicate, type Predicate } from './esbuildBabelPluginIstanbul';
 
+type Target = Exclude<Options['target'], Array<unknown> | undefined>;
+
 const env = process.env.NODE_ENV || 'development';
 const { npm_package_version } = process.env;
 const istanbulPredicate: Predicate = args => defaultPredicate(args) && !/\.worker\.[cm]?[jt]s$/u.test(args.path);
 
-export default defineConfig({
+const baseConfig: Options & { target: Target[] } = {
   dts: true,
   env: {
     build_tool: 'tsup',
@@ -52,5 +54,8 @@ export default defineConfig({
   minify: env === 'production',
   platform: 'browser',
   sourcemap: true,
-  target: ['chrome100', 'firefox100', 'safari15']
-}) as Options;
+  splitting: true,
+  target: ['chrome100', 'firefox100', 'safari15'] satisfies Target[]
+};
+
+export default baseConfig;