webspresso 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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;
+
+
+

package/plugins/dashboard/app.js

@@ -0,0 +1,267 @@
+/**
+ * Dashboard Mithril.js Application
+ * Components and logic for the dashboard SPA
+ */
+
+module.exports = `
+// State
+const state = {
+  activeTab: 'routes',
+  filter: 'all',
+  search: '',
+  routes: window.__DASHBOARD_DATA__.routes || [],
+  plugins: window.__DASHBOARD_DATA__.plugins || [],
+  config: window.__DASHBOARD_DATA__.config || {}
+};
+
+// Icons
+const Icons = {
+  logo: () => m('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
+    m('path', { d: 'M12 2L2 7L12 12L22 7L12 2Z', fill: 'currentColor', opacity: '0.3' }),
+    m('path', { d: 'M2 17L12 22L22 17', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+    m('path', { d: 'M2 12L12 17L22 12', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' })
+  ]),
+  empty: () => m('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5' }, [
+    m('path', { d: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' })
+  ])
+};
+
+// Components
+const Header = {
+  view: () => m('.header', [
+    m('h1', [
+      Icons.logo(),
+      'Webspresso Dashboard'
+    ]),
+    m('span.dev-badge', 'development')
+  ])
+};
+
+const Tabs = {
+  view: () => m('.tabs', [
+    ['routes', 'Routes'],
+    ['plugins', 'Plugins'],
+    ['config', 'Config']
+  ].map(([id, label]) => 
+    m('button.tab', {
+      class: state.activeTab === id ? 'active' : '',
+      onclick: () => { state.activeTab = id; }
+    }, label)
+  ))
+};
+
+const FilterBar = {
+  view: () => m('.filter-bar', [
+    m('.filter-group', [
+      ['all', 'All'],
+      ['ssr', 'SSR'],
+      ['api', 'API']
+    ].map(([id, label]) =>
+      m('button.filter-btn', {
+        class: state.filter === id ? 'active' : '',
+        onclick: () => { state.filter = id; }
+      }, label)
+    )),
+    m('input.search-input', {
+      type: 'text',
+      placeholder: 'Search routes...',
+      value: state.search,
+      oninput: (e) => { state.search = e.target.value; }
+    })
+  ])
+};
+
+const MethodBadge = {
+  view: (vnode) => m('span.method-badge.method-' + vnode.attrs.method, 
+    vnode.attrs.method.toUpperCase()
+  )
+};
+
+const TypeBadge = {
+  view: (vnode) => m('span.type-badge.type-' + vnode.attrs.type, 
+    vnode.attrs.type.toUpperCase()
+  )
+};
+
+const RoutesTable = {
+  view: () => {
+    let routes = state.routes;
+    
+    // Apply filter
+    if (state.filter !== 'all') {
+      routes = routes.filter(r => r.type === state.filter);
+    }
+    
+    // Apply search
+    if (state.search) {
+      const search = state.search.toLowerCase();
+      routes = routes.filter(r => 
+        r.pattern.toLowerCase().includes(search) ||
+        r.file.toLowerCase().includes(search)
+      );
+    }
+    
+    if (routes.length === 0) {
+      return m('.table-container', 
+        m('.empty-state', [
+          Icons.empty(),
+          m('p', 'No routes found')
+        ])
+      );
+    }
+    
+    return m('.table-container',
+      m('table', [
+        m('thead',
+          m('tr', [
+            m('th', 'Method'),
+            m('th', 'Path'),
+            m('th', 'File'),
+            m('th', 'Type')
+          ])
+        ),
+        m('tbody',
+          routes.map(route =>
+            m('tr', [
+              m('td', m(MethodBadge, { method: route.method })),
+              m('td', [
+                m('span.code', route.pattern),
+                route.isDynamic ? m('span.dynamic-indicator', '⚡ dynamic') : null
+              ]),
+              m('td', m('span.file-path', route.file)),
+              m('td', m(TypeBadge, { type: route.type }))
+            ])
+          )
+        )
+      ])
+    );
+  }
+};
+
+const StatsGrid = {
+  view: () => {
+    const ssrCount = state.routes.filter(r => r.type === 'ssr').length;
+    const apiCount = state.routes.filter(r => r.type === 'api').length;
+    const dynamicCount = state.routes.filter(r => r.isDynamic).length;
+    
+    return m('.stats-grid', [
+      m('.card', [
+        m('.card-title', 'Total Routes'),
+        m('.card-value', state.routes.length)
+      ]),
+      m('.card', [
+        m('.card-title', 'SSR Pages'),
+        m('.card-value', ssrCount)
+      ]),
+      m('.card', [
+        m('.card-title', 'API Endpoints'),
+        m('.card-value', apiCount)
+      ]),
+      m('.card', [
+        m('.card-title', 'Dynamic Routes'),
+        m('.card-value', dynamicCount)
+      ])
+    ]);
+  }
+};
+
+const RoutesView = {
+  view: () => m('div', [
+    m(StatsGrid),
+    m(FilterBar),
+    m(RoutesTable)
+  ])
+};
+
+const PluginsView = {
+  view: () => {
+    if (state.plugins.length === 0) {
+      return m('.table-container',
+        m('.empty-state', [
+          Icons.empty(),
+          m('p', 'No plugins loaded')
+        ])
+      );
+    }
+    
+    return m('.table-container',
+      state.plugins.map(plugin =>
+        m('.plugin-item', [
+          m('div', [
+            m('.plugin-name', plugin.name),
+            plugin.description ? m('p', { style: 'color: var(--text-secondary); font-size: 13px; margin-top: 4px;' }, plugin.description) : null
+          ]),
+          m('.plugin-version', 'v' + plugin.version)
+        ])
+      )
+    );
+  }
+};
+
+const ConfigView = {
+  view: () => {
+    const config = state.config;
+    
+    return m('div', [
+      // Environment
+      m('.config-section', [
+        m('h3', 'Environment'),
+        m('.table-container',
+          Object.entries(config.env || {}).map(([key, value]) =>
+            m('.config-item', [
+              m('.config-key', key),
+              m('.config-value', String(value))
+            ])
+          )
+        )
+      ]),
+      
+      // i18n
+      m('.config-section', [
+        m('h3', 'Internationalization'),
+        m('.table-container', [
+          m('.config-item', [
+            m('.config-key', 'Default Locale'),
+            m('.config-value', config.i18n?.defaultLocale || 'en')
+          ]),
+          m('.config-item', [
+            m('.config-key', 'Supported Locales'),
+            m('.config-value', (config.i18n?.supportedLocales || ['en']).join(', '))
+          ])
+        ])
+      ]),
+      
+      // Server
+      m('.config-section', [
+        m('h3', 'Server'),
+        m('.table-container', [
+          m('.config-item', [
+            m('.config-key', 'Port'),
+            m('.config-value', config.server?.port || '3000')
+          ]),
+          m('.config-item', [
+            m('.config-key', 'Base URL'),
+            m('.config-value', config.server?.baseUrl || 'http://localhost:3000')
+          ])
+        ])
+      ])
+    ]);
+  }
+};
+
+const App = {
+  view: () => m('.dashboard', [
+    m(Header),
+    m(Tabs),
+    state.activeTab === 'routes' ? m(RoutesView) : null,
+    state.activeTab === 'plugins' ? m(PluginsView) : null,
+    state.activeTab === 'config' ? m(ConfigView) : null
+  ])
+};
+
+// Mount app
+m.mount(document.getElementById('app'), App);
+`;
+
+
+

package/plugins/dashboard/index.js

@@ -0,0 +1,142 @@
+/**
+ * Webspresso Dashboard Plugin
+ * Development dashboard for monitoring routes, plugins, and configuration
+ * Uses Mithril.js for the SPA interface
+ */
+
+const styles = require('./styles');
+const appScript = require('./app');
+
+/**
+ * Filter sensitive environment variables
+ */
+function filterSensitiveEnv(env) {
+  const sensitiveKeys = ['SECRET', 'PASSWORD', 'KEY', 'TOKEN', 'CREDENTIAL', 'PRIVATE'];
+  const filtered = {};
+  
+  for (const [key, value] of Object.entries(env)) {
+    const isSensitive = sensitiveKeys.some(s => key.toUpperCase().includes(s));
+    filtered[key] = isSensitive ? '••••••••' : value;
+  }
+  
+  return filtered;
+}
+
+/**
+ * Generate the dashboard HTML
+ */
+function generateDashboardHtml(data) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Webspresso Dashboard</title>
+  <script src="https://unpkg.com/mithril/mithril.js"></script>
+  <style>${styles}</style>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.__DASHBOARD_DATA__ = ${JSON.stringify(data)};
+  </script>
+  <script>${appScript}</script>
+</body>
+</html>`;
+}
+
+/**
+ * Create the dashboard plugin
+ * @param {Object} options - Plugin options
+ * @param {string} options.path - Dashboard path (default: '/_webspresso')
+ * @param {boolean} options.enabled - Force enable/disable (default: auto based on NODE_ENV)
+ */
+function dashboardPlugin(options = {}) {
+  const {
+    path: dashboardPath = '/_webspresso',
+    enabled
+  } = options;
+  
+  // Determine if enabled (default: only in development)
+  const isEnabled = enabled !== undefined 
+    ? enabled 
+    : process.env.NODE_ENV !== 'production';
+  
+  return {
+    name: 'dashboard',
+    version: '1.0.0',
+    description: 'Development dashboard for monitoring routes and configuration',
+    
+    /**
+     * Called after routes are mounted
+     */
+    onRoutesReady(ctx) {
+      // Skip if disabled
+      if (!isEnabled) {
+        return;
+      }
+      
+      const { app, routes, options: appOptions } = ctx;
+      
+      // Collect plugin info
+      const pluginManager = ctx.pluginManager || (appOptions && appOptions.pluginManager);
+      const plugins = [];
+      
+      // Get plugins from plugin manager if available
+      if (pluginManager && pluginManager.plugins) {
+        for (const [name, plugin] of pluginManager.plugins) {
+          plugins.push({
+            name: plugin.name || name,
+            version: plugin.version || '0.0.0',
+            description: plugin.description || ''
+          });
+        }
+      }
+      
+      // Build config data
+      const config = {
+        env: filterSensitiveEnv({
+          NODE_ENV: process.env.NODE_ENV || 'development',
+          PORT: process.env.PORT || '3000',
+          BASE_URL: process.env.BASE_URL || 'http://localhost:3000'
+        }),
+        i18n: {
+          defaultLocale: process.env.DEFAULT_LOCALE || 'en',
+          supportedLocales: (process.env.SUPPORTED_LOCALES || 'en').split(',')
+        },
+        server: {
+          port: process.env.PORT || '3000',
+          baseUrl: process.env.BASE_URL || 'http://localhost:3000'
+        }
+      };
+      
+      // Dashboard HTML endpoint
+      ctx.addRoute('get', dashboardPath, (req, res) => {
+        const data = { routes, plugins, config };
+        res.type('text/html');
+        res.send(generateDashboardHtml(data));
+      });
+      
+      // JSON API endpoints
+      ctx.addRoute('get', dashboardPath + '/api/routes', (req, res) => {
+        res.json(routes);
+      });
+      
+      ctx.addRoute('get', dashboardPath + '/api/plugins', (req, res) => {
+        res.json(plugins);
+      });
+      
+      ctx.addRoute('get', dashboardPath + '/api/config', (req, res) => {
+        res.json(config);
+      });
+      
+      // Log dashboard URL
+      console.log(`\n📊 Dashboard available at: http://localhost:${process.env.PORT || 3000}${dashboardPath}\n`);
+    }
+  };
+}
+
+module.exports = dashboardPlugin;
+
+
+