@openwebf/webf 0.22.10 → 0.22.13

package/dist/analyzer.js

@@ -66,11 +66,17 @@ const TYPE_REFERENCE_MAP = {
 };
 function analyzer(blob, definedPropertyCollector, unionTypeCollector) {
     try {
-        // Check cache first
-        let sourceFile = sourceFileCache.get(blob.source);
-        if (!sourceFile) {
+        // Check cache first - consider both file path and content
+        const cacheEntry = sourceFileCache.get(blob.source);
+        let sourceFile;
+        if (cacheEntry && cacheEntry.content === blob.raw) {
+            // Cache hit with same content
+            sourceFile = cacheEntry.sourceFile;
+        }
+        else {
+            // Cache miss or content changed - parse and update cache
             sourceFile = typescript_1.default.createSourceFile(blob.source, blob.raw, typescript_1.ScriptTarget.ES2020);
-            sourceFileCache.set(blob.source, sourceFile);
+            sourceFileCache.set(blob.source, { content: blob.raw, sourceFile });
         }
         blob.objects = sourceFile.statements
             .map(statement => {
@@ -292,6 +298,8 @@ function getParameterBaseType(type, mode) {
                 if (mode)
                     mode.staticMethod = true;
                 return handleGenericWrapper(typeReference, mode);
+            case 'CustomEvent':
+                return handleCustomEventType(typeReference);
             default:
                 if (identifier.includes('SupportAsync')) {
                     return handleSupportAsyncType(identifier, typeReference, mode);
@@ -344,6 +352,92 @@ function handleGenericWrapper(typeReference, mode) {
     const argument = typeReference.typeArguments[0];
     return getParameterBaseType(argument, mode);
 }
+function handleCustomEventType(typeReference) {
+    // Handle CustomEvent<T> by returning the full type with generic parameter
+    if (!typeReference.typeArguments || !typeReference.typeArguments[0]) {
+        return 'CustomEvent';
+    }
+    const argument = typeReference.typeArguments[0];
+    let genericType;
+    if (typescript_1.default.isTypeReferenceNode(argument) && typescript_1.default.isIdentifier(argument.typeName)) {
+        const typeName = argument.typeName.text;
+        // Check if it's a mapped type reference like 'int' or 'double'
+        const mappedType = TYPE_REFERENCE_MAP[typeName];
+        if (mappedType !== undefined) {
+            switch (mappedType) {
+                case declaration_1.FunctionArgumentType.boolean:
+                    genericType = 'boolean';
+                    break;
+                case declaration_1.FunctionArgumentType.dom_string:
+                    genericType = 'string';
+                    break;
+                case declaration_1.FunctionArgumentType.double:
+                case declaration_1.FunctionArgumentType.int:
+                    genericType = 'number';
+                    break;
+                case declaration_1.FunctionArgumentType.any:
+                    genericType = 'any';
+                    break;
+                case declaration_1.FunctionArgumentType.void:
+                    genericType = 'void';
+                    break;
+                case declaration_1.FunctionArgumentType.function:
+                    genericType = 'Function';
+                    break;
+                case declaration_1.FunctionArgumentType.promise:
+                    genericType = 'Promise<any>';
+                    break;
+                default:
+                    genericType = typeName;
+            }
+        }
+        else {
+            // For other type references, use the type name directly
+            genericType = typeName;
+        }
+    }
+    else if (typescript_1.default.isLiteralTypeNode(argument) && typescript_1.default.isStringLiteral(argument.literal)) {
+        genericType = argument.literal.text;
+    }
+    else {
+        // Handle basic types (boolean, string, number, etc.)
+        const basicType = BASIC_TYPE_MAP[argument.kind];
+        if (basicType !== undefined) {
+            switch (basicType) {
+                case declaration_1.FunctionArgumentType.boolean:
+                    genericType = 'boolean';
+                    break;
+                case declaration_1.FunctionArgumentType.dom_string:
+                    genericType = 'string';
+                    break;
+                case declaration_1.FunctionArgumentType.double:
+                case declaration_1.FunctionArgumentType.int:
+                    genericType = 'number';
+                    break;
+                case declaration_1.FunctionArgumentType.any:
+                    genericType = 'any';
+                    break;
+                case declaration_1.FunctionArgumentType.void:
+                    genericType = 'void';
+                    break;
+                case declaration_1.FunctionArgumentType.null:
+                    genericType = 'null';
+                    break;
+                case declaration_1.FunctionArgumentType.undefined:
+                    genericType = 'undefined';
+                    break;
+                default:
+                    genericType = 'any';
+            }
+        }
+        else {
+            // For truly complex types, fallback to 'any' to avoid errors
+            console.warn('Complex generic type in CustomEvent, using any');
+            genericType = 'any';
+        }
+    }
+    return `CustomEvent<${genericType}>`;
+}
 function handleSupportAsyncType(identifier, typeReference, mode) {
     if (mode) {
         mode.supportAsync = true;

package/dist/commands.js

@@ -260,7 +260,7 @@ function createCommand(target, options) {
             cwd: target,
             stdio: 'inherit'
         });
-        (0, child_process_1.spawnSync)(NPM, ['install', '@types/vue', '-D'], {
+        (0, child_process_1.spawnSync)(NPM, ['install', 'vue', '-D'], {
             cwd: target,
             stdio: 'inherit'
         });

package/dist/generator.js

@@ -287,60 +287,29 @@ function reactGen(_a) {
                 (0, logger_1.error)(`Error generating React component for ${blob.filename}`, err);
             }
         }));
-        // Generate or update index file
+        // 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
         const indexFilePath = path_1.default.join(normalizedTarget, 'src', 'index.ts');
         const newExports = (0, react_1.generateReactIndex)(blobs);
+        let shouldWriteIndex = true;
         if (fs_1.default.existsSync(indexFilePath)) {
-            // Read existing index file
-            const existingContent = fs_1.default.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 = [];
-            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++;
-                    (0, logger_1.debug)(`Updated: index.ts (added ${missingExports.length} exports)`);
+            try {
+                const existing = fs_1.default.readFileSync(indexFilePath, 'utf-8');
+                const isAutoGenerated = existing.includes('Generated by TSDL');
+                if (!isAutoGenerated) {
+                    shouldWriteIndex = false;
+                    (0, logger_1.warn)(`Found existing user-managed index.ts at ${indexFilePath}; skipping overwrite.`);
                 }
             }
-            else {
-                (0, logger_1.debug)(`Skipped: index.ts (all exports already exist)`);
+            catch (err) {
+                // If we cannot read the file for some reason, be conservative and skip overwriting
+                shouldWriteIndex = false;
+                (0, logger_1.warn)(`Unable to read existing index.ts; skipping overwrite: ${indexFilePath}`);
             }
         }
-        else {
-            // File doesn't exist, create it
+        if (shouldWriteIndex) {
             if (writeFileIfChanged(indexFilePath, newExports)) {
                 filesChanged++;
                 (0, logger_1.debug)(`Generated: index.ts`);

package/dist/react.js

@@ -63,6 +63,10 @@ function getEventType(type) {
         return 'Event';
     }
     const pointerType = (0, utils_1.getPointerType)(type);
+    // Handle CustomEvent with generic parameter
+    if (pointerType.startsWith('CustomEvent<') && pointerType.endsWith('>')) {
+        return pointerType;
+    }
     if (pointerType === 'CustomEvent') {
         return 'CustomEvent';
     }
@@ -319,8 +323,15 @@ function generateReactIndex(blobs) {
     }).filter(component => {
         return component.className.length > 0;
     });
+    // Deduplicate components by className, keeping the first occurrence
+    const deduplicatedComponents = new Map();
+    components.forEach(component => {
+        if (!deduplicatedComponents.has(component.className)) {
+            deduplicatedComponents.set(component.className, component);
+        }
+    });
     const content = lodash_1.default.template(readTemplate('react.index.ts'))({
-        components,
+        components: Array.from(deduplicatedComponents.values()),
     });
     return content.split('\n').filter(str => {
         return str.trim().length > 0;

package/dist/vue.js

@@ -51,6 +51,10 @@ function generateEventHandlerType(type) {
     if (pointerType === 'CustomEvent') {
         return 'CustomEvent';
     }
+    // Handle generic types like CustomEvent<T>
+    if (pointerType.startsWith('CustomEvent<')) {
+        return pointerType;
+    }
     throw new Error('Unknown event type: ' + pointerType);
 }
 function generateMethodDeclaration(method) {
@@ -65,6 +69,10 @@ function generateMethodDeclaration(method) {
 }
 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];
     }));
@@ -79,6 +87,9 @@ function generateVueComponent(blob) {
             && !object.name.endsWith('Events');
     });
     const dependencies = others.map(object => {
+        if (!object || !object.props) {
+            return '';
+        }
         const props = object.props.map(prop => {
             if (prop.optional) {
                 return `${prop.name}?: ${generateReturnType(prop.type)};`;
@@ -89,7 +100,7 @@ function generateVueComponent(blob) {
 interface ${object.name} {
   ${props}
 }`;
-    }).join('\n\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 = (() => {
@@ -149,7 +160,11 @@ function generateVueTypings(blobs) {
     }).filter(component => {
         return component.length > 0;
     }).join('\n\n');
-    const content = lodash_1.default.template(readTemplate('vue.components.d.ts'))({
+    const content = lodash_1.default.template(readTemplate('vue.components.d.ts'), {
+        interpolate: /<%=([\s\S]+?)%>/g,
+        evaluate: /<%([\s\S]+?)%>/g,
+        escape: /<%-([\s\S]+?)%>/g
+    })({
         componentNames,
         components,
     });

package/package.json

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

package/src/analyzer.ts

@@ -26,7 +26,7 @@ export interface UnionTypeCollector {
 }
 
 // Cache for parsed source files to avoid re-parsing
-const sourceFileCache = new Map<string, ts.SourceFile>();
+const sourceFileCache = new Map<string, { content: string; sourceFile: ts.SourceFile }>();
 
 // Cache for type conversions to avoid redundant processing
 const typeConversionCache = new Map<string, ParameterType>();
@@ -56,11 +56,17 @@ const TYPE_REFERENCE_MAP: Record<string, FunctionArgumentType> = {
 
 export function analyzer(blob: IDLBlob, definedPropertyCollector: DefinedPropertyCollector, unionTypeCollector: UnionTypeCollector) {
   try {
-    // Check cache first
-    let sourceFile = sourceFileCache.get(blob.source);
-    if (!sourceFile) {
+    // Check cache first - consider both file path and content
+    const cacheEntry = sourceFileCache.get(blob.source);
+    let sourceFile: ts.SourceFile;
+    
+    if (cacheEntry && cacheEntry.content === blob.raw) {
+      // Cache hit with same content
+      sourceFile = cacheEntry.sourceFile;
+    } else {
+      // Cache miss or content changed - parse and update cache
       sourceFile = ts.createSourceFile(blob.source, blob.raw, ScriptTarget.ES2020);
-      sourceFileCache.set(blob.source, sourceFile);
+      sourceFileCache.set(blob.source, { content: blob.raw, sourceFile });
     }
     
     blob.objects = sourceFile.statements
@@ -324,6 +330,9 @@ function getParameterBaseType(type: ts.TypeNode, mode?: ParameterMode): Paramete
         if (mode) mode.staticMethod = true;
         return handleGenericWrapper(typeReference, mode);
         
+      case 'CustomEvent':
+        return handleCustomEventType(typeReference);
+        
       default:
         if (identifier.includes('SupportAsync')) {
           return handleSupportAsyncType(identifier, typeReference, mode);
@@ -386,6 +395,93 @@ function handleGenericWrapper(typeReference: ts.TypeReferenceNode, mode?: Parame
   return getParameterBaseType(argument, mode);
 }
 
+function handleCustomEventType(typeReference: ts.TypeReferenceNode): ParameterBaseType {
+  // Handle CustomEvent<T> by returning the full type with generic parameter
+  if (!typeReference.typeArguments || !typeReference.typeArguments[0]) {
+    return 'CustomEvent';
+  }
+  
+  const argument = typeReference.typeArguments[0];
+  let genericType: string;
+  
+  if (ts.isTypeReferenceNode(argument) && ts.isIdentifier(argument.typeName)) {
+    const typeName = argument.typeName.text;
+    
+    // Check if it's a mapped type reference like 'int' or 'double'
+    const mappedType = TYPE_REFERENCE_MAP[typeName];
+    if (mappedType !== undefined) {
+      switch (mappedType) {
+        case FunctionArgumentType.boolean:
+          genericType = 'boolean';
+          break;
+        case FunctionArgumentType.dom_string:
+          genericType = 'string';
+          break;
+        case FunctionArgumentType.double:
+        case FunctionArgumentType.int:
+          genericType = 'number';
+          break;
+        case FunctionArgumentType.any:
+          genericType = 'any';
+          break;
+        case FunctionArgumentType.void:
+          genericType = 'void';
+          break;
+        case FunctionArgumentType.function:
+          genericType = 'Function';
+          break;
+        case FunctionArgumentType.promise:
+          genericType = 'Promise<any>';
+          break;
+        default:
+          genericType = typeName;
+      }
+    } else {
+      // For other type references, use the type name directly
+      genericType = typeName;
+    }
+  } else if (ts.isLiteralTypeNode(argument) && ts.isStringLiteral(argument.literal)) {
+    genericType = argument.literal.text;
+  } else {
+    // Handle basic types (boolean, string, number, etc.)
+    const basicType = BASIC_TYPE_MAP[argument.kind];
+    if (basicType !== undefined) {
+      switch (basicType) {
+        case FunctionArgumentType.boolean:
+          genericType = 'boolean';
+          break;
+        case FunctionArgumentType.dom_string:
+          genericType = 'string';
+          break;
+        case FunctionArgumentType.double:
+        case FunctionArgumentType.int:
+          genericType = 'number';
+          break;
+        case FunctionArgumentType.any:
+          genericType = 'any';
+          break;
+        case FunctionArgumentType.void:
+          genericType = 'void';
+          break;
+        case FunctionArgumentType.null:
+          genericType = 'null';
+          break;
+        case FunctionArgumentType.undefined:
+          genericType = 'undefined';
+          break;
+        default:
+          genericType = 'any';
+      }
+    } else {
+      // For truly complex types, fallback to 'any' to avoid errors
+      console.warn('Complex generic type in CustomEvent, using any');
+      genericType = 'any';
+    }
+  }
+  
+  return `CustomEvent<${genericType}>`;
+}
+
 function handleSupportAsyncType(identifier: string, typeReference: ts.TypeReferenceNode, mode?: ParameterMode): ParameterBaseType {
   if (mode) {
     mode.supportAsync = true;

package/src/commands.ts

@@ -332,7 +332,7 @@ function createCommand(target: string, options: { framework: string; packageName
       stdio: 'inherit'
     });
 
-    spawnSync(NPM, ['install', '@types/vue', '-D'], {
+    spawnSync(NPM, ['install', 'vue', '-D'], {
       cwd: target,
       stdio: 'inherit'
     });

package/src/generator.ts

@@ -321,64 +321,30 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
     }
   });
   
-  // Generate or update index file
+  // 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
   const indexFilePath = path.join(normalizedTarget, 'src', 'index.ts');
   const newExports = generateReactIndex(blobs);
-  
+
+  let shouldWriteIndex = true;
   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)`);
+    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.`);
       }
-    } else {
-      debug(`Skipped: index.ts (all exports already exist)`);
+    } 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}`);
     }
-  } else {
-    // File doesn't exist, create it
+  }
+
+  if (shouldWriteIndex) {
     if (writeFileIfChanged(indexFilePath, newExports)) {
       filesChanged++;
       debug(`Generated: index.ts`);

package/src/react.ts

@@ -61,6 +61,12 @@ function getEventType(type: ParameterType) {
     return 'Event';
   }
   const pointerType = getPointerType(type);
+  
+  // Handle CustomEvent with generic parameter
+  if (pointerType.startsWith('CustomEvent<') && pointerType.endsWith('>')) {
+    return pointerType;
+  }
+  
   if (pointerType === 'CustomEvent') {
     return 'CustomEvent';
   }
@@ -360,8 +366,16 @@ export function generateReactIndex(blobs: IDLBlob[]) {
     return component.className.length > 0;
   });
   
+  // Deduplicate components by className, keeping the first occurrence
+  const deduplicatedComponents = new Map<string, { className: string; fileName: string; relativeDir: string }>();
+  components.forEach(component => {
+    if (!deduplicatedComponents.has(component.className)) {
+      deduplicatedComponents.set(component.className, component);
+    }
+  });
+  
   const content = _.template(readTemplate('react.index.ts'))({
-    components,
+    components: Array.from(deduplicatedComponents.values()),
   });
 
   return content.split('\n').filter(str => {

package/src/vue.ts

@@ -50,6 +50,10 @@ function generateEventHandlerType(type: ParameterType) {
   if (pointerType === 'CustomEvent') {
     return 'CustomEvent';
   }
+  // Handle generic types like CustomEvent<T>
+  if (pointerType.startsWith('CustomEvent<')) {
+    return pointerType;
+  }
   throw new Error('Unknown event type: ' + pointerType);
 }
 
@@ -66,6 +70,11 @@ function generateMethodDeclaration(method: FunctionDeclaration) {
 
 function generateVueComponent(blob: IDLBlob) {
   const classObjects = blob.objects as ClassObject[];
+  
+  // Skip if no class objects
+  if (!classObjects || classObjects.length === 0) {
+    return '';
+  }
   const classObjectDictionary = Object.fromEntries(
     classObjects.map(object => {
       return [object.name, object];
@@ -85,6 +94,9 @@ function generateVueComponent(blob: IDLBlob) {
   });
 
   const dependencies = others.map(object => {
+    if (!object || !object.props) {
+      return '';
+    }
     const props = object.props.map(prop => {
       if (prop.optional) {
         return `${prop.name}?: ${generateReturnType(prop.type)};`;
@@ -96,7 +108,7 @@ function generateVueComponent(blob: IDLBlob) {
 interface ${object.name} {
   ${props}
 }`;
-  }).join('\n\n');
+  }).filter(dep => dep.trim() !== '').join('\n\n');
 
   const componentProperties = properties.length > 0 ? properties[0] : undefined;
   const componentEvents = events.length > 0 ? events[0] : undefined;
@@ -165,7 +177,11 @@ export function generateVueTypings(blobs: IDLBlob[]) {
     return component.length > 0;
   }).join('\n\n');
 
-  const content = _.template(readTemplate('vue.components.d.ts'))({
+  const content = _.template(readTemplate('vue.components.d.ts'), {
+    interpolate: /<%=([\s\S]+?)%>/g,
+    evaluate: /<%([\s\S]+?)%>/g,
+    escape: /<%-([\s\S]+?)%>/g
+  })({
     componentNames,
     components,
   });

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

@@ -14,18 +14,23 @@ type VueEmit<T extends EventMap> = EmitFn<{
   [K in keyof T]: (event: T[K]) => void
 }>
 
+// Vue 3 event listener properties for template usage
+type VueEventListeners<T extends EventMap> = {
+  [K in keyof T as `on${Capitalize<string & K>}`]?: (event: T[K]) => any
+}
+
 type DefineCustomElement<
   ElementType,
   Events extends EventMap = {},
   SelectedAttributes extends keyof ElementType = keyof ElementType
-> = new () => ElementType & {
+> = new () => ElementType & VueEventListeners<Events> & {
   // Use $props to define the properties exposed to template type checking. Vue
   // specifically reads prop definitions from the `$props` type. Note that we
   // combine the element's props with the global HTML props and Vue's special
   // props.
   /** @deprecated Do not use the $props property on a Custom Element ref,
     this is for template prop types only. */
-  $props: Partial<Pick<ElementType, SelectedAttributes>> & PublicProps
+  $props: Partial<Pick<ElementType, SelectedAttributes>> & PublicProps & VueEventListeners<Events>
 
   // Use $emit to specifically define event types. Vue specifically reads event
   // types from the `$emit` type. Note that `$emit` expects a particular format
@@ -40,7 +45,7 @@ type DefineCustomElement<
 declare module 'vue' {
   interface GlobalComponents {
     <% componentNames.forEach(name => { %>
-    '<%= _.kebabCase(name) %>': DefineCustomElement<
+    '<%= name %>': DefineCustomElement<
       <%= name %>Props,
       <%= name %>Events
     >

package/templates/vue.package.json.tpl

@@ -7,5 +7,11 @@
   "files": ["index.d.ts"],
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.0.0"
+  }
 }

package/test/commands.test.ts

@@ -284,10 +284,10 @@ describe('Commands', () => {
           { cwd: target, stdio: 'inherit' }
         );
 
-        // Should install Vue types as dev dependency
+        // Should install Vue 3 as dev dependency
         expect(mockSpawnSync).toHaveBeenCalledWith(
           expect.stringMatching(/npm(\.cmd)?/),
-          ['install', '@types/vue', '-D'],
+          ['install', 'vue', '-D'],
           { cwd: target, stdio: 'inherit' }
         );
       });

package/test/generator.test.ts

@@ -336,6 +336,12 @@ describe('Generator', () => {
         'export { Test, TestElement } from "./lib/src/html/test";\n' +
         'export { Component, ComponentElement } from "./lib/src/html/component";'
       );
+      // Ensure index.ts does not exist so it will be generated
+      mockFs.existsSync.mockImplementation((p: any) => {
+        const s = p.toString();
+        if (s.includes(path.join('/test/target', 'src', 'index.ts'))) return false;
+        return true;
+      });
       
       await reactGen({
         source: '/test/source',
@@ -357,6 +363,29 @@ describe('Generator', () => {
       expect(indexCall![1]).toContain('export { Test, TestElement }');
       expect(indexCall![1]).toContain('export { Component, ComponentElement }');
     });
+
+    it('should not overwrite user-managed index.ts', async () => {
+      // Existing index.ts that does not contain auto-generated marker
+      mockFs.existsSync.mockImplementation((p: any) => {
+        const s = p.toString();
+        if (s.includes(path.join('/test/target', 'src', 'index.ts'))) return true;
+        return true;
+      });
+      mockFs.readFileSync.mockImplementation((p: any) => {
+        const s = p.toString();
+        if (s.includes(path.join('/test/target', 'src', 'index.ts'))) return '// custom index file';
+        return 'test content';
+      });
+
+      await reactGen({
+        source: '/test/source',
+        target: '/test/target',
+        command: 'test command'
+      });
+
+      const indexWrite = mockFs.writeFileSync.mock.calls.find(call => call[0].toString().includes('index.ts'));
+      expect(indexWrite).toBeUndefined();
+    });
   });
 
   describe('vueGen', () => {
@@ -478,4 +507,4 @@ describe('Generator', () => {
       expect(mockAnalyzer.clearCaches).toHaveBeenCalled();
     });
   });
-});
+});