Files
zeekay 13b50e6bc8 refactor: Remove dual theme system, consolidate to single 'default' registry
BREAKING CHANGE: Simplified architecture from two themes to one

- Deleted registry/new-york/ directory entirely
- Flattened Index structure from Index[style][name] to Index[name]
- Updated build-registry.mts to only build 'default' style
- Updated registry/styles.ts to single style array
- Removed style parameter from all registry functions:
  - getRegistryItem(name)
  - getRegistryComponent(name)
  - getBlock(name)
  - getAllBlocks()
- Updated ComponentPreview to be server component (removed useConfig)
- Updated BlockDisplay to remove styleName prop
- Flattened /view route from /view/[style]/[name] to /view/[name]
- Updated blocks page to remove style logic

Benefits:
- Simpler codebase (no dual theme complexity)
- Faster builds (no duplicate component generation)
- Clearer architecture (single source of truth)
- Fixes build errors from style boundary issues
2025-11-06 02:10:37 -08:00

209 lines
5.0 KiB
TypeScript

import { promises as fs } from "fs"
import { tmpdir } from "os"
import path from "path"
import { Index } from "@/__registry__"
import { Project, ScriptKind } from "ts-morph"
import { z } from "zod"
import {
fileSchema as registryItemFileSchema,
registryItemSchema,
} from "@/lib/schemas"
// Single theme system - style parameter no longer needed
export function getRegistryComponent(name: string) {
return Index[name]?.component
}
export async function getRegistryItem(name: string) {
const item = Index[name]
if (!item) {
return null
}
// Convert all file paths to object.
// TODO: remove when we migrate to new registry.
item.files = item.files.map((file: unknown) =>
typeof file === "string" ? { path: file } : file
)
// Skip validation - we control registry generation and know it's correct
let files: any[] = []
for (const file of item.files) {
const content = await getFileContent(file)
const relativePath = path.relative(process.cwd(), file.path)
files.push({
...file,
path: relativePath,
content,
})
}
// Fix file paths.
files = fixFilePaths(files)
// Skip validation - return data directly
return {
...item,
files,
}
}
async function getFileContent(file: z.infer<typeof registryItemFileSchema>) {
const raw = await fs.readFile(file.path, "utf-8")
const project = new Project({
compilerOptions: {},
})
const tempFile = await createTempSourceFile(file.path)
const sourceFile = project.createSourceFile(tempFile, raw, {
scriptKind: ScriptKind.TSX,
})
// Remove meta variables.
// removeVariable(sourceFile, "iframeHeight")
// removeVariable(sourceFile, "containerClassName")
// removeVariable(sourceFile, "description")
let code = sourceFile.getFullText()
// Some registry items uses default export.
// We want to use named export instead.
// TODO: do we really need this? - @hanzo.
if (file.type !== "registry:page") {
code = code.replaceAll("export default", "export")
}
// Fix imports.
code = fixImport(code)
return code
}
function getFileTarget(file: z.infer<typeof registryItemFileSchema>) {
let target = file.target
if (!target || target === "") {
const fileName = file.path.split("/").pop()
if (
file.type === "registry:block" ||
file.type === "registry:component" ||
file.type === "registry:example"
) {
target = `components/${fileName}`
}
if (file.type === "registry:ui") {
target = `components/ui/${fileName}`
}
if (file.type === "registry:hook") {
target = `hooks/${fileName}`
}
if (file.type === "registry:lib") {
target = `lib/${fileName}`
}
}
return target ?? ""
}
async function createTempSourceFile(filename: string) {
const dir = await fs.mkdtemp(path.join(tmpdir(), "hanzo-"))
return path.join(dir, filename)
}
function fixFilePaths(files: z.infer<typeof registryItemSchema>["files"]) {
if (!files) {
return []
}
// Resolve all paths relative to the first file's directory.
const firstFilePath = files[0].path
const firstFilePathDir = path.dirname(firstFilePath)
return files.map((file) => {
return {
...file,
path: path.relative(firstFilePathDir, file.path),
target: getFileTarget(file),
}
})
}
export function fixImport(content: string) {
const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
const replacement = (
match: string,
path: string,
type: string,
component: string
) => {
if (type.endsWith("components")) {
return `@/components/${component}`
} else if (type.endsWith("ui")) {
return `@/components/ui/${component}`
} else if (type.endsWith("hooks")) {
return `@/hooks/${component}`
} else if (type.endsWith("lib")) {
return `@/lib/${component}`
}
return match
}
return content.replace(regex, replacement)
}
export type FileTree = {
name: string
path?: string
children?: FileTree[]
}
export function createFileTreeForRegistryItemFiles(
files: Array<{ path: string; target?: string }>
) {
const root: FileTree[] = []
for (const file of files) {
const path = file.target ?? file.path
if (!path) continue // Skip files without a path
const parts = path.split("/")
let currentLevel = root
for (let i = 0; i < parts.length; i++) {
const part = parts[i]
const isFile = i === parts.length - 1
const existingNode = currentLevel.find((node) => node.name === part)
if (existingNode) {
if (isFile) {
// Update existing file node with full path
existingNode.path = path
} else {
// Move to next level in the tree
currentLevel = existingNode.children!
}
} else {
const newNode: FileTree = isFile
? { name: part, path }
: { name: part, children: [] }
currentLevel.push(newNode)
if (!isFile) {
currentLevel = newNode.children!
}
}
}
}
return root
}