@openwebf/webf 0.22.0 → 0.22.3

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"');
     });
   });
 });