codegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
소스 정보
- 저장소
- vercel-labs/json-render
- 최근 소스 활동
- 2026년 3월 7일 02:22
- 감지된 SKILL.md 언어
- 영어
- 스타
- 18,686
- 포크
- 992
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- codegen
- description
- Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
# @json-render/codegen
Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.
## Installation
```bash
npm install @json-render/codegen
```
## Tree Traversal
```typescript
import {
traverseSpec,
collectUsedComponents,
collectStatePaths,
collectActions,
} from "@json-render/codegen";
// Walk the spec depth-first
traverseSpec(spec, (element, key, depth, parent) => {
console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});
// Get all component types used
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }
// Get all state paths referenced
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }
// Get all action names
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }
```
## Serialization
```typescript
import {
serializePropValue,
serializeProps,
escapeString,
type SerializeOptions,
} from "@json-render/codegen";
// Serialize a single value
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }
serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }
// Serialize props for JSX
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'
// Escape strings for code
escapeString('hello "world"');
// 'hello \"world\"'
```
### SerializeOptions
```typescript
interface SerializeOptions {
quotes?: "single" | "double";
indent?: number;
}
```
## Types
```typescript
import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";
const myGenerator: CodeGenerator = {
generate(spec) {
return [
{ path: "package.json", content: "..." },
{ path: "app/page.tsx", content: "..." },
];
},
};
```
## Building a Custom Generator
```typescript
import {
collectUsedComponents,
collectStatePaths,
traverseSpec,
serializeProps,
type GeneratedFile,
} from "@json-render/codegen";
import type { Spec } from "@json-render/core";
export function generateNextJSProject(spec: Spec): GeneratedFile[] {
const files: GeneratedFile[] = [];
const components = collectUsedComponents(spec);
// Generate package.json, component files, main page...
return files;
}
```
GitHub에서 보기