Add index.browser.mjs

Author: pomber

packages/mdx/package.json

@@ -28,6 +28,9 @@
       "default": "./dist/components.cjs.js"
     }
   },
+  "browser": {
+    "./dist/index.esm.js": "./dist/index.browser.mjs"
+  },
   "scripts": {
     "dev": "next",
     "build": "rollup -c rollup.config.js",
@@ -50,6 +53,7 @@
   "devDependencies": {
     "@mdx-js/mdx": "^2.0.0",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "@types/diff": "^5.0.2",
     "@types/node": "^17.0.21",
     "@types/node-fetch": "^2.6.1",

packages/mdx/rollup.config.js

@@ -7,6 +7,8 @@ import typescript from "rollup-plugin-typescript2"
 import path from "path"
 import json from "@rollup/plugin-json"
 import del from "rollup-plugin-delete"
+import replace from "@rollup/plugin-replace"
+// import { terser } from "rollup-plugin-terser"
 
 export default function makeConfig(commandOptions) {
   return [
@@ -46,6 +48,35 @@ export default function makeConfig(commandOptions) {
         }),
       ],
     },
+    // for the browser esm we need to replace shiki with shiki/dist/shiki.browser.mjs
+    // https://github.com/shikijs/shiki/issues/131#issuecomment-1094281851
+    {
+      input: `src/index.tsx`,
+      output: [
+        {
+          file: `./dist/index.browser.mjs`,
+          format: "es",
+        },
+      ],
+      // external: ["react"],
+      plugins: [
+        replace({
+          delimiters: ["", ""],
+          values: {
+            '"shiki"': JSON.stringify(
+              "shiki/dist/index.browser.mjs"
+            ),
+          },
+        }),
+        json({ compact: true }),
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: { jsx: "react" },
+          },
+        }),
+        // terser(),
+      ],
+    },
     {
       input: `src/components.tsx`,
       output: [

packages/mdx/src/highlighter/index.tsx

@@ -33,6 +33,7 @@ export async function highlight({
     }
   }
   if (highlighterPromise === null) {
+    // TODO add version
     setCDN("https://unpkg.com/shiki/")
     highlighterPromise = getHighlighter({
       theme: theme as IShikiTheme,