create-wp-typia 0.1.0

package/templates/basic/scripts/sync-types-to-block-json.ts

@@ -0,0 +1,25 @@
+import { syncBlockMetadata } from "./lib/typia-metadata-core";
+
+async function main() {
+  const result = await syncBlockMetadata({
+    blockJsonFile: "src/block.json",
+    manifestFile: "src/typia.manifest.json",
+    sourceTypeName: "{{pascalCase}}Attributes",
+    typesFile: "src/types.ts",
+  });
+
+  console.log("✅ block.json and typia.manifest.json were generated from TypeScript types!");
+  console.log("📝 Generated attributes:", result.attributeNames);
+
+  if (result.lossyProjectionWarnings.length > 0) {
+    console.warn("⚠️ Some Typia constraints were preserved only in typia.manifest.json:");
+    for (const warning of result.lossyProjectionWarnings) {
+      console.warn(`   - ${warning}`);
+    }
+  }
+}
+
+main().catch((error) => {
+  console.error("❌ Type sync failed:", error);
+  process.exit(1);
+});

package/templates/basic/src/block.json

@@ -0,0 +1,51 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "{{namespace}}/{{slug}}",
+	"version": "0.1.0",
+	"title": "{{title}}",
+	"category": "text",
+	"icon": "smiley",
+	"description": "{{description}}",
+	"keywords": ["{{keyword}}", "typia", "block"],
+	"example": {
+		"attributes": {
+			"content": "예제 콘텐츠",
+			"alignment": "center",
+			"isVisible": true
+		}
+	},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "{{textDomain}}",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"default": ""
+		},
+		"alignment": {
+			"type": "string",
+			"enum": ["left", "center", "right", "justify"],
+			"default": "left"
+		},
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"isVisible": {
+			"type": "boolean",
+			"default": true
+		},
+		"id": {
+			"type": "string"
+		},
+		"version": {
+			"type": "number",
+			"default": 1
+		}
+	}
+}

package/templates/basic/src/edit.tsx

@@ -0,0 +1,85 @@
+/**
+ * Editor component for {{title}} Block
+ */
+
+import { BlockEditProps } from '@wordpress/blocks';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, TextControl, ToggleControl, SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { {{pascalCase}}Attributes } from './types';
+import { validators, createAttributeUpdater } from './validators';
+import { useValidation } from './hooks';
+
+type EditProps = BlockEditProps<{{pascalCase}}Attributes>;
+
+function Edit({ attributes, setAttributes }: EditProps) {
+  const blockProps = useBlockProps();
+  const { errors, isValid } = useValidation(attributes, validators.validate);
+  const updateAttribute = createAttributeUpdater(
+    attributes,
+    setAttributes,
+    validators.validate
+  );
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title={__('설정', '{{textDomain}}')}>
+          <TextControl
+            label={__('콘텐츠', '{{textDomain}}')}
+            value={attributes.content || ''}
+            onChange={(value) => updateAttribute('content', value)}
+            help={__('블록의 메인 콘텐츠입니다.', '{{textDomain}}')}
+          />
+
+          <SelectControl
+            label={__('정렬', '{{textDomain}}')}
+            value={attributes.alignment || 'left'}
+            options={[
+              { label: __('왼쪽', '{{textDomain}}'), value: 'left' },
+              { label: __('가운데', '{{textDomain}}'), value: 'center' },
+              { label: __('오른쪽', '{{textDomain}}'), value: 'right' },
+              { label: __('양쪽 맞춤', '{{textDomain}}'), value: 'justify' },
+            ]}
+            onChange={(value) => updateAttribute('alignment', value as any)}
+          />
+
+          <TextControl
+            label={__('CSS 클래스', '{{textDomain}}')}
+            value={attributes.className || ''}
+            onChange={(value) => updateAttribute('className', value)}
+            help={__('추가 CSS 클래스를 입력하세요.', '{{textDomain}}')}
+          />
+
+          <ToggleControl
+            label={__('표시하기', '{{textDomain}}')}
+            checked={attributes.isVisible !== false}
+            onChange={(value) => updateAttribute('isVisible', value)}
+          />
+        </PanelBody>
+
+        {!isValid && (
+          <PanelBody title={__('유효성 검증 오류', '{{textDomain}}')} initialOpen>
+            {errors.map((error, index) => (
+              <div key={index} style={{ color: '#cc1818', fontSize: '12px' }}>
+                • {error}
+              </div>
+            ))}
+          </PanelBody>
+        )}
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <div className="wp-block-{{slug}}__content">
+          {attributes.content || (
+            <span style={{ color: '#757575' }}>
+              {__('콘텐츠를 입력하세요...', '{{textDomain}}')}
+            </span>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Edit;

package/templates/basic/src/hooks.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { {{pascalCase}}Attributes } from './types';
+
+/**
+ * 유효성 검증 훅
+ */
+export function useValidation<T>(
+  attributes: T,
+  validator: (value: T) => { success: boolean; errors?: any[] }
+) {
+  const [errors, setErrors] = useState<string[]>([]);
+  const [isValid, setIsValid] = useState(true);
+
+  useEffect(() => {
+    const result = validator(attributes);
+    if (result.success) {
+      setErrors([]);
+      setIsValid(true);
+    } else {
+      setErrors(result.errors?.map(e => e.path || 'Unknown error') || []);
+      setIsValid(false);
+    }
+  }, [attributes, validator]);
+
+  return { errors, isValid };
+}
+
+/**
+ * 디바운스 훅
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+/**
+ * 로컬 스토리지 훅
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(`Error loading ${key} from localStorage:`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback((value: T) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(`Error saving ${key} to localStorage:`, error);
+    }
+  }, [key]);
+
+  return [storedValue, setValue];
+}

package/templates/basic/src/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * WordPress {{title}} Block
+ * 
+ * Typia 기반 타입 안전 블록
+ */
+
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+// Import components
+import Edit from './edit';
+import Save from './save';
+import metadata from './block.json';
+import './style.scss';
+
+// Import types
+import { {{pascalCase}}Attributes } from './types';
+import { validators } from './validators';
+
+// Register the block
+registerBlockType<{{pascalCase}}Attributes>(metadata.name, {
+  title: metadata.title,
+  description: metadata.description,
+  category: metadata.category as any,
+  icon: metadata.icon,
+  supports: {
+    html: false,
+    multiple: true,
+    align: ['wide', 'full'],
+  },
+  attributes: metadata.attributes,
+  example: {
+    attributes: validators.random(),
+  },
+  edit: Edit,
+  save: Save,
+});

package/templates/basic/src/save.tsx

@@ -0,0 +1,27 @@
+/**
+ * Save/Frontend component for {{title}} Block
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+import { {{pascalCase}}Attributes } from './types';
+
+interface SaveProps {
+  attributes: {{pascalCase}}Attributes;
+}
+
+export default function Save({ attributes }: SaveProps) {
+  const blockProps = useBlockProps.save();
+
+  // 블록이 숨겨져 있으면 아무것도 렌더링하지 않음
+  if (attributes.isVisible === false) {
+    return null;
+  }
+
+  return (
+    <div {...blockProps}>
+      <div className="wp-block-{{slug}}__content">
+        {attributes.content}
+      </div>
+    </div>
+  );
+}

package/templates/basic/src/style.scss

@@ -0,0 +1,42 @@
+/**
+ * {{title}} Block Styles
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	padding: 20px;
+	border: 1px solid #ddd;
+	border-radius: 4px;
+	background-color: #fff;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+	&__content {
+		font-size: 16px;
+		line-height: 1.6;
+		color: #333;
+
+		// 정렬 스타일
+		&[data-align="center"] {
+			text-align: center;
+		}
+
+		&[data-align="right"] {
+			text-align: right;
+		}
+
+		&[data-align="justify"] {
+			text-align: justify;
+		}
+	}
+
+	// 호버 효과
+	&:hover {
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+		transition: box-shadow 0.2s ease;
+	}
+
+	// 에디터에서의 스타일
+	.wp-block-editor & {
+		outline: 1px dashed #ddd;
+		outline-offset: -1px;
+	}
+}

package/templates/basic/src/types.ts

@@ -0,0 +1,47 @@
+import { tags } from "typia";
+
+/**
+ * 블록 속성 인터페이스
+ * Typia 태그를 사용하여 유효성 검증 규칙 정의
+ */
+export interface {{pascalCase}}Attributes {
+  /**
+   * 메인 콘텐츠
+   */
+  content: string & 
+    tags.MinLength<1> & 
+    tags.MaxLength<1000> & 
+    tags.Default<"">;
+
+  /**
+   * 정렬 방식
+   */
+  alignment?: ('left' | 'center' | 'right' | 'justify') & 
+    tags.Default<"left">;
+
+  /**
+   * 표시 여부
+   */
+  isVisible?: boolean & 
+    tags.Default<true>;
+
+  /**
+   * 커스텀 CSS 클래스
+   */
+  className?: string & 
+    tags.MaxLength<100> & 
+    tags.Default<"">;
+
+  /**
+   * 고유 ID (자동 생성)
+   */
+  id?: string & 
+    tags.Format<"uuid">;
+
+  /**
+   * 블록 버전 (마이그레이션용)
+   */
+  version?: number & 
+    tags.Type<"uint32"> & 
+    tags.Default<1>;
+}

package/templates/basic/src/validators.ts

@@ -0,0 +1,39 @@
+import typia from "typia";
+import { {{pascalCase}}Attributes } from "./types";
+
+/**
+ * Typia 유효성 검증기
+ */
+export const validators = {
+  validate: typia.createValidate<{{pascalCase}}Attributes>(),
+  assert: typia.createAssert<{{pascalCase}}Attributes>(),
+  is: typia.createIs<{{pascalCase}}Attributes>(),
+  random: typia.createRandom<{{pascalCase}}Attributes>(),
+  clone: typia.misc.createClone<{{pascalCase}}Attributes>(),
+  prune: typia.misc.createPrune<{{pascalCase}}Attributes>(),
+};
+
+/**
+ * 속성 업데이터 생성
+ */
+export function createAttributeUpdater(
+  attributes: {{pascalCase}}Attributes,
+  setAttributes: (attrs: Partial<{{pascalCase}}Attributes>) => void,
+  validator = validators.validate
+) {
+  return <K extends keyof {{pascalCase}}Attributes>(
+    key: K,
+    value: {{pascalCase}}Attributes[K]
+  ) => {
+    const newAttrs = { ...attributes, [key]: value };
+    
+    const validation = validator(newAttrs);
+    if (validation.success) {
+      setAttributes({ [key]: value } as Partial<{{pascalCase}}Attributes>);
+      return true;
+    } else {
+      console.error(`Validation failed for ${String(key)}:`, validation.errors);
+      return false;
+    }
+  };
+}

package/templates/basic/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": "."
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build"]
+}

package/templates/basic/webpack.config.js

@@ -0,0 +1,85 @@
+const fs = require("fs");
+const path = require("path");
+const defaultConfig = require("@wordpress/scripts/config/webpack.config");
+
+class TypiaManifestAssetPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("TypiaManifestAssetPlugin", (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: "TypiaManifestAssetPlugin",
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        () => {
+          for (const entry of getManifestEntries()) {
+            if (compilation.getAsset(entry.outputPath)) {
+              continue;
+            }
+
+            compilation.emitAsset(
+              entry.outputPath,
+              new compiler.webpack.sources.RawSource(fs.readFileSync(entry.inputPath)),
+            );
+          }
+        },
+      );
+    });
+  }
+}
+
+function getManifestEntries() {
+  const entries = [];
+  const rootManifestPath = path.resolve(process.cwd(), "typia.manifest.json");
+
+  if (fs.existsSync(rootManifestPath)) {
+    entries.push({
+      inputPath: rootManifestPath,
+      outputPath: "typia.manifest.json",
+    });
+  }
+
+  const srcDir = path.resolve(process.cwd(), "src");
+  if (!fs.existsSync(srcDir)) {
+    return entries;
+  }
+
+  for (const inputPath of findManifestFiles(srcDir)) {
+    entries.push({
+      inputPath,
+      outputPath: path.relative(srcDir, inputPath),
+    });
+  }
+
+  return entries;
+}
+
+function findManifestFiles(directory) {
+  const manifestFiles = [];
+
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const entryPath = path.join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      manifestFiles.push(...findManifestFiles(entryPath));
+      continue;
+    }
+    if (entry.isFile() && entry.name === "typia.manifest.json") {
+      manifestFiles.push(entryPath);
+    }
+  }
+
+  return manifestFiles;
+}
+
+module.exports = async () => {
+  const { default: UnpluginTypia } = await import("@typia/unplugin/webpack");
+
+  return {
+    ...defaultConfig,
+    plugins: [
+      UnpluginTypia(),
+      ...(defaultConfig.plugins || []),
+      new TypiaManifestAssetPlugin(),
+    ],
+  };
+};

package/templates/full/package.json.mustache

@@ -0,0 +1,40 @@
+{
+	"name": "{{slugSnakeCase}}",
+	"version": "0.1.0",
+  "packageManager": "bun@1.3.10",
+	"description": "{{description}}",
+	"author": "{{author}}",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"scripts": {
+		"sync-types": "tsx scripts/sync-types-to-block-json.ts",
+		"prebuild": "bun run sync-types",
+		"build": "wp-scripts build",
+		"start": "bun run sync-types && wp-scripts start",
+		"dev": "bun run start",
+		"lint:js": "wp-scripts lint-js",
+		"lint:css": "wp-scripts lint-style",
+		"lint": "bun run lint:js && bun run lint:css",
+		"format": "wp-scripts format",
+		"typecheck": "tsc --noEmit"
+	},
+	"devDependencies": {
+		"ajv": "^8.18.0",
+		"@types/wordpress__block-editor": "^11.5.17",
+		"@types/wordpress__blocks": "^12.5.18",
+		"@types/wordpress__components": "^23.8.0",
+		"@wordpress/browserslist-config": "^6.42.0",
+    "@wordpress/scripts": "^30.22.0",
+		"@typia/unplugin": "^12.0.1",
+		"tsx": "^4.20.5",
+		"typescript": "^5.9.2",
+		"typia": "^12.0.1"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^15.2.0",
+		"@wordpress/blocks": "^15.2.0",
+		"@wordpress/components": "^30.2.0",
+		"@wordpress/element": "^6.29.0",
+		"@wordpress/i18n": "^6.2.0"
+	}
+}