mcpField
C
codegen

codegen

github.com/vercel-labs开发18.8k8.9k 次安装4 天前更新
代码仓库

关于 codegen

@json-render/codegen 是一组与框架无关的工具，用于从 json-render UI 树生成代码，适合开发 Next.js、Remix 等框架的自定义导出器。它提供树遍历、信息收集与属性序列化能力。

主要功能

  1. 01深度优先遍历规范树
  2. 02收集组件、状态路径与操作
  3. 03序列化属性值与属性集合
  4. 04定义代码生成器和输出文件

适用场景

  1. 01为 Next.js 构建代码导出器
  2. 02为 Remix 生成应用代码
  3. 03提取规范中使用的组件与操作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill codegen

安装后在 Claude Code 中输入/codegen确认已加载。

详细介绍

@json-render/codegen

用于从 json-render UI 树生成代码的框架无关实用工具。可使用这些工具为 Next.js、Remix 或其他框架构建自定义代码导出器。

安装

npm install @json-render/codegen

树遍历

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" }

序列化

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
interface SerializeOptions {
  quotes?: "single" | "double";
  indent?: number;
}

类型

import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";

const myGenerator: CodeGenerator = {
  generate(spec) {
    return [
      { path: "package.json", content: "..." },
      { path: "app/page.tsx", content: "..." },
    ];
  },
};

构建自定义生成器

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;
}

评论

支持 Markdown