moved

packages/fern-docs/components/src/accordion.scss

@@ -8,7 +8,7 @@
   }
 
   .fern-accordion-item {
-    @apply first:rounded-t-[inherit] last:rounded-b-[inherit];
+    @apply overflow-hidden first:rounded-t-[inherit] last:rounded-b-[inherit];
   }
 
   .fern-accordion-trigger {

packages/fern-docs/mdx/src/hast-utils/hast-mdx-to-props.ts

@@ -1,12 +1,10 @@
-import type { ElementContent } from "hast";
-import { toEstree } from "hast-util-to-estree";
 import { h } from "hastscript";
 import type {
   MdxJsxAttribute,
-  MdxJsxAttributeValueExpression,
   MdxJsxExpressionAttribute,
 } from "mdast-util-mdx";
 import type { MdxJsxElementHast } from "../declarations";
+import { unknownToMdxJsxAttributeValue } from "../mdx-utils";
 
 interface MdxJsxElementHastAttributes {
   /**
@@ -37,7 +35,7 @@ export function hastMdxJsxElementHastToProps(
   if (element.children.length > 0) {
     // Note: this is a blanket assumption that all child text nodes should be wrapped in a <p> tag
     // before removing this assumption, test against real-world examples for correctness
-    props.children = hastChildrenToAttributeValueExpression(
+    props.children = unknownToMdxJsxAttributeValue(
       element.children.map((child) =>
         child.type === "text" ? h("p", child) : child
       )
@@ -46,20 +44,3 @@ export function hastMdxJsxElementHastToProps(
 
   return { props, expressions };
 }
-
-function hastChildrenToAttributeValueExpression(
-  children: ElementContent[]
-): MdxJsxAttributeValueExpression {
-  return {
-    type: "mdxJsxAttributeValueExpression",
-    value: "__children__",
-    data: {
-      estree: toEstree({
-        type: "mdxJsxFlowElement",
-        name: null,
-        attributes: [],
-        children,
-      }),
-    },
-  };
-}

packages/fern-docs/mdx/src/hast-utils/is-hast-element.ts

@@ -1,7 +1,12 @@
-import type { Element, ElementContent, Root, RootContent } from "hast";
+import { isPlainObject } from "@fern-api/ui-core-utils";
+import type { Element } from "hast";
 
-export function isHastElement(
-  value: ElementContent | Element | Root | RootContent | null | undefined
-): value is Element {
-  return value ? value.type === "element" : false;
+export function isHastElement(value: unknown): value is Element {
+  return (
+    isPlainObject(value) &&
+    value.type === "element" &&
+    typeof value.tagName === "string" &&
+    isPlainObject(value.properties) &&
+    Array.isArray(value.children)
+  );
 }

packages/fern-docs/mdx/src/hast-utils/is-hast-text.ts

@@ -1,7 +1,10 @@
-import type { Element, ElementContent, Root, RootContent, Text } from "hast";
+import { isPlainObject } from "@fern-api/ui-core-utils";
+import type { Text } from "hast";
 
-export function isHastText(
-  value: ElementContent | Element | Root | RootContent | null | undefined
-): value is Text {
-  return value ? value.type === "text" : false;
+export function isHastText(value: unknown): value is Text {
+  return (
+    isPlainObject(value) &&
+    value.type === "text" &&
+    typeof value.value === "string"
+  );
 }

packages/fern-docs/mdx/src/index.ts

@@ -1,3 +1,4 @@
+export { toString as hastToString } from "hast-util-to-string";
 export type { MdxJsxAttribute } from "mdast-util-mdx";
 export { visit } from "unist-util-visit";
 export * from "./declarations";

packages/fern-docs/mdx/src/mdx-utils/is-mdx-element.ts

@@ -1,13 +1,27 @@
-import type * as Hast from "hast";
-import type * as Mdast from "mdast";
+import { isPlainObject } from "@fern-api/ui-core-utils";
 import type { MdxJsxElement, MdxJsxElementHast } from "../declarations";
 
-export function isMdxJsxElement(node: Mdast.Node): node is MdxJsxElement {
-  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+export function isMdxJsxElement(node: unknown): node is MdxJsxElement {
+  if (isPlainObject(node) && typeof node.type === "string") {
+    return (
+      (node.type === "mdxJsxFlowElement" ||
+        node.type === "mdxJsxTextElement") &&
+      Array.isArray(node.children) &&
+      Array.isArray(node.attributes)
+    );
+  }
+  return false;
 }
 
-export function isMdxJsxElementHast(
-  node: Hast.Node
-): node is MdxJsxElementHast {
-  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+export function isMdxJsxElementHast(node: unknown): node is MdxJsxElementHast {
+  // return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+  if (isPlainObject(node) && typeof node.type === "string") {
+    return (
+      (node.type === "mdxJsxFlowElement" ||
+        node.type === "mdxJsxTextElement") &&
+      Array.isArray(node.children) &&
+      Array.isArray(node.attributes)
+    );
+  }
+  return false;
 }

packages/fern-docs/mdx/src/mdx-utils/unknown-to-estree-expression.ts

@@ -4,6 +4,9 @@ import {
   valueToEstree,
   type Options as ValueToEstreeOptions,
 } from "estree-util-value-to-estree";
+import { toEstree } from "hast-util-to-estree";
+import { isHastElement, isHastText } from "../hast-utils";
+import { isMdxJsxElementHast } from "./is-mdx-element";
 import { isMdxJsxAttributeValueExpression } from "./is-mdx-jsx-attr";
 
 export function unknownToEstreeExpression(
@@ -32,6 +35,22 @@ export function unknownToEstreeExpression(
       );
     }
 
+    if (
+      isHastElement(value) ||
+      isHastText(value) ||
+      isMdxJsxElementHast(value)
+    ) {
+      return (
+        toEstree(value)?.body.filter(
+          (elem): elem is ExpressionStatement =>
+            elem.type === "ExpressionStatement"
+        )?.[0]?.expression ?? {
+          type: "Literal",
+          value: null,
+        }
+      );
+    }
+
     return {
       type: "ObjectExpression",
       properties: Object.entries(value).map(([name, val]) => ({

packages/fern-docs/mdx/src/mdx-utils/unknown-to-mdx-jsx-attr.ts

@@ -1,4 +1,7 @@
+import { toEstree } from "hast-util-to-estree";
 import type { MdxJsxAttribute } from "mdast-util-mdx";
+import { isHastElement, isHastText } from "../hast-utils";
+import { isMdxJsxElementHast } from "./is-mdx-element";
 import { isMdxJsxAttributeValueExpression } from "./is-mdx-jsx-attr";
 import { unknownToEstreeExpression } from "./unknown-to-estree-expression";
 
@@ -19,16 +22,19 @@ export function unknownToMdxJsxAttributeValue(
     type: "mdxJsxAttributeValueExpression",
     value: "__expression__",
     data: {
-      estree: {
-        type: "Program",
-        sourceType: "module",
-        body: [
-          {
-            type: "ExpressionStatement",
-            expression: unknownToEstreeExpression(value),
-          },
-        ],
-      },
+      estree:
+        isHastElement(value) || isHastText(value) || isMdxJsxElementHast(value)
+          ? toEstree(value)
+          : {
+              type: "Program",
+              sourceType: "module",
+              body: [
+                {
+                  type: "ExpressionStatement",
+                  expression: unknownToEstreeExpression(value),
+                },
+              ],
+            },
     },
   };
 }

packages/fern-docs/ui/src/mdx/__test__/rehypeFernCode.test.ts

@@ -1,5 +1,5 @@
 import type { Element } from "hast";
-import { parseBlockMetaString } from "../plugins/rehypeFernCode";
+import { parseBlockMetaString } from "../plugins/rehype-fern-code";
 
 describe("parseBlockMetaString", () => {
   it("should parse block meta string with empty string", () => {

packages/fern-docs/ui/src/mdx/bundlers/mdx-bundler.ts

@@ -23,10 +23,11 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkSmartypants from "remark-smartypants";
 import { PluggableList } from "unified";
+import { rehypeExtractAsides } from "../plugins/rehype-extract-asides";
+import { rehypeFernCode } from "../plugins/rehype-fern-code";
+import { rehypeJsxAlias } from "../plugins/rehype-jsx-alias";
+import { rehypeMigrateSteps } from "../plugins/rehype-migrate-steps";
 import { rehypeSlugJsxElementVisitor } from "../plugins/rehype-slug-visitor";
-import { rehypeExtractAsides } from "../plugins/rehypeExtractAsides";
-import { rehypeFernCode } from "../plugins/rehypeFernCode";
-import { rehypeFernComponents } from "../plugins/rehypeFernComponents";
 import type { FernSerializeMdxOptions } from "../types";
 
 /**
@@ -131,10 +132,31 @@ export async function serializeMdx(
           rehypeSqueezeParagraphs,
           rehypeMdxClassStyle,
           rehypeAcornErrorBoundary,
-          [rehypeSlug, { visitJsxElement: rehypeSlugJsxElementVisitor }],
           rehypeKatex,
           rehypeFernCode,
-          rehypeFernComponents,
+          [
+            rehypeJsxAlias,
+            {
+              aliases: {
+                a: "A",
+                embed: "Embed",
+                h1: "H1",
+                h2: "H2",
+                h3: "H3",
+                h4: "H4",
+                h5: "H5",
+                h6: "H6",
+                img: "Image",
+                li: "Li",
+                ol: "Ol",
+                strong: "Strong",
+                table: "Table",
+                ul: "Ul",
+              },
+            },
+          ],
+          rehypeMigrateSteps,
+          [rehypeSlug, { visitJsxElement: rehypeSlugJsxElementVisitor }],
           // always extract asides at the end
           rehypeExtractAsides,
         ];

packages/fern-docs/ui/src/mdx/bundlers/next-mdx-remote.ts

@@ -20,10 +20,11 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkSmartypants from "remark-smartypants";
 import type { PluggableList } from "unified";
+import { rehypeExtractAsides } from "../plugins/rehype-extract-asides";
+import { rehypeFernCode } from "../plugins/rehype-fern-code";
+import { rehypeJsxAlias } from "../plugins/rehype-jsx-alias";
+import { rehypeMigrateSteps } from "../plugins/rehype-migrate-steps";
 import { rehypeSlugJsxElementVisitor } from "../plugins/rehype-slug-visitor";
-import { rehypeExtractAsides } from "../plugins/rehypeExtractAsides";
-import { rehypeFernCode } from "../plugins/rehypeFernCode";
-import { rehypeFernComponents } from "../plugins/rehypeFernComponents";
 import type { FernSerializeMdxOptions } from "../types";
 
 type SerializeOptions = NonNullable<Parameters<typeof serialize>[1]>;
@@ -56,10 +57,32 @@ function withDefaultMdxOptions({
     rehypeSqueezeParagraphs,
     rehypeMdxClassStyle,
     rehypeAcornErrorBoundary,
-    [rehypeSlug, { visitJsxElement: rehypeSlugJsxElementVisitor }],
     rehypeKatex,
     rehypeFernCode,
-    rehypeFernComponents,
+    [
+      rehypeJsxAlias,
+      {
+        aliases: {
+          a: "A",
+          embed: "Embed",
+          h1: "H1",
+          h2: "H2",
+          h3: "H3",
+          h4: "H4",
+          h5: "H5",
+          h6: "H6",
+          img: "Image",
+          li: "Li",
+          ol: "Ol",
+          strong: "Strong",
+          table: "Table",
+          ul: "Ul",
+        },
+      },
+    ],
+    rehypeMigrateSteps,
+    // slugify ids after rehypeFernComponents so that we can generate ids for <Step> components
+    [rehypeSlug, { visitJsxElement: rehypeSlugJsxElementVisitor }],
     // always extract asides at the end
     rehypeExtractAsides,
   ];

packages/fern-docs/ui/src/mdx/components/accordion/index.tsx

@@ -3,14 +3,14 @@ import {
   AccordionMultipleProps,
   AccordionSingleProps,
   Accordion as FernAccordion,
+  cn,
 } from "@fern-docs/components";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { uniq } from "es-toolkit/array";
 import { kebabCase } from "es-toolkit/string";
 import { useAtomValue } from "jotai";
 import React from "react";
 import { UnreachableCaseError } from "ts-essentials";
-import { cn } from "../../../../../components/src/cn";
 import { ANCHOR_ATOM } from "../../../atoms";
 import { filterChildren } from "../../common/util";