json-render-core

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@json-render/core

Core package for schema definition, catalog creation, and spec streaming.

这是用于Schema定义、Catalog创建和Spec流式处理的核心包。

Key Concepts

核心概念

Schema: Defines the structure of specs and catalogs (use
```
defineSchema
```
)
Catalog: Maps component/action names to their definitions (use
```
defineCatalog
```
)
Spec: JSON output from AI that conforms to the schema
SpecStream: JSONL streaming format for progressive spec building

Schema：定义Spec和Catalog的结构（使用
```
defineSchema
```
）
Catalog：将组件/动作名称映射到其定义（使用
```
defineCatalog
```
）
Spec：由AI生成且符合Schema的JSON输出
SpecStream：用于渐进式构建Spec的JSONL流式格式

Defining a Schema

定义Schema

typescript

import { defineSchema } from "@json-render/core";

export const schema = defineSchema((s) => ({
  spec: s.object({
    // Define spec structure
  }),
  catalog: s.object({
    components: s.map({
      props: s.zod(),
      description: s.string(),
    }),
  }),
}), {
  promptTemplate: myPromptTemplate, // Optional custom AI prompt
});

typescript

import { defineSchema } from "@json-render/core";

export const schema = defineSchema((s) => ({
  spec: s.object({
    // Define spec structure
  }),
  catalog: s.object({
    components: s.map({
      props: s.zod(),
      description: s.string(),
    }),
  }),
}), {
  promptTemplate: myPromptTemplate, // Optional custom AI prompt
});

Creating a Catalog

创建Catalog

typescript

import { defineCatalog } from "@json-render/core";
import { schema } from "./schema";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Button: {
      props: z.object({
        label: z.string(),
        variant: z.enum(["primary", "secondary"]).nullable(),
      }),
      description: "Clickable button component",
    },
  },
});

typescript

import { defineCatalog } from "@json-render/core";
import { schema } from "./schema";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Button: {
      props: z.object({
        label: z.string(),
        variant: z.enum(["primary", "secondary"]).nullable(),
      }),
      description: "Clickable button component",
    },
  },
});

Generating AI Prompts

生成AI提示

typescript

const systemPrompt = catalog.prompt(); // Uses schema's promptTemplate
const systemPrompt = catalog.prompt({ customRules: ["Rule 1", "Rule 2"] });

typescript

const systemPrompt = catalog.prompt(); // Uses schema's promptTemplate
const systemPrompt = catalog.prompt({ customRules: ["Rule 1", "Rule 2"] });

SpecStream Utilities

SpecStream工具

For streaming AI responses (JSONL patches):

typescript

import { createSpecStreamCompiler } from "@json-render/core";

const compiler = createSpecStreamCompiler<MySpec>();

// Process streaming chunks
const { result, newPatches } = compiler.push(chunk);

// Get final result
const finalSpec = compiler.getResult();

用于流式处理AI响应（JSONL补丁）：

typescript

import { createSpecStreamCompiler } from "@json-render/core";

const compiler = createSpecStreamCompiler<MySpec>();

// Process streaming chunks
const { result, newPatches } = compiler.push(chunk);

// Get final result
const finalSpec = compiler.getResult();

Key Exports

主要导出项

Export	Purpose
`defineSchema`	Create a new schema
`defineCatalog`	Create a catalog from schema
`createSpecStreamCompiler`	Stream JSONL patches into spec
`parseSpecStreamLine`	Parse single JSONL line
`applySpecStreamPatch`	Apply patch to object

导出项	用途
`defineSchema`	创建新的Schema
`defineCatalog`	基于Schema创建Catalog
`createSpecStreamCompiler`	将JSONL补丁流式处理为Spec
`parseSpecStreamLine`	解析单行JSONL
`applySpecStreamPatch`	将补丁应用到对象