@webstir-io/webstir-frontend 0.1.40 → 0.1.41

package/src/utils/glob.ts

@@ -0,0 +1,38 @@
+import path from 'node:path';
+import { stat } from './fs.js';
+
+export interface GlobScanOptions {
+  readonly cwd: string;
+  readonly absolute?: boolean;
+  readonly dot?: boolean;
+  readonly onlyFiles?: boolean;
+}
+
+export async function scanGlob(pattern: string, options: GlobScanOptions): Promise<string[]> {
+  const glob = new Bun.Glob(pattern);
+  const matches = await Array.fromAsync(glob.scan(options));
+  matches.sort((a, b) => a.localeCompare(b));
+  return matches;
+}
+
+export async function scanDirectories(
+  pattern: string,
+  options: Omit<GlobScanOptions, 'onlyFiles'>,
+): Promise<string[]> {
+  const matches = await scanGlob(pattern, { ...options, onlyFiles: false });
+  const directories = await Promise.all(
+    matches.map(async (match) => {
+      const absolutePath =
+        options.absolute || path.isAbsolute(match) ? match : path.join(options.cwd, match);
+      const info = await stat(absolutePath).catch(() => null);
+      if (!info?.isDirectory()) {
+        return null;
+      }
+
+      const normalized = match.replace(/[\\/]+$/, '');
+      return normalized.length > 0 ? normalized : null;
+    }),
+  );
+
+  return directories.filter((value): value is string => value !== null);
+}

package/src/utils/hash.ts

@@ -1,6 +1,4 @@
-import { createHash } from 'node:crypto';
-
 export function hashContent(content: string, length = 8): string {
-    const hash = createHash('sha256').update(content).digest('hex');
-    return hash.slice(0, length);
+  const hash = new Bun.CryptoHasher('sha256').update(content).digest('hex');
+  return hash.slice(0, length);
 }

package/src/utils/pagePaths.ts

@@ -2,42 +2,54 @@ import path from 'node:path';
 import { FOLDERS, FILES } from '../core/constants.js';
 
 export function resolvePagesUrlPrefix(frontendRoot: string, pagesRoot: string): string {
-    const relative = path.relative(frontendRoot, pagesRoot).replace(/\\/g, '/');
-    if (!relative || relative === '.' || relative.startsWith('..')) {
-        return '';
-    }
-    return `/${trimSlashes(relative)}`;
+  const relative = path.relative(frontendRoot, pagesRoot).replace(/\\/g, '/');
+  if (!relative || relative === '.' || relative.startsWith('..')) {
+    return '';
+  }
+  return `/${trimSlashes(relative)}`;
 }
 
 export function isRootPagesLayout(frontendRoot: string, pagesRoot: string): boolean {
-    return resolvePagesUrlPrefix(frontendRoot, pagesRoot) === '';
+  return resolvePagesUrlPrefix(frontendRoot, pagesRoot) === '';
 }
 
-export function resolvePageAssetUrl(pagesUrlPrefix: string, pageName: string, fileName: string): string {
-    return joinUrl(pagesUrlPrefix, pageName, fileName);
+export function resolvePageAssetUrl(
+  pagesUrlPrefix: string,
+  pageName: string,
+  fileName: string,
+): string {
+  return joinUrl(pagesUrlPrefix, pageName, fileName);
 }
 
-export function resolvePageHtmlUrl(pagesUrlPrefix: string, pageName: string, useRootIndex: boolean): string {
-    if (useRootIndex && pageName === FOLDERS.home) {
-        return `/${FILES.indexHtml}`;
-    }
-    return joinUrl(pagesUrlPrefix, pageName, FILES.indexHtml);
+export function resolvePageHtmlUrl(
+  pagesUrlPrefix: string,
+  pageName: string,
+  useRootIndex: boolean,
+): string {
+  if (useRootIndex && pageName === FOLDERS.home) {
+    return `/${FILES.indexHtml}`;
+  }
+  return joinUrl(pagesUrlPrefix, pageName, FILES.indexHtml);
 }
 
-export function resolvePageHtmlDir(pagesRoot: string, pageName: string, useRootIndex: boolean): string {
-    if (useRootIndex && pageName === FOLDERS.home) {
-        return pagesRoot;
-    }
-    return path.join(pagesRoot, pageName);
+export function resolvePageHtmlDir(
+  pagesRoot: string,
+  pageName: string,
+  useRootIndex: boolean,
+): string {
+  if (useRootIndex && pageName === FOLDERS.home) {
+    return pagesRoot;
+  }
+  return path.join(pagesRoot, pageName);
 }
 
 function joinUrl(...segments: string[]): string {
-    const cleaned = segments
-        .map(segment => trimSlashes(segment))
-        .filter(segment => segment.length > 0);
-    return `/${cleaned.join('/')}`;
+  const cleaned = segments
+    .map((segment) => trimSlashes(segment))
+    .filter((segment) => segment.length > 0);
+  return `/${cleaned.join('/')}`;
 }
 
 function trimSlashes(value: string): string {
-    return value.replace(/^\/+|\/+$/g, '');
+  return value.replace(/^\/+|\/+$/g, '');
 }

package/src/utils/pathMatch.ts

@@ -1,36 +1,39 @@
 import path from 'node:path';
 
 export function isInsideDirectory(filePath: string, directory: string): boolean {
-    const resolvedFile = path.resolve(filePath);
-    const resolvedDirectory = path.resolve(directory);
-    const relative = path.relative(resolvedDirectory, resolvedFile);
-    return relative === '' || (!relative.startsWith('..') && !path.isAbsolute(relative));
+  const resolvedFile = path.resolve(filePath);
+  const resolvedDirectory = path.resolve(directory);
+  const relative = path.relative(resolvedDirectory, resolvedFile);
+  return relative === '' || (!relative.startsWith('..') && !path.isAbsolute(relative));
 }
 
-export function findPageFromChangedFile(changedFile: string | undefined, pagesRoot: string): string | null {
-    if (!changedFile) {
-        return null;
-    }
+export function findPageFromChangedFile(
+  changedFile: string | undefined,
+  pagesRoot: string,
+): string | null {
+  if (!changedFile) {
+    return null;
+  }
 
-    const resolvedChanged = path.resolve(changedFile);
-    const resolvedPagesRoot = path.resolve(pagesRoot);
-    if (!isInsideDirectory(resolvedChanged, resolvedPagesRoot)) {
-        return null;
-    }
+  const resolvedChanged = path.resolve(changedFile);
+  const resolvedPagesRoot = path.resolve(pagesRoot);
+  if (!isInsideDirectory(resolvedChanged, resolvedPagesRoot)) {
+    return null;
+  }
 
-    const relative = path.relative(resolvedPagesRoot, resolvedChanged);
-    const segments = relative.split(path.sep);
-    return segments.length > 0 && segments[0] ? segments[0] : null;
+  const relative = path.relative(resolvedPagesRoot, resolvedChanged);
+  const segments = relative.split(path.sep);
+  return segments.length > 0 && segments[0] ? segments[0] : null;
 }
 
 export function relativePathWithin(filePath: string | undefined, directory: string): string | null {
-    if (!filePath) {
-        return null;
-    }
+  if (!filePath) {
+    return null;
+  }
 
-    if (!isInsideDirectory(filePath, directory)) {
-        return null;
-    }
+  if (!isInsideDirectory(filePath, directory)) {
+    return null;
+  }
 
-    return path.relative(path.resolve(directory), path.resolve(filePath));
+  return path.relative(path.resolve(directory), path.resolve(filePath));
 }

package/tests/add-page-defaults.test.js

@@ -8,57 +8,62 @@ import path from 'node:path';
 import { runAddPage } from '../dist/index.js';
 
 async function createWorkspace(pkg) {
-    const root = await fs.mkdtemp(path.join(os.tmpdir(), 'webstir-frontend-add-page-'));
-    await fs.writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2), 'utf8');
-    return root;
+  const root = await fs.mkdtemp(path.join(os.tmpdir(), 'webstir-frontend-add-page-'));
+  await fs.writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2), 'utf8');
+  return root;
 }
 
 test('add-page defaults to ssg scaffold when webstir.mode=ssg', async () => {
-    const workspace = await createWorkspace({
-        name: 'webstir-project',
-        version: '1.0.0',
-        webstir: { mode: 'ssg' }
-    });
+  const workspace = await createWorkspace({
+    name: 'webstir-project',
+    version: '1.0.0',
+    webstir: { mode: 'ssg' },
+  });
 
-    try {
-        await runAddPage({ workspaceRoot: workspace, pageName: 'about' });
+  try {
+    await runAddPage({ workspaceRoot: workspace, pageName: 'about' });
 
-        const pageDir = path.join(workspace, 'src', 'frontend', 'pages', 'about');
-        const htmlPath = path.join(pageDir, 'index.html');
-        const cssPath = path.join(pageDir, 'index.css');
-        const tsPath = path.join(pageDir, 'index.ts');
+    const pageDir = path.join(workspace, 'src', 'frontend', 'pages', 'about');
+    const htmlPath = path.join(pageDir, 'index.html');
+    const cssPath = path.join(pageDir, 'index.css');
+    const tsPath = path.join(pageDir, 'index.ts');
 
-        assert.equal(fssync.existsSync(htmlPath), true);
-        assert.equal(fssync.existsSync(cssPath), true);
-        assert.equal(fssync.existsSync(tsPath), false);
+    assert.equal(fssync.existsSync(htmlPath), true);
+    assert.equal(fssync.existsSync(cssPath), true);
+    assert.equal(fssync.existsSync(tsPath), false);
 
-        const html = await fs.readFile(htmlPath, 'utf8');
-        assert.ok(!html.includes('<script type="module"'), 'ssg scaffold should not include module script tag');
-    } finally {
-        await fs.rm(workspace, { recursive: true, force: true });
-    }
+    const html = await fs.readFile(htmlPath, 'utf8');
+    assert.ok(
+      !html.includes('<script type="module"'),
+      'ssg scaffold should not include module script tag',
+    );
+  } finally {
+    await fs.rm(workspace, { recursive: true, force: true });
+  }
 });
 
 test('add-page defaults to standard scaffold when webstir.mode is not ssg', async () => {
-    const workspace = await createWorkspace({
-        name: 'webstir-project',
-        version: '1.0.0'
-    });
+  const workspace = await createWorkspace({
+    name: 'webstir-project',
+    version: '1.0.0',
+  });
 
-    try {
-        await runAddPage({ workspaceRoot: workspace, pageName: 'about' });
+  try {
+    await runAddPage({ workspaceRoot: workspace, pageName: 'about' });
 
-        const pageDir = path.join(workspace, 'src', 'frontend', 'pages', 'about');
-        const htmlPath = path.join(pageDir, 'index.html');
-        const tsPath = path.join(pageDir, 'index.ts');
+    const pageDir = path.join(workspace, 'src', 'frontend', 'pages', 'about');
+    const htmlPath = path.join(pageDir, 'index.html');
+    const tsPath = path.join(pageDir, 'index.ts');
 
-        assert.equal(fssync.existsSync(htmlPath), true);
-        assert.equal(fssync.existsSync(tsPath), true);
+    assert.equal(fssync.existsSync(htmlPath), true);
+    assert.equal(fssync.existsSync(tsPath), true);
 
-        const html = await fs.readFile(htmlPath, 'utf8');
-        assert.ok(html.includes('<script type="module"'), 'standard scaffold should include module script tag');
-    } finally {
-        await fs.rm(workspace, { recursive: true, force: true });
-    }
+    const html = await fs.readFile(htmlPath, 'utf8');
+    assert.ok(
+      html.includes('<script type="module"'),
+      'standard scaffold should include module script tag',
+    );
+  } finally {
+    await fs.rm(workspace, { recursive: true, force: true });
+  }
 });
-

package/tests/bundlerParity.test.js

@@ -0,0 +1,252 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import { spawn } from 'node:child_process';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+import { frontendProvider } from '../dist/index.js';
+
+async function createWorkspace(prefix = 'webstir-frontend-bundler-parity-') {
+  const root = await fs.mkdtemp(path.join(os.tmpdir(), prefix));
+  const appDir = path.join(root, 'src', 'frontend', 'app');
+  const appScriptsDir = path.join(appDir, 'scripts');
+  const pageDir = path.join(root, 'src', 'frontend', 'pages', 'home');
+
+  await fs.mkdir(appScriptsDir, { recursive: true });
+  await fs.mkdir(pageDir, { recursive: true });
+
+  await fs.writeFile(
+    path.join(appDir, 'app.html'),
+    '<!DOCTYPE html><html><head><title>App</title></head><body><main></main><script type="module" src="/app/app.js"></script></body></html>',
+    'utf8',
+  );
+  await fs.writeFile(path.join(appScriptsDir, 'boot.ts'), 'export const boot = "ready";\n', 'utf8');
+  await fs.writeFile(
+    path.join(appDir, 'app.ts'),
+    'import { boot } from "./scripts/boot"; console.log(boot);\n',
+    'utf8',
+  );
+  await fs.writeFile(
+    path.join(pageDir, 'index.html'),
+    '<head></head><main><section>Home</section></main>',
+    'utf8',
+  );
+  await fs.writeFile(path.join(pageDir, 'message.ts'), 'export const message = "home";\n', 'utf8');
+  await fs.writeFile(
+    path.join(pageDir, 'index.ts'),
+    'import { message } from "./message"; console.log(message);\n',
+    'utf8',
+  );
+
+  return root;
+}
+
+function getPackageRoot() {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  return path.resolve(here, '..');
+}
+
+async function listRelativeFiles(root) {
+  const collected = [];
+
+  async function walk(current, prefix = '') {
+    let entries = [];
+    try {
+      entries = await fs.readdir(current, { withFileTypes: true });
+    } catch (error) {
+      if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+        return;
+      }
+      throw error;
+    }
+
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    for (const entry of entries) {
+      const relativePath = prefix ? path.posix.join(prefix, entry.name) : entry.name;
+      const absolutePath = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        await walk(absolutePath, relativePath);
+        continue;
+      }
+      collected.push(relativePath);
+    }
+  }
+
+  await walk(root);
+  return collected;
+}
+
+async function readJsonOrNull(filePath) {
+  try {
+    return JSON.parse(await fs.readFile(filePath, 'utf8'));
+  } catch (error) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+      return null;
+    }
+    throw error;
+  }
+}
+
+async function snapshotWorkspace(workspace, entryPoints) {
+  const buildRoot = path.join(workspace, 'build', 'frontend');
+  const distRoot = path.join(workspace, 'dist', 'frontend');
+  const sharedManifest = await readJsonOrNull(path.join(distRoot, 'manifest.json'));
+  const pageManifest = await readJsonOrNull(path.join(distRoot, 'pages', 'home', 'manifest.json'));
+
+  const sharedJs = sharedManifest?.shared?.js;
+  const pageJs = pageManifest?.pages?.home?.js;
+
+  assert.match(sharedJs ?? '', /^app-[a-z0-9]+\.js$/i, 'expected hashed shared app bundle');
+  assert.match(pageJs ?? '', /^index-[a-z0-9]+\.js$/i, 'expected hashed page bundle');
+  await fs.access(path.join(distRoot, 'app', sharedJs));
+  await fs.access(path.join(distRoot, 'pages', 'home', pageJs));
+
+  return {
+    entryPoints: [...entryPoints].sort(),
+    buildFiles: await listRelativeFiles(buildRoot),
+    distFiles: (await listRelativeFiles(distRoot)).map(normalizeHashedPath),
+    sharedJs: normalizeHashedName(sharedJs),
+    pageJs: normalizeHashedName(pageJs),
+  };
+}
+
+function normalizeHashedPath(relativePath) {
+  return relativePath
+    .replace(/app-[a-z0-9]+\.js$/i, 'app-[hash].js')
+    .replace(/app-[a-z0-9]+\.js\.(br|gz)$/i, 'app-[hash].js.$1')
+    .replace(/index-[a-z0-9]+\.js$/i, 'index-[hash].js')
+    .replace(/index-[a-z0-9]+\.js\.(br|gz)$/i, 'index-[hash].js.$1');
+}
+
+function normalizeHashedName(fileName) {
+  return normalizeHashedPath(fileName ?? '');
+}
+
+async function runWithNodeProvider(workspace) {
+  const buildResult = await frontendProvider.build({
+    workspaceRoot: workspace,
+    env: { WEBSTIR_MODULE_MODE: 'build' },
+    incremental: false,
+  });
+  const publishResult = await frontendProvider.build({
+    workspaceRoot: workspace,
+    env: { WEBSTIR_MODULE_MODE: 'publish' },
+    incremental: false,
+  });
+
+  return await snapshotWorkspace(
+    workspace,
+    publishResult.manifest.entryPoints.length > 0
+      ? publishResult.manifest.entryPoints
+      : buildResult.manifest.entryPoints,
+  );
+}
+
+async function runWithBunProvider(workspace) {
+  const packageRoot = getPackageRoot();
+  const moduleUrl = pathToFileURL(path.join(packageRoot, 'dist', 'index.js')).href;
+  const script = `
+const workspace = process.argv[1];
+const { frontendProvider } = await import(${JSON.stringify(moduleUrl)});
+const buildResult = await frontendProvider.build({
+  workspaceRoot: workspace,
+  env: { WEBSTIR_MODULE_MODE: 'build', WEBSTIR_FRONTEND_BUNDLER: 'bun' },
+  incremental: false
+});
+const publishResult = await frontendProvider.build({
+  workspaceRoot: workspace,
+  env: { WEBSTIR_MODULE_MODE: 'publish', WEBSTIR_FRONTEND_BUNDLER: 'bun' },
+  incremental: false
+});
+const payload = {
+  entryPoints: publishResult.manifest.entryPoints.length > 0
+    ? publishResult.manifest.entryPoints
+    : buildResult.manifest.entryPoints
+};
+console.log('__RESULT__' + JSON.stringify(payload));
+`;
+
+  const child = spawn('bun', ['--eval', script, workspace], {
+    cwd: packageRoot,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: process.env,
+  });
+
+  let stdout = '';
+  let stderr = '';
+  child.stdout.setEncoding('utf8');
+  child.stderr.setEncoding('utf8');
+  child.stdout.on('data', (chunk) => {
+    stdout += chunk;
+  });
+  child.stderr.on('data', (chunk) => {
+    stderr += chunk;
+  });
+
+  const exitCode = await new Promise((resolve, reject) => {
+    child.once('error', reject);
+    child.once('close', resolve);
+  });
+
+  const resultLine = stdout
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter((line) => line.startsWith('__RESULT__'))
+    .at(-1);
+
+  if (exitCode !== 0 || !resultLine) {
+    throw new Error(
+      `bun frontend parity harness failed (exit=${exitCode ?? 'null'})\nstdout:\n${stdout}\nstderr:\n${stderr}`,
+    );
+  }
+
+  const payload = JSON.parse(resultLine.slice('__RESULT__'.length));
+  return await snapshotWorkspace(workspace, payload.entryPoints ?? []);
+}
+
+async function compareBundlerSnapshots() {
+  const esbuildWorkspace = await createWorkspace('webstir-frontend-esbuild-');
+  const bunWorkspace = await createWorkspace('webstir-frontend-bun-');
+
+  const esbuildSnapshot = await runWithNodeProvider(esbuildWorkspace);
+  const bunSnapshot = await runWithBunProvider(bunWorkspace);
+
+  return { esbuildSnapshot, bunSnapshot };
+}
+
+test('build mode Bun bundler preserves frontend build output shape', async () => {
+  const { esbuildSnapshot, bunSnapshot } = await compareBundlerSnapshots();
+
+  assert.deepEqual(
+    bunSnapshot.entryPoints,
+    esbuildSnapshot.entryPoints,
+    'build manifest entry points should stay aligned',
+  );
+  assert.deepEqual(
+    bunSnapshot.buildFiles,
+    esbuildSnapshot.buildFiles,
+    'build/frontend output shape should stay aligned',
+  );
+});
+
+test('publish mode Bun bundler preserves frontend filename/hash resolution parity', async () => {
+  const { esbuildSnapshot, bunSnapshot } = await compareBundlerSnapshots();
+
+  assert.deepEqual(
+    bunSnapshot.distFiles,
+    esbuildSnapshot.distFiles,
+    'dist/frontend output shape should stay aligned',
+  );
+  assert.equal(
+    bunSnapshot.sharedJs,
+    esbuildSnapshot.sharedJs,
+    'shared app bundle name should keep the same hashed shape',
+  );
+  assert.equal(
+    bunSnapshot.pageJs,
+    esbuildSnapshot.pageJs,
+    'page bundle name should keep the same hashed shape',
+  );
+});

package/tests/cli.contract.test.js

@@ -0,0 +1,13 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+test('frontend cli is emitted with a Bun shebang', async () => {
+  const here = path.dirname(fileURLToPath(import.meta.url));
+  const cliPath = path.join(here, '..', 'dist', 'cli.js');
+  const source = await fs.readFile(cliPath, 'utf8');
+
+  assert.match(source, /^#!\/usr\/bin\/env bun/m);
+});