Bundle ShikiJS for Webpack 4

microsoft · Nov 5, 2024 · 8571482 · 8571482
1 parent b245b63
commit 8571482
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/packages/component/src/Attachment/Text/private/shiki.ts b/packages/component/src/Attachment/Text/private/shiki.ts
@@ -1,14 +1,14 @@
 // `shiki/core` entry does not include any themes or languages or the wasm binary.
-import { createHighlighterCore, type ThemeRegistrationRaw } from 'shiki/core';
-import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs';
+import { createHighlighterCore, type ThemeRegistrationRaw } from 'shiki/dist/core.mjs';
+import { createJavaScriptRegexEngine } from 'shiki/dist/engine-javascript.mjs';
 
 // directly import the theme and language modules, only the ones you imported will be bundled.
-import themeGitHubDark from 'shiki/themes/github-dark-default.mjs';
-import themeGitHubLight from 'shiki/themes/github-light-default.mjs';
+import themeGitHubDark from 'shiki/dist/themes/github-dark-default.mjs';
+import themeGitHubLight from 'shiki/dist/themes/github-light-default.mjs';
 
-import languageJavaScript from 'shiki/langs/js.mjs';
-import languagePython from 'shiki/langs/py.mjs';
-import languageTypeScript from 'shiki/langs/ts.mjs';
+import languageJavaScript from 'shiki/dist/langs/js.mjs';
+import languagePython from 'shiki/dist/langs/py.mjs';
+import languageTypeScript from 'shiki/dist/langs/ts.mjs';
 
 function addjustTheme(theme: ThemeRegistrationRaw): ThemeRegistrationRaw {
   return {

diff --git 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([