codemeld 2.1.0

package/dist/generators/type-generator.js

@@ -0,0 +1,663 @@
+/**
+ * Analyzes component JSX for props usage and infers TypeScript types
+ * from usage context. Scans for `{props.x}` and destructured props patterns.
+ */
+export function inferPropTypes(component) {
+    const props = new Map();
+    const jsx = component.jsx;
+    // Match props.xxx patterns
+    const propsAccessRegex = /\bprops\.(\w+)/g;
+    let match;
+    while ((match = propsAccessRegex.exec(jsx)) !== null) {
+        const name = match[1];
+        if (!props.has(name)) {
+            props.set(name, {
+                name,
+                type: inferTypeFromName(name),
+                required: false,
+            });
+        }
+    }
+    // Match destructured props: { foo, bar } = props or ({ foo, bar })
+    const destructuredRegex = /\{\s*([\w\s,]+)\s*\}\s*=\s*props/g;
+    while ((match = destructuredRegex.exec(jsx)) !== null) {
+        const names = match[1].split(',').map((s) => s.trim()).filter(Boolean);
+        for (const name of names) {
+            if (!props.has(name)) {
+                props.set(name, {
+                    name,
+                    type: inferTypeFromName(name),
+                    required: false,
+                });
+            }
+        }
+    }
+    // Match function component parameter destructuring: function Comp({ foo, bar })
+    const paramDestructureRegex = /(?:function\s+\w+|const\s+\w+\s*=\s*)\s*\(\s*\{\s*([\w\s,='":\-.*]+)\s*\}\s*\)/g;
+    while ((match = paramDestructureRegex.exec(jsx)) !== null) {
+        const params = match[1].split(',');
+        for (const param of params) {
+            const trimmed = param.trim();
+            // Handle default values: name = 'default'
+            const defaultMatch = trimmed.match(/^(\w+)\s*=\s*(.+)$/);
+            const name = defaultMatch ? defaultMatch[1] : trimmed.split(':')[0].trim();
+            if (!name || name.startsWith('...'))
+                continue;
+            const cleanName = name.replace(/\.\.\./g, '');
+            if (!cleanName)
+                continue;
+            const propType = {
+                name: cleanName,
+                type: inferTypeFromName(cleanName),
+                required: !defaultMatch,
+            };
+            if (defaultMatch) {
+                propType.defaultValue = defaultMatch[2].trim();
+                // Refine type based on default value
+                const refined = inferTypeFromValue(propType.defaultValue);
+                if (refined !== 'unknown') {
+                    propType.type = refined;
+                }
+            }
+            if (!props.has(cleanName)) {
+                props.set(cleanName, propType);
+            }
+        }
+    }
+    // Refine types by analyzing usage context in JSX
+    for (const [name, prop] of props) {
+        const contextType = inferTypeFromUsageContext(name, jsx);
+        if (contextType) {
+            prop.type = contextType;
+        }
+        prop.description = generatePropDescription(name, prop.type);
+    }
+    return Array.from(props.values());
+}
+/**
+ * Infers a TypeScript type from a prop name using common naming conventions.
+ */
+function inferTypeFromName(name) {
+    // Event handlers
+    if (/^on[A-Z]/.test(name)) {
+        return inferEventHandlerType(name);
+    }
+    // Boolean patterns
+    if (/^(is|has|can|should|will|did|show|hide|enable|disable|visible|active|checked|disabled|loading|open|closed|selected|readonly|required)/.test(name)) {
+        return 'boolean';
+    }
+    // String patterns
+    if (/^(className|class|style|id|name|label|title|description|placeholder|alt|src|href|url|text|content|message|error|value|type|variant|size|color|icon|path|key|token|email|password|username)$/i.test(name)) {
+        return 'string';
+    }
+    // Number patterns
+    if (/^(count|index|length|size|width|height|min|max|step|limit|offset|page|total|amount|quantity|duration|delay|timeout|interval|priority|order|level|depth|columns|rows|tabIndex|zIndex|opacity|flex|span)$/i.test(name)) {
+        return 'number';
+    }
+    // Children
+    if (name === 'children') {
+        return 'React.ReactNode';
+    }
+    // Ref
+    if (/ref$/i.test(name)) {
+        return 'React.Ref<HTMLElement>';
+    }
+    // Arrays
+    if (/^(items|list|options|data|rows|columns|entries|results|tags|values|elements|records|children)$/i.test(name) && name !== 'children') {
+        return 'unknown[]';
+    }
+    return 'unknown';
+}
+/**
+ * Infers event handler type from the handler name.
+ */
+function inferEventHandlerType(name) {
+    const eventMap = {
+        onClick: '(event: React.MouseEvent) => void',
+        onChange: '(event: React.ChangeEvent<HTMLInputElement>) => void',
+        onSubmit: '(event: React.FormEvent) => void',
+        onFocus: '(event: React.FocusEvent) => void',
+        onBlur: '(event: React.FocusEvent) => void',
+        onKeyDown: '(event: React.KeyboardEvent) => void',
+        onKeyUp: '(event: React.KeyboardEvent) => void',
+        onKeyPress: '(event: React.KeyboardEvent) => void',
+        onMouseEnter: '(event: React.MouseEvent) => void',
+        onMouseLeave: '(event: React.MouseEvent) => void',
+        onScroll: '(event: React.UIEvent) => void',
+        onDrag: '(event: React.DragEvent) => void',
+        onDrop: '(event: React.DragEvent) => void',
+        onInput: '(event: React.FormEvent<HTMLInputElement>) => void',
+        onLoad: '() => void',
+        onError: '(error: Error) => void',
+    };
+    if (eventMap[name]) {
+        return eventMap[name];
+    }
+    // Generic handler pattern: onItemClick → (id: string) => void
+    if (/^on\w+Click$/.test(name)) {
+        return '(id: string) => void';
+    }
+    if (/^on\w+Change$/.test(name)) {
+        return '(value: unknown) => void';
+    }
+    return '() => void';
+}
+/**
+ * Infers type from a literal value string.
+ */
+function inferTypeFromValue(value) {
+    const trimmed = value.trim();
+    if (trimmed === 'true' || trimmed === 'false')
+        return 'boolean';
+    if (/^-?\d+(\.\d+)?$/.test(trimmed))
+        return 'number';
+    if (/^['"`]/.test(trimmed))
+        return 'string';
+    if (trimmed === 'null')
+        return 'null';
+    if (trimmed === 'undefined')
+        return 'undefined';
+    if (trimmed.startsWith('['))
+        return 'unknown[]';
+    if (trimmed.startsWith('{'))
+        return 'Record<string, unknown>';
+    return 'unknown';
+}
+/**
+ * Analyzes how a prop is used in JSX to infer a more accurate type.
+ */
+function inferTypeFromUsageContext(name, jsx) {
+    // Used as event handler: onClick={props.x} or onSubmit={x}
+    const eventHandlerRegex = new RegExp(`on\\w+\\s*=\\s*\\{\\s*(?:props\\.)?${escapeRegex(name)}\\s*\\}`);
+    if (eventHandlerRegex.test(jsx)) {
+        return '(...args: unknown[]) => void';
+    }
+    // Used as src attribute
+    const srcRegex = new RegExp(`src\\s*=\\s*\\{\\s*(?:props\\.)?${escapeRegex(name)}\\s*\\}`);
+    if (srcRegex.test(jsx)) {
+        return 'string';
+    }
+    // Used as className
+    const classRegex = new RegExp(`className\\s*=\\s*\\{\\s*(?:props\\.)?${escapeRegex(name)}\\s*\\}`);
+    if (classRegex.test(jsx)) {
+        return 'string';
+    }
+    // Used in template literal or string concatenation
+    const backtick = '`';
+    const templateRegex = new RegExp(backtick + '[^' + backtick + ']*\\$\\{\\s*(?:props\\.)?' + escapeRegex(name) + '\\s*\\}[^' + backtick + ']*' + backtick);
+    if (templateRegex.test(jsx)) {
+        return 'string | number';
+    }
+    // Used in arithmetic
+    const arithmeticRegex = new RegExp(`(?:props\\.)?${escapeRegex(name)}\\s*[+\\-*/%]\\s*\\d|\\d\\s*[+\\-*/%]\\s*(?:props\\.)?${escapeRegex(name)}`);
+    if (arithmeticRegex.test(jsx)) {
+        return 'number';
+    }
+    // Used in .map() → array
+    const mapRegex = new RegExp(`(?:props\\.)?${escapeRegex(name)}\\.map\\s*\\(`);
+    if (mapRegex.test(jsx)) {
+        return 'unknown[]';
+    }
+    // Used in .length → string or array
+    const lengthRegex = new RegExp(`(?:props\\.)?${escapeRegex(name)}\\.length`);
+    if (lengthRegex.test(jsx)) {
+        return 'string | unknown[]';
+    }
+    // Used in conditional → boolean
+    const conditionalRegex = new RegExp(`\\{\\s*(?:props\\.)?${escapeRegex(name)}\\s*&&`);
+    if (conditionalRegex.test(jsx)) {
+        return 'boolean';
+    }
+    return null;
+}
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/**
+ * Generates a JSDoc description for a prop based on its name and type.
+ */
+function generatePropDescription(name, type) {
+    if (name === 'children')
+        return 'Child elements';
+    if (name === 'className')
+        return 'CSS class name';
+    if (name === 'style')
+        return 'Inline styles';
+    // Event handlers
+    if (/^on[A-Z]/.test(name)) {
+        const event = name.replace(/^on/, '');
+        return `${event} handler`;
+    }
+    // Convert camelCase to readable text
+    const readable = name
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, (s) => s.toUpperCase())
+        .trim();
+    if (type === 'boolean') {
+        return `Whether ${readable.toLowerCase()}`;
+    }
+    if (type === 'number') {
+        return `Number of ${readable.toLowerCase()}`;
+    }
+    return readable;
+}
+/**
+ * Generates complete TypeScript interface definitions for a component's props and state.
+ */
+export function generateTypeDefinitions(component, analysis) {
+    const lines = [];
+    const propsName = `${component.name}Props`;
+    const propTypes = inferPropTypes(component);
+    // Check for children usage in JSX
+    const hasChildren = component.jsx.includes('{children}') ||
+        component.jsx.includes('{props.children}') ||
+        component.jsx.includes('children');
+    if (hasChildren && !propTypes.find((p) => p.name === 'children')) {
+        propTypes.push({
+            name: 'children',
+            type: 'React.ReactNode',
+            required: false,
+            description: 'Child elements',
+        });
+    }
+    // Generate Props interface
+    if (propTypes.length > 0) {
+        lines.push(`interface ${propsName} {`);
+        for (const prop of propTypes) {
+            if (prop.description) {
+                lines.push(`  /** ${prop.description} */`);
+            }
+            const optional = prop.required ? '' : '?';
+            lines.push(`  ${prop.name}${optional}: ${prop.type};`);
+        }
+        lines.push('}');
+        lines.push('');
+    }
+    else {
+        lines.push(`interface ${propsName} {`);
+        lines.push('  children?: React.ReactNode;');
+        lines.push('}');
+        lines.push('');
+    }
+    // Generate State type from component stateVars
+    const stateVars = component.stateVars;
+    if (stateVars.length > 0) {
+        const stateTypes = inferStateTypes(stateVars);
+        const stateName = `${component.name}State`;
+        lines.push(`interface ${stateName} {`);
+        for (const stateVar of stateVars) {
+            const tsType = stateTypes.get(stateVar.name) ?? 'unknown';
+            const description = stateVar.name
+                .replace(/([A-Z])/g, ' $1')
+                .replace(/^./, (s) => s.toUpperCase())
+                .trim();
+            lines.push(`  /** ${description} */`);
+            lines.push(`  ${stateVar.name}: ${tsType};`);
+        }
+        lines.push('}');
+        lines.push('');
+    }
+    // Generate API response types if fetch calls exist
+    if (analysis?.fetchCalls && analysis.fetchCalls.length > 0) {
+        const apiTypes = inferApiResponseType(analysis.fetchCalls);
+        if (apiTypes) {
+            lines.push(apiTypes);
+            lines.push('');
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Analyzes fetch call URLs and patterns to generate response type interfaces.
+ * Groups endpoints by path and generates typed response interfaces.
+ */
+export function inferApiResponseType(fetchCalls) {
+    if (fetchCalls.length === 0)
+        return '';
+    const lines = [];
+    // Generic API response wrapper
+    lines.push('interface ApiResponse<T> {');
+    lines.push('  data: T;');
+    lines.push('  status: number;');
+    lines.push('  message?: string;');
+    lines.push('}');
+    lines.push('');
+    // Group fetch calls by endpoint to generate specific types
+    const endpointTypes = new Map();
+    for (const call of fetchCalls) {
+        const resourceName = extractResourceName(call.url);
+        if (!endpointTypes.has(resourceName)) {
+            endpointTypes.set(resourceName, { methods: new Set(), hasBody: false });
+        }
+        const info = endpointTypes.get(resourceName);
+        info.methods.add(call.method);
+        if (call.hasBody)
+            info.hasBody = true;
+    }
+    for (const [resource, info] of endpointTypes) {
+        const typeName = toPascalCase(resource);
+        // Generate response type
+        lines.push(`interface ${typeName}Response {`);
+        lines.push(`  id: string;`);
+        lines.push(`  [key: string]: unknown;`);
+        lines.push('}');
+        lines.push('');
+        // Generate request type if there are POST/PUT/PATCH calls
+        const mutationMethods = ['POST', 'PUT', 'PATCH'];
+        const hasMutation = [...info.methods].some((m) => mutationMethods.includes(m.toUpperCase()));
+        if (hasMutation && info.hasBody) {
+            lines.push(`interface ${typeName}Request {`);
+            lines.push(`  [key: string]: unknown;`);
+            lines.push('}');
+            lines.push('');
+        }
+    }
+    return lines.join('\n').trimEnd();
+}
+/**
+ * Extracts a resource name from a URL path for type generation.
+ * E.g., `/api/users/123` → `User`, `/products` → `Product`
+ */
+function extractResourceName(url) {
+    // Remove protocol and domain
+    let path = url.replace(/^https?:\/\/[^/]+/, '');
+    // Remove query string and hash
+    path = path.replace(/[?#].*$/, '');
+    // Remove trailing slash
+    path = path.replace(/\/$/, '');
+    // Extract meaningful path segments
+    const segments = path.split('/').filter((s) => s && !s.startsWith(':') && !/^\d+$/.test(s) && s !== 'api' && s !== 'v1' && s !== 'v2' && s !== 'v3');
+    if (segments.length === 0) {
+        return 'Api';
+    }
+    // Use the last meaningful segment, singularize if needed
+    let resource = segments[segments.length - 1];
+    resource = singularize(resource);
+    return resource;
+}
+/**
+ * Naive singularization of common English plurals.
+ */
+function singularize(word) {
+    if (word.endsWith('ies'))
+        return word.slice(0, -3) + 'y';
+    if (word.endsWith('ses') || word.endsWith('xes') || word.endsWith('zes'))
+        return word.slice(0, -2);
+    if (word.endsWith('s') && !word.endsWith('ss') && !word.endsWith('us'))
+        return word.slice(0, -1);
+    return word;
+}
+/**
+ * Converts a kebab-case or snake_case string to PascalCase.
+ */
+function toPascalCase(str) {
+    return str
+        .replace(/[-_]+(.)/g, (_, c) => c.toUpperCase())
+        .replace(/^./, (s) => s.toUpperCase());
+}
+/**
+ * Generates global type definitions file content suitable for a `global.d.ts` file.
+ */
+export function generateGlobalTypes() {
+    return `// Global type definitions for the converted React application
+
+// Utility type for components that accept children
+type PropsWithChildren<P = {}> = P & { children?: React.ReactNode };
+
+// Common event handler types
+type ClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
+type ChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => void;
+type SubmitHandler = (event: React.FormEvent<HTMLFormElement>) => void;
+type KeyHandler = (event: React.KeyboardEvent<HTMLElement>) => void;
+type FocusHandler = (event: React.FocusEvent<HTMLElement>) => void;
+type DragHandler = (event: React.DragEvent<HTMLElement>) => void;
+type ScrollHandler = (event: React.UIEvent<HTMLElement>) => void;
+type InputHandler = (event: React.FormEvent<HTMLInputElement>) => void;
+
+// CSS Modules
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+// SVG module declaration
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+  export { ReactComponent };
+  const src: string;
+  export default src;
+}
+
+// Image module declarations
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.ico' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+// Font module declarations
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+
+// Environment variables type
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_APP_TITLE: string;
+  readonly VITE_PUBLIC_URL: string;
+  readonly MODE: string;
+  readonly BASE_URL: string;
+  readonly PROD: boolean;
+  readonly DEV: boolean;
+  readonly SSR: boolean;
+  readonly [key: string]: string | boolean | undefined;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+`;
+}
+/**
+ * Maps state variable names and initial values to TypeScript types.
+ * Analyzes literal values and setter usage patterns to infer accurate types.
+ */
+export function inferStateTypes(stateVars) {
+    const typeMap = new Map();
+    for (const stateVar of stateVars) {
+        const type = inferStateType(stateVar);
+        typeMap.set(stateVar.name, type);
+    }
+    return typeMap;
+}
+/**
+ * Infers the TypeScript type for a single state variable.
+ */
+function inferStateType(stateVar) {
+    const { name, initialValue, setter } = stateVar;
+    const trimmed = initialValue.trim();
+    // Direct literal types
+    if (trimmed === 'true' || trimmed === 'false')
+        return 'boolean';
+    if (/^-?\d+$/.test(trimmed))
+        return 'number';
+    if (/^-?\d+\.\d+$/.test(trimmed))
+        return 'number';
+    if (trimmed === '0' || trimmed === '1')
+        return 'number';
+    // String values
+    if (/^['"`]/.test(trimmed) && /['"`]$/.test(trimmed))
+        return 'string';
+    if (trimmed === "''" || trimmed === '""' || trimmed === '``')
+        return 'string';
+    // Array values
+    if (trimmed.startsWith('[')) {
+        return inferArrayType(trimmed);
+    }
+    // Object values
+    if (trimmed.startsWith('{')) {
+        return 'Record<string, unknown>';
+    }
+    // null - try to infer from name or setter usage
+    if (trimmed === 'null' || trimmed === 'undefined') {
+        return inferNullableType(name, setter);
+    }
+    // Named patterns
+    if (/^(is|has|show|can|should|enable|visible|active|loading|open|checked|disabled|selected)/.test(name)) {
+        return 'boolean';
+    }
+    if (/^(count|index|total|page|size|limit|offset|num|amount|quantity)/.test(name)) {
+        return 'number';
+    }
+    if (/^(name|title|text|message|error|label|description|email|password|query|search|input|value|content|url|path)/.test(name)) {
+        return 'string';
+    }
+    if (/^(items|list|options|data|results|entries|rows|tags|records|elements)/.test(name)) {
+        return 'unknown[]';
+    }
+    return 'unknown';
+}
+/**
+ * Infers array element type from an initial array value.
+ */
+function inferArrayType(value) {
+    const trimmed = value.trim();
+    // Empty array
+    if (trimmed === '[]')
+        return 'unknown[]';
+    // Try to parse array contents
+    const inner = trimmed.slice(1, -1).trim();
+    if (!inner)
+        return 'unknown[]';
+    // Check first element
+    const elements = splitTopLevel(inner);
+    if (elements.length === 0)
+        return 'unknown[]';
+    const firstEl = elements[0].trim();
+    if (/^['"`]/.test(firstEl))
+        return 'string[]';
+    if (/^-?\d+(\.\d+)?$/.test(firstEl))
+        return 'number[]';
+    if (firstEl === 'true' || firstEl === 'false')
+        return 'boolean[]';
+    if (firstEl.startsWith('{'))
+        return 'Record<string, unknown>[]';
+    return 'unknown[]';
+}
+/**
+ * Splits a string by top-level commas (ignoring commas inside brackets/braces/parens).
+ */
+function splitTopLevel(str) {
+    const result = [];
+    let depth = 0;
+    let current = '';
+    for (const char of str) {
+        if (char === '[' || char === '{' || char === '(') {
+            depth++;
+            current += char;
+        }
+        else if (char === ']' || char === '}' || char === ')') {
+            depth--;
+            current += char;
+        }
+        else if (char === ',' && depth === 0) {
+            result.push(current);
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        result.push(current);
+    }
+    return result;
+}
+/**
+ * Infers a nullable type from the state variable name and setter usage patterns.
+ */
+function inferNullableType(name, setter) {
+    // Infer from naming conventions
+    if (/^(selected|current|active)/.test(name)) {
+        if (/item|element|row|record/i.test(name))
+            return 'Record<string, unknown> | null';
+        if (/index|id/i.test(name))
+            return 'number | null';
+        return 'string | null';
+    }
+    if (/^(error|message|notification)/.test(name))
+        return 'string | null';
+    if (/^(user|profile|account)$/i.test(name))
+        return 'Record<string, unknown> | null';
+    if (/^(data|response|result)$/i.test(name))
+        return 'unknown | null';
+    if (/^(timer|timeout|interval)/.test(name))
+        return 'ReturnType<typeof setTimeout> | null';
+    if (/^(ref|element|node)/.test(name))
+        return 'HTMLElement | null';
+    // Infer from setter name pattern
+    if (setter) {
+        const setterTarget = setter.replace(/^set/, '');
+        if (/^Is|^Has|^Show|^Can/.test(setterTarget))
+            return 'boolean | null';
+        if (/Count|Index|Total|Page/.test(setterTarget))
+            return 'number | null';
+        if (/Name|Title|Text|Message|Error/.test(setterTarget))
+            return 'string | null';
+        if (/Items|List|Options|Data/.test(setterTarget))
+            return 'unknown[] | null';
+    }
+    return 'unknown | null';
+}
+//# sourceMappingURL=type-generator.js.map