create-wp-typia 0.1.0 → 1.0.1

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

@@ -1,25 +0,0 @@
-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

@@ -1,51 +0,0 @@
-{
-	"$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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,75 +0,0 @@
-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

@@ -1,37 +0,0 @@
-/**
- * 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

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,42 +0,0 @@
-/**
- * {{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

@@ -1,47 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,85 +0,0 @@
-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

@@ -1,40 +0,0 @@
-{
-	"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"
-	}
-}