create-nativecore 0.1.0 → 0.2.0

package/template/scripts/make-component.mjs.backup

@@ -0,0 +1,432 @@
+#!/usr/bin/env node
+
+/**
+ * Component Generator Script
+ * Like Laravel Artisan for vanilla JS components
+ * 
+ * Usage:
+ *   node scripts/make-component.mjs counter
+ *   npm run make:component counter
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import readline from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get component name from command line
+const componentName = process.argv[2];
+
+if (!componentName) {
+  console.error('❌ Error: Component name is required');
+  console.log('\nUsage:');
+  console.log('  npm run make:component <name>');
+  console.log('\nExample:');
+  console.log('  npm run make:component my-card');
+  process.exit(1);
+}
+
+// Validate component name (kebab-case with required hyphen)
+if (!/^[a-z][a-z0-9]*(-[a-z0-9]+)+$/.test(componentName)) {
+  console.error('❌ Error: Component name must be in kebab-case with at least one hyphen');
+  console.error('   Custom elements require a hyphen to avoid conflicts with native HTML elements');
+  console.error('\n✅ Valid examples:');
+  console.error('   - my-card');
+  console.error('   - user-profile');
+  console.error('   - sample-component');
+  console.error('\n❌ Invalid examples:');
+  console.error('   - card (no hyphen)');
+  console.error('   - MyCard (not kebab-case)');
+  process.exit(1);
+}
+
+// Generate class name (PascalCase)
+const className = componentName
+  .split('-')
+  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+  .join('');
+
+// Component file path (in components/ui folder by default)
+const componentsDir = path.resolve(__dirname, '..', 'src', 'components');
+const uiDir = path.join(componentsDir, 'ui');
+const componentFile = path.join(uiDir, `${componentName}.ts`);
+const registryFile = path.join(componentsDir, 'registry.ts');
+
+// Ensure ui directory exists
+if (!fs.existsSync(uiDir)) {
+  fs.mkdirSync(uiDir, { recursive: true });
+}
+
+// Check if component already exists
+if (fs.existsSync(componentFile)) {
+  console.error(`❌ Error: Component "${componentName}.ts" already exists`);
+  process.exit(1);
+}
+
+// Template files
+const jsTemplate = `/**
+ * ${className} Component
+ * Generated on ${new Date().toLocaleDateString()}
+ * 
+ * REGISTRATION:
+ * This component is automatically registered in src/components/registry.ts
+ * It can be used anywhere after the component registry loads:
+ * 
+ * Usage in HTML/Templates:
+ *   <${componentName}></${componentName}>
+ * 
+ * Usage in other components:
+ *   <${componentName}></${componentName}>
+ * 
+ * Usage in controllers:
+ *   const el = document.createElement('${componentName}');
+ *   document.body.appendChild(el);
+ * 
+ * PERFORMANCE TIPS:
+ * - By default, this component is lazy-loaded (loads on first use)
+ * - For critical layout components (header, sidebar, footer, layout):
+ *   Preload by adding to src/components/preloadRegistry.ts:
+ *   import './ui/${componentName}.js';
+ * - For small, reusable components (buttons, cards, modals):
+ *   Keep lazy loading (better initial load time)
+ * - The registry prevents duplicate loading automatically
+ */
+import { Component, defineComponent } from '../../core/component.js';
+import { useState, computed, type State, type ComputedState } from '../../core/state.js';
+import { store } from '../../stores/appStore.js';
+import { html } from '../../utils/templates.js';
+
+export class ${className} extends Component {
+    // Enable Shadow DOM for CSS encapsulation and slot support
+    // Uncomment to use scoped styles and <slot> elements
+    // static useShadowDOM = true;
+    
+    // ========== Local State ==========
+    // count: State<number>;
+    // name: State<string>;
+    
+    // ========== Computed Values ==========
+    // doubleCount: ComputedState<number>;
+    // greeting: ComputedState<string>;
+    
+    // ========== Global Store ==========
+    // sharedData: State<number>;
+    
+    constructor() {
+        super();
+        
+        // ========== Local State ==========
+        // Example reactive state - remove if not needed
+        // this.count = useState(0);
+        // this.name = useState('');
+        
+        // ========== Computed Values ==========
+        // Automatically derived from other state
+        // this.doubleCount = computed(() => this.count.value * 2);
+        // this.greeting = computed(() => \`Hello, \${this.name.value}!\`);
+        
+        // ========== Global Store ==========
+        // Use global store if needed
+        // this.sharedData = store.count;
+    }
+    
+    template() {
+        // TIP: Define CSS variant classes (e.g., .primary, .secondary) below
+        // The dev tools will automatically detect them and show in a dropdown
+        // This lets you quickly change variants without editing code
+        
+        return html\`
+            <style>
+                /* :host targets the custom element itself (<${componentName}>) */
+                /* Use it to set defaults like display mode, sizing, etc. */
+                /* Note: External CSS can override :host styles */
+                /* :host {
+                    display: block;
+                    width: 100%;
+                } */
+                
+                /* :host with attributes - conditional styling */
+                /* :host([disabled]) {
+                    opacity: 0.5;
+                    pointer-events: none;
+                } */
+                
+                /* Styles below only affect content inside shadow DOM */
+                /* External CSS cannot reach these (fully encapsulated) */
+                .${componentName} {
+                    padding: var(--spacing-lg);
+                    background: white;
+                    border-radius: var(--radius-lg);
+                    box-shadow: var(--shadow-md);
+                }
+                
+                .${componentName} h3 {
+                    margin-top: 0;
+                    color: var(--primary);
+                }
+            </style>
+            
+            <div class="${componentName}">
+                <h3>${className}</h3>
+                <p>Component content goes here</p>
+                
+                <!-- State watcher example - uncomment to use -->
+                <!-- <p id="example-element"></p> -->
+                
+                <!-- Uncomment when Shadow DOM is enabled -->
+                <!-- <slot></slot> -->
+            </div>
+        \`;
+    }
+    
+    onMount() {
+        // ========== Event Delegation Pattern ==========
+        // Use event delegation for reliable event handling
+        // This works even if elements are re-rendered
+        
+        // Use shadowRoot if Shadow DOM is enabled, otherwise use this
+        const root = this.shadowRoot || this;
+        
+        // ========== Event Delegation Example ==========
+        // Uncomment to use event delegation pattern
+        // root.addEventListener('click', (e) => {
+        //     const target = e.target as HTMLElement;
+        //     
+        //     // Handle button clicks
+        //     if (target.matches('.example-button')) {
+        //         this.handleButtonClick(e);
+        //     }
+        //     
+        //     // Handle link clicks
+        //     if (target.matches('.example-link')) {
+        //         e.preventDefault();
+        //         this.handleLinkClick(e);
+        //     }
+        // });
+        
+        // ========== State Watchers ==========
+        // Watch state changes (like React useEffect)
+        // this.count.watch(value => {
+        //     this.$('#example-element').textContent = value;
+        // });
+        
+        // ========== Other Event Listeners ==========
+        // For events that need to be on specific elements (focus, blur, etc.)
+        // const input = this.$('#example-input');
+        // if (input) {
+        //     input.addEventListener('focus', () => console.warn('focused'));
+        // }
+    }
+    
+    // ========== Event Handlers ==========
+    // Uncomment and customize as needed
+    // handleButtonClick(e) {
+    //     console.warn('Button clicked', e.target);
+    //     
+    //     // Emit custom event to parent components
+    //     // this.emitEvent('button-click', { data: 'example' });
+    //     
+    //     // Emit with custom options
+    //     // this.emitEvent('custom-event', { value: 123 }, { 
+    //     //     bubbles: true,
+    //     //     composed: true,
+    //     //     cancelable: true
+    //     // });
+    //     
+    //     // Parent components OR page controllers can listen like this:
+    //     // 
+    //     // In HTML:
+    //     // <${componentName}></${componentName}>
+    //     // 
+    //     // In page controller (e.g., home.controller.ts):
+    //     // import { dom } from '@utils/dom.js';
+    //     // 
+    //     // export function homeController() {
+    //     //   // Option 1: Using dom.listen() shorthand (recommended)
+    //     //   dom.listen('${componentName}', 'button-click', (e) => {
+    //     //     console.log('Received event:', e.detail); // { data: 'example' }
+    //     //   });
+    //     //
+    //     //   // Option 2: Traditional way
+    //     //   document.querySelector('${componentName}').addEventListener('button-click', (e) => {
+    //     //     console.log('Received event:', e.detail);
+    //     //   });
+    //     // }
+    //     //
+    //     // Or in another parent component's onMount():
+    //     // this.shadowRoot.querySelector('${componentName}').addEventListener('button-click', (e) => {
+    //     //   console.log('Child emitted:', e.detail);
+    //     // });
+    // }
+    // 
+    // handleLinkClick(e) {
+    //     console.warn('Link clicked', e.target);
+    //     
+    //     // Example: Emit event with navigation data
+    //     // this.emitEvent('navigate', { href: e.target.href });
+    //     
+    //     // Parent can listen and handle navigation:
+    //     // import { dom } from '@utils/dom.js';
+    //     // dom.listen('${componentName}', 'navigate', (e) => {
+    //     //   window.router.navigate(e.detail.href);
+    //     // });
+    // }
+        
+        // Emit custom event to parent components
+        // this.emitEvent('button-click', { data: 'example' });
+        
+        // Emit with custom options
+        // this.emitEvent('custom-event', { value: 123 }, { 
+        //     bubbles: true,
+        //     composed: true,
+        //     cancelable: true
+        // });
+        
+        // Parent components OR page controllers can listen like this:
+        // 
+        // In HTML:
+        // <${componentName}></${componentName}>
+        // 
+        // In page controller (e.g., home.controller.js):
+        // import { dom } from '../utils/dom.js';
+        // 
+        // export function homeController() {
+    
+    onUnmount() {
+        // Cleanup if needed
+    }
+}
+
+defineComponent('${componentName}', ${className});
+`;
+
+const readmeTemplate = `# ${className}
+
+Custom element: \`<${componentName}>\`
+
+## Usage
+
+\`\`\`html
+<${componentName}></${componentName}>
+\`\`\`
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| - | - | - | - |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| - | - |
+
+## CSS Variables
+
+| Variable | Description |
+|----------|-------------|
+| - | - |
+
+## Example
+
+\`\`\`html
+<${componentName}></${componentName}>
+\`\`\`
+`;
+
+// Write component file
+fs.writeFileSync(componentFile, jsTemplate.trim());
+
+// Prompt for prefetch
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+console.log('\n💡 Performance optimization:');
+console.log('   All components are lazy-loaded by default (loads on first use).');
+console.log('   For critical layout components (header, sidebar, footer), prefetching improves performance.\n');
+
+rl.question('Would you like to prefetch this component? (y/N): ', (answer) => {
+  const shouldPreload = answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes';
+  
+  if (shouldPreload) {
+    // Add import to preloadRegistry.ts
+    const preloadFile = path.resolve(__dirname, '..', 'src', 'components', 'preloadRegistry.ts');
+    
+    if (fs.existsSync(preloadFile)) {
+      let preloadContent = fs.readFileSync(preloadFile, 'utf-8');
+      const importStatement = `import './ui/${componentName}.js';`;
+      
+      // Check if not already imported
+      if (!preloadContent.includes(importStatement)) {
+        // Find the last import line and add after it
+        const lines = preloadContent.split('\n');
+        const lastImportIndex = lines.findLastIndex(line => 
+          line.trim().startsWith("import './") && line.endsWith(".js';")
+        );
+        
+        if (lastImportIndex !== -1) {
+          // Add after last import
+          lines.splice(lastImportIndex + 1, 0, importStatement);
+        } else {
+          // Add at the end of the file
+          lines.push(importStatement);
+        }
+        
+        preloadContent = lines.join('\n');
+        fs.writeFileSync(preloadFile, preloadContent);
+        console.log('✅ Component will be preloaded (added to preloadRegistry.ts)\n');
+      }
+    } else {
+      console.warn('⚠️  preloadRegistry.ts not found - component will still be lazy-loaded\n');
+    }
+  } else {
+    console.log('✅ Component will be lazy-loaded (default behavior)\n');
+  }
+
+  // Add to registry.ts for lazy loading registration
+  if (fs.existsSync(registryFile)) {
+    let registryContent = fs.readFileSync(registryFile, 'utf-8');
+  const registrationStatement = `componentRegistry.register('${componentName}', './ui/${componentName}.js');`;
+  
+  // Check if already registered
+    if (!registryContent.includes(registrationStatement)) {
+    // Find the last registration line and add after it
+      const lines = registryContent.split('\n');
+    const lastRegisterIndex = lines.findLastIndex(line => line.includes('componentRegistry.register'));
+    
+    if (lastRegisterIndex !== -1) {
+      // Add after the last registration
+      lines.splice(lastRegisterIndex + 1, 0, registrationStatement);
+        registryContent = lines.join('\n');
+    } else {
+      // Add at the end if no registrations found
+      registryContent = registryContent.trimEnd() + '\n' + registrationStatement + '\n';
+    }
+    
+    fs.writeFileSync(registryFile, registryContent);
+      console.log('✅ Component registered in component registry\n');
+    }
+  } else {
+    console.log('⚠️  Note: src/components/registry.ts not found. Manual registration required.\n');
+  }
+
+  // Success message
+  console.log(`📁 Location: src/components/ui/${componentName}.ts`);
+  console.log(`🔗 Registered in: src/components/registry.ts`);
+  if (shouldPreload) {
+    console.log(`⚡ Preloaded in: src/components/preloadRegistry.ts`);
+  }
+  console.log('\n📝 Next steps:');
+  console.log(`   1. Edit src/components/ui/${componentName}.ts`);
+  console.log(`   2. Use in your HTML: <${componentName}></${componentName}>`);
+  console.log('\n🎨 Component class:', className);
+  console.log('🏷️  Custom element:', `<${componentName}>`);
+  
+  rl.close();
+});

package/template/scripts/make-controller.mjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import readline from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+// Get controller name from command line or prompt
+const controllerArg = process.argv[2];
+
+async function main() {
+    console.log('NativeCore Controller Generator\n');
+    
+    // Get controller name
+    let controllerName = controllerArg;
+    if (!controllerName) {
+        controllerName = await question('Controller name (e.g., "user-profile"): ');
+    }
+    
+    if (!controllerName) {
+        console.error('Error: Controller name is required');
+        process.exit(1);
+    }
+    
+    // Convert to kebab-case and camelCase
+    const kebabName = controllerName.toLowerCase().replace(/\s+/g, '-');
+    const camelName = kebabName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const titleName = kebabName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+    
+    // Paths
+    const controllersDir = path.resolve(__dirname, '..', 'src', 'controllers');
+    const controllerFile = path.join(controllersDir, `${kebabName}.controller.ts`);
+    const indexFile = path.join(controllersDir, 'index.ts');
+    
+    // Check if controller already exists
+    if (fs.existsSync(controllerFile)) {
+        console.error(`Error: Controller "${kebabName}.controller.ts" already exists`);
+        rl.close();
+        process.exit(1);
+    }
+    
+    // Generate standardized controller template
+    const controllerTemplate = `/**
+ * ${titleName} Controller
+ * Handles dynamic behavior for the ${titleName.toLowerCase()} functionality
+ */
+import { trackEvents, trackSubscriptions } from '@utils/events.js';
+
+export async function ${camelName}Controller(params: Record<string, string> = {}): Promise<() => void> {
+    const events = trackEvents();
+    const subs = trackSubscriptions();
+    
+    // DOM references
+    // const element = document.getElementById('${kebabName}') as HTMLElement;
+    
+    // Load data, then render and attach events
+    // const data = await api.get('/endpoint');
+    // element.innerHTML = \`...\`;
+    
+    // Event listeners — all auto-tracked for cleanup
+    // events.onClick('#my-button', handleClick);
+    // events.delegate('#list', 'click', '.item', handleItemClick);
+    
+    // State watchers — all auto-unsubscribed on cleanup
+    // subs.watch(store.isLoading.watch(loading => toggleSpinner(loading)));
+    
+    // Return cleanup function — called automatically on route change
+    return () => {
+        events.cleanup();
+        subs.cleanup();
+    };
+}
+`;
+    
+    // Create controller file
+    fs.writeFileSync(controllerFile, controllerTemplate);
+    console.log(`Created controller: src/controllers/${kebabName}.controller.ts`);
+    
+    // Update index.ts
+    if (fs.existsSync(indexFile)) {
+        let indexContent = fs.readFileSync(indexFile, 'utf-8');
+        const exportLine = `export { ${camelName}Controller } from './${kebabName}.controller.js';\n`;
+        
+        // Check if already exported
+        if (!indexContent.includes(`${camelName}Controller`)) {
+            indexContent += exportLine;
+            fs.writeFileSync(indexFile, indexContent);
+            console.log(`Added export to controllers/index.ts`);
+        }
+    } else {
+        // Create index file if it doesn't exist
+        const indexContent = `export { ${camelName}Controller } from './${kebabName}.controller.js';\n`;
+        fs.writeFileSync(indexFile, indexContent);
+        console.log(`Created controllers/index.ts`);
+    }
+    
+    console.log('\nController created successfully!');
+    console.log(`\nNext steps:`);
+    console.log(`1. Register in routes: lazyController('${camelName}Controller', '../controllers/${kebabName}.controller.js')`);
+    console.log(`2. Add your logic to: src/controllers/${kebabName}.controller.ts`);
+    
+    rl.close();
+}
+
+main().catch(err => {
+    console.error('Error:', err.message);
+    rl.close();
+    process.exit(1);
+});