Merge pull request #154 from code-hike/browser-example

pomber · web-flow · commit 8cc8db87b5c2 · 2022-04-10T12:19:16.000-03:00
Browser example
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Hike in the browser</title>
+    <link
+      rel="stylesheet"
+      href="https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/dist/index.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module">
+      import React from "https://esm.sh/react"
+      import ReactDOM from "https://esm.sh/react-dom"
+      import { evaluate } from "https://esm.sh/@mdx-js/mdx?dev"
+      import * as runtime from "https://esm.sh/react/jsx-runtime.js"
+
+      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/dist/index.browser.mjs"
+      import { CH } from "https://esm.sh/@code-hike/mdx@0.4.0--canary.154.285c03a.0/components"
+      import theme from "https://esm.sh/shiki@0.10.1/themes/nord.json" assert { type: "json" }
+
+      const mdx = `# Test
+
+      ~~~python hello.py mark=1[22:30]
+      print("Rendered with Code Hike")
+      ~~~
+      `
+
+      const { default: Content } = await evaluate(mdx, {
+        ...runtime,
+        remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      })
+
+      const App = () => {
+        return React.createElement(Content, { components: { CH } })
+      }
+
+      ReactDOM.render(React.createElement(App), document.getElementById("root"))
+    </script>
+  </body>
+</html>
diff --git a/packages/mdx/package.json b/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",
diff --git a/packages/mdx/rollup.config.js b/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,34 @@ export default function makeConfig(commandOptions) {
         }),
       ],
     },
+    // for the browser esm we need to replace shiki with shiki/dist/index.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: {
+            'from "shiki"':
+              'from "shiki/dist/index.browser.mjs"',
+          },
+        }),
+        json({ compact: true }),
+        typescript({
+          tsconfigOverride: {
+            compilerOptions: { jsx: "react" },
+          },
+        }),
+        // terser(),
+      ],
+    },
     {
       input: `src/components.tsx`,
       output: [
diff --git a/packages/mdx/src/highlighter/index.tsx b/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,
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ export async function highlight({`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`if (highlighterPromise === null) {`
	`36`	`+ // TODO add version`
`36`	`37`	`setCDN("https://unpkg.com/shiki/")`
`37`	`38`	`highlighterPromise = getHighlighter({`
`38`	`39`	`theme: theme as IShikiTheme,`