@openwebf/webf 0.23.7 → 0.24.0

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'));
+  }
 
-  return result;
+  interfaceLines.push('}');
+
+  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,14 +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);
+  });
+
+  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 './src/types';`;
-  debug(`[vue] Generating typings; importing types from ./src/types`);
+  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 => ({
@@ -300,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/module.package.json.tpl

@@ -0,0 +1,36 @@
+{
+  "name": "<%= packageName %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "webf",
+    "flutter",
+    "native",
+    "module"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "type": "commonjs",
+  "dependencies": {
+    "@openwebf/webf-enterprise-typings": "^0.23.7"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
+

package/templates/module.tsconfig.json.tpl

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}
+

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

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: true,
+  splitting: false,
+  sourcemap: true,
+  minify: false,
+  external: [],
+});
+

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

@@ -5,7 +5,7 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": ["dist", "README.md"],
   "scripts": {
     "build": "tsup"
   },
@@ -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

@@ -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"
   }
 }