Parse mdxJsxAttributeValueExpression

Author: pomber

packages/mdx/src/annotations.tsx

@@ -14,19 +14,16 @@ function Box({
   data,
   theme,
 }: {
-  data: {
-    url: string
-    title: string | undefined
-  }
+  data: any
   children: React.ReactNode
   theme: any
 }) {
   const border =
-    data ||
-    theme.tokenColors.find((tc: any) =>
-      tc.scope?.includes("string")
-    )?.settings?.foreground ||
-    "yellow"
+    typeof data === "string"
+      ? data
+      : theme.tokenColors.find((tc: any) =>
+          tc.scope?.includes("string")
+        )?.settings?.foreground || "yellow"
   return (
     <span style={{ outline: `2px solid ${border}` }}>
       {children}

packages/mdx/src/to-estree.ts

@@ -187,6 +187,13 @@ export function valueToEstree(
       return (mdastToEstree(tree) as any).body[0].expression
     }
 
+    if (
+      (value as any)?.type ===
+      "mdxJsxAttributeValueExpression"
+    ) {
+      return (value as any).data.estree.body[0].expression
+    }
+
     return {
       type: "ObjectExpression",
       // @ts-expect-error: looks like an object.

packages/playground/content/custom-annotations.mdx

@@ -1,3 +1,5 @@
+import { MyTooltipAnnotation } from "./MyTooltipAnnotation"
+
 # JSX Annotations
 
 ```js
@@ -13,9 +15,4 @@ function adipiscing(...elit) {
 }
 ```
 
-<CH.Annotation
-  as="link"
-  focus="4[16:26]"
-  url="https://github.com/code-hike"
-  title="Code Hike"
-/>
+<CH.Annotation as={MyTooltipAnnotation} focus="4[16:26]" />

packages/playground/content/custom-annotations/MyTooltipAnnotation.jsx

@@ -1,3 +1,17 @@
-export function MyTooltipAnnotation() {
-  return "I'm a tooltip"
+export function MyTooltipAnnotation({
+  children,
+  data,
+  theme,
+}) {
+  const border =
+    typeof data === "string"
+      ? data
+      : theme.tokenColors.find(tc =>
+          tc.scope?.includes("string")
+        )?.settings?.foreground || "yellow"
+  return (
+    <span style={{ outline: `2px solid ${border}` }}>
+      {children}
+    </span>
+  )
 }

packages/playground/src/page-data.js

@@ -62,6 +62,7 @@ export async function toProps({ demo, theme }) {
     console.error("remark-code-hike error", e)
     const errorBundle = await bundle(
       `### remark-code-hike error \n ~~~\n${e.toString()}\n~~~`,
+      undefined,
       []
     )