@openwebf/webf 0.23.2 → 0.23.7

package/dist/dart.js

@@ -79,19 +79,55 @@ ${enumValues};
   String toString() => value;
 }`;
 }
+function hasNullInUnion(type) {
+    if (!Array.isArray(type.value))
+        return false;
+    return type.value.some(t => t.value === declaration_1.FunctionArgumentType.null);
+}
+function isBooleanType(type) {
+    if (Array.isArray(type.value)) {
+        return type.value.some(t => t.value === declaration_1.FunctionArgumentType.boolean);
+    }
+    return type.value === declaration_1.FunctionArgumentType.boolean;
+}
 function generateReturnType(type, enumName) {
     // Handle union types first (e.g., 'left' | 'center' | 'right')
     // so we don't incorrectly treat string literal unions as pointer types.
     if (Array.isArray(type.value)) {
-        // If we have an enum name, use it; otherwise fall back to String
-        return enumName || 'String';
+        // If we have an enum name, always use it (nullable handled separately)
+        if (enumName) {
+            return enumName;
+        }
+        // If this is a union that includes null and exactly one non-null type,
+        // generate the Dart type from the non-null part instead of falling back to String.
+        const trimmed = (0, utils_1.trimNullTypeFromType)(type);
+        if (!Array.isArray(trimmed.value)) {
+            return generateReturnType(trimmed, enumName);
+        }
+        // Fallback for complex unions: use String
+        return 'String';
     }
     if ((0, utils_1.isPointerType)(type)) {
         const pointerType = (0, utils_1.getPointerType)(type);
+        // Map TS typeof expressions to Dart dynamic
+        if (typeof pointerType === 'string' && pointerType.startsWith('typeof ')) {
+            return 'dynamic';
+        }
+        // Map references to known string enums to String in Dart
+        if (typeof pointerType === 'string' && declaration_1.EnumObject.globalEnumSet.has(pointerType)) {
+            return 'String';
+        }
         return pointerType;
     }
     if (type.isArray && typeof type.value === 'object' && !Array.isArray(type.value)) {
-        return `${(0, utils_1.getPointerType)(type.value)}[]`;
+        const elem = (0, utils_1.getPointerType)(type.value);
+        if (typeof elem === 'string' && elem.startsWith('typeof ')) {
+            return `dynamic[]`;
+        }
+        if (typeof elem === 'string' && declaration_1.EnumObject.globalEnumSet.has(elem)) {
+            return 'String[]';
+        }
+        return `${elem}[]`;
     }
     // Handle when type.value is a ParameterType object (nested type)
     if (typeof type.value === 'object' && !Array.isArray(type.value) && type.value !== null) {
@@ -106,7 +142,8 @@ function generateReturnType(type, enumName) {
             return 'double';
         }
         case declaration_1.FunctionArgumentType.any: {
-            return 'any';
+            // Dart doesn't have `any`; use `dynamic`.
+            return 'dynamic';
         }
         case declaration_1.FunctionArgumentType.boolean: {
             return 'bool';
@@ -135,41 +172,59 @@ function generateEventHandlerType(type) {
 }
 function generateAttributeSetter(propName, type, enumName) {
     // Attributes from HTML are always strings, so we need to convert them
+    const unionHasNull = hasNullInUnion(type);
     // Handle enum types
     if (enumName && Array.isArray(type.value)) {
+        if (unionHasNull) {
+            return `${propName} = value == 'null' ? null : ${enumName}.parse(value)`;
+        }
         return `${propName} = ${enumName}.parse(value)`;
     }
-    switch (type.value) {
-        case declaration_1.FunctionArgumentType.boolean:
-            return `${propName} = value == 'true' || value == ''`;
-        case declaration_1.FunctionArgumentType.int:
-            return `${propName} = int.tryParse(value) ?? 0`;
-        case declaration_1.FunctionArgumentType.double:
-            return `${propName} = double.tryParse(value) ?? 0.0`;
-        default:
-            // String and other types can be assigned directly
-            return `${propName} = value`;
+    const effectiveType = Array.isArray(type.value) && unionHasNull
+        ? (0, utils_1.trimNullTypeFromType)(type)
+        : type;
+    const baseSetter = (() => {
+        switch (effectiveType.value) {
+            case declaration_1.FunctionArgumentType.boolean:
+                return `${propName} = value == 'true' || value == ''`;
+            case declaration_1.FunctionArgumentType.int:
+                return `${propName} = int.tryParse(value) ?? 0`;
+            case declaration_1.FunctionArgumentType.double:
+                return `${propName} = double.tryParse(value) ?? 0.0`;
+            default:
+                // String and other types can be assigned directly
+                return `${propName} = value`;
+        }
+    })();
+    if (unionHasNull) {
+        const assignmentPrefix = `${propName} = `;
+        const rhs = baseSetter.startsWith(assignmentPrefix)
+            ? baseSetter.slice(assignmentPrefix.length)
+            : 'value';
+        return `${propName} = value == 'null' ? null : (${rhs})`;
     }
+    return baseSetter;
 }
-function generateAttributeGetter(propName, type, optional, enumName) {
+function generateAttributeGetter(propName, type, isNullable, enumName) {
     // Handle enum types
     if (enumName && Array.isArray(type.value)) {
-        return optional ? `${propName}?.value` : `${propName}.value`;
+        return isNullable ? `${propName}?.value` : `${propName}.value`;
     }
     // Handle nullable properties - they should return null if the value is null
-    if (optional && type.value !== declaration_1.FunctionArgumentType.boolean) {
+    if (isNullable) {
         // For nullable properties, we need to handle null values properly
         return `${propName}?.toString()`;
     }
-    // For non-nullable properties (including booleans), always convert to string
+    // For non-nullable properties, always convert to string
     return `${propName}.toString()`;
 }
 function generateAttributeDeleter(propName, type, optional) {
     // When deleting an attribute, we should reset it to its default value
+    if (isBooleanType(type)) {
+        // Booleans (including unions with null) default to false
+        return `${propName} = false`;
+    }
     switch (type.value) {
-        case declaration_1.FunctionArgumentType.boolean:
-            // Booleans default to false
-            return `${propName} = false`;
         case declaration_1.FunctionArgumentType.int:
             // Integers default to 0
             return `${propName} = 0`;
@@ -201,10 +256,20 @@ function generateMethodDeclaration(method) {
     return `${methodName}(${args}): ${returnType};`;
 }
 function shouldMakeNullable(prop) {
-    // Boolean properties should never be nullable in Dart, even if optional in TypeScript
-    if (prop.type.value === declaration_1.FunctionArgumentType.boolean) {
+    const type = prop.type;
+    // Boolean properties are only nullable in Dart when explicitly unioned with `null`.
+    if (isBooleanType(type)) {
+        return hasNullInUnion(type);
+    }
+    // Dynamic (any) should not use nullable syntax; dynamic already allows null
+    if (type.value === declaration_1.FunctionArgumentType.any) {
         return false;
     }
+    // Properties with an explicit `null` in their type should be nullable,
+    // even if they are not marked optional in TypeScript.
+    if (hasNullInUnion(type)) {
+        return true;
+    }
     // Other optional properties remain nullable
     return prop.optional;
 }
@@ -287,8 +352,9 @@ interface ${object.name} {
         generateAttributeSetter: (propName, type) => {
             return generateAttributeSetter(propName, type, enumMap.get(propName));
         },
-        generateAttributeGetter: (propName, type, optional) => {
-            return generateAttributeGetter(propName, type, optional, enumMap.get(propName));
+        generateAttributeGetter: (propName, type, optional, prop) => {
+            const isNullable = prop ? shouldMakeNullable(prop) : optional;
+            return generateAttributeGetter(propName, type, isNullable, enumMap.get(propName));
         },
         generateAttributeDeleter,
         shouldMakeNullable,

package/dist/declaration.js

@@ -73,3 +73,4 @@ class EnumObject {
     }
 }
 exports.EnumObject = EnumObject;
+EnumObject.globalEnumSet = new Set();

package/dist/generator.js

@@ -282,6 +282,8 @@ function reactGen(_a) {
                 if (writeFileIfChanged(fullPath, result)) {
                     filesChanged++;
                     (0, logger_1.debug)(`Generated: ${path_1.default.basename(fullPath)}`);
+                    // Emit a short preview for debugging when WEBF_DEBUG is on
+                    (0, logger_1.debug)(`Preview (${path_1.default.basename(fullPath)}):\n` + result.split('\n').slice(0, 12).join('\n'));
                 }
             }
             catch (err) {
@@ -379,7 +381,7 @@ function reactGen(_a) {
         (0, logger_1.success)(`React code generation completed. ${filesChanged} files changed.`);
         (0, logger_1.info)(`Output directory: ${normalizedTarget}`);
         (0, logger_1.info)('You can now import these components in your React project.');
-        // Aggregate standalone type declarations (consts/enums/type aliases) into a single types.d.ts
+        // Aggregate standalone type declarations (consts/enums/type aliases) into a single types.ts
         try {
             const consts = blobs.flatMap(b => b.objects.filter(o => o instanceof declaration_1.ConstObject));
             const enums = blobs.flatMap(b => b.objects.filter(o => o instanceof declaration_1.EnumObject));
@@ -397,7 +399,7 @@ function reactGen(_a) {
                     .map(c => `export declare const ${c.name}: ${c.type};`)
                     .join('\n');
                 const enumDecl = enums
-                    .map(e => `export declare enum ${e.name} { ${e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ')} }`)
+                    .map(e => `export enum ${e.name} { ${e.members.map(m => m.initializer ? `${m.name} = ${m.initializer}` : `${m.name}`).join(', ')} }`)
                     .join('\n');
                 const typeAliasDecl = Array.from(typeAliasMap.values())
                     .map(t => `export type ${t.name} = ${t.type};`)
@@ -409,33 +411,40 @@ function reactGen(_a) {
                     enumDecl,
                     ''
                 ].filter(Boolean).join('\n');
-                const typesPath = path_1.default.join(normalizedTarget, 'src', 'types.d.ts');
+                const typesPath = path_1.default.join(normalizedTarget, 'src', 'types.ts');
                 if (writeFileIfChanged(typesPath, typesContent)) {
                     filesChanged++;
-                    (0, logger_1.debug)(`Generated: src/types.d.ts`);
+                    (0, logger_1.debug)(`Generated: src/types.ts`);
+                    try {
+                        const constNames = Array.from(constMap.keys());
+                        const aliasNames = Array.from(typeAliasMap.keys());
+                        const enumNames = enums.map(e => e.name);
+                        (0, logger_1.debug)(`[react] Aggregated types - consts: ${constNames.join(', ') || '(none)'}; typeAliases: ${aliasNames.join(', ') || '(none)'}; enums: ${enumNames.join(', ') || '(none)'}\n`);
+                        (0, logger_1.debug)(`[react] src/types.ts preview:\n` + typesContent.split('\n').slice(0, 20).join('\n'));
+                    }
+                    catch (_b) { }
                 }
-                // Try to help TypeScript pick up additional declarations by adding a reference comment.
-                // This avoids bundler resolution errors from importing a .d.ts file.
+                // Ensure index.ts re-exports these types so consumers get them on import.
                 const indexFilePath = path_1.default.join(normalizedTarget, 'src', 'index.ts');
                 try {
+                    let current = '';
                     if (fs_1.default.existsSync(indexFilePath)) {
-                        let current = fs_1.default.readFileSync(indexFilePath, 'utf-8');
-                        const refLine = `/// <reference path="./types.d.ts" />`;
-                        if (!current.includes(refLine)) {
-                            // Place the reference at the very top, before any code
-                            const updated = `${refLine}\n${current}`;
-                            if (writeFileIfChanged(indexFilePath, updated)) {
-                                filesChanged++;
-                                (0, logger_1.debug)(`Updated: src/index.ts with reference to types.d.ts`);
-                            }
+                        current = fs_1.default.readFileSync(indexFilePath, 'utf-8');
+                    }
+                    const exportLine = `export * from './types';`;
+                    if (!current.includes(exportLine)) {
+                        const updated = current.trim().length ? `${current.trim()}\n${exportLine}\n` : `${exportLine}\n`;
+                        if (writeFileIfChanged(indexFilePath, updated)) {
+                            filesChanged++;
+                            (0, logger_1.debug)(`Updated: src/index.ts to export aggregated types`);
                         }
                     }
                 }
-                catch (_b) { }
+                catch (_c) { }
             }
         }
         catch (e) {
-            (0, logger_1.warn)('Failed to generate aggregated React types.d.ts');
+            (0, logger_1.warn)('Failed to generate aggregated React types');
         }
     });
 }

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:
@@ -146,11 +185,18 @@ function generateReactComponent(blob, packageName, relativeDir) {
     }).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
+    // 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 declare enum ${e.name} { ${members} }`;
+        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,
@@ -160,26 +206,49 @@ function generateReactComponent(blob, packageName, relativeDir) {
             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 = [];
@@ -232,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,
@@ -268,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,
@@ -278,7 +519,7 @@ interface ${object.name} {
             blob,
             toReactEventName,
             toWebFTagName,
-            generateReturnType,
+            generateReturnType: genRT,
             generateMethodDeclaration,
             generateMethodDeclarationWithDocs,
             generateEventHandlerType,
@@ -292,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,
         '',