@openwebf/webf 0.23.10 → 0.24.0

package/dist/vue.js

@@ -8,7 +8,6 @@ const lodash_1 = __importDefault(require("lodash"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const declaration_1 = require("./declaration");
-const logger_1 = require("./logger");
 const utils_1 = require("./utils");
 function readTemplate(name) {
     return fs_1.default.readFileSync(path_1.default.join(__dirname, '../templates/' + name + '.tpl'), { encoding: 'utf-8' });
@@ -50,19 +49,18 @@ function generateReturnType(type) {
             return 'any';
         if (typeof pointerType === 'string' && pointerType.startsWith('typeof ')) {
             const ident = pointerType.substring('typeof '.length).trim();
-            return `typeof __webfTypes.${ident}`;
+            return `typeof ${ident}`;
         }
         return pointerType;
     }
     if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-        const elemType = (0, utils_1.getPointerType)(type.value);
-        if (elemType === 'Type')
+        const elemType = generateReturnType(type.value);
+        if (!elemType)
             return 'any[]';
-        if (typeof elemType === 'string' && elemType.startsWith('typeof ')) {
-            const ident = elemType.substring('typeof '.length).trim();
-            return `(typeof __webfTypes.${ident})[]`;
+        if (/^[A-Za-z_][A-Za-z0-9_]*(?:\\.[A-Za-z_][A-Za-z0-9_]*)*$/.test(elemType)) {
+            return `${elemType}[]`;
         }
-        return `${elemType}[]`;
+        return `(${elemType})[]`;
     }
     switch (type.value) {
         case declaration_1.FunctionArgumentType.int:
@@ -111,125 +109,111 @@ function generateMethodDeclaration(method) {
     var returnType = generateReturnType(method.returnType);
     return `${methodName}(${args}): ${returnType};`;
 }
-function generateVueComponent(blob) {
-    const classObjects = blob.objects;
-    // Skip if no class objects
-    if (!classObjects || classObjects.length === 0) {
-        return '';
-    }
-    const classObjectDictionary = Object.fromEntries(classObjects.map(object => {
-        return [object.name, object];
-    }));
-    const properties = classObjects.filter(object => {
-        return object.name.endsWith('Properties');
+function getVueComponentSpecs(blob) {
+    const classObjects = blob.objects.filter(obj => obj instanceof declaration_1.ClassObject);
+    if (classObjects.length === 0)
+        return [];
+    const properties = classObjects.filter(object => object.name.endsWith('Properties'));
+    const events = classObjects.filter(object => object.name.endsWith('Events'));
+    const methods = classObjects.filter(object => object.name.endsWith('Methods'));
+    const componentMap = new Map();
+    properties.forEach(prop => {
+        const className = prop.name.replace(/Properties$/, '');
+        if (!componentMap.has(className))
+            componentMap.set(className, { className });
+        componentMap.get(className).properties = prop;
     });
-    const events = classObjects.filter(object => {
-        return object.name.endsWith('Events');
+    events.forEach(ev => {
+        const className = ev.name.replace(/Events$/, '');
+        if (!componentMap.has(className))
+            componentMap.set(className, { className });
+        componentMap.get(className).events = ev;
     });
-    const others = classObjects.filter(object => {
-        return !object.name.endsWith('Properties')
-            && !object.name.endsWith('Events');
+    methods.forEach(m => {
+        const className = m.name.replace(/Methods$/, '');
+        if (!componentMap.has(className))
+            componentMap.set(className, { className });
+        componentMap.get(className).methods = m;
     });
-    const dependencies = others.map(object => {
-        if (!object || !object.props || object.props.length === 0) {
-            return '';
-        }
-        const interfaceLines = [];
-        if (object.documentation && object.documentation.trim().length > 0) {
-            interfaceLines.push('/**');
-            object.documentation.split('\n').forEach(line => {
-                interfaceLines.push(` * ${line}`);
+    return Array.from(componentMap.values())
+        .filter(spec => spec.className.trim().length > 0)
+        .sort((a, b) => a.className.localeCompare(b.className));
+}
+function renderSupportingInterface(object) {
+    const hasProps = !!object.props && object.props.length > 0;
+    const hasMethods = !!object.methods && object.methods.length > 0;
+    if (!hasProps && !hasMethods) {
+        return '';
+    }
+    const interfaceLines = [];
+    if (object.documentation && object.documentation.trim().length > 0) {
+        interfaceLines.push('/**');
+        object.documentation.split('\n').forEach(line => {
+            interfaceLines.push(` * ${line}`);
+        });
+        interfaceLines.push(' */');
+    }
+    interfaceLines.push(`export interface ${object.name} {`);
+    const propLines = (object.props || []).map(prop => {
+        const lines = [];
+        if (prop.documentation && prop.documentation.trim().length > 0) {
+            lines.push('  /**');
+            prop.documentation.split('\n').forEach(line => {
+                lines.push(`   * ${line}`);
             });
-            interfaceLines.push(' */');
+            lines.push('   */');
         }
-        interfaceLines.push(`interface ${object.name} {`);
-        const propLines = object.props.map(prop => {
-            const lines = [];
-            if (prop.documentation && prop.documentation.trim().length > 0) {
-                lines.push('  /**');
-                prop.documentation.split('\n').forEach(line => {
-                    lines.push(`   * ${line}`);
-                });
-                lines.push('   */');
-            }
-            const optionalToken = prop.optional ? '?' : '';
-            lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
-            return lines.join('\n');
+        const optionalToken = prop.optional ? '?' : '';
+        lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
+        return lines.join('\n');
+    });
+    interfaceLines.push(propLines.join('\n'));
+    if (object.methods && object.methods.length > 0) {
+        const methodLines = object.methods.map(method => {
+            return `  ${generateMethodDeclaration(method)}`;
         });
-        interfaceLines.push(propLines.join('\n'));
-        interfaceLines.push('}');
-        return interfaceLines.join('\n');
-    }).filter(dep => dep.trim() !== '').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$/, '');
-        }
-        if (componentEvents) {
-            return componentEvents.name.replace(/Events$/, '');
-        }
-        return '';
-    })();
-    if (!className) {
-        return '';
+        interfaceLines.push(methodLines.join('\n'));
     }
-    const content = lodash_1.default.template(readTemplate('vue.component.partial'))({
-        className: className,
-        properties: componentProperties,
-        events: componentEvents,
-        classObjectDictionary,
-        dependencies,
-        blob,
-        generateReturnType,
-        generateMethodDeclaration,
-        generateEventHandlerType,
-    });
-    const result = content.split('\n').filter(str => {
-        return str.trim().length > 0;
-    }).join('\n');
-    return result;
+    interfaceLines.push('}');
+    return interfaceLines.join('\n');
 }
-function toVueTagName(className) {
+function toVueTagName(rawClassName) {
+    const className = rawClassName.trim();
     if (className.startsWith('WebF')) {
         const withoutPrefix = className.substring(4);
-        return 'web-f-' + lodash_1.default.kebabCase(withoutPrefix);
+        const suffix = lodash_1.default.kebabCase(withoutPrefix);
+        return suffix.length > 0 ? 'webf-' + suffix : 'webf';
     }
-    else if (className.startsWith('Flutter')) {
+    if (className.startsWith('Flutter')) {
         const withoutPrefix = className.substring(7);
-        return 'flutter-' + lodash_1.default.kebabCase(withoutPrefix);
+        const suffix = lodash_1.default.kebabCase(withoutPrefix);
+        return suffix.length > 0 ? 'flutter-' + suffix : 'flutter';
     }
-    return lodash_1.default.kebabCase(className);
+    const kebab = lodash_1.default.kebabCase(className);
+    return kebab.replace(/^web-f-/, 'webf-');
 }
 function generateVueTypings(blobs) {
-    const componentNames = blobs.map(blob => {
-        const classObjects = blob.objects;
-        const properties = classObjects.filter(object => {
-            return object.name.endsWith('Properties');
-        });
-        const events = classObjects.filter(object => {
-            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 className;
-    }).filter(name => {
-        return name.length > 0;
+    const componentSpecMap = new Map();
+    blobs
+        .flatMap(blob => getVueComponentSpecs(blob))
+        .forEach(spec => {
+        if (!componentSpecMap.has(spec.className))
+            componentSpecMap.set(spec.className, spec);
     });
-    const components = blobs.map(blob => {
-        return generateVueComponent(blob);
-    }).filter(component => {
-        return component.length > 0;
-    }).join('\n\n');
+    const componentSpecs = Array.from(componentSpecMap.values()).sort((a, b) => a.className.localeCompare(b.className));
+    const componentNames = componentSpecs.map(spec => spec.className);
+    const components = componentSpecs.map(spec => {
+        const content = lodash_1.default.template(readTemplate('vue.component.partial'))({
+            className: spec.className,
+            properties: spec.properties,
+            events: spec.events,
+            methods: spec.methods,
+            generateReturnType,
+            generateMethodDeclaration,
+            generateEventHandlerType,
+        });
+        return content.split('\n').filter(str => str.trim().length > 0).join('\n');
+    }).filter(Boolean).join('\n\n');
     // Collect declare consts across blobs and render as exported ambient declarations
     const consts = blobs
         .flatMap(blob => blob.objects)
@@ -241,34 +225,55 @@ function generateVueTypings(blobs) {
             uniqueConsts.set(c.name, c);
     });
     const constDeclarations = Array.from(uniqueConsts.values())
+        .sort((a, b) => a.name.localeCompare(b.name))
         .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 declaration_1.EnumObject);
-    const enumDeclarations = enums.map(e => {
+    const uniqueEnums = new Map();
+    enums.forEach(e => {
+        if (!uniqueEnums.has(e.name))
+            uniqueEnums.set(e.name, e);
+    });
+    const enumDeclarations = Array.from(uniqueEnums.values())
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .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');
-    // Compute relative import path from the generated typings file (index.d.ts at dist root)
-    // to the aggregated React types module (src/types.ts) when present.
-    let typesImportPath = './src/types';
-    try {
-        if (blobs.length > 0) {
-            const distRoot = blobs[0].dist;
-            const typingsDir = distRoot; // index.d.ts is written directly under distRoot
-            const typesFilePath = path_1.default.join(distRoot, 'src', 'types');
-            const rel = path_1.default.relative(typingsDir, typesFilePath).replace(/\\/g, '/');
-            typesImportPath = rel.startsWith('.') ? rel : `./${rel}`;
-        }
-    }
-    catch (_a) {
-        typesImportPath = './src/types';
-    }
-    // Always import the types namespace to support typeof references
-    const typesImport = `import * as __webfTypes from '${typesImportPath}';`;
-    (0, logger_1.debug)(`[vue] Generating typings; importing types from ${typesImportPath}`);
+    })
+        .join('\n');
+    // Collect type aliases across blobs and render as exported declarations.
+    const typeAliases = blobs
+        .flatMap(blob => blob.objects)
+        .filter(obj => obj instanceof declaration_1.TypeAliasObject);
+    const uniqueTypeAliases = new Map();
+    typeAliases.forEach(t => {
+        if (!uniqueTypeAliases.has(t.name))
+            uniqueTypeAliases.set(t.name, t);
+    });
+    const typeAliasDeclarations = Array.from(uniqueTypeAliases.values())
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(t => `export type ${t.name} = ${t.type};`)
+        .join('\n');
+    // Collect supporting interfaces (non-component interfaces) so referenced types exist.
+    const supportingInterfaces = blobs
+        .flatMap(blob => blob.objects)
+        .filter(obj => obj instanceof declaration_1.ClassObject);
+    const supporting = supportingInterfaces.filter(obj => {
+        return !obj.name.endsWith('Properties') && !obj.name.endsWith('Events') && !obj.name.endsWith('Methods');
+    });
+    const uniqueSupporting = new Map();
+    supporting.forEach(obj => {
+        if (!uniqueSupporting.has(obj.name))
+            uniqueSupporting.set(obj.name, obj);
+    });
+    const supportingDeclarations = Array.from(uniqueSupporting.values())
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(obj => renderSupportingInterface(obj))
+        .filter(Boolean)
+        .join('\n\n');
     // Build mapping of template tag names to class names for GlobalComponents
     const componentMetas = componentNames.map(className => ({
         className,
@@ -284,7 +289,8 @@ function generateVueTypings(blobs) {
         components,
         consts: constDeclarations,
         enums: enumDeclarations,
-        typesImport,
+        typeAliases: typeAliasDeclarations,
+        dependencies: supportingDeclarations,
     });
     return content.split('\n').filter(str => {
         return str.trim().length > 0;

package/package.json

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

package/src/commands.ts

@@ -4,6 +4,7 @@ import path from 'path';
 import os from 'os';
 import { dartGen, reactGen, vueGen } from './generator';
 import { generateModuleArtifacts } from './module';
+import { getPackageTypesFileFromDir, isPackageTypesReady, readJsonFile } from './peerDeps';
 import { globSync } from 'glob';
 import _ from 'lodash';
 import inquirer from 'inquirer';
@@ -237,6 +238,40 @@ function readFlutterPackageMetadata(packagePath: string): FlutterPackageMetadata
   }
 }
 
+function copyReadmeToPackageRoot(params: {
+  sourceRoot: string;
+  targetRoot: string;
+}): { copied: boolean; sourcePath?: string; targetPath: string } {
+  const { sourceRoot, targetRoot } = params;
+  const targetPath = path.join(targetRoot, 'README.md');
+
+  if (fs.existsSync(targetPath)) {
+    return { copied: false, targetPath };
+  }
+
+  const candidateNames = ['README.md', 'Readme.md', 'readme.md'];
+  let sourcePath: string | null = null;
+  for (const candidate of candidateNames) {
+    const abs = path.join(sourceRoot, candidate);
+    if (fs.existsSync(abs)) {
+      sourcePath = abs;
+      break;
+    }
+  }
+
+  if (!sourcePath) {
+    return { copied: false, targetPath };
+  }
+
+  try {
+    const content = fs.readFileSync(sourcePath, 'utf-8');
+    writeFileIfChanged(targetPath, content);
+    return { copied: true, sourcePath, targetPath };
+  } catch {
+    return { copied: false, targetPath };
+  }
+}
+
 // Copy markdown docs that match .d.ts basenames from source to the built dist folder,
 // and generate an aggregated README.md in the dist directory.
 async function copyMarkdownDocsToDist(params: {
@@ -441,7 +476,8 @@ function createCommand(target: string, options: { framework: string; packageName
       // Leave merge to the codegen step which appends exports safely
     }
 
-    spawnSync(NPM, ['install'], {
+    // Ensure devDependencies are installed even if the user's shell has NODE_ENV=production.
+    spawnSync(NPM, ['install', '--production=false'], {
       cwd: target,
       stdio: 'inherit'
     });
@@ -463,12 +499,8 @@ function createCommand(target: string, options: { framework: string; packageName
     const gitignoreContent = _.template(gitignore)({});
     writeFileIfChanged(gitignorePath, gitignoreContent);
 
-    spawnSync(NPM, ['install', '@openwebf/webf-enterprise-typings'], {
-      cwd: target,
-      stdio: 'inherit'
-    });
-
-    spawnSync(NPM, ['install', 'vue', '-D'], {
+    // Ensure devDependencies are installed even if the user's shell has NODE_ENV=production.
+    spawnSync(NPM, ['install', '--production=false'], {
       cwd: target,
       stdio: 'inherit'
     });
@@ -781,6 +813,17 @@ async function generateCommand(distPath: string, options: GenerateOptions): Prom
   // Auto-initialize typings in the output directory if needed
   ensureInitialized(resolvedDistPath);
 
+  // Copy README.md from the source Flutter package into the npm package root (so `npm publish` includes it).
+  if (options.flutterPackageSrc) {
+    const { copied } = copyReadmeToPackageRoot({
+      sourceRoot: options.flutterPackageSrc,
+      targetRoot: resolvedDistPath,
+    });
+    if (copied) {
+      console.log('📄 Copied README.md to package root');
+    }
+  }
+
   console.log(`\nGenerating ${framework} code from ${options.flutterPackageSrc}...`);
 
   await dartGen({
@@ -1179,6 +1222,101 @@ async function buildPackage(packagePath: string): Promise<void> {
   const packageName = packageJson.name;
   const packageVersion = packageJson.version;
 
+  function getInstalledPackageJsonPath(pkgName: string): string {
+    const parts = pkgName.split('/');
+    return path.join(packagePath, 'node_modules', ...parts, 'package.json');
+  }
+
+  function getInstalledPackageDir(pkgName: string): string {
+    const parts = pkgName.split('/');
+    return path.join(packagePath, 'node_modules', ...parts);
+  }
+
+  function findUp(startDir: string, relativePathToFind: string): string | null {
+    let dir = path.resolve(startDir);
+    while (true) {
+      const candidate = path.join(dir, relativePathToFind);
+      if (fs.existsSync(candidate)) return candidate;
+      const parent = path.dirname(dir);
+      if (parent === dir) return null;
+      dir = parent;
+    }
+  }
+
+  function ensurePeerDependencyAvailableForBuild(peerName: string): void {
+    const installedPkgJson = getInstalledPackageJsonPath(peerName);
+    if (fs.existsSync(installedPkgJson)) return;
+
+    const peerRange = packageJson.peerDependencies?.[peerName];
+    const localMap: Record<string, string> = {
+      '@openwebf/react-core-ui': path.join('packages', 'react-core-ui'),
+      '@openwebf/vue-core-ui': path.join('packages', 'vue-core-ui'),
+    };
+
+    let installSpec: string | null = null;
+
+    const localRel = localMap[peerName];
+    if (localRel) {
+      const localPath = findUp(process.cwd(), localRel);
+      if (localPath) {
+        if (!isPackageTypesReady(localPath)) {
+          const localPkgJsonPath = path.join(localPath, 'package.json');
+          if (fs.existsSync(localPkgJsonPath)) {
+            const localPkgJson = readJsonFile(localPkgJsonPath);
+            if (localPkgJson.scripts?.build) {
+              if (process.env.WEBF_CODEGEN_BUILD_LOCAL_PEERS !== '1') {
+                console.warn(
+                  `\n⚠️  Local ${peerName} found at ${localPath} but type declarations are missing; falling back to registry install.`
+                );
+              } else {
+                console.log(
+                  `\n🔧 Local ${peerName} found at ${localPath} but build artifacts are missing; building it for DTS...`
+                );
+                const buildLocalResult = spawnSync(NPM, ['run', 'build'], {
+                  cwd: localPath,
+                  stdio: 'inherit'
+                });
+                if (buildLocalResult.status === 0) {
+                  if (isPackageTypesReady(localPath)) {
+                    installSpec = localPath;
+                  } else {
+                    console.warn(
+                      `\n⚠️  Built local ${peerName} but type declarations are still missing; falling back to registry install.`
+                    );
+                  }
+                } else {
+                  console.warn(`\n⚠️  Failed to build local ${peerName}; falling back to registry install.`);
+                }
+              }
+            }
+          }
+        } else {
+          installSpec = localPath;
+        }
+      }
+    }
+
+    if (!installSpec) {
+      installSpec = peerRange ? `${peerName}@${peerRange}` : peerName;
+    }
+
+    console.log(`\n📦 Installing peer dependency for build: ${peerName}...`);
+    const installResult = spawnSync(NPM, ['install', '--no-save', installSpec], {
+      cwd: packagePath,
+      stdio: 'inherit'
+    });
+    if (installResult.status !== 0) {
+      throw new Error(`Failed to install peer dependency for build: ${peerName}`);
+    }
+
+    const installedTypesFile = getPackageTypesFileFromDir(getInstalledPackageDir(peerName));
+    if (installedTypesFile && !fs.existsSync(installedTypesFile)) {
+      throw new Error(
+        `Peer dependency ${peerName} was installed but type declarations were not found at ${installedTypesFile}`
+      );
+    }
+  }
+
   // Check if node_modules exists
   const nodeModulesPath = path.join(packagePath, 'node_modules');
   if (!fs.existsSync(nodeModulesPath)) {
@@ -1204,6 +1342,14 @@ async function buildPackage(packagePath: string): Promise<void> {
 
   // Check if package has a build script
   if (packageJson.scripts?.build) {
+    // DTS build needs peer deps present locally to resolve types (even though they are not bundled).
+    if (packageJson.peerDependencies?.['@openwebf/react-core-ui']) {
+      ensurePeerDependencyAvailableForBuild('@openwebf/react-core-ui');
+    }
+    if (packageJson.peerDependencies?.['@openwebf/vue-core-ui']) {
+      ensurePeerDependencyAvailableForBuild('@openwebf/vue-core-ui');
+    }
+
     console.log(`\nBuilding ${packageName}@${packageVersion}...`);
     const buildResult = spawnSync(NPM, ['run', 'build'], {
       cwd: packagePath,

package/src/generator.ts

@@ -407,13 +407,9 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
       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.ts
+  // Always generate src/types.ts so generated components can safely import it.
+  // When there are no standalone declarations, emit an empty module (`export {};`).
   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[]);
@@ -426,40 +422,40 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
     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 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 constDecl = Array.from(constMap.values())
+      .map(c => `export declare const ${c.name}: ${c.type};`)
+      .join('\n');
+    const enumDecl = enums
+      .map(e => `export 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 typesContent = [
+      '/* Generated by WebF CLI - aggregated type declarations */',
+      hasAny ? typeAliasDecl : '',
+      hasAny ? constDecl : '',
+      hasAny ? enumDecl : '',
+      hasAny ? '' : 'export {};',
+      ''
+    ].filter(Boolean).join('\n');
 
-      const typesPath = path.join(normalizedTarget, 'src', 'types.ts');
-      if (writeFileIfChanged(typesPath, typesContent)) {
-        filesChanged++;
-        debug(`Generated: src/types.ts`);
-        try {
-          const constNames = Array.from(constMap.keys());
-          const aliasNames = Array.from(typeAliasMap.keys());
-          const enumNames = enums.map(e => e.name);
-          debug(`[react] Aggregated types - consts: ${constNames.join(', ') || '(none)'}; typeAliases: ${aliasNames.join(', ') || '(none)'}; enums: ${enumNames.join(', ') || '(none)'}\n`);
-          debug(`[react] src/types.ts preview:\n` + typesContent.split('\n').slice(0, 20).join('\n'));
-        } catch {}
-      }
+    const typesPath = path.join(normalizedTarget, 'src', 'types.ts');
+    if (writeFileIfChanged(typesPath, typesContent)) {
+      filesChanged++;
+      debug(`Generated: src/types.ts`);
+      try {
+        const constNames = Array.from(constMap.keys());
+        const aliasNames = Array.from(typeAliasMap.keys());
+        const enumNames = enums.map(e => e.name);
+        debug(`[react] Aggregated types - consts: ${constNames.join(', ') || '(none)'}; typeAliases: ${aliasNames.join(', ') || '(none)'}; enums: ${enumNames.join(', ') || '(none)'}\n`);
+        debug(`[react] src/types.ts preview:\n` + typesContent.split('\n').slice(0, 20).join('\n'));
+      } catch {}
+    }
 
-      // Ensure index.ts re-exports these types so consumers get them on import.
-      const indexFilePath = path.join(normalizedTarget, 'src', 'index.ts');
+    // Only re-export from index.ts when there are actual declarations to surface.
+    if (hasAny) {
       try {
         let current = '';
         if (fs.existsSync(indexFilePath)) {
@@ -478,6 +474,11 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
   } catch (e) {
     warn('Failed to generate aggregated React types');
   }
+
+  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.');
 }
 
 export async function vueGen({ source, target, exclude }: GenerateOptions) {