@openwebf/webf 0.22.0 → 0.22.3

package/src/declaration.ts

@@ -82,3 +82,8 @@ export class ClassObject {
 export class FunctionObject {
   declare: FunctionDeclaration
 }
+
+export class TypeAliasObject {
+  name: string;
+  type: string;
+}

package/src/generator.ts

@@ -64,6 +64,8 @@ interface GenerateOptions {
   source: string;
   target: string;
   command: string;
+  exclude?: string[];
+  packageName?: string;
 }
 
 // Batch processing for file operations
@@ -99,11 +101,14 @@ function validatePaths(source: string, target: string): { source: string; target
   return { source: normalizedSource, target: normalizedTarget };
 }
 
-function getTypeFiles(source: string): string[] {
+function getTypeFiles(source: string, excludePatterns?: string[]): string[] {
   try {
+    const defaultIgnore = ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**'];
+    const ignore = excludePatterns ? [...defaultIgnore, ...excludePatterns] : defaultIgnore;
+    
     const files = glob.globSync("**/*.d.ts", {
       cwd: source,
-      ignore: ['**/node_modules/**', '**/dist/**', '**/build/**']
+      ignore: ignore
     });
     
     return files.filter(file => !file.includes('global.d.ts'));
@@ -139,7 +144,7 @@ function createBlobs(typeFiles: string[], source: string, target: string): IDLBl
   });
 }
 
-export async function dartGen({ source, target, command }: GenerateOptions) {
+export async function dartGen({ source, target, command, exclude }: GenerateOptions) {
   group('Dart Code Generation');
   time('dartGen');
   
@@ -154,7 +159,7 @@ export async function dartGen({ source, target, command }: GenerateOptions) {
   }
   
   // Get type files
-  const typeFiles = getTypeFiles(normalizedSource);
+  const typeFiles = getTypeFiles(normalizedSource, exclude);
   info(`Found ${typeFiles.length} type definition files`);
   
   if (typeFiles.length === 0) {
@@ -232,7 +237,7 @@ export async function dartGen({ source, target, command }: GenerateOptions) {
   info(`Output directory: ${normalizedTarget}`);
 }
 
-export async function reactGen({ source, target }: GenerateOptions) {
+export async function reactGen({ source, target, exclude, packageName }: GenerateOptions) {
   group('React Code Generation');
   time('reactGen');
   
@@ -247,7 +252,7 @@ export async function reactGen({ source, target }: GenerateOptions) {
   }
   
   // Get type files
-  const typeFiles = getTypeFiles(normalizedSource);
+  const typeFiles = getTypeFiles(normalizedSource, exclude);
   info(`Found ${typeFiles.length} type definition files`);
   
   if (typeFiles.length === 0) {
@@ -288,9 +293,16 @@ export async function reactGen({ source, target }: GenerateOptions) {
   
   await processFilesInBatch(blobs, 5, async (blob) => {
     try {
-      const result = generateReactComponent(blob);
+      const result = generateReactComponent(blob, packageName, blob.relativeDir);
+      
+      // Skip if no content was generated
+      if (!result || result.trim().length === 0) {
+        debug(`Skipped ${blob.filename} - no components found`);
+        return;
+      }
       
       // Maintain the same directory structure as the .d.ts file
+      // Always put files under src/ directory
       const outputDir = path.join(normalizedTarget, 'src', blob.relativeDir);
       // Ensure the directory exists
       if (!fs.existsSync(outputDir)) {
@@ -309,12 +321,68 @@ export async function reactGen({ source, target }: GenerateOptions) {
     }
   });
   
-  // Generate index file
-  const indexContent = generateReactIndex(blobs);
+  // Generate or update index file
   const indexFilePath = path.join(normalizedTarget, 'src', 'index.ts');
-  if (writeFileIfChanged(indexFilePath, indexContent)) {
-    filesChanged++;
-    debug(`Generated: index.ts`);
+  const newExports = generateReactIndex(blobs);
+  
+  if (fs.existsSync(indexFilePath)) {
+    // Read existing index file
+    const existingContent = fs.readFileSync(indexFilePath, 'utf-8');
+    const existingLines = existingContent.split('\n');
+    
+    // Parse new exports
+    const newExportLines = newExports.split('\n').filter(line => line.startsWith('export '));
+    
+    // Find which exports are missing
+    const missingExports: string[] = [];
+    for (const newExport of newExportLines) {
+      // Extract the export statement to check if it exists
+      const exportMatch = newExport.match(/export\s*{\s*([^}]+)\s*}\s*from\s*["']([^"']+)["']/);
+      if (exportMatch) {
+        const [, exportNames, modulePath] = exportMatch;
+        const exportedItems = exportNames.split(',').map(s => s.trim());
+        
+        // Check if this exact export exists
+        const exists = existingLines.some(line => {
+          if (!line.startsWith('export ')) return false;
+          const lineMatch = line.match(/export\s*{\s*([^}]+)\s*}\s*from\s*["']([^"']+)["']/);
+          if (!lineMatch) return false;
+          const [, lineExportNames, lineModulePath] = lineMatch;
+          const lineExportedItems = lineExportNames.split(',').map(s => s.trim());
+          
+          // Check if same module and same exports
+          return lineModulePath === modulePath && 
+                 exportedItems.every(item => lineExportedItems.includes(item)) &&
+                 lineExportedItems.every(item => exportedItems.includes(item));
+        });
+        
+        if (!exists) {
+          missingExports.push(newExport);
+        }
+      }
+    }
+    
+    // If there are missing exports, append them
+    if (missingExports.length > 0) {
+      let updatedContent = existingContent.trimRight();
+      if (!updatedContent.endsWith('\n')) {
+        updatedContent += '\n';
+      }
+      updatedContent += missingExports.join('\n') + '\n';
+      
+      if (writeFileIfChanged(indexFilePath, updatedContent)) {
+        filesChanged++;
+        debug(`Updated: index.ts (added ${missingExports.length} exports)`);
+      }
+    } else {
+      debug(`Skipped: index.ts (all exports already exist)`);
+    }
+  } else {
+    // File doesn't exist, create it
+    if (writeFileIfChanged(indexFilePath, newExports)) {
+      filesChanged++;
+      debug(`Generated: index.ts`);
+    }
   }
   
   timeEnd('reactGen');
@@ -323,7 +391,7 @@ export async function reactGen({ source, target }: GenerateOptions) {
   info('You can now import these components in your React project.');
 }
 
-export async function vueGen({ source, target }: GenerateOptions) {
+export async function vueGen({ source, target, exclude }: GenerateOptions) {
   group('Vue Typings Generation');
   time('vueGen');
   
@@ -338,7 +406,7 @@ export async function vueGen({ source, target }: GenerateOptions) {
   }
   
   // Get type files
-  const typeFiles = getTypeFiles(normalizedSource);
+  const typeFiles = getTypeFiles(normalizedSource, exclude);
   info(`Found ${typeFiles.length} type definition files`);
   
   if (typeFiles.length === 0) {

package/src/react.ts

@@ -2,7 +2,7 @@ import _ from "lodash";
 import fs from 'fs';
 import path from 'path';
 import {ParameterType} from "./analyzer";
-import {ClassObject, FunctionArgumentType, FunctionDeclaration} from "./declaration";
+import {ClassObject, FunctionArgumentType, FunctionDeclaration, TypeAliasObject} from "./declaration";
 import {IDLBlob} from "./IDLBlob";
 import {getPointerType, isPointerType} from "./utils";
 
@@ -53,6 +53,21 @@ function generateEventHandlerType(type: ParameterType) {
   throw new Error('Unknown event type: ' + pointerType);
 }
 
+function getEventType(type: ParameterType) {
+  if (!isPointerType(type)) {
+    return 'Event';
+  }
+  const pointerType = getPointerType(type);
+  if (pointerType === 'CustomEvent') {
+    return 'CustomEvent';
+  }
+  // For specific event types like MouseEvent, TouchEvent, etc.
+  if (pointerType.endsWith('Event')) {
+    return pointerType;
+  }
+  return 'Event';
+}
+
 function generateMethodDeclaration(method: FunctionDeclaration) {
   var methodName = method.name;
   var args = method.args.map(arg => {
@@ -69,8 +84,25 @@ function toReactEventName(name: string) {
   return _.camelCase(eventName);
 }
 
-export function generateReactComponent(blob: IDLBlob) {
-  const classObjects = blob.objects as ClassObject[];
+export function toWebFTagName(className: string): string {
+  // Special handling for WebF prefix - treat it as a single unit
+  if (className.startsWith('WebF')) {
+    // Replace WebF with webf- and then kebab-case the rest
+    const withoutPrefix = className.substring(4);
+    return 'webf-' + _.kebabCase(withoutPrefix);
+  } else if (className.startsWith('Flutter')) {
+    // Handle Flutter prefix similarly
+    const withoutPrefix = className.substring(7);
+    return 'flutter-' + _.kebabCase(withoutPrefix);
+  }
+  // Default kebab-case for other components
+  return _.kebabCase(className);
+}
+
+export function generateReactComponent(blob: IDLBlob, packageName?: string, relativeDir?: string) {
+  const classObjects = blob.objects.filter(obj => obj instanceof ClassObject) as ClassObject[];
+  const typeAliases = blob.objects.filter(obj => obj instanceof TypeAliasObject) as TypeAliasObject[];
+  
   const classObjectDictionary = Object.fromEntries(
     classObjects.map(object => {
       return [object.name, object];
@@ -89,66 +121,163 @@ export function generateReactComponent(blob: IDLBlob) {
       && !object.name.endsWith('Events');
   });
 
-  const dependencies = others.map(object => {
-    const props = object.props.map(prop => {
-      if (prop.optional) {
-        return `${prop.name}?: ${generateReturnType(prop.type)};`;
-      }
-      return `${prop.name}: ${generateReturnType(prop.type)};`;
-    }).join('\n  ');
+  // Include type aliases
+  const typeAliasDeclarations = typeAliases.map(typeAlias => {
+    return `type ${typeAlias.name} = ${typeAlias.type};`;
+  }).join('\n');
+  
+  const dependencies = [
+    typeAliasDeclarations,
+    others.map(object => {
+      const props = object.props.map(prop => {
+        if (prop.optional) {
+          return `${prop.name}?: ${generateReturnType(prop.type)};`;
+        }
+        return `${prop.name}: ${generateReturnType(prop.type)};`;
+      }).join('\n  ');
 
-    return `
+      return `
 interface ${object.name} {
   ${props}
 }`;
-  }).join('\n\n');
+    }).join('\n\n')
+  ].filter(Boolean).join('\n\n');
 
-  const componentProperties = properties.length > 0 ? properties[0] : undefined;
-  const componentEvents = events.length > 0 ? events[0] : undefined;
-  const className = (() => {
-    if (componentProperties) {
-      return componentProperties.name.replace(/Properties$/, '');
+  // 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 }>();
+  
+  // Process all Properties interfaces
+  properties.forEach(prop => {
+    const componentName = prop.name.replace(/Properties$/, '');
+    if (!componentMap.has(componentName)) {
+      componentMap.set(componentName, {});
     }
-    if (componentEvents) {
-      return componentEvents.name.replace(/Events$/, '');
+    componentMap.get(componentName)!.properties = prop;
+  });
+  
+  // Process all Events interfaces
+  events.forEach(event => {
+    const componentName = event.name.replace(/Events$/, '');
+    if (!componentMap.has(componentName)) {
+      componentMap.set(componentName, {});
     }
-    return '';
-  })();
-
-  if (!className) {
+    componentMap.get(componentName)!.events = event;
+  });
+  
+  // If we have multiple components, we need to generate a combined file
+  const componentEntries = Array.from(componentMap.entries());
+  
+  if (componentEntries.length === 0) {
     return '';
   }
+  
+  if (componentEntries.length === 1) {
+    // Single component - use existing template
+    const [className, component] = componentEntries[0];
+    
+    // Determine the import path for createWebFComponent
+    const isReactCoreUI = packageName === '@openwebf/react-core-ui';
+    let createWebFComponentImport: string;
+    
+    if (isReactCoreUI && relativeDir) {
+      // Calculate relative path from current file to utils/createWebFComponent
+      // Files are generated in src/<relativeDir>/ and need to import from src/utils/
+      const depth = relativeDir.split('/').filter(p => p).length;
+      const upPath = '../'.repeat(depth);
+      createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "${upPath}utils/createWebFComponent";`;
+    } else {
+      createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";`;
+    }
+    
+    const templateContent = readTemplate('react.component.tsx')
+      .replace(
+        'import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";',
+        createWebFComponentImport
+      );
+    
+    const content = _.template(templateContent)({
+      className: className,
+      properties: component.properties,
+      events: component.events,
+      classObjectDictionary,
+      dependencies,
+      blob,
+      toReactEventName,
+      toWebFTagName,
+      generateReturnType,
+      generateMethodDeclaration,
+      generateEventHandlerType,
+      getEventType,
+    });
 
-  // Calculate the relative path from component location to utils
-  const componentDepth = blob.relativeDir ? blob.relativeDir.split(path.sep).length : 0;
-  const utilsPath = componentDepth > 0 
-    ? '../'.repeat(componentDepth) + 'utils/createComponent'
-    : './utils/createComponent';
-
-  const content = _.template(readTemplate('react.component.tsx'))({
-    className: className,
-    properties: componentProperties,
-    events: componentEvents,
-    classObjectDictionary,
-    dependencies,
-    blob,
-    utilsPath,
-    toReactEventName,
-    generateReturnType,
-    generateMethodDeclaration,
-    generateEventHandlerType,
+    return content.split('\n').filter(str => {
+      return str.trim().length > 0;
+    }).join('\n');
+  }
+  
+  // Multiple components - generate with shared imports
+  const componentDefinitions: string[] = [];
+  
+  // Determine the import path for createWebFComponent
+  const isReactCoreUI = packageName === '@openwebf/react-core-ui';
+  let createWebFComponentImport: string;
+  
+  if (isReactCoreUI && relativeDir) {
+    // Calculate relative path from current file to utils/createWebFComponent
+    // Files are generated in src/<relativeDir>/ and need to import from src/utils/
+    const depth = relativeDir.split('/').filter(p => p).length;
+    const upPath = '../'.repeat(depth);
+    createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "${upPath}utils/createWebFComponent";`;
+  } else {
+    createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";`;
+  }
+  
+  componentEntries.forEach(([className, component]) => {
+    const content = _.template(readTemplate('react.component.tsx'))({
+      className: className,
+      properties: component.properties,
+      events: component.events,
+      classObjectDictionary,
+      dependencies: '', // Dependencies will be at the top
+      blob,
+      toReactEventName,
+      toWebFTagName,
+      generateReturnType,
+      generateMethodDeclaration,
+      generateEventHandlerType,
+      getEventType,
+    });
+    
+    // Remove the import statements from all but the first component
+    const lines = content.split('\n');
+    const withoutImports = lines.filter(line => {
+      return !line.startsWith('import ');
+    }).join('\n');
+    
+    componentDefinitions.push(withoutImports);
   });
-
-  const result = content.split('\n').filter(str => {
+  
+  // Combine with shared imports at the top
+  const result = [
+    'import React from "react";',
+    createWebFComponentImport,
+    '',
+    dependencies,
+    '',
+    ...componentDefinitions
+  ].filter(line => line !== undefined).join('\n');
+  
+  return result.split('\n').filter(str => {
     return str.trim().length > 0;
   }).join('\n');
-
-  return result;
 }
 
 export function generateReactIndex(blobs: IDLBlob[]) {
-  const components = blobs.map(blob => {
-    const classObjects = blob.objects as ClassObject[];
+  const components = blobs.flatMap(blob => {
+    const classObjects = blob.objects.filter(obj => obj instanceof ClassObject) as ClassObject[];
 
     const properties = classObjects.filter(object => {
       return object.name.endsWith('Properties');
@@ -157,25 +286,31 @@ export function generateReactIndex(blobs: IDLBlob[]) {
       return object.name.endsWith('Events');
     });
 
-    const componentProperties = properties.length > 0 ? properties[0] : undefined;
-    const componentEvents = events.length > 0 ? events[0] : undefined;
-    const className = (() => {
-      if (componentProperties) {
-        return componentProperties.name.replace(/Properties$/, '');
-      }
-      if (componentEvents) {
-        return componentEvents.name.replace(/Events$/, '');
-      }
-      return '';
-    })();
-    return {
+    // Create a map of component names
+    const componentMap = new Map<string, boolean>();
+    
+    // Add all components from Properties interfaces
+    properties.forEach(prop => {
+      const componentName = prop.name.replace(/Properties$/, '');
+      componentMap.set(componentName, true);
+    });
+    
+    // Add all components from Events interfaces
+    events.forEach(event => {
+      const componentName = event.name.replace(/Events$/, '');
+      componentMap.set(componentName, true);
+    });
+    
+    // Return an array of all components from this file
+    return Array.from(componentMap.keys()).map(className => ({
       className: className,
       fileName: blob.filename,
       relativeDir: blob.relativeDir,
-    }
-  }).filter(name => {
-    return name.className.length > 0;
+    }));
+  }).filter(component => {
+    return component.className.length > 0;
   });
+  
   const content = _.template(readTemplate('react.index.ts'))({
     components,
   });

package/templates/class.dart.tpl

@@ -33,8 +33,9 @@ abstract class <%= className %>Bindings extends WidgetElement {
       <% var attributeName = _.kebabCase(prop.name); %>
       <% var propName = _.camelCase(prop.name); %>
     attributes['<%= attributeName %>'] = ElementAttributeProperty(
-      getter: () => <%= propName %>.toString(),
-      setter: (value) => <%= generateAttributeSetter(propName, prop.type) %>
+      getter: () => <%= generateAttributeGetter(propName, prop.type, prop.optional) %>,
+      setter: (value) => <%= generateAttributeSetter(propName, prop.type) %>,
+      deleter: () => <%= generateAttributeDeleter(propName, prop.type, prop.optional) %>
     );
     <% }); %>
   }

package/templates/gitignore.tpl

@@ -1,2 +1,9 @@
-dist/
 node_modules/
+lib/
+dist/
+.DS_Store
+*.log
+*.tsbuildinfo
+.env
+.env.local
+.env.*.local

package/templates/react.component.tsx.tpl

@@ -1,53 +1,105 @@
-/*
- * Generated by TSDL, don't edit this file directly.
- */
-
-<% if (events) { %>
-import React, { EventHandler, SyntheticEvent } from "react";
-<% } %>
-import { createComponent } from "<%= utilsPath %>";
+import React from "react";
+import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";
 
 <%= dependencies %>
 
-interface <%= className %>Props {
+export interface <%= className %>Props {
   <% _.forEach(properties?.props, function(prop, index) { %>
     <% var propName = _.camelCase(prop.name); %>
+    <% var attributeName = _.kebabCase(prop.name); %>
+  /**
+   * <%= propName %> property
+    <% if (prop.optional) { %>
+   * @default undefined
+    <% } %>
+   */
     <% if (prop.optional) { %>
   <%= propName %>?: <%= generateReturnType(prop.type) %>;
     <% } else { %>
   <%= propName %>: <%= generateReturnType(prop.type) %>;
     <% } %>
+  
   <% }); %>
   <% _.forEach(events?.props, function(prop, index) { %>
     <% var propName = toReactEventName(prop.name); %>
-  <%= propName %>?: <%= generateEventHandlerType(prop.type) %>;
+  /**
+   * <%= prop.name %> event handler
+   */
+  <%= propName %>?: (event: <%= getEventType(prop.type) %>) => void;
+  
   <% }); %>
+  /**
+   * Additional CSS styles
+   */
+  style?: React.CSSProperties;
+  
+  /**
+   * Children elements
+   */
   children?: React.ReactNode;
+  
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
 }
 
-export interface <%= className %>Element extends HTMLElement {
-  <% _.forEach(properties?.props, function(prop, index) { %>
-    <% var propName = _.camelCase(prop.name); %>
-    <% if (prop.optional) { %>
-  <%= propName %>?: <%= generateReturnType(prop.type) %>;
-    <% } else { %>
-  <%= propName %>: <%= generateReturnType(prop.type) %>;
-    <% } %>
-  <% }); %>
+export interface <%= className %>Element extends WebFElementWithMethods<{
   <% _.forEach(properties?.methods, function(method, index) { %>
   <%= generateMethodDeclaration(method) %>
   <% }); %>
-}
+}> {}
 
-export const <%= className %> = createComponent({
-  tagName: '<%= _.kebabCase(className) %>',
+/**
+ * <%= className %> - WebF <%= className %> component
+ * 
+ * @example
+ * ```tsx
+ * <<%= className %>
+ *   // Add example props here
+ * >
+ *   Content
+ * </<%= className %>>
+ * ```
+ */
+export const <%= className %> = createWebFComponent<<%= className %>Element, <%= className %>Props>({
+  tagName: '<%= toWebFTagName(className) %>',
   displayName: '<%= className %>',
+  
+  // Map props to attributes
+  attributeProps: [<% _.forEach(properties?.props, function(prop, index) { %>
+    <% var propName = _.camelCase(prop.name); %>'<%= propName %>',<% }); %>
+  ],
+  
+  // Convert prop names to attribute names if needed
+  attributeMap: {
+    <% _.forEach(properties?.props, function(prop, index) { %>
+      <% var propName = _.camelCase(prop.name); %>
+      <% var attributeName = _.kebabCase(prop.name); %>
+      <% if (propName !== attributeName) { %>
+    <%= propName %>: '<%= attributeName %>',
+      <% } %>
+    <% }); %>
+  },
+  
   <% if (events) { %>
-  events: {
+  // Event handlers
+  events: [
     <% _.forEach(events?.props, function(prop, index) { %>
       <% var propName = toReactEventName(prop.name); %>
-    <%= propName %>: '<%= prop.name %>',
+    {
+      propName: '<%= propName %>',
+      eventName: '<%= prop.name %>',
+      handler: (callback) => (event) => {
+        callback((event as <%= getEventType(prop.type) %>));
+      },
+    },
     <% }); %>
-  }
+  ],
   <% } %>
-}) as React.ComponentType<<%= className %>Props & { ref?: React.Ref<HTMLUnknownElement> }>
+  
+  // Default prop values
+  defaultProps: {
+    // Add default values here
+  },
+});

package/templates/react.index.ts.tpl

@@ -5,4 +5,3 @@
 <% components.forEach(component => { %>
 export { <%= component.className %>, <%= component.className %>Element } from "./<%= component.relativeDir ? component.relativeDir + '/' : '' %><%= component.fileName %>";
 <% }); %>
-export { createComponent } from "./utils/createComponent";

package/templates/react.package.json.tpl

@@ -17,6 +17,9 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
+  "dependencies": {
+    "@openwebf/webf-react-core-ui": "^0.1.1"
+  },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",