@liu_jimmy/blocks-compiler

将 BlockSpec 编译为 Vue / React / Svelte 组件源码，仅使用 fe-kit 语义类（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）。fe-kit AI Code Cache 的编译层。

安装

pnpm add @liu_jimmy/blocks-spec @liu_jimmy/blocks-compiler

API

compile(spec, framework, options?)

• spec: 符合 block.v1 的 BlockSpec（对象即可，内部会校验）
• framework: 'vue' | 'react' | 'svelte'
• options: 可选，如 { componentName?: string }
• 返回: 组件源码字符串（.vue / .tsx / .svelte 文件内容）

编译前会调用 assertBlockSpec(spec)，不符合 schema 会抛错。

按框架的编译函数

• compileToVue(spec) → Vue SFC 字符串
• compileToReact(spec) → React TSX 字符串
• compileToSvelte(spec) → Svelte 组件字符串

当前支持的块

| name | variant | 说明 | |--------|-----------|------| | hero | split | 标题、副标题、主/次 CTA | | faq | accordion | 标题 + 手风琴列表 | | footer | default | 版权 + 链接列表 |

未支持的 name/variant 会走通用占位模板（展示 props JSON）。

示例

import { compile } from "@liu_jimmy/blocks-compiler";
import heroSpec from "@liu_jimmy/blocks-spec/registry/hero.spec.json";

const vueSource = compile(heroSpec, "vue");
const reactSource = compile(heroSpec, "react");
const svelteSource = compile(heroSpec, "svelte");
// 可将 vueSource 写入 .vue 文件，在已接入 fe-kit preset 的项目中直接使用

带缓存的编译（测是否命中）

import { compileWithCache, cacheKey } from "@liu_jimmy/blocks-compiler";
import { memoryCache } from "@liu_jimmy/fe-kit-cache";
import heroSpec from "@liu_jimmy/blocks-spec/registry/hero.spec.json";

const r1 = compileWithCache(heroSpec, "vue", memoryCache);
console.log(r1.fromCache); // false，首次编译

const r2 = compileWithCache(heroSpec, "vue", memoryCache);
console.log(r2.fromCache); // true，从缓存读取

• 传入任意实现 BlockCache（get/set）的对象即可；可用 @liu_jimmy/fe-kit-cache 的 memoryCache 或 createMemoryCache()。
• 缓存 key 仅含 name + variant + framework，不含 props，便于同结构命中。

依赖

• @liu_jimmy/blocks-spec：类型与校验
• 生成的项目需使用 Tailwind v3 + @liu_jimmy/fe-kit-tailwind-preset，才能正确解析语义类。