@commercelayer/agent-cli 0.8.0 → 1.0.0-dev.0

package/dist/check.js

@@ -1,187 +0,0 @@
-// c11r storefront check: read the published storefront at preview_url, as a browser
-// would fetch it, and report what would break it or what is still the scaffold's.
-// This is the static phase: HTML and CSS as served, images by request. Every check
-// has a kind; a rendering phase (contrast, overflow, minicart fit, screenshots)
-// adds checks of kind "render" and fills `render`, without changing the shape.
-import fs from 'node:fs';
-import path from 'node:path';
-import { send } from './api/transport.js';
-import { fail } from './output.js';
-import { storefrontPath } from './store.js';
-const decode = (t) => t.replace(/&(#x[0-9a-f]+|#\d+|amp|lt|gt|quot|apos);/gi, (m, e) => {
-    const named = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'" };
-    if (e[0] !== '#')
-        return named[e.toLowerCase()] ?? m;
-    return String.fromCodePoint(e[1] === 'x' || e[1] === 'X' ? parseInt(e.slice(2), 16) : Number(e.slice(1)));
-});
-/** Every start tag with its attributes, comments and script bodies left out. */
-function tags(html) {
-    const text = html.replace(/<!--[\s\S]*?-->/g, '').replace(/(<script\b[^>]*>)[\s\S]*?(<\/script>)/gi, '$1$2');
-    return [...text.matchAll(/<([a-zA-Z][\w-]*)((?:\s+[^\s=/>]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*\/?>/g)].map(([, name, raw]) => {
-        const attrs = {};
-        for (const [, k, d, s, u] of raw.matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g))
-            attrs[k.toLowerCase()] = decode(d ?? s ?? u ?? '');
-        return { name: name.toLowerCase(), attrs };
-    });
-}
-const scripts = (html) => [...html.replace(/<!--[\s\S]*?-->/g, '').matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)].map(([, attrs, body]) => ({ attrs, body }));
-/** GET a URL: through the CLI's transport on the store host (so the stub works), plain fetch elsewhere. */
-async function get(url, origin, method = 'GET') {
-    if (new URL(url).origin === origin) {
-        const r = await send('GET', url);
-        return { status: r.status, type: r.headers['content-type'] ?? '', body: r.body };
-    }
-    try {
-        let r = await fetch(url, { method, redirect: 'follow' });
-        if (method === 'HEAD' && (r.status === 405 || r.status === 403))
-            r = await fetch(url, { redirect: 'follow' });
-        return { status: r.status, type: r.headers.get('content-type') ?? '', body: method === 'HEAD' ? '' : await r.text() };
-    }
-    catch (e) {
-        return { status: 0, type: '', body: String(e.cause?.message ?? e.message) };
-    }
-}
-/** In batches, so a large catalog does not open hundreds of connections at once. */
-async function mapLimit(items, limit, fn) {
-    const out = [];
-    for (let i = 0; i < items.length; i += limit)
-        out.push(...(await Promise.all(items.slice(i, i + limit).map(fn))));
-    return out;
-}
-const check = (id, status, message, extra = {}) => ({ id, kind: 'static', status, message, ...extra });
-export async function storefrontCheck(api) {
-    const state = await api.getStore();
-    if (!state.storefront)
-        fail('no_storefront', 'Nothing is published at the store host yet.', 'Run `c11r storefront init` if there is no storefront folder, then `c11r storefront publish`.');
-    const origin = new URL(state.preview_url).origin;
-    const pageUrl = `${origin}/`;
-    const page = await get(pageUrl, origin);
-    if (page.status !== 200 || !page.type.includes('text/html'))
-        fail('storefront_unreachable', `${pageUrl} answered ${page.status} ${page.type}.`, 'Run `c11r storefront publish` again; if it keeps happening, tell the human, with this output.');
-    const html = page.body;
-    const all = tags(html);
-    const find = (name) => all.filter((t) => t.name === name);
-    const checks = [];
-    // drop-in.js: the script, its stylesheets, and the config block wired to this store's sales channel.
-    const dropInJs = find('script').some((t) => /@commercelayer\/drop-in\.js@[^/]+\/dist\/drop-in\/drop-in\.esm\.js/.test(t.attrs.src ?? '') && t.attrs.type === 'module');
-    checks.push(dropInJs ? check('drop_in_script', 'pass', 'drop-in.js is loaded as a module.') : check('drop_in_script', 'fail', 'drop-in.js is not loaded: prices, cart and checkout will not work.', { fix: 'Keep <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.esm.js"> in the <head>, as storefront init writes it.' }));
-    const config = scripts(html).find((s) => s.body.includes('commercelayerConfig'))?.body ?? '';
-    const clientId = config.match(/clientId\s*:\s*['"]([^'"]+)['"]/)?.[1];
-    if (!config)
-        checks.push(check('config', 'fail', 'There is no window.commercelayerConfig block.', { fix: 'Restore the config <script> from storefront init (clientId, scope, defaultAttributes) before the drop-in.js script.' }));
-    else if (clientId !== state.sales_channel_client_id)
-        checks.push(check('config', 'fail', `The config block's clientId is ${clientId ? `"${clientId}"` : 'missing'}, not this store's sales channel.`, { fix: `Set clientId: '${state.sales_channel_client_id}' in the config block.` }));
-    else if (!/market:code:/.test(config))
-        checks.push(check('config', 'fail', 'The config block has no market scope.', { fix: "Keep scope: 'market:code:' + market in the config block." }));
-    else
-        checks.push(check('config', 'pass', "The config block uses this store's sales channel and a market scope."));
-    // The elements a shopper needs, and an add to cart for every product applied.
-    const missing = ['cl-price', 'cl-add-to-cart', 'cl-cart-link', 'cl-checkout-link'].filter((n) => find(n).length === 0);
-    checks.push(missing.length ? check('drop_in_elements', 'fail', `The page has no ${missing.join(', ')}.`, { fix: 'Keep the drop-in.js elements storefront init writes: cl-price and cl-add-to-cart per product, cl-cart-link with cl-cart-count and the mini cl-cart, cl-checkout-link.', items: missing }) : check('drop_in_elements', 'pass', 'Prices, add to cart, the cart link and the checkout link are on the page.'));
-    let data = {};
-    const json = scripts(html).find((s) => /id\s*=\s*["']?products["']?/.test(s.attrs) && /application\/json/.test(s.attrs));
-    if (json) {
-        try {
-            data = JSON.parse(json.body);
-        }
-        catch {
-            checks.push(check('product_data', 'fail', 'The #products data is not valid JSON: product pages will not open.', { fix: 'Fix the JSON in <script type="application/json" id="products">, or regenerate with `c11r storefront init --force`.' }));
-        }
-    }
-    const templated = json && all.some((t) => t.name === 'cl-add-to-cart' && 'data-code' in t.attrs);
-    const codes = new Set(all.filter((t) => t.name.startsWith('cl-') && t.attrs.code).map((t) => t.attrs.code));
-    const buyable = new Set([...find('cl-add-to-cart').map((t) => t.attrs.code).filter(Boolean), ...(templated ? Object.keys(data) : [])]);
-    const skus = Object.keys(state.applied?.products ?? {});
-    const unsold = skus.filter((s) => !buyable.has(s));
-    const unknown = [...new Set([...codes, ...(templated ? Object.keys(data) : [])])].filter((c) => !skus.includes(c));
-    if (unknown.length)
-        checks.push(check('products', 'fail', `The page offers skus the store does not have: ${unknown.join(', ')}.`, { fix: 'Use the skus in the catalog (code="<sku>"), or run `c11r apply` if the catalog has them and the store does not yet.', items: unknown }));
-    else if (unsold.length)
-        checks.push(check('products', 'warn', `${unsold.length} of ${skus.length} products have no add to cart on the page.`, { fix: 'Add a card with <cl-add-to-cart code="<sku>"> for each, or regenerate with `c11r storefront init --force`.', items: unsold }));
-    else
-        checks.push(check('products', 'pass', `All ${skus.length} products can be added to the cart.`));
-    // Images: every <img> and product image, requested; and alt text on the page's images.
-    const imageUrls = new Set();
-    for (const t of find('img'))
-        if (t.attrs.src && !('data-field' in t.attrs))
-            imageUrls.add(t.attrs.src);
-    for (const p of Object.values(data))
-        if (p?.image_url)
-            imageUrls.add(p.image_url);
-    const resolved = [...imageUrls].slice(0, 200).map((src) => {
-        try {
-            return { src, url: new URL(src, pageUrl).href };
-        }
-        catch {
-            return { src, url: '' };
-        }
-    });
-    const answers = await mapLimit(resolved, 8, async (i) => ({ ...i, res: i.url ? await get(i.url, origin, 'HEAD') : { status: 0, type: '', body: 'not a URL' } }));
-    const broken = answers.filter((a) => a.res.status < 200 || a.res.status >= 300 || (a.res.type && !a.res.type.startsWith('image/')));
-    checks.push(broken.length
-        ? check('images', 'fail', `${broken.length} of ${answers.length} images do not load.`, { fix: 'Put the files in the storefront folder (img/<file>) and publish, or fix the URLs.', items: broken.map((b) => `${b.src}: ${b.res.status || b.res.body}${b.res.type && !b.res.type.startsWith('image/') ? ` ${b.res.type}` : ''}`) })
-        : check('images', 'pass', answers.length ? `All ${answers.length} images load.` : 'The page has no images.'));
-    const noAlt = find('img').filter((t) => !('alt' in t.attrs) && !('data-field' in t.attrs)).map((t) => t.attrs.src ?? '(no src)');
-    checks.push(noAlt.length ? check('image_alt', 'warn', `${noAlt.length} images have no alt text.`, { fix: 'Give every <img> an alt: the product name, or alt="" for decoration.', items: noAlt }) : check('image_alt', 'pass', 'Every image has alt text.'));
-    // Styles: the page's own CSS after drop-in.css, the theme tokens, overrides that can apply.
-    const sheets = find('link').filter((t) => /\bstylesheet\b/i.test(t.attrs.rel ?? '') && t.attrs.href);
-    const dropInCss = sheets.findIndex((t) => /drop-in\.js@[^/]+\/dist\/drop-in\/drop-in\.css/.test(t.attrs.href));
-    const own = sheets.filter((t) => new URL(t.attrs.href, pageUrl).origin === origin);
-    const inline = [...html.replace(/<!--[\s\S]*?-->/g, '').matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]);
-    const ownCss = await mapLimit(own, 4, async (t) => (await get(new URL(t.attrs.href, pageUrl).href, origin)).body);
-    const css = [...ownCss, ...inline].join('\n');
-    if (dropInCss < 0)
-        checks.push(check('stylesheets', 'warn', 'drop-in.css is not linked: drop-in.js elements fall back to unstyled.', { fix: 'Keep <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@2/dist/drop-in/drop-in.css" rel="stylesheet">, before the page\'s own stylesheet.' }));
-    else if (own.some((t) => sheets.indexOf(t) < dropInCss))
-        checks.push(check('stylesheets', 'warn', "A stylesheet of the page loads before drop-in.css, so drop-in.css's rules win over it.", { fix: 'Link the page\'s stylesheets after drop-in.css and minicart.css.', items: own.filter((t) => sheets.indexOf(t) < dropInCss).map((t) => t.attrs.href) }));
-    else
-        checks.push(check('stylesheets', 'pass', "The page's stylesheets load after drop-in.css."));
-    const tokens = ['--paper', '--ink', '--accent'].filter((t) => !new RegExp(`${t}\\s*:`).test(css));
-    checks.push(tokens.length ? check('theme_tokens', 'warn', `The theme tokens ${tokens.join(', ')} are not defined.`, { fix: 'Keep the tokens block at the top of styles.css and restyle through it.', items: tokens }) : check('theme_tokens', 'pass', 'The theme tokens are defined.'));
-    const dead = [...css.matchAll(/(cl-add-to-cart|cl-checkout-link|cl-cart-link)::part\([^)]*\)/g)].map((m) => m[0]);
-    const overrides = /cl-price-amount\s*\{[^}]*color\s*:/.test(css) && /cl-add-to-cart(?::not\(\[aria-disabled=["']?true["']?\]\))?\s*\{[^}]*background(-color)?\s*:/.test(css);
-    if (dead.length)
-        checks.push(check('drop_in_overrides', 'fail', 'Some rules style ::part()s that these drop-in.js elements do not have: they never apply.', { fix: 'Style the elements themselves (cl-add-to-cart, cl-checkout-link a), as styles.css does.', items: [...new Set(dead)] }));
-    else if (!overrides)
-        checks.push(check('drop_in_overrides', 'warn', "Nothing overrides drop-in.css's colours for prices and the add to cart button, so they ignore the theme.", { fix: 'Keep the "drop-in.js overrides" section of styles.css.' }));
-    else
-        checks.push(check('drop_in_overrides', 'pass', 'Prices and the add to cart button follow the theme.'));
-    // The page itself.
-    const title = decode(html.match(/<title[^>]*>([\s\S]*?)<\/title>/i)?.[1] ?? '').trim();
-    if (!title)
-        checks.push(check('title', 'fail', 'The page has no <title>.', { fix: 'Add a <title> with the store name and what it sells.' }));
-    else if (title === state.name)
-        checks.push(check('title', 'warn', `The <title> is still the scaffold's: "${title}".`, { fix: 'Say what the store sells too, e.g. "<name> · Specialty coffee".' }));
-    else
-        checks.push(check('title', 'pass', `The <title> is "${title}".`));
-    const lang = find('html')[0]?.attrs.lang;
-    checks.push(lang ? check('lang', 'pass', `The page language is ${lang}.`) : check('lang', 'warn', 'The <html> element has no lang.', { fix: 'Add lang="en" (or the store\'s language) to <html>.' }));
-    const viewport = find('meta').some((t) => t.attrs.name === 'viewport');
-    checks.push(viewport ? check('viewport', 'pass', 'The page has a viewport meta tag.') : check('viewport', 'fail', 'The page has no viewport meta tag: phones show it zoomed out.', { fix: 'Add <meta name="viewport" content="width=device-width, initial-scale=1">.' }));
-    const description = find('meta').find((t) => t.attrs.name === 'description')?.attrs.content;
-    checks.push(description ? check('description', 'pass', 'The page has a meta description.') : check('description', 'warn', 'The page has no meta description, what search results and link previews show.', { fix: 'Add <meta name="description" content="<one sentence on the store>">.' }));
-    // The local folder against what is published.
-    const dir = storefrontPath();
-    if (fs.existsSync(dir)) {
-        const since = Date.parse(state.storefront.published_at);
-        const newer = fs
-            .readdirSync(dir, { recursive: true, withFileTypes: true })
-            .filter((e) => e.isFile() && !path.relative(dir, path.join(e.parentPath, e.name)).split(path.sep).some((p) => p.startsWith('.')))
-            .filter((e) => fs.statSync(path.join(e.parentPath, e.name)).mtimeMs > since)
-            .map((e) => path.relative(dir, path.join(e.parentPath, e.name)).split(path.sep).join('/'));
-        checks.push(newer.length ? check('published', 'warn', `${newer.length} files in ${dir}/ changed after the last publish: this check read the published version.`, { fix: 'Run `c11r storefront publish`, then check again.', items: newer }) : check('published', 'pass', `The published storefront matches ${dir}/.`));
-    }
-    const summary = { pass: 0, warn: 0, fail: 0 };
-    for (const c of checks)
-        summary[c.status]++;
-    return {
-        status: summary.fail ? 'fail' : 'pass',
-        url: pageUrl,
-        published_at: state.storefront.published_at,
-        summary,
-        checks,
-        // Filled by the rendering phase (1440 and 390 px: contrast, overflow, minicart fit, screenshots); null until then.
-        render: null,
-        next: summary.fail ? 'Fix the failed checks (see fix), publish, and check again.' : summary.warn ? 'The storefront works. The warnings are worth fixing before the human sees it.' : undefined,
-    };
-}