模板注册表

// .ktr/template-registry.ts（框架自动生成）
import type { TemplateDef } from '@karinjs/template-react'

// 导入所有模板组件（静态 import，路径不含扩展名）
import template_hello_card from '../ktr/template/hello/card/index'
import template_user_profile from '../ktr/template/user/profile/index'
import template_stats_dashboard from '../ktr/template/stats/dashboard/index'

// 透传模板文件的具名导出
export * from '../ktr/template/hello/card/index'
export * from '../ktr/template/user/profile/index'
export * from '../ktr/template/stats/dashboard/index'

// 导出映射表（宽松标注，逐路由精确类型由 registry-types.d.ts 模块增强提供）
export const templates: Record<string, TemplateDef<any>> = {
  'hello/card': template_hello_card,
  'user/profile': template_user_profile,
  'stats/dashboard': template_stats_dashboard
}

// 辅助类型（用于运行时推导）
export type TemplateRegistry = typeof templates

// 示例：路由 user/profile/card
import template_user_profile_card from '../ktr/template/user/profile/card/index'

export const templates = {
  'user/profile/card': template_user_profile_card
  //      ↑ 路由 key              ↑ 变量名
}

export async function loadTemplateRegistry(options: { root: string; bundledDir?: string }) {
  const { root, bundledDir } = options

  // 1. 开发态：.ktr 源文件优先（tsx 即时转译）；
  //    渲染器自身跑在下游 bundle 里时跳过这一步，直接用产物（见下方加载策略表）
  const sourceFile = path.join(root, '.ktr', 'template-registry.ts')
  if (fs.existsSync(sourceFile)) {
    const mod = await import(sourceFile)
    return mod.templates
  }

  // 2. 生产态：回退到打包产物
  const bundledFile = findBundledRegistry(root, 'template-registry.js', bundledDir)
  if (bundledFile) {
    const mod = await import(bundledFile)
    return mod.templates
  }

  throw new Error('未找到注册表：开发态请先运行 ktr sync，生产态请确保已打包')
}

// .ktr/mock-registry.ts（框架自动生成）

// ===== Part 1: TS mock 具名导出 =====
export * from '../ktr/template/hello/card/mock'
export * from '../ktr/template/user/profile/mock'

// 如果模板没有 mock.ts，跳过该行

// ===== Part 2: JSON mock 文件清单 =====
export const mockDataFiles = {
  'hello/card': ['captured.json', 'default.json', 'variant.json'],
  'user/profile': ['basic.json']
} as const

// 面板按「路由 + 文件名」定位 data/ 下的 JSON 文件

export function mockApiMiddleware() {
  return async (req: any, res: any) => {
    const url = new URL(req.url, 'http://localhost')

    // GET /data?path=hello/card&name=basic
    if (url.pathname === '/data') {
      const templatePath = url.searchParams.get('path')!
      const name = url.searchParams.get('name')!

      // 1. 优先读取 JSON 文件（面板可编辑）
      const jsonPath = path.join(config.mockDataDir, templatePath, 'data', `${name}.json`)
      if (fs.existsSync(jsonPath)) {
        res.json(JSON.parse(fs.readFileSync(jsonPath, 'utf-8')))
        return
      }

      // 2. 回退到 TS mock（面板只读）
      const tsMocks = await loadTsMocks(templatePath)
      if (tsMocks[name]) {
        res.json(tsMocks[name])
        return
      }

      res.status(404).json({ error: 'Data entry not found' })
    }
  }
}

// packages/core/src/registry-types.ts —— 只有增强位本身

// 用户项目通过模块增强填充这个接口
export interface ProjectRegistry {}

// packages/core/src/types/index.ts —— 其余类型定义在这里

// 从模板定义中提取 data 类型
export type DataOf<T> = T extends TemplateDef<infer D> ? D : never

// 宽松降级类型（向后兼容）
export type AnyRegistry = Record<string, TemplateDef<any>>

// 注册表的实际类型（带降级）
export type LoadedRegistry = keyof ProjectRegistry extends never
  ? AnyRegistry // 未增强时降级为宽松类型
  : ProjectRegistry // 增强后为精确类型

// @filename: virtual.d.ts
import type { TemplateDef } from '@karinjs/template-react'

declare module '@karinjs/template-react/registry-types' {
  interface ProjectRegistry {
    'hello/card': TemplateDef<{
      title: string
      items: Array<{ label: string; value: string }>
    }>
  }
}
// @filename: utils/render.ts
import type { DataOf, LoadedRegistry } from '@karinjs/template-react'
import type { ImageElement } from 'node-karin'

// 插件胶水层封装的渲染函数（快速上手一节有完整实现）
export declare const renderImage: <K extends keyof LoadedRegistry & string>(
  templatePath: K,
  data: DataOf<LoadedRegistry[K]>
) => Promise<ImageElement[]>
// @filename: index.ts
import { renderImage } from './utils/render'

// ✅ 路由补全：输入 'hello/ 自动提示 'hello/card'
// ✅ data 类型推导：根据模板的 Props 自动推导
await renderImage('hello/card', {
  title: 'Karin',
  items: [{ label: '版本', value: '2.0.0' }]
})

// ❌ 类型错误：路由不存在
await renderImage('typo/card', {})
Argument of type '"typo/card"' is not assignable to parameter of type '"hello/card"'.

// ❌ 类型错误：data 类型不匹配
await renderImage('hello/card', {
  title: 123, // 应为 string
Type 'number' is not assignable to type 'string'.
  items: 'wrong' // 应为 array
Type 'string' is not assignable to type '{ label: string; value: string; }[]'.
})

// @filename: ./index.tsx
// ktr/template/hello/card/index.tsx
import { defineTemplate } from '@karinjs/template-react'

// 显式定义并导出 Data 接口
export interface HelloCardData {
  title: string
  subtitle?: string
  items: Array<{
    label: string
    value: string | number
  }>
}

// 泛型参数传入类型
export default defineTemplate<HelloCardData>({
  name: 'Hello 卡片',
  description: '简单的信息卡片',
  component: ({ data, ctx }) => {
    // data 有完整类型推导
    return (
      <div className="p-6 bg-surface rounded-lg">
        <h2 className="text-xl font-bold">{data.title}</h2>
        {data.subtitle && (
          <p className="text-muted">{data.subtitle}</p>
        )}
        <div className="mt-4 space-y-2">
          {data.items.map(item => (
            <div key={item.label} className="flex justify-between">
              <span className="text-muted">{item.label}</span>
              <span className="font-medium">{item.value}</span>
            </div>
          ))}
        </div>
      </div>
    )
  }
})

// ktr/template/hello/card/mock.ts
import type { HelloCardData } from './index'

export const basic = {
  title: 'Karin Template React',
  items: [{ label: '渲染方式', value: 'SSR HTML' }]
} satisfies HelloCardData

// conventions/registry.ts

import { glob } from 'fast-glob'
import * as fs from 'node:fs'
import * as path from 'node:path'

export async function ensureConventions(config: any) {
  const { templateDir, cacheDir } = config

  // 1. 扫描模板路由
  const routes = await discoverTemplateRoutes(templateDir)
  // → ['hello/card', 'user/profile', 'stats/dashboard']

  // 2. 生成 template-registry.ts
  await generateTemplateRegistry(routes, templateDir, cacheDir)

  // 3. 生成 mock-registry.ts
  await generateMockRegistry(routes, templateDir, cacheDir)

  // 4. 生成 registry-types.d.ts
  await generateTypeAugmentation(routes, templateDir, cacheDir)
}

async function discoverTemplateRoutes(templateDir: string): Promise<string[]> {
  const files = await glob('**/index.tsx', {
    cwd: templateDir,
    ignore: ['**/components/**', '**/_*/**']
  })

  return files.map((file) => file.replace(/\/index\.tsx$/, '')).sort()
}

async function generateTemplateRegistry(routes: string[], templateDir: string, cacheDir: string) {
  const imports: string[] = []
  const entries: string[] = []

  for (const route of routes) {
    const varName = `template_${route.replace(/\//g, '_')}`
    // 生成路径不含扩展名
    const importPath = path.join(templateDir, route, 'index')

    imports.push(`import ${varName} from '../${importPath}'`)
    entries.push(`  '${route}': ${varName}`)
  }

  const content = `import type { TemplateDef } from '@karinjs/template-react'
${imports.join('\n')}

export const templates: Record<string, TemplateDef<any>> = {
${entries.join(',\n')}
}

export type TemplateRegistry = typeof templates
`

  fs.writeFileSync(path.join(cacheDir, 'template-registry.ts'), content)
}

async function generateMockRegistry(routes: string[], templateDir: string, cacheDir: string) {
  const tsMockExports: string[] = []
  const jsonMockEntries: Record<string, string[]> = {}

  for (const route of routes) {
    const routeDir = path.join(templateDir, route)

    // 扫描 TS mock（生成路径不含扩展名）
    const mockFile = path.join(routeDir, 'mock.ts')
    if (fs.existsSync(mockFile)) {
      tsMockExports.push(`export * from '../${mockFile.replace(/\.ts$/, '')}'`)
    }

    // 扫描 JSON mock，按路由聚合文件名字符串清单
    const dataDir = path.join(routeDir, 'data')
    if (fs.existsSync(dataDir)) {
      const jsonFiles = fs.readdirSync(dataDir).filter((f) => f.endsWith('.json'))
      if (jsonFiles.length > 0) {
        jsonMockEntries[route] = jsonFiles
      }
    }
  }

  let content = '// TS mock exports\n'
  if (tsMockExports.length > 0) {
    content += tsMockExports.join('\n') + '\n\n'
  }

  content += '// JSON mock 文件清单\n'
  content += 'export const mockDataFiles = {\n'
  for (const [route, files] of Object.entries(jsonMockEntries)) {
    content += `  '${route}': [${files.map((file) => `'${file}'`).join(', ')}],\n`
  }
  content += '} as const\n'

  fs.writeFileSync(path.join(cacheDir, 'mock-registry.ts'), content)
}

async function generateTypeAugmentation(routes: string[], templateDir: string, cacheDir: string) {
  const entries: string[] = []

  for (const route of routes) {
    const importPath = path.join(templateDir, route, 'index')
    entries.push(`    '${route}': typeof import('../${importPath}').default`)
  }

  const content = `declare module '@karinjs/template-react/registry-types' {
  interface ProjectRegistry {
${entries.join('\n')}
  }
}

export {}
`

  fs.writeFileSync(path.join(cacheDir, 'registry-types.d.ts'), content)
}

export async function generateSandboxModule() {
  // 约定扫描模板路由，逐路由生成 /@fs/ 动态导入（vite 按需编译，HMR 即时生效）
  const routes = await discoverTemplateRoutes(config.templateDir)
  const loaders = routes.map((item) => `['${item.route}', () => import('/@fs/${path.join(config.templateDir, item.file)}')]`)

  // 生成虚拟模块代码
  return `
    import { createRoot } from 'react-dom/client'
    
    const templateLoaders = [
      ${loaders.join(',\n      ')}
    ]
    // 沙盒逻辑（见开发面板架构一章）
  `
}

// 用户插件代码
import { createTemplateRenderer } from '@karinjs/template-react'

// 定位包根（从 import.meta.url 向上找 package.json）
const render = createTemplateRenderer(import.meta.url)

// 首次调用时内部加载注册表，查找顺序：
// 1. .ktr/template-registry.ts（开发态源文件，存在时永远优先）
// 2. bundledDir 显式指定的产物目录
// 3. package.json main 字段所在目录
// 4. package.json exports 主入口所在目录（纯 exports 包没有 main）
// 5. 根目录下一层目录扫描

// ✅ 具名导出
export const basic = { title: 'Hello' }

// ❌ 默认导出（不会被注册）
export default { title: 'Hello' }

export const render = createTemplateRenderer(import.meta.url, {
  bundledDir: 'dist' // 打包产物目录；不传时按 main/exports 入口和根目录扫描自动发现
})