@openwebf/webf 0.23.10 → 0.24.0

package/src/module.ts

@@ -335,14 +335,14 @@ function mapTsParamTypeToDart(
   return { dartType: 'dynamic', isByteData: false };
 }
 
-function mapTsPropertyTypeToDart(type: ts.TypeNode): string {
+function mapTsPropertyTypeToDart(type: ts.TypeNode, optional: boolean): string {
   switch (type.kind) {
     case ts.SyntaxKind.StringKeyword:
-      return 'String?';
+      return optional ? 'String?' : 'String';
     case ts.SyntaxKind.NumberKeyword:
-      return 'num?';
+      return optional ? 'num?' : 'num';
     case ts.SyntaxKind.BooleanKeyword:
-      return 'bool?';
+      return optional ? 'bool?' : 'bool';
     default:
       return 'dynamic';
   }
@@ -380,16 +380,17 @@ function buildDartBindings(def: ModuleDefinition, command: string): string {
 
   for (const iface of optionInterfaces) {
     const name = iface.name.text;
-    const propInfos: { fieldName: string; key: string; dartType: string }[] = [];
+    const propInfos: { fieldName: string; key: string; dartType: string; optional: boolean }[] = [];
 
     for (const member of iface.members) {
       if (!ts.isPropertySignature(member) || !member.name) continue;
 
       const key = member.name.getText(def.sourceFile).replace(/['"]/g, '');
       const fieldName = key;
-      const dartType = member.type ? mapTsPropertyTypeToDart(member.type) : 'dynamic';
+      const optional = !!member.questionToken;
+      const dartType = member.type ? mapTsPropertyTypeToDart(member.type, optional) : 'dynamic';
 
-      propInfos.push({ fieldName, key, dartType });
+      propInfos.push({ fieldName, key, dartType, optional });
     }
 
     lines.push(`class ${name} {`);
@@ -398,23 +399,50 @@ function buildDartBindings(def: ModuleDefinition, command: string): string {
     }
     lines.push('');
 
-    const ctorParams = propInfos.map(p => `this.${p.fieldName}`).join(', ');
+    const ctorParams = propInfos.map(p => {
+      if (p.optional || p.dartType === 'dynamic') {
+        return `this.${p.fieldName}`;
+      }
+      return `required this.${p.fieldName}`;
+    }).join(', ');
     lines.push(`  const ${name}({${ctorParams}});`);
     lines.push('');
 
     lines.push(`  factory ${name}.fromMap(Map<String, dynamic> map) {`);
     lines.push(`    return ${name}(`);
     for (const prop of propInfos) {
-      if (prop.dartType.startsWith('String')) {
-        lines.push(`      ${prop.fieldName}: map['${prop.key}']?.toString(),`);
-      } else if (prop.dartType.startsWith('bool')) {
-        lines.push(
-          `      ${prop.fieldName}: map['${prop.key}'] is bool ? map['${prop.key}'] as bool : null,`
-        );
-      } else if (prop.dartType.startsWith('num')) {
-        lines.push(
-          `      ${prop.fieldName}: map['${prop.key}'] is num ? map['${prop.key}'] as num : null,`
-        );
+      const isString = prop.dartType.startsWith('String');
+      const isBool = prop.dartType.startsWith('bool');
+      const isNum = prop.dartType.startsWith('num');
+
+      if (isString) {
+        if (prop.optional) {
+          lines.push(`      ${prop.fieldName}: map['${prop.key}']?.toString(),`);
+        } else {
+          lines.push(
+            `      ${prop.fieldName}: map['${prop.key}']?.toString() ?? '',`
+          );
+        }
+      } else if (isBool) {
+        if (prop.optional) {
+          lines.push(
+            `      ${prop.fieldName}: map['${prop.key}'] is bool ? map['${prop.key}'] as bool : null,`
+          );
+        } else {
+          lines.push(
+            `      ${prop.fieldName}: map['${prop.key}'] is bool ? map['${prop.key}'] as bool : false,`
+          );
+        }
+      } else if (isNum) {
+        if (prop.optional) {
+          lines.push(
+            `      ${prop.fieldName}: map['${prop.key}'] is num ? map['${prop.key}'] as num : null,`
+          );
+        } else {
+          lines.push(
+            `      ${prop.fieldName}: map['${prop.key}'] is num ? map['${prop.key}'] as num : 0,`
+          );
+        }
       } else {
         lines.push(`      ${prop.fieldName}: map['${prop.key}'],`);
       }
@@ -426,9 +454,13 @@ function buildDartBindings(def: ModuleDefinition, command: string): string {
     lines.push('  Map<String, dynamic> toMap() {');
     lines.push('    final map = <String, dynamic>{};');
     for (const prop of propInfos) {
-      lines.push(
-        `    if (${prop.fieldName} != null) { map['${prop.key}'] = ${prop.fieldName}; }`
-      );
+      if (!prop.optional && (prop.dartType === 'String' || prop.dartType === 'bool' || prop.dartType === 'num')) {
+        lines.push(`    map['${prop.key}'] = ${prop.fieldName};`);
+      } else {
+        lines.push(
+          `    if (${prop.fieldName} != null) { map['${prop.key}'] = ${prop.fieldName}; }`
+        );
+      }
     }
     lines.push('    return map;');
     lines.push('  }');

package/src/peerDeps.ts

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import path from 'path';
+
+export function readJsonFile(jsonPath: string): any {
+  return JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+}
+
+export function getPackageTypesFileFromDir(pkgDir: string): string | null {
+  const pkgJsonPath = path.join(pkgDir, 'package.json');
+  if (!fs.existsSync(pkgJsonPath)) return null;
+  const pkgJson = readJsonFile(pkgJsonPath);
+  const typesRel: string | undefined = pkgJson.types;
+  if (!typesRel) return null;
+  return path.join(pkgDir, typesRel);
+}
+
+export function isPackageTypesReady(pkgDir: string): boolean {
+  const typesFile = getPackageTypesFileFromDir(pkgDir);
+  return typesFile ? fs.existsSync(typesFile) : true;
+}
+

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

@@ -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'],
 })