@openwebf/webf 0.23.0 → 0.23.7

package/dist/react.js

@@ -11,19 +11,58 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const declaration_1 = require("./declaration");
 const utils_1 = require("./utils");
+const logger_1 = require("./logger");
 function readTemplate(name) {
     return fs_1.default.readFileSync(path_1.default.join(__dirname, '../templates/' + name + '.tpl'), { encoding: 'utf-8' });
 }
 function generateReturnType(type) {
     if ((0, utils_1.isUnionType)(type)) {
-        return type.value.map(v => `'${v.value}'`).join(' | ');
+        const values = type.value;
+        return values.map(v => {
+            if (v.value === declaration_1.FunctionArgumentType.null) {
+                return 'null';
+            }
+            // String literal unions: 'left' | 'center' | 'right'
+            if (typeof v.value === 'string') {
+                return `'${v.value}'`;
+            }
+            return 'any';
+        }).join(' | ');
+    }
+    // Handle non-literal unions such as boolean | null, number | null, CustomType | null
+    if (Array.isArray(type.value)) {
+        const values = type.value;
+        const hasNull = values.some(v => v.value === declaration_1.FunctionArgumentType.null);
+        if (hasNull) {
+            const nonNulls = values.filter(v => v.value !== declaration_1.FunctionArgumentType.null);
+            if (nonNulls.length === 0) {
+                return 'null';
+            }
+            const parts = nonNulls.map(v => generateReturnType(v));
+            // Deduplicate and append null
+            const unique = Array.from(new Set(parts));
+            unique.push('null');
+            return unique.join(' | ');
+        }
+        // Complex non-null unions are rare for React typings; fall back to any
+        return 'any';
     }
     if ((0, utils_1.isPointerType)(type)) {
         const pointerType = (0, utils_1.getPointerType)(type);
+        // Map Dart's `Type` (from TS typeof) to TS `any`
+        if (pointerType === 'Type')
+            return 'any';
         return pointerType;
     }
     if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-        return `${(0, utils_1.getPointerType)(type.value)}[]`;
+        const elemType = (0, utils_1.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})[]`;
+        }
+        return `${elemType}[]`;
     }
     switch (type.value) {
         case declaration_1.FunctionArgumentType.int:
@@ -121,6 +160,8 @@ function toWebFTagName(className) {
 function generateReactComponent(blob, packageName, relativeDir) {
     const classObjects = blob.objects.filter(obj => obj instanceof declaration_1.ClassObject);
     const typeAliases = blob.objects.filter(obj => obj instanceof declaration_1.TypeAliasObject);
+    const constObjects = blob.objects.filter(obj => obj instanceof declaration_1.ConstObject);
+    const enumObjects = blob.objects.filter(obj => obj instanceof declaration_1.EnumObject);
     const classObjectDictionary = Object.fromEntries(classObjects.map(object => {
         return [object.name, object];
     }));
@@ -142,33 +183,72 @@ function generateReactComponent(blob, packageName, relativeDir) {
     const typeAliasDeclarations = typeAliases.map(typeAlias => {
         return `type ${typeAlias.name} = ${typeAlias.type};`;
     }).join('\n');
+    // Include declare const values as ambient exports for type usage (e.g., unique symbol branding)
+    const constDeclarations = constObjects.map(c => `export declare const ${c.name}: ${c.type};`).join('\n');
+    // Include enums as concrete exports (no declare) so they are usable as values
+    const enumDeclarations = enumObjects.map(e => {
+        const members = e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ');
+        return `export enum ${e.name} { ${members} }`;
+    }).join('\n');
+    // Names declared within this blob (so we shouldn't prefix them with __webfTypes)
+    const localTypeNames = new Set([
+        ...others.map(o => o.name),
+        ...typeAliases.map(t => t.name),
+        ...constObjects.map(c => c.name),
+        ...enumObjects.map(e => e.name),
+    ]);
     const dependencies = [
         typeAliasDeclarations,
+        constDeclarations,
+        enumDeclarations,
         // Include Methods interfaces as dependencies
         methods.map(object => {
             const methodDeclarations = object.methods.map(method => {
                 return generateMethodDeclarationWithDocs(method, '  ');
             }).join('\n');
-            let interfaceDoc = '';
-            if (object.documentation) {
-                interfaceDoc = `/**\n${object.documentation.split('\n').map(line => ` * ${line}`).join('\n')}\n */\n`;
+            const lines = [];
+            if (object.documentation && object.documentation.trim().length > 0) {
+                lines.push('/**');
+                object.documentation.split('\n').forEach(line => {
+                    lines.push(` * ${line}`);
+                });
+                lines.push(' */');
             }
-            return `${interfaceDoc}interface ${object.name} {
-${methodDeclarations}
-}`;
+            lines.push(`interface ${object.name} {`);
+            lines.push(methodDeclarations);
+            lines.push('}');
+            return lines.join('\n');
         }).join('\n\n'),
         others.map(object => {
-            const props = object.props.map(prop => {
-                if (prop.optional) {
-                    return `${prop.name}?: ${generateReturnType(prop.type)};`;
+            if (!object || !object.props || object.props.length === 0) {
+                return '';
+            }
+            const interfaceLines = [];
+            if (object.documentation && object.documentation.trim().length > 0) {
+                interfaceLines.push('/**');
+                object.documentation.split('\n').forEach(line => {
+                    interfaceLines.push(` * ${line}`);
+                });
+                interfaceLines.push(' */');
+            }
+            interfaceLines.push(`interface ${object.name} {`);
+            const propLines = object.props.map(prop => {
+                const lines = [];
+                if (prop.documentation && prop.documentation.trim().length > 0) {
+                    lines.push('  /**');
+                    prop.documentation.split('\n').forEach(line => {
+                        lines.push(`   * ${line}`);
+                    });
+                    lines.push('   */');
                 }
-                return `${prop.name}: ${generateReturnType(prop.type)};`;
-            }).join('\n  ');
-            return `
-interface ${object.name} {
-  ${props}
-}`;
-        }).join('\n\n')
+                const optionalToken = prop.optional ? '?' : '';
+                lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
+                return lines.join('\n');
+            });
+            interfaceLines.push(propLines.join('\n'));
+            interfaceLines.push('}');
+            return interfaceLines.join('\n');
+        }).filter(Boolean).join('\n\n')
     ].filter(Boolean).join('\n\n');
     // Generate all components from this file
     const components = [];
@@ -221,17 +301,114 @@ interface ${object.name} {
         }
         const templateContent = readTemplate('react.component.tsx')
             .replace('import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";', createWebFComponentImport);
-        const content = lodash_1.default.template(templateContent)({
+        // Generate return type mapping; always use __webfTypes namespace for typeof
+        const genRT = (type) => {
+            if ((0, utils_1.isUnionType)(type)) {
+                const values = type.value;
+                return values.map(v => {
+                    if (v.value === declaration_1.FunctionArgumentType.null) {
+                        return 'null';
+                    }
+                    if (typeof v.value === 'string') {
+                        return `'${v.value}'`;
+                    }
+                    return 'any';
+                }).join(' | ');
+            }
+            if (Array.isArray(type.value)) {
+                const values = type.value;
+                const hasNull = values.some(v => v.value === declaration_1.FunctionArgumentType.null);
+                if (hasNull) {
+                    const nonNulls = values.filter(v => v.value !== declaration_1.FunctionArgumentType.null);
+                    if (nonNulls.length === 0) {
+                        return 'null';
+                    }
+                    const parts = nonNulls.map(v => genRT(v));
+                    const unique = Array.from(new Set(parts));
+                    unique.push('null');
+                    return unique.join(' | ');
+                }
+                return 'any';
+            }
+            if ((0, utils_1.isPointerType)(type)) {
+                const pointerType = (0, utils_1.getPointerType)(type);
+                if (pointerType === 'Type')
+                    return 'any';
+                if (typeof pointerType === 'string' && pointerType.startsWith('typeof ')) {
+                    const ident = pointerType.substring('typeof '.length).trim();
+                    return `typeof __webfTypes.${ident}`;
+                }
+                // Prefix external pointer types with __webfTypes unless locally declared
+                if (typeof pointerType === 'string' && /^(?:[A-Za-z_][A-Za-z0-9_]*)(?:\.[A-Za-z_][A-Za-z0-9_]*)*$/.test(pointerType)) {
+                    const base = pointerType.split('.')[0];
+                    if (!localTypeNames.has(base)) {
+                        return `__webfTypes.${pointerType}`;
+                    }
+                }
+                return pointerType;
+            }
+            if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+                const elemType = (0, utils_1.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}[]`;
+                    }
+                }
+                return `${elemType}[]`;
+            }
+            switch (type.value) {
+                case declaration_1.FunctionArgumentType.int:
+                case declaration_1.FunctionArgumentType.double:
+                    return 'number';
+                case declaration_1.FunctionArgumentType.any:
+                    return 'any';
+                case declaration_1.FunctionArgumentType.boolean:
+                    return 'boolean';
+                case declaration_1.FunctionArgumentType.dom_string:
+                    return 'string';
+                case declaration_1.FunctionArgumentType.void:
+                default:
+                    return 'void';
+            }
+        };
+        // Compute relative import path to src/types
+        const depth = (relativeDir || '').split('/').filter(p => p).length;
+        const upPath = '../'.repeat(depth);
+        // Always import the types namespace for typeof references
+        const typesImport = `import * as __webfTypes from "${upPath}types";\n\n`;
+        // Debug: collect typeof references from props for this component
+        const typeofRefs = new Set();
+        if (component.properties) {
+            component.properties.props.forEach(p => {
+                const t = p.type;
+                if (!t)
+                    return;
+                if (!t.isArray && typeof t.value === 'string' && String(t.value).startsWith('typeof ')) {
+                    const ident = String(t.value).substring('typeof '.length).trim();
+                    typeofRefs.add(ident);
+                }
+            });
+        }
+        (0, logger_1.debug)(`[react] Generating ${className} (${blob.relativeDir}/${blob.filename}.tsx) typeof refs: ${Array.from(typeofRefs).join(', ') || '(none)'}; types import: ${upPath}types`);
+        const dependenciesWithImports = `${typesImport}${dependencies}`;
+        let content = lodash_1.default.template(templateContent)({
             className: className,
             properties: component.properties,
             events: component.events,
             methods: component.methods,
             classObjectDictionary,
-            dependencies,
+            dependencies: dependenciesWithImports,
             blob,
             toReactEventName,
             toWebFTagName,
-            generateReturnType,
+            generateReturnType: genRT,
             generateMethodDeclaration,
             generateMethodDeclarationWithDocs,
             generateEventHandlerType,
@@ -257,6 +434,81 @@ interface ${object.name} {
         createWebFComponentImport = `import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui";`;
     }
     componentEntries.forEach(([className, component]) => {
+        const genRT = (type) => {
+            if ((0, utils_1.isUnionType)(type)) {
+                const values = type.value;
+                return values.map(v => {
+                    if (v.value === declaration_1.FunctionArgumentType.null) {
+                        return 'null';
+                    }
+                    if (typeof v.value === 'string') {
+                        return `'${v.value}'`;
+                    }
+                    return 'any';
+                }).join(' | ');
+            }
+            if (Array.isArray(type.value)) {
+                const values = type.value;
+                const hasNull = values.some(v => v.value === declaration_1.FunctionArgumentType.null);
+                if (hasNull) {
+                    const nonNulls = values.filter(v => v.value !== declaration_1.FunctionArgumentType.null);
+                    if (nonNulls.length === 0) {
+                        return 'null';
+                    }
+                    const parts = nonNulls.map(v => genRT(v));
+                    const unique = Array.from(new Set(parts));
+                    unique.push('null');
+                    return unique.join(' | ');
+                }
+                return 'any';
+            }
+            if ((0, utils_1.isPointerType)(type)) {
+                const pointerType = (0, utils_1.getPointerType)(type);
+                if (pointerType === 'Type')
+                    return 'any';
+                if (typeof pointerType === 'string' && pointerType.startsWith('typeof ')) {
+                    const ident = pointerType.substring('typeof '.length).trim();
+                    return `typeof __webfTypes.${ident}`;
+                }
+                if (typeof pointerType === 'string' && /^(?:[A-Za-z_][A-Za-z0-9_]*)(?:\.[A-Za-z_][A-Za-z0-9_]*)*$/.test(pointerType)) {
+                    const base = pointerType.split('.')[0];
+                    if (!localTypeNames.has(base)) {
+                        return `__webfTypes.${pointerType}`;
+                    }
+                }
+                return pointerType;
+            }
+            if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
+                const elemType = (0, utils_1.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}[]`;
+                    }
+                }
+                return `${elemType}[]`;
+            }
+            switch (type.value) {
+                case declaration_1.FunctionArgumentType.int:
+                case declaration_1.FunctionArgumentType.double:
+                    return 'number';
+                case declaration_1.FunctionArgumentType.any:
+                    return 'any';
+                case declaration_1.FunctionArgumentType.boolean:
+                    return 'boolean';
+                case declaration_1.FunctionArgumentType.dom_string:
+                    return 'string';
+                case declaration_1.FunctionArgumentType.void:
+                default:
+                    return 'void';
+            }
+        };
         const content = lodash_1.default.template(readTemplate('react.component.tsx'))({
             className: className,
             properties: component.properties,
@@ -267,7 +519,7 @@ interface ${object.name} {
             blob,
             toReactEventName,
             toWebFTagName,
-            generateReturnType,
+            generateReturnType: genRT,
             generateMethodDeclaration,
             generateMethodDeclarationWithDocs,
             generateEventHandlerType,
@@ -281,9 +533,15 @@ interface ${object.name} {
         componentDefinitions.push(withoutImports);
     });
     // Combine with shared imports at the top
-    const result = [
+    // Compute relative import path to src/types and always include namespace import
+    const depth = (relativeDir || '').split('/').filter(p => p).length;
+    const upPath = '../'.repeat(depth);
+    const typesImport = `import * as __webfTypes from "${upPath}types";`;
+    (0, logger_1.debug)(`[react] Generating combined components for ${blob.filename}.tsx; types import: ${upPath}types`);
+    let result = [
         'import React from "react";',
         createWebFComponentImport,
+        typesImport,
         '',
         dependencies,
         '',

package/dist/vue.js

@@ -8,17 +8,61 @@ const lodash_1 = __importDefault(require("lodash"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const declaration_1 = require("./declaration");
+const logger_1 = require("./logger");
 const utils_1 = require("./utils");
 function readTemplate(name) {
     return fs_1.default.readFileSync(path_1.default.join(__dirname, '../templates/' + name + '.tpl'), { encoding: 'utf-8' });
 }
 function generateReturnType(type) {
+    if ((0, utils_1.isUnionType)(type)) {
+        const values = type.value;
+        return values.map(v => {
+            if (v.value === declaration_1.FunctionArgumentType.null) {
+                return 'null';
+            }
+            if (typeof v.value === 'string') {
+                return `'${v.value}'`;
+            }
+            return 'any';
+        }).join(' | ');
+    }
+    // Handle unions like boolean | null, number | null, CustomType | null
+    if (Array.isArray(type.value)) {
+        const values = type.value;
+        const hasNull = values.some(v => v.value === declaration_1.FunctionArgumentType.null);
+        if (hasNull) {
+            const nonNulls = values.filter(v => v.value !== declaration_1.FunctionArgumentType.null);
+            if (nonNulls.length === 0) {
+                return 'null';
+            }
+            const parts = nonNulls.map(v => generateReturnType(v));
+            const unique = Array.from(new Set(parts));
+            unique.push('null');
+            return unique.join(' | ');
+        }
+        // Complex non-null unions are rare; fall back to any
+        return 'any';
+    }
     if ((0, utils_1.isPointerType)(type)) {
         const pointerType = (0, utils_1.getPointerType)(type);
+        // Map Dart's `Type` (from TS typeof) to TS `any`
+        if (pointerType === 'Type')
+            return 'any';
+        if (typeof pointerType === 'string' && pointerType.startsWith('typeof ')) {
+            const ident = pointerType.substring('typeof '.length).trim();
+            return `typeof __webfTypes.${ident}`;
+        }
         return pointerType;
     }
     if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-        return `${(0, utils_1.getPointerType)(type.value)}[]`;
+        const elemType = (0, utils_1.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})[]`;
+        }
+        return `${elemType}[]`;
     }
     switch (type.value) {
         case declaration_1.FunctionArgumentType.int:
@@ -87,19 +131,34 @@ function generateVueComponent(blob) {
             && !object.name.endsWith('Events');
     });
     const dependencies = others.map(object => {
-        if (!object || !object.props) {
+        if (!object || !object.props || object.props.length === 0) {
             return '';
         }
-        const props = object.props.map(prop => {
-            if (prop.optional) {
-                return `${prop.name}?: ${generateReturnType(prop.type)};`;
+        const interfaceLines = [];
+        if (object.documentation && object.documentation.trim().length > 0) {
+            interfaceLines.push('/**');
+            object.documentation.split('\n').forEach(line => {
+                interfaceLines.push(` * ${line}`);
+            });
+            interfaceLines.push(' */');
+        }
+        interfaceLines.push(`interface ${object.name} {`);
+        const propLines = object.props.map(prop => {
+            const lines = [];
+            if (prop.documentation && prop.documentation.trim().length > 0) {
+                lines.push('  /**');
+                prop.documentation.split('\n').forEach(line => {
+                    lines.push(`   * ${line}`);
+                });
+                lines.push('   */');
             }
-            return `${prop.name}: ${generateReturnType(prop.type)};`;
-        }).join('\n  ');
-        return `
-interface ${object.name} {
-  ${props}
-}`;
+            const optionalToken = prop.optional ? '?' : '';
+            lines.push(`  ${prop.name}${optionalToken}: ${generateReturnType(prop.type)};`);
+            return lines.join('\n');
+        });
+        interfaceLines.push(propLines.join('\n'));
+        interfaceLines.push('}');
+        return interfaceLines.join('\n');
     }).filter(dep => dep.trim() !== '').join('\n\n');
     const componentProperties = properties.length > 0 ? properties[0] : undefined;
     const componentEvents = events.length > 0 ? events[0] : undefined;
@@ -131,6 +190,17 @@ interface ${object.name} {
     }).join('\n');
     return result;
 }
+function toVueTagName(className) {
+    if (className.startsWith('WebF')) {
+        const withoutPrefix = className.substring(4);
+        return 'web-f-' + lodash_1.default.kebabCase(withoutPrefix);
+    }
+    else if (className.startsWith('Flutter')) {
+        const withoutPrefix = className.substring(7);
+        return 'flutter-' + lodash_1.default.kebabCase(withoutPrefix);
+    }
+    return lodash_1.default.kebabCase(className);
+}
 function generateVueTypings(blobs) {
     const componentNames = blobs.map(blob => {
         const classObjects = blob.objects;
@@ -160,13 +230,46 @@ function generateVueTypings(blobs) {
     }).filter(component => {
         return component.length > 0;
     }).join('\n\n');
+    // Collect declare consts across blobs and render as exported ambient declarations
+    const consts = blobs
+        .flatMap(blob => blob.objects)
+        .filter(obj => obj instanceof declaration_1.ConstObject);
+    // Deduplicate by name keeping first occurrence
+    const uniqueConsts = new Map();
+    consts.forEach(c => {
+        if (!uniqueConsts.has(c.name))
+            uniqueConsts.set(c.name, c);
+    });
+    const constDeclarations = Array.from(uniqueConsts.values())
+        .map(c => `export declare const ${c.name}: ${c.type};`)
+        .join('\n');
+    // Collect declare enums across blobs
+    const enums = blobs
+        .flatMap(blob => blob.objects)
+        .filter(obj => obj instanceof declaration_1.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');
+    // Always import the types namespace to support typeof references
+    const typesImport = `import * as __webfTypes from './src/types';`;
+    (0, logger_1.debug)(`[vue] Generating typings; importing types from ./src/types`);
+    // Build mapping of template tag names to class names for GlobalComponents
+    const componentMetas = componentNames.map(className => ({
+        className,
+        tagName: toVueTagName(className),
+    }));
     const content = lodash_1.default.template(readTemplate('vue.components.d.ts'), {
         interpolate: /<%=([\s\S]+?)%>/g,
         evaluate: /<%([\s\S]+?)%>/g,
         escape: /<%-([\s\S]+?)%>/g
     })({
         componentNames,
+        componentMetas,
         components,
+        consts: constDeclarations,
+        enums: enumDeclarations,
+        typesImport,
     });
     return content.split('\n').filter(str => {
         return str.trim().length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwebf/webf",
-  "version": "0.23.0",
+  "version": "0.23.7",
   "description": "Command line tools for WebF",
   "main": "index.js",
   "bin": {

package/src/IDLBlob.ts

@@ -1,4 +1,4 @@
-import {ClassObject, FunctionObject, TypeAliasObject} from "./declaration";
+import {ClassObject, FunctionObject, TypeAliasObject, EnumObject} from "./declaration";
 
 export class IDLBlob {
   raw: string = '';
@@ -7,7 +7,7 @@ export class IDLBlob {
   filename: string;
   implement: string;
   relativeDir: string = '';
-  objects: (ClassObject | FunctionObject | TypeAliasObject)[] = [];
+  objects: (ClassObject | FunctionObject | TypeAliasObject | EnumObject)[] = [];
 
   constructor(source: string, dist: string, filename: string, implement: string, relativeDir: string = '') {
     this.source = source;