webspresso 0.0.8 → 0.0.10

package/README.md

@@ -73,9 +73,31 @@ webspresso new my-app --no-tailwind
 - Asks if you want to install in the current directory
 - If current directory is not empty, shows a warning
 - Prompts for project name (defaults to current folder name)
+- After project creation, asks if you want to install dependencies
+- If yes, runs `npm install` and `npm run build:css`
+- Then asks if you want to start the development server
+- If yes, starts `npm run dev` automatically
+
+**Auto Installation:**
+```bash
+# With --install flag (semi-interactive)
+webspresso new my-app --install
+# → Automatically runs: npm install && npm run build:css
+# → Then prompts: "Start development server?" [Y/n]
+# → If yes: starts npm run dev (with watch:css if Tailwind enabled)
+
+# Without --install flag (fully interactive)
+webspresso new my-app
+# → Prompts: "Install dependencies and build CSS now?" [Y/n]
+# → If yes: runs npm install && npm run build:css
+# → Then: "Start development server?" [Y/n]
+# → If yes: starts npm run dev (with watch:css if Tailwind enabled)
+```
+
+**Note:** When dev server starts with Tailwind CSS, it automatically runs `watch:css` in the background to watch for CSS changes.
 
 Options:
-- `-i, --install` - Auto run `npm install` and `npm run build:css`
+- `-i, --install` - Auto run `npm install` and `npm run build:css` (non-interactive)
 - `--no-tailwind` - Skip Tailwind CSS setup
 
 The project includes:

package/bin/webspresso.js

@@ -429,8 +429,8 @@ module.exports = {
       console.log('✅ Tailwind CSS setup complete!');
     }
     
-    // Auto install if requested
-    if (autoInstall) {
+    // Helper function to run installation
+    async function runInstallation(projectPath, useTailwind) {
       console.log('\n📦 Installing dependencies...\n');
       const { execSync } = require('child_process');
       try {
@@ -447,27 +447,137 @@ module.exports = {
           });
         }
         
-        console.log('\n✅ Project ready!\n');
+        console.log('\n✅ Installation complete!\n');
+      } catch (err) {
+        console.error('❌ Installation failed:', err.message);
+        process.exit(1);
+      }
+    }
+    
+    // Helper function to start dev server
+    function startDevServer(projectPath, useTailwind) {
+      console.log('\n🚀 Starting development server...\n');
+      console.log('Press Ctrl+C to stop\n');
+      
+      const { spawn } = require('child_process');
+      
+      if (useTailwind) {
+        // Start CSS watch and server together
+        const cssWatch = spawn('npm', ['run', 'watch:css'], {
+          stdio: 'inherit',
+          shell: true,
+          cwd: projectPath
+        });
+        
+        const server = spawn('node', ['--watch', 'server.js'], {
+          stdio: 'inherit',
+          shell: true,
+          cwd: projectPath,
+          env: { ...process.env, PORT: process.env.PORT || '3000', NODE_ENV: 'development' }
+        });
+        
+        // Handle exit
+        const cleanup = () => {
+          cssWatch.kill();
+          server.kill();
+          process.exit(0);
+        };
+        
+        process.on('SIGINT', cleanup);
+        process.on('SIGTERM', cleanup);
+        
+        cssWatch.on('exit', cleanup);
+        server.on('exit', cleanup);
+      } else {
+        // Just start server
+        const server = spawn('node', ['--watch', 'server.js'], {
+          stdio: 'inherit',
+          shell: true,
+          cwd: projectPath,
+          env: { ...process.env, PORT: process.env.PORT || '3000', NODE_ENV: 'development' }
+        });
+        
+        server.on('exit', (code) => {
+          process.exit(code || 0);
+        });
+        
+        process.on('SIGINT', () => {
+          server.kill();
+          process.exit(0);
+        });
+      }
+    }
+    
+    // Auto install if requested or ask interactively
+    if (autoInstall) {
+      await runInstallation(projectPath, useTailwind);
+      
+      // Ask if user wants to start dev server
+      const { shouldStartDev } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'shouldStartDev',
+          message: 'Start development server?',
+          default: true
+        }
+      ]);
+      
+      if (shouldStartDev) {
+        startDevServer(projectPath, useTailwind);
+      } else {
+        console.log('✅ Project ready!\n');
         console.log('Start developing:');
         if (!useCurrentDir) {
           console.log(`  cd ${projectName}`);
         }
         console.log('  npm run dev\n');
-      } catch (err) {
-        console.error('❌ Installation failed:', err.message);
-        process.exit(1);
       }
     } else {
-      console.log('\n✅ Project created successfully!\n');
-      console.log('Next steps:');
-      if (!useCurrentDir) {
-        console.log(`  cd ${projectName}`);
-      }
-      console.log('  npm install');
-      if (useTailwind) {
-        console.log('  npm run build:css');
+      // Ask if user wants to install dependencies
+      const { shouldInstall } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'shouldInstall',
+          message: 'Install dependencies and build CSS now?',
+          default: true
+        }
+      ]);
+      
+      if (shouldInstall) {
+        await runInstallation(projectPath, useTailwind);
+        
+        // Ask if user wants to start dev server
+        const { shouldStartDev } = await inquirer.prompt([
+          {
+            type: 'confirm',
+            name: 'shouldStartDev',
+            message: 'Start development server?',
+            default: true
+          }
+        ]);
+        
+        if (shouldStartDev) {
+          startDevServer(projectPath, useTailwind);
+        } else {
+          console.log('\n✅ Project ready!\n');
+          console.log('Start developing:');
+          if (!useCurrentDir) {
+            console.log(`  cd ${projectName}`);
+          }
+          console.log('  npm run dev\n');
+        }
+      } else {
+        console.log('\n✅ Project created successfully!\n');
+        console.log('Next steps:');
+        if (!useCurrentDir) {
+          console.log(`  cd ${projectName}`);
+        }
+        console.log('  npm install');
+        if (useTailwind) {
+          console.log('  npm run build:css');
+        }
+        console.log('  npm run dev\n');
       }
-      console.log('  npm run dev\n');
     }
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "bin": {
@@ -33,7 +33,8 @@
     "bin/",
     "src/",
     "utils/",
-    "core/"
+    "core/",
+    "plugins/"
   ],
   "dependencies": {
     "commander": "^11.1.0",

package/plugins/analytics.js

@@ -0,0 +1,270 @@
+/**
+ * Webspresso Analytics Plugin
+ * Adds tracking scripts and verification meta tags for Google, Yandex, and Bing
+ */
+
+/**
+ * Generate Google Analytics (gtag.js) script
+ */
+function generateGtagScript(config) {
+  if (!config || !config.measurementId) return '';
+  
+  const { measurementId, adsId } = config;
+  
+  let script = `<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=${measurementId}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '${measurementId}');`;
+  
+  if (adsId) {
+    script += `
+  gtag('config', '${adsId}');`;
+  }
+  
+  script += `
+</script>`;
+  
+  return script;
+}
+
+/**
+ * Generate Google Tag Manager script
+ */
+function generateGtmScript(config) {
+  if (!config || !config.containerId) return '';
+  
+  const { containerId } = config;
+  
+  return `<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${containerId}');</script>`;
+}
+
+/**
+ * Generate Google Tag Manager noscript fallback
+ */
+function generateGtmNoscript(config) {
+  if (!config || !config.containerId) return '';
+  
+  return `<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${config.containerId}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`;
+}
+
+/**
+ * Generate Yandex.Metrika script
+ */
+function generateYandexScript(config) {
+  if (!config || !config.counterId) return '';
+  
+  const { counterId, clickmap = true, trackLinks = true, accurateTrackBounce = true, webvisor = false } = config;
+  
+  return `<!-- Yandex.Metrika -->
+<script>
+   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+   m[i].l=1*new Date();
+   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+   ym(${counterId}, "init", {
+        clickmap:${clickmap},
+        trackLinks:${trackLinks},
+        accurateTrackBounce:${accurateTrackBounce}${webvisor ? ',\n        webvisor:true' : ''}
+   });
+</script>
+<noscript><div><img src="https://mc.yandex.ru/watch/${counterId}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>`;
+}
+
+/**
+ * Generate Microsoft/Bing UET script
+ */
+function generateBingScript(config) {
+  if (!config || !config.uetId) return '';
+  
+  const { uetId } = config;
+  
+  return `<!-- Microsoft UET -->
+<script>
+(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"${uetId}",enableAutoSpaTracking:true};
+o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){
+var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
+})(window,document,"script","//bat.bing.com/bat.js","uetq");
+</script>`;
+}
+
+/**
+ * Generate Facebook Pixel script
+ */
+function generateFacebookScript(config) {
+  if (!config || !config.pixelId) return '';
+  
+  const { pixelId } = config;
+  
+  return `<!-- Facebook Pixel -->
+<script>
+!function(f,b,e,v,n,t,s)
+{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];
+s.parentNode.insertBefore(t,s)}(window, document,'script',
+'https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '${pixelId}');
+fbq('track', 'PageView');
+</script>
+<noscript><img height="1" width="1" style="display:none"
+src="https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1"/></noscript>`;
+}
+
+/**
+ * Generate verification meta tags
+ */
+function generateVerificationTags(options) {
+  const tags = [];
+  
+  if (options.google?.verificationCode) {
+    tags.push(`<meta name="google-site-verification" content="${options.google.verificationCode}">`);
+  }
+  
+  if (options.yandex?.verificationCode) {
+    tags.push(`<meta name="yandex-verification" content="${options.yandex.verificationCode}">`);
+  }
+  
+  if (options.bing?.verificationCode) {
+    tags.push(`<meta name="msvalidate.01" content="${options.bing.verificationCode}">`);
+  }
+  
+  if (options.facebook?.domainVerification) {
+    tags.push(`<meta name="facebook-domain-verification" content="${options.facebook.domainVerification}">`);
+  }
+  
+  if (options.pinterest?.verificationCode) {
+    tags.push(`<meta name="p:domain_verify" content="${options.pinterest.verificationCode}">`);
+  }
+  
+  return tags.join('\n');
+}
+
+/**
+ * Create the analytics plugin
+ * @param {Object} options - Plugin options
+ * @param {Object} options.google - Google Analytics config
+ * @param {string} options.google.measurementId - GA4 Measurement ID (G-XXXXXXXXXX)
+ * @param {string} options.google.adsId - Google Ads ID (AW-XXXXXXXXXX)
+ * @param {string} options.google.verificationCode - Search Console verification
+ * @param {Object} options.gtm - Google Tag Manager config
+ * @param {string} options.gtm.containerId - GTM Container ID (GTM-XXXXXXX)
+ * @param {Object} options.yandex - Yandex.Metrika config
+ * @param {string} options.yandex.counterId - Yandex counter ID
+ * @param {string} options.yandex.verificationCode - Yandex Webmaster verification
+ * @param {boolean} options.yandex.webvisor - Enable Webvisor
+ * @param {Object} options.bing - Microsoft/Bing config
+ * @param {string} options.bing.uetId - UET tag ID
+ * @param {string} options.bing.verificationCode - Bing Webmaster verification
+ * @param {Object} options.facebook - Facebook/Meta config
+ * @param {string} options.facebook.pixelId - Facebook Pixel ID
+ * @param {string} options.facebook.domainVerification - Domain verification code
+ */
+function analyticsPlugin(options = {}) {
+  const { google, gtm, yandex, bing, facebook, pinterest } = options;
+  
+  return {
+    name: 'analytics',
+    version: '1.0.0',
+    _options: options,
+    
+    /**
+     * Public API for other plugins
+     */
+    api: {
+      /**
+       * Get configuration
+       */
+      getConfig() {
+        return { ...options };
+      },
+      
+      /**
+       * Check if a tracker is configured
+       */
+      hasTracker(name) {
+        return !!options[name];
+      }
+    },
+    
+    /**
+     * Register helpers
+     */
+    register(ctx) {
+      // Google Analytics (gtag.js)
+      ctx.addHelper('gtag', () => generateGtagScript(google));
+      
+      // Google Tag Manager
+      ctx.addHelper('gtm', () => generateGtmScript(gtm));
+      ctx.addHelper('gtmNoscript', () => generateGtmNoscript(gtm));
+      
+      // Yandex.Metrika
+      ctx.addHelper('yandexMetrika', () => generateYandexScript(yandex));
+      
+      // Microsoft/Bing UET
+      ctx.addHelper('bingUET', () => generateBingScript(bing));
+      
+      // Facebook Pixel
+      ctx.addHelper('facebookPixel', () => generateFacebookScript(facebook));
+      
+      // Verification meta tags
+      ctx.addHelper('verificationTags', () => generateVerificationTags(options));
+      
+      // All analytics scripts combined
+      ctx.addHelper('allAnalytics', () => {
+        const scripts = [];
+        
+        if (google) scripts.push(generateGtagScript(google));
+        if (gtm) scripts.push(generateGtmScript(gtm));
+        if (yandex) scripts.push(generateYandexScript(yandex));
+        if (bing) scripts.push(generateBingScript(bing));
+        if (facebook) scripts.push(generateFacebookScript(facebook));
+        
+        return scripts.filter(Boolean).join('\n\n');
+      });
+      
+      // Head scripts (verification + analytics)
+      ctx.addHelper('analyticsHead', () => {
+        const parts = [];
+        
+        // Verification tags first
+        const verificationTags = generateVerificationTags(options);
+        if (verificationTags) parts.push(verificationTags);
+        
+        // GTM should be as early as possible
+        if (gtm) parts.push(generateGtmScript(gtm));
+        
+        // Other analytics
+        if (google) parts.push(generateGtagScript(google));
+        if (yandex) parts.push(generateYandexScript(yandex));
+        if (bing) parts.push(generateBingScript(bing));
+        if (facebook) parts.push(generateFacebookScript(facebook));
+        
+        return parts.filter(Boolean).join('\n\n');
+      });
+      
+      // Body open scripts (GTM noscript)
+      ctx.addHelper('analyticsBodyOpen', () => {
+        return generateGtmNoscript(gtm);
+      });
+    }
+  };
+}
+
+module.exports = analyticsPlugin;
+
+
+