lwc-convert 1.0.0 → 1.0.1

package/dist/generators/test-generator.js

@@ -29,23 +29,23 @@ function generateAuraToLwcTests(markup, transformedMarkup, controller) {
             imports.push(`import ${channelVar} from '@salesforce/messageChannel/${lms.channelName}';`);
         }
         // Add LMS mocks
-        mocks.push(`// Mock LMS
-jest.mock(
-    'lightning/messageService',
-    () => ({
-        publish: jest.fn(),
-        subscribe: jest.fn(() => ({ unsubscribe: jest.fn() })),
-        unsubscribe: jest.fn(),
-        MessageContext: jest.fn()
-    }),
-    { virtual: true }
+        mocks.push(`// Mock LMS
+jest.mock(
+    'lightning/messageService',
+    () => ({
+        publish: jest.fn(),
+        subscribe: jest.fn(() => ({ unsubscribe: jest.fn() })),
+        unsubscribe: jest.fn(),
+        MessageContext: jest.fn()
+    }),
+    { virtual: true }
 );`);
     }
     // Analyze wire/data patterns
     if (transformedMarkup.recordDataServices.length > 0) {
         imports.push("import { getRecord, getFieldValue } from 'lightning/uiRecordApi';");
         // Mock wire adapter
-        mocks.push(`// Mock getRecord wire adapter
+        mocks.push(`// Mock getRecord wire adapter
 const mockGetRecord = require('lightning/uiRecordApi').getRecord;`);
         for (const rds of transformedMarkup.recordDataServices) {
             behaviorSpecs.push({
@@ -66,11 +66,11 @@ const mockGetRecord = require('lightning/uiRecordApi').getRecord;`);
             initApexMethod = initFunc.serverCalls[0].controllerMethod || null;
             if (initApexMethod) {
                 imports.push(`import ${initApexMethod} from '@salesforce/apex/${markup.controller}.${initApexMethod}';`);
-                mocks.push(`// Mock Apex method
-jest.mock(
-    '@salesforce/apex/${markup.controller}.${initApexMethod}',
-    () => ({ default: jest.fn() }),
-    { virtual: true }
+                mocks.push(`// Mock Apex method
+jest.mock(
+    '@salesforce/apex/${markup.controller}.${initApexMethod}',
+    () => ({ default: jest.fn() }),
+    { virtual: true }
 );`);
                 behaviorSpecs.push({
                     category: 'data',
@@ -82,33 +82,33 @@ jest.mock(
         }
     }
     // Generate test structure
-    let testContent = `/**
- * Jest tests for ${lwcName}
- * Converted from Aura component: ${markup.componentName}
- * 
- * These tests verify that the converted LWC preserves the original behaviors.
- */
-
-${imports.join('\n')}
-
-${mocks.join('\n\n')}
-
-describe('${lwcName}', () => {
-    let element;
-
-    beforeEach(() => {
-        element = createElement('c-${lwcName}', {
-            is: ${className}
-        });
-    });
-
-    afterEach(() => {
-        while (document.body.firstChild) {
-            document.body.removeChild(document.body.firstChild);
-        }
-        jest.clearAllMocks();
-    });
-
+    let testContent = `/**
+ * Jest tests for ${lwcName}
+ * Converted from Aura component: ${markup.componentName}
+ * 
+ * These tests verify that the converted LWC preserves the original behaviors.
+ */
+
+${imports.join('\n')}
+
+${mocks.join('\n\n')}
+
+describe('${lwcName}', () => {
+    let element;
+
+    beforeEach(() => {
+        element = createElement('c-${lwcName}', {
+            is: ${className}
+        });
+    });
+
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+        jest.clearAllMocks();
+    });
+
 `;
     // Generate LMS Subscriber tests
     if (hasLmsSubscriber) {
@@ -126,67 +126,67 @@ describe('${lwcName}', () => {
                 auraPattern: 'Automatic cleanup by Aura framework',
                 lwcEquivalent: `unsubscribe(subscription) in disconnectedCallback`
             });
-            testContent += `    /**
-     * LMS Subscription Tests
-     * Original Aura: lightning:messageChannel type="${lms.channelName}" onMessage="{!c.${lms.onMessageHandler}}"
-     */
-    describe('LMS Subscription - ${lms.channelName}', () => {
-        test('should subscribe to message channel on connect', () => {
-            // Arrange & Act
-            document.body.appendChild(element);
-
-            // Assert
-            expect(subscribe).toHaveBeenCalledWith(
-                expect.anything(), // MessageContext
-                ${channelVar},
-                expect.any(Function)
-            );
-        });
-
-        test('should unsubscribe from message channel on disconnect', () => {
-            // Arrange
-            document.body.appendChild(element);
-
-            // Act
-            document.body.removeChild(element);
-
-            // Assert
-            expect(unsubscribe).toHaveBeenCalled();
-        });
-
-        test('should handle incoming message and update state', async () => {
-            // Arrange
-            document.body.appendChild(element);
-            const mockRecordId = '003xx000004TtgAAC';
-            
-            // Get the message handler that was registered
-            const messageHandler = subscribe.mock.calls[0][2];
-
-            // Act - simulate receiving a message
-            messageHandler({ recordId: mockRecordId });
-            
-            // Wait for reactivity
-            await Promise.resolve();
-
-            // Assert - verify state was updated
-            // The original Aura set v.contactId from message.getParam('recordId')
-            expect(element.contactId).toBe(mockRecordId);
-        });
-
-        test('should clear state when message has no recordId', async () => {
-            // Arrange
-            document.body.appendChild(element);
-            const messageHandler = subscribe.mock.calls[0][2];
-
-            // Act - simulate receiving empty message
-            messageHandler({});
-            await Promise.resolve();
-
-            // Assert
-            expect(element.contactId).toBe('');
-        });
-    });
-
+            testContent += `    /**
+     * LMS Subscription Tests
+     * Original Aura: lightning:messageChannel type="${lms.channelName}" onMessage="{!c.${lms.onMessageHandler}}"
+     */
+    describe('LMS Subscription - ${lms.channelName}', () => {
+        test('should subscribe to message channel on connect', () => {
+            // Arrange & Act
+            document.body.appendChild(element);
+
+            // Assert
+            expect(subscribe).toHaveBeenCalledWith(
+                expect.anything(), // MessageContext
+                ${channelVar},
+                expect.any(Function)
+            );
+        });
+
+        test('should unsubscribe from message channel on disconnect', () => {
+            // Arrange
+            document.body.appendChild(element);
+
+            // Act
+            document.body.removeChild(element);
+
+            // Assert
+            expect(unsubscribe).toHaveBeenCalled();
+        });
+
+        test('should handle incoming message and update state', async () => {
+            // Arrange
+            document.body.appendChild(element);
+            const mockRecordId = '003xx000004TtgAAC';
+            
+            // Get the message handler that was registered
+            const messageHandler = subscribe.mock.calls[0][2];
+
+            // Act - simulate receiving a message
+            messageHandler({ recordId: mockRecordId });
+            
+            // Wait for reactivity
+            await Promise.resolve();
+
+            // Assert - verify state was updated
+            // The original Aura set v.contactId from message.getParam('recordId')
+            expect(element.contactId).toBe(mockRecordId);
+        });
+
+        test('should clear state when message has no recordId', async () => {
+            // Arrange
+            document.body.appendChild(element);
+            const messageHandler = subscribe.mock.calls[0][2];
+
+            // Act - simulate receiving empty message
+            messageHandler({});
+            await Promise.resolve();
+
+            // Assert
+            expect(element.contactId).toBe('');
+        });
+    });
+
 `;
         }
     }
@@ -200,148 +200,148 @@ describe('${lwcName}', () => {
                 auraPattern: `component.find('recordSelected').publish(payload)`,
                 lwcEquivalent: `publish(messageContext, ${channelVar}, message)`
             });
-            testContent += `    /**
-     * LMS Publisher Tests
-     * Original Aura: component.find('recordSelected').publish(payload)
-     */
-    describe('LMS Publishing - ${lms.channelName}', () => {
-        test('should not subscribe to message channel (publisher only)', () => {
-            // Arrange & Act
-            document.body.appendChild(element);
-
-            // Assert - publisher should NOT subscribe
-            expect(subscribe).not.toHaveBeenCalled();
-        });
-
-        test('should publish message when publishMessage is called', async () => {
-            // Arrange
-            document.body.appendChild(element);
-            const mockRecordId = '003xx000004TtgAAC';
-
-            // Act
-            element.publishMessage({ recordId: mockRecordId });
-
-            // Assert
-            expect(publish).toHaveBeenCalledWith(
-                expect.anything(), // MessageContext
-                ${channelVar},
-                expect.objectContaining({ recordId: mockRecordId })
-            );
-        });
-    });
-
+            testContent += `    /**
+     * LMS Publisher Tests
+     * Original Aura: component.find('recordSelected').publish(payload)
+     */
+    describe('LMS Publishing - ${lms.channelName}', () => {
+        test('should not subscribe to message channel (publisher only)', () => {
+            // Arrange & Act
+            document.body.appendChild(element);
+
+            // Assert - publisher should NOT subscribe
+            expect(subscribe).not.toHaveBeenCalled();
+        });
+
+        test('should publish message when publishMessage is called', async () => {
+            // Arrange
+            document.body.appendChild(element);
+            const mockRecordId = '003xx000004TtgAAC';
+
+            // Act
+            element.publishMessage({ recordId: mockRecordId });
+
+            // Assert
+            expect(publish).toHaveBeenCalledWith(
+                expect.anything(), // MessageContext
+                ${channelVar},
+                expect.objectContaining({ recordId: mockRecordId })
+            );
+        });
+    });
+
 `;
         }
     }
     // Generate Wire/Data tests
     if (transformedMarkup.recordDataServices.length > 0) {
-        testContent += `    /**
-     * Wire Adapter Tests (force:recordData equivalent)
-     * Original Aura: force:recordData with reactive recordId binding
-     */
-    describe('Record Data Loading', () => {
+        testContent += `    /**
+     * Wire Adapter Tests (force:recordData equivalent)
+     * Original Aura: force:recordData with reactive recordId binding
+     */
+    describe('Record Data Loading', () => {
 `;
         for (const rds of transformedMarkup.recordDataServices) {
             const targetProp = rds.targetFields || 'record';
-            testContent += `        test('should wire ${targetProp} with reactive ${rds.recordIdBinding}', async () => {
-            // This test verifies the @wire decorator is properly configured
-            // In Aura: force:recordData recordId="{!v.${rds.recordIdBinding}}" targetFields="{!v.${targetProp}}"
-            // In LWC: @wire(getRecord, { recordId: '$${rds.recordIdBinding}', fields: [...] }) ${targetProp};
-            
-            // Arrange
-            const mockRecord = {
-                data: {
-                    fields: {
-${rds.fields.map(f => `                        ${f}: { value: 'Test ${f}' }`).join(',\n')}
-                    }
-                }
-            };
-
-            // Act
-            document.body.appendChild(element);
-            
-            // Simulate wire returning data
-            // Note: In actual test, you'd use @salesforce/sfdx-lwc-jest wire adapter mocking
-
-            // Assert structure exists
-            expect(element).toBeDefined();
-        });
-
+            testContent += `        test('should wire ${targetProp} with reactive ${rds.recordIdBinding}', async () => {
+            // This test verifies the @wire decorator is properly configured
+            // In Aura: force:recordData recordId="{!v.${rds.recordIdBinding}}" targetFields="{!v.${targetProp}}"
+            // In LWC: @wire(getRecord, { recordId: '$${rds.recordIdBinding}', fields: [...] }) ${targetProp};
+            
+            // Arrange
+            const mockRecord = {
+                data: {
+                    fields: {
+${rds.fields.map(f => `                        ${f}: { value: 'Test ${f}' }`).join(',\n')}
+                    }
+                }
+            };
+
+            // Act
+            document.body.appendChild(element);
+            
+            // Simulate wire returning data
+            // Note: In actual test, you'd use @salesforce/sfdx-lwc-jest wire adapter mocking
+
+            // Assert structure exists
+            expect(element).toBeDefined();
+        });
+
 `;
             // Generate getter tests for each field
             for (const field of rds.fields) {
                 const getterName = field.charAt(0).toLowerCase() + field.slice(1).replace(/__c$/i, '');
-                testContent += `        test('getter ${getterName} should return undefined when no data', () => {
-            // Original Aura: {!v.${targetProp}.${field}}
-            // Converted LWC: {${getterName}} via getter using getFieldValue
-            
-            document.body.appendChild(element);
-            expect(element.${getterName}).toBeUndefined();
-        });
-
+                testContent += `        test('getter ${getterName} should return undefined when no data', () => {
+            // Original Aura: {!v.${targetProp}.${field}}
+            // Converted LWC: {${getterName}} via getter using getFieldValue
+            
+            document.body.appendChild(element);
+            expect(element.${getterName}).toBeUndefined();
+        });
+
 `;
             }
         }
-        testContent += `    });
-
+        testContent += `    });
+
 `;
     }
     // Generate init/Apex wire tests
     if (initApexMethod) {
-        testContent += `    /**
-     * Init/Data Loading Tests
-     * Original Aura: aura:handler name="init" calling ${initApexMethod}
-     * Converted LWC: @wire(${initApexMethod})
-     */
-    describe('Initial Data Loading', () => {
-        test('should wire ${initApexMethod} for automatic data loading', () => {
-            // In Aura: doInit called $A.enqueueAction for ${initApexMethod}
-            // In LWC: @wire(${initApexMethod}) loads data declaratively
-            
-            document.body.appendChild(element);
-            
-            // With @wire, data loads automatically - no imperative call needed
-            // The test verifies the wire adapter is properly configured
-            expect(element).toBeDefined();
-        });
-    });
-
+        testContent += `    /**
+     * Init/Data Loading Tests
+     * Original Aura: aura:handler name="init" calling ${initApexMethod}
+     * Converted LWC: @wire(${initApexMethod})
+     */
+    describe('Initial Data Loading', () => {
+        test('should wire ${initApexMethod} for automatic data loading', () => {
+            // In Aura: doInit called $A.enqueueAction for ${initApexMethod}
+            // In LWC: @wire(${initApexMethod}) loads data declaratively
+            
+            document.body.appendChild(element);
+            
+            // With @wire, data loads automatically - no imperative call needed
+            // The test verifies the wire adapter is properly configured
+            expect(element).toBeDefined();
+        });
+    });
+
 `;
     }
     // Generate UI rendering tests
-    testContent += `    /**
-     * UI Rendering Tests
-     * Verify template renders correctly with data
-     */
-    describe('UI Rendering', () => {
-        test('should render component', () => {
-            document.body.appendChild(element);
-            expect(element).toBeTruthy();
-        });
-
-        test('should render lightning-card with correct title', () => {
-            document.body.appendChild(element);
-            const card = element.shadowRoot.querySelector('lightning-card');
-            expect(card).toBeTruthy();
-            expect(card.title).toBe('${markup.componentName}');
-        });
+    testContent += `    /**
+     * UI Rendering Tests
+     * Verify template renders correctly with data
+     */
+    describe('UI Rendering', () => {
+        test('should render component', () => {
+            document.body.appendChild(element);
+            expect(element).toBeTruthy();
+        });
+
+        test('should render lightning-card with correct title', () => {
+            document.body.appendChild(element);
+            const card = element.shadowRoot.querySelector('lightning-card');
+            expect(card).toBeTruthy();
+            expect(card.title).toBe('${markup.componentName}');
+        });
 `;
     // Add conditional rendering tests if aura:if was present
     if (markup.body.some(node => node.name === 'aura:if')) {
-        testContent += `
-        test('should conditionally render content', async () => {
-            // Original Aura: <aura:if isTrue="{!v.someCondition}">
-            // Converted LWC: <template if:true={someCondition}>
-            
-            document.body.appendChild(element);
-            
-            // Initially should not show conditional content
-            // After data loads, should show content
-        });
+        testContent += `
+        test('should conditionally render content', async () => {
+            // Original Aura: <aura:if isTrue="{!v.someCondition}">
+            // Converted LWC: <template if:true={someCondition}>
+            
+            document.body.appendChild(element);
+            
+            // Initially should not show conditional content
+            // After data loads, should show content
+        });
 `;
     }
-    testContent += `    });
-});
+    testContent += `    });
+});
 `;
     return {
         filename: `${lwcName}.test.js`,
@@ -354,22 +354,22 @@ ${rds.fields.map(f => `                        ${f}: { value: 'Test ${f}' }`).jo
  */
 function generateBehaviorSpecDocument(componentName, specs) {
     const lwcName = (0, file_io_1.toLwcName)(componentName);
-    let doc = `# Behavior Specification: ${componentName} → ${lwcName}
-
-This document maps the expected behaviors from the original Aura component to their LWC equivalents.
-Use this as a checklist to verify the conversion is correct.
-
-## Behavior Mapping
-
-| Category | Behavior | Aura Pattern | LWC Equivalent |
-|----------|----------|--------------|----------------|
+    let doc = `# Behavior Specification: ${componentName} → ${lwcName}
+
+This document maps the expected behaviors from the original Aura component to their LWC equivalents.
+Use this as a checklist to verify the conversion is correct.
+
+## Behavior Mapping
+
+| Category | Behavior | Aura Pattern | LWC Equivalent |
+|----------|----------|--------------|----------------|
 `;
     for (const spec of specs) {
         doc += `| ${spec.category} | ${spec.description} | \`${spec.auraPattern}\` | \`${spec.lwcEquivalent}\` |\n`;
     }
-    doc += `
-## Test Checklist
-
+    doc += `
+## Test Checklist
+
 `;
     const categories = [...new Set(specs.map(s => s.category))];
     for (const cat of categories) {

package/dist/index.js

@@ -55,6 +55,7 @@ program
     .option('--full', 'Run full automated conversion (default: scaffolding only)', false)
     .option('-o, --output <dir>', 'Output directory', options_1.DEFAULT_OUTPUT_DIR)
     .option('--open', 'Open output folder in file explorer after conversion', false)
+    .option('--preview', 'Generate and open HTML preview of converted component', false)
     .option('--dry-run', 'Preview conversion without writing files', false)
     .option('--verbose', 'Show detailed conversion logs', false)
     .action(async (bundlePath, options) => {
@@ -65,6 +66,7 @@ program
         dryRun: options.dryRun,
         verbose: options.verbose,
         open: options.open,
+        preview: options.preview,
     });
 });
 // Visualforce conversion command
@@ -75,6 +77,7 @@ program
     .option('-o, --output <dir>', 'Output directory', options_1.DEFAULT_OUTPUT_DIR)
     .option('--controller <path>', 'Include Apex controller file for analysis')
     .option('--open', 'Open output folder in file explorer after conversion', false)
+    .option('--preview', 'Generate and open HTML preview of converted component', false)
     .option('--dry-run', 'Preview conversion without writing files', false)
     .option('--verbose', 'Show detailed conversion logs', false)
     .action(async (pagePath, options) => {
@@ -86,6 +89,7 @@ program
         verbose: options.verbose,
         controller: options.controller,
         open: options.open,
+        preview: options.preview,
     });
 });
 // Session management command
@@ -150,41 +154,49 @@ program
     }
 });
 // Examples in help
-program.addHelpText('after', `
-Examples:
-  # Convert Aura component (just use the name!)
-  $ ${options_1.CLI_NAME} aura AccountCard
-  $ ${options_1.CLI_NAME} aura AccountCard --full
-
-  # Convert Visualforce page (just use the name!)
-  $ ${options_1.CLI_NAME} vf ContactList
-  $ ${options_1.CLI_NAME} vf ContactList --controller ContactListController
-
-  # Full paths also work
-  $ ${options_1.CLI_NAME} aura ./force-app/main/default/aura/MyComponent
-  $ ${options_1.CLI_NAME} vf ./pages/MyPage.page --controller ./classes/MyController.cls
-
-  # Preview without writing files
-  $ ${options_1.CLI_NAME} aura MyComponent --dry-run --verbose
-
-  # Specify output directory
-  $ ${options_1.CLI_NAME} vf ContactList -o ./src/lwc
-
-  # View session data and learned patterns
-  $ ${options_1.CLI_NAME} session
-  $ ${options_1.CLI_NAME} session --report
-  $ ${options_1.CLI_NAME} session --patterns
-
-Smart Path Resolution:
-  The CLI searches common Salesforce project locations automatically:
-  - Aura: force-app/main/default/aura/, src/aura/, aura/
-  - VF:   force-app/main/default/pages/, src/pages/, pages/
-  - Apex: force-app/main/default/classes/, src/classes/, classes/
-
-Session Management:
-  Conversion data is stored in a temp folder during your session.
-  This helps the tool learn from patterns and provide better suggestions.
-  Use 'session --report' to see full session statistics.
+program.addHelpText('after', `
+Examples:
+  # Convert Aura component (just use the name!)
+  $ ${options_1.CLI_NAME} aura AccountCard
+  $ ${options_1.CLI_NAME} aura AccountCard --full
+
+  # Convert Visualforce page (just use the name!)
+  $ ${options_1.CLI_NAME} vf ContactList
+  $ ${options_1.CLI_NAME} vf ContactList --controller ContactListController
+
+  # Full paths also work
+  $ ${options_1.CLI_NAME} aura ./force-app/main/default/aura/MyComponent
+  $ ${options_1.CLI_NAME} vf ./pages/MyPage.page --controller ./classes/MyController.cls
+
+  # Preview the converted UI in your browser
+  $ ${options_1.CLI_NAME} aura MyComponent --preview
+  $ ${options_1.CLI_NAME} vf ContactList --preview --full
+
+  # Preview without writing files
+  $ ${options_1.CLI_NAME} aura MyComponent --dry-run --verbose
+
+  # Specify output directory
+  $ ${options_1.CLI_NAME} vf ContactList -o ./src/lwc
+
+  # View session data and learned patterns
+  $ ${options_1.CLI_NAME} session
+  $ ${options_1.CLI_NAME} session --report
+  $ ${options_1.CLI_NAME} session --patterns
+
+Smart Path Resolution:
+  The CLI searches common Salesforce project locations automatically:
+  - Aura: force-app/main/default/aura/, src/aura/, aura/
+  - VF:   force-app/main/default/pages/, src/pages/, pages/
+  - Apex: force-app/main/default/classes/, src/classes/, classes/
+
+UI Preview:
+  Use --preview to generate a standalone HTML file that shows how your
+  converted LWC will look using SLDS styling. Opens in your default browser.
+
+Session Management:
+  Conversion data is stored in a temp folder during your session.
+  This helps the tool learn from patterns and provide better suggestions.
+  Use 'session --report' to see full session statistics.
 `);
 // Parse and execute
 // If no arguments provided, launch interactive TUI
@@ -202,6 +214,7 @@ if (process.argv.slice(2).length === 0) {
                     dryRun: false,
                     verbose: false,
                     open: answers.openFolder,
+                    preview: answers.preview,
                 });
             }
             else {
@@ -212,6 +225,7 @@ if (process.argv.slice(2).length === 0) {
                     verbose: false,
                     controller: answers.controllerPath,
                     open: answers.openFolder,
+                    preview: answers.preview,
                 });
             }
         }