@openwebf/webf 0.24.1 → 0.24.2

package/src/analyzer.ts

@@ -410,6 +410,188 @@ function handleGenericWrapper(typeReference: ts.TypeReferenceNode, mode?: Parame
   return getParameterBaseType(argument, mode);
 }
 
+const customEventTypePrinter = ts.createPrinter({ removeComments: true });
+
+function mapTypeReferenceIdentifierToTsType(identifier: string): string | null {
+  const mappedType = TYPE_REFERENCE_MAP[identifier];
+  if (mappedType === undefined) return null;
+  switch (mappedType) {
+    case FunctionArgumentType.boolean:
+      return 'boolean';
+    case FunctionArgumentType.dom_string:
+      return 'string';
+    case FunctionArgumentType.double:
+    case FunctionArgumentType.int:
+      return 'number';
+    case FunctionArgumentType.any:
+      return 'any';
+    case FunctionArgumentType.void:
+      return 'void';
+    case FunctionArgumentType.function:
+      return 'Function';
+    case FunctionArgumentType.promise:
+      return 'Promise<any>';
+    default:
+      return null;
+  }
+}
+
+function getBasicTypeKindAsTsType(kind: ts.SyntaxKind): string | null {
+  const basicType = BASIC_TYPE_MAP[kind];
+  if (basicType === undefined) return null;
+  switch (basicType) {
+    case FunctionArgumentType.boolean:
+      return 'boolean';
+    case FunctionArgumentType.dom_string:
+      return 'string';
+    case FunctionArgumentType.double:
+    case FunctionArgumentType.int:
+      return 'number';
+    case FunctionArgumentType.any:
+      return 'any';
+    case FunctionArgumentType.void:
+      return 'void';
+    case FunctionArgumentType.null:
+      return 'null';
+    case FunctionArgumentType.undefined:
+      return 'undefined';
+    default:
+      return null;
+  }
+}
+
+function stringifyEntityName(name: ts.EntityName): string {
+  if (ts.isIdentifier(name)) return name.text;
+  return `${stringifyEntityName(name.left)}.${name.right.text}`;
+}
+
+function safePrintCustomEventNode(node: ts.Node): string {
+  const sourceFile = node.getSourceFile();
+  const printed = customEventTypePrinter.printNode(ts.EmitHint.Unspecified, node, sourceFile);
+  // Ensure WebF IDL-like aliases used in type definitions do not leak into generated TypeScript packages.
+  return printed.replace(/\bint\b/g, 'number').replace(/\bdouble\b/g, 'number');
+}
+
+function stringifyCustomEventGenericTypeNode(typeNode: ts.TypeNode): string | null {
+  if (ts.isParenthesizedTypeNode(typeNode)) {
+    const inner = stringifyCustomEventGenericTypeNode(typeNode.type);
+    return inner ? `(${inner})` : null;
+  }
+
+  if (ts.isUnionTypeNode(typeNode)) {
+    const parts = typeNode.types.map(t => stringifyCustomEventGenericTypeNode(t)).filter((t): t is string => Boolean(t));
+    return parts.length === typeNode.types.length ? parts.join(' | ') : null;
+  }
+
+  if (ts.isIntersectionTypeNode(typeNode)) {
+    const parts = typeNode.types.map(t => stringifyCustomEventGenericTypeNode(t)).filter((t): t is string => Boolean(t));
+    return parts.length === typeNode.types.length ? parts.join(' & ') : null;
+  }
+
+  if (ts.isArrayTypeNode(typeNode)) {
+    const element = stringifyCustomEventGenericTypeNode(typeNode.elementType);
+    return element ? `${element}[]` : null;
+  }
+
+  if (ts.isTupleTypeNode(typeNode)) {
+    const elements = typeNode.elements.map(e => stringifyCustomEventGenericTypeNode(e)).filter((t): t is string => Boolean(t));
+    return elements.length === typeNode.elements.length ? `[${elements.join(', ')}]` : null;
+  }
+
+  if (ts.isLiteralTypeNode(typeNode)) {
+    const literal = typeNode.literal;
+    if (literal.kind === ts.SyntaxKind.NullKeyword) return 'null';
+    if (literal.kind === ts.SyntaxKind.UndefinedKeyword) return 'undefined';
+    if (literal.kind === ts.SyntaxKind.TrueKeyword) return 'true';
+    if (literal.kind === ts.SyntaxKind.FalseKeyword) return 'false';
+    if (ts.isStringLiteral(literal)) return JSON.stringify(literal.text);
+    if (ts.isNumericLiteral(literal)) return literal.text;
+    return null;
+  }
+
+  const basic = getBasicTypeKindAsTsType(typeNode.kind);
+  if (basic) return basic;
+
+  if (ts.isTypeReferenceNode(typeNode)) {
+    const typeName = stringifyEntityName(typeNode.typeName);
+
+    // Unwrap internal helpers used by WebF typings.
+    if (typeName === 'DartImpl' && typeNode.typeArguments && typeNode.typeArguments[0]) {
+      return stringifyCustomEventGenericTypeNode(typeNode.typeArguments[0]);
+    }
+
+    if (typeName === 'Promise') {
+      if (!typeNode.typeArguments || !typeNode.typeArguments[0]) return 'Promise<any>';
+      const inner = stringifyCustomEventGenericTypeNode(typeNode.typeArguments[0]);
+      return inner ? `Promise<${inner}>` : null;
+    }
+
+    const mapped = mapTypeReferenceIdentifierToTsType(typeName);
+    if (mapped) return mapped;
+
+    if (!typeNode.typeArguments || typeNode.typeArguments.length === 0) {
+      return typeName;
+    }
+
+    const args = typeNode.typeArguments
+      .map(arg => stringifyCustomEventGenericTypeNode(arg))
+      .filter((t): t is string => Boolean(t));
+    if (args.length !== typeNode.typeArguments.length) return null;
+    return `${typeName}<${args.join(', ')}>`;
+  }
+
+  if (ts.isTypeLiteralNode(typeNode)) {
+    const members: string[] = [];
+    for (const member of typeNode.members) {
+      if (ts.isPropertySignature(member) && member.type) {
+        const typeString = stringifyCustomEventGenericTypeNode(member.type);
+        if (!typeString) return null;
+        let nameText: string;
+        if (ts.isIdentifier(member.name)) nameText = member.name.text;
+        else if (ts.isStringLiteral(member.name)) nameText = JSON.stringify(member.name.text);
+        else if (ts.isNumericLiteral(member.name)) nameText = member.name.text;
+        else nameText = member.name.getText();
+        const optional = member.questionToken ? '?' : '';
+        members.push(`${nameText}${optional}: ${typeString}`);
+        continue;
+      }
+      if (ts.isIndexSignatureDeclaration(member) && member.type && member.parameters.length === 1) {
+        const param = member.parameters[0];
+        const paramName = ts.isIdentifier(param.name) ? param.name.text : param.name.getText();
+        const paramType = param.type ? stringifyCustomEventGenericTypeNode(param.type) : 'string';
+        const valueType = stringifyCustomEventGenericTypeNode(member.type);
+        if (!paramType || !valueType) return null;
+        members.push(`[${paramName}: ${paramType}]: ${valueType}`);
+        continue;
+      }
+      // Fallback for uncommon members (call signatures, method signatures, etc.).
+      members.push(safePrintCustomEventNode(member));
+    }
+    return `{ ${members.join('; ')} }`;
+  }
+
+  if (ts.isTypeOperatorNode(typeNode)) {
+    const inner = stringifyCustomEventGenericTypeNode(typeNode.type);
+    if (!inner) return null;
+    const operator =
+      typeNode.operator === ts.SyntaxKind.KeyOfKeyword ? 'keyof' :
+      typeNode.operator === ts.SyntaxKind.ReadonlyKeyword ? 'readonly' :
+      typeNode.operator === ts.SyntaxKind.UniqueKeyword ? 'unique' :
+      null;
+    return operator ? `${operator} ${inner}` : null;
+  }
+
+  if (ts.isIndexedAccessTypeNode(typeNode)) {
+    const objectType = stringifyCustomEventGenericTypeNode(typeNode.objectType);
+    const indexType = stringifyCustomEventGenericTypeNode(typeNode.indexType);
+    if (!objectType || !indexType) return null;
+    return `${objectType}[${indexType}]`;
+  }
+
+  // As a last resort, keep the original syntax but normalize known WebF aliases.
+  return safePrintCustomEventNode(typeNode);
+}
+
 function handleCustomEventType(typeReference: ts.TypeReferenceNode): ParameterBaseType {
   // Handle CustomEvent<T> by returning the full type with generic parameter
   if (!typeReference.typeArguments || !typeReference.typeArguments[0]) {
@@ -417,121 +599,11 @@ function handleCustomEventType(typeReference: ts.TypeReferenceNode): ParameterBa
   }
   
   const argument = typeReference.typeArguments[0];
-  let genericType: string;
-  
-  // Preserve simple union/compound generic types (e.g., boolean | null)
-  if (ts.isUnionTypeNode(argument) || ts.isIntersectionTypeNode(argument)) {
-    const unionTypes = (argument as ts.UnionTypeNode | ts.IntersectionTypeNode).types ?? [];
-    const parts = unionTypes.map(t => {
-      // Literal union members: handle null/undefined explicitly
-      if (ts.isLiteralTypeNode(t)) {
-        const lit = t.literal;
-        if (lit.kind === ts.SyntaxKind.NullKeyword) return 'null';
-        if (lit.kind === ts.SyntaxKind.UndefinedKeyword) return 'undefined';
-        if (ts.isStringLiteral(lit)) return JSON.stringify(lit.text);
-        return 'any';
-      }
-      // Basic keywords: boolean, string, number, null, undefined
-      const basic = BASIC_TYPE_MAP[t.kind];
-      if (basic !== undefined) {
-        switch (basic) {
-          case FunctionArgumentType.boolean:
-            return 'boolean';
-          case FunctionArgumentType.dom_string:
-            return 'string';
-          case FunctionArgumentType.double:
-          case FunctionArgumentType.int:
-            return 'number';
-          case FunctionArgumentType.null:
-            return 'null';
-          case FunctionArgumentType.undefined:
-            return 'undefined';
-          default:
-            return 'any';
-        }
-      }
-      // Literal null/undefined keywords that BASIC_TYPE_MAP may not cover
-      if (t.kind === ts.SyntaxKind.NullKeyword) return 'null';
-      if (t.kind === ts.SyntaxKind.UndefinedKeyword) return 'undefined';
-      // Fallback: rely on toString of node kind
-      return 'any';
-    });
-    genericType = parts.join(' | ');
-  } else if (ts.isTypeReferenceNode(argument) && ts.isIdentifier(argument.typeName)) {
-    const typeName = argument.typeName.text;
-    
-    // Check if it's a mapped type reference like 'int' or 'double'
-    const mappedType = TYPE_REFERENCE_MAP[typeName];
-    if (mappedType !== undefined) {
-      switch (mappedType) {
-        case FunctionArgumentType.boolean:
-          genericType = 'boolean';
-          break;
-        case FunctionArgumentType.dom_string:
-          genericType = 'string';
-          break;
-        case FunctionArgumentType.double:
-        case FunctionArgumentType.int:
-          genericType = 'number';
-          break;
-        case FunctionArgumentType.any:
-          genericType = 'any';
-          break;
-        case FunctionArgumentType.void:
-          genericType = 'void';
-          break;
-        case FunctionArgumentType.function:
-          genericType = 'Function';
-          break;
-        case FunctionArgumentType.promise:
-          genericType = 'Promise<any>';
-          break;
-        default:
-          genericType = typeName;
-      }
-    } else {
-      // For other type references, use the type name directly
-      genericType = typeName;
-    }
-  } else if (ts.isLiteralTypeNode(argument) && ts.isStringLiteral(argument.literal)) {
-    genericType = argument.literal.text;
-  } else {
-    // Handle basic types (boolean, string, number, etc.)
-    const basicType = BASIC_TYPE_MAP[argument.kind];
-    if (basicType !== undefined) {
-      switch (basicType) {
-        case FunctionArgumentType.boolean:
-          genericType = 'boolean';
-          break;
-        case FunctionArgumentType.dom_string:
-          genericType = 'string';
-          break;
-        case FunctionArgumentType.double:
-        case FunctionArgumentType.int:
-          genericType = 'number';
-          break;
-        case FunctionArgumentType.any:
-          genericType = 'any';
-          break;
-        case FunctionArgumentType.void:
-          genericType = 'void';
-          break;
-        case FunctionArgumentType.null:
-          genericType = 'null';
-          break;
-        case FunctionArgumentType.undefined:
-          genericType = 'undefined';
-          break;
-        default:
-          genericType = 'any';
-      }
-    } else {
-      // For truly complex types, fallback to 'any' to avoid errors
-      console.warn('Complex generic type in CustomEvent, using any');
-      genericType = 'any';
-    }
+  const genericType = stringifyCustomEventGenericTypeNode(argument);
+  if (!genericType) {
+    console.warn('Complex generic type in CustomEvent, using any');
+    return 'CustomEvent<any>';
   }
-  
   return `CustomEvent<${genericType}>`;
 }
 

package/src/commands.ts

@@ -177,8 +177,8 @@ const moduleTsConfig = fs.readFileSync(
   'utf-8'
 );
 
-const moduleTsUpConfig = fs.readFileSync(
-  path.resolve(__dirname, '../templates/module.tsup.config.ts.tpl'),
+const moduleTsDownConfig = fs.readFileSync(
+  path.resolve(__dirname, '../templates/module.tsdown.config.ts.tpl'),
   'utf-8'
 );
 const reactPackageJson = fs.readFileSync(
@@ -191,8 +191,8 @@ const reactTsConfig = fs.readFileSync(
   'utf-8'
 );
 
-const reactTsUpConfig = fs.readFileSync(
-  path.resolve(__dirname, '../templates/react.tsup.config.ts.tpl'),
+const reactTsDownConfig = fs.readFileSync(
+  path.resolve(__dirname, '../templates/react.tsdown.config.ts.tpl'),
   'utf-8'
 );
 
@@ -239,6 +239,40 @@ function readFlutterPackageMetadata(packagePath: string): FlutterPackageMetadata
   }
 }
 
+function copyReadmeToPackageRoot(params: {
+  sourceRoot: string;
+  targetRoot: string;
+}): { copied: boolean; sourcePath?: string; targetPath: string } {
+  const { sourceRoot, targetRoot } = params;
+  const targetPath = path.join(targetRoot, 'README.md');
+
+  if (fs.existsSync(targetPath)) {
+    return { copied: false, targetPath };
+  }
+
+  const candidateNames = ['README.md', 'Readme.md', 'readme.md'];
+  let sourcePath: string | null = null;
+  for (const candidate of candidateNames) {
+    const abs = path.join(sourceRoot, candidate);
+    if (fs.existsSync(abs)) {
+      sourcePath = abs;
+      break;
+    }
+  }
+
+  if (!sourcePath) {
+    return { copied: false, targetPath };
+  }
+
+  try {
+    const content = fs.readFileSync(sourcePath, 'utf-8');
+    writeFileIfChanged(targetPath, content);
+    return { copied: true, sourcePath, targetPath };
+  } catch {
+    return { copied: false, targetPath };
+  }
+}
+
 // Copy markdown docs that match .d.ts basenames from source to the built dist folder,
 // and generate an aggregated README.md in the dist directory.
 async function copyMarkdownDocsToDist(params: {
@@ -419,9 +453,9 @@ function createCommand(target: string, options: { framework: string; packageName
     const tsConfigContent = _.template(reactTsConfig)({});
     writeFileIfChanged(tsConfigPath, tsConfigContent);
 
-    const tsupConfigPath = path.join(target, 'tsup.config.ts');
-    const tsupConfigContent = _.template(reactTsUpConfig)({});
-    writeFileIfChanged(tsupConfigPath, tsupConfigContent);
+    const tsdownConfigPath = path.join(target, 'tsdown.config.ts');
+    const tsdownConfigContent = _.template(reactTsDownConfig)({});
+    writeFileIfChanged(tsdownConfigPath, tsdownConfigContent);
 
     const gitignorePath = path.join(target, '.gitignore');
     const gitignoreContent = _.template(gitignore)({});
@@ -498,9 +532,9 @@ function createModuleProject(target: string, options: { packageName: string; met
   const tsConfigContent = _.template(moduleTsConfig)({});
   writeFileIfChanged(tsConfigPath, tsConfigContent);
 
-  const tsupConfigPath = path.join(target, 'tsup.config.ts');
-  const tsupConfigContent = _.template(moduleTsUpConfig)({});
-  writeFileIfChanged(tsupConfigPath, tsupConfigContent);
+  const tsdownConfigPath = path.join(target, 'tsdown.config.ts');
+  const tsdownConfigContent = _.template(moduleTsDownConfig)({});
+  writeFileIfChanged(tsdownConfigPath, tsdownConfigContent);
 
   if (!skipGitignore) {
     const gitignorePath = path.join(target, '.gitignore');
@@ -780,6 +814,17 @@ async function generateCommand(distPath: string, options: GenerateOptions): Prom
   // Auto-initialize typings in the output directory if needed
   ensureInitialized(resolvedDistPath);
 
+  // Copy README.md from the source Flutter package into the npm package root (so `npm publish` includes it).
+  if (options.flutterPackageSrc) {
+    const { copied } = copyReadmeToPackageRoot({
+      sourceRoot: options.flutterPackageSrc,
+      targetRoot: resolvedDistPath,
+    });
+    if (copied) {
+      console.log('📄 Copied README.md to package root');
+    }
+  }
+
   console.log(`\nGenerating ${framework} code from ${options.flutterPackageSrc}...`);
 
   await dartGen({
@@ -1019,7 +1064,7 @@ async function generateModuleCommand(distPath: string, options: GenerateOptions)
     packageName = packageNameAnswer.packageName;
   }
 
-  // Prevent npm scaffolding (package.json, tsup.config.ts, etc.) from being written into
+  // Prevent npm scaffolding (package.json, tsdown.config.ts, etc.) from being written into
   // the Flutter package itself. Force users to choose a separate output directory.
   if (resolvedDistPath === flutterPackageSrc) {
     console.error('\n❌ Output directory must not be the Flutter package root.');
@@ -1070,6 +1115,15 @@ async function generateModuleCommand(distPath: string, options: GenerateOptions)
     command,
   });
 
+  // Copy README.md from the source Flutter package into the npm package root
+  const { copied } = copyReadmeToPackageRoot({
+    sourceRoot: flutterPackageSrc,
+    targetRoot: resolvedDistPath,
+  });
+  if (copied) {
+    console.log('📄 Copied README.md to package root');
+  }
+
   console.log('\nModule code generation completed successfully!');
 
   try {

package/src/generator.ts

@@ -329,7 +329,8 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
   const newExports = generateReactIndex(blobs);
 
   // Build desired export map: moduleSpecifier -> Set of names
-  const desiredExports = new Map<string, Set<string>>();
+  const desiredValueExports = new Map<string, Set<string>>();
+  const desiredTypeExports = new Map<string, Set<string>>();
   const components = blobs.flatMap(blob => {
     const classObjects = blob.objects.filter(obj => obj instanceof ClassObject) as ClassObject[];
     const properties = classObjects.filter(object => object.name.endsWith('Properties'));
@@ -351,10 +352,10 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
   }
   for (const { className, fileName, relativeDir } of unique.values()) {
     const spec = `./${relativeDir ? `${relativeDir}/` : ''}${fileName}`;
-    if (!desiredExports.has(spec)) desiredExports.set(spec, new Set());
-    const set = desiredExports.get(spec)!;
-    set.add(className);
-    set.add(`${className}Element`);
+    if (!desiredValueExports.has(spec)) desiredValueExports.set(spec, new Set());
+    if (!desiredTypeExports.has(spec)) desiredTypeExports.set(spec, new Set());
+    desiredValueExports.get(spec)!.add(className);
+    desiredTypeExports.get(spec)!.add(`${className}Element`);
   }
 
   if (!fs.existsSync(indexFilePath)) {
@@ -376,22 +377,41 @@ export async function reactGen({ source, target, exclude, packageName }: Generat
             ? stmt.moduleSpecifier.text
             : undefined;
           if (!moduleSpecifier) continue;
-          const desired = desiredExports.get(moduleSpecifier);
-          if (!desired) continue;
+          const desiredValues = desiredValueExports.get(moduleSpecifier);
+          const desiredTypes = desiredTypeExports.get(moduleSpecifier);
+          if (!desiredValues && !desiredTypes) continue;
+          const declIsTypeOnly = Boolean((stmt as unknown as { isTypeOnly?: boolean }).isTypeOnly);
           for (const el of stmt.exportClause.elements) {
             const name = el.name.getText(sourceFile);
-            if (desired.has(name)) desired.delete(name);
+            const specIsTypeOnly = Boolean((el as unknown as { isTypeOnly?: boolean }).isTypeOnly);
+            const isTypeOnly = declIsTypeOnly || specIsTypeOnly;
+            if (isTypeOnly) {
+              if (desiredTypes?.has(name)) desiredTypes.delete(name);
+            } else {
+              if (desiredValues?.has(name)) desiredValues.delete(name);
+            }
           }
         }
       }
 
       // Prepare new export lines for any remaining names
       const lines: string[] = [];
-      for (const [spec, names] of desiredExports) {
-        const missing = Array.from(names);
-        if (missing.length === 0) continue;
+      const specs = new Set<string>([
+        ...desiredValueExports.keys(),
+        ...desiredTypeExports.keys()
+      ]);
+
+      for (const spec of specs) {
+        const missingValues = Array.from(desiredValueExports.get(spec) ?? []);
+        const missingTypes = Array.from(desiredTypeExports.get(spec) ?? []);
+        if (missingValues.length === 0 && missingTypes.length === 0) continue;
         const specEscaped = spec.replace(/\\/g, '/');
-        lines.push(`export { ${missing.join(', ')} } from "${specEscaped}";`);
+        if (missingValues.length > 0) {
+          lines.push(`export { ${missingValues.join(', ')} } from "${specEscaped}";`);
+        }
+        if (missingTypes.length > 0) {
+          lines.push(`export type { ${missingTypes.join(', ')} } from "${specEscaped}";`);
+        }
       }
 
       if (lines.length > 0) {

package/templates/module.package.json.tpl

@@ -2,13 +2,25 @@
   "name": "<%= packageName %>",
   "version": "<%= version %>",
   "description": "<%= description %>",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
   "files": ["dist"],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "clean": "rimraf dist",
     "prepublishOnly": "npm run build"
   },
@@ -26,11 +38,10 @@
   },
   "devDependencies": {
     "rimraf": "^5.0.0",
-    "tsup": "^8.5.0",
+    "tsdown": "^0.19.0",
     "typescript": "^5.8.3"
   },
   "publishConfig": {
     "access": "public"
   }
 }
-

package/templates/{module.tsup.config.ts.tpl → module.tsdown.config.ts.tpl}

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

package/templates/react.component.tsx.tpl

@@ -63,12 +63,16 @@ export interface <%= className %>Props {
 
 <% if (methods && methods.methods.length > 0) { %>
 /**
- * Element interface with methods accessible via ref
+ * Element interface with methods/properties accessible via ref
  * @example
  * ```tsx
  * const ref = useRef<<%= className %>Element>(null);
  * // Call methods on the element
  * ref.current?.finishRefresh('success');
+<% if (properties && properties.props && properties.props.length > 0) { %>
+ * // Access properties
+ * console.log(ref.current?.<%= _.camelCase(properties.props[0].name || 'someProp') %>);
+<% } %>
  * ```
  */
 <% } %>
@@ -76,7 +80,19 @@ export interface <%= className %>Element extends WebFElementWithMethods<{
   <% _.forEach(methods?.methods, function(method, index) { %>
 <%= generateMethodDeclarationWithDocs(method, '  ') %>
   <% }); %>
-}> {}
+}> {
+  <% _.forEach(properties?.props, function(prop, index) { %>
+  <% var propName = _.camelCase(prop.name); %>
+  <% if (prop.documentation) { %>
+  /** <%= prop.documentation.split('\n')[0] %> */
+  <% } %>
+  <% if (prop.readonly) { %>
+  readonly <%= propName %><% if (prop.optional) { %>?<% } %>: <%= generateReturnType(prop.type) %>;
+  <% } else { %>
+  <%= propName %><% if (prop.optional) { %>?<% } %>: <%= generateReturnType(prop.type) %>;
+  <% } %>
+  <% }); %>
+}
 
 <% if (properties?.documentation || methods?.documentation || events?.documentation) { %>
   <% const docs = properties?.documentation || methods?.documentation || events?.documentation; %>

package/templates/react.package.json.tpl

@@ -2,12 +2,24 @@
   "name": "<%= packageName %>",
   "version": "<%= version %>",
   "description": "<%= description %>",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist", "README.md"],
   "scripts": {
-    "build": "tsup"
+    "build": "tsdown"
   },
   "keywords": [],
   "author": "",
@@ -23,7 +35,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
     "picomatch": "^4.0.2",
-    "tsup": "^8.5.0",
+    "tsdown": "^0.19.0",
     "typescript": "^5.8.3"
   }
 }

package/templates/{react.tsup.config.ts.tpl → react.tsdown.config.ts.tpl}

@@ -1,10 +1,8 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
+module.exports = {
   entry: ['src/index.ts'],
   format: ['esm', 'cjs'],
   dts: true,
   sourcemap: true,
   clean: true,
   external: ['react', 'react-dom', '@openwebf/react-core-ui'],
-})
+};

package/templates/vue.package.json.tpl

@@ -4,7 +4,7 @@
   "description": "<%= description %>",
   "main": "",
   "types": "index.d.ts",
-  "files": ["index.d.ts"],
+  "files": ["index.d.ts", "README.md"],
   "keywords": [],
   "author": "",
   "license": "ISC",