@json-render/codegen

json-render UIツリーからコードを生成するためのフレームワークに依存しないユーティリティ。Next.js、Remix、またはその他のフレームワーム向けのカスタムコードエクスポーターを構築するのに使用します。

インストール

npm install @json-render/codegen

ツリーの走査

import {
  traverseSpec,
  collectUsedComponents,
  collectStatePaths,
  collectActions,
} from "@json-render/codegen";

// specを深さ優先で走査
traverseSpec(spec, (element, key, depth, parent) => {
  console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});

// 使用されているすべてのコンポーネントタイプを取得
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }

// 参照されているすべてのstate パスを取得
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }

// すべてのアクション名を取得
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }

シリアライゼーション

import {
  serializePropValue,
  serializeProps,
  escapeString,
  type SerializeOptions,
} from "@json-render/codegen";

// 単一の値をシリアライズ
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }

serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }

// JSX用にpropsをシリアライズ
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'

// コード用に文字列をエスケープ
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);
  // package.json、コンポーネントファイル、メインページなどを生成...
  return files;
}