@openwebf/webf 0.22.6 → 0.22.9

package/src/react.ts

@@ -4,13 +4,16 @@ import path from 'path';
 import {ParameterType} from "./analyzer";
 import {ClassObject, FunctionArgumentType, FunctionDeclaration, TypeAliasObject} from "./declaration";
 import {IDLBlob} from "./IDLBlob";
-import {getPointerType, isPointerType} from "./utils";
+import {getPointerType, isPointerType, isUnionType} from "./utils";
 
 function readTemplate(name: string) {
   return fs.readFileSync(path.join(__dirname, '../templates/' + name + '.tpl'), {encoding: 'utf-8'});
 }
 
 function generateReturnType(type: ParameterType) {
+  if (isUnionType(type)) {
+    return (type.value as ParameterType[]).map(v => `'${v.value}'`).join(' | ');
+  }
   if (isPointerType(type)) {
     const pointerType = getPointerType(type);
     return pointerType;
@@ -79,6 +82,20 @@ function generateMethodDeclaration(method: FunctionDeclaration) {
   return `${methodName}(${args}): ${returnType};`;
 }
 
+function generateMethodDeclarationWithDocs(method: FunctionDeclaration, indent: string = ''): string {
+  let result = '';
+  if (method.documentation) {
+    result += `${indent}/**\n`;
+    const docLines = method.documentation.split('\n');
+    docLines.forEach(line => {
+      result += `${indent} * ${line}\n`;
+    });
+    result += `${indent} */\n`;
+  }
+  result += `${indent}${generateMethodDeclaration(method)}`;
+  return result;
+}
+
 function toReactEventName(name: string) {
   const eventName = 'on-' + name;
   return _.camelCase(eventName);
@@ -115,10 +132,14 @@ export function generateReactComponent(blob: IDLBlob, packageName?: string, rela
   const events = classObjects.filter(object => {
     return object.name.endsWith('Events');
   });
+  const methods = classObjects.filter(object => {
+    return object.name.endsWith('Methods');
+  });
 
   const others = classObjects.filter(object => {
     return !object.name.endsWith('Properties')
-      && !object.name.endsWith('Events');
+      && !object.name.endsWith('Events')
+      && !object.name.endsWith('Methods');
   });
 
   // Include type aliases
@@ -128,6 +149,21 @@ export function generateReactComponent(blob: IDLBlob, packageName?: string, rela
   
   const dependencies = [
     typeAliasDeclarations,
+    // Include Methods interfaces as dependencies
+    methods.map(object => {
+      const methodDeclarations = object.methods.map(method => {
+        return generateMethodDeclarationWithDocs(method, '  ');
+      }).join('\n');
+
+      let interfaceDoc = '';
+      if (object.documentation) {
+        interfaceDoc = `/**\n${object.documentation.split('\n').map(line => ` * ${line}`).join('\n')}\n */\n`;
+      }
+
+      return `${interfaceDoc}interface ${object.name} {
+${methodDeclarations}
+}`;
+    }).join('\n\n'),
     others.map(object => {
       const props = object.props.map(prop => {
         if (prop.optional) {
@@ -146,8 +182,8 @@ interface ${object.name} {
   // Generate all components from this file
   const components: string[] = [];
   
-  // Create a map of component names to their properties and events
-  const componentMap = new Map<string, { properties?: ClassObject, events?: ClassObject }>();
+  // Create a map of component names to their properties, events, and methods
+  const componentMap = new Map<string, { properties?: ClassObject, events?: ClassObject, methods?: ClassObject }>();
   
   // Process all Properties interfaces
   properties.forEach(prop => {
@@ -167,6 +203,15 @@ interface ${object.name} {
     componentMap.get(componentName)!.events = event;
   });
   
+  // Process all Methods interfaces
+  methods.forEach(method => {
+    const componentName = method.name.replace(/Methods$/, '');
+    if (!componentMap.has(componentName)) {
+      componentMap.set(componentName, {});
+    }
+    componentMap.get(componentName)!.methods = method;
+  });
+  
   // If we have multiple components, we need to generate a combined file
   const componentEntries = Array.from(componentMap.entries());
   
@@ -202,6 +247,7 @@ interface ${object.name} {
       className: className,
       properties: component.properties,
       events: component.events,
+      methods: component.methods,
       classObjectDictionary,
       dependencies,
       blob,
@@ -209,6 +255,7 @@ interface ${object.name} {
       toWebFTagName,
       generateReturnType,
       generateMethodDeclaration,
+      generateMethodDeclarationWithDocs,
       generateEventHandlerType,
       getEventType,
     });
@@ -240,6 +287,7 @@ interface ${object.name} {
       className: className,
       properties: component.properties,
       events: component.events,
+      methods: component.methods,
       classObjectDictionary,
       dependencies: '', // Dependencies will be at the top
       blob,
@@ -247,6 +295,7 @@ interface ${object.name} {
       toWebFTagName,
       generateReturnType,
       generateMethodDeclaration,
+      generateMethodDeclarationWithDocs,
       generateEventHandlerType,
       getEventType,
     });

package/templates/react.component.tsx.tpl

@@ -7,12 +7,18 @@ export interface <%= className %>Props {
   <% _.forEach(properties?.props, function(prop, index) { %>
     <% var propName = _.camelCase(prop.name); %>
     <% var attributeName = _.kebabCase(prop.name); %>
+    <% if (prop.documentation) { %>
+  /**
+   * <%= prop.documentation.split('\n').join('\n   * ') %>
+   */
+    <% } else { %>
   /**
    * <%= propName %> property
     <% if (prop.optional) { %>
    * @default undefined
     <% } %>
    */
+    <% } %>
     <% if (prop.optional) { %>
   <%= propName %>?: <%= generateReturnType(prop.type) %>;
     <% } else { %>
@@ -22,12 +28,23 @@ export interface <%= className %>Props {
   <% }); %>
   <% _.forEach(events?.props, function(prop, index) { %>
     <% var propName = toReactEventName(prop.name); %>
+    <% if (prop.documentation) { %>
+  /**
+   * <%= prop.documentation.split('\n').join('\n   * ') %>
+   */
+    <% } else { %>
   /**
    * <%= prop.name %> event handler
    */
+    <% } %>
   <%= propName %>?: (event: <%= getEventType(prop.type) %>) => void;
   
   <% }); %>
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+  
   /**
    * Additional CSS styles
    */
@@ -44,24 +61,63 @@ export interface <%= className %>Props {
   className?: string;
 }
 
+<% if (methods && methods.methods.length > 0) { %>
+/**
+ * Element interface with methods accessible via ref
+ * @example
+ * ```tsx
+ * const ref = useRef<<%= className %>Element>(null);
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');
+ * ```
+ */
+<% } %>
 export interface <%= className %>Element extends WebFElementWithMethods<{
-  <% _.forEach(properties?.methods, function(method, index) { %>
-  <%= generateMethodDeclaration(method) %>
+  <% _.forEach(methods?.methods, function(method, index) { %>
+<%= generateMethodDeclarationWithDocs(method, '  ') %>
   <% }); %>
 }> {}
 
+<% if (properties?.documentation || methods?.documentation || events?.documentation) { %>
+  <% const docs = properties?.documentation || methods?.documentation || events?.documentation; %>
+/**
+ * <%= docs %>
+ * 
+ * @example
+ * ```tsx<% if (methods && methods.methods.length > 0) { %>
+ * const ref = useRef<<%= className %>Element>(null);<% } %>
+ * 
+ * <<%= className %><% if (methods && methods.methods.length > 0) { %>
+ *   ref={ref}<% } %>
+ *   // Add props here
+ * >
+ *   Content
+ * </<%= className %>><% if (methods && methods.methods.length > 0) { %>
+ * 
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');<% } %>
+ * ```
+ */
+<% } else { %>
 /**
  * <%= className %> - WebF <%= className %> component
  * 
  * @example
- * ```tsx
- * <<%= className %>
- *   // Add example props here
+ * ```tsx<% if (methods && methods.methods.length > 0) { %>
+ * const ref = useRef<<%= className %>Element>(null);<% } %>
+ * 
+ * <<%= className %><% if (methods && methods.methods.length > 0) { %>
+ *   ref={ref}<% } %>
+ *   // Add props here
  * >
  *   Content
- * </<%= className %>>
+ * </<%= className %>><% if (methods && methods.methods.length > 0) { %>
+ * 
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');<% } %>
  * ```
  */
+<% } %>
 export const <%= className %> = createWebFComponent<<%= className %>Element, <%= className %>Props>({
   tagName: '<%= toWebFTagName(className) %>',
   displayName: '<%= className %>',

package/templates/vue.component.partial.tpl

@@ -7,6 +7,9 @@ export type <%= className %>Props = {
   '<%= propName %>': <%= generateReturnType(prop.type) %>;
     <% } %>
   <% }); %>
+  'id'?: string;
+  'class'?: string;
+  'style'?: string | Record<string, any>;
 }
 
 export interface <%= className %>Element {

package/test/react.test.ts

@@ -1,6 +1,6 @@
 import { generateReactComponent } from '../src/react';
 import { IDLBlob } from '../src/IDLBlob';
-import { ClassObject, ClassObjectKind } from '../src/declaration';
+import { ClassObject, ClassObjectKind, PropsDeclaration } from '../src/declaration';
 
 // Import the toWebFTagName function for testing
 import { toWebFTagName } from '../src/react';
@@ -130,5 +130,66 @@ describe('React Generator', () => {
       // From src/lib/src/html/shimmer to src/utils: ../../../../utils
       expect(result).toContain('import { createWebFComponent, WebFElementWithMethods } from "../../../../utils/createWebFComponent"');
     });
+
+    it('should include standard HTML props (id, className, style) in component interface', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob);
+      
+      // Should include standard HTML props
+      expect(result).toContain('id?: string;');
+      expect(result).toContain('style?: React.CSSProperties;');
+      expect(result).toContain('children?: React.ReactNode;');
+      expect(result).toContain('className?: string;');
+      
+      // Props should have proper JSDoc comments
+      expect(result).toMatch(/\/\*\*\s*\n\s*\*\s*HTML id attribute\s*\n\s*\*\/\s*\n\s*id\?: string;/);
+      expect(result).toMatch(/\/\*\*\s*\n\s*\*\s*Additional CSS styles\s*\n\s*\*\/\s*\n\s*style\?: React\.CSSProperties;/);
+      expect(result).toMatch(/\/\*\*\s*\n\s*\*\s*Children elements\s*\n\s*\*\/\s*\n\s*children\?: React\.ReactNode;/);
+      expect(result).toMatch(/\/\*\*\s*\n\s*\*\s*Additional CSS class names\s*\n\s*\*\/\s*\n\s*className\?: string;/);
+    });
+
+    it('should include standard HTML props even when component has custom properties', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      const titleProp = new PropsDeclaration();
+      titleProp.name = 'title';
+      titleProp.type = { value: 'dom_string' };
+      titleProp.optional = false;
+      titleProp.documentation = 'The component title';
+      titleProp.readonly = false;
+      titleProp.typeMode = {};
+      
+      const disabledProp = new PropsDeclaration();
+      disabledProp.name = 'disabled';
+      disabledProp.type = { value: 'boolean' };
+      disabledProp.optional = true;
+      disabledProp.documentation = 'Whether the component is disabled';
+      disabledProp.readonly = false;
+      disabledProp.typeMode = {};
+      
+      properties.props = [titleProp, disabledProp];
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob);
+      
+      // Should include custom props (dom_string is not converted in raw output)
+      expect(result).toContain('title: dom_string;');
+      expect(result).toContain('disabled?: boolean;');
+      
+      // And still include standard HTML props
+      expect(result).toContain('id?: string;');
+      expect(result).toContain('style?: React.CSSProperties;');
+      expect(result).toContain('children?: React.ReactNode;');
+      expect(result).toContain('className?: string;');
+    });
   });
 });

package/test/standard-props.test.ts

@@ -0,0 +1,190 @@
+import { generateReactComponent } from '../src/react';
+import { generateVueTypings } from '../src/vue';
+import { IDLBlob } from '../src/IDLBlob';
+import { ClassObject, ClassObjectKind, PropsDeclaration } from '../src/declaration';
+
+describe('Standard HTML Props Generation', () => {
+  describe('React Components', () => {
+    it('should generate id prop in the correct position within the interface', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestButton', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestButtonProperties';
+      properties.kind = ClassObjectKind.interface;
+      const labelProp = new PropsDeclaration();
+      labelProp.name = 'label';
+      labelProp.type = { value: 'dom_string' };
+      labelProp.optional = false;
+      labelProp.readonly = false;
+      labelProp.typeMode = {};
+      
+      const variantProp = new PropsDeclaration();
+      variantProp.name = 'variant';
+      variantProp.type = { value: 'dom_string' };
+      variantProp.optional = true;
+      variantProp.readonly = false;
+      variantProp.typeMode = {};
+      
+      properties.props = [labelProp, variantProp];
+      
+      const events = new ClassObject();
+      events.name = 'TestButtonEvents';
+      events.kind = ClassObjectKind.interface;
+      const clickProp = new PropsDeclaration();
+      clickProp.name = 'click';
+      clickProp.type = { value: 'Event', isArray: false };
+      clickProp.optional = true;
+      clickProp.readonly = false;
+      clickProp.typeMode = {};
+      
+      events.props = [clickProp];
+      
+      blob.objects = [properties, events];
+      
+      const result = generateReactComponent(blob);
+      
+      // Verify the props interface structure - extract full content including newlines
+      const propsStart = result.indexOf('export interface TestButtonProps {');
+      const propsEnd = result.indexOf('}', propsStart) + 1;
+      const propsContent = result.substring(propsStart, propsEnd);
+      
+      // Verify order: custom props, event handlers, then standard HTML props
+      const labelIndex = propsContent.indexOf('label: dom_string;');
+      const variantIndex = propsContent.indexOf('variant?: dom_string;');
+      const onClickIndex = propsContent.indexOf('onClick?: (event: Event) => void;');
+      const idIndex = propsContent.indexOf('id?: string;');
+      const styleIndex = propsContent.indexOf('style?: React.CSSProperties;');
+      const childrenIndex = propsContent.indexOf('children?: React.ReactNode;');
+      const classNameIndex = propsContent.indexOf('className?: string;');
+      
+      // All props should exist
+      expect(labelIndex).toBeGreaterThan(-1);
+      expect(variantIndex).toBeGreaterThan(-1);
+      expect(onClickIndex).toBeGreaterThan(-1);
+      expect(idIndex).toBeGreaterThan(-1);
+      expect(styleIndex).toBeGreaterThan(-1);
+      expect(childrenIndex).toBeGreaterThan(-1);
+      expect(classNameIndex).toBeGreaterThan(-1);
+      
+      // Verify order
+      expect(labelIndex).toBeLessThan(variantIndex);
+      expect(variantIndex).toBeLessThan(onClickIndex);
+      expect(onClickIndex).toBeLessThan(idIndex);
+      expect(idIndex).toBeLessThan(styleIndex);
+      expect(styleIndex).toBeLessThan(childrenIndex);
+      expect(childrenIndex).toBeLessThan(classNameIndex);
+    });
+
+    it('should properly type the standard props', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'SimpleComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'SimpleComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob);
+      
+      // Verify exact type definitions
+      expect(result).toMatch(/id\?: string;/);
+      expect(result).toMatch(/style\?: React\.CSSProperties;/);
+      expect(result).toMatch(/children\?: React\.ReactNode;/);
+      expect(result).toMatch(/className\?: string;/);
+    });
+  });
+
+  describe('Vue Components', () => {
+    it('should generate standard HTML props with correct Vue naming conventions', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'VueButton', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'VueButtonProperties';
+      properties.kind = ClassObjectKind.interface;
+      const labelProp = new PropsDeclaration();
+      labelProp.name = 'label';
+      labelProp.type = { value: 'dom_string' };
+      labelProp.optional = false;
+      labelProp.readonly = false;
+      labelProp.typeMode = {};
+      
+      const isDisabledProp = new PropsDeclaration();
+      isDisabledProp.name = 'isDisabled';
+      isDisabledProp.type = { value: 'boolean' };
+      isDisabledProp.optional = true;
+      isDisabledProp.readonly = false;
+      isDisabledProp.typeMode = {};
+      
+      properties.props = [labelProp, isDisabledProp];
+      
+      blob.objects = [properties];
+      
+      const result = generateVueTypings([blob]);
+      
+      // Verify Props type includes custom and standard props - extract full content
+      const propsStart = result.indexOf('export type VueButtonProps = {');
+      const propsEnd = result.indexOf('}', propsStart) + 1;
+      const propsContent = result.substring(propsStart, propsEnd);
+      
+      // Custom props should be kebab-case (dom_string is not converted)
+      expect(propsContent).toContain("'label': dom_string;");
+      expect(propsContent).toContain("'is-disabled'?: boolean;");
+      
+      // Standard HTML props
+      expect(propsContent).toContain("'id'?: string;");
+      expect(propsContent).toContain("'class'?: string;");
+      expect(propsContent).toContain("'style'?: string | Record<string, any>;");
+    });
+
+    it('should handle Vue style prop with both string and object types', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'StyledComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'StyledComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateVueTypings([blob]);
+      
+      // Vue style prop should accept both string and object
+      expect(result).toMatch(/'style'\?: string \| Record<string, any>;/);
+    });
+  });
+
+  describe('Cross-framework consistency', () => {
+    it('should generate equivalent props for both React and Vue', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'CrossFrameworkComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'CrossFrameworkComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      const titleProp = new PropsDeclaration();
+      titleProp.name = 'title';
+      titleProp.type = { value: 'dom_string' };
+      titleProp.optional = false;
+      titleProp.readonly = false;
+      titleProp.typeMode = {};
+      
+      properties.props = [titleProp];
+      blob.objects = [properties];
+      
+      const reactResult = generateReactComponent(blob);
+      const vueResult = generateVueTypings([blob]);
+      
+      // Both should have id prop
+      expect(reactResult).toContain('id?: string;');
+      expect(vueResult).toContain("'id'?: string;");
+      
+      // Both should have style prop (with appropriate types)
+      expect(reactResult).toContain('style?: React.CSSProperties;');
+      expect(vueResult).toContain("'style'?: string | Record<string, any>;");
+      
+      // React has className, Vue has class
+      expect(reactResult).toContain('className?: string;');
+      expect(vueResult).toContain("'class'?: string;");
+      
+      // React has children, Vue uses slots (not in props)
+      expect(reactResult).toContain('children?: React.ReactNode;');
+      expect(vueResult).not.toContain('children');
+    });
+  });
+});

package/test/union-types-jsdoc.test.ts

@@ -0,0 +1,168 @@
+import { analyzer, clearCaches, UnionTypeCollector, ParameterType } from '../src/analyzer';
+import { generateReactComponent } from '../src/react';
+import { IDLBlob } from '../src/IDLBlob';
+import { ClassObject } from '../src/declaration';
+
+describe('Union Types and JSDoc Preservation', () => {
+  beforeEach(() => {
+    clearCaches();
+  });
+
+  test('should generate union types with quoted string literals and preserve JSDoc @default tags', () => {
+    // Create test TypeScript content with union types and JSDoc
+    const testContent = `
+/**
+ * Table cell component
+ */
+interface WebFTableCellProperties {
+  /**
+   * Text alignment
+   * @default "left"
+   */
+  align?: 'left' | 'center' | 'right';
+  
+  /**
+   * Cell type (header or data)
+   * @default "data"
+   */
+  type?: 'header' | 'data';
+  
+  /**
+   * Column span
+   * @default 1
+   */
+  colspan?: number;
+}
+
+interface WebFTableCellEvents {
+  /**
+   * Cell click event
+   */
+  click: CustomEvent<{row: number, column: number, value: any}>;
+}
+`;
+
+    // Create IDL blob
+    const blob = new IDLBlob('test.d.ts', 'dist', 'table_cell', 'implement');
+    blob.raw = testContent;
+    
+    // Analyze the content
+    const definedPropertyCollector = {
+      properties: new Set<string>(),
+      files: new Set<string>(),
+      interfaces: new Set<string>()
+    };
+    const unionTypeCollector: UnionTypeCollector = { types: new Set<ParameterType[]>() };
+    
+    analyzer(blob, definedPropertyCollector, unionTypeCollector);
+    
+    // Generate React component
+    const reactCode = generateReactComponent(blob);
+    
+    // Test 1: Check that union types are properly quoted
+    expect(reactCode).toContain("align?: 'left' | 'center' | 'right';");
+    expect(reactCode).toContain("type?: 'header' | 'data';");
+    
+    // Test 2: Check that JSDoc is preserved with @default tags
+    expect(reactCode).toMatch(/\*\s+Text alignment[\s\S]*?\*\s+@default "left"/);
+    expect(reactCode).toMatch(/\*\s+Cell type \(header or data\)[\s\S]*?\*\s+@default "data"/);
+    
+    // Test 3: Check that the generated interface has the correct structure
+    expect(reactCode).toContain('export interface WebFTableCellProps {');
+    expect(reactCode).toContain('colspan?: number;');
+    
+    // Test 4: Verify the component is created with correct props
+    expect(reactCode).toContain("attributeProps: [");
+    expect(reactCode).toContain("'align',");
+    expect(reactCode).toContain("'type',");
+    expect(reactCode).toContain("'colspan',");
+  });
+
+  test('should handle complex union types', () => {
+    const testContent = `
+interface TestProperties {
+  /**
+   * Size property
+   * @default "medium"
+   */
+  size?: 'small' | 'medium' | 'large' | 'xl';
+  
+  /**
+   * Status
+   * @default "pending"
+   */
+  status?: 'pending' | 'active' | 'completed' | 'failed';
+}
+`;
+
+    const blob = new IDLBlob('test.d.ts', 'dist', 'test', 'implement');
+    blob.raw = testContent;
+    
+    const definedPropertyCollector = {
+      properties: new Set<string>(),
+      files: new Set<string>(),
+      interfaces: new Set<string>()
+    };
+    const unionTypeCollector: UnionTypeCollector = { types: new Set<ParameterType[]>() };
+    
+    analyzer(blob, definedPropertyCollector, unionTypeCollector);
+    const reactCode = generateReactComponent(blob);
+    
+    // Check complex union types
+    expect(reactCode).toContain("size?: 'small' | 'medium' | 'large' | 'xl';");
+    expect(reactCode).toContain("status?: 'pending' | 'active' | 'completed' | 'failed';");
+  });
+
+  test('should handle mixed type properties alongside union types', () => {
+    const testContent = `
+interface MixedProperties {
+  /**
+   * String union type
+   * @default "auto"
+   */
+  mode?: 'auto' | 'manual' | 'disabled';
+  
+  /**
+   * Regular string
+   */
+  name?: string;
+  
+  /**
+   * Number property
+   * @default 42
+   */
+  count?: number;
+  
+  /**
+   * Boolean property
+   * @default true
+   */
+  enabled?: boolean;
+}
+`;
+
+    const blob = new IDLBlob('test.d.ts', 'dist', 'mixed', 'implement');
+    blob.raw = testContent;
+    
+    const definedPropertyCollector = {
+      properties: new Set<string>(),
+      files: new Set<string>(),
+      interfaces: new Set<string>()
+    };
+    const unionTypeCollector: UnionTypeCollector = { types: new Set<ParameterType[]>() };
+    
+    analyzer(blob, definedPropertyCollector, unionTypeCollector);
+    const reactCode = generateReactComponent(blob);
+    
+    // Check that different types are handled correctly
+    expect(reactCode).toContain("mode?: 'auto' | 'manual' | 'disabled';");
+    expect(reactCode).toContain("name?: string;");
+    expect(reactCode).toContain("count?: number;");
+    expect(reactCode).toContain("enabled?: boolean;");
+    
+    // Check JSDoc preservation
+    expect(reactCode).toMatch(/\*\s+String union type[\s\S]*?\*\s+@default "auto"/);
+    expect(reactCode).toMatch(/\*\s+Number property[\s\S]*?\*\s+@default 42/);
+    expect(reactCode).toMatch(/\*\s+Boolean property[\s\S]*?\*\s+@default true/);
+  });
+});