@openwebf/webf 0.23.10 → 0.24.0

package/templates/vue.component.partial.tpl

@@ -8,8 +8,8 @@ export type <%= className %>Props = {
     <% } %>
   <% }); %>
   'id'?: string;
-  'class'?: string;
-  'style'?: string | Record<string, any>;
+  'class'?: ClassValue;
+  'style'?: StyleValue;
 }
 
 export interface <%= className %>Element {
@@ -21,7 +21,7 @@ export interface <%= className %>Element {
   <%= propName %>: <%= generateReturnType(prop.type) %>;
     <% } %>
   <% }); %>
-  <% _.forEach(properties?.methods, function(method, index) { %>
+  <% _.forEach(methods?.methods, function(method, index) { %>
   <%= generateMethodDeclaration(method) %>
   <% }); %>
 }
@@ -29,6 +29,6 @@ export interface <%= className %>Element {
 export type <%= className %>Events = {
   <% _.forEach(events?.props, function(prop, index) { %>
     <% var propName = prop.name; %>
-  <%= propName %>?: <%= generateEventHandlerType(prop.type) %>;
+  <%= propName %>: <%= generateEventHandlerType(prop.type) %>;
   <% }); %>
 }

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

@@ -3,9 +3,10 @@
  */
 // Based on the Vue 3 documentation for defining custom elements:
 // https://vuejs.org/guide/extras/web-components
-import { EmitFn, PublicProps, HTMLAttributes } from 'vue';
+import type { EmitFn, PublicProps, StyleValue, ClassValue } from 'vue';
+import '@openwebf/vue-core-ui';
 
-<%= typesImport %>
+<%= typeAliases %>
 
 type EventMap = {
   [event: string]: Event
@@ -13,29 +14,29 @@ type EventMap = {
 
 // This maps an EventMap to the format that Vue's $emit type expects.
 type VueEmit<T extends EventMap> = EmitFn<{
-  [K in keyof T]: (event: T[K]) => void
+  [K in keyof T]: (event: NonNullable<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
+  [K in keyof T as `on${Capitalize<string & K>}`]?: (event: NonNullable<T[K]>) => any
 }
 
 <%= consts %>
 <%= enums %>
+<%= dependencies %>
 
 type DefineCustomElement<
   ElementType,
+  Props,
   Events extends EventMap = {},
-  SelectedAttributes extends keyof ElementType = keyof 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.
+  // combine the element's props with 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 & VueEventListeners<Events>
+  $props: Props & 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
@@ -47,13 +48,27 @@ type DefineCustomElement<
 
 <%= components %>
 
-declare module 'vue' {
+declare const flutterAttached: (typeof import('@openwebf/vue-core-ui')) extends { flutterAttached: infer T } ? T : any;
+
+declare module '@vue/runtime-core' {
+  interface GlobalDirectives {
+    vFlutterAttached: typeof flutterAttached;
+  }
+
   interface GlobalComponents {
     <% componentMetas.forEach(comp => { %>
     '<%= comp.tagName %>': DefineCustomElement<
+      <%= comp.className %>Element,
       <%= comp.className %>Props,
       <%= comp.className %>Events
     >
     <% }) %>
   }
 }
+
+// Some tooling (older IDE integrations) look for global directive/component typing
+// augmentations on the `vue` module name instead of `@vue/runtime-core`.
+declare module 'vue' {
+  interface GlobalDirectives extends import('@vue/runtime-core').GlobalDirectives {}
+  interface GlobalComponents extends import('@vue/runtime-core').GlobalComponents {}
+}

package/templates/vue.package.json.tpl

@@ -4,14 +4,16 @@
   "description": "<%= description %>",
   "main": "",
   "types": "index.d.ts",
-  "files": ["index.d.ts"],
+  "files": ["index.d.ts", "README.md"],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "@openwebf/vue-core-ui": "^0.24.0"
   },
   "devDependencies": {
+    "@openwebf/vue-core-ui": "^0.24.0",
     "vue": "^3.0.0"
   }
 }

package/test/commands.test.ts

@@ -230,8 +230,8 @@ describe('Commands', () => {
 
         expect(mockSpawnSync).toHaveBeenCalledWith(
           expect.stringMatching(/npm(\.cmd)?/),
-          ['install'],
-          { cwd: target, stdio: 'inherit' }
+          ['install', '--production=false'],
+          expect.objectContaining({ cwd: target, stdio: 'inherit' })
         );
       });
     });
@@ -283,18 +283,11 @@ describe('Commands', () => {
         
         await generateCommand(target, options);
 
-        // Should install WebF typings
+        // Should install dependencies (including devDependencies) from package.json
         expect(mockSpawnSync).toHaveBeenCalledWith(
           expect.stringMatching(/npm(\.cmd)?/),
-          ['install', '@openwebf/webf-enterprise-typings'],
-          { cwd: target, stdio: 'inherit' }
-        );
-
-        // Should install Vue 3 as dev dependency
-        expect(mockSpawnSync).toHaveBeenCalledWith(
-          expect.stringMatching(/npm(\.cmd)?/),
-          ['install', 'vue', '-D'],
-          { cwd: target, stdio: 'inherit' }
+          ['install', '--production=false'],
+          expect.objectContaining({ cwd: target, stdio: 'inherit' })
         );
       });
     });
@@ -463,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',

package/test/generator.test.ts

@@ -233,19 +233,13 @@ 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 () => {
@@ -301,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',
@@ -478,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