@openwebf/webf 0.22.1 → 0.22.4

package/test/commands.test.ts

@@ -20,7 +20,6 @@ mockFs.readFileSync = jest.fn().mockImplementation((filePath: any) => {
   if (pathStr.includes('react.package.json.tpl')) return '<%= packageName %> <%= version %> <%= description %>';
   if (pathStr.includes('react.tsconfig.json.tpl')) return 'react tsconfig';
   if (pathStr.includes('react.tsup.config.ts.tpl')) return 'tsup config';
-  if (pathStr.includes('react.createComponent.tpl')) return 'create component';
   if (pathStr.includes('react.index.ts.tpl')) return 'index template';
   if (pathStr.includes('vue.package.json.tpl')) return '<%= packageName %> <%= version %> <%= description %>';
   if (pathStr.includes('vue.tsconfig.json.tpl')) return 'vue tsconfig';
@@ -127,10 +126,6 @@ describe('Commands', () => {
           path.join(path.resolve(target), 'src'),
           { recursive: true }
         );
-        expect(mockFs.mkdirSync).toHaveBeenCalledWith(
-          path.join(path.resolve(target), 'src', 'utils'),
-          { recursive: true }
-        );
       });
 
       it('should prompt for framework and package name when missing', async () => {

package/test/generator.test.ts

@@ -72,7 +72,7 @@ describe('Generator', () => {
     
     mockDartGenerator.generateDartClass.mockReturnValue('dart code');
     mockReactGenerator.generateReactComponent.mockReturnValue('react component');
-    mockReactGenerator.generateReactIndex.mockReturnValue('export * from "./test"');
+    mockReactGenerator.generateReactIndex.mockReturnValue('export { Component, ComponentElement } from "./lib/src/html/component";');
     mockVueGenerator.generateVueTypings.mockReturnValue('vue typings');
   });
 
@@ -86,7 +86,7 @@ describe('Generator', () => {
 
       expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
         cwd: '/test/source',
-        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**']
+        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**']
       });
       
       expect(mockAnalyzer.analyzer).toHaveBeenCalledTimes(2); // For each file
@@ -103,7 +103,7 @@ describe('Generator', () => {
 
       expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
         cwd: expect.stringContaining('relative/source'),
-        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**']
+        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**']
       });
     });
 
@@ -270,6 +270,20 @@ describe('Generator', () => {
         'utf-8'
       );
     });
+    
+    it('should handle custom exclude patterns', async () => {
+      await dartGen({
+        source: '/test/source',
+        target: '/test/target',
+        command: 'test command',
+        exclude: ['**/test/**', '**/docs/**']
+      });
+
+      expect(mockGlob.globSync).toHaveBeenCalledWith('**/*.d.ts', {
+        cwd: '/test/source',
+        ignore: ['**/node_modules/**', '**/dist/**', '**/build/**', '**/example/**', '**/test/**', '**/docs/**']
+      });
+    });
   });
 
   describe('reactGen', () => {
@@ -317,6 +331,12 @@ describe('Generator', () => {
     });
 
     it('should generate index file', async () => {
+      // Update the mock to return proper format with export statements
+      mockReactGenerator.generateReactIndex.mockReturnValue(
+        'export { Test, TestElement } from "./lib/src/html/test";\n' +
+        'export { Component, ComponentElement } from "./lib/src/html/component";'
+      );
+      
       await reactGen({
         source: '/test/source',
         target: '/test/target',
@@ -330,11 +350,12 @@ describe('Generator', () => {
         ])
       );
       
-      expect(mockFs.writeFileSync).toHaveBeenCalledWith(
-        expect.stringContaining('index.ts'),
-        'export * from "./test"',
-        'utf-8'
-      );
+      // Check that index.ts was written (the content check is done by looking at the mock return value)
+      const writeCalls = mockFs.writeFileSync.mock.calls;
+      const indexCall = writeCalls.find(call => call[0].toString().includes('index.ts'));
+      expect(indexCall).toBeDefined();
+      expect(indexCall![1]).toContain('export { Test, TestElement }');
+      expect(indexCall![1]).toContain('export { Component, ComponentElement }');
     });
   });
 

package/test/packageName.test.ts

@@ -0,0 +1,231 @@
+// Mock fs module before importing commands
+jest.mock('fs');
+
+// Import the functions we want to test (we'll need to export them first)
+// For now, let's just define them here for testing
+function sanitizePackageName(name: string): string {
+  // Remove any leading/trailing whitespace
+  let sanitized = name.trim();
+  
+  // Check if it's a scoped package
+  const isScoped = sanitized.startsWith('@');
+  let scope = '';
+  let packageName = sanitized;
+  
+  if (isScoped) {
+    const parts = sanitized.split('/');
+    if (parts.length >= 2) {
+      scope = parts[0];
+      packageName = parts.slice(1).join('/');
+    } else {
+      // Invalid scoped package, treat as regular
+      packageName = sanitized.substring(1);
+    }
+  }
+  
+  // Sanitize scope if present
+  if (scope) {
+    scope = scope.toLowerCase();
+    // Remove invalid characters from scope (keep only @ and alphanumeric/hyphen)
+    scope = scope.replace(/[^@a-z0-9-]/g, '');
+    if (scope === '@') {
+      scope = '@pkg'; // Default scope if only @ remains
+    }
+  }
+  
+  // Sanitize package name part
+  packageName = packageName.toLowerCase();
+  packageName = packageName.replace(/\s+/g, '-');
+  packageName = packageName.replace(/[^a-z0-9\-_.]/g, '');
+  packageName = packageName.replace(/^[._]+/, '');
+  packageName = packageName.replace(/[._]+$/, '');
+  packageName = packageName.replace(/[-_.]{2,}/g, '-');
+  packageName = packageName.replace(/^-+/, '').replace(/-+$/, '');
+  
+  // Ensure package name is not empty
+  if (!packageName) {
+    packageName = 'package';
+  }
+  
+  // Ensure it starts with a letter or number
+  if (!/^[a-z0-9]/.test(packageName)) {
+    packageName = 'pkg-' + packageName;
+  }
+  
+  // Combine scope and package name
+  let result = scope ? `${scope}/${packageName}` : packageName;
+  
+  // Truncate to 214 characters (npm limit)
+  if (result.length > 214) {
+    if (scope) {
+      // Try to preserve scope
+      const maxPackageLength = 214 - scope.length - 1; // -1 for the /
+      packageName = packageName.substring(0, maxPackageLength);
+      packageName = packageName.replace(/[._-]+$/, '');
+      result = `${scope}/${packageName}`;
+    } else {
+      result = result.substring(0, 214);
+      result = result.replace(/[._-]+$/, '');
+    }
+  }
+  
+  return result;
+}
+
+function isValidNpmPackageName(name: string): boolean {
+  // Check basic rules
+  if (!name || name.length === 0 || name.length > 214) return false;
+  if (name.trim() !== name) return false;
+  
+  // Check if it's a scoped package
+  if (name.startsWith('@')) {
+    const parts = name.split('/');
+    if (parts.length !== 2) return false; // Scoped packages must have exactly one /
+    
+    const scope = parts[0];
+    const packageName = parts[1];
+    
+    // Validate scope
+    if (!/^@[a-z0-9][a-z0-9-]*$/.test(scope)) return false;
+    
+    // Validate package name part
+    return isValidNpmPackageName(packageName);
+  }
+  
+  // For non-scoped packages
+  if (name !== name.toLowerCase()) return false;
+  if (name.startsWith('.') || name.startsWith('_')) return false;
+  
+  // Check for valid characters (letters, numbers, hyphens, underscores, dots)
+  if (!/^[a-z0-9][a-z0-9\-_.]*$/.test(name)) return false;
+  
+  // Check for URL-safe characters
+  try {
+    if (encodeURIComponent(name) !== name) return false;
+  } catch {
+    return false;
+  }
+  
+  return true;
+}
+
+describe('npm package name sanitization', () => {
+  describe('sanitizePackageName', () => {
+    it('should convert uppercase to lowercase', () => {
+      expect(sanitizePackageName('MyPackage')).toBe('mypackage');
+      expect(sanitizePackageName('HELLO-WORLD')).toBe('hello-world');
+    });
+    
+    it('should replace spaces with hyphens', () => {
+      expect(sanitizePackageName('my package')).toBe('my-package');
+      expect(sanitizePackageName('hello   world   app')).toBe('hello-world-app');
+    });
+    
+    it('should remove invalid characters', () => {
+      expect(sanitizePackageName('my@package!')).toBe('mypackage');
+      expect(sanitizePackageName('hello#world$')).toBe('helloworld');
+      expect(sanitizePackageName('test(1)_package')).toBe('test1_package');
+    });
+    
+    it('should remove leading dots and underscores', () => {
+      expect(sanitizePackageName('.package')).toBe('package');
+      expect(sanitizePackageName('_package')).toBe('package');
+      expect(sanitizePackageName('...package')).toBe('package');
+    });
+    
+    it('should remove trailing dots and underscores', () => {
+      expect(sanitizePackageName('package.')).toBe('package');
+      expect(sanitizePackageName('package_')).toBe('package');
+      expect(sanitizePackageName('package...')).toBe('package');
+    });
+    
+    it('should handle consecutive special characters', () => {
+      expect(sanitizePackageName('my--package')).toBe('my-package');
+      expect(sanitizePackageName('hello___world')).toBe('hello-world');
+      expect(sanitizePackageName('test...app')).toBe('test-app');
+    });
+    
+    it('should ensure package starts with letter or number', () => {
+      expect(sanitizePackageName('-package')).toBe('package');
+      expect(sanitizePackageName('--package')).toBe('package');
+      expect(sanitizePackageName('_test')).toBe('test');
+      expect(sanitizePackageName('.app')).toBe('app');
+      expect(sanitizePackageName('---')).toBe('package'); // all special chars removed, falls back to default
+      expect(sanitizePackageName('-')).toBe('package'); // single hyphen removed, falls back to default
+    });
+    
+    it('should handle empty or invalid input', () => {
+      expect(sanitizePackageName('')).toBe('package');
+      expect(sanitizePackageName('   ')).toBe('package');
+      expect(sanitizePackageName('___')).toBe('package');
+    });
+    
+    it('should truncate long names', () => {
+      const longName = 'a'.repeat(220);
+      const result = sanitizePackageName(longName);
+      expect(result.length).toBeLessThanOrEqual(214);
+      expect(result).toBe('a'.repeat(214));
+    });
+    
+    it('should handle Flutter package names', () => {
+      expect(sanitizePackageName('webf_cupertino_ui')).toBe('webf_cupertino_ui');
+      expect(sanitizePackageName('WebF Cupertino UI')).toBe('webf-cupertino-ui');
+      expect(sanitizePackageName('flutter_package_name')).toBe('flutter_package_name');
+    });
+    
+    it('should handle scoped packages', () => {
+      expect(sanitizePackageName('@openwebf/react-cupertino-ui')).toBe('@openwebf/react-cupertino-ui');
+      expect(sanitizePackageName('@OpenWebF/React-Cupertino-UI')).toBe('@openwebf/react-cupertino-ui');
+      expect(sanitizePackageName('@my-org/my-package')).toBe('@my-org/my-package');
+      expect(sanitizePackageName('  @scope/package  ')).toBe('@scope/package');
+      expect(sanitizePackageName('@SCOPE/PACKAGE')).toBe('@scope/package');
+      expect(sanitizePackageName('@/package')).toBe('@pkg/package'); // Invalid scope
+      expect(sanitizePackageName('@123/package')).toBe('@123/package'); // Numeric scope is valid
+      expect(sanitizePackageName('@scope/my package')).toBe('@scope/my-package');
+      expect(sanitizePackageName('@scope/.package')).toBe('@scope/package');
+      expect(sanitizePackageName('@scope/_package')).toBe('@scope/package');
+    });
+  });
+  
+  describe('isValidNpmPackageName', () => {
+    it('should accept valid package names', () => {
+      expect(isValidNpmPackageName('mypackage')).toBe(true);
+      expect(isValidNpmPackageName('my-package')).toBe(true);
+      expect(isValidNpmPackageName('my_package')).toBe(true);
+      expect(isValidNpmPackageName('my.package')).toBe(true);
+      expect(isValidNpmPackageName('package123')).toBe(true);
+      expect(isValidNpmPackageName('@openwebf/react-cupertino-ui')).toBe(true);
+      expect(isValidNpmPackageName('@scope/package')).toBe(true);
+      expect(isValidNpmPackageName('@my-org/my-package')).toBe(true);
+      expect(isValidNpmPackageName('@123/package')).toBe(true);
+    });
+    
+    it('should reject invalid package names', () => {
+      expect(isValidNpmPackageName('MyPackage')).toBe(false); // uppercase
+      expect(isValidNpmPackageName('my package')).toBe(false); // space
+      expect(isValidNpmPackageName('.package')).toBe(false); // starts with dot
+      expect(isValidNpmPackageName('_package')).toBe(false); // starts with underscore
+      expect(isValidNpmPackageName('my@package')).toBe(false); // special char in wrong position
+      expect(isValidNpmPackageName('')).toBe(false); // empty
+      expect(isValidNpmPackageName(' package ')).toBe(false); // leading/trailing space
+      expect(isValidNpmPackageName('@')).toBe(false); // just @
+      expect(isValidNpmPackageName('@/')).toBe(false); // missing both parts
+      expect(isValidNpmPackageName('@scope')).toBe(false); // missing package name
+      expect(isValidNpmPackageName('@/package')).toBe(false); // missing scope name
+      expect(isValidNpmPackageName('@Scope/package')).toBe(false); // uppercase in scope
+      expect(isValidNpmPackageName('@scope/Package')).toBe(false); // uppercase in package
+      expect(isValidNpmPackageName('@scope/.package')).toBe(false); // package starts with dot
+      expect(isValidNpmPackageName('@scope/_package')).toBe(false); // package starts with underscore
+    });
+    
+    it('should reject names that are too long', () => {
+      const longName = 'a'.repeat(215);
+      expect(isValidNpmPackageName(longName)).toBe(false);
+    });
+    
+    it('should reject non-URL-safe names', () => {
+      expect(isValidNpmPackageName('my package')).toBe(false);
+      expect(isValidNpmPackageName('package?name')).toBe(false);
+    });
+  });
+});

package/test/react.test.ts

@@ -2,9 +2,32 @@ import { generateReactComponent } from '../src/react';
 import { IDLBlob } from '../src/IDLBlob';
 import { ClassObject, ClassObjectKind } from '../src/declaration';
 
+// Import the toWebFTagName function for testing
+import { toWebFTagName } from '../src/react';
+
 describe('React Generator', () => {
+  describe('toWebFTagName', () => {
+    it('should convert WebF prefixed components correctly', () => {
+      expect(toWebFTagName('WebFTable')).toBe('webf-table');
+      expect(toWebFTagName('WebFTableCell')).toBe('webf-table-cell');
+      expect(toWebFTagName('WebFListView')).toBe('webf-list-view');
+      expect(toWebFTagName('WebFTouchArea')).toBe('webf-touch-area');
+    });
+    
+    it('should convert Flutter prefixed components correctly', () => {
+      expect(toWebFTagName('FlutterShimmer')).toBe('flutter-shimmer');
+      expect(toWebFTagName('FlutterShimmerText')).toBe('flutter-shimmer-text');
+      expect(toWebFTagName('FlutterShimmerAvatar')).toBe('flutter-shimmer-avatar');
+    });
+    
+    it('should handle components without special prefixes', () => {
+      expect(toWebFTagName('CustomComponent')).toBe('custom-component');
+      expect(toWebFTagName('MyElement')).toBe('my-element');
+    });
+  });
+
   describe('generateReactComponent', () => {
-    it('should use correct import path for createComponent in subdirectories', () => {
+    it('should import createWebFComponent from @openwebf/react-core-ui', () => {
       const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', 'components/ui');
       
       const properties = new ClassObject();
@@ -14,11 +37,11 @@ describe('React Generator', () => {
       
       const result = generateReactComponent(blob);
       
-      // Component in components/ui/ needs to go up 2 levels
-      expect(result).toContain('import { createComponent } from "../../utils/createComponent"');
+      // Should import from npm package by default
+      expect(result).toContain('import { createWebFComponent, WebFElementWithMethods } from "@openwebf/react-core-ui"');
     });
     
-    it('should use correct import path for createComponent in root directory', () => {
+    it('should generate component using createWebFComponent', () => {
       const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', '');
       
       const properties = new ClassObject();
@@ -28,11 +51,13 @@ describe('React Generator', () => {
       
       const result = generateReactComponent(blob);
       
-      // Component in root needs simple relative path
-      expect(result).toContain('import { createComponent } from "./utils/createComponent"');
+      // Should use createWebFComponent
+      expect(result).toContain('export const TestComponent = createWebFComponent<TestComponentElement, TestComponentProps>({');
+      expect(result).toContain('tagName: \'test-component\'');
+      expect(result).toContain('displayName: \'TestComponent\'');
     });
     
-    it('should use correct import path for single level subdirectory', () => {
+    it('should generate proper TypeScript interfaces', () => {
       const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', 'widgets');
       
       const properties = new ClassObject();
@@ -42,8 +67,68 @@ describe('React Generator', () => {
       
       const result = generateReactComponent(blob);
       
-      // Component in widgets/ needs to go up 1 level
-      expect(result).toContain('import { createComponent } from "../utils/createComponent"');
+      // Should have proper interfaces
+      expect(result).toContain('export interface TestComponentProps {');
+      expect(result).toContain('export interface TestComponentElement extends WebFElementWithMethods<{');
+    });
+    
+    it('should generate correct tagName for WebF components', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'WebFTableCell', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'WebFTableCellProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob);
+      
+      // Should generate correct tagName
+      expect(result).toContain('tagName: \'webf-table-cell\'');
+      expect(result).not.toContain('tagName: \'web-f-table-cell\'');
+    });
+    
+    it('should generate correct tagName for Flutter components', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'FlutterShimmerText', 'test', '');
+      
+      const properties = new ClassObject();
+      properties.name = 'FlutterShimmerTextProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob);
+      
+      // Should generate correct tagName
+      expect(result).toContain('tagName: \'flutter-shimmer-text\'');
+    });
+    
+    it('should use relative import for @openwebf/react-core-ui package', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', 'lib/src/html');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob, '@openwebf/react-core-ui', 'lib/src/html');
+      
+      // Should use relative import for react-core-ui package itself
+      // From src/lib/src/html to src/utils: ../../../utils
+      expect(result).toContain('import { createWebFComponent, WebFElementWithMethods } from "../../../utils/createWebFComponent"');
+    });
+    
+    it('should use relative import for nested directories in @openwebf/react-core-ui', () => {
+      const blob = new IDLBlob('/test/source', '/test/target', 'TestComponent', 'test', 'lib/src/html/shimmer');
+      
+      const properties = new ClassObject();
+      properties.name = 'TestComponentProperties';
+      properties.kind = ClassObjectKind.interface;
+      blob.objects = [properties];
+      
+      const result = generateReactComponent(blob, '@openwebf/react-core-ui', 'lib/src/html/shimmer');
+      
+      // Should use relative import with correct depth
+      // From src/lib/src/html/shimmer to src/utils: ../../../../utils
+      expect(result).toContain('import { createWebFComponent, WebFElementWithMethods } from "../../../../utils/createWebFComponent"');
     });
   });
 });

package/CLAUDE.md

@@ -1,206 +0,0 @@
-# WebF CLI Development Guide
-
-## Overview
-The WebF CLI is a code generation tool that creates type-safe bindings between Flutter/Dart and JavaScript frameworks (React, Vue). It analyzes TypeScript definition files and generates corresponding Dart classes and JavaScript/TypeScript components.
-
-## Architecture
-
-### Core Components
-- `analyzer.ts` - TypeScript AST analysis with multi-level caching
-- `generator.ts` - Orchestrates code generation for Dart, React, and Vue
-- `dart.ts` - Dart code generation from TypeScript definitions
-- `react.ts` - React component generation
-- `vue.ts` - Vue component generation
-- `commands.ts` - CLI command implementations
-- `logger.ts` - Logging utility without external dependencies
-
-### Key Features
-- Multi-level caching for performance optimization
-- Parallel file processing
-- Type-safe attribute handling with automatic conversions
-- Comprehensive error handling and recovery
-
-## Code Generation Patterns
-
-### TypeScript to Dart Type Mapping
-```typescript
-// Boolean attributes are always non-nullable in Dart
-interface Props {
-  open?: boolean;  // Generates: bool get open;
-  title?: string;  // Generates: String? get title;
-}
-```
-
-### Attribute Type Conversion
-HTML attributes are always strings, so the generator includes automatic type conversion:
-- Boolean: `value == 'true' || value == ''`
-- Integer: `int.tryParse(value) ?? 0`
-- Double: `double.tryParse(value) ?? 0.0`
-- String: Direct assignment
-
-## Performance Optimizations
-
-### Caching Strategy
-1. **Source File Cache**: Parsed TypeScript AST files are cached
-2. **Type Conversion Cache**: Frequently used type conversions are cached
-3. **File Content Cache**: File contents are cached to detect changes
-
-### Batch Processing
-Files are processed in batches for optimal parallelism:
-```typescript
-await processFilesInBatch(items, batchSize, processor);
-```
-
-## Testing Guidelines
-
-### Test Structure
-- Unit tests for all core modules
-- Mock file system operations before module imports
-- Test coverage threshold: 70%
-
-### Running Tests
-```bash
-npm test                    # Run all tests
-npm test -- test/analyzer.test.ts  # Run specific test
-npm run test:coverage       # Run with coverage report
-```
-
-### Mock Patterns
-For modules that read files at load time:
-```typescript
-jest.mock('fs');
-import fs from 'fs';
-const mockFs = fs as jest.Mocked<typeof fs>;
-mockFs.readFileSync = jest.fn().mockImplementation((path) => {
-  // Return appropriate content
-});
-// Now import the module
-import { moduleUnderTest } from './module';
-```
-
-## CLI Usage
-
-### Commands
-```bash
-# Generate code from TypeScript definitions (auto-creates project if needed)
-webf codegen <output-dir> --flutter-package-src=<path> [--framework=react|vue] [--package-name=<name>] [--publish-to-npm] [--npm-registry=<url>]
-
-# Create a new project without code generation
-webf codegen <output-dir> [--framework=react|vue] [--package-name=<name>]
-
-# Generate and publish to npm
-webf codegen <output-dir> --flutter-package-src=<path> --publish-to-npm
-
-# Generate and publish to custom registry
-webf codegen <output-dir> --flutter-package-src=<path> --publish-to-npm --npm-registry=https://custom.registry.com/
-```
-
-### Auto-creation Behavior
-The `generate` command now automatically detects if a project needs to be created:
-- If required files (package.json, global.d.ts, tsconfig.json) are missing, it will create a new project
-- If framework or package name are not provided, it will prompt interactively
-- If an existing project is detected, it will use the existing configuration
-- Framework can be auto-detected from existing package.json dependencies
-
-### Metadata Synchronization
-When creating typing projects, the CLI automatically synchronizes metadata from the Flutter package:
-- Reads `pubspec.yaml` from the Flutter package source directory
-- Extracts version and description information
-- Applies this metadata to the generated `package.json` files
-- Ensures typing packages match the same version as the Flutter package
-
-### Automatic Build
-After code generation, the CLI automatically runs `npm run build` if a build script is present in the package.json. This ensures the generated package is immediately ready for use or publishing. The build process:
-- Checks for the presence of a `build` script in package.json
-- Runs the build command if available
-- Continues successfully even if the build fails (with a warning)
-- Provides clear console output about the build status
-
-### NPM Publishing
-The CLI supports automatic npm publishing with the following features:
-- **--publish-to-npm**: Automatically publishes the generated package to npm (build is run automatically)
-- **--npm-registry**: Specify a custom npm registry URL (defaults to https://registry.npmjs.org/)
-- **Interactive publishing**: If not using the --publish-to-npm flag, the CLI will ask if you want to publish after generation
-- **Registry configuration**: When choosing to publish interactively, you can specify a custom registry URL
-- Checks if user is logged in before attempting to publish
-- Temporarily sets and resets registry configuration when custom registry is used
-
-Requirements for publishing:
-- Must be logged in to npm (`npm login`)
-- Package must have a valid package.json
-- Package will be built automatically before publishing (if build script exists)
-
-Publishing workflow:
-1. If `--publish-to-npm` is not specified, CLI prompts after successful generation
-2. If user chooses to publish, CLI asks for registry URL (optional)
-3. Validates npm login status
-4. Publishes to specified registry (no need to build separately)
-
-### Output Directory Behavior
-- Dart files are generated in the Flutter package source directory
-- React/Vue files are generated in the specified output directory
-- If no output directory is specified, a temporary directory is created
-- Temporary directories are created in the system temp folder with prefix `webf-typings-`
-- When using temporary directories, the path is displayed at the end of generation
-- Paths can be absolute or relative to current working directory
-
-### Generated Files Structure
-When running `dartGen`:
-- Dart binding files are generated with `_bindings_generated.dart` suffix
-- Original `.d.ts` files are copied to the output directory maintaining their structure
-- An `index.d.ts` file is generated with:
-  - TypeScript triple-slash references to all `.d.ts` files
-  - ES module exports for all type definitions
-  - Package metadata from `pubspec.yaml` in documentation comments
-- Directory structure from source is preserved in the output
-
-## Development Workflow
-
-### Adding New Features
-1. Update TypeScript interfaces/types
-2. Implement feature with tests
-3. Update templates if needed
-4. Ensure all tests pass
-5. Update this documentation
-
-### Debugging
-Use the logger for debugging:
-```typescript
-import { debug, info, warn, error } from './logger';
-debug('Processing file:', filename);
-```
-
-### Template Modification
-Templates are in `/templates/*.tpl`. When modifying:
-1. Update the template file
-2. Update the corresponding generator function
-3. Ensure generated code follows style guidelines
-
-## Common Issues and Solutions
-
-### Issue: Boolean attributes treated as strings
-**Solution**: Use `generateAttributeSetter` which handles type conversion
-
-### Issue: Null type handling
-**Solution**: Check for literal types containing null:
-```typescript
-if (type.kind === ts.SyntaxKind.LiteralType) {
-  const literalType = type as ts.LiteralTypeNode;
-  if (literalType.literal.kind === ts.SyntaxKind.NullKeyword) {
-    return FunctionArgumentType.null;
-  }
-}
-```
-
-### Issue: File changes not detected
-**Solution**: Clear caches before generation:
-```typescript
-clearCaches();
-```
-
-## Code Style
-- Use async/await for asynchronous operations
-- Implement proper error handling with try-catch
-- Add descriptive error messages
-- Use TypeScript strict mode
-- Follow existing patterns in the codebase