JSX annotations

Author: pomber

packages/mdx/package.json

@@ -9,6 +9,10 @@
   "files": [
     "dist"
   ],
+  "inputs": [
+    "index",
+    "components"
+  ],
   "scripts": {
     "x": "x"
   },

packages/mdx/src/annotations.tsx

@@ -3,6 +3,7 @@ import { CodeAnnotation } from "@code-hike/smooth-code"
 import { CodeLink } from "./links"
 import { Code, relativeToAbsolute } from "@code-hike/utils"
 import { Node, Parent } from "unist"
+import { wrapChildren } from "./to-estree"
 
 export function Annotation() {
   return "error: code hike remark plugin not running or annotation isn't at the right place"
@@ -72,11 +73,12 @@ function Label({
   style,
   theme,
 }: {
-  data: string
+  data: any
   children: React.ReactNode
   style?: React.CSSProperties
   theme?: any
 }) {
+  console.log(data)
   const bg = ((theme as any).colors[
     "editor.lineHighlightBackground"
   ] ||
@@ -104,7 +106,7 @@ function Label({
           opacity: 0.7,
         }}
       >
-        {data}
+        {data?.children || data}
       </div>
     </div>
   )
@@ -206,7 +208,9 @@ export function extractJSXAnnotations(
       props[attr.name] = attr.value
     })
     const { as, focus, ...data } = props
-    // data.children = wrapChildren(jsxAnnotation.children);
+    data.children = wrapChildren(
+      jsxAnnotation.children || []
+    )
 
     const Component = annotationsMap[as] || as
     annotations.push({

packages/mdx/src/index.tsx

@@ -1,4 +1,3 @@
 import "./index.scss"
 
 export { remarkCodeHike } from "./plugin"
-export { CH } from "./components"

packages/mdx/src/plugin.ts

@@ -62,8 +62,10 @@ function addImportNode(tree: Parent) {
             ],
             source: {
               type: "Literal",
-              value: "@code-hike/mdx",
-              raw: '"@code-hike/mdx"',
+              value:
+                "@code-hike/mdx/dist/components.esm.js",
+              raw:
+                '"@code-hike/mdx/dist/components.esm.js"',
             },
           },
         ],

packages/mdx/src/to-estree.ts

@@ -1,9 +1,10 @@
 import { Expression } from "estree"
 import isPlainObject from "is-plain-obj"
 import { annotationsMap } from "./annotations"
-// import unified from "unified"
-// import remarkRehype from "remark-rehype"
-// import { toEstree } from "hast-util-to-estree"
+import unified from "unified"
+import remarkRehype from "remark-rehype"
+import toEstree from "hast-util-to-estree"
+import { Node, Parent } from "unist"
 
 // forked from https://github.com/remcohaszing/estree-util-value-to-estree/blob/main/src/index.ts
 
@@ -180,6 +181,12 @@ export function valueToEstree(
     }
   }
   if (options.instanceAsObject || isPlainObject(value)) {
+    if ((value as any)?.name === MDX_CHILDREN) {
+      const tree = { ...(value as any) }
+      tree.name = null
+      return (mdastToEstree(tree) as any).body[0].expression
+    }
+
     return {
       type: "ObjectExpression",
       // @ts-expect-error: looks like an object.
@@ -233,29 +240,36 @@ export function valueToEstree(
   throw new TypeError(`Unsupported value: ${String(value)}`)
 }
 
-// export async function mdastToEstree(node: Node) {
-//   const nodeTypes = [
-//     "mdxFlowExpression",
-//     "mdxJsxFlowElement",
-//     "mdxJsxTextElement",
-//     "mdxTextExpression",
-//     "mdxjsEsm",
-//   ]
-//   const changedTree = unified()
-//     .use(remarkRehype, {
-//       allowDangerousHtml: true,
-//       passThrough: nodeTypes,
-//     })
-//     .use(rehypeRecma as any)
-//     .runSync(node as any)
+export function mdastToEstree(node: Node) {
+  const nodeTypes = [
+    "mdxFlowExpression",
+    "mdxJsxFlowElement",
+    "mdxJsxTextElement",
+    "mdxTextExpression",
+    "mdxjsEsm",
+  ]
+  const changedTree = unified()
+    .use(remarkRehype, {
+      allowDangerousHtml: true,
+      passThrough: nodeTypes,
+    })
+    .use(rehypeRecma as any)
+    .runSync(node)
 
-//   return changedTree
-// }
+  return changedTree
+}
 
-// function rehypeRecma() {
-//   return (tree: any) => toEstree(tree)
-// }
+function rehypeRecma() {
+  return (tree: any) => (toEstree as any)(tree)
+}
 
-// export function wrapChildren() {
-//   return {}
-// }
+const MDX_CHILDREN = "MDX_CHILDREN"
+
+export function wrapChildren(children: Node[]) {
+  const tree = {
+    type: "mdxJsxFlowElement",
+    children,
+    name: MDX_CHILDREN,
+  }
+  return tree
+}

packages/playground/content/custom-annotations.mdx

@@ -19,8 +19,3 @@ function adipiscing(...elit) {
   url="https://github.com/code-hike"
   title="Code Hike"
 />
-<CH.Annotation as="label" focus="8">
-  
-**Hello**
-
-</CH.Annotation>

packages/script/rollup.config.js

@@ -6,18 +6,7 @@ import typescript from "rollup-plugin-typescript2"
 import copy from "rollup-plugin-copy"
 import path from "path"
 import json from "@rollup/plugin-json"
-
-const plugins = [
-  json({ compact: true }),
-  typescript(),
-  postcss({
-    extract: path.resolve("dist/index.css"),
-    plugins: [autoprefixer(), cssnano()],
-  }),
-  copy({
-    targets: [{ src: "src/index.scss", dest: "dist" }],
-  }),
-]
+import fs from "fs"
 
 const createConfig = filename => ({
   input: `src/${filename}.tsx`,
@@ -37,11 +26,22 @@ const createConfig = filename => ({
     },
   ],
   // external: ["react"],
-  plugins,
+  plugins: [
+    json({ compact: true }),
+    typescript(),
+    postcss({
+      extract: path.resolve("dist/index.css"),
+      plugins: [autoprefixer(), cssnano()],
+    }),
+    copy({
+      targets: [{ src: "src/index.scss", dest: "dist" }],
+    }),
+  ],
 })
 
-const configs = ["index"].map(filename =>
-  createConfig(filename)
-)
-
-export default configs
+export default function makeConfig(commandOptions) {
+  const { inputs = ["index"] } = JSON.parse(
+    fs.readFileSync("package.json", "utf8")
+  )
+  return inputs.map(createConfig)
+}