create-nativecore 0.1.1 → 0.2.0

package/template/scripts/minify.mjs

@@ -0,0 +1,71 @@
+// scripts/minify.mjs
+// Minify all JavaScript files in dist folder for production
+import { readFile, writeFile } from 'fs/promises';
+import { readdir, stat } from 'fs/promises';
+import { join } from 'path';
+import { minify } from 'terser';
+
+async function getAllJSFiles(dir, fileList = []) {
+  const files = await readdir(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const fileStat = await stat(filePath);
+    
+    if (fileStat.isDirectory()) {
+      await getAllJSFiles(filePath, fileList);
+    } else if (file.endsWith('.js') && !file.endsWith('.min.js')) {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+async function minifyFile(filePath) {
+  try {
+    const code = await readFile(filePath, 'utf8');
+    const result = await minify(code, {
+      compress: {
+        dead_code: true,
+        drop_console: false, // Keep console.warn/error, remove console.log
+        drop_debugger: true,
+        passes: 2, // Multiple passes for better compression
+        pure_funcs: ['console.log', 'console.debug', 'console.trace'],
+      },
+      mangle: {
+        toplevel: true, // Mangle all variable names for max compression
+        properties: false, // Don't mangle property names (safer for web components)
+      },
+      format: {
+        comments: false, // Remove all comments
+        beautify: false, // No whitespace/newlines - everything on one line
+      },
+    });
+    
+    if (result.code) {
+      await writeFile(filePath, result.code, 'utf8');
+      const originalSize = Buffer.byteLength(code, 'utf8');
+      const minifiedSize = Buffer.byteLength(result.code, 'utf8');
+      const savings = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
+      console.log(`✓ ${filePath.replace(process.cwd(), '.')} - ${savings}% smaller`);
+    }
+  } catch (error) {
+    console.error(`✗ Failed to minify ${filePath}:`, error.message);
+  }
+}
+
+async function minifyAll() {
+  const distPath = join(process.cwd(), 'dist');
+  console.log('🗜️  Minifying JavaScript files...\n');
+  
+  const jsFiles = await getAllJSFiles(distPath);
+  
+  for (const file of jsFiles) {
+    await minifyFile(file);
+  }
+  
+  console.log(`\n✨ Minified ${jsFiles.length} files`);
+}
+
+minifyAll().catch(console.error);

package/template/scripts/prepare-static-assets.mjs

@@ -0,0 +1,141 @@
+/**
+ * Prepare a deployment directory (_deploy/) that mirrors the static
+ * hosting structure expected by Cloudflare Pages and other file-based
+ * deploy targets.
+ *
+ * Expected runtime paths the HTML shells reference:
+ *   /dist/app.js           - compiled JS (module entry)
+ *   /src/styles/*.css       - stylesheets
+ *   /src/views/**\/*.html   - view partials loaded by the router
+ *   /docs/*.md              - markdown consumed by the docs controller
+ *   /manifest.json, /robots.txt, /sitemap.xml, etc.
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, '..');
+const distDir = path.join(rootDir, 'dist');
+const deployDir = path.join(rootDir, '_deploy');
+
+function ensureDir(dirPath) {
+    fs.mkdirSync(dirPath, { recursive: true });
+}
+
+function cleanDir(dirPath) {
+    if (fs.existsSync(dirPath)) {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+    }
+    ensureDir(dirPath);
+}
+
+function copyFile(sourcePath, destinationPath) {
+    if (!fs.existsSync(sourcePath)) {
+        return;
+    }
+
+    ensureDir(path.dirname(destinationPath));
+    fs.copyFileSync(sourcePath, destinationPath);
+}
+
+function copyDirectory(sourceDir, destinationDir, filter) {
+    if (!fs.existsSync(sourceDir)) {
+        return;
+    }
+
+    ensureDir(destinationDir);
+
+    for (const entry of fs.readdirSync(sourceDir, { withFileTypes: true })) {
+        const sourcePath = path.join(sourceDir, entry.name);
+        const destinationPath = path.join(destinationDir, entry.name);
+
+        if (entry.isDirectory()) {
+            copyDirectory(sourcePath, destinationPath, filter);
+        } else if (!filter || filter(entry.name)) {
+            copyFile(sourcePath, destinationPath);
+        }
+    }
+}
+
+/** Only compiled JS/JSON output — skip .d.ts, sourcemaps, and build info. */
+function isCompiledJS(name) {
+    if (name === '.tsbuildinfo') return false;
+    if (name.endsWith('.d.ts')) return false;
+    if (name.endsWith('.d.ts.map')) return false;
+    if (name.endsWith('.js.map')) return false;
+    return true;
+}
+
+function prepareDeployDirectory() {
+    cleanDir(deployDir);
+    const botDistDir = path.join(distDir, 'bot');
+
+    // ---------------------------------------------------------------
+    // 1. HTML shells (version-injected by inject-version.mjs earlier)
+    // ---------------------------------------------------------------
+    copyFile(path.join(rootDir, 'index.html'), path.join(deployDir, 'index.html'));
+    copyFile(path.join(rootDir, 'manifest.json'), path.join(deployDir, 'manifest.json'));
+
+    // ---------------------------------------------------------------
+    // 2. Compiled JS → _deploy/dist/  (matches runtime /dist/app.js)
+    // ---------------------------------------------------------------
+    const jsDeployDir = path.join(deployDir, 'dist');
+
+    for (const entry of fs.readdirSync(distDir, { withFileTypes: true })) {
+        const sourcePath = path.join(distDir, entry.name);
+        const destPath = path.join(jsDeployDir, entry.name);
+
+        // Skip static assets that were previously mixed into dist/.
+        // We only want the TS compiler output here.
+        if (['src', 'docs', 'bot', 'index.html', 'manifest.json',
+             'robots.txt', 'sitemap.xml', '.well-known', 'assets'].includes(entry.name)) {
+            continue;
+        }
+
+        if (entry.isDirectory()) {
+            copyDirectory(sourcePath, destPath, isCompiledJS);
+        } else if (isCompiledJS(entry.name)) {
+            copyFile(sourcePath, destPath);
+        }
+    }
+
+    // ---------------------------------------------------------------
+    // 3. CSS → _deploy/src/styles/  (matches runtime /src/styles/)
+    // ---------------------------------------------------------------
+    copyDirectory(
+        path.join(rootDir, 'src', 'styles'),
+        path.join(deployDir, 'src', 'styles')
+    );
+
+    // ---------------------------------------------------------------
+    // 4. View partials → _deploy/src/views/  (matches runtime /src/views/)
+    // ---------------------------------------------------------------
+    copyDirectory(
+        path.join(rootDir, 'src', 'views'),
+        path.join(deployDir, 'src', 'views')
+    );
+
+    // ---------------------------------------------------------------
+    // 5. Docs markdown → _deploy/docs/
+    // ---------------------------------------------------------------
+    copyFile(
+        path.join(rootDir, 'docs', 'NATIVECORE_EBOOK.md'),
+        path.join(deployDir, 'docs', 'NATIVECORE_EBOOK.md')
+    );
+
+    // ---------------------------------------------------------------
+    // 6. Bot-rendered HTML → _deploy/bot/ when available
+    // ---------------------------------------------------------------
+    copyDirectory(botDistDir, path.join(deployDir, 'bot'));
+
+    // ---------------------------------------------------------------
+    // 7. Public static assets → _deploy/ root (robots.txt, etc.)
+    // ---------------------------------------------------------------
+    copyDirectory(path.join(rootDir, 'public'), deployDir);
+
+    console.log('Deployment directory prepared: _deploy/');
+}
+
+prepareDeployDirectory();

package/template/scripts/prompt-bot-build.mjs

@@ -0,0 +1,223 @@
+import readline from 'readline';
+import { exec, spawn } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+let serverProcess = null;
+
+function normalizeBotBuildPreference(value) {
+    if (!value) return null;
+
+    const normalized = value.toLowerCase().trim();
+
+    if (['y', 'yes', 'true', '1', 'always'].includes(normalized)) {
+        return 'always';
+    }
+
+    if (['n', 'no', 'false', '0', 'never', 'skip'].includes(normalized)) {
+        return 'never';
+    }
+
+    if (['auto', 'prompt'].includes(normalized)) {
+        return 'auto';
+    }
+
+    return null;
+}
+
+function resolveBotBuildMode() {
+    const cliArgs = new Set(process.argv.slice(2));
+
+    if (cliArgs.has('--yes') || cliArgs.has('--bots')) {
+        return 'always';
+    }
+
+    if (cliArgs.has('--no') || cliArgs.has('--skip-bots')) {
+        return 'never';
+    }
+
+    const envMode = normalizeBotBuildPreference(process.env.BOT_BUILD);
+    if (envMode) {
+        return envMode;
+    }
+
+    if (process.env.CI || !process.stdin.isTTY || !process.stdout.isTTY) {
+        return 'never';
+    }
+
+    return 'prompt';
+}
+
+function question(prompt) {
+    return new Promise((resolve) => {
+        rl.question(prompt, (answer) => {
+            resolve(answer);
+        });
+    });
+}
+
+async function startServer() {
+    return new Promise((resolve, reject) => {
+        console.log('🚀 Starting dev server...');
+        
+        // Start server directly without npm (skips prestart compilation)
+        serverProcess = spawn('node', ['server.js'], {
+            detached: false,
+            stdio: 'ignore', // Suppress output to avoid overlap
+            shell: true
+        });
+        
+        serverProcess.on('error', (error) => {
+            reject(new Error(`Failed to start server: ${error.message}`));
+        });
+        
+        // Wait for server to be ready
+        console.log('⏳ Waiting for server...');
+        let attempts = 0;
+        const maxAttempts = 30;
+        
+        const checkServer = setInterval(async () => {
+            attempts++;
+            
+            try {
+                const response = await fetch('http://localhost:8000');
+                if (response.ok) {
+                    clearInterval(checkServer);
+                    console.log('✅ Server ready!\n');
+                    resolve();
+                }
+            } catch (error) {
+                if (attempts >= maxAttempts) {
+                    clearInterval(checkServer);
+                    reject(new Error('Server failed to start after 30 seconds'));
+                }
+            }
+        }, 1000);
+    });
+}
+
+function stopServer() {
+    if (serverProcess) {
+        console.log('\n🛑 Stopping dev server...');
+        serverProcess.kill();
+        serverProcess = null;
+    }
+}
+
+async function main() {
+    const mode = resolveBotBuildMode();
+
+    // Wait for any background compilation to finish
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    // Clear any overlapping output
+    console.clear();
+    
+    console.log('\n╔════════════════════════════════════════════════════╗');
+    console.log('║   🤖 SEO-Optimized Build Available                ║');
+    console.log('╚════════════════════════════════════════════════════╝\n');
+    
+    console.log('Generate bot-optimized HTML for search engines?');
+    console.log('  • Improves SEO (Google, Bing, etc.)');
+    console.log('  • Enables social media previews');
+    console.log('  • Zero impact on user performance');
+    console.log('');
+    
+    let shouldBuildBots = false;
+
+    if (mode === 'always') {
+        console.log('BOT_BUILD=always detected. Running bot build without prompt.\n');
+        shouldBuildBots = true;
+    } else if (mode === 'never') {
+        console.log('BOT_BUILD=never detected. Skipping bot build without prompt.\n');
+    } else {
+        const answer = await question('Build for bots? (y/N): ');
+        shouldBuildBots = answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes';
+    }
+
+    if (shouldBuildBots) {
+        console.log('\n📦 Starting bot build...\n');
+        
+        let serverWasStarted = false;
+        
+        try {
+            // Check if server is already running
+            console.log('⚙️  Checking dev server...');
+            
+            try {
+                const response = await fetch('http://localhost:8000');
+                if (response.ok) {
+                    console.log('✅ Server already running!\n');
+                }
+            } catch {
+                // Server not running, try to start it
+                try {
+                    await startServer();
+                    serverWasStarted = true;
+                } catch (startError) {
+                    // If start failed due to port in use, check if it's actually working now
+                    if (startError.message.includes('address already in use') || 
+                        startError.message.includes('EADDRINUSE')) {
+                        console.log('\n⚠️  Port already in use, checking if server is now accessible...');
+                        try {
+                            const retryResponse = await fetch('http://localhost:8000');
+                            if (retryResponse.ok) {
+                                console.log('✅ Server is accessible!\n');
+                            } else {
+                                throw new Error('Server port in use but not responding');
+                            }
+                        } catch {
+                            throw new Error('Port 8000 is in use. Please run: taskkill /F /IM node.exe');
+                        }
+                    } else {
+                        throw startError;
+                    }
+                }
+            }
+            
+            // Run bot build
+            console.log('🎨 Rendering pages...\n');
+            const { stdout, stderr } = await execAsync('node scripts/build-for-bots.mjs');
+            
+            if (stdout) console.log(stdout);
+            if (stderr && !stderr.includes('ExperimentalWarning')) {
+                console.error(stderr);
+            }
+            
+        } catch (error) {
+            console.error('\n❌ Bot build failed:', error.message);
+            rl.close();
+            if (serverWasStarted) stopServer();
+            process.exit(1);
+        } finally {
+            // Clean up server if we started it
+            if (serverWasStarted) {
+                stopServer();
+            }
+        }
+    } else {
+        console.log('\n⏭️  Skipping bot build');
+        console.log('💡 Run `npm run build:bots` anytime to generate\n');
+    }
+    
+    rl.close();
+}
+
+// Handle cleanup on exit
+process.on('exit', stopServer);
+process.on('SIGINT', () => {
+    stopServer();
+    process.exit(0);
+});
+process.on('SIGTERM', () => {
+    stopServer();
+    process.exit(0);
+});
+
+main();

package/template/scripts/remove-component.mjs

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+/**
+ * Component Removal Script
+ * Removes component file, import from registry.ts, and usage from codebase
+ * 
+ * Usage:
+ *   node scripts/remove-component.mjs sample-component
+ *   npm run remove:component sample-component
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+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 clean:component <name>');
+  console.log('\nExample:');
+  console.log('  npm run clean:component my-card');
+  process.exit(1);
+}
+
+// Validate component name format
+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');
+  process.exit(1);
+}
+
+// Paths
+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');
+
+console.log(`\n🗑️  Removing component: ${componentName}\n`);
+
+// Step 1: Check if component file exists
+if (!fs.existsSync(componentFile)) {
+  console.error(`❌ Error: Component file "${componentName}.ts" does not exist`);
+  console.log(`   Expected location: src/components/ui/${componentName}.ts`);
+  process.exit(1);
+}
+
+// Step 2: Remove from registry.ts (lazy loading registration)
+let removedFromIndex = false;
+if (fs.existsSync(registryFile)) {
+  let indexContent = fs.readFileSync(registryFile, 'utf-8');
+  const registrationPattern = new RegExp(`componentRegistry\\.register\\('${componentName}'[^\\n]*\\n`, 'g');
+  
+  if (registrationPattern.test(indexContent)) {
+    // Remove the registration line
+    indexContent = indexContent.replace(registrationPattern, '');
+    
+    fs.writeFileSync(registryFile, indexContent);
+    console.log('✅ Removed registration from registry.ts');
+    removedFromIndex = true;
+  } else {
+    console.log('⚠️  Registration not found in registry.ts (may have been manually removed)');
+  }
+} else {
+  console.log('⚠️  registry.ts not found');
+}
+
+// Step 2.5: Remove from preloadRegistry.ts if it exists
+const preloadFile = path.join(componentsDir, 'preloadRegistry.ts');
+let removedFromPreload = false;
+
+if (fs.existsSync(preloadFile)) {
+  let preloadContent = fs.readFileSync(preloadFile, 'utf-8');
+  const preloadPattern = new RegExp(`import\\s+['\"]\\./ui/${componentName}\\.js['\"];?\\s*\\n`, 'g');
+  
+  if (preloadPattern.test(preloadContent)) {
+    preloadContent = preloadContent.replace(preloadPattern, '');
+    fs.writeFileSync(preloadFile, preloadContent);
+    console.log('✅ Removed from preloadRegistry.ts');
+    removedFromPreload = true;
+  }
+}
+
+// Step 3: Find and list usages in codebase
+console.log(`\n🔍 Searching for <${componentName}> usage in codebase...`);
+
+const usagePattern = new RegExp(`<${componentName}[^>]*>`, 'g');
+const closingPattern = new RegExp(`</${componentName}>`, 'g');
+const usages = [];
+
+// Search in specific directories
+const searchDirs = [
+  path.resolve(__dirname, '..', 'src', 'views', 'pages'),
+  path.resolve(__dirname, '..', 'src', 'components'),
+  path.resolve(__dirname, '..', 'src', 'controllers'),
+];
+
+function searchDirectory(dirPath) {
+  if (!fs.existsSync(dirPath)) return;
+  
+  const files = fs.readdirSync(dirPath, { withFileTypes: true });
+  
+  for (const file of files) {
+    const fullPath = path.join(dirPath, file.name);
+    
+    if (file.isDirectory()) {
+      searchDirectory(fullPath);
+    } else if (file.name.endsWith('.html') || file.name.endsWith('.ts')) {
+      const content = fs.readFileSync(fullPath, 'utf-8');
+      const openingMatches = content.match(usagePattern);
+      const closingMatches = content.match(closingPattern);
+      
+      if (openingMatches || closingMatches) {
+        const relativePath = path.relative(path.resolve(__dirname, '..'), fullPath);
+        usages.push({
+          file: relativePath,
+          count: (openingMatches?.length || 0) + (closingMatches?.length || 0)
+        });
+      }
+    }
+  }
+}
+
+searchDirs.forEach(searchDirectory);
+
+// Step 4: Remove usages from files
+if (usages.length > 0) {
+  console.log(`\n📋 Found usage in ${usages.length} file(s):\n`);
+  
+  for (const usage of usages) {
+    console.log(`   - ${usage.file} (${usage.count} occurrence${usage.count > 1 ? 's' : ''})`);
+  }
+  
+  console.log(`\n🗑️  Removing <${componentName}> tags from files...`);
+  
+  for (const usage of usages) {
+    const fullPath = path.resolve(__dirname, '..', usage.file);
+    let content = fs.readFileSync(fullPath, 'utf-8');
+    
+    // Remove self-closing tags: <component-name />
+    content = content.replace(new RegExp(`<${componentName}\\s*\\/?>`, 'g'), '');
+    
+    // Remove opening and closing tags: <component-name></component-name>
+    content = content.replace(new RegExp(`<${componentName}[^>]*>[\\s\\S]*?<\\/${componentName}>`, 'g'), '');
+    
+    fs.writeFileSync(fullPath, content);
+    console.log(`   ✅ Cleaned ${usage.file}`);
+  }
+} else {
+  console.log('   No usages found ✨');
+}
+
+// Step 5: Delete the component file
+fs.unlinkSync(componentFile);
+console.log(`\n✅ Deleted component file: ${componentName}.ts`);
+
+// Summary
+console.log('\n✨ Component removed successfully!\n');
+console.log('📊 Summary:');
+console.log(`   🗑️  Deleted: src/components/ui/${componentName}.ts`);
+console.log(`   ${removedFromIndex ? '✅' : '⚠️ '} Registry.ts: ${removedFromIndex ? 'Updated' : 'Not found'}`);
+if (removedFromPreload) {
+  console.log(`   ✅ PreloadRegistry.ts: Removed`);
+}
+console.log(`   📝 Files cleaned: ${usages.length}`);
+console.log('');