@pixelated-tech/components 3.8.0 → 3.9.0

package/README.md

@@ -242,6 +242,13 @@ External service integrations:
 - **Yelp** - Business reviews and ratings
 
 
+### Utilities
+Shared technical utilities and helpers:
+- **CacheManager** - Unified caching layer with Memory, Session, and LocalStorage support with TTL and SSR fallbacks.
+- **Cloudinary** - Image processing and URL generation helpers.
+- **Date/Time** - Formatting and manipulation utilities.
+
+
 ### Site Health & Monitoring
 Comprehensive site health monitoring and analytics:
 - **SiteHealthOverview** - Dashboard overview of site health metrics

package/dist/components/admin/site-health/site-health-axe-core.integration.js

@@ -1,9 +1,12 @@
 "use server";
 import puppeteer from 'puppeteer';
+import fs from 'fs';
+import path from 'path';
+const debug = false;
 export async function performAxeCoreAnalysis(url) {
     try {
         // Run axe-core analysis
-        const axeResult = await runAxeCoreAnalysis(url);
+        const { result: axeResult, injectionSource } = await runAxeCoreAnalysis(url);
         // Calculate summary
         const summary = {
             violations: axeResult.violations.length,
@@ -22,6 +25,7 @@ export async function performAxeCoreAnalysis(url) {
             summary,
             timestamp: new Date().toISOString(),
             status: 'success',
+            injectionSource: injectionSource,
         };
     }
     catch (error) {
@@ -80,6 +84,38 @@ async function runAxeCoreAnalysis(url) {
         const page = await browser.newPage();
         // Set viewport for consistent results
         await page.setViewport({ width: 1280, height: 720 });
+        // Capture console messages from the page for debugging
+        if (debug) {
+            page.on('console', msg => {
+                try {
+                    console.info('PAGE CONSOLE:', msg.text());
+                }
+                catch (e) {
+                    console.warn('PAGE CONSOLE (error reading):', e);
+                }
+            });
+            // Capture failed requests (esp. script loads) and successful script responses
+            page.on('requestfailed', req => {
+                try {
+                    if (req.resourceType && req.resourceType() === 'script') {
+                        console.warn('PAGE REQUEST FAILED:', req.url(), req.failure()?.errorText);
+                    }
+                }
+                catch (e) {
+                    // ignore
+                }
+            });
+            page.on('response', resp => {
+                try {
+                    if (resp.request && resp.request().resourceType() === 'script') {
+                        console.info('PAGE SCRIPT RESPONSE:', resp.url(), resp.status());
+                    }
+                }
+                catch (e) {
+                    // ignore
+                }
+            });
+        }
         // Set user agent to avoid bot detection
         await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
         // Navigate to the page with timeout
@@ -89,27 +125,106 @@ async function runAxeCoreAnalysis(url) {
         });
         // Wait a bit for dynamic content to load
         await new Promise(resolve => setTimeout(resolve, 2000));
-        // Inject axe-core by adding the script tag
-        await page.addScriptTag({
-            url: 'https://cdn.jsdelivr.net/npm/axe-core@4.8.2/axe.min.js'
-        });
-        // Wait a bit for axe to load
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        // Run axe-core analysis
-        const result = await page.evaluate(async () => {
-            // Check if axe is available
-            if (typeof window.axe === 'undefined') {
-                throw new Error('axe-core not loaded');
+        // Try to inject axe-core via CDN first; if that fails (network restrictions), fall back to several local strategies
+        let injectionSource = 'none';
+        try {
+            await page.addScriptTag({ url: 'https://cdn.jsdelivr.net/npm/axe-core/axe.min.js' });
+            // Wait a bit for axe to load
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            injectionSource = 'cdn';
+        }
+        catch (err) {
+            let injected = false;
+            // Try common local node_modules locations relative to process.cwd() and __dirname
+            const possiblePaths = [
+                path.join(process.cwd(), 'node_modules', 'axe-core', 'axe.min.js'),
+                path.join(process.cwd(), '..', 'node_modules', 'axe-core', 'axe.min.js'),
+                path.join(__dirname, '..', '..', 'node_modules', 'axe-core', 'axe.min.js')
+            ];
+            for (const p of possiblePaths) {
+                try {
+                    if (fs.existsSync(p)) {
+                        const fileSrc = fs.readFileSync(p, 'utf8');
+                        await page.addScriptTag({ content: fileSrc });
+                        injected = true;
+                        injectionSource = 'local-inline';
+                        break;
+                    }
+                }
+                catch (e) {
+                    // ignore local file read errors
+                }
+            }
+            // Last resort: require.resolve
+            if (!injected) {
+                try {
+                    const axePath = require.resolve('axe-core/axe.min.js');
+                    const axeSrc = fs.readFileSync(axePath, 'utf8');
+                    await page.addScriptTag({ content: axeSrc });
+                    injected = true;
+                    injectionSource = 'require-resolve';
+                }
+                catch (e) {
+                    // ignore
+                }
+            }
+            if (!injected) {
+                throw new Error('Could not load axe-core via CDN or local inline injection');
             }
-            // Run axe with all rules enabled
-            const axeResults = await window.axe.run(document, {
-                rules: {}, // Run all rules
-                runOnly: undefined, // Don't restrict to specific rule sets
-                reporter: 'v2'
+        }
+        // Run axe-core analysis (poll across frames for availability after injection)
+        // Wait up to 10s total for window.axe to appear (check every 200ms across frames)
+        const timeoutMs = 10000;
+        const intervalMs = 200;
+        const start = Date.now();
+        let axeResults = null;
+        let frameWithAxe = null;
+        while (!frameWithAxe && Date.now() - start < timeoutMs) {
+            const frames = page.frames();
+            for (const f of frames) {
+                try {
+                    const hasAxe = await f.evaluate(() => typeof window.axe !== 'undefined').catch(() => false);
+                    if (hasAxe) {
+                        frameWithAxe = f;
+                        break;
+                    }
+                }
+                catch (e) {
+                    // ignore frame evaluation errors
+                }
+            }
+            if (!frameWithAxe)
+                await new Promise(resolve => setTimeout(resolve, intervalMs));
+        }
+        if (!frameWithAxe) {
+            // Collect some debug info to help identify why axe didn't attach
+            try {
+                const scripts = await page.evaluate(() => Array.from(document.querySelectorAll('script')).map(s => (s.src || (s.innerText || '').slice(0, 200))));
+                const csp = await page.evaluate(() => document.querySelector('meta[http-equiv="Content-Security-Policy"]')?.getAttribute('content') || null);
+                const pageDiag = await page.evaluate(() => ({ hasAxe: typeof window.axe !== 'undefined', axeKeys: Object.keys(window).filter(k => /axe/i.test(k)), windowHasAxeRun: typeof window.axe?.run === 'function' }));
+            }
+            catch (e) {
+                // ignore diagnostic errors
+            }
+            // Diagnostic: no axe found in any frame
+            throw new Error('axe-core not loaded');
+        }
+        // Run axe in the frame that has it
+        try {
+            axeResults = await frameWithAxe.evaluate(async () => {
+                return await window.axe.run(document, {
+                    rules: {},
+                    runOnly: undefined,
+                    reporter: 'v2'
+                });
             });
-            return axeResults;
-        });
-        return result;
+        }
+        catch (e) {
+            if (debug)
+                console.error('Axe run failed:', e);
+            throw e;
+        }
+        return { result: axeResults, injectionSource };
     }
     finally {
         if (browser) {

package/dist/components/admin/site-health/site-health-axe-core.integration.test.js

@@ -0,0 +1,79 @@
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+// We'll mock puppeteer and fs before importing the module under test to avoid ESM spy limitations
+describe('performAxeCoreAnalysis (CDN blocked -> local-inline fallback)', () => {
+    beforeEach(async () => {
+        vi.resetModules();
+        // Mock puppeteer browser and page
+        const page = {
+            setViewport: vi.fn().mockResolvedValue(undefined),
+            on: vi.fn().mockReturnValue(undefined),
+            setUserAgent: vi.fn().mockResolvedValue(undefined),
+            goto: vi.fn().mockResolvedValue(undefined),
+            addScriptTag: vi.fn().mockImplementation(async (opts) => {
+                if (opts && opts.url && opts.url.includes('cdn.jsdelivr')) {
+                    // Simulate CDN blocked
+                    throw new Error('CDN blocked');
+                }
+                // Otherwise pretend inline injection succeeded
+                return Promise.resolve(undefined);
+            }),
+            frames: vi.fn().mockReturnValue([{
+                    evaluate: vi.fn().mockImplementation(async (fn) => {
+                        const fnStr = fn.toString();
+                        if (fnStr.includes('typeof (window as any).axe') || fnStr.includes('typeof window.axe')) {
+                            return true; // axe is present after inline injection
+                        }
+                        if (fnStr.includes('axe.run') || fnStr.includes('window.axe.run')) {
+                            // return a minimal axe result shape
+                            return {
+                                violations: [],
+                                passes: [],
+                                incomplete: [],
+                                inapplicable: [],
+                                testEngine: { name: 'axe-core', version: 'test' },
+                                testRunner: { name: 'mock' },
+                                testEnvironment: { userAgent: 'mock', windowWidth: 1280, windowHeight: 720 },
+                                timestamp: new Date().toISOString(),
+                                url: 'http://example'
+                            };
+                        }
+                        return null;
+                    })
+                }])
+        };
+        const browser = {
+            newPage: vi.fn().mockResolvedValue(page),
+            close: vi.fn().mockResolvedValue(undefined)
+        };
+        // Mock puppeteer before importing the module to avoid ESM spy issues
+        vi.doMock('puppeteer', async (importOriginal) => {
+            // Provide a minimal mock that exposes launch as both default and named
+            return {
+                default: { launch: () => Promise.resolve(browser) },
+                launch: () => Promise.resolve(browser)
+            };
+        });
+        // Mock fs before importing the module (provide both default and named exports for interop)
+        vi.doMock('fs', () => ({
+            existsSync: () => true,
+            readFileSync: () => '/* fake axe content */',
+            default: {
+                existsSync: () => true,
+                readFileSync: () => '/* fake axe content */'
+            }
+        }));
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+        vi.resetModules();
+    });
+    it('falls back to local inline injection when CDN is blocked and reports injectionSource "local-inline"', async () => {
+        const { performAxeCoreAnalysis } = await import('./site-health-axe-core.integration');
+        const url = 'http://example.local';
+        const res = await performAxeCoreAnalysis(url);
+        expect(res).toBeDefined();
+        expect(res.status).toBe('success');
+        expect(res.injectionSource).toBe('local-inline');
+    });
+});

package/dist/components/admin/site-health/site-health-axe-core.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { getImpactIndicator, getIncompleteIndicator, getPassingIndicator } from './site-health-indicators';
@@ -10,6 +11,40 @@ export function SiteHealthAxeCore({ siteName }) {
     const getImpactColor = (impact) => {
         return getImpactIndicator(impact).color;
     };
+    // Ensure axe-core is available on the admin page so self-analysis and debugging are possible
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (window.axe)
+            return; // already loaded
+        const cdnSrc = 'https://cdn.jsdelivr.net/npm/axe-core/axe.min.js';
+        const apiFallback = '/api/axe-core';
+        function injectScript(src) {
+            const script = document.createElement('script');
+            script.src = src;
+            script.async = false; // preserve execution order
+            script.onload = () => console.info('axe-core loaded from', src);
+            script.onerror = async () => {
+                console.warn('Failed to load axe-core from', src);
+                if (src !== apiFallback) {
+                    // Try fallback to local API that serves the bundle
+                    injectScript(apiFallback);
+                }
+            };
+            document.head.appendChild(script);
+        }
+        // Try CDN first, then API fallback
+        try {
+            injectScript(cdnSrc);
+        }
+        catch (e) {
+            console.warn('Could not inject axe-core script:', e);
+            injectScript(apiFallback);
+        }
+        return () => {
+            // no cleanup: scripts persist on the page
+        };
+    }, []);
     const getImpactIcon = (impact) => {
         return getImpactIndicator(impact).icon;
     };

package/dist/components/admin/site-health/site-health-core-web-vitals.integration.js

@@ -1,4 +1,5 @@
 "use server";
+import { getFullPixelatedConfig } from '../../config/config';
 const psiCache = new Map();
 const CACHE_TTL_SUCCESS = 60 * 60 * 1000; // 1 hour for successful results
 const CACHE_TTL_ERROR = 5 * 60 * 1000; // 5 minutes for error results
@@ -83,10 +84,11 @@ export async function performCoreWebVitalsAnalysis(url, siteName, useCache = tru
         return errorResult;
     }
 }
-async function fetchPSIData(url) {
-    const apiKey = process.env.GOOGLE_API_KEY;
+export async function fetchPSIData(url) {
+    // Require the API key from the unified pixelated.config.json. No environment fallback.
+    const apiKey = getFullPixelatedConfig()?.google?.api_key;
     if (!apiKey) {
-        throw new Error('GOOGLE_API_KEY environment variable is not set');
+        throw new Error('Google API key is not set; set google.api_key in pixelated.config.json');
     }
     const psiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&key=${apiKey}&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo`;
     const fetchWithRetry = async (url, maxRetries = 2) => {

package/dist/components/admin/site-health/site-health-core-web-vitals.integration.test.js

@@ -0,0 +1,33 @@
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import * as configModule from '../../config/config';
+import { fetchPSIData } from './site-health-core-web-vitals.integration';
+import { mockConfig } from '../../../test/config.mock';
+// Use the test harness mock config derived from src/config/pixelated.config.json
+describe('fetchPSIData', () => {
+    let originalFetch;
+    let getFullConfigSpy;
+    beforeEach(() => {
+        originalFetch = globalThis.fetch;
+        globalThis.fetch = vi.fn().mockResolvedValue({ ok: true, json: async () => ({ lighthouseResult: { audits: { someAudit: {} }, categories: {} } }) });
+        // Ensure server-side code sees the standard test harness config by default
+        getFullConfigSpy = vi.spyOn(configModule, 'getFullPixelatedConfig').mockReturnValue(mockConfig);
+    });
+    afterEach(() => {
+        globalThis.fetch = originalFetch;
+        getFullConfigSpy?.mockRestore();
+        vi.restoreAllMocks();
+    });
+    it('uses API key from pixelated.config.json', async () => {
+        const apiKey = mockConfig?.google?.api_key;
+        expect(apiKey).toBeDefined();
+        const url = 'https://example.com';
+        await fetchPSIData(url);
+        expect(globalThis.fetch).toHaveBeenCalled();
+        const calledUrl = globalThis.fetch.mock.calls[0][0];
+        expect(calledUrl).toContain(`key=${apiKey}`);
+    });
+    it('throws when api key is missing from config', async () => {
+        getFullConfigSpy.mockReturnValue({});
+        await expect(fetchPSIData('https://example.com')).rejects.toThrow('Google API key is not set');
+    });
+});

package/dist/components/admin/site-health/site-health-template.js

@@ -76,7 +76,9 @@ export function SiteHealthTemplate(props) {
             // Check for cache control from URL query parameters
             const urlParams = new URLSearchParams(window.location.search);
             const cacheParam = urlParams.get('cache');
-            const useCache = typedProps.enableCacheControl ?? true ? (cacheParam !== 'false') : true;
+            // Correctly compute useCache: if enableCacheControl is enabled (default true), honor cacheParam; if disabled, caching is off
+            const enableCacheControl = (typeof typedProps.enableCacheControl === 'boolean') ? typedProps.enableCacheControl : true;
+            const useCache = enableCacheControl ? (String(cacheParam).toLowerCase() !== 'false') : false;
             const result = await fetchFromEndpoint(useCache);
             setData(result);
             setError(null);

package/dist/components/admin/site-health/site-health-utils.js

@@ -25,6 +25,28 @@ export function formatScore(score) {
  * Formats audit item details for display
  */
 export function formatAuditItem(item, auditTitle) {
+    // Handle raw timing data that might be passed directly
+    if (typeof item === 'number') {
+        let context = '';
+        if (auditTitle) {
+            if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                context = ' server response';
+            }
+            else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                context = ' network request';
+            }
+            else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                context = ' render blocking';
+            }
+            else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                context = ' JavaScript';
+            }
+            else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                context = ' media resource';
+            }
+        }
+        return `${item.toFixed(2)}ms${context}`;
+    }
     // Handle URLs
     if (item.url && typeof item.url === 'string') {
         return item.url;

package/dist/components/config/config.example.js

@@ -21,8 +21,10 @@ const pixelatedConfig = {
     ebay: {
         proxyURL: 'https://proxy.provier.com/proxy?url=',
         appId: 'your-ebay-client-id',
+        appDevId: 'your-ebay-client-dev-id',
         appCertId: 'your-ebay-client-secret',
         sbxAppId: 'your-ebay-sandbox-client-id',
+        sbxAppDevId: 'your-ebay-sandbox-client-dev-id',
         sbxAppCertId: 'your-ebay-sandbox-client-secret',
         globalId: 'EBAY_US',
         environment: 'production',

package/dist/components/config/config.types.js

@@ -19,9 +19,7 @@ export const SECRET_CONFIG_KEYS = {
             'preview_access_token'
         ],
         ebay: [
-            'appCertId',
-            'sbxAppId',
-            'sbxAppCertId'
+            'sbxAppId'
         ],
         paypal: [
             'sandboxPayPalApiKey',

package/dist/components/config/config.utils.js

@@ -11,25 +11,33 @@ export function getClientOnlyPixelatedConfig(src) {
         // 2. Check Service-Specific Secret List
         if (serviceName && SECRET_CONFIG_KEYS.services[serviceName]) {
             const serviceSecrets = SECRET_CONFIG_KEYS.services[serviceName];
-            if (serviceSecrets.includes(key))
+            if (serviceSecrets.includes(key)) {
+                // console.log(`Config Stripper: Removing secret key "${key}" from service "${serviceName}"`);
                 return true;
+            }
         }
         return false;
     }
     function strip(obj, serviceName) {
-        if (!obj || typeof obj !== 'object' || obj === null)
+        // Base case for non-objects
+        if (obj === null || typeof obj !== 'object')
             return obj;
+        // Avoid circular references
         if (visited.has(obj))
             return '[Circular]';
         visited.add(obj);
-        if (Array.isArray(obj))
+        // Handle Arrays
+        if (Array.isArray(obj)) {
             return obj.map((item) => strip(item, serviceName));
+        }
         const out = {};
         for (const k of Object.keys(obj)) {
-            // If we are at the top level, the key 'k' IS the service name (ebay, cloudinary, etc.)
+            // At the top level (serviceName is undefined), k is the service name
             const currentService = serviceName || k;
-            if (isSecretKey(k, serviceName))
+            // Check if this key should be stripped
+            if (isSecretKey(k, serviceName)) {
                 continue;
+            }
             out[k] = strip(obj[k], currentService);
         }
         return out;

package/dist/components/config/config.validators.js

@@ -0,0 +1,67 @@
+/**
+ * Assert that an object is a valid SiteInfo with required fields.
+ * Throws with a clear message if validation fails.
+ */
+export function assertSiteInfo(v) {
+    const missing = [];
+    if (!v || typeof v !== 'object') {
+        throw new Error('Invalid routes.json: siteInfo is missing or not an object');
+    }
+    ['name', 'url', 'description'].forEach(k => {
+        if (!v[k] || typeof v[k] !== 'string' || String(v[k]).trim() === '')
+            missing.push(k);
+    });
+    if (missing.length) {
+        throw new Error(`Invalid routes.json: siteInfo missing required fields: ${missing.join(', ')}`);
+    }
+}
+/**
+ * Basic validation for a routes object/array. Ensures the structure looks like
+ * a routes data blob and contains at least one named route.
+ */
+export function assertRoutes(routes) {
+    if (!routes || (typeof routes !== 'object' && !Array.isArray(routes))) {
+        throw new Error('Invalid routes.json: routes is missing or not an object/array');
+    }
+    const found = (function findAnyNamed(obj) {
+        if (!obj || typeof obj !== 'object')
+            return false;
+        if (Array.isArray(obj))
+            return obj.some(item => findAnyNamed(item));
+        if (obj.name && typeof obj.name === 'string')
+            return true;
+        for (const k of Object.keys(obj)) {
+            if (findAnyNamed(obj[k]))
+                return true;
+        }
+        return false;
+    })(routes);
+    if (!found) {
+        throw new Error('Invalid routes.json: expected at least one route entry with a `name` property');
+    }
+}
+/**
+ * Basic validation for visualdesign tokens. Ensures it's an object and contains
+ * at least the common tokens we care about (e.g., colors or fonts may be optional)
+ */
+export function assertVisualDesign(v) {
+    if (v === undefined || v === null) {
+        throw new Error('Invalid routes.json: visualdesign is missing');
+    }
+    if (typeof v !== 'object' || Array.isArray(v)) {
+        throw new Error('Invalid routes.json: visualdesign must be an object');
+    }
+    const keys = Object.keys(v || {});
+    if (keys.length === 0) {
+        throw new Error('Invalid routes.json: visualdesign must contain at least one token');
+    }
+    for (const k of keys) {
+        const val = v[k];
+        // Accept simple string tokens or objects with a string `value` property
+        if (typeof val === 'string')
+            continue;
+        if (val && typeof val === 'object' && typeof val.value === 'string')
+            continue;
+        throw new Error(`Invalid routes.json: visualdesign token '${k}' has an invalid value`);
+    }
+}