Merge pull request #338 from code-hike/next

v0.8.1

Author: pomber

packages/mdx/dev/content/markdown.mdx

@@ -1,19 +1,33 @@
 Test nested syntax highlighting
 
-````md hi.md
-# Hi
+````mdx hi.md
+<CH.Section>
 
-```js
-export default {
-  data() {
-    return {
-      greeting: "Hello World!",
-    }
-  },
+```python
+def lorem(ipsum):
+  ipsum + 1
+```
+
+Something `def lorem(ipsum)`
+
+Hello, [hover me](focus://1[5:16])
+
+<CH.Code>
+
+```python one.py
+def lorem(ipsum):
+  ipsum + 1
+```
+
+```js two.js
+function lorem(ipsum) {
+  return ipsum + 1
 }
 ```
 
-[lorem](https://loremipsum.com)
+</CH.Code>
+
+</CH.Section>
 ````
 
 ```js hi.js

packages/mdx/dev/content/slideshow-autoplay.mdx

@@ -1,6 +1,6 @@
 # Slideshow Auto
 
-This is how to use the `<CH.Sildeshow>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
+This is how to use the `<CH.Slideshow>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
 
 <CH.Slideshow preset="https://codesandbox.io/s/rfdho" code={{minZoom: 0.5}} autoPlay={3000} loop>
 

packages/mdx/dev/content/slideshow-demo.mdx

@@ -1,6 +1,6 @@
 # Slideshow with preview
 
-This is how to use the `<CH.Sildeshow>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
+This is how to use the `<CH.Slideshow>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
 
 <CH.Slideshow preset="https://codesandbox.io/s/rfdho" code={{minZoom: 0.5}}>
 

packages/mdx/package.json

@@ -44,7 +44,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@code-hike/lighter": "^0.2.0",
+    "@code-hike/lighter": "^0.5.2",
     "node-fetch": "^2.0.0",
     "shiki": "^0.10.1"
   },
@@ -72,6 +72,7 @@
     "react-dom": "^18.1.0",
     "react-json-view": "^1.21.3",
     "rollup": "^2.41.2",
+    "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-postcss": "^4.0.0",

packages/mdx/rollup.config.js

@@ -12,6 +12,7 @@ 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"
+import banner2 from "rollup-plugin-banner2"
 
 const clientExternal = [
   "react",
@@ -136,6 +137,7 @@ export default function makeConfig(commandOptions) {
             compilerOptions: { jsx: "react" },
           },
         }),
+        banner2(() => `"use client";\n`),
       ],
     },
     {

packages/mdx/src/highlighter/index.tsx

@@ -22,14 +22,23 @@ export async function highlight({
     }
   }
 
-  const r = await light(code, lang as any, theme)
+  try {
+    const r = await light(code, lang as any, theme)
 
-  const lines = r.lines.map(line => ({
-    tokens: line.map(token => ({
-      content: token.content,
-      props: { style: token.style },
-    })),
-  }))
+    const lines = r.lines.map(line => ({
+      tokens: line.map(token => ({
+        content: token.content,
+        props: { style: token.style },
+      })),
+    }))
 
-  return { lines, lang }
+    return { lines, lang }
+  } catch (e) {
+    // TODO check error is "missing grammar"
+    console.warn(
+      "[Code Hike warning]",
+      `${lang} is not a valid language, no syntax highlighting will be applied.`
+    )
+    return highlight({ code, lang: "text", theme })
+  }
 }

playground/src/index.css

@@ -214,3 +214,26 @@ main {
   display: block;
   padding: 4px;
 }
+
+.loading-border {
+  position: absolute;
+  top: 0;
+  border-top: 6px solid rgb(96 165 250);
+  transition: opacity 0.5s;
+  animation: loading-border 2.5s linear infinite;
+}
+
+@keyframes loading-border {
+  from {
+    right: 100%;
+    left: 0%;
+  }
+  50% {
+    right: 0%;
+    left: 0%;
+  }
+  to {
+    right: 0%;
+    left: 100%;
+  }
+}

playground/src/preview.jsx

@@ -29,11 +29,9 @@ function ErrorFallback({ error }) {
   );
 }
 
-function InnerPreview({ input, standalone, refreshKey }) {
-  const [Content, setContent] = useState(undefined);
-  const [error, setError] = useState(undefined);
-  useEffect(() => {
-    compile(input.mdx, {
+async function compileAndRun(input) {
+  try {
+    const c = await compile(input.mdx, {
       outputFormat: "function-body",
       remarkPlugins: [
         [
@@ -45,19 +43,49 @@ function InnerPreview({ input, standalone, refreshKey }) {
           },
         ],
       ],
-    })
-      .then((c) => {
-        return run(String(c), runtime);
-      })
-      .then((x) => {
-        setContent(() => x.default);
-        setError(undefined);
-      })
-      .catch((e) => {
-        setError(e.message);
-        console.error({ e });
-      });
+    });
+    const x = await run(String(c), runtime);
+    return { content: x.default, error: undefined };
+  } catch (e) {
+    return { content: undefined, error: e.message };
+  }
+}
+
+let effectId = 0;
+
+function useInput(input) {
+  const [{ Content, error }, setState] = useState({
+    Content: undefined,
+    error: undefined,
+  });
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const id = effectId;
+    // console.log("compiling...", id);
+    setLoading(true);
+    compileAndRun(input).then(({ content, error }) => {
+      // console.log("compiled", id, error);
+      if (id !== effectId) {
+        // console.log("skipping", id);
+        return;
+      }
+      setState((state) => ({
+        Content: content || state.Content,
+        error,
+      }));
+      setLoading(false);
+    });
+    return () => {
+      // console.log("cancelling", id);
+      effectId++;
+    };
   }, [input.mdx, input.css, input.config]);
+
+  return { Content, error, loading };
+}
+
+function InnerPreview({ input, standalone, refreshKey }) {
+  const { Content, error, loading } = useInput(input);
   // console.log(error);
   return (
     <>
@@ -78,6 +106,7 @@ function InnerPreview({ input, standalone, refreshKey }) {
         </a>
       )}
       <div className={`preview-container ${error ? "with-error" : ""}`}>
+        <div style={{ opacity: loading ? 1 : 0 }} className="loading-border" />
         {Content ? <Content components={{ CH }} key={refreshKey} /> : null}
       </div>
     </>