code-hike · pomber · May 25, 2022 · May 19, 2022 · May 20, 2022 · May 20, 2022
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -4,7 +4,7 @@
     <title>Code Hike in the browser</title>
     <link
       rel="stylesheet"
-      href="https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.css"
+      href="https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.css"
     />
   </head>
   <body>
@@ -13,18 +13,26 @@
     <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 { evaluate } from "https://esm.sh/@mdx-js/mdx?bundle"
       import * as runtime from "https://esm.sh/react/jsx-runtime.js"
 
-      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/dist/index.browser.mjs"
-      import { CH } from "https://esm.sh/@code-hike/mdx@0.4.0-next.1/components"
-      import theme from "https://esm.sh/[email protected]/themes/nord.json" assert { type: "json" }
+      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/dist/index.browser.mjs?bundle"
+      import { CH } from "https://esm.sh/@code-hike/mdx@0.5.2-next.2/components"
+      import theme from "https://esm.sh/[email protected]/themes/dracula.json" assert { type: "json" }
 
       const mdx = `# Test
 
-      ~~~python hello.py mark=1[22:30]
-      print("Rendered with Code Hike")
-      ~~~
+<CH.Code>
+
+~~~python hello.py mark=1[22:30]
+print("Rendered with Code Hike")
+~~~
+
+~~~js hello.js mark=1[23:36]
+console.log("Rendered with Code Hike")
+~~~
+
+</CH.Code>
       `
 
       const { default: Content } = await evaluate(mdx, {

diff --git a/package.json b/package.json
@@ -4,12 +4,14 @@
     "packages": [
       "packages/mdx",
       "examples/*",
+      "playground",
       "site"
     ]
   },
   "scripts": {
     "build": "lerna run --stream build",
     "build:lib": "lerna run --stream --scope @*/mdx build",
+    "build:playground": "lerna run --stream --scope playground build",
     "test": "lerna run --stream test",
     "dev": "lerna run --stream --scope @*/mdx dev",
     "release": "auto shipit"

diff --git a/packages/mdx/dev/content/markdown.mdx b/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!",
+    }
+  },
+}
+```
diff --git a/packages/mdx/dev/files.ts b/packages/mdx/dev/files.ts
@@ -1,7 +1,7 @@
 import fs from "fs"
 import { remarkCodeHike } from "../src/index"
 import { compile } from "@mdx-js/mdx"
-import theme from "shiki/themes/nord.json"
+import theme from "shiki/themes/rose-pine-moon.json"
 import { withDebugger } from "mdx-debugger"
 
 export async function getFiles() {

diff --git a/packages/mdx/package.json b/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"
   },
@@ -71,6 +72,7 @@
     "react-json-view": "^1.21.3",
     "rollup": "^2.41.2",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "sass": "^1.49.9",

diff --git a/packages/mdx/rollup.config.js b/packages/mdx/rollup.config.js
@@ -8,6 +8,7 @@ import path from "path"
 import json from "@rollup/plugin-json"
 import del from "rollup-plugin-delete"
 import replace from "@rollup/plugin-replace"
+import dts from "rollup-plugin-dts"
 import { nodeResolve } from "@rollup/plugin-node-resolve"
 // import { terser } from "rollup-plugin-terser"
 import commonjs from "@rollup/plugin-commonjs"
@@ -72,6 +73,12 @@ export default function makeConfig(commandOptions) {
         }),
       ],
     },
+    {
+      input: `src/index.tsx`,
+      output: [{ file: `./dist/index.d.ts`, format: "es" }],
+      external: [...remarkExternal, "shiki"],
+      plugins: [dts()],
+    },
     // for the browser esm we need to replace shiki with shiki/dist/index.browser.mjs
     // https://github.com/shikijs/shiki/issues/131#issuecomment-1094281851
     {
@@ -125,5 +132,13 @@ export default function makeConfig(commandOptions) {
         }),
       ],
     },
+    {
+      input: `src/components.tsx`,
+      output: [
+        { file: `./dist/components.d.ts`, format: "es" },
+      ],
+      external: clientExternal,
+      plugins: [dts()],
+    },
   ]
 }
diff --git a/packages/mdx/src/highlighter/index.tsx b/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,
     })
   }
 

diff --git a/packages/mdx/src/mdx-client/code.tsx b/packages/mdx/src/mdx-client/code.tsx
@@ -5,7 +5,7 @@ import {
   EditorProps,
   EditorStep,
 } from "../mini-editor"
-import { CodeHikeConfig } from "remark/config"
+import { CodeHikeConfig } from "../remark/config"
 
 export function Code(
   props: EditorProps & Partial<CodeHikeConfig>

diff --git a/packages/mdx/src/mini-editor/editor-frame.tsx b/packages/mdx/src/mini-editor/editor-frame.tsx
@@ -63,7 +63,7 @@ export const EditorFrame = React.forwardRef<
       style={{
         background: getColor(
           theme,
-          ColorName.EditorGroupHeaderBackground
+          ColorName.EditorBackground
         ),
         ...style,
       }}
@@ -72,6 +72,10 @@ export const EditorFrame = React.forwardRef<
         className={"ch-frame-title-bar"}
         style={{
           color: getColor(theme, ColorName.IconForeground),
+          background: getColor(
+            theme,
+            ColorName.EditorGroupHeaderBackground
+          ),
         }}
       >
         <TabsContainer
@@ -98,6 +102,10 @@ export const EditorFrame = React.forwardRef<
                 theme,
                 ColorName.IconForeground
               ),
+              background: getColor(
+                theme,
+                ColorName.EditorGroupHeaderBackground
+              ),
             }}
           >
             <TabsContainer

diff --git a/packages/mdx/src/remark/comment-data.ts b/packages/mdx/src/remark/comment-data.ts
@@ -28,11 +28,25 @@ export function getCommentData(
   }
 }
 
+function getTextAfter(
+  line: Code["lines"][0],
+  prefix: string
+) {
+  const firstIndex = line.tokens.findIndex(t =>
+    t.content.trim().startsWith(prefix)
+  )
+  if (firstIndex === -1) {
+    return undefined
+  }
+  return line.tokens
+    .slice(firstIndex)
+    .map(t => t.content)
+    .join("")
+}
+
 const commentRegex = /\/\/\s+(\w+)(\S*)\s*(.*)/
 function otherComment(line: Code["lines"][0]) {
-  const comment = line.tokens.find(t =>
-    t.content.trim().startsWith("//")
-  )?.content
+  const comment = getTextAfter(line, "//")
 
   if (!comment) {
     return []
@@ -56,9 +70,7 @@ const bashLikeLangs = [
 ]
 const bashLikeCommentRegex = /#\s+(\w+)(\S*)\s*(.*)/
 function bashLikeComment(line: Code["lines"][0]) {
-  const comment = line.tokens.find(t =>
-    t.content.trim().startsWith("#")
-  )?.content
+  const comment = getTextAfter(line, "#")
 
   if (!comment) {
     return []

diff --git a/packages/mdx/src/remark/transform.preview.ts b/packages/mdx/src/remark/transform.preview.ts
@@ -1,4 +1,3 @@
-import fetch from "node-fetch"
 import { visitAsync, toJSX } from "./unist-utils"
 import { JsxNode, SuperNode } from "./nodes"
 
@@ -14,6 +13,7 @@ export async function getPresetConfig(
   const prefix = "https://codesandbox.io/s/"
   const csbid = url.slice(prefix.length)
   const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
+  const { default: fetch } = await import("node-fetch")
   const res = await fetch(configUrl)
   return await res.json()
 }

diff --git a/packages/mdx/tsconfig.json b/packages/mdx/tsconfig.json
@@ -12,7 +12,7 @@
       "esnext"
     ],
     "importHelpers": true,
-    "declaration": true,
+    "declaration": false,
     "sourceMap": true,
     "strict": false,
     "noUnusedLocals": false,
@@ -39,7 +39,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "isolatedModules": true,
-    "incremental": true
+    "incremental": true,
+    "tsBuildInfoFile": "./dist/tsbuildinfo.json"
   },
   "exclude": [
     "node_modules"

diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# Contentlayer
+.contentlayer
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <meta
+      property="description"
+      content="Try Code Hike directly in your browser"
+    />
+    <meta property="og:title" content="Code Hike Playground" />
+    <meta
+      property="og:description"
+      content="Try Code Hike directly in your browser"
+    />
+    <meta name="twitter:site" content="@codehike_" />
+    <!-- <meta name="twitter:card" content="summary_large_image" />
+    <meta name="image" content="{imageUrl}" />
+    <meta itemprop="image" content="{imageUrl}" />
+    <meta name="twitter:image" content="{imageUrl}" />
+    <meta property="og:image" content="{imageUrl}" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Hike Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@code-hike/mdx": "^0.5.1",
+    "@mdx-js/mdx": "^2.1.1",
+    "@monaco-editor/react": "^4.4.5",
+    "lz-string": "^1.4.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4",
+    "react-split-pane": "^0.1.92"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^1.3.0",
+    "vite": "^2.9.9"
+  }
+}