From a49da14240035aaeaf7fe1368fa360792bfcd286 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Tue, 5 Nov 2024 08:07:19 -0800
Subject: [PATCH] Bundle ShikiJS for Webpack 4 (#5349)

* Bundle ShikiJS for Webpack 4

* Add entry

* Use named exports
---
 CHANGELOG.md                      |  1 +
 packages/component/tsup.config.ts | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 241dd251f7..5957f2df64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixes [#5319](https://github.com/microsoft/BotFramework-WebChat/issues/5319). Some Markdown text are not rendered after HTML tags, in PR [#5320](https://github.com/microsoft/BotFramework-WebChat/pull/5320), by [@compulim](https://github.com/compulim)
 -  Fixes [#5323](https://github.com/microsoft/BotFramework-WebChat/issues/5323). Removed unused CSS class from carousel component, eliminating unintended styling, in PR [#5325](https://github.com/microsoft/BotFramework-WebChat/pull/5325), by [@OEvgeny](https://github.com/OEvgeny)
 -  Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR [#5326](https://github.com/microsoft/BotFramework-WebChat/pull/5326), in PR [#5327](https://github.com/microsoft/BotFramework-WebChat/pull/5327), by [@OEvgeny](https://github.com/OEvgeny)
+-  Fixed [#5350](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5350). Bundled `shiki` in component package, in PR [#5349](https://github.com/microsoft/BotFramework-WebChat/pull5349), by [@compulim](https://github.com/compulim)
 
 # Removed
 
diff --git a/packages/component/tsup.config.ts b/packages/component/tsup.config.ts
index 7df5a259f5..e925f68869 100644
--- a/packages/component/tsup.config.ts
+++ b/packages/component/tsup.config.ts
@@ -6,19 +6,24 @@ import { decoratorStyleContent as decoratorStyleContentPlaceholder } from './src
 
 const config: typeof baseConfig = {
   ...baseConfig,
-  loader: {
-    ...baseConfig.loader,
-    '.css': 'local-css'
+  entry: {
+    'botframework-webchat-component': './src/index.ts',
+    'botframework-webchat-component.internal': './src/internal.ts',
+    'botframework-webchat-component.decorator': './src/decorator/index.ts'
   },
   esbuildPlugins: [
     injectCSSPlugin({ stylesPlaceholder: componentStyleContentPlaceholder }),
     injectCSSPlugin({ stylesPlaceholder: decoratorStyleContentPlaceholder })
   ],
-  entry: {
-    'botframework-webchat-component': './src/index.ts',
-    'botframework-webchat-component.internal': './src/internal.ts',
-    'botframework-webchat-component.decorator': './src/decorator/index.ts'
-  }
+  loader: {
+    ...baseConfig.loader,
+    '.css': 'local-css'
+  },
+  noExternal: [
+    // Belows are the dependency chain related to "regex" where it is named export-only and does not work on Webpack 4/PPUX (CJS cannot import named export).
+    // Webpack 4: "Can't import the named export 'rewrite' from non EcmaScript module (only default export is available)"
+    'shiki', // shiki -> @shikijs/core -> @shikijs/engine-javascript -> regex
+  ]
 };
 
 export default defineConfig([