@webstir-io/webstir-frontend 0.1.40 → 0.1.41

package/dist/builders/cssBuilder.js

@@ -3,19 +3,20 @@ import postcss from 'postcss';
 import autoprefixer from 'autoprefixer';
 import customMedia from 'postcss-custom-media';
 import * as cssoModule from 'csso';
-import { glob } from 'glob';
 import { FOLDERS, FILES, EXTENSIONS } from '../core/constants.js';
 import { ensureDir, pathExists, readFile, writeFile, remove, copy } from '../utils/fs.js';
+import { scanGlob } from '../utils/glob.js';
 import { getPages } from '../core/pages.js';
 import { hashContent } from '../utils/hash.js';
-import { updatePageManifest, updateSharedAssets, readSharedAssets } from '../assets/assetManifest.js';
+import { updatePageManifest, updateSharedAssets, readSharedAssets, } from '../assets/assetManifest.js';
 import { createCompressedVariants } from '../assets/precompression.js';
 import { shouldProcess } from '../utils/changedFile.js';
 import { findPageFromChangedFile } from '../utils/pathMatch.js';
 const MODULE_SUFFIX = '.module';
 const APP_CSS_BASENAME = 'app';
-const csso = (cssoModule.default ?? cssoModule);
-const PAGE_IMPORT_PATTERN = /@import\s+(?:url\()?[\s]*['"]([^'"\)]+)['"][\s]*\)?\s*;?/g;
+const csso = (cssoModule.default ??
+    cssoModule);
+const PAGE_IMPORT_PATTERN = /@import\s+(?:url\()?[\s]*['"]([^'"]+)['"][\s]*\)?\s*;?/g;
 export function createCssBuilder(context) {
     return {
         name: 'css',
@@ -24,14 +25,14 @@ export function createCssBuilder(context) {
         },
         async publish() {
             await processCss(context, true);
-        }
+        },
     };
 }
 async function processCss(context, isProduction) {
     const { config } = context;
     if (!shouldProcess(context, [
         { directory: config.paths.src.pages, extensions: [EXTENSIONS.css] },
-        { directory: config.paths.src.frontend, extensions: [EXTENSIONS.css] }
+        { directory: config.paths.src.frontend, extensions: [EXTENSIONS.css] },
     ])) {
         return;
     }
@@ -51,7 +52,10 @@ async function processCss(context, isProduction) {
         const css = await readFile(entryPath);
         const inlinedCss = await inlinePageImports(css, page.directory);
         const prepared = applyCustomMediaPrelude(inlinedCss, customMediaPrelude);
-        const processed = await processor.process(prepared, { from: entryPath, map: !isProduction ? { inline: true } : false });
+        const processed = await processor.process(prepared, {
+            from: entryPath,
+            map: !isProduction ? { inline: true } : false,
+        });
         const normalized = resolveAppImports(processed.css, isProduction ? sharedArtifacts.appCss : undefined);
         if (isProduction) {
             const inlined = await inlineAppImports(normalized, config.paths.dist.frontend);
@@ -83,7 +87,7 @@ async function emitProductionCss(config, pageName, css) {
     else {
         await Promise.all([
             remove(`${outputPath}${EXTENSIONS.br}`).catch(() => undefined),
-            remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined)
+            remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined),
         ]);
     }
     await updatePageManifest(outputDir, pageName, (manifest) => {
@@ -91,7 +95,7 @@ async function emitProductionCss(config, pageName, css) {
     });
 }
 async function syncPageCssAssetsForDevelopment(pageDirectory, outputDir, entryPath) {
-    const sourceFiles = await glob('**/*.css', { cwd: pageDirectory, nodir: true });
+    const sourceFiles = await scanGlob('**/*.css', { cwd: pageDirectory });
     const entryRelative = normalizeForwardSlashes(path.relative(pageDirectory, entryPath));
     const copySet = new Set();
     for (const relative of sourceFiles) {
@@ -105,7 +109,7 @@ async function syncPageCssAssetsForDevelopment(pageDirectory, outputDir, entryPa
         await ensureDir(path.dirname(destinationPath));
         await copy(sourcePath, destinationPath);
     }
-    const existingFiles = await glob('**/*.css', { cwd: outputDir, nodir: true });
+    const existingFiles = await scanGlob('**/*.css', { cwd: outputDir });
     for (const relative of existingFiles) {
         const normalized = normalizeForwardSlashes(relative);
         if (normalized === `${FILES.index}${EXTENSIONS.css}`) {
@@ -128,7 +132,7 @@ async function processAppCss(config, isProduction, processor, customMediaPrelude
         const rewritten = rewriteAppStyleImports(processed.css, stylesMap);
         const inlined = await inlineAppImports(rewritten, config.paths.dist.frontend);
         const fileName = await emitAppProductionCss(config, inlined);
-        await updateSharedAssets(config.paths.dist.frontend, shared => {
+        await updateSharedAssets(config.paths.dist.frontend, (shared) => {
             shared.css = fileName;
         });
         return { appCss: fileName };
@@ -187,7 +191,7 @@ async function emitAppProductionCss(config, css) {
     else {
         await Promise.all([
             remove(`${outputPath}${EXTENSIONS.br}`).catch(() => undefined),
-            remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined)
+            remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined),
         ]);
     }
     // Remove previously hashed variants to avoid stale files.
@@ -208,7 +212,7 @@ async function syncAppStyles(sourceAppDir, destinationAppDir, processor, customM
     }
     const stylesDestination = path.join(destinationAppDir, 'styles');
     await ensureDir(stylesDestination);
-    const files = await glob('**/*', { cwd: stylesSource, nodir: true });
+    const files = await scanGlob('**/*', { cwd: stylesSource });
     for (const relative of files) {
         const sourcePath = path.join(stylesSource, relative);
         const destinationPath = path.join(stylesDestination, relative);
@@ -227,7 +231,7 @@ async function computeAppStylesVersion(sourceAppDir) {
     if (!(await pathExists(stylesDir))) {
         return 'no-styles';
     }
-    const files = (await glob('**/*.css', { cwd: stylesDir, nodir: true })).sort((a, b) => a.localeCompare(b));
+    const files = await scanGlob('**/*.css', { cwd: stylesDir });
     if (files.length === 0) {
         return 'no-styles';
     }
@@ -294,7 +298,9 @@ function shouldInlinePageImport(importPath) {
     if (!importPath.endsWith(EXTENSIONS.css)) {
         return false;
     }
-    if (importPath.startsWith('/') || importPath.startsWith('http:') || importPath.startsWith('https:')) {
+    if (importPath.startsWith('/') ||
+        importPath.startsWith('http:') ||
+        importPath.startsWith('https:')) {
         return false;
     }
     if (importPath.startsWith('@') || importPath.includes('?') || importPath.includes('#')) {
@@ -310,7 +316,7 @@ function isWithin(candidate, root) {
     return relative.length > 0 && !relative.startsWith('..') && !path.isAbsolute(relative);
 }
 async function inlineAppImports(css, distRoot, seen = new Set()) {
-    const importPattern = /@import\s+(?:url\()?[\s]*['"]\/app\/([^'"\)]+)['"][\s]*\)?;?/g;
+    const importPattern = /@import\s+(?:url\()?[\s]*['"]\/app\/([^'"]+)['"][\s]*\)?;?/g;
     const segments = [];
     let lastIndex = 0;
     for (const match of css.matchAll(importPattern)) {
@@ -357,7 +363,7 @@ async function emitAppStylesProduction(config, processor, customMediaPrelude) {
     }
     const destinationDir = path.join(config.paths.dist.frontend, FOLDERS.app, 'styles');
     await remove(destinationDir).catch(() => undefined);
-    const files = await glob('**/*.css', { cwd: sourceDir, nodir: true });
+    const files = await scanGlob('**/*.css', { cwd: sourceDir });
     for (const relative of files) {
         const sourcePath = path.join(sourceDir, relative);
         const source = applyCustomMediaPrelude(await readFile(sourcePath), customMediaPrelude);
@@ -376,7 +382,7 @@ async function emitAppStylesProduction(config, processor, customMediaPrelude) {
         else {
             await Promise.all([
                 remove(`${destinationPath}${EXTENSIONS.br}`).catch(() => undefined),
-                remove(`${destinationPath}${EXTENSIONS.gz}`).catch(() => undefined)
+                remove(`${destinationPath}${EXTENSIONS.gz}`).catch(() => undefined),
             ]);
         }
         mapping.set(normalizeForwardSlashes(relative), normalizeForwardSlashes(path.join('styles', relativeHashedPath)));
@@ -391,7 +397,7 @@ function rewriteAppStyleImports(css, stylesMap) {
     for (const [original, hashed] of stylesMap.entries()) {
         const normalizedOriginal = original.startsWith('styles/') ? original : `styles/${original}`;
         const escaped = escapeRegExp(normalizedOriginal);
-        const pattern = new RegExp(`(@import\\s+['"])(?:\.\/)?${escaped}(['"];?)`, 'g');
+        const pattern = new RegExp(`(@import\\s+['"])(?:\\./)?${escaped}(['"];?)`, 'g');
         result = result.replace(pattern, `$1/app/${hashed}$2`);
     }
     return result;

package/dist/builders/htmlBuilder.js

@@ -1,10 +1,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { load } from 'cheerio';
-import { glob } from 'glob';
 import { minify } from 'html-minifier-terser';
 import { FOLDERS, FILES, FILE_NAMES, EXTENSIONS } from '../core/constants.js';
 import { ensureDir, readFile, writeFile, pathExists, remove } from '../utils/fs.js';
+import { scanGlob } from '../utils/glob.js';
 import { getPageDirectories } from '../core/pages.js';
 import { readPageManifest, readSharedAssets } from '../assets/assetManifest.js';
 import { createCompressedVariants } from '../assets/precompression.js';
@@ -13,10 +13,10 @@ import { getImageDimensions } from '../assets/imageOptimizer.js';
 import { applyLazyLoading } from '../html/lazyLoad.js';
 import { addSubresourceIntegrity } from '../html/htmlSecurity.js';
 import { injectResourceHints } from '../html/resourceHints.js';
-import { ensureAppShellCriticalCss, ensureDocsShellCriticalCss, inlineCriticalCss } from '../html/criticalCss.js';
+import { ensureAppShellCriticalCss, ensureDocsShellCriticalCss, inlineCriticalCss, } from '../html/criticalCss.js';
 import { findPageFromChangedFile } from '../utils/pathMatch.js';
 import { emitDiagnostic } from '../core/diagnostics.js';
-import { resolvePageAssetUrl, resolvePageHtmlDir, resolvePagesUrlPrefix } from '../utils/pagePaths.js';
+import { resolvePageAssetUrl, resolvePageHtmlDir, resolvePagesUrlPrefix, } from '../utils/pagePaths.js';
 export function createHtmlBuilder(context) {
     return {
         name: 'html',
@@ -25,17 +25,20 @@ export function createHtmlBuilder(context) {
         },
         async publish() {
             await publishHtml(context);
-        }
+        },
     };
 }
 async function buildHtml(context) {
     const { config } = context;
     if (!shouldProcess(context, [
         { directory: config.paths.src.pages, extensions: [EXTENSIONS.html] },
-        { directory: config.paths.src.pages, extensions: [EXTENSIONS.ts, EXTENSIONS.js, '.tsx', '.jsx'] },
+        {
+            directory: config.paths.src.pages,
+            extensions: [EXTENSIONS.ts, EXTENSIONS.js, '.tsx', '.jsx'],
+        },
         { directory: config.paths.src.app, extensions: [EXTENSIONS.html, EXTENSIONS.js] },
         // `webstir enable ...` modifies package.json and can change which opt-in scripts should be injected.
-        { directory: config.paths.workspace, extensions: ['.json'] }
+        { directory: config.paths.workspace, extensions: ['.json'] },
     ])) {
         return;
     }
@@ -52,10 +55,7 @@ async function buildHtml(context) {
         if (targetPage && page.name !== targetPage) {
             continue;
         }
-        const pageHtmlFiles = await glob('**/*.html', {
-            cwd: page.directory,
-            nodir: true
-        });
+        const pageHtmlFiles = await scanGlob('**/*.html', { cwd: page.directory });
         if (pageHtmlFiles.length === 0) {
             warn(`No HTML fragments found for page '${page.name}'.`);
             continue;
@@ -96,10 +96,7 @@ async function publishHtml(context) {
         }
         const assetDir = path.join(config.paths.dist.pages, page.name);
         const distDir = resolvePageHtmlDir(config.paths.dist.pages, page.name, useRootIndex);
-        const htmlFiles = await glob('**/*.html', {
-            cwd: page.directory,
-            nodir: true
-        });
+        const htmlFiles = await scanGlob('**/*.html', { cwd: page.directory });
         const manifest = await readPageManifest(assetDir, page.name);
         for (const relativeHtml of htmlFiles) {
             const sourcePath = path.join(page.directory, relativeHtml);
@@ -107,7 +104,7 @@ async function publishHtml(context) {
             const rewritten = await rewriteForPublish(context, html, page.name, manifest, page.directory, shared, {
                 pagesUrlPrefix,
                 buildPagesUrlPrefix,
-                useRootIndex
+                useRootIndex,
             });
             const outputPath = path.join(distDir, relativeHtml);
             await ensureDir(path.dirname(outputPath));
@@ -146,13 +143,10 @@ function mergeTemplates(appHtml, pageHtml) {
     appMain.html(pageMain.html() ?? '');
     return app.root().html() ?? '';
 }
-function injectOptInScripts(html, enable, pageName, pageDir, sourceHtmlPath) {
-    if (!enable) {
-        return html;
-    }
+function injectOptInScripts(html, enable, pageName, pageDir, _sourceHtmlPath) {
     const document = load(html);
     rewritePageRelativeAssets(document, pageName);
-    if (enable.spa) {
+    if (enable?.spa) {
         const existing = document(`script[src="/${FOLDERS.pages}/${pageName}/${FILES.index}${EXTENSIONS.js}"]`);
         if (existing.length === 0) {
             document('head').append(`<script type="module" src="/${FOLDERS.pages}/${pageName}/${FILES.index}${EXTENSIONS.js}"></script>`);
@@ -162,10 +156,10 @@ function injectOptInScripts(html, enable, pageName, pageDir, sourceHtmlPath) {
     const tsxCandidate = path.join(pageDir, `${FILES.index}.tsx`);
     const jsCandidate = path.join(pageDir, `${FILES.index}${EXTENSIONS.js}`);
     const jsxCandidate = path.join(pageDir, `${FILES.index}.jsx`);
-    const pageScriptExists = [tsCandidate, tsxCandidate, jsCandidate, jsxCandidate]
-        .some(candidate => fs.existsSync(candidate));
+    const pageScriptExists = [tsCandidate, tsxCandidate, jsCandidate, jsxCandidate].some((candidate) => fs.existsSync(candidate));
     if (pageScriptExists) {
-        const hasScript = document(`script[src="/${FOLDERS.pages}/${pageName}/${FILES.index}${EXTENSIONS.js}"]`).length > 0;
+        const hasScript = document(`script[src="/${FOLDERS.pages}/${pageName}/${FILES.index}${EXTENSIONS.js}"]`)
+            .length > 0;
         if (!hasScript) {
             document('head').append(`<script type="module" src="/${FOLDERS.pages}/${pageName}/${FILES.index}${EXTENSIONS.js}"></script>`);
         }
@@ -177,7 +171,11 @@ function rewritePageRelativeAssets(document, pageName) {
     document('link[rel="stylesheet"]').each((_, element) => {
         const node = document(element);
         const href = node.attr('href');
-        if (!href || href.startsWith('/') || href.startsWith('http:') || href.startsWith('https:') || href.startsWith('data:')) {
+        if (!href ||
+            href.startsWith('/') ||
+            href.startsWith('http:') ||
+            href.startsWith('https:') ||
+            href.startsWith('data:')) {
             return;
         }
         node.attr('href', `${pagePrefix}${href}`);
@@ -185,7 +183,11 @@ function rewritePageRelativeAssets(document, pageName) {
     document('script[src]').each((_, element) => {
         const node = document(element);
         const src = node.attr('src');
-        if (!src || src.startsWith('/') || src.startsWith('http:') || src.startsWith('https:') || src.startsWith('data:')) {
+        if (!src ||
+            src.startsWith('/') ||
+            src.startsWith('http:') ||
+            src.startsWith('https:') ||
+            src.startsWith('data:')) {
             return;
         }
         node.attr('src', `${pagePrefix}${src}`);
@@ -207,13 +209,11 @@ async function rewriteForPublish(context, html, pageName, manifest, pageDirector
         ensureDocsShellCriticalCss(document);
     }
     if (shared?.js) {
-        document(`script[src="/app/app.js"]`)
-            .attr('src', `/app/${shared.js}`)
-            .attr('type', 'module');
+        document(`script[src="/app/app.js"]`).attr('src', `/app/${shared.js}`).attr('type', 'module');
     }
     const scriptSelector = [
         `script[src="${FILES.index}${EXTENSIONS.js}"]`,
-        `script[src="${buildScriptHref}"]`
+        `script[src="${buildScriptHref}"]`,
     ].join(', ');
     if (manifest.js) {
         document(scriptSelector)
@@ -225,7 +225,7 @@ async function rewriteForPublish(context, html, pageName, manifest, pageDirector
     }
     const cssSelector = [
         `link[href="${FILES.index}${EXTENSIONS.css}"]`,
-        `link[href="${buildCssHref}"]`
+        `link[href="${buildCssHref}"]`,
     ].join(', ');
     if (manifest.css) {
         document(cssSelector).attr('href', resolvePageAssetUrl(pagesUrlPrefix, pageName, manifest.css));
@@ -236,7 +236,24 @@ async function rewriteForPublish(context, html, pageName, manifest, pageDirector
     }
     if (context.config.features.htmlSecurity) {
         await inlineCriticalCss(document, pageName, context.config.paths.dist.pages, pagesUrlPrefix, manifest.css);
-        const sriResult = await addSubresourceIntegrity(document);
+        const sriResult = await addSubresourceIntegrity(document, {
+            allowExternalFetch: context.config.features.externalResourceIntegrity,
+        });
+        if (sriResult.skippedExternalResources.length > 0) {
+            const resources = Array.from(new Set(sriResult.skippedExternalResources));
+            const message = resources.length === 1
+                ? `Skipped automatic SRI for ${resources[0]} because external resource fetching is disabled.`
+                : `Skipped automatic SRI for ${resources.length} external resources because external resource fetching is disabled.`;
+            emitDiagnostic({
+                code: 'frontend.sri.external_fetch_disabled',
+                kind: 'sri',
+                stage: 'html.publish',
+                severity: 'warning',
+                message,
+                data: { resources },
+                suggestion: 'Add integrity attributes manually or set features.externalResourceIntegrity to true to opt in.',
+            });
+        }
         if (sriResult.failures.length > 0) {
             const resources = sriResult.failures;
             const message = resources.length === 1
@@ -249,7 +266,7 @@ async function rewriteForPublish(context, html, pageName, manifest, pageDirector
                 severity: 'warning',
                 message,
                 data: { resources },
-                suggestion: 'Verify the resource is reachable and not blocked by auth or network constraints.'
+                suggestion: 'Verify the resource is reachable and not blocked by auth or network constraints.',
             });
         }
         const hints = injectResourceHints(document, pageName, pagesUrlPrefix, useRootIndex);
@@ -260,7 +277,7 @@ async function rewriteForPublish(context, html, pageName, manifest, pageDirector
                 stage: 'html.publish',
                 severity: 'warning',
                 message: 'Unable to inject resource hints because <head> is missing.',
-                data: { candidates: hints.candidates }
+                data: { candidates: hints.candidates },
             });
         }
     }
@@ -277,7 +294,7 @@ async function handlePrecompression(context, outputPath) {
     }
     await Promise.all([
         remove(`${outputPath}${EXTENSIONS.br}`).catch(() => undefined),
-        remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined)
+        remove(`${outputPath}${EXTENSIONS.gz}`).catch(() => undefined),
     ]);
 }
 function validateAppTemplate(html, filePath) {
@@ -375,9 +392,7 @@ function removeDevScript(document, selector) {
     });
 }
 function isWhitespaceTextNode(node) {
-    return node.length > 0
-        && node[0].type === 'text'
-        && (node[0].data ?? '').trim().length === 0;
+    return node.length > 0 && node[0].type === 'text' && (node[0].data ?? '').trim().length === 0;
 }
 async function minifyHtml(html) {
     return minify(html, {
@@ -387,7 +402,7 @@ async function minifyHtml(html) {
         minifyJS: false,
         removeComments: true,
         removeOptionalTags: false,
-        removeAttributeQuotes: false
+        removeAttributeQuotes: false,
     });
 }
 async function addImageDimensions(document, context, pageDirectory) {
@@ -415,10 +430,10 @@ async function addImageDimensions(document, context, pageDirectory) {
     }));
 }
 function isExternalSource(src) {
-    return src.startsWith('http://')
-        || src.startsWith('https://')
-        || src.startsWith('data:')
-        || src.startsWith('//');
+    return (src.startsWith('http://') ||
+        src.startsWith('https://') ||
+        src.startsWith('data:') ||
+        src.startsWith('//'));
 }
 function resolveAssetPath(src, pageDirectory, buildRoot) {
     const normalized = src.replace(/\\/g, '/');

package/dist/builders/index.js

@@ -9,6 +9,6 @@ export function createBuilders(context) {
         createCssBuilder(context),
         createHtmlBuilder(context),
         createContentBuilder(context),
-        createStaticAssetsBuilder(context)
+        createStaticAssetsBuilder(context),
     ];
 }