@openwebf/webf 0.23.7 → 0.24.0

package/test/commands.test.ts

@@ -2,18 +2,20 @@
 jest.mock('fs');
 jest.mock('child_process');
 jest.mock('../src/generator');
-jest.mock('glob');
+jest.mock('glob', () => ({
+  globSync: jest.fn(),
+}));
 jest.mock('inquirer');
 jest.mock('yaml');
 
 import fs from 'fs';
 import path from 'path';
 import { spawnSync } from 'child_process';
-import { glob } from 'glob';
+import { globSync } from 'glob';
 
 const mockFs = fs as jest.Mocked<typeof fs>;
 const mockSpawnSync = spawnSync as jest.MockedFunction<typeof spawnSync>;
-const mockGlob = glob as jest.Mocked<typeof glob>;
+const mockGlobSync = globSync as jest.MockedFunction<typeof globSync>;
 
 // Set up default mocks before importing commands
 mockFs.readFileSync = jest.fn().mockImplementation((filePath: any) => {
@@ -87,7 +89,7 @@ describe('Commands', () => {
     });
     // Default mock for readdirSync to avoid undefined
     mockFs.readdirSync.mockReturnValue([] as any);
-    mockGlob.globSync.mockReturnValue([]);
+    mockGlobSync.mockReturnValue([]);
   });
 
 
@@ -224,12 +226,12 @@ describe('Commands', () => {
         // Mock that required files don't exist
         mockFs.existsSync.mockReturnValue(false);
         
-        await generateCommand(target, options);
+      await generateCommand(target, options);
 
         expect(mockSpawnSync).toHaveBeenCalledWith(
           expect.stringMatching(/npm(\.cmd)?/),
-          ['install', '--omit=peer'],
-          { cwd: target, stdio: 'inherit' }
+          ['install', '--production=false'],
+          expect.objectContaining({ cwd: target, stdio: 'inherit' })
         );
       });
     });
@@ -281,18 +283,11 @@ describe('Commands', () => {
         
         await generateCommand(target, options);
 
-        // Should install WebF typings
-        expect(mockSpawnSync).toHaveBeenCalledWith(
-          expect.stringMatching(/npm(\.cmd)?/),
-          ['install', '@openwebf/webf-enterprise-typings'],
-          { cwd: target, stdio: 'inherit' }
-        );
-
-        // Should install Vue 3 as dev dependency
+        // Should install dependencies (including devDependencies) from package.json
         expect(mockSpawnSync).toHaveBeenCalledWith(
           expect.stringMatching(/npm(\.cmd)?/),
-          ['install', 'vue', '-D'],
-          { cwd: target, stdio: 'inherit' }
+          ['install', '--production=false'],
+          expect.objectContaining({ cwd: target, stdio: 'inherit' })
         );
       });
     });
@@ -461,6 +456,78 @@ describe('Commands', () => {
       }));
     });
 
+    it('should copy Flutter README.md into generated React package root', async () => {
+      const options = {
+        flutterPackageSrc: '/flutter/src',
+        framework: 'react',
+        packageName: 'test-package'
+      };
+
+      // Mock TypeScript validation
+      mockTypeScriptValidation('/flutter/src');
+
+      const originalExistsSync = mockFs.existsSync as jest.Mock;
+      mockFs.existsSync = jest.fn().mockImplementation((filePath: any) => {
+        const pathStr = filePath.toString();
+        if (pathStr === '/flutter/src/README.md') return true;
+        if (pathStr === path.join(path.resolve('/dist'), 'README.md')) return false;
+        return originalExistsSync(filePath);
+      });
+
+      const originalReadFileSync = mockFs.readFileSync as jest.Mock;
+      mockFs.readFileSync = jest.fn().mockImplementation((filePath: any, encoding?: any) => {
+        const pathStr = filePath.toString();
+        if (pathStr === '/flutter/src/README.md') {
+          return '# Flutter README\n\nHello';
+        }
+        return originalReadFileSync(filePath, encoding);
+      });
+
+      await generateCommand('/dist', options);
+
+      expect(mockFs.writeFileSync).toHaveBeenCalledWith(
+        path.join(path.resolve('/dist'), 'README.md'),
+        '# Flutter README\n\nHello',
+        'utf-8'
+      );
+    });
+
+    it('should copy Flutter README.md into generated Vue package root', async () => {
+      const options = {
+        flutterPackageSrc: '/flutter/src',
+        framework: 'vue',
+        packageName: 'test-package'
+      };
+
+      // Mock TypeScript validation
+      mockTypeScriptValidation('/flutter/src');
+
+      const originalExistsSync = mockFs.existsSync as jest.Mock;
+      mockFs.existsSync = jest.fn().mockImplementation((filePath: any) => {
+        const pathStr = filePath.toString();
+        if (pathStr === '/flutter/src/README.md') return true;
+        if (pathStr === path.join(path.resolve('/dist'), 'README.md')) return false;
+        return originalExistsSync(filePath);
+      });
+
+      const originalReadFileSync = mockFs.readFileSync as jest.Mock;
+      mockFs.readFileSync = jest.fn().mockImplementation((filePath: any, encoding?: any) => {
+        const pathStr = filePath.toString();
+        if (pathStr === '/flutter/src/README.md') {
+          return '# Flutter README\n\nHello';
+        }
+        return originalReadFileSync(filePath, encoding);
+      });
+
+      await generateCommand('/dist', options);
+
+      expect(mockFs.writeFileSync).toHaveBeenCalledWith(
+        path.join(path.resolve('/dist'), 'README.md'),
+        '# Flutter README\n\nHello',
+        'utf-8'
+      );
+    });
+
     it('should generate an aggregated README in dist from markdown docs', async () => {
       const options = {
         flutterPackageSrc: '/flutter/src',
@@ -471,8 +538,8 @@ describe('Commands', () => {
       // Mock TypeScript validation
       mockTypeScriptValidation('/flutter/src');
 
-       // Mock .d.ts files so copyMarkdownDocsToDist sees at least one entry
-      mockGlob.globSync.mockReturnValue(['lib/src/alert.d.ts'] as any);
+      // Mock .d.ts files so copyMarkdownDocsToDist sees at least one entry
+      mockGlobSync.mockReturnValue(['lib/src/alert.d.ts'] as any);
 
       const originalExistsSync = mockFs.existsSync as jest.Mock;
       mockFs.existsSync = jest.fn().mockImplementation((filePath: any) => {

package/test/generator.test.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { glob } from 'glob';
+import { globSync } from 'glob';
 import { dartGen, reactGen, vueGen, clearAllCaches } from '../src/generator';
 import * as analyzer from '../src/analyzer';
 import * as dartGenerator from '../src/dart';
@@ -10,7 +10,9 @@ import { ClassObject } from '../src/declaration';
 
 // Mock dependencies
 jest.mock('fs');
-jest.mock('glob');
+jest.mock('glob', () => ({
+  globSync: jest.fn(),
+}));
 jest.mock('../src/analyzer');
 jest.mock('../src/dart');
 jest.mock('../src/react');
@@ -47,7 +49,7 @@ jest.mock('../src/logger', () => ({
 }));
 
 const mockFs = fs as jest.Mocked<typeof fs>;
-const mockGlob = glob as jest.Mocked<typeof glob>;
+const mockGlobSync = globSync as jest.MockedFunction<typeof globSync>;
 const mockAnalyzer = analyzer as jest.Mocked<typeof analyzer>;
 const mockDartGenerator = dartGenerator as jest.Mocked<typeof dartGenerator>;
 const mockReactGenerator = reactGenerator as jest.Mocked<typeof reactGenerator>;
@@ -65,7 +67,7 @@ describe('Generator', () => {
     mockFs.writeFileSync.mockImplementation(() => undefined);
     mockFs.mkdirSync.mockImplementation(() => undefined);
     
-    mockGlob.globSync.mockReturnValue(['test.d.ts', 'component.d.ts']);
+    mockGlobSync.mockReturnValue(['test.d.ts', 'component.d.ts']);
     
     mockAnalyzer.analyzer.mockImplementation(() => undefined);
     mockAnalyzer.clearCaches.mockImplementation(() => undefined);
@@ -84,7 +86,7 @@ describe('Generator', () => {
         command: 'test command'
       });
 
-      expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
+      expect(mockGlobSync).toHaveBeenCalledWith('**/*.d.ts', {
         cwd: '/test/source',
         ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**']
       });
@@ -101,14 +103,14 @@ describe('Generator', () => {
         command: 'test command'
       });
 
-      expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
+      expect(mockGlobSync).toHaveBeenCalledWith('**/*.d.ts', {
         cwd: expect.stringContaining('relative/source'),
         ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**']
       });
     });
 
     it('should filter out global.d.ts files', async () => {
-      mockGlob.globSync.mockReturnValue(['test.d.ts', 'global.d.ts', 'component.d.ts']);
+      mockGlobSync.mockReturnValue(['test.d.ts', 'global.d.ts', 'component.d.ts']);
       
       await dartGen({
         source: '/test/source',
@@ -122,7 +124,7 @@ describe('Generator', () => {
     });
 
     it('should handle empty type files', async () => {
-      mockGlob.globSync.mockReturnValue([]);
+      mockGlobSync.mockReturnValue([]);
       
       await dartGen({
         source: '/test/source',
@@ -135,7 +137,7 @@ describe('Generator', () => {
     });
 
     it('should continue processing if one file fails', async () => {
-      mockGlob.globSync.mockReturnValue(['test1.d.ts', 'test2.d.ts']);
+      mockGlobSync.mockReturnValue(['test1.d.ts', 'test2.d.ts']);
       mockAnalyzer.analyzer
         .mockImplementationOnce(() => { throw new Error('Parse error'); })
         .mockImplementationOnce(() => undefined);
@@ -216,7 +218,7 @@ describe('Generator', () => {
     });
     
     it('should generate index.d.ts with references and exports', async () => {
-      mockGlob.globSync.mockReturnValue(['components/button.d.ts', 'widgets/card.d.ts']);
+      mockGlobSync.mockReturnValue(['components/button.d.ts', 'widgets/card.d.ts']);
       mockFs.readFileSync.mockReturnValue('interface Test {}');
       mockFs.existsSync.mockImplementation((path) => {
         // Source directory exists
@@ -231,23 +233,17 @@ describe('Generator', () => {
         command: 'test command'
       });
       
-      // Check that index.d.ts was written
+      // Dart codegen does not write a root index.d.ts; it copies .d.ts files alongside generated Dart bindings.
       const writeFileCalls = mockFs.writeFileSync.mock.calls;
       const indexDtsCall = writeFileCalls.find(call => 
         call[0].toString().endsWith('index.d.ts')
       );
       
-      expect(indexDtsCall).toBeDefined();
-      expect(indexDtsCall![1]).toContain('/// <reference path="./global.d.ts" />');
-      expect(indexDtsCall![1]).toContain('/// <reference path="./components/button.d.ts" />');
-      expect(indexDtsCall![1]).toContain('/// <reference path="./widgets/card.d.ts" />');
-      expect(indexDtsCall![1]).toContain("export * from './components/button';");
-      expect(indexDtsCall![1]).toContain("export * from './widgets/card';");
-      expect(indexDtsCall![1]).toContain('TypeScript Definitions');
+      expect(indexDtsCall).toBeUndefined();
     });
     
     it('should copy original .d.ts files to output directory', async () => {
-      mockGlob.globSync.mockReturnValue(['test.d.ts']);
+      mockGlobSync.mockReturnValue(['test.d.ts']);
       const originalContent = 'interface Original {}';
       mockFs.readFileSync.mockReturnValue(originalContent);
       mockFs.existsSync.mockImplementation((path) => {
@@ -279,7 +275,7 @@ describe('Generator', () => {
         exclude: ['**/test/**', '**/docs/**']
       });
 
-      expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
+      expect(mockGlobSync).toHaveBeenCalledWith('**/*.d.ts', {
         cwd: '/test/source',
         ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**', '**/test/**', '**/docs/**']
       });
@@ -299,6 +295,19 @@ describe('Generator', () => {
       expect(mockFs.writeFileSync).toHaveBeenCalled();
     });
 
+    it('should always generate src/types.ts for React output', async () => {
+      await reactGen({
+        source: '/test/source',
+        target: '/test/target',
+        command: 'test command'
+      });
+
+      const writeCalls = mockFs.writeFileSync.mock.calls;
+      const typesCall = writeCalls.find(call => /[\\/]src[\\/]types\.ts$/.test(call[0].toString()));
+      expect(typesCall).toBeDefined();
+      expect(typesCall![1]).toContain('export {};');
+    });
+
     it('should use the exact target directory specified', async () => {
       await reactGen({
         source: '/test/source',
@@ -419,7 +428,7 @@ describe('Generator', () => {
     });
 
     it('should only generate one index.d.ts file', async () => {
-      mockGlob.globSync.mockReturnValue(['comp1.d.ts', 'comp2.d.ts', 'comp3.d.ts']);
+      mockGlobSync.mockReturnValue(['comp1.d.ts', 'comp2.d.ts', 'comp3.d.ts']);
       
       await vueGen({
         source: '/test/source',
@@ -436,7 +445,7 @@ describe('Generator', () => {
 
   describe('Error handling', () => {
     it('should handle glob errors', async () => {
-      mockGlob.globSync.mockImplementation(() => {
+      mockGlobSync.mockImplementation(() => {
         throw new Error('Glob error');
       });
       
@@ -476,8 +485,8 @@ describe('Generator', () => {
       // First file fails (no writes), second file succeeds (1 dart + 1 .d.ts), plus index.d.ts = 3 total
       // But since the error happens in dartGen, the .d.ts copy might not happen
       const writeCalls = mockFs.writeFileSync.mock.calls;
-      // Should have at least written the successful dart file and index.d.ts
-      expect(writeCalls.length).toBeGreaterThanOrEqual(2);
+      // Should have at least written the successful Dart bindings file
+      expect(writeCalls.length).toBeGreaterThanOrEqual(1);
     });
   });
 

package/test/peerDeps.test.ts

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import path from 'path';
+
+import { getPackageTypesFileFromDir, isPackageTypesReady } from '../src/peerDeps';
+
+function makeTempDir(prefix: string): string {
+  return fs.mkdtempSync(path.join(process.cwd(), 'test', prefix));
+}
+
+describe('peerDeps', () => {
+  it('treats package as not ready when declared types file is missing', () => {
+    const dir = makeTempDir('peerDeps-');
+    const distDir = path.join(dir, 'dist');
+    try {
+      fs.mkdirSync(distDir, { recursive: true });
+      fs.writeFileSync(
+        path.join(dir, 'package.json'),
+        JSON.stringify({ name: '@openwebf/react-core-ui', types: 'dist/index.d.ts' }, null, 2)
+      );
+
+      expect(getPackageTypesFileFromDir(dir)).toBe(path.join(dir, 'dist', 'index.d.ts'));
+      expect(isPackageTypesReady(dir)).toBe(false);
+
+      fs.writeFileSync(path.join(distDir, 'index.d.ts'), 'export {};');
+      expect(isPackageTypesReady(dir)).toBe(true);
+    } finally {
+      fs.rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});

package/test/react-consts.test.ts

@@ -1,15 +1,18 @@
 import { generateReactComponent } from '../src/react';
 import { IDLBlob } from '../src/IDLBlob';
-import { ConstObject, EnumObject, EnumMemberObject } from '../src/declaration';
+import { ClassObject, ClassObjectKind, 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 properties = new ClassObject();
+    properties.name = 'TestComponentProperties';
+    properties.kind = ClassObjectKind.interface;
     const constObj = new ConstObject();
     constObj.name = 'WEBF_CUPERTINO_SYMBOL';
     constObj.type = 'unique symbol';
 
-    blob.objects = [constObj as any];
+    blob.objects = [properties, constObj as any];
 
     const output = generateReactComponent(blob);
     expect(output).toContain('export declare const WEBF_CUPERTINO_SYMBOL: unique symbol;');
@@ -17,12 +20,15 @@ describe('React generator - declare const support', () => {
 
   it('emits export declare enum for enums from typings', () => {
     const blob = new IDLBlob('/test/source', '/test/target', 'EnumOnly', 'test', '');
+    const properties = new ClassObject();
+    properties.name = 'TestComponentProperties';
+    properties.kind = ClassObjectKind.interface;
     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];
+    blob.objects = [properties, eo as any];
 
     const output = generateReactComponent(blob);
     expect(output).toContain("export enum CupertinoColors { 'red' = 0x0f, 'bbb' = 0x00 }");

package/test/standard-props.test.ts

@@ -49,13 +49,13 @@ describe('Standard HTML Props Generation', () => {
       const propsContent = result.substring(propsStart, propsEnd);
       
       // Verify order: custom props, event handlers, then standard HTML props
-      const labelIndex = propsContent.indexOf('label: dom_string;');
-      const variantIndex = propsContent.indexOf('variant?: dom_string;');
-      const onClickIndex = propsContent.indexOf('onClick?: (event: Event) => void;');
-      const idIndex = propsContent.indexOf('id?: string;');
-      const styleIndex = propsContent.indexOf('style?: React.CSSProperties;');
-      const childrenIndex = propsContent.indexOf('children?: React.ReactNode;');
-      const classNameIndex = propsContent.indexOf('className?: string;');
+      const labelIndex = propsContent.search(/\n\s*label\??:\s*/);
+      const variantIndex = propsContent.search(/\n\s*variant\??:\s*/);
+      const onClickIndex = propsContent.search(/\n\s*onClick\??:\s*/);
+      const idIndex = propsContent.search(/\n\s*id\??:\s*/);
+      const styleIndex = propsContent.search(/\n\s*style\??:\s*/);
+      const childrenIndex = propsContent.search(/\n\s*children\??:\s*/);
+      const classNameIndex = propsContent.search(/\n\s*className\??:\s*/);
       
       // All props should exist
       expect(labelIndex).toBeGreaterThan(-1);
@@ -131,8 +131,8 @@ describe('Standard HTML Props Generation', () => {
       
       // Standard HTML props
       expect(propsContent).toContain("'id'?: string;");
-      expect(propsContent).toContain("'class'?: string;");
-      expect(propsContent).toContain("'style'?: string | Record<string, any>;");
+      expect(propsContent).toContain("'class'?: ClassValue;");
+      expect(propsContent).toContain("'style'?: StyleValue;");
     });
 
     it('should handle Vue style prop with both string and object types', () => {
@@ -145,8 +145,8 @@ describe('Standard HTML Props Generation', () => {
       
       const result = generateVueTypings([blob]);
       
-      // Vue style prop should accept both string and object
-      expect(result).toMatch(/'style'\?: string \| Record<string, any>;/);
+      // Vue style prop should accept Vue's supported style value forms
+      expect(result).toMatch(/'style'\?: StyleValue;/);
     });
   });
 
@@ -176,15 +176,15 @@ describe('Standard HTML Props Generation', () => {
       
       // Both should have style prop (with appropriate types)
       expect(reactResult).toContain('style?: React.CSSProperties;');
-      expect(vueResult).toContain("'style'?: string | Record<string, any>;");
+      expect(vueResult).toContain("'style'?: StyleValue;");
       
       // React has className, Vue has class
       expect(reactResult).toContain('className?: string;');
-      expect(vueResult).toContain("'class'?: string;");
+      expect(vueResult).toContain("'class'?: ClassValue;");
       
       // React has children, Vue uses slots (not in props)
       expect(reactResult).toContain('children?: React.ReactNode;');
       expect(vueResult).not.toContain('children');
     });
   });
-});
+});

package/test/templates.test.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+import path from 'path';
+
+describe('Templates', () => {
+  it('react tsconfig template pins React type resolution to root @types', () => {
+    const templatePath = path.resolve(__dirname, '../templates/react.tsconfig.json.tpl');
+    const template = fs.readFileSync(templatePath, 'utf8');
+
+    expect(template).toContain('"baseUrl": "."');
+    expect(template).toContain('"paths"');
+    expect(template).toContain('"react": ["./node_modules/@types/react/index.d.ts"]');
+    expect(template).toContain('"react-dom": ["./node_modules/@types/react-dom/index.d.ts"]');
+    expect(template).toContain('"react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime.d.ts"]');
+    expect(template).toContain('"react/jsx-dev-runtime": ["./node_modules/@types/react/jsx-dev-runtime.d.ts"]');
+  });
+});
+

package/test/vue.test.ts

@@ -1,6 +1,6 @@
 import { generateVueTypings } from '../src/vue';
 import { IDLBlob } from '../src/IDLBlob';
-import { ClassObject, ClassObjectKind, PropsDeclaration, ConstObject } from '../src/declaration';
+import { ClassObject, ClassObjectKind, PropsDeclaration, ConstObject, TypeAliasObject } from '../src/declaration';
 
 describe('Vue Generator', () => {
   describe('generateVueTypings', () => {
@@ -16,13 +16,16 @@ describe('Vue Generator', () => {
       
       // Should include standard HTML props in Props type
       expect(result).toContain("'id'?: string;");
-      expect(result).toContain("'class'?: string;");
-      expect(result).toContain("'style'?: string | Record<string, any>;");
+      expect(result).toContain("'class'?: ClassValue;");
+      expect(result).toContain("'style'?: StyleValue;");
       
       // Should generate proper type exports
       expect(result).toContain('export type TestComponentProps = {');
       expect(result).toContain('export interface TestComponentElement {');
       expect(result).toContain('export type TestComponentEvents = {');
+
+      // Should not rely on a non-existent internal __webfTypes import
+      expect(result).not.toContain('__webfTypes');
     });
 
     it('should include standard HTML props along with custom properties', () => {
@@ -58,8 +61,8 @@ describe('Vue Generator', () => {
       
       // And still include standard HTML props
       expect(result).toContain("'id'?: string;");
-      expect(result).toContain("'class'?: string;");
-      expect(result).toContain("'style'?: string | Record<string, any>;");
+      expect(result).toContain("'class'?: ClassValue;");
+      expect(result).toContain("'style'?: StyleValue;");
     });
 
     it('should generate proper Vue component declarations', () => {
@@ -73,11 +76,20 @@ describe('Vue Generator', () => {
       const result = generateVueTypings([blob]);
       
       // Should generate proper component declarations
-      expect(result).toContain("declare module 'vue' {");
+      expect(result).toContain("declare module '@vue/runtime-core' {");
+      expect(result).toContain("interface GlobalDirectives {");
+      expect(result).toContain('vFlutterAttached: typeof flutterAttached;');
       expect(result).toContain("interface GlobalComponents {");
-      expect(result).toContain("'web-f-list-view': DefineCustomElement<");
+      expect(result).toContain("'webf-list-view': DefineCustomElement<");
+      expect(result).not.toContain("'web-f-list-view': DefineCustomElement<");
+      expect(result).toContain("WebFListViewElement,");
       expect(result).toContain("WebFListViewProps,");
       expect(result).toContain("WebFListViewEvents");
+
+      // Compatibility module for older tooling
+      expect(result).toContain("declare module 'vue' {");
+      expect(result).toContain("interface GlobalDirectives extends import('@vue/runtime-core').GlobalDirectives {}");
+      expect(result).toContain("interface GlobalComponents extends import('@vue/runtime-core').GlobalComponents {}");
     });
 
     it('should handle multiple components', () => {
@@ -145,13 +157,13 @@ describe('Vue Generator', () => {
       
       // Should include event types
       expect(result).toContain('export type TestComponentEvents = {');
-      expect(result).toContain('close?: Event;');
-      expect(result).toContain('refresh?: CustomEvent;');
+      expect(result).toContain('close: Event;');
+      expect(result).toContain('refresh: CustomEvent;');
       
       // Props should still have standard HTML props
       expect(result).toContain("'id'?: string;");
-      expect(result).toContain("'class'?: string;");
-      expect(result).toContain("'style'?: string | Record<string, any>;");
+      expect(result).toContain("'class'?: ClassValue;");
+      expect(result).toContain("'style'?: StyleValue;");
     });
 
     it('should include declare const variables as exported declarations', () => {
@@ -168,6 +180,19 @@ describe('Vue Generator', () => {
       expect(result).toContain('export declare const WEBF_UNIQUE: unique symbol;');
     });
 
+    it('should include type aliases as exported declarations', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TypeAliasOnly', 'test', '');
+
+      const typeAlias = new TypeAliasObject();
+      typeAlias.name = 'MyAlias';
+      typeAlias.type = 'string | number';
+
+      blob.objects = [typeAlias as any];
+
+      const result = generateVueTypings([blob]);
+      expect(result).toContain('export type MyAlias = string | number;');
+    });
+
     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