@wp-typia/create 0.1.0

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

@@ -0,0 +1,32 @@
+import { syncBlockMetadata } from "./lib/typia-metadata-core";
+
+async function main() {
+	const result = await syncBlockMetadata({
+		blockJsonFile: "block.json",
+		manifestFile: "typia.manifest.json",
+		sourceTypeName: "{{titleCase}}Attributes",
+		typesFile: "src/types.ts",
+	});
+
+	console.log("✅ block.json, typia.manifest.json, and typia-validator.php 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}`);
+		}
+	}
+
+	if (result.phpGenerationWarnings.length > 0) {
+		console.warn("⚠️ Some Typia constraints are not yet enforced by typia-validator.php:");
+		for (const warning of result.phpGenerationWarnings) {
+			console.warn(`   - ${warning}`);
+		}
+	}
+}
+
+main().catch((error) => {
+	console.error("❌ Type sync failed:", error);
+	process.exit(1);
+});

package/templates/advanced/src/admin/migration-dashboard.tsx.mustache

@@ -0,0 +1,315 @@
+import { useState } from "@wordpress/element";
+import { Button, Card, CardBody, Notice, Spinner } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+
+import {
+	type BatchMigrationResult,
+	type BlockScanResult,
+	batchMigrateScanResults,
+	generateMigrationReport,
+	scanSiteForMigrations,
+} from "../migration-detector";
+
+interface MigrationStats {
+	needsMigration: number;
+	total: number;
+	unknown: number;
+	versions: Record<string, number>;
+}
+
+function collectStats(results: BlockScanResult[]): MigrationStats {
+	return results.reduce<MigrationStats>(
+		(accumulator, result) => {
+			accumulator.total += 1;
+			if (result.analysis.needsMigration) {
+				accumulator.needsMigration += 1;
+			}
+			if (result.analysis.currentVersion === "unknown") {
+				accumulator.unknown += 1;
+			}
+			accumulator.versions[result.analysis.currentVersion] =
+				(accumulator.versions[result.analysis.currentVersion] ?? 0) + 1;
+			return accumulator;
+		},
+		{
+			needsMigration: 0,
+			total: 0,
+			unknown: 0,
+			versions: {},
+		},
+	);
+}
+
+function downloadFile(contents: string, fileName: string, type: string) {
+	const blob = new Blob([contents], { type });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = fileName;
+	link.click();
+	URL.revokeObjectURL(url);
+}
+
+function formatUnionSummary(result: BlockScanResult["preview"]): string {
+	if (result.unionBranches.length === 0) {
+		return __("No union branch changes", "{{textdomain}}");
+	}
+
+	return result.unionBranches
+		.map((branch) => `${branch.field}: ${branch.legacyBranch ?? "unknown"} → ${branch.nextBranch ?? "unknown"} (${branch.status})`)
+		.join(", ");
+}
+
+function renderJsonPreview(value: unknown) {
+	return (
+		<pre
+			style={{
+				background: "#f6f7f7",
+				borderRadius: "4px",
+				margin: "8px 0 0",
+				overflowX: "auto",
+				padding: "8px",
+			}}
+		>
+			{JSON.stringify(value, null, 2)}
+		</pre>
+	);
+}
+
+export function MigrationDashboard() {
+	const [results, setResults] = useState<BlockScanResult[]>([]);
+	const [dryRunResult, setDryRunResult] = useState<BatchMigrationResult | null>(null);
+	const [isScanning, setIsScanning] = useState(false);
+	const [isMigrating, setIsMigrating] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const stats = collectStats(results);
+
+	const runScan = async () => {
+		setIsScanning(true);
+		setError(null);
+		setDryRunResult(null);
+
+		try {
+			setResults(await scanSiteForMigrations());
+		} catch (scanError) {
+			setError(scanError instanceof Error ? scanError.message : String(scanError));
+		} finally {
+			setIsScanning(false);
+		}
+	};
+
+	const runDryRun = async () => {
+		setError(null);
+
+		try {
+			setDryRunResult(await batchMigrateScanResults(results, { dryRun: true }));
+		} catch (batchError) {
+			setError(batchError instanceof Error ? batchError.message : String(batchError));
+		}
+	};
+
+	const runBatchMigration = async () => {
+		if (!window.confirm(__("Migrate all detected legacy blocks now?", "{{textdomain}}"))) {
+			return;
+		}
+
+		setIsMigrating(true);
+		setError(null);
+
+		try {
+			setDryRunResult(await batchMigrateScanResults(results, { dryRun: false }));
+			await runScan();
+		} catch (batchError) {
+			setError(batchError instanceof Error ? batchError.message : String(batchError));
+		} finally {
+			setIsMigrating(false);
+		}
+	};
+
+	const downloadReport = () => {
+		downloadFile(
+			generateMigrationReport(results),
+			"{{slug}}-migration-report.md",
+			"text/markdown",
+		);
+	};
+
+	const downloadJson = () => {
+		downloadFile(
+			JSON.stringify(
+				{
+					dryRunResult,
+					results,
+				},
+				null,
+				2,
+			),
+			"{{slug}}-migration-report.json",
+			"application/json",
+		);
+	};
+
+	return (
+		<div className="{{slug}}-migration-dashboard">
+			<Card>
+				<CardBody>
+					<div style={{ display: "grid", gap: "12px" }}>
+						<div>
+							<strong>{__("Migration Manager", "{{textdomain}}")}</strong>
+							<p style={{ margin: "4px 0 0" }}>
+								{__(
+									"Scan posts for legacy attributes, preview field-level changes, and batch migrate to the current Typia contract.",
+									"{{textdomain}}",
+								)}
+							</p>
+						</div>
+
+						<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+							<Button variant="secondary" onClick={runScan} disabled={isScanning}>
+								{isScanning ? __("Scanning…", "{{textdomain}}") : __("Scan site", "{{textdomain}}")}
+							</Button>
+							<Button variant="secondary" onClick={runDryRun} disabled={results.length === 0 || isScanning || isMigrating}>
+								{__("Dry run", "{{textdomain}}")}
+							</Button>
+							<Button variant="primary" onClick={runBatchMigration} disabled={stats.needsMigration === 0 || isScanning || isMigrating}>
+								{isMigrating ? __("Migrating…", "{{textdomain}}") : __("Migrate all", "{{textdomain}}")}
+							</Button>
+							<Button variant="tertiary" onClick={downloadReport} disabled={results.length === 0}>
+								{__("Download markdown", "{{textdomain}}")}
+							</Button>
+							<Button variant="tertiary" onClick={downloadJson} disabled={results.length === 0}>
+								{__("Download JSON", "{{textdomain}}")}
+							</Button>
+						</div>
+
+						{(isScanning || isMigrating) && <Spinner />}
+
+						{error && (
+							<Notice status="error" isDismissible={false}>
+								{error}
+							</Notice>
+						)}
+
+						{results.length > 0 && (
+							<div style={{ display: "grid", gap: "8px" }}>
+								<div>
+									<strong>{__("Summary", "{{textdomain}}")}</strong>
+									<ul style={{ margin: "8px 0 0", paddingLeft: "20px" }}>
+										<li>{__("Detected blocks", "{{textdomain}}")}: {stats.total}</li>
+										<li>{__("Need migration", "{{textdomain}}")}: {stats.needsMigration}</li>
+										<li>{__("Unknown shape", "{{textdomain}}")}: {stats.unknown}</li>
+									</ul>
+								</div>
+
+								<div>
+									<strong>{__("Version distribution", "{{textdomain}}")}</strong>
+									<ul style={{ margin: "8px 0 0", paddingLeft: "20px" }}>
+										{Object.entries(stats.versions).map(([version, count]) => (
+											<li key={version}>
+												{version}: {count}
+											</li>
+										))}
+									</ul>
+								</div>
+
+								<div>
+									<strong>{__("Latest results", "{{textdomain}}")}</strong>
+									<div style={{ display: "grid", gap: "8px", marginTop: "8px" }}>
+										{results.map((result) => (
+											<details key={`${result.postId}:${result.blockPath.join(".")}`}>
+												<summary>
+													<strong>{result.postTitle}</strong>
+													{" — "}
+													{result.analysis.currentVersion} → {result.analysis.targetVersion}
+													{" · "}
+													{result.preview.changedFields.length}
+													{" "}
+													{__("changed", "{{textdomain}}")}
+													{result.preview.unresolved.length > 0 ? " · manual review" : ""}
+													{result.preview.validationErrors.length > 0 ? " · validation issues" : ""}
+												</summary>
+												<div style={{ marginTop: "8px", display: "grid", gap: "8px" }}>
+													<div>
+														<strong>{__("Changed fields", "{{textdomain}}")}</strong>
+														<div>
+															{result.preview.changedFields.length > 0
+																? result.preview.changedFields.join(", ")
+																: __("None", "{{textdomain}}")}
+														</div>
+													</div>
+													<div>
+														<strong>{__("Union branches", "{{textdomain}}")}</strong>
+														<div>{formatUnionSummary(result.preview)}</div>
+													</div>
+													{result.preview.unresolved.length > 0 && (
+														<div>
+															<strong>{__("Manual review", "{{textdomain}}")}</strong>
+															<div>{result.preview.unresolved.join(", ")}</div>
+														</div>
+													)}
+													{result.preview.validationErrors.length > 0 && (
+														<div>
+															<strong>{__("Validation", "{{textdomain}}")}</strong>
+															<div>{result.preview.validationErrors.join(", ")}</div>
+														</div>
+													)}
+													<div>
+														<strong>{__("Before", "{{textdomain}}")}</strong>
+														{renderJsonPreview(result.preview.before)}
+													</div>
+													<div>
+														<strong>{__("After", "{{textdomain}}")}</strong>
+														{renderJsonPreview(result.preview.after)}
+													</div>
+												</div>
+											</details>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
+						{dryRunResult && (
+							<div style={{ display: "grid", gap: "8px" }}>
+								<strong>{__("Dry-run preview", "{{textdomain}}")}</strong>
+								<div style={{ display: "grid", gap: "8px", marginTop: "8px" }}>
+									{dryRunResult.posts.map((post) => (
+										<details key={post.postId}>
+											<summary>
+												<strong>{post.postTitle}</strong>
+												{" — "}
+												{post.status}
+												{post.reason ? ` (${post.reason})` : ""}
+											</summary>
+											<div style={{ marginTop: "8px", display: "grid", gap: "8px" }}>
+												{post.previews.map((preview) => (
+													<div key={preview.blockPath.join(".")}>
+														<div>
+															<strong>{preview.currentVersion} → {preview.targetVersion}</strong>
+															{preview.preview.changedFields.length > 0
+																? ` · ${preview.preview.changedFields.join(", ")}`
+																: ""}
+															{preview.reason ? ` · ${preview.reason}` : ""}
+														</div>
+														<div>{formatUnionSummary(preview.preview)}</div>
+														{renderJsonPreview({
+															after: preview.preview.after,
+															before: preview.preview.before,
+															unresolved: preview.preview.unresolved,
+															validationErrors: preview.preview.validationErrors,
+														})}
+													</div>
+												))}
+											</div>
+										</details>
+									))}
+								</div>
+							</div>
+						)}
+					</div>
+				</CardBody>
+			</Card>
+		</div>
+	);
+}

package/templates/advanced/src/components/ErrorBoundary.tsx.mustache

@@ -0,0 +1,47 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+	children: ReactNode;
+	fallback?: ReactNode;
+}
+
+interface State {
+	hasError: boolean;
+	error?: Error;
+}
+
+/**
+ * Error Boundary component for {{title}}
+ */
+export class ErrorBoundary extends Component<Props, State> {
+	public state: State = {
+		hasError: false
+	};
+
+	public static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error };
+	}
+
+	public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		console.error('{{title}} Error:', error, errorInfo);
+	}
+
+	public render() {
+		if (this.state.hasError) {
+			return this.props.fallback || (
+				<div className="{{dashCase}}-error-boundary">
+					<h3>Something went wrong with {{title}}</h3>
+					<p>Please check the console for more details.</p>
+					{this.state.error && (
+						<details>
+							<summary>Error details</summary>
+							<pre>{this.state.error.stack}</pre>
+						</details>
+					)}
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

package/templates/advanced/src/deprecated.ts.mustache

@@ -0,0 +1,2 @@
+export { deprecated } from "./migrations/generated/deprecated";
+export { migrationUtils } from "./migrations";

package/templates/advanced/src/edit.tsx.mustache

@@ -0,0 +1,97 @@
+import { BlockEditProps } from '@wordpress/blocks';
+import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl, SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { {{titleCase}}Attributes } from './types';
+import { validators } from './validators';
+import { useTypiaValidation, useAttributeLogger, useDebounce } from './hooks';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { MigrationDashboard } from './admin/migration-dashboard';
+import { classNames } from './utils';
+
+type EditProps = BlockEditProps<{{titleCase}}Attributes>;
+
+export default function Edit({ attributes, setAttributes }: EditProps) {
+	const blockProps = useBlockProps();
+	const { isValid, errors } = useTypiaValidation(attributes, validators.validate);
+	const debouncedAttributes = useDebounce(attributes, 300);
+	
+	// Log attribute changes in development
+	useAttributeLogger(debouncedAttributes);
+
+	const updateAttribute = <K extends keyof {{titleCase}}Attributes>(
+		key: K,
+		value: {{titleCase}}Attributes[K]
+	) => {
+		const newAttrs = { ...attributes, [key]: value };
+		const validation = validators.validate(newAttrs);
+		
+		if (validation.success) {
+			setAttributes({ [key]: value } as Partial<{{titleCase}}Attributes>);
+		} else {
+			console.error(`Validation failed for ${String(key)}:`, validation.errors);
+		}
+	};
+
+	return (
+		<ErrorBoundary>
+			<InspectorControls>
+				<PanelBody title={__('Settings', '{{textdomain}}')}>
+					<ToggleControl
+						label={__('Visible', '{{textdomain}}')}
+						checked={attributes.isVisible ?? true}
+						onChange={(isVisible) => updateAttribute('isVisible', isVisible)}
+					/>
+					<SelectControl
+						label={__('Alignment', '{{textdomain}}')}
+						value={attributes.alignment ?? 'left'}
+						options={[
+							{ label: __('Left', '{{textdomain}}'), value: 'left' },
+							{ label: __('Center', '{{textdomain}}'), value: 'center' },
+							{ label: __('Right', '{{textdomain}}'), value: 'right' },
+							{ label: __('Justify', '{{textdomain}}'), value: 'justify' },
+						]}
+						onChange={(alignment) => updateAttribute('alignment', alignment as any)}
+					/>
+					{!isValid && (
+						<div className="components-notice is-error">
+							<p><strong>{__('Validation Errors:', '{{textdomain}}')}</strong></p>
+							<ul style={{ margin: 0, paddingLeft: '1em' }}>
+								{errors.map((error, index) => (
+									<li key={index}>
+										<code>{error.path}</code>: {error.message}
+									</li>
+								))}
+							</ul>
+						</div>
+					)}
+				</PanelBody>
+				<PanelBody title={__('Migration Manager', '{{textdomain}}')} initialOpen={false}>
+					<MigrationDashboard />
+				</PanelBody>
+			</InspectorControls>
+
+			<div {...blockProps} className={classNames(blockProps.className, {
+				'has-validation-errors': !isValid,
+				'is-hidden': !attributes.isVisible
+			})}>
+				<RichText
+					tagName="p"
+					value={attributes.content}
+					onChange={(content) => updateAttribute('content', content)}
+					placeholder={__('Enter your text...', '{{textdomain}}')}
+					className={classNames('{{dashCase}}-content', `align-${attributes.alignment}`)}
+					style={{
+						textAlign: attributes.alignment ?? 'left'
+					}}
+				/>
+				
+				<div className="block-info">
+					<small>
+						{__('{{title}} – Enhanced with utilities, hooks, and error handling!', '{{textdomain}}')}
+					</small>
+				</div>
+			</div>
+		</ErrorBoundary>
+	);
+}

package/templates/advanced/src/hooks/useDebounce.ts.mustache

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook for debounced value
+ */
+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;
+}

package/templates/advanced/src/hooks/useLocalStorage.ts.mustache

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook for localStorage with type safety
+ */
+export function useLocalStorage<T>(
+	key: string,
+	initialValue: T
+): [T, (value: T | ((val: T) => 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 reading localStorage key "${key}":`, error);
+			return initialValue;
+		}
+	});
+
+	const setValue = (value: T | ((val: T) => T)) => {
+		try {
+			const valueToStore = value instanceof Function ? value(storedValue) : value;
+			setStoredValue(valueToStore);
+			window.localStorage.setItem(key, JSON.stringify(valueToStore));
+		} catch (error) {
+			console.error(`Error setting localStorage key "${key}":`, error);
+		}
+	};
+
+	return [storedValue, setValue];
+}

package/templates/advanced/src/hooks.ts.mustache

@@ -0,0 +1,56 @@
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Custom hooks for {{title}}
+ */
+export * from './hooks/useDebounce';
+export * from './hooks/useLocalStorage';
+
+/**
+ * Hook for Typia validation with real-time feedback
+ */
+export function useTypiaValidation<T>(
+	data: T,
+	validator: (value: T) => { success: boolean; errors?: any[] }
+) {
+	const [isValid, setIsValid] = useState(true);
+	const [errors, setErrors] = useState<any[]>([]);
+
+	useEffect(() => {
+		const result = validator(data);
+		setIsValid(result.success);
+		setErrors(result.errors || []);
+	}, [data, validator]);
+
+	return { isValid, errors };
+}
+
+/**
+ * Hook for generating UUID
+ */
+export function useUUID() {
+	const [uuid] = useState(() => {
+		if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+			return crypto.randomUUID();
+		}
+		
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+			const r = Math.random() * 16 | 0;
+			const v = c === 'x' ? r : (r & 0x3 | 0x8);
+			return v.toString(16);
+		});
+	});
+
+	return uuid;
+}
+
+/**
+ * Hook for logging attribute changes in development
+ */
+export function useAttributeLogger(attributes: any) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === 'development') {
+			console.log('{{title}} attributes changed:', attributes);
+		}
+	}, [attributes]);
+}

package/templates/advanced/src/index.tsx.mustache

@@ -0,0 +1,18 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { deprecated } from './deprecated';
+import Edit from './edit';
+import Save from './save';
+import { {{titleCase}}Attributes } from './types';
+import { validators } from './validators';
+import './style.scss';
+
+registerBlockType<{{titleCase}}Attributes>('{{namespace}}/{{slug}}', {
+	// Use Typia to generate example data
+	example: {
+		attributes: validators.random()
+	},
+	deprecated,
+	edit: Edit,
+	save: Save,
+});

package/templates/advanced/src/migration-detector.ts.mustache

@@ -0,0 +1,9 @@
+export {
+	type BatchMigrationResult,
+	type BlockScanResult,
+	type MigrationAnalysis,
+	batchMigrateScanResults,
+	detectBlockMigration,
+	generateMigrationReport,
+	scanSiteForMigrations,
+} from "./migrations";

package/templates/advanced/src/migrations/config.ts.mustache

@@ -0,0 +1,8 @@
+export const migrationConfig = {
+	blockName: "{{namespace}}/{{slug}}",
+	currentVersion: "1.0.0",
+	supportedVersions: ["1.0.0"],
+	snapshotDir: "src/migrations/versions",
+} as const;
+
+export default migrationConfig;

package/templates/advanced/src/migrations/examples/rename-transform-union/README.md.mustache

@@ -0,0 +1,23 @@
+# Rename + Transform + Union Example
+
+This folder is a reference pack for realistic migration authoring. It is **not** part of the active migration graph.
+
+It demonstrates:
+
+- a top-level rename
+- a nested leaf rename
+- a semantic transform
+- a discriminated union branch change that still needs manual review
+
+Use it as a guide when editing generated files in:
+
+- `src/migrations/rules/`
+- `src/migrations/fixtures/`
+
+Recommended workflow:
+
+1. scaffold the real edge with `bun run migration:scaffold -- --from <semver>`
+2. review auto-applied `renameMap`
+3. copy the relevant transform patterns from this example
+4. update the generated fixture to match your real legacy payload
+5. run `bun run migration:verify`