Lazy load languages on browser

Author: pomber

packages/mdx/dev/content/markdown.mdx

@@ -0,0 +1,27 @@
+Test nested syntax highlighting
+
+````md hi.md
+# Hi
+
+```js
+export default {
+  data() {
+    return {
+      greeting: "Hello World!",
+    }
+  },
+}
+```
+
+[lorem](https://loremipsum.com)
+````
+
+```js hi.js
+export default {
+  data() {
+    return {
+      greeting: "Hello World!",
+    }
+  },
+}
+```

packages/mdx/package.json

@@ -34,6 +34,7 @@
   "scripts": {
     "dev": "next",
     "build": "rollup -c rollup.config.js",
+    "watch": "rollup --watch -c  rollup.config.js",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },

packages/mdx/src/highlighter/index.tsx

@@ -33,11 +33,17 @@ export async function highlight({
     }
   }
   if (highlighterPromise === null) {
+    const isBrowser = typeof window !== "undefined"
+    // if we are on the server we load all the languages
+    // if we are on the browser just load the first language
+    // subsequent calls with different languages will lazy load
+    const langs = isBrowser ? [lang as Lang] : undefined
+
     // TODO add version
     setCDN("https://unpkg.com/shiki/")
     highlighterPromise = getHighlighter({
       theme: theme as IShikiTheme,
-      // langs: [lang as Lang], // TODO change lang from string to Lang
+      langs,
     })
   }