rehypeComponent() — supabase Function Reference
Architecture documentation for the rehypeComponent() function in rehype-component.ts from the supabase codebase.
Entity Profile
Dependency Diagram
graph TD a71fbe19_1686_9a27_a797_c6a880ab3ca6["rehypeComponent()"] 74eb8725_5912_5751_740c_b3c8d06842bd["getNodeAttributeByName()"] a71fbe19_1686_9a27_a797_c6a880ab3ca6 -->|calls| 74eb8725_5912_5751_740c_b3c8d06842bd c86e4773_fd0c_baae_3ad4_6b5af8d685ba["getComponentSourceFileContent()"] a71fbe19_1686_9a27_a797_c6a880ab3ca6 -->|calls| c86e4773_fd0c_baae_3ad4_6b5af8d685ba style a71fbe19_1686_9a27_a797_c6a880ab3ca6 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
apps/design-system/lib/rehype-component.ts lines 27–329
export function rehypeComponent() {
return async (tree: UnistTree) => {
visit(tree, (node: UnistNode) => {
// src prop overrides both name and fileName.
const { value: srcPath, name: componentName } =
(getNodeAttributeByName(node, 'src') as {
name: string
value?: string
type?: string
}) || {}
if (node.name === 'ComponentSource') {
// console.log('DO NOT USE THIS COMPONENT')
// This component should not be in use!
// console.log('node', node)
const name = getNodeAttributeByName(node, 'name')?.value as string
const fileName = getNodeAttributeByName(node, 'fileName')?.value as string | undefined
if (!name && !srcPath) {
return null
}
try {
for (const style of styles) {
let src: string
if (srcPath) {
src = srcPath
} else {
const component = Index[style.name][name]
// console.log('got to ELSE STATEMENT')
// console.log('filename', fileName)
// console.log('name', name)
src = fileName
? component.files.find((file: string) => {
return file.endsWith(`${fileName}.tsx`) || file.endsWith(`${fileName}.ts`)
}) || component.files[0]
: component.files[0]
// console.log('got to END of ELSE STATEMENT')
}
// Read the source file.
const filePath = path.join(process.cwd(), src)
let source = fs.readFileSync(filePath, 'utf8')
// Replace imports.
// TODO: Use @swc/core and a visitor to replace this.
// For now a simple regex should do.
// source = source.replaceAll(`@/registry/${style.name}/`, '@/components/') // COMMENT THEE OUT
// source = source.replaceAll('export default', 'export')
// Add code as children so that rehype can take over at build time.
node.children?.push(
u('element', {
tagName: 'pre',
properties: {
__src__: src,
__style__: style.name,
},
attributes: [
{
name: 'styleName',
type: 'mdxJsxAttribute',
value: style.name,
},
],
children: [
u('element', {
tagName: 'code',
properties: {
className: ['language-tsx'],
},
children: [
{
type: 'text',
value: source,
},
],
}),
],
})
)
}
} catch (error) {
console.error(error)
}
}
if (node.name === 'ComponentPreview') {
const name = getNodeAttributeByName(node, 'name')?.value as string
if (!name) {
return null
}
try {
for (const style of styles) {
const component = Index[style.name][name]
// console.log('GOT HERE')
const src = component.files[0]
// Read the source file.
const filePath = path.join(process.cwd(), src)
let source = fs.readFileSync(filePath, 'utf8')
// Replace imports.
// TODO: Use @swc/core and a visitor to replace this.
// For now a simple regex should do.
source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
source = source.replaceAll('export default', 'export')
// Add code as children so that rehype can take over at build time.
node.children?.push(
u('element', {
tagName: 'pre',
properties: {
__src__: src,
},
children: [
u('element', {
tagName: 'code',
properties: {
className: ['language-tsx'],
},
children: [
{
type: 'text',
value: source,
},
],
}),
],
})
)
}
} catch (error) {
console.error(error)
}
}
if (node.name === 'CodeFragment') {
const name = getNodeAttributeByName(node, 'name')?.value as string
if (!name) {
return null
}
try {
for (const style of styles) {
const component = Index[style.name][name]
// console.log('GOT HERE')
const src = component.files[0]
// Read the source file.
const filePath = path.join(process.cwd(), src)
let source = fs.readFileSync(filePath, 'utf8')
// Replace imports.
// TODO: Use @swc/core and a visitor to replace this.
// For now a simple regex should do.
source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
source = source.replaceAll('export default', 'export')
// Add code as children so that rehype can take over at build time.
node.children?.push(
u('element', {
tagName: 'pre',
properties: {
__src__: src,
},
children: [
u('element', {
tagName: 'code',
properties: {
className: ['language-tsx'],
},
children: [
{
type: 'text',
value: source,
},
],
}),
],
})
)
}
} catch (error) {
console.error(error)
}
}
// if (node.name === "ComponentExample") {
// const source = getComponentSourceFileContent(node)
// if (!source) {
// return
// }
// // Replace the Example component with a pre element.
// node.children?.push(
// u("element", {
// tagName: "pre",
// properties: {
// __src__: src,
// },
// children: [
// u("element", {
// tagName: "code",
// properties: {
// className: ["language-tsx"],
// },
// children: [
// {
// type: "text",
// value: source,
// },
// ],
// }),
// ],
// })
// )
// const extractClassname = getNodeAttributeByName(
// node,
// "extractClassname"
// )
// if (
// extractClassname &&
// typeof extractClassname.value !== "undefined" &&
// extractClassname.value !== "false"
// ) {
// // Extract className from string
// // TODO: Use @swc/core and a visitor to extract this.
// // For now, a simple regex should do.
// const values = source.match(/className="(.*)"/)
// const className = values ? values[1] : ""
// // Add the className as a jsx prop so we can pass it to the copy button.
// node.attributes?.push({
// name: "extractedClassNames",
// type: "mdxJsxAttribute",
// value: className,
// })
// // Add a pre element with the className only.
// node.children?.push(
// u("element", {
// tagName: "pre",
// properties: {},
// children: [
// u("element", {
// tagName: "code",
// properties: {
// className: ["language-tsx"],
// },
// children: [
// {
// type: "text",
// value: className,
// },
// ],
// }),
// ],
// })
// )
// }
// }
// if (node.name === "ComponentSource") {
// const source = getComponentSourceFileContent(node)
// if (!source) {
// return
// }
// // Replace the Source component with a pre element.
// node.children?.push(
// u("element", {
// tagName: "pre",
// properties: {
// __src__: src,
// },
// children: [
// u("element", {
// tagName: "code",
// properties: {
// className: ["language-tsx"],
// },
// children: [
// {
// type: "text",
// value: source,
// },
// ],
// }),
// ],
// })
// )
// }
})
}
}Domain
Subdomains
Source
Frequently Asked Questions
What does rehypeComponent() do?
rehypeComponent() is a function in the supabase codebase.
What does rehypeComponent() call?
rehypeComponent() calls 2 function(s): getComponentSourceFileContent, getNodeAttributeByName.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free