create-wp-typia 0.1.0

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

@@ -0,0 +1,93 @@
+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 { 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>
+			</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,16 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+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()
+	},
+	edit: Edit,
+	save: Save,
+});

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

@@ -0,0 +1,417 @@
+import typia from "typia";
+import { 
+	{{titleCase}}AttributesV1, 
+	{{titleCase}}AttributesV2, 
+	{{titleCase}}AttributesV3,
+	{{titleCase}}Attributes,
+	BLOCK_VERSIONS 
+} from './types/versions';
+
+/**
+ * 🔍 WordPress Block Migration Detection System
+ * 
+ * Automatically detects if blocks need migration and provides
+ * detailed analysis of required upgrades
+ */
+
+export interface MigrationError extends Error {
+	name: string;
+	message: string;
+	stack?: string;
+	code: string;
+	details?: any;
+	timestamp: string;
+	blockData?: any;
+}
+
+export interface MigrationAnalysis {
+	needsMigration: boolean;
+	currentVersion: string;
+	targetVersion: string;
+	confidence: number; // 0-1
+	reasons: string[];
+	warnings: string[];
+	blockCount?: number;
+	affectedFields: {
+		added: string[];
+		modified: string[];
+		deprecated: string[];
+	};
+}
+
+export interface BlockScanResult {
+	blockName: string;
+	postId?: number;
+	postTitle?: string;
+	analysis: MigrationAnalysis;
+	attributes: any;
+}
+
+/**
+ * Detect if a single block needs migration
+ */
+export function detectBlockMigration(attributes: any, blockName?: string): MigrationAnalysis {
+	const analysis: MigrationAnalysis = {
+		needsMigration: false,
+		currentVersion: "unknown",
+		targetVersion: "3.0.0",
+		confidence: 0,
+		reasons: [],
+		warnings: [],
+		affectedFields: {
+			added: [],
+			modified: [],
+			deprecated: []
+		}
+	};
+
+	try {
+		// 1. Structure-based detection
+		const structureDetection = detectVersionByStructure(attributes);
+		analysis.currentVersion = structureDetection.version;
+		analysis.confidence = structureDetection.confidence;
+
+		// 2. Schema validation against current version
+		const currentValidation = typia.validate<{{titleCase}}Attributes>(attributes);
+		
+		if (!currentValidation.success) {
+			analysis.needsMigration = true;
+			analysis.reasons.push(`Block doesn't match current schema (v${analysis.targetVersion})`);
+			
+			// Analyze validation errors to understand what's missing/wrong
+			analyzeValidationErrors(currentValidation.errors, analysis);
+		}
+
+		// 3. Version-specific checks
+		if (analysis.currentVersion !== analysis.targetVersion) {
+			analysis.needsMigration = true;
+			analysis.reasons.push(`Block is at v${analysis.currentVersion}, current is v${analysis.targetVersion}`);
+			
+			// Compare schemas to find changes
+			compareVersionSchemas(analysis.currentVersion, analysis.targetVersion, analysis);
+		}
+
+		// 4. Data quality checks
+		performDataQualityChecks(attributes, analysis);
+
+		// 5. Add migration recommendations
+		if (analysis.needsMigration) {
+			addMigrationRecommendations(analysis);
+		}
+
+	} catch (error) {
+		// Enhanced error handling with detailed logging
+		const migrationError: MigrationError = {
+			name: error.name || 'MigrationDetectionError',
+			message: error.message || 'Unknown error during migration detection',
+			stack: error.stack,
+			code: 'MIGRATION_DETECTION_FAILED',
+			details: {
+				blockName,
+				attributes: typeof attributes === 'object' ? Object.keys(attributes) : 'Invalid attributes',
+				timestamp: new Date().toISOString()
+			},
+			timestamp: new Date().toISOString(),
+			blockData: attributes
+		};
+		
+		analysis.warnings.push(`Detection error: ${migrationError.message} (Code: ${migrationError.code})`);
+		analysis.confidence = 0;
+		
+		// Log detailed error for debugging
+		console.error('Migration Detection Error Details:', JSON.stringify(migrationError, null, 2));
+	}
+
+	return analysis;
+}
+
+/**
+ * Detect version based on block structure
+ */
+function detectVersionByStructure(attributes: any): { version: string; confidence: number } {
+	const checks = [
+		// V3 indicators (highest priority)
+		{
+			version: "3.0.0",
+			indicators: ['id', 'version', 'theme'],
+			required: 2, // Need at least 2 indicators for high confidence
+			weight: 0.95
+		},
+		// V2 indicators (medium priority)
+		{
+			version: "2.0.0",
+			indicators: ['isVisible', 'className'],
+			required: 1,
+			weight: 0.85
+		},
+		// Mixed V2+V3 indicators
+		{
+			version: "2.5.0", // Intermediate version
+			indicators: ['isVisible', 'className', 'id', 'version'],
+			required: 3,
+			weight: 0.9
+		},
+		// V1 indicators (basic structure)
+		{
+			version: "1.0.0",
+			indicators: ['content', 'alignment'],
+			required: 1,
+			weight: 0.7
+		}
+	];
+
+	let bestMatch = { version: "1.0.0", confidence: 0.3 }; // Default fallback
+
+	// Enhanced detection with weighted scoring
+	for (const check of checks) {
+		const presentIndicators = check.indicators.filter(indicator =>
+			indicator in attributes && attributes[indicator] !== undefined
+		);
+
+		if (presentIndicators.length >= check.required) {
+			// Calculate confidence based on proportion of indicators present and weight
+			const proportion = presentIndicators.length / check.indicators.length;
+			const confidence = proportion * check.weight;
+			
+			// Bonus for exact match
+			const bonus = presentIndicators.length === check.indicators.length ? 0.1 : 0;
+			
+			const finalConfidence = Math.min(confidence + bonus, 1.0);
+			
+			if (finalConfidence > bestMatch.confidence) {
+				bestMatch = {
+					version: check.version,
+					confidence: finalConfidence
+				};
+			}
+		}
+	}
+
+	// Additional validation for V3 blocks
+	if (attributes.version && typeof attributes.version === 'number') {
+		if (attributes.version === 3 && bestMatch.version !== "3.0.0") {
+			// Override if version attribute explicitly states V3
+			bestMatch = { version: "3.0.0", confidence: Math.min(bestMatch.confidence + 0.2, 1.0) };
+		}
+	}
+
+	return bestMatch;
+}
+
+/**
+ * Analyze Typia validation errors to understand migration needs
+ */
+function analyzeValidationErrors(errors: any[], analysis: MigrationAnalysis) {
+	for (const error of errors) {
+		const path = error.path || 'root';
+		
+		if (error.expected && error.actual) {
+			analysis.affectedFields.modified.push(path);
+			analysis.reasons.push(`Field '${path}' type mismatch: expected ${error.expected}, got ${error.actual}`);
+		} else if (error.expected) {
+			analysis.affectedFields.added.push(path);
+			analysis.reasons.push(`Missing required field: '${path}'`);
+		}
+	}
+}
+
+/**
+ * Compare schemas between versions
+ */
+function compareVersionSchemas(fromVersion: string, toVersion: string, analysis: MigrationAnalysis) {
+	// This would be auto-generated based on type analysis
+	const versionChanges = {
+		"1.0.0->2.0.0": {
+			added: ['isVisible', 'className'],
+			modified: ['content'], // Added length validation
+			deprecated: [],
+			changes: [
+				"Added visibility toggle (isVisible) for showing/hiding blocks",
+				"Added custom CSS class support (className) for styling",
+				"Enhanced content validation with length constraints"
+			]
+		},
+		"2.0.0->3.0.0": {
+			added: ['id', 'version', 'theme'],
+			modified: ['content', 'className'], // Changed validation rules
+			deprecated: [],
+			changes: [
+				"Added unique ID generation for block identification",
+				"Added version tracking for future migrations",
+				"Added theme support for different visual styles",
+				"Enhanced content validation with increased max length (2000 chars)",
+				"Enhanced className validation with pattern matching"
+			]
+		},
+		"1.0.0->3.0.0": {
+			added: ['id', 'version', 'theme', 'isVisible', 'className'],
+			modified: ['content', 'alignment'],
+			deprecated: [],
+			changes: [
+				"Added visibility toggle (isVisible) for showing/hiding blocks",
+				"Added custom CSS class support (className) for styling",
+				"Added unique ID generation for block identification",
+				"Added version tracking for future migrations",
+				"Added theme support for different visual styles",
+				"Enhanced content validation with length constraints and increased max length",
+				"Extended alignment options to include 'justify'"
+			]
+		}
+	};
+
+	const changeKey = `${fromVersion}->${toVersion}`;
+	const changes = versionChanges[changeKey];
+
+	if (changes) {
+		analysis.affectedFields.added.push(...changes.added);
+		analysis.affectedFields.modified.push(...changes.modified);
+		analysis.affectedFields.deprecated.push(...changes.deprecated);
+		
+		// Add change descriptions to reasons
+		if (changes.changes) {
+			analysis.reasons.push(...changes.changes.map(change => `📝 ${change}`));
+		}
+	}
+}
+
+/**
+ * Perform data quality checks
+ */
+function performDataQualityChecks(attributes: any, analysis: MigrationAnalysis) {
+	// Check for suspicious data patterns
+	if (attributes.content === null) {
+		analysis.warnings.push('Content is null, may cause issues after migration');
+	}
+
+	if (typeof attributes.content === 'object') {
+		analysis.warnings.push('Content appears to be an object, expected string');
+	}
+
+	if (attributes.className && attributes.className.length > 100) {
+		analysis.warnings.push('ClassName exceeds recommended length, will be truncated');
+	}
+
+	// Check for legacy WordPress patterns
+	if (attributes.content && typeof attributes.content === 'string') {
+		if (attributes.content.includes('{{')) {
+			analysis.warnings.push('Content contains template syntax, may need manual review');
+		}
+	}
+}
+
+/**
+ * Add migration recommendations
+ */
+function addMigrationRecommendations(analysis: MigrationAnalysis) {
+	if (analysis.currentVersion === "1.0.0") {
+		analysis.reasons.push('💡 Upgrade will add visibility toggle and custom CSS classes');
+	}
+
+	if (analysis.currentVersion !== "3.0.0") {
+		analysis.reasons.push('💡 Latest version includes unique IDs and theme support');
+	}
+
+	if (analysis.affectedFields.added.length > 0) {
+		analysis.reasons.push(`🔧 ${analysis.affectedFields.added.length} new field(s) will be added with default values`);
+	}
+}
+
+/**
+ * Scan WordPress database for blocks needing migration
+ */
+export async function scanSiteForMigrations(blockName: string = '{{namespace}}/{{slug}}'): Promise<BlockScanResult[]> {
+	console.log(`🔍 Scanning site for ${blockName} blocks needing migration...`);
+	
+	const results: BlockScanResult[] = [];
+
+	try {
+		// This would integrate with WordPress REST API or direct DB access
+		const posts = await fetchPostsWithBlocks(blockName);
+		
+		for (const post of posts) {
+			const blocks = extractBlocksFromPost(post, blockName);
+			
+			for (const block of blocks) {
+				const analysis = detectBlockMigration(block.attributes, blockName);
+				
+				if (analysis.needsMigration || analysis.warnings.length > 0) {
+					results.push({
+						blockName,
+						postId: post.id,
+						postTitle: post.title,
+						analysis,
+						attributes: block.attributes
+					});
+				}
+			}
+		}
+
+		console.log(`✅ Scan complete: ${results.length} blocks need attention`);
+		
+	} catch (error) {
+		console.error('❌ Site scan failed:', error);
+	}
+
+	return results;
+}
+
+/**
+ * Generate migration report for WordPress admin
+ */
+export function generateMigrationReport(scanResults: BlockScanResult[]): string {
+	const needsMigration = scanResults.filter(r => r.analysis.needsMigration);
+	const hasWarnings = scanResults.filter(r => r.analysis.warnings.length > 0);
+	
+	let report = `# {{title}} Migration Report\n\n`;
+	report += `📊 **Summary:**\n`;
+	report += `- Total blocks scanned: ${scanResults.length}\n`;
+	report += `- Blocks needing migration: ${needsMigration.length}\n`;
+	report += `- Blocks with warnings: ${hasWarnings.length}\n\n`;
+
+	if (needsMigration.length > 0) {
+		report += `## 🔧 Blocks Requiring Migration\n\n`;
+		
+		const byVersion = needsMigration.reduce((acc, result) => {
+			const version = result.analysis.currentVersion;
+			if (!acc[version]) acc[version] = [];
+			acc[version].push(result);
+			return acc;
+		}, {} as Record<string, BlockScanResult[]>);
+
+		for (const [version, blocks] of Object.entries(byVersion)) {
+			report += `### Version ${version} (${blocks.length} blocks)\n`;
+			for (const block of blocks.slice(0, 5)) { // Show first 5
+				report += `- Post: "${block.postTitle}" (ID: ${block.postId})\n`;
+				report += `  - Confidence: ${(block.analysis.confidence * 100).toFixed(0)}%\n`;
+				report += `  - Changes: ${block.analysis.affectedFields.added.join(', ')}\n`;
+			}
+			if (blocks.length > 5) {
+				report += `  - ... and ${blocks.length - 5} more\n`;
+			}
+			report += `\n`;
+		}
+	}
+
+	if (hasWarnings.length > 0) {
+		report += `## ⚠️ Warnings\n\n`;
+		for (const result of hasWarnings.slice(0, 10)) {
+			report += `- "${result.postTitle}": ${result.analysis.warnings.join(', ')}\n`;
+		}
+	}
+
+	report += `\n---\n`;
+	report += `Generated: ${new Date().toLocaleString()}\n`;
+	
+	return report;
+}
+
+// Mock functions - would be implemented with WordPress integration
+async function fetchPostsWithBlocks(blockName: string): Promise<any[]> {
+	// Implementation would use WordPress REST API or wp.data
+	return [];
+}
+
+function extractBlocksFromPost(post: any, blockName: string): any[] {
+	// Implementation would parse post_content for blocks
+	return [];
+}