@openwebf/webf 0.22.13 → 0.23.2

package/src/dart.ts

@@ -83,6 +83,13 @@ ${enumValues};
 }
 
 function generateReturnType(type: ParameterType, enumName?: string) {
+  // Handle union types first (e.g., 'left' | 'center' | 'right')
+  // so we don't incorrectly treat string literal unions as pointer types.
+  if (Array.isArray(type.value)) {
+    // If we have an enum name, use it; otherwise fall back to String
+    return enumName || 'String';
+  }
+
   if (isPointerType(type)) {
     const pointerType = getPointerType(type);
     return pointerType;
@@ -91,12 +98,6 @@ function generateReturnType(type: ParameterType, enumName?: string) {
     return `${getPointerType(type.value)}[]`;
   }
   
-  // Handle union types (e.g., 'left' | 'center' | 'right')
-  if (Array.isArray(type.value)) {
-    // If we have an enum name, use it; otherwise fall back to String
-    return enumName || 'String';
-  }
-  
   // Handle when type.value is a ParameterType object (nested type)
   if (typeof type.value === 'object' && !Array.isArray(type.value) && type.value !== null) {
     // This might be a nested ParameterType, recurse
@@ -278,7 +279,7 @@ interface ${object.name} {
   
   // Generate enums for union types
   const enums: { name: string; definition: string }[] = [];
-  const enumMap: Map<string, string> = new Map(); // prop name -> enum name
+  const enumMap: Map<string, string> = new Map(); // camelCase prop name -> enum name
   
   if (componentProperties) {
     for (const prop of componentProperties.props) {
@@ -290,7 +291,8 @@ interface ${object.name} {
             name: enumName,
             definition: generateDartEnum(enumName, values)
           });
-          enumMap.set(prop.name, enumName);
+          // Store by camelCase prop name to match template usage
+          enumMap.set(_.camelCase(prop.name), enumName);
         }
       }
     }

package/src/declaration.ts

@@ -89,3 +89,18 @@ export class TypeAliasObject {
   name: string;
   type: string;
 }
+
+export class ConstObject {
+  name: string;
+  type: string;
+}
+
+export class EnumMemberObject {
+  name: string;
+  initializer?: string;
+}
+
+export class EnumObject {
+  name: string;
+  members: EnumMemberObject[] = [];
+}

package/src/generator.ts

@@ -5,12 +5,13 @@ import _ from 'lodash';
 import { glob } from 'glob';
 import yaml from 'yaml';
 import { IDLBlob } from './IDLBlob';
-import { ClassObject } from './declaration';
+import { ClassObject, ConstObject, EnumObject, TypeAliasObject } from './declaration';
 import { analyzer, ParameterType, clearCaches } from './analyzer';
 import { generateDartClass } from './dart';
 import { generateReactComponent, generateReactIndex } from './react';
 import { generateVueTypings } from './vue';
 import { logger, debug, info, success, warn, error, group, progress, time, timeEnd } from './logger';
+import ts from 'typescript';
 
 // Cache for file content to avoid redundant reads
 const fileContentCache = new Map<string, string>();
@@ -204,13 +205,17 @@ export async function dartGen({ source, target, command, exclude }: GenerateOpti
         fs.mkdirSync(outputDir, { recursive: true });
       }
       
-      // Generate Dart file
+      // Generate Dart file (skip if empty)
       const genFilePath = path.join(outputDir, _.snakeCase(blob.filename));
       const fullPath = genFilePath + '_bindings_generated.dart';
       
-      if (writeFileIfChanged(fullPath, result)) {
-        filesChanged++;
-        debug(`Generated: ${path.basename(fullPath)}`);
+      if (result && result.trim().length > 0) {
+        if (writeFileIfChanged(fullPath, result)) {
+          filesChanged++;
+          debug(`Generated: ${path.basename(fullPath)}`);
+        }
+      } else {
+        debug(`Skipped ${path.basename(fullPath)} - empty bindings`);
       }
       
       // Copy the original .d.ts file to the output directory
@@ -224,13 +229,8 @@ export async function dartGen({ source, target, command, exclude }: GenerateOpti
     }
   });
   
-  // Generate index.d.ts file with references to all .d.ts files
-  const indexDtsContent = generateTypeScriptIndex(blobs, normalizedTarget);
-  const indexDtsPath = path.join(normalizedTarget, 'index.d.ts');
-  if (writeFileIfChanged(indexDtsPath, indexDtsContent)) {
-    filesChanged++;
-    debug('Generated: index.d.ts');
-  }
+  // Note: We no longer generate a root index.d.ts for Dart codegen
+  // as it is not necessary for the codegen workflow.
   
   timeEnd('dartGen');
   success(`Dart code generation completed. ${filesChanged} files changed.`);
@@ -321,40 +321,155 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
     }
   });
   
-  // Generate index file
-  // Avoid overriding a user-managed index.ts. Only write when:
-  // - index.ts does not exist, or
-  // - it contains the auto-generated marker from our template
+  // Generate/merge index file
   const indexFilePath = path.join(normalizedTarget, 'src', 'index.ts');
+  // Always build the full index content string for downstream tooling/logging
   const newExports = generateReactIndex(blobs);
 
-  let shouldWriteIndex = true;
-  if (fs.existsSync(indexFilePath)) {
-    try {
-      const existing = fs.readFileSync(indexFilePath, 'utf-8');
-      const isAutoGenerated = existing.includes('Generated by TSDL');
-      if (!isAutoGenerated) {
-        shouldWriteIndex = false;
-        warn(`Found existing user-managed index.ts at ${indexFilePath}; skipping overwrite.`);
-      }
-    } catch (err) {
-      // If we cannot read the file for some reason, be conservative and skip overwriting
-      shouldWriteIndex = false;
-      warn(`Unable to read existing index.ts; skipping overwrite: ${indexFilePath}`);
-    }
+  // Build desired export map: moduleSpecifier -> Set of names
+  const desiredExports = new Map<string, Set<string>>();
+  const components = blobs.flatMap(blob => {
+    const classObjects = blob.objects.filter(obj => obj instanceof ClassObject) as ClassObject[];
+    const properties = classObjects.filter(object => object.name.endsWith('Properties'));
+    const events = classObjects.filter(object => object.name.endsWith('Events'));
+    const componentMap = new Map<string, boolean>();
+    properties.forEach(prop => componentMap.set(prop.name.replace(/Properties$/, ''), true));
+    events.forEach(evt => componentMap.set(evt.name.replace(/Events$/, ''), true));
+    return Array.from(componentMap.keys()).map(className => ({
+      className,
+      fileName: blob.filename,
+      relativeDir: blob.relativeDir,
+    }));
+  });
+
+  // Deduplicate by className
+  const unique = new Map<string, { className: string; fileName: string; relativeDir: string }>();
+  for (const c of components) {
+    if (!unique.has(c.className)) unique.set(c.className, c);
+  }
+  for (const { className, fileName, relativeDir } of unique.values()) {
+    const spec = `./${relativeDir ? `${relativeDir}/` : ''}${fileName}`;
+    if (!desiredExports.has(spec)) desiredExports.set(spec, new Set());
+    const set = desiredExports.get(spec)!;
+    set.add(className);
+    set.add(`${className}Element`);
   }
 
-  if (shouldWriteIndex) {
+  if (!fs.existsSync(indexFilePath)) {
+    // No index.ts -> generate fresh file from template
     if (writeFileIfChanged(indexFilePath, newExports)) {
       filesChanged++;
       debug(`Generated: index.ts`);
     }
+  } else {
+    // Merge into existing index.ts without removing user code
+    try {
+      const existing = fs.readFileSync(indexFilePath, 'utf-8');
+      const sourceFile = ts.createSourceFile(indexFilePath, existing, ts.ScriptTarget.ES2020, true, ts.ScriptKind.TS);
+
+      // Track which names already exported per module
+      for (const stmt of sourceFile.statements) {
+        if (ts.isExportDeclaration(stmt) && stmt.exportClause && ts.isNamedExports(stmt.exportClause)) {
+          const moduleSpecifier = stmt.moduleSpecifier && ts.isStringLiteral(stmt.moduleSpecifier)
+            ? stmt.moduleSpecifier.text
+            : undefined;
+          if (!moduleSpecifier) continue;
+          const desired = desiredExports.get(moduleSpecifier);
+          if (!desired) continue;
+          for (const el of stmt.exportClause.elements) {
+            const name = el.name.getText(sourceFile);
+            if (desired.has(name)) desired.delete(name);
+          }
+        }
+      }
+
+      // Prepare new export lines for any remaining names
+      const lines: string[] = [];
+      for (const [spec, names] of desiredExports) {
+        const missing = Array.from(names);
+        if (missing.length === 0) continue;
+        const specEscaped = spec.replace(/\\/g, '/');
+        lines.push(`export { ${missing.join(', ')} } from "${specEscaped}";`);
+      }
+
+      if (lines.length > 0) {
+        const appended = (existing.endsWith('\n') ? '' : '\n') + lines.join('\n') + '\n';
+        if (writeFileIfChanged(indexFilePath, existing + appended)) {
+          filesChanged++;
+          debug(`Merged exports into existing index.ts`);
+        }
+      } else {
+        debug(`index.ts is up to date; no merge needed.`);
+      }
+    } catch (err) {
+      warn(`Failed to merge into existing index.ts. Skipping modifications: ${indexFilePath}`);
+    }
   }
   
   timeEnd('reactGen');
   success(`React code generation completed. ${filesChanged} files changed.`);
   info(`Output directory: ${normalizedTarget}`);
   info('You can now import these components in your React project.');
+
+  // Aggregate standalone type declarations (consts/enums/type aliases) into a single types.d.ts
+  try {
+    const consts = blobs.flatMap(b => b.objects.filter(o => o instanceof ConstObject) as ConstObject[]);
+    const enums = blobs.flatMap(b => b.objects.filter(o => o instanceof EnumObject) as EnumObject[]);
+    const typeAliases = blobs.flatMap(b => b.objects.filter(o => o instanceof TypeAliasObject) as TypeAliasObject[]);
+
+    // Deduplicate by name
+    const constMap = new Map<string, ConstObject>();
+    consts.forEach(c => { if (!constMap.has(c.name)) constMap.set(c.name, c); });
+    const typeAliasMap = new Map<string, TypeAliasObject>();
+    typeAliases.forEach(t => { if (!typeAliasMap.has(t.name)) typeAliasMap.set(t.name, t); });
+
+    const hasAny = constMap.size > 0 || enums.length > 0 || typeAliasMap.size > 0;
+    if (hasAny) {
+      const constDecl = Array.from(constMap.values())
+        .map(c => `export declare const ${c.name}: ${c.type};`)
+        .join('\n');
+      const enumDecl = enums
+        .map(e => `export declare enum ${e.name} { ${e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ')} }`)
+        .join('\n');
+      const typeAliasDecl = Array.from(typeAliasMap.values())
+        .map(t => `export type ${t.name} = ${t.type};`)
+        .join('\n');
+
+      const typesContent = [
+        '/* Generated by WebF CLI - aggregated type declarations */',
+        typeAliasDecl,
+        constDecl,
+        enumDecl,
+        ''
+      ].filter(Boolean).join('\n');
+
+      const typesPath = path.join(normalizedTarget, 'src', 'types.d.ts');
+      if (writeFileIfChanged(typesPath, typesContent)) {
+        filesChanged++;
+        debug(`Generated: src/types.d.ts`);
+      }
+
+      // Try to help TypeScript pick up additional declarations by adding a reference comment.
+      // This avoids bundler resolution errors from importing a .d.ts file.
+      const indexFilePath = path.join(normalizedTarget, 'src', 'index.ts');
+      try {
+        if (fs.existsSync(indexFilePath)) {
+          let current = fs.readFileSync(indexFilePath, 'utf-8');
+          const refLine = `/// <reference path="./types.d.ts" />`;
+          if (!current.includes(refLine)) {
+            // Place the reference at the very top, before any code
+            const updated = `${refLine}\n${current}`;
+            if (writeFileIfChanged(indexFilePath, updated)) {
+              filesChanged++;
+              debug(`Updated: src/index.ts with reference to types.d.ts`);
+            }
+          }
+        }
+      } catch {}
+    }
+  } catch (e) {
+    warn('Failed to generate aggregated React types.d.ts');
+  }
 }
 
 export async function vueGen({ source, target, exclude }: GenerateOptions) {

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, TypeAliasObject} from "./declaration";
+import {ClassObject, FunctionArgumentType, FunctionDeclaration, TypeAliasObject, ConstObject, EnumObject} from "./declaration";
 import {IDLBlob} from "./IDLBlob";
 import {getPointerType, isPointerType, isUnionType} from "./utils";
 
@@ -125,6 +125,8 @@ export function toWebFTagName(className: string): string {
 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 constObjects = blob.objects.filter(obj => obj instanceof ConstObject) as ConstObject[];
+  const enumObjects = blob.objects.filter(obj => obj instanceof EnumObject) as EnumObject[];
   
   const classObjectDictionary = Object.fromEntries(
     classObjects.map(object => {
@@ -153,8 +155,19 @@ export function generateReactComponent(blob: IDLBlob, packageName?: string, rela
     return `type ${typeAlias.name} = ${typeAlias.type};`;
   }).join('\n');
   
+  // Include declare const values as ambient exports for type usage (e.g., unique symbol branding)
+  const constDeclarations = constObjects.map(c => `export declare const ${c.name}: ${c.type};`).join('\n');
+  
+  // Include enums
+  const enumDeclarations = enumObjects.map(e => {
+    const members = e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ');
+    return `export declare enum ${e.name} { ${members} }`;
+  }).join('\n');
+  
   const dependencies = [
     typeAliasDeclarations,
+    constDeclarations,
+    enumDeclarations,
     // Include Methods interfaces as dependencies
     methods.map(object => {
       const methodDeclarations = object.methods.map(method => {

package/src/vue.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, ConstObject, EnumObject} from "./declaration";
 import {IDLBlob} from "./IDLBlob";
 import {getPointerType, isPointerType} from "./utils";
 
@@ -145,6 +145,17 @@ interface ${object.name} {
   return result;
 }
 
+function toVueTagName(className: string): string {
+  if (className.startsWith('WebF')) {
+    const withoutPrefix = className.substring(4);
+    return 'web-f-' + _.kebabCase(withoutPrefix);
+  } else if (className.startsWith('Flutter')) {
+    const withoutPrefix = className.substring(7);
+    return 'flutter-' + _.kebabCase(withoutPrefix);
+  }
+  return _.kebabCase(className);
+}
+
 export function generateVueTypings(blobs: IDLBlob[]) {
   const componentNames = blobs.map(blob => {
     const classObjects = blob.objects as ClassObject[];
@@ -177,13 +188,47 @@ export function generateVueTypings(blobs: IDLBlob[]) {
     return component.length > 0;
   }).join('\n\n');
 
+  // Collect declare consts across blobs and render as exported ambient declarations
+  const consts = blobs
+    .flatMap(blob => blob.objects)
+    .filter(obj => obj instanceof ConstObject) as ConstObject[];
+
+  // Deduplicate by name keeping first occurrence
+  const uniqueConsts = new Map<string, ConstObject>();
+  consts.forEach(c => {
+    if (!uniqueConsts.has(c.name)) uniqueConsts.set(c.name, c);
+  });
+
+  const constDeclarations = Array.from(uniqueConsts.values())
+    .map(c => `export declare const ${c.name}: ${c.type};`)
+    .join('\n');
+
+  // Collect declare enums across blobs
+  const enums = blobs
+    .flatMap(blob => blob.objects)
+    .filter(obj => obj instanceof EnumObject) as EnumObject[];
+
+  const enumDeclarations = enums.map(e => {
+    const members = e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ');
+    return `export declare enum ${e.name} { ${members} }`;
+  }).join('\n');
+
+  // Build mapping of template tag names to class names for GlobalComponents
+  const componentMetas = componentNames.map(className => ({
+    className,
+    tagName: toVueTagName(className),
+  }));
+
   const content = _.template(readTemplate('vue.components.d.ts'), {
     interpolate: /<%=([\s\S]+?)%>/g,
     evaluate: /<%([\s\S]+?)%>/g,
     escape: /<%-([\s\S]+?)%>/g
   })({
     componentNames,
+    componentMetas,
     components,
+    consts: constDeclarations,
+    enums: enumDeclarations,
   });
 
   return content.split('\n').filter(str => {

package/templates/class.dart.tpl

@@ -1,6 +1,6 @@
 // AUTO GENERATED FILE, DO NOT EDIT.
 //
-// Generated by <%= command %>
+// Generated by `webf codegen`
 
 // ignore_for_file: avoid_unused_constructor_parameters
 // ignore_for_file: non_constant_identifier_names

package/templates/react.package.json.tpl

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
+    "picomatch": "^4.0.2",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   }

package/templates/vue.components.d.ts.tpl

@@ -19,6 +19,9 @@ type VueEventListeners<T extends EventMap> = {
   [K in keyof T as `on${Capitalize<string & K>}`]?: (event: T[K]) => any
 }
 
+<%= consts %>
+<%= enums %>
+
 type DefineCustomElement<
   ElementType,
   Events extends EventMap = {},
@@ -44,10 +47,10 @@ type DefineCustomElement<
 
 declare module 'vue' {
   interface GlobalComponents {
-    <% componentNames.forEach(name => { %>
-    '<%= name %>': DefineCustomElement<
-      <%= name %>Props,
-      <%= name %>Events
+    <% componentMetas.forEach(comp => { %>
+    '<%= comp.tagName %>': DefineCustomElement<
+      <%= comp.className %>Props,
+      <%= comp.className %>Events
     >
     <% }) %>
   }

package/test/react-consts.test.ts

@@ -0,0 +1,30 @@
+import { generateReactComponent } from '../src/react';
+import { IDLBlob } from '../src/IDLBlob';
+import { ConstObject, EnumObject, EnumMemberObject } from '../src/declaration';
+
+describe('React generator - declare const support', () => {
+  it('emits export declare const for constants from typings', () => {
+    const blob = new IDLBlob('/test/source', '/test/target', 'ConstOnly', 'test', '');
+    const constObj = new ConstObject();
+    constObj.name = 'WEBF_CUPERTINO_SYMBOL';
+    constObj.type = 'unique symbol';
+
+    blob.objects = [constObj as any];
+
+    const output = generateReactComponent(blob);
+    expect(output).toContain('export declare const WEBF_CUPERTINO_SYMBOL: unique symbol;');
+  });
+
+  it('emits export declare enum for enums from typings', () => {
+    const blob = new IDLBlob('/test/source', '/test/target', 'EnumOnly', 'test', '');
+    const eo = new EnumObject();
+    eo.name = 'CupertinoColors';
+    const m1 = new EnumMemberObject(); m1.name = "'red'"; m1.initializer = '0x0f';
+    const m2 = new EnumMemberObject(); m2.name = "'bbb'"; m2.initializer = '0x00';
+    eo.members = [m1, m2];
+    blob.objects = [eo as any];
+
+    const output = generateReactComponent(blob);
+    expect(output).toContain("export declare enum CupertinoColors { 'red' = 0x0f, 'bbb' = 0x00 }");
+  });
+});

package/test/vue.test.ts

@@ -1,6 +1,6 @@
 import { generateVueTypings } from '../src/vue';
 import { IDLBlob } from '../src/IDLBlob';
-import { ClassObject, ClassObjectKind, PropsDeclaration } from '../src/declaration';
+import { ClassObject, ClassObjectKind, PropsDeclaration, ConstObject } from '../src/declaration';
 
 describe('Vue Generator', () => {
   describe('generateVueTypings', () => {
@@ -153,5 +153,37 @@ describe('Vue Generator', () => {
       expect(result).toContain("'class'?: string;");
       expect(result).toContain("'style'?: string | Record<string, any>;");
     });
+
+    it('should include declare const variables as exported declarations', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'ConstOnly', 'test', '');
+
+      const constObj = new ConstObject();
+      constObj.name = 'WEBF_UNIQUE';
+      constObj.type = 'unique symbol';
+
+      blob.objects = [constObj as any];
+
+      const result = generateVueTypings([blob]);
+
+      expect(result).toContain('export declare const WEBF_UNIQUE: unique symbol;');
+    });
+
+    it('should include declare enum as exported declaration', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'EnumOnly', 'test', '');
+      // Build a minimal faux EnumObject via analyzer by simulating ast is heavy; create a shape
+      // We'll reuse analyzer classes by importing EnumObject is cumbersome in test; instead
+      // craft an object literal compatible with instanceof check by constructing real class.
+      const { EnumObject, EnumMemberObject } = require('../src/declaration');
+      const e = new EnumObject();
+      e.name = 'CupertinoColors';
+      const m1 = new EnumMemberObject(); m1.name = "'red'"; m1.initializer = '0x0f';
+      const m2 = new EnumMemberObject(); m2.name = "'bbb'"; m2.initializer = '0x00';
+      e.members = [m1, m2];
+
+      blob.objects = [e as any];
+
+      const result = generateVueTypings([blob]);
+      expect(result).toContain("export declare enum CupertinoColors { 'red' = 0x0f, 'bbb' = 0x00 }");
+    });
   });
-});
+});

package/tsconfig.json

@@ -20,7 +20,10 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "declaration": false,
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "typeRoots": [
+      "./node_modules/@types"
+    ]
   },
   "include": [
     "src/**/*.ts"