Polish fluent build

Author: OEvgeny

packages/bundle/tsdown.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'tsdown';
 import baseConfig from '../../tsdown.base.config';
 import type { Plugin as RollupPlugin } from 'rollup';
 
-import pkg from './package.json'
+import pkg from './package.json';
 
 const iifeDeps = Object.keys(pkg.dependencies);
 
@@ -79,14 +79,11 @@ const iifeConfig = {
   format: 'iife',
   platform: 'browser',
   target: [...config.target, 'es2019'],
-  noExternal: [
-    ...iifeDeps,
-    ...config.noExternal,
-  ],
+  noExternal: [...iifeDeps, ...config.noExternal],
   outputOptions(outputOptions) {
     outputOptions.entryFileNames = '[name].js';
     return outputOptions;
-  },
+  }
 };
 
 export default defineConfig([
@@ -100,7 +97,7 @@ export default defineConfig([
   {
     ...iifeConfig,
     entry: {
-      'webchat': './src/bundle/index.ts'
+      webchat: './src/bundle/index.ts'
     }
   },
   {
@@ -112,7 +109,7 @@ export default defineConfig([
   {
     ...config,
     format: 'esm'
-  },
+  }
   // {
   //   ...config,
   //   format: 'cjs',

packages/fluent-theme/tsdown.config.ts

@@ -5,33 +5,38 @@ import baseConfig from '../../tsdown.base.config';
 import { fluentStyleContent as fluentStyleContentPlaceholder } from './src/styles/createStyles';
 import { injectCSSPlugin } from 'botframework-webchat-styles/build';
 import LightningCSS from 'unplugin-lightningcss';
+import type { Plugin } from 'rollup';
 
-const umdResolvePlugin = {
-  name: 'umd-resolve',
-  setup(build) {
-    build.onResolve({ filter: /^react$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/react.ts')
-    }));
-
-    build.onResolve({ filter: /^botframework-webchat-api$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-api/index.ts')
-    }));
-
-    build.onResolve({ filter: /^botframework-webchat-api\/decorator$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-api/decorator.ts')
-    }));
-
-    build.onResolve({ filter: /^botframework-webchat-component$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/index.ts')
-    }));
+import pkg from './package.json';
 
-    build.onResolve({ filter: /^botframework-webchat-component\/internal$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/internal.ts')
-    }));
+const iifeDeps = [
+  'botframework-webchat-component/decorator',
+  'botframework-webchat-api/decorator',
+  'botframework-webchat-component/internal'
+].concat(Object.keys(pkg.dependencies));
 
-    build.onResolve({ filter: /^botframework-webchat-component\/decorator$/u }, () => ({
-      path: join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/decorator.ts')
-    }));
+const umdResolvePlugin: Plugin = {
+  name: 'umd-resolve',
+  resolveId(source) {
+    if (source === 'react') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/react.ts');
+    }
+    if (source === 'botframework-webchat-api') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-api/index.ts');
+    }
+    if (source === 'botframework-webchat-api/decorator') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-api/decorator.ts');
+    }
+    if (source === 'botframework-webchat-component') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/index.ts');
+    }
+    if (source === 'botframework-webchat-component/internal') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/internal.ts');
+    }
+    if (source === 'botframework-webchat-component/decorator') {
+      return join(fileURLToPath(import.meta.url), '../src/external.umd/botframework-webchat-component/decorator.ts');
+    }
+    return null;
   }
 };
 
@@ -40,45 +45,61 @@ export default defineConfig([
     ...baseConfig,
     entry: { 'botframework-webchat-fluent-theme': './src/index.ts' },
     env: { ...baseConfig.env, module_format: 'commonjs' },
-    plugins: [
-      LightningCSS.rolldown()
+    plugins: [LightningCSS.rolldown()],
+    esbuildPlugins: [
+      ...(baseConfig.esbuildPlugins || []),
+      injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
-    esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })],
     format: ['cjs'],
-    target: [...baseConfig.target, 'es2019']
+    target: [...baseConfig.target, 'es2019'],
   },
   {
     ...baseConfig,
     entry: { 'botframework-webchat-fluent-theme': './src/index.ts' },
-    plugins: [
-      LightningCSS.rolldown()
+    plugins: [LightningCSS.rolldown()],
+    esbuildPlugins: [
+      ...(baseConfig.esbuildPlugins || []),
+      injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
-    esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })],
     format: ['esm']
   },
   {
     ...baseConfig,
     entry: { 'botframework-webchat-fluent-theme.development': './src/bundle.ts' },
-    esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), umdResolvePlugin],
-    plugins: [
-      LightningCSS.rolldown()
+    esbuildPlugins: [
+      ...(baseConfig.esbuildPlugins || []),
+      injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
+    plugins: [LightningCSS.rolldown(), umdResolvePlugin],
     format: 'iife',
-    outExtension() {
-      return { js: '.js' };
-    }
+    outputOptions(outputOptions) {
+      outputOptions.entryFileNames = '[name].js';
+      outputOptions.globals = {
+        react: 'React',
+        'react/jsx-runtime': 'React'
+      };
+      return outputOptions;
+    },
+    noExternal: iifeDeps
   },
   {
     ...baseConfig,
     entry: { 'botframework-webchat-fluent-theme.production.min': './src/bundle.ts' },
-    esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), umdResolvePlugin],
-    plugins: [
-      LightningCSS.rolldown()
+    esbuildPlugins: [
+      ...(baseConfig.esbuildPlugins || []),
+      injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
+    plugins: [LightningCSS.rolldown(), umdResolvePlugin],
     format: 'iife',
     minify: true,
-    outExtension() {
-      return { js: '.js' };
-    }
+    outputOptions(outputOptions) {
+      outputOptions.entryFileNames = '[name].js';
+      outputOptions.globals = {
+        react: 'React',
+        'react/jsx-runtime': 'React'
+      };
+      return outputOptions;
+    },
+    noExternal: iifeDeps
   }
 ]);