create-backlist 10.0.4 → 10.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-backlist",
-  "version": "10.0.4",
+  "version": "10.0.6",
   "description": "An advanced, multi-language backend generator based on frontend analysis. Smart Freemium SaaS CLI with Live QA.",
   "type": "module",
   "bin": {

package/src/qa/analyzers/accessibility.js

@@ -1,4 +1,6 @@
-// Real accessibility checker using axe-core via Playwright
+// Accessibility checker with HTTP fallback
+import { getBrowserLaunchOptions } from '../browser/installer.js';
+
 export class AccessibilityChecker {
   #playwright;
   #session;
@@ -9,73 +11,189 @@ export class AccessibilityChecker {
   }
 
   async check(url) {
-    const browser = await this.#playwright.chromium.launch({ headless: true });
+    const launchOpts = await getBrowserLaunchOptions();
+
+    if (!launchOpts.available) {
+      return this.#httpFallback(url);
+    }
+
+    let playwright;
+    try { playwright = await import('playwright'); }
+    catch { return this.#httpFallback(url); }
+
+    const { executablePath, headless, args } = launchOpts;
+    let browser;
+
+    try {
+      browser = await playwright.chromium.launch({ executablePath, headless, args });
+    } catch {
+      return this.#httpFallback(url);
+    }
+
     const context = await browser.newContext({ ignoreHTTPSErrors: true });
     const page    = await context.newPage();
 
     try {
       await page.goto(url, { waitUntil: 'networkidle', timeout: 20_000 });
 
-      // Inject axe-core from CDN for real WCAG testing
       await page.addScriptTag({
         url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.1/axe.min.js',
       });
 
-      // Run real axe analysis
       const axeResults = await page.evaluate(async () => {
         return await window.axe.run(document, {
-          runOnly: {
-            type: 'tag',
-            values: ['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice'],
-          },
+          runOnly: { type: 'tag', values: ['wcag2a','wcag2aa','wcag21aa','best-practice'] },
         });
       });
 
       const violations = axeResults.violations.map(v => ({
-        id          : v.id,
-        description : v.description,
-        help        : v.help,
-        helpUrl     : v.helpUrl,
-        impact      : v.impact,
-        tags        : v.tags,
-        category    : v.tags.find(t => t.startsWith('wcag')) || 'best-practice',
-        nodes       : v.nodes.length,
-        affectedNodes: v.nodes.slice(0, 3).map(n => ({
-          html   : n.html,
-          target : n.target,
-          message: n.failureSummary,
-        })),
+        id         : v.id,
+        description: v.description,
+        help       : v.help,
+        helpUrl    : v.helpUrl,
+        impact     : v.impact,
+        tags       : v.tags,
+        category   : v.tags.find(t => t.startsWith('wcag')) || 'best-practice',
+        nodes      : v.nodes.length,
+        affectedNodes: v.nodes.slice(0, 3).map(n => ({ html: n.html, target: n.target, message: n.failureSummary })),
       }));
 
       const passes = axeResults.passes.map(p => ({
-        id         : p.id,
-        description: p.description,
-        nodes      : p.nodes.length,
-      }));
-
-      const incomplete = axeResults.incomplete.map(i => ({
-        id         : i.id,
-        description: i.description,
-        nodes      : i.nodes.length,
+        id: p.id, description: p.description, nodes: p.nodes.length,
       }));
 
       return {
-        pass       : violations.length === 0,
-        violations,
-        passes,
-        incomplete,
-        score      : passes.length > 0
-          ? Math.round((passes.length / (passes.length + violations.length)) * 100)
-          : 0,
-        url,
+        pass      : violations.length === 0,
+        violations, passes,
+        incomplete: axeResults.incomplete.map(i => ({ id: i.id, description: i.description, nodes: i.nodes.length })),
+        score     : passes.length > 0 ? Math.round((passes.length / (passes.length + violations.length)) * 100) : 0,
+        url, mode : 'browser-axe',
       };
 
     } catch (err) {
-      return { pass: false, violations: [], passes: [], incomplete: [], error: err.message, url };
+      return { pass: false, violations: [], passes: [], incomplete: [], error: err.message, url, mode: 'browser-error' };
     } finally {
       await page.close().catch(() => {});
       await context.close().catch(() => {});
       await browser.close().catch(() => {});
     }
   }
+
+  // HTTP fallback — parses raw HTML for common a11y issues
+  async #httpFallback(url) {
+    try {
+      const controller = new AbortController();
+      const timer      = setTimeout(() => controller.abort(), 12_000);
+      const res        = await fetch(url, { signal: controller.signal, redirect: 'follow' });
+      clearTimeout(timer);
+
+      if (!res.ok) {
+        return { pass: false, violations: [], passes: [], url, mode: 'http-fallback', error: `HTTP ${res.status}` };
+      }
+
+      const html       = await res.text();
+      const violations = [];
+      const passes     = [];
+
+      // Real HTML analysis checks
+      const checks = [
+        {
+          id        : 'html-lang',
+          desc      : 'HTML element must have a lang attribute',
+          help      : 'Ensures every HTML document has a lang attribute',
+          impact    : 'serious',
+          test      : () => !/<html[^>]+lang=["'][^"']+["']/i.test(html),
+          passMsg   : 'HTML lang attribute present',
+        },
+        {
+          id        : 'img-alt',
+          desc      : 'Images must have alternate text',
+          help      : 'Ensures <img> elements have alternate text or a role of none/presentation',
+          impact    : 'critical',
+          test      : () => /<img(?![^>]*\balt=)[^>]*>/i.test(html),
+          passMsg   : 'All images have alt attributes',
+        },
+        {
+          id        : 'document-title',
+          desc      : 'Documents must have <title>',
+          help      : 'Ensures every HTML document has a non-empty title element',
+          impact    : 'serious',
+          test      : () => !/<title[^>]*>[^<]+<\/title>/i.test(html),
+          passMsg   : 'Document has a title',
+        },
+        {
+          id        : 'viewport',
+          desc      : 'Zoom and scaling must not be disabled',
+          help      : 'Ensures the viewport meta does not disable text scaling',
+          impact    : 'critical',
+          test      : () => /user-scalable=no|maximum-scale=1/i.test(html),
+          passMsg   : 'Viewport allows scaling',
+        },
+        {
+          id        : 'region',
+          desc      : 'Page should have a main landmark',
+          help      : 'Ensures the page has a <main> element',
+          impact    : 'moderate',
+          test      : () => !/<main[^>]*>/i.test(html),
+          passMsg   : 'Main landmark found',
+        },
+        {
+          id        : 'heading-order',
+          desc      : 'Heading levels should not be skipped',
+          help      : 'Ensures the order of headings is semantically correct',
+          impact    : 'moderate',
+          test      : () => !/<h1[^>]*>/i.test(html),
+          passMsg   : 'H1 heading present',
+        },
+        {
+          id        : 'label',
+          desc      : 'Form elements must have labels',
+          help      : 'Ensures every form element has a label',
+          impact    : 'critical',
+          test      : () => /<input(?![^>]*(?:aria-label|aria-labelledby|id=))[^>]*type=(?!"hidden")[^>]*>/i.test(html),
+          passMsg   : 'Form inputs appear to have labels',
+        },
+        {
+          id        : 'link-name',
+          desc      : 'Links must have discernible text',
+          help      : 'Ensures links have discernible text',
+          impact    : 'serious',
+          test      : () => /<a[^>]*>\s*<\/a>/i.test(html),
+          passMsg   : 'Links appear to have text content',
+        },
+      ];
+
+      for (const check of checks) {
+        if (check.test()) {
+          violations.push({
+            id         : check.id,
+            description: check.desc,
+            help       : check.help,
+            impact     : check.impact,
+            tags       : ['wcag2a'],
+            category   : 'wcag2a',
+            nodes      : 1,
+            affectedNodes: [],
+            helpUrl    : `https://dequeuniversity.com/rules/axe/4.9/${check.id}`,
+          });
+        } else {
+          passes.push({ id: check.id, description: check.passMsg, nodes: 1 });
+        }
+      }
+
+      const score = passes.length > 0
+        ? Math.round((passes.length / (passes.length + violations.length)) * 100)
+        : 0;
+
+      return {
+        pass: violations.length === 0,
+        violations, passes, incomplete: [],
+        score, url, mode: 'http-html-analysis',
+        note: 'Full axe-core WCAG scan requires Playwright browser — run: npx playwright install chromium',
+      };
+
+    } catch (err) {
+      return { pass: false, violations: [], passes: [], url, mode: 'http-fallback', error: err.message };
+    }
+  }
 }

package/src/qa/analyzers/performance.js

@@ -1,125 +1,82 @@
-// Real performance profiler — Playwright + Performance API
+// Performance profiler with HTTP fallback
+import { getBrowserLaunchOptions } from '../browser/installer.js';
+import { formatBytes }             from '../qa-engine.js';
+
 export class PerformanceProfiler {
   #session;
 
   constructor(session) { this.#session = session; }
 
   async profile(url) {
+    const launchOpts = await getBrowserLaunchOptions();
+
+    if (!launchOpts.available) {
+      return this.#httpFallback(url);
+    }
+
     let playwright;
     try { playwright = await import('playwright'); }
-    catch { return this.#empty(); }
+    catch { return this.#httpFallback(url); }
 
-    const browser = await playwright.chromium.launch({
-      headless: true,
-      args    : ['--no-sandbox'],
-    });
+    const { executablePath, headless, args } = launchOpts;
+    let browser;
 
-    const context = await browser.newContext({
-      ignoreHTTPSErrors: true,
-    });
-    const page    = await context.newPage();
+    try {
+      browser = await playwright.chromium.launch({ executablePath, headless, args });
+    } catch {
+      return this.#httpFallback(url);
+    }
 
+    const context       = await browser.newContext({ ignoreHTTPSErrors: true });
+    const page          = await context.newPage();
     const slowResources = [];
     const resourceTimings = [];
 
     page.on('response', async res => {
-      const timing = res.timing();
-      if (timing && timing.responseEnd > 0) {
-        const duration = timing.responseEnd - timing.requestStart;
-        const entry = {
-          url     : res.url(),
-          type    : res.request().resourceType(),
-          status  : res.status(),
-          duration: Math.round(duration),
-          size    : 0,
-        };
-        try {
-          const body  = await res.body().catch(() => null);
-          entry.size  = body?.length || 0;
-        } catch {}
+      try {
+        const timing   = res.timing();
+        if (!timing || timing.responseEnd <= 0) return;
+        const duration = Math.round(timing.responseEnd - timing.requestStart);
+        const entry    = { url: res.url(), type: res.request().resourceType(), status: res.status(), duration, size: 0 };
+        try { const body = await res.body(); entry.size = body?.length || 0; } catch {}
         resourceTimings.push(entry);
         if (duration > 2000) slowResources.push(entry);
-      }
+      } catch {}
     });
 
     try {
       await page.goto(url, { waitUntil: 'networkidle', timeout: 30_000 });
 
-      // Real Web Vitals via Performance API
-      const metrics = await page.evaluate(() => {
-        return new Promise(resolve => {
-          const result = {
-            lcp : null, fcp : null, cls : null,
-            fid : null, ttfb: null, tti : null, tbt: null,
-            memoryUsed: null, domNodes: document.querySelectorAll('*').length,
-          };
-
-          // FCP + LCP
-          const po = new PerformanceObserver(list => {
-            for (const entry of list.getEntries()) {
-              if (entry.entryType === 'paint') {
-                if (entry.name === 'first-contentful-paint') result.fcp = Math.round(entry.startTime);
-              }
-              if (entry.entryType === 'largest-contentful-paint') {
-                result.lcp = Math.round(entry.startTime);
-              }
-            }
-          });
-          try { po.observe({ entryTypes: ['paint','largest-contentful-paint'] }); } catch {}
-
-          // CLS
-          let clsValue = 0;
-          const clsPo  = new PerformanceObserver(list => {
-            for (const entry of list.getEntries()) {
-              if (!entry.hadRecentInput) clsValue += entry.value;
+      const metrics = await page.evaluate(() => new Promise(resolve => {
+        const result = { lcp: null, fcp: null, cls: null, fid: null, ttfb: null, tbt: null, memoryUsed: null, domNodes: document.querySelectorAll('*').length };
+
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (e.entryType === 'paint' && e.name === 'first-contentful-paint') result.fcp = Math.round(e.startTime);
+              if (e.entryType === 'largest-contentful-paint') result.lcp = Math.round(e.startTime);
             }
-          });
-          try { clsPo.observe({ entryTypes: ['layout-shift'] }); } catch {}
-
-          // TTFB
-          const nav = performance.getEntriesByType('navigation')[0];
-          if (nav) result.ttfb = Math.round(nav.responseStart);
-
-          // Memory
-          if (performance.memory) {
-            result.memoryUsed = performance.memory.usedJSHeapSize;
-          }
-
-          setTimeout(() => {
-            result.cls = parseFloat(clsValue.toFixed(4));
-            po.disconnect();
-            clsPo.disconnect();
-            resolve(result);
-          }, 5000);
-        });
-      });
-
-      // CPU timing via long task detection
-      const longTasks = await page.evaluate(() => {
-        const tasks = [];
-        const po    = new PerformanceObserver(list => {
-          tasks.push(...list.getEntries().map(e => ({
-            duration : Math.round(e.duration),
-            startTime: Math.round(e.startTime),
-          })));
-        });
-        try { po.observe({ entryTypes: ['longtask'] }); } catch {}
-        return new Promise(r => setTimeout(() => { po.disconnect(); r(tasks); }, 3000));
-      }).catch(() => []);
-
-      const tbt = longTasks.reduce((sum, t) => sum + Math.max(t.duration - 50, 0), 0);
+          }).observe({ entryTypes: ['paint','largest-contentful-paint'] });
+        } catch {}
 
-      return {
-        ...metrics,
-        tbt          : Math.round(tbt),
-        slowResources,
-        resourceTimings: resourceTimings.slice(0, 50),
-        longTasks,
-        url,
-      };
+        let cls = 0;
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) if (!e.hadRecentInput) cls += e.value;
+          }).observe({ entryTypes: ['layout-shift'] });
+        } catch {}
+
+        const nav = performance.getEntriesByType('navigation')[0];
+        if (nav) result.ttfb = Math.round(nav.responseStart);
+        if (performance.memory) result.memoryUsed = performance.memory.usedJSHeapSize;
+
+        setTimeout(() => { result.cls = parseFloat(cls.toFixed(4)); resolve(result); }, 5000);
+      }));
+
+      return { ...metrics, slowResources, resourceTimings: resourceTimings.slice(0, 50), url, mode: 'browser' };
 
     } catch (err) {
-      return { ...this.#empty(), error: err.message, url };
+      return { ...this.#emptyMetrics(), error: err.message, url, mode: 'browser-error' };
     } finally {
       await page.close().catch(() => {});
       await context.close().catch(() => {});
@@ -127,11 +84,41 @@ export class PerformanceProfiler {
     }
   }
 
-  #empty() {
-    return {
-      lcp: null, fcp: null, cls: null, fid: null,
-      ttfb: null, tti: null, tbt: null,
-      slowResources: [], resourceTimings: [], longTasks: [],
-    };
+  // HTTP-only fallback: measures real TTFB + response time
+  async #httpFallback(url) {
+    const t0 = Date.now();
+    try {
+      const controller = new AbortController();
+      const timer      = setTimeout(() => controller.abort(), 15_000);
+      const res        = await fetch(url, { signal: controller.signal, redirect: 'follow' });
+      clearTimeout(timer);
+      const ttfb       = Date.now() - t0;
+      const body       = await res.text().catch(() => '');
+      const totalTime  = Date.now() - t0;
+      const bodySize   = new TextEncoder().encode(body).length;
+
+      return {
+        lcp          : null,  // requires browser
+        fcp          : null,
+        cls          : null,
+        fid          : null,
+        tbt          : null,
+        ttfb,                 // real TTFB from HTTP
+        totalTime,            // real total response time
+        bodySize,
+        statusCode   : res.status,
+        slowResources: totalTime > 3000 ? [{ url, duration: totalTime, size: bodySize, type: 'document' }] : [],
+        resourceTimings: [],
+        url,
+        mode         : 'http-fallback',
+        note         : 'LCP/FCP/CLS require Playwright browser — run: npx playwright install chromium',
+      };
+    } catch (err) {
+      return { ...this.#emptyMetrics(), ttfb: null, error: err.message, url, mode: 'http-fallback' };
+    }
+  }
+
+  #emptyMetrics() {
+    return { lcp: null, fcp: null, cls: null, fid: null, ttfb: null, tbt: null, slowResources: [], resourceTimings: [] };
   }
 }