@openwebf/webf 0.22.6 → 0.22.8

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,9 +28,15 @@ 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;
   
   <% }); %>
@@ -44,24 +56,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/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/);
+  });
+});