@terrafirmagreg-team/mdx 1.2.11 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/mdx",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "type": "module",
   "description": "MDX/markdown pipeline",
   "license": "LGPL-3.0-only",
@@ -20,13 +20,15 @@
     "./lib/markdown": "./src/lib/markdown/index.ts"
   },
   "dependencies": {
-    "@terrafirmagreg-team/translate": "^1.2.11",
-    "@terrafirmagreg-team/ui": "^1.2.15",
+    "@terrafirmagreg-team/translate": "^1.2.14",
+    "@terrafirmagreg-team/ui": "^1.2.22",
+    "estree-util-to-js": "^2.0.0",
+    "estree-util-value-to-estree": "^3.5.0",
     "fumadocs-docgen": "^3.2.0",
     "fumadocs-twoslash": "^4.0.4",
     "fumadocs-typescript": "5.6.0",
     "gemoji": "^8.1.0",
-    "lucide-react": "^1.70.0",
+    "lucide-react": "^1.72.0",
     "mdast-util-to-string": "^4.0.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

package/src/lib/mdx/accordions.ts

@@ -1,10 +1,9 @@
 import {
   contentChildren,
-  estreeBoolean,
-  estreeStringArray,
   extractDirectiveLabel,
   extractLeafLabel,
   jsxAttr,
+  jsxAttrValue,
   jsxExpression,
   walkContainers,
   type DirectiveNode,
@@ -46,9 +45,7 @@ function wrapSingle(node: DirectiveNode): void {
           {
             type: 'mdxJsxAttribute',
             name: 'defaultValue',
-            value: jsxExpression(
-              estreeStringArray([String(extractDirectiveLabel(node))]),
-            ),
+            value: jsxExpression([extractDirectiveLabel(node)]),
           } as JsxAttribute,
         ]
       : [],
@@ -71,10 +68,7 @@ function accordionsAttributes(node: DirectiveNode): JsxAttribute[] {
     out.push({
       type: 'mdxJsxAttribute',
       name,
-      value:
-        value == null || value === ''
-          ? jsxExpression(estreeBoolean(true))
-          : value,
+      value: jsxAttrValue(value),
     });
   }
 

package/src/lib/mdx/banner.ts

@@ -1,6 +1,5 @@
 import {
-  estreeBoolean,
-  estreeStringArray,
+  jsxAttrValue,
   jsxExpression,
   walkContainers,
   type DirectiveNode,
@@ -18,7 +17,7 @@ export function remarkBanner() {
           {
             type: 'mdxJsxAttribute',
             name: 'changeLayout',
-            value: jsxExpression(estreeBoolean(false)),
+            value: jsxExpression(false),
           },
           ...toAttributes(directive),
         ],
@@ -40,16 +39,13 @@ function toAttributes(directive: DirectiveNode) {
         return {
           type: 'mdxJsxAttribute' as const,
           name,
-          value: jsxExpression(estreeStringArray(colors)),
+          value: jsxExpression(colors),
         };
       }
       return {
         type: 'mdxJsxAttribute' as const,
         name,
-        value:
-          value == null || value === ''
-            ? jsxExpression(estreeBoolean(true))
-            : value,
+        value: jsxAttrValue(value),
       };
     });
 }

package/src/lib/mdx/directive-utils.ts

@@ -13,6 +13,8 @@ export type {
   MdastNode,
 } from '../../types/mdx';
 
+import { toJs } from 'estree-util-to-js';
+import { valueToEstree } from 'estree-util-value-to-estree';
 import { visit, SKIP, CONTINUE } from 'unist-util-visit';
 
 export function walkContainers(
@@ -43,7 +45,7 @@ export function toJsxAttributes(node: DirectiveNode): JsxAttribute[] {
   return Object.entries(node.attributes ?? {}).map(([name, value]) => ({
     type: 'mdxJsxAttribute',
     name,
-    value: value == null || value === '' ? jsxExpression(estreeBoolean(true)) : value,
+    value: jsxAttrValue(value),
   }));
 }
 
@@ -84,35 +86,31 @@ export function contentChildren(node: DirectiveNode): MdastNode[] {
 }
 
 export function jsxAttr(name: string, value: string | boolean): JsxAttribute {
-  return { type: 'mdxJsxAttribute', name, value };
+  return {
+    type: 'mdxJsxAttribute',
+    name,
+    value: typeof value === 'boolean' ? jsxExpression(value) : value,
+  };
 }
 
-export function jsxExpression(expression: unknown): JsxAttributeValue {
+export function jsxAttrValue(value: unknown): JsxAttributeValue {
+  if (value == null || value === '') return jsxExpression(true);
+  if (typeof value === 'boolean') return jsxExpression(value);
+  return String(value);
+}
+
+export function jsxExpression(value: unknown): JsxAttributeValue {
+  const expression = valueToEstree(value);
   return {
     type: 'mdxJsxAttributeValueExpression',
-    value: '',
+    value: toJs(expression as unknown as Parameters<typeof toJs>[0]).value,
     data: {
       estree: {
         type: 'Program',
         body: [{ type: 'ExpressionStatement', expression }],
-        sourceType: 'script',
+        sourceType: 'module',
       },
     },
   };
 }
 
-export function estreeString(value: string): unknown {
-  return { type: 'Literal', value, raw: JSON.stringify(value) };
-}
-
-export function estreeStringArray(labels: string[]): unknown {
-  return {
-    type: 'ArrayExpression',
-    elements: labels.map(estreeString),
-  };
-}
-
-export function estreeBoolean(value: boolean): unknown {
-  return { type: 'Literal', value, raw: String(value) };
-}
-

package/src/lib/mdx/entries/factory.ts

@@ -2,10 +2,8 @@ import {
   contentChildren,
   extractDirectiveLabel,
   extractLeafLabel,
-  estreeBoolean,
-  estreeString,
   jsxAttr,
-  jsxExpression,
+  jsxAttrValue,
   walkDirectives,
   type DirectiveNode,
   type JsxAttribute,
@@ -37,12 +35,7 @@ export function toAttributes(directive: DirectiveNode): JsxAttribute[] {
   return Object.entries(directive.attributes ?? {}).map(([name, value]) => ({
     type: 'mdxJsxAttribute' as const,
     name,
-    value:
-      value == null || value === ''
-        ? jsxExpression(estreeBoolean(true))
-        : typeof value === 'string'
-          ? value
-          : jsxExpression(estreeString(String(value))),
+    value: jsxAttrValue(value),
   }));
 }
 

package/src/lib/mdx/files.ts

@@ -5,7 +5,7 @@ import type {
 } from 'fumadocs-core/mdx-plugins/remark-mdx-files';
 import { toString } from 'mdast-util-to-string';
 import { visit } from 'unist-util-visit';
-import type { DirectiveNode } from './directive-utils.ts';
+import { jsxAttr, type DirectiveNode } from './directive-utils.ts';
 import type { JsxAttribute, JsxElement, MdastNode } from '../../types/mdx';
 
 type TreeNode = FileNode | FolderNode;
@@ -49,8 +49,7 @@ function nodeToMdx(node: TreeNode, options: ToMdxOptions): JsxElement {
       attributes: attrs,
       children: [],
     };
-  if (options.defaultOpenAll)
-    attrs.push({ type: 'mdxJsxAttribute', name: 'defaultOpen', value: true });
+  if (options.defaultOpenAll) attrs.push(jsxAttr('defaultOpen', true));
   const children =
     node.type === 'folder'
       ? node.children.map((item) => nodeToMdx(item, options) as unknown as MdastNode)

package/src/lib/mdx/tabs.ts

@@ -1,5 +1,4 @@
 import {
-  estreeStringArray,
   extractLeafLabel,
   jsxExpression,
   toJsxAttributes,
@@ -19,7 +18,7 @@ export function remarkTabs() {
 }
 
 function escapeValue(value: string): string {
-  return value.toLowerCase().replace(/\s/, '-');
+  return value.toLowerCase().replace(/\s/g, '-');
 }
 
 function toTabs(node: DirectiveNode): void {
@@ -51,18 +50,18 @@ function toTabs(node: DirectiveNode): void {
   }
 
   const attributes = toJsxAttributes(node).map((attribute) =>
-    attribute.name === 'default'
+    attribute.name === 'default' && typeof attribute.value === 'string'
       ? {
           type: 'mdxJsxAttribute' as const,
           name: 'defaultValue',
-          value: escapeValue(String(attribute.value)),
+          value: escapeValue(attribute.value),
         }
       : attribute,
   );
   attributes.unshift({
     type: 'mdxJsxAttribute',
     name: 'items',
-    value: jsxExpression(estreeStringArray(items)),
+    value: jsxExpression(items),
   });
 
   Object.assign(node, {

package/src/lib/story-remark.ts

@@ -402,7 +402,7 @@ const DIRECTIVE_META: Record<string, DirectiveMeta> = {
     remark: false,
     props: ['url', 'section', 'dataset', 'slug', 'lang', 'version'],
     descriptions: {
-      url: 'Page or image.png URL — overrides the fields below',
+      url: 'Page or image.webp URL — overrides the fields below',
       section: 'Site section the page belongs to',
       dataset: 'Dataset id within the section',
       slug: 'Page path inside the dataset, e.g. getting-started/install',