@openwebf/webf 0.23.10 → 0.24.1

package/src/react.ts

@@ -52,13 +52,12 @@ function generateReturnType(type: ParameterType): string {
     return pointerType;
   }
   if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-    const elemType = getPointerType(type.value);
-    // Map arrays of Dart `Type` to `any[]` in TS; parenthesize typeof
-    if (elemType === 'Type') return 'any[]';
-    if (typeof elemType === 'string' && elemType.startsWith('typeof ')) {
-      return `(${elemType})[]`;
+    const elemType = generateReturnType(type.value);
+    if (!elemType) return 'any[]';
+    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 FunctionArgumentType.int:
@@ -387,19 +386,12 @@ export function generateReactComponent(blob: IDLBlob, packageName?: string, rela
         return pointerType;
       }
       if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-        const elemType = getPointerType(type.value);
-        if (elemType === 'Type') return 'any[]';
-        if (typeof elemType === 'string' && elemType.startsWith('typeof ')) {
-          const ident = elemType.substring('typeof '.length).trim();
-          return `(typeof __webfTypes.${ident})[]`;
-        }
-        if (typeof elemType === 'string' && /^(?:[A-Za-z_][A-Za-z0-9_]*)(?:\.[A-Za-z_][A-Za-z0-9_]*)*$/.test(elemType)) {
-          const base = elemType.split('.')[0];
-          if (!localTypeNames.has(base)) {
-            return `__webfTypes.${elemType}[]`;
-          }
+        const elemType = genRT(type.value);
+        if (!elemType) return 'any[]';
+        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 FunctionArgumentType.int:

package/src/vue.ts

@@ -2,10 +2,9 @@ import _ from "lodash";
 import fs from 'fs';
 import path from 'path';
 import {ParameterType} from "./analyzer";
-import {ClassObject, FunctionArgumentType, FunctionDeclaration, ConstObject, EnumObject} from "./declaration";
+import {ClassObject, FunctionArgumentType, FunctionDeclaration, ConstObject, EnumObject, TypeAliasObject} from "./declaration";
 import {IDLBlob} from "./IDLBlob";
-import { debug } from './logger';
-import {getPointerType, isPointerType, isUnionType, trimNullTypeFromType} from "./utils";
+import {getPointerType, isPointerType, isUnionType} from "./utils";
 
 function readTemplate(name: string) {
   return fs.readFileSync(path.join(__dirname, '../templates/' + name + '.tpl'), {encoding: 'utf-8'});
@@ -49,18 +48,17 @@ function generateReturnType(type: ParameterType): string {
     if (pointerType === '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 = getPointerType(type.value);
-    if (elemType === 'Type') return 'any[]';
-    if (typeof elemType === 'string' && elemType.startsWith('typeof ')) {
-      const ident = elemType.substring('typeof '.length).trim();
-      return `(typeof __webfTypes.${ident})[]`;
+    const elemType = generateReturnType(type.value);
+    if (!elemType) return 'any[]';
+    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 FunctionArgumentType.int:
@@ -112,148 +110,139 @@ function generateMethodDeclaration(method: FunctionDeclaration) {
   return `${methodName}(${args}): ${returnType};`;
 }
 
-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];
-    })
-  );
+type VueComponentSpec = {
+  className: string;
+  properties?: ClassObject;
+  events?: ClassObject;
+  methods?: ClassObject;
+};
 
-  const properties = classObjects.filter(object => {
-    return object.name.endsWith('Properties');
-  });
-  const events = classObjects.filter(object => {
-    return object.name.endsWith('Events');
-  });
+function getVueComponentSpecs(blob: IDLBlob): VueComponentSpec[] {
+  const classObjects = blob.objects.filter(obj => obj instanceof ClassObject) as ClassObject[];
+  if (classObjects.length === 0) return [];
 
-  const others = classObjects.filter(object => {
-    return !object.name.endsWith('Properties')
-      && !object.name.endsWith('Events');
-  });
+  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 dependencies = others.map(object => {
-    if (!object || !object.props || object.props.length === 0) {
-      return '';
-    }
+  const componentMap = new Map<string, VueComponentSpec>();
 
-    const interfaceLines: string[] = [];
+  properties.forEach(prop => {
+    const className = prop.name.replace(/Properties$/, '');
+    if (!componentMap.has(className)) componentMap.set(className, { className });
+    componentMap.get(className)!.properties = prop;
+  });
 
-    if (object.documentation && object.documentation.trim().length > 0) {
-      interfaceLines.push('/**');
-      object.documentation.split('\n').forEach(line => {
-        interfaceLines.push(` * ${line}`);
-      });
-      interfaceLines.push(' */');
-    }
+  events.forEach(ev => {
+    const className = ev.name.replace(/Events$/, '');
+    if (!componentMap.has(className)) componentMap.set(className, { className });
+    componentMap.get(className)!.events = ev;
+  });
 
-    interfaceLines.push(`interface ${object.name} {`);
+  methods.forEach(m => {
+    const className = m.name.replace(/Methods$/, '');
+    if (!componentMap.has(className)) componentMap.set(className, { className });
+    componentMap.get(className)!.methods = m;
+  });
 
-    const propLines = object.props.map(prop => {
-      const lines: string[] = [];
+  return Array.from(componentMap.values())
+    .filter(spec => spec.className.trim().length > 0)
+    .sort((a, b) => a.className.localeCompare(b.className));
+}
 
-      if (prop.documentation && prop.documentation.trim().length > 0) {
-        lines.push('  /**');
-        prop.documentation.split('\n').forEach(line => {
-          lines.push(`   * ${line}`);
-        });
-        lines.push('   */');
-      }
+function renderSupportingInterface(object: ClassObject): string {
+  const hasProps = !!object.props && object.props.length > 0;
+  const hasMethods = !!object.methods && object.methods.length > 0;
+  if (!hasProps && !hasMethods) {
+    return '';
+  }
 
-      const optionalToken = prop.optional ? '?' : '';
-      lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
+  const interfaceLines: string[] = [];
 
-      return lines.join('\n');
+  if (object.documentation && object.documentation.trim().length > 0) {
+    interfaceLines.push('/**');
+    object.documentation.split('\n').forEach(line => {
+      interfaceLines.push(` * ${line}`);
     });
+    interfaceLines.push(' */');
+  }
 
-    interfaceLines.push(propLines.join('\n'));
-    interfaceLines.push('}');
+  interfaceLines.push(`export interface ${object.name} {`);
 
-    return interfaceLines.join('\n');
-  }).filter(dep => dep.trim() !== '').join('\n\n');
+  const propLines = (object.props || []).map(prop => {
+    const lines: string[] = [];
 
-  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$/, '');
+    if (prop.documentation && prop.documentation.trim().length > 0) {
+      lines.push('  /**');
+      prop.documentation.split('\n').forEach(line => {
+        lines.push(`   * ${line}`);
+      });
+      lines.push('   */');
     }
-    return '';
-  })();
 
-  if (!className) {
-    return '';
-  }
+    const optionalToken = prop.optional ? '?' : '';
+    lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
 
-  const content = _.template(readTemplate('vue.component.partial'))({
-    className: className,
-    properties: componentProperties,
-    events: componentEvents,
-    classObjectDictionary,
-    dependencies,
-    blob,
-    generateReturnType,
-    generateMethodDeclaration,
-    generateEventHandlerType,
+    return lines.join('\n');
   });
 
-  const result = content.split('\n').filter(str => {
-    return str.trim().length > 0;
-  }).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(methodLines.join('\n'));
+  }
+
+  interfaceLines.push('}');
 
-  return result;
+  return interfaceLines.join('\n');
 }
 
-function toVueTagName(className: string): string {
+function toVueTagName(rawClassName: string): string {
+  const className = rawClassName.trim();
+
   if (className.startsWith('WebF')) {
     const withoutPrefix = className.substring(4);
-    return 'web-f-' + _.kebabCase(withoutPrefix);
-  } else if (className.startsWith('Flutter')) {
+    const suffix = _.kebabCase(withoutPrefix);
+    return suffix.length > 0 ? 'webf-' + suffix : 'webf';
+  }
+
+  if (className.startsWith('Flutter')) {
     const withoutPrefix = className.substring(7);
-    return 'flutter-' + _.kebabCase(withoutPrefix);
+    const suffix = _.kebabCase(withoutPrefix);
+    return suffix.length > 0 ? 'flutter-' + suffix : 'flutter';
   }
-  return _.kebabCase(className);
+
+  const kebab = _.kebabCase(className);
+  return kebab.replace(/^web-f-/, 'webf-');
 }
 
 export function generateVueTypings(blobs: IDLBlob[]) {
-  const componentNames = blobs.map(blob => {
-    const classObjects = blob.objects as ClassObject[];
-
-    const properties = classObjects.filter(object => {
-      return object.name.endsWith('Properties');
+  const componentSpecMap = new Map<string, VueComponentSpec>();
+  blobs
+    .flatMap(blob => getVueComponentSpecs(blob))
+    .forEach(spec => {
+      if (!componentSpecMap.has(spec.className)) componentSpecMap.set(spec.className, spec);
     });
-    const events = classObjects.filter(object => {
-      return object.name.endsWith('Events');
+
+  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 = _.template(readTemplate('vue.component.partial'))({
+      className: spec.className,
+      properties: spec.properties,
+      events: spec.events,
+      methods: spec.methods,
+      generateReturnType,
+      generateMethodDeclaration,
+      generateEventHandlerType,
     });
 
-    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 components = blobs.map(blob => {
-    return generateVueComponent(blob);
-  }).filter(component => {
-    return component.length > 0;
-  }).join('\n\n');
+    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
@@ -267,6 +256,7 @@ export function generateVueTypings(blobs: IDLBlob[]) {
   });
 
   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');
 
@@ -275,29 +265,53 @@ export function generateVueTypings(blobs: IDLBlob[]) {
     .flatMap(blob => blob.objects)
     .filter(obj => obj instanceof EnumObject) as EnumObject[];
 
-  const enumDeclarations = enums.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');
+  const uniqueEnums = new Map<string, EnumObject>();
+  enums.forEach(e => {
+    if (!uniqueEnums.has(e.name)) uniqueEnums.set(e.name, e);
+  });
 
-  // 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.join(distRoot, 'src', 'types');
-      const rel = path.relative(typingsDir, typesFilePath).replace(/\\/g, '/');
-      typesImportPath = rel.startsWith('.') ? rel : `./${rel}`;
-    }
-  } catch {
-    typesImportPath = './src/types';
-  }
+  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');
+
+  // Collect type aliases across blobs and render as exported declarations.
+  const typeAliases = blobs
+    .flatMap(blob => blob.objects)
+    .filter(obj => obj instanceof TypeAliasObject) as TypeAliasObject[];
+
+  const uniqueTypeAliases = new Map<string, TypeAliasObject>();
+  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 ClassObject) as ClassObject[];
+
+  const supporting = supportingInterfaces.filter(obj => {
+    return !obj.name.endsWith('Properties') && !obj.name.endsWith('Events') && !obj.name.endsWith('Methods');
+  });
+
+  const uniqueSupporting = new Map<string, ClassObject>();
+  supporting.forEach(obj => {
+    if (!uniqueSupporting.has(obj.name)) uniqueSupporting.set(obj.name, obj);
+  });
 
-  // Always import the types namespace to support typeof references
-  const typesImport = `import * as __webfTypes from '${typesImportPath}';`;
-  debug(`[vue] Generating typings; importing types from ${typesImportPath}`);
+  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 => ({
@@ -315,7 +329,8 @@ export function generateVueTypings(blobs: IDLBlob[]) {
     components,
     consts: constDeclarations,
     enums: enumDeclarations,
-    typesImport,
+    typeAliases: typeAliasDeclarations,
+    dependencies: supportingDeclarations,
   });
 
   return content.split('\n').filter(str => {

package/templates/react.component.tsx.tpl

@@ -146,8 +146,8 @@ export const <%= className %> = createWebFComponent<<%= className %>Element, <%=
     {
       propName: '<%= propName %>',
       eventName: '<%= prop.name %>',
-      handler: (callback) => (event) => {
-        callback((event as <%= getEventType(prop.type) %>));
+      handler: (callback: (event: <%= getEventType(prop.type) %>) => void) => (event: Event) => {
+        callback(event as <%= getEventType(prop.type) %>);
       },
     },
     <% }); %>

package/templates/react.index.ts.tpl

@@ -3,5 +3,6 @@
  */
 
 <% components.forEach(component => { %>
-export { <%= component.className %>, <%= component.className %>Element } from "./<%= component.relativeDir ? component.relativeDir + '/' : '' %><%= component.fileName %>";
+export { <%= component.className %> } from "./<%= component.relativeDir ? component.relativeDir + '/' : '' %><%= component.fileName %>";
+export type { <%= component.className %>Element } from "./<%= component.relativeDir ? component.relativeDir + '/' : '' %><%= component.fileName %>";
 <% }); %>

package/templates/react.package.json.tpl

@@ -15,12 +15,11 @@
   "type": "commonjs",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "dependencies": {
-    "@openwebf/react-core-ui": "^0.2.1"
+    "react-dom": ">=16.8.0",
+    "@openwebf/react-core-ui": "^0.24.1"
   },
   "devDependencies": {
+    "@openwebf/react-core-ui": "^0.24.1",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
     "picomatch": "^4.0.2",

package/templates/react.tsconfig.json.tpl

@@ -10,7 +10,14 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "react": ["./node_modules/@types/react/index.d.ts"],
+      "react-dom": ["./node_modules/@types/react-dom/index.d.ts"],
+      "react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime.d.ts"],
+      "react/jsx-dev-runtime": ["./node_modules/@types/react/jsx-dev-runtime.d.ts"]
+    }
   },
   "include": ["src"]
 }

package/templates/react.tsup.config.ts.tpl

@@ -6,5 +6,5 @@ export default defineConfig({
   dts: true,
   sourcemap: true,
   clean: true,
-  external: ['react', 'react-dom'],
+  external: ['react', 'react-dom', '@openwebf/react-core-ui'],
 })

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

@@ -9,9 +9,11 @@
   "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"
   }
 }