@openwebf/webf 0.22.11 → 0.22.13

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,12 +287,33 @@ function reactGen(_a) {
                 (0, logger_1.error)(`Error generating React component for ${blob.filename}`, err);
             }
         }));
-        // Generate index file (always regenerate to avoid duplicates)
+        // 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);
-        if (writeFileIfChanged(indexFilePath, newExports)) {
-            filesChanged++;
-            (0, logger_1.debug)(`Generated: index.ts`);
+        let shouldWriteIndex = true;
+        if (fs_1.default.existsSync(indexFilePath)) {
+            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.`);
+                }
+            }
+            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}`);
+            }
+        }
+        if (shouldWriteIndex) {
+            if (writeFileIfChanged(indexFilePath, newExports)) {
+                filesChanged++;
+                (0, logger_1.debug)(`Generated: index.ts`);
+            }
         }
         (0, logger_1.timeEnd)('reactGen');
         (0, logger_1.success)(`React code generation completed. ${filesChanged} files changed.`);

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.11",
+  "version": "0.22.13",
   "description": "Command line tools for WebF",
   "main": "index.js",
   "bin": {

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,13 +321,34 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
     }
   });
   
-  // Generate index file (always regenerate to avoid duplicates)
+  // 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);
-  
-  if (writeFileIfChanged(indexFilePath, newExports)) {
-    filesChanged++;
-    debug(`Generated: index.ts`);
+
+  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}`);
+    }
+  }
+
+  if (shouldWriteIndex) {
+    if (writeFileIfChanged(indexFilePath, newExports)) {
+      filesChanged++;
+      debug(`Generated: index.ts`);
+    }
   }
   
   timeEnd('reactGen');

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();
     });
   });
-});
+});