@openwebf/webf 0.22.8 → 0.22.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwebf/webf",
-  "version": "0.22.8",
+  "version": "0.22.9",
   "description": "Command line tools for WebF",
   "main": "index.js",
   "bin": {

package/templates/react.component.tsx.tpl

@@ -40,6 +40,11 @@ export interface <%= className %>Props {
   <%= propName %>?: (event: <%= getEventType(prop.type) %>) => void;
   
   <% }); %>
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+  
   /**
    * Additional CSS styles
    */

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/vue.test.ts

@@ -0,0 +1,157 @@
+import { generateVueTypings } from '../src/vue';
+import { IDLBlob } from '../src/IDLBlob';
+import { ClassObject, ClassObjectKind, PropsDeclaration } from '../src/declaration';
+
+describe('Vue Generator', () => {
+  describe('generateVueTypings', () => {
+    it('should generate Vue component types with standard HTML props', () => {
+      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 = generateVueTypings([blob]);
+      
+      // Should include standard HTML props in Props type
+      expect(result).toContain("'id'?: string;");
+      expect(result).toContain("'class'?: string;");
+      expect(result).toContain("'style'?: string | Record<string, any>;");
+      
+      // Should generate proper type exports
+      expect(result).toContain('export type TestComponentProps = {');
+      expect(result).toContain('export interface TestComponentElement {');
+      expect(result).toContain('export type TestComponentEvents = {');
+    });
+
+    it('should include standard HTML props along with 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 isActiveProp = new PropsDeclaration();
+      isActiveProp.name = 'isActive';
+      isActiveProp.type = { value: 'boolean' };
+      isActiveProp.optional = true;
+      isActiveProp.documentation = 'Whether the component is active';
+      isActiveProp.readonly = false;
+      isActiveProp.typeMode = {};
+      
+      properties.props = [titleProp, isActiveProp];
+      blob.objects = [properties];
+      
+      const result = generateVueTypings([blob]);
+      
+      // Should include custom props with kebab-case (dom_string is not converted in type definitions)
+      expect(result).toContain("'title': dom_string;");
+      expect(result).toContain("'is-active'?: boolean;");
+      
+      // And still include standard HTML props
+      expect(result).toContain("'id'?: string;");
+      expect(result).toContain("'class'?: string;");
+      expect(result).toContain("'style'?: string | Record<string, any>;");
+    });
+
+    it('should generate proper Vue component declarations', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'WebFListView', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'WebFListViewProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateVueTypings([blob]);
+      
+      // Should generate proper component declarations
+      expect(result).toContain("declare module 'vue' {");
+      expect(result).toContain("interface GlobalComponents {");
+      expect(result).toContain("'web-f-list-view': DefineCustomElement<");
+      expect(result).toContain("WebFListViewProps,");
+      expect(result).toContain("WebFListViewEvents");
+    });
+
+    it('should handle multiple components', () => {
+      const blob1 = new IDLBlob('/test/source', '/test/target', 'ComponentOne', 'test', '');
+      const properties1 = new ClassObject();
+      properties1.name = 'ComponentOneProperties';
+      properties1.kind = ClassObjectKind.interface;
+      blob1.objects = [properties1];
+
+      const blob2 = new IDLBlob('/test/source', '/test/target', 'ComponentTwo', 'test', '');
+      const properties2 = new ClassObject();
+      properties2.name = 'ComponentTwoProperties';
+      properties2.kind = ClassObjectKind.interface;
+      blob2.objects = [properties2];
+      
+      const result = generateVueTypings([blob1, blob2]);
+      
+      // Should include both components
+      expect(result).toContain('export type ComponentOneProps = {');
+      expect(result).toContain('export type ComponentTwoProps = {');
+      
+      // Both should have standard HTML props
+      const componentOneMatch = result.match(/export type ComponentOneProps = \{[^}]+\}/);
+      const componentTwoMatch = result.match(/export type ComponentTwoProps = \{[^}]+\}/);
+      
+      // Extract content including newlines
+      const componentOneSection = result.substring(result.indexOf('export type ComponentOneProps'), result.indexOf('export interface ComponentOneElement'));
+      const componentTwoSection = result.substring(result.indexOf('export type ComponentTwoProps'), result.indexOf('export interface ComponentTwoElement'));
+      
+      expect(componentOneSection).toContain("'id'?: string;");
+      expect(componentTwoSection).toContain("'id'?: string;");
+    });
+
+    it('should handle components with events', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      
+      const events = new ClassObject();
+      events.name = 'TestComponentEvents';
+      events.kind = ClassObjectKind.interface;
+      const closeProp = new PropsDeclaration();
+      closeProp.name = 'close';
+      closeProp.type = { value: 'Event', isArray: false };
+      closeProp.optional = true;
+      closeProp.documentation = 'Close event';
+      closeProp.readonly = false;
+      closeProp.typeMode = {};
+      
+      const refreshProp = new PropsDeclaration();
+      refreshProp.name = 'refresh';
+      refreshProp.type = { value: 'CustomEvent', isArray: false };
+      refreshProp.optional = true;
+      refreshProp.documentation = 'Refresh event';
+      refreshProp.readonly = false;
+      refreshProp.typeMode = {};
+      
+      events.props = [closeProp, refreshProp];
+      
+      blob.objects = [properties, events];
+      
+      const result = generateVueTypings([blob]);
+      
+      // Should include event types
+      expect(result).toContain('export type TestComponentEvents = {');
+      expect(result).toContain('close?: Event;');
+      expect(result).toContain('refresh?: CustomEvent;');
+      
+      // Props should still have standard HTML props
+      expect(result).toContain("'id'?: string;");
+      expect(result).toContain("'class'?: string;");
+      expect(result).toContain("'style'?: string | Record<string, any>;");
+    });
+  });
+});