@meistrari/tela-build 1.0.0

package/lib/extractors/volar-extract.ts

@@ -0,0 +1,186 @@
+import { resolve, relative } from 'pathe'
+import { existsSync, writeFileSync, mkdirSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import type { createChecker } from 'vue-component-meta'
+
+const require = createRequire(import.meta.url)
+
+type MetaChecker = ReturnType<typeof createChecker>
+
+let loadChecker: typeof import('vue-component-meta').createChecker | null = null
+
+try {
+    loadChecker = require('vue-component-meta').createChecker
+}
+catch {
+    loadChecker = null
+}
+
+/**
+ * Creates (or reuses) a tiny tsconfig overlay so TypeScript/Volar can
+ * resolve imports from the cached layer location and the app root.
+ *
+ * We place it under <app>/.docs/tsconfig.tela-docs.json to ensure a writable path.
+ */
+export function ensureOverlayTsconfig(appRootDir: string, layerRoot: string): string {
+    const docsDir = resolve(appRootDir, '.docs')
+    if (!existsSync(docsDir)) {
+        mkdirSync(docsDir, { recursive: true })
+    }
+    const overlayPath = resolve(docsDir, 'tsconfig.tela-docs.json')
+
+    // Try to extend the app's root tsconfig.json if present
+    const appTsconfig = resolve(appRootDir, 'tsconfig.json')
+    const extendsPath = existsSync(appTsconfig) ? './tsconfig.json' : undefined
+
+    // Paths must be relative to the overlay file
+    const relLayer = relative(docsDir, layerRoot).replace(/\\/g, '/')
+    const relApp = relative(docsDir, appRootDir).replace(/\\/g, '/')
+
+    const content = {
+        ...(extendsPath ? { extends: extendsPath } : {}),
+        compilerOptions: {
+            // Make the layer root the default base for bare imports (helps TS walk node_modules near layer)
+            baseUrl: relLayer,
+            // Common aliases that may be used by the build layer or apps
+            paths: {
+                '~/*': [`${relLayer}/*`],
+                '@/*': [`${relLayer}/*`],
+            },
+            // Keep type checking very light for speed; this file is only for metadata extraction
+            skipLibCheck: true,
+        },
+        include: [
+            `${relLayer}/**/*.ts`,
+            `${relLayer}/**/*.tsx`,
+            `${relLayer}/**/*.vue`,
+            // Let TS see the app's ambient types if there are any
+            `${relApp}/**/*.d.ts`,
+        ],
+    }
+
+    try {
+        writeFileSync(overlayPath, JSON.stringify(content, null, 2), 'utf-8')
+    }
+    catch {
+    }
+    return overlayPath
+}
+
+export interface VolarExtractor {
+    checker: MetaChecker
+    /** Extracts normalized component API info or throws on hard failure */
+    extract: (fileAbsPath: string) => {
+        name: string
+        description: string
+        props: Array<{
+            name: string
+            required: boolean
+            type: string
+            defaultValue?: { value: string }
+            description?: string
+        }>
+        events: Array<{
+            name: string
+            type?: string
+            description?: string
+        }>
+        slots: Array<{
+            name: string
+            // list of scoped bindings as `{ name, type }`
+            bindings?: Array<{ name: string; type?: string }>
+            description?: string
+        }>
+    }
+}
+
+/** Defensive stringify for type nodes coming from meta libs */
+function displayType(t: any): string {
+    if (!t)
+        return 'any'
+    if (typeof t === 'string')
+        return t
+    // Try common shapes used by vue-component-meta
+    return (
+        t.display
+        ?? t.name
+        ?? (Array.isArray(t.names) ? t.names.join(' | ') : undefined)
+        ?? t.text
+        ?? 'any'
+    )
+}
+
+/** Normalize props from either array or record shapes */
+function normalizeArrayOrRecord<T extends object>(val: any): T[] {
+    if (!val)
+        return []
+    if (Array.isArray(val))
+        return val as T[]
+    if (typeof val === 'object')
+        return Object.values(val)
+    return []
+}
+
+export function createVolarExtractor(appRootDir: string, layerRoot: string): VolarExtractor {
+    if (!loadChecker) {
+        throw new Error('vue-component-meta is not installed')
+    }
+
+    const createChecker = loadChecker
+
+    const tsconfigPath = ensureOverlayTsconfig(appRootDir, layerRoot)
+
+    const checker = createChecker(
+        tsconfigPath,
+        {
+            // Ensure the checker always uses the TypeScript program rather than a shim resolver
+            forceUseTs: true,
+        },
+    )
+
+    return {
+        checker,
+        extract(fileAbsPath: string) {
+            const meta: any = checker.getComponentMeta(fileAbsPath)
+
+            const name
+        = meta?.name
+            || meta?.displayName
+        // strip extension
+            || fileAbsPath.substring(fileAbsPath.lastIndexOf('/') + 1).replace(/\.vue$/, '')
+
+            const description: string
+        = meta?.docs?.description || meta?.description || ''
+
+            const props = normalizeArrayOrRecord<any>(meta?.props).map((p: any) => ({
+                name: p.name,
+                required: !!p.required,
+                type: displayType(p.type),
+                defaultValue: p.default != null
+                    ? { value: String(p.default) }
+                    : (p.defaultValue ? { value: String(p.defaultValue) } : undefined),
+                description: p.docs?.description || p.description,
+            }))
+
+            const events = normalizeArrayOrRecord<any>(meta?.emits).map((e: any) => ({
+                name: e.name,
+                type: displayType(e.type),
+                description: e.docs?.description || e.description,
+            }))
+
+            const slots = normalizeArrayOrRecord<any>(meta?.slots).map((s: any) => {
+                const bindings = normalizeArrayOrRecord<any>(s.props).map((b: any) => ({
+                    name: b.name,
+                    type: displayType(b.type),
+                }))
+                return {
+                    name: s.name,
+                    bindings,
+                    description: s.docs?.description || s.description,
+                }
+            })
+
+            return { name, description, props, events, slots }
+        },
+    }
+}

package/lib/type-resolver.ts

@@ -0,0 +1,402 @@
+// Use type-only import so runtime doesn't require ts-morph unless available
+import type { Project, SourceFile, TypeAliasDeclaration, InterfaceDeclaration, EnumDeclaration, Node } from 'ts-morph'
+import { join } from 'pathe'
+import { glob } from 'glob'
+import { readFileSync } from 'node:fs'
+
+const colors = {
+    gray: '\x1B[90m',
+    orange: '\x1B[38;5;208m',
+    purple: '\x1B[38;5;141m',
+    reset: '\x1B[0m',
+}
+
+export interface ResolvedType {
+    name: string
+    definition: string
+    raw: string
+}
+
+export class TypeResolver {
+    private project: Project | null = null
+    private typeRegistry = new Map<string, ResolvedType>()
+    private initialized = false
+
+    constructor(private projectRoot: string) {
+    // Defer creating ts-morph Project until initialize()
+    }
+
+    async initialize(): Promise<void> {
+        if (this.initialized)
+            return
+
+        // Remove verbose initialization message
+
+        // Attempt to load ts-morph dynamically. If not available, fall back gracefully.
+        try {
+            const mod: any = await import('ts-morph')
+            this.project = new mod.Project({
+                skipFileDependencyResolution: true,
+                skipLoadingLibFiles: true,
+            })
+        }
+        catch {
+            // ts-morph not installed; we'll operate with an empty registry
+            this.project = null
+            this.initialized = true
+            return
+        }
+
+        // Find all TypeScript files in the project
+        const tsFiles = await glob('**/*.ts', {
+            cwd: this.projectRoot,
+            ignore: ['node_modules/**', 'dist/**', '.nuxt/**', '.output/**'],
+        })
+
+        const vueFiles = await glob('**/*.vue', {
+            cwd: this.projectRoot,
+            ignore: ['node_modules/**', 'dist/**', '.nuxt/**', '.output/**'],
+        })
+
+        // Add all TypeScript files to the project
+        if (this.project) {
+            for (const file of tsFiles) {
+                const fullPath = join(this.projectRoot, file)
+                this.project.addSourceFileAtPath(fullPath)
+            }
+        }
+
+        // Extract <script> content from Vue files and add as virtual TypeScript files
+        if (this.project) {
+            for (const file of vueFiles) {
+                try {
+                    const fullPath = join(this.projectRoot, file)
+                    const content = readFileSync(fullPath, 'utf-8')
+                    const scriptMatch = content.match(/<script[^>]*lang=["']ts["'][^>]*>([\s\S]*?)<\/script>/i)
+
+                    if (scriptMatch) {
+                        const scriptContent = scriptMatch[1]
+                        // Create a virtual .ts file for the Vue script content
+                        const virtualPath = fullPath.replace('.vue', '.vue.ts')
+                        this.project.createSourceFile(virtualPath, scriptContent, { overwrite: true })
+                    }
+                }
+                catch (error: any) {
+                    console.error(`${colors.gray}[tela/build] ${colors.orange}✗${colors.gray} Failed to process Vue file ${file}: ${error.message}${colors.reset}`)
+                }
+            }
+        }
+
+        // Build type registry
+        if (this.project) {
+            this.buildTypeRegistry()
+        }
+        this.initialized = true
+
+    // Remove verbose type count message
+    }
+
+    private buildTypeRegistry(): void {
+        if (!this.project)
+            return
+        for (const sourceFile of this.project.getSourceFiles()) {
+            this.extractTypesFromFile(sourceFile)
+        }
+    }
+
+    private extractTypesFromFile(sourceFile: SourceFile): void {
+        const isVueVirtual = sourceFile.getFilePath().endsWith('.vue.ts')
+
+        // Extract type aliases
+        for (const typeAlias of sourceFile.getTypeAliases()) {
+            if (typeAlias.isExported() || isVueVirtual) {
+                const resolved = this.resolveTypeAlias(typeAlias)
+                if (resolved) {
+                    this.typeRegistry.set(resolved.name, resolved)
+                }
+            }
+        }
+
+        // Extract interfaces
+        for (const interfaceDecl of sourceFile.getInterfaces()) {
+            if (interfaceDecl.isExported() || isVueVirtual) {
+                const resolved = this.resolveInterface(interfaceDecl)
+                if (resolved) {
+                    this.typeRegistry.set(resolved.name, resolved)
+                }
+            }
+        }
+
+        // Extract enums
+        for (const enumDecl of sourceFile.getEnums()) {
+            if (enumDecl.isExported() || isVueVirtual) {
+                const resolved = this.resolveEnum(enumDecl)
+                if (resolved) {
+                    this.typeRegistry.set(resolved.name, resolved)
+                }
+            }
+        }
+    }
+
+    private resolveTypeAlias(typeAlias: TypeAliasDeclaration): ResolvedType | null {
+        try {
+            const name = typeAlias.getName()
+            const typeNode = typeAlias.getTypeNode()
+
+            if (!typeNode)
+                return null
+
+            const definition = this.formatTypeNode(typeNode)
+            const raw = typeAlias.getText()
+
+            return { name, definition, raw }
+        }
+        catch {
+            // Silently skip failed type alias resolution
+            return null
+        }
+    }
+
+    private resolveInterface(interfaceDecl: InterfaceDeclaration): ResolvedType | null {
+        try {
+            const name = interfaceDecl.getName()
+            const properties: string[] = []
+
+            for (const prop of interfaceDecl.getProperties()) {
+                const propName = prop.getName()
+                const propType = prop.getTypeNode()
+                const isOptional = prop.hasQuestionToken()
+
+                const typeStr = propType ? this.formatTypeNode(propType) : 'any'
+                const optionalMark = isOptional ? '?' : ''
+
+                // Add comment if available
+                const comment = this.extractComment(prop)
+                const commentStr = comment ? `  // ${comment}` : ''
+
+                properties.push(`  ${propName}${optionalMark}: ${typeStr}${commentStr}`)
+            }
+
+            const definition = `{\n${properties.join('\n')}\n}`
+            const raw = interfaceDecl.getText()
+
+            return { name, definition, raw }
+        }
+        catch {
+            // Silently skip failed interface resolution
+            return null
+        }
+    }
+
+    private resolveEnum(enumDecl: EnumDeclaration): ResolvedType | null {
+        try {
+            const name = enumDecl.getName()
+            const members = enumDecl.getMembers()
+
+            const values = members.map((member) => {
+                const memberName = member.getName()
+                const initializer = member.getInitializer()
+
+                if (initializer) {
+                    const value = initializer.getText()
+                    return value.startsWith('"') || value.startsWith('\'') ? value : `'${memberName}'`
+                }
+
+                return `'${memberName}'`
+            })
+
+            const definition = values.join(' | ')
+            const raw = enumDecl.getText()
+
+            return { name, definition, raw }
+        }
+        catch {
+            // Silently skip failed enum resolution
+            return null
+        }
+    }
+
+    private formatTypeNode(typeNode: Node): string {
+        const text = typeNode.getText()
+
+        // Handle array types
+        if (text.includes('Array<') || text.endsWith('[]')) {
+            return text
+        }
+
+        // Handle union types
+        if (text.includes(' | ')) {
+            return text
+        }
+
+        // Handle object types
+        if (text.startsWith('{') && text.endsWith('}')) {
+            return text
+        }
+
+        // Handle function types
+        if (text.includes('=>') || text.includes('function')) {
+            return text
+        }
+
+        // Default: return as-is
+        return text
+    }
+
+    private extractComment(node: Node): string {
+        const jsDocTags = (node as any).getJsDocs()
+        if (jsDocTags.length > 0) {
+            const firstDoc = jsDocTags[0]
+            const description = firstDoc.getDescription()
+            return description.trim()
+        }
+        return ''
+    }
+
+    public resolveType(typeName: string): string {
+        return this.resolveTypeInternal(typeName, new Set<string>())
+    }
+
+    private resolveTypeInternal(typeName: string, seen: Set<string>): string {
+        if (!typeName)
+            return 'any'
+
+        const trimmed = typeName.trim()
+        if (!trimmed)
+            return 'any'
+
+        if (seen.has(trimmed)) {
+            return trimmed
+        }
+        seen.add(trimmed)
+
+        const direct = this.typeRegistry.get(trimmed)
+        if (direct) {
+            return direct.definition
+        }
+
+        const arraySuffixMatch = trimmed.match(/^(.*)\[\]$/)
+        if (arraySuffixMatch) {
+            const elementType = arraySuffixMatch[1].trim()
+            const resolvedElement = this.resolveTypeInternal(elementType, seen)
+            return this.formatArrayType(resolvedElement)
+        }
+
+        if (trimmed.startsWith('Array<') && trimmed.endsWith('>')) {
+            const inner = trimmed.slice(6, -1).trim()
+            const resolvedInner = this.resolveTypeInternal(inner, seen)
+            return this.formatArrayType(resolvedInner)
+        }
+
+        const unionParts = this.splitTopLevel(trimmed, '|')
+        if (unionParts.length > 1) {
+            return unionParts
+                .map(part => this.resolveTypeInternal(part.trim(), seen))
+                .join(' | ')
+        }
+
+        const intersectionParts = this.splitTopLevel(trimmed, '&')
+        if (intersectionParts.length > 1) {
+            return intersectionParts
+                .map(part => this.resolveTypeInternal(part.trim(), seen))
+                .join(' & ')
+        }
+
+        const genericIndex = trimmed.indexOf('<')
+        if (genericIndex > 0 && trimmed.endsWith('>')) {
+            const base = trimmed.slice(0, genericIndex)
+            const inner = trimmed.slice(genericIndex + 1, -1)
+            const genericParts = this.splitTopLevel(inner, ',').map(part => part.trim()).filter(Boolean)
+            if (genericParts.length > 0) {
+                const resolvedParts = genericParts.map(part => this.resolveTypeInternal(part, seen))
+                return `${base}<${resolvedParts.join(', ')}>`
+            }
+        }
+
+        if (trimmed.startsWith('(') && trimmed.endsWith(')')) {
+            return this.resolveTypeInternal(trimmed.slice(1, -1), seen)
+        }
+
+        switch (trimmed) {
+            case 'TSIndexedAccessType':
+                return 'string'
+            case 'TSTypeReference':
+                return 'any'
+            case 'TSFunctionType':
+                return '(...args: any[]) => any'
+            case 'TSUnionType':
+            case 'union':
+                return 'string'
+            default:
+                return trimmed
+        }
+    }
+
+    public hasType(typeName: string): boolean {
+        return this.typeRegistry.has(typeName)
+    }
+
+    public getAllTypes(): Map<string, ResolvedType> {
+        return new Map(this.typeRegistry)
+    }
+
+    private formatArrayType(resolvedElement: string): string {
+        const value = resolvedElement.trim()
+        if (!value) {
+            return 'any[]'
+        }
+        if (value.startsWith('{') && value.endsWith('}')) {
+            return `${value}[]`
+        }
+        return `Array<${value}>`
+    }
+
+    private splitTopLevel(input: string, delimiter: string): string[] {
+        const parts: string[] = []
+        let depth = 0
+        let buffer = ''
+
+        const openers = new Map([
+            ['<', '>'],
+            ['(', ')'],
+            ['[', ']'],
+            ['{', '}'],
+        ])
+        const closers = new Map(Array.from(openers.entries()).map(([o, c]) => [c, o]))
+
+        for (let i = 0; i < input.length; i++) {
+            const char = input[i]
+            if (openers.has(char)) {
+                depth++
+            }
+            else if (closers.has(char)) {
+                depth = Math.max(0, depth - 1)
+            }
+
+            if (char === delimiter && depth === 0) {
+                parts.push(buffer.trim())
+                buffer = ''
+                continue
+            }
+
+            buffer += char
+        }
+
+        if (buffer.trim()) {
+            parts.push(buffer.trim())
+        }
+
+        return parts
+    }
+}
+
+// Global instance
+let globalResolver: TypeResolver | null = null
+
+export async function getTypeResolver(projectRoot: string, appRootDir?: string): Promise<TypeResolver> {
+    if (!globalResolver) {
+        globalResolver = new TypeResolver(projectRoot, appRootDir)
+        await globalResolver.initialize()
+    }
+    return globalResolver
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}