rehypeComponent() — ui Function Reference

Architecture documentation for the rehypeComponent() function in rehype.ts from the ui codebase.

Function typescript DocumentationAtlas Changelog calls 5

Entity Profile

DocumentationAtlas→ Changelog→ rehypeComponent() — ui Function Reference

Dependency Diagram

graph TD
  d0e9b290_610b_ba71_e7bb_ceeef3917003["rehypeComponent()"]
  e2427336_4794_0f1c_982a_f2089ffcec85["rehype.ts"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|defined in| e2427336_4794_0f1c_982a_f2089ffcec85
  ba8f63cb_9a8f_d447_56d6_06f07c6582b2["getNodeAttributeByName()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| ba8f63cb_9a8f_d447_56d6_06f07c6582b2
  119c6b5c_bc35_7a40_fe79_251b089a2a68["isTruthyMdxAttribute()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| 119c6b5c_bc35_7a40_fe79_251b089a2a68
  39c6b506_a59e_3c5f_e2db_d7c56a400c96["getDemoFilePath()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| 39c6b506_a59e_3c5f_e2db_d7c56a400c96
  0cf50cf3_9378_48fd_056f_6d1b412973ab["getIndexForStyle()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| 0cf50cf3_9378_48fd_056f_6d1b412973ab
  57fb1ae2_1d20_217c_ddee_7f949e8a5347["formatCode()"]
  d0e9b290_610b_ba71_e7bb_ceeef3917003 -->|calls| 57fb1ae2_1d20_217c_ddee_7f949e8a5347
  style d0e9b290_610b_ba71_e7bb_ceeef3917003 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/rehype.ts lines 176–301

export function rehypeComponent() {
  return async (tree: UnistTree) => {
    const activeStyle = await getActiveStyle()
    const nodesToProcess: NodeToProcess[] = []

    visit(tree, (node: UnistNode) => {
      const { value: srcPath } =
        (getNodeAttributeByName(node, "src") as {
          name: string
          value?: string
          type?: string
        }) || {}

      if (node.name === "ComponentSource") {
        const name = getNodeAttributeByName(node, "name")?.value as string
        const fileName = getNodeAttributeByName(node, "fileName")?.value as
          | string
          | undefined
        const styleName =
          (getNodeAttributeByName(node, "styleName")?.value as string) ||
          activeStyle.name

        if (name || srcPath) {
          nodesToProcess.push({
            node,
            type: "ComponentSource",
            name,
            styleName,
            fileName,
            srcPath,
          })
        }
      }

      if (node.name === "ComponentPreview") {
        const name = getNodeAttributeByName(node, "name")?.value as string
        const styleName =
          (getNodeAttributeByName(node, "styleName")?.value as string) ||
          activeStyle.name
        const hideCode = isTruthyMdxAttribute(
          getNodeAttributeByName(node, "hideCode")
        )

        if (name) {
          nodesToProcess.push({
            node,
            type: "ComponentPreview",
            name,
            styleName,
            hideCode,
          })
        }
      }
    })

    await Promise.all(
      nodesToProcess.map(async (item) => {
        try {
          if (item.type === "ComponentPreview" && item.hideCode) {
            return
          }

          let src: string | null = null

          if (item.srcPath) {
            src = path.join(process.cwd(), item.srcPath)
          } else {
            src = getDemoFilePath(item.name, item.styleName)

            if (!src) {
              const { index, key } = getIndexForStyle(item.styleName)
              const component = index[key]?.[item.name]

              if (item.type === "ComponentSource" && item.fileName) {
                src =
                  component.files.find((file: unknown) => {
                    if (typeof file === "string") {
                      return (
                        file.endsWith(`${item.fileName}.tsx`) ||
                        file.endsWith(`${item.fileName}.ts`)
                      )