@abreen/tada 1.0.0

package/webpack/watch-reachability-state.js

@@ -0,0 +1,273 @@
+const { collectDirectSiteAssetLinks } = require('./reachability');
+
+function cloneSet(values) {
+  return new Set(values || []);
+}
+
+class WatchReachabilityState {
+  constructor({ rootPath = 'index.html', basePath = '/' } = {}) {
+    this.rootPath = rootPath;
+    this.basePath = basePath;
+    this.reset();
+  }
+
+  reset() {
+    this.knownAssets = new Set();
+    this.outgoingBySource = new Map();
+    this.incomingByTarget = new Map();
+    this.reachable = new Set();
+    this.initialized = false;
+  }
+
+  setKnownAssets(assetPaths) {
+    this.knownAssets = cloneSet(assetPaths);
+    this.reachable = new Set(
+      [...this.reachable].filter(assetPath => this.knownAssets.has(assetPath)),
+    );
+
+    const nextOutgoingBySource = new Map();
+    for (const [sourcePath, targets] of this.outgoingBySource) {
+      if (!this.knownAssets.has(sourcePath)) {
+        continue;
+      }
+
+      nextOutgoingBySource.set(
+        sourcePath,
+        new Set(
+          [...targets].filter(targetPath => this.knownAssets.has(targetPath)),
+        ),
+      );
+    }
+
+    this.outgoingBySource = nextOutgoingBySource;
+    this.rebuildIncomingByTarget();
+  }
+
+  rebuild(readHtmlForAsset) {
+    if (!this.knownAssets.has(this.rootPath)) {
+      throw new Error(`Pagefind reachability root not found: ${this.rootPath}`);
+    }
+
+    this.outgoingBySource = new Map();
+    this.incomingByTarget = new Map();
+    this.reachable = new Set();
+
+    const knownAssetPaths = [...this.knownAssets].sort();
+    for (const sourcePath of knownAssetPaths) {
+      const outgoingPaths = this.readOutgoingPaths(
+        sourcePath,
+        readHtmlForAsset,
+      );
+      this.outgoingBySource.set(sourcePath, outgoingPaths);
+      this.addIncomingEdges(sourcePath, outgoingPaths);
+    }
+
+    this.reachable = this.collectClosure(new Set([this.rootPath]));
+    this.initialized = true;
+  }
+
+  applyIncremental({ changedAssetPaths, removedAssetPaths, readHtmlForAsset }) {
+    if (!this.initialized) {
+      this.rebuild(readHtmlForAsset);
+      return;
+    }
+
+    const normalizedChanged = new Set();
+    for (const assetPath of changedAssetPaths || []) {
+      if (this.knownAssets.has(assetPath)) {
+        normalizedChanged.add(assetPath);
+      }
+    }
+
+    const normalizedRemoved = new Set();
+    for (const assetPath of removedAssetPaths || []) {
+      if (
+        !this.knownAssets.has(assetPath) &&
+        !normalizedChanged.has(assetPath)
+      ) {
+        normalizedRemoved.add(assetPath);
+      }
+    }
+
+    const previouslyReachableRoots = new Set();
+    for (const assetPath of normalizedChanged) {
+      if (this.reachable.has(assetPath)) {
+        previouslyReachableRoots.add(assetPath);
+      }
+    }
+    for (const assetPath of normalizedRemoved) {
+      if (this.reachable.has(assetPath)) {
+        previouslyReachableRoots.add(assetPath);
+      }
+    }
+
+    const oldAffectedClosure = this.collectClosure(previouslyReachableRoots);
+
+    for (const assetPath of normalizedRemoved) {
+      this.removeAsset(assetPath);
+    }
+
+    const changedAssetList = [...normalizedChanged].sort();
+    for (const assetPath of changedAssetList) {
+      const outgoingPaths = this.readOutgoingPaths(assetPath, readHtmlForAsset);
+      this.replaceOutgoing(assetPath, outgoingPaths);
+    }
+
+    const stillKnownRoots = new Set(
+      [...previouslyReachableRoots].filter(assetPath =>
+        this.knownAssets.has(assetPath),
+      ),
+    );
+    const newAffectedClosure = this.collectClosure(stillKnownRoots);
+    const affected = new Set([...oldAffectedClosure, ...newAffectedClosure]);
+
+    if (affected.size === 0) {
+      this.initialized = true;
+      return;
+    }
+
+    for (const assetPath of affected) {
+      this.reachable.delete(assetPath);
+    }
+
+    const seedPaths = new Set();
+    for (const assetPath of stillKnownRoots) {
+      if (affected.has(assetPath)) {
+        seedPaths.add(assetPath);
+      }
+    }
+
+    if (this.knownAssets.has(this.rootPath) && affected.has(this.rootPath)) {
+      seedPaths.add(this.rootPath);
+    }
+
+    for (const assetPath of affected) {
+      const incomingPaths = this.incomingByTarget.get(assetPath);
+      if (!incomingPaths) {
+        continue;
+      }
+
+      for (const sourcePath of incomingPaths) {
+        if (this.reachable.has(sourcePath) && !affected.has(sourcePath)) {
+          seedPaths.add(assetPath);
+          break;
+        }
+      }
+    }
+
+    const restoredReachable = this.collectClosure(seedPaths, affected);
+    for (const assetPath of restoredReachable) {
+      this.reachable.add(assetPath);
+    }
+
+    this.initialized = true;
+  }
+
+  getReachablePaths() {
+    return [...this.reachable].sort();
+  }
+
+  readOutgoingPaths(sourcePath, readHtmlForAsset) {
+    if (!this.knownAssets.has(sourcePath)) {
+      return new Set();
+    }
+
+    const html = readHtmlForAsset(sourcePath);
+    const { htmlAssetPaths } = collectDirectSiteAssetLinks({
+      html,
+      fromAssetPath: sourcePath,
+      knownAssets: this.knownAssets,
+      basePath: this.basePath,
+    });
+    return new Set(htmlAssetPaths);
+  }
+
+  addIncomingEdges(sourcePath, outgoingPaths) {
+    for (const targetPath of outgoingPaths) {
+      let incomingPaths = this.incomingByTarget.get(targetPath);
+      if (!incomingPaths) {
+        incomingPaths = new Set();
+        this.incomingByTarget.set(targetPath, incomingPaths);
+      }
+      incomingPaths.add(sourcePath);
+    }
+  }
+
+  rebuildIncomingByTarget() {
+    this.incomingByTarget = new Map();
+    for (const [sourcePath, outgoingPaths] of this.outgoingBySource) {
+      this.addIncomingEdges(sourcePath, outgoingPaths);
+    }
+  }
+
+  removeOutgoingEdges(sourcePath) {
+    const outgoingPaths = this.outgoingBySource.get(sourcePath);
+    if (!outgoingPaths) {
+      return;
+    }
+
+    for (const targetPath of outgoingPaths) {
+      const incomingPaths = this.incomingByTarget.get(targetPath);
+      if (!incomingPaths) {
+        continue;
+      }
+
+      incomingPaths.delete(sourcePath);
+      if (incomingPaths.size === 0) {
+        this.incomingByTarget.delete(targetPath);
+      }
+    }
+  }
+
+  replaceOutgoing(sourcePath, outgoingPaths) {
+    this.removeOutgoingEdges(sourcePath);
+    if (!this.knownAssets.has(sourcePath)) {
+      this.outgoingBySource.delete(sourcePath);
+      return;
+    }
+
+    this.outgoingBySource.set(sourcePath, outgoingPaths);
+    this.addIncomingEdges(sourcePath, outgoingPaths);
+  }
+
+  removeAsset(assetPath) {
+    this.removeOutgoingEdges(assetPath);
+    this.outgoingBySource.delete(assetPath);
+    this.incomingByTarget.delete(assetPath);
+    this.reachable.delete(assetPath);
+  }
+
+  collectClosure(rootPaths, allowedPaths = null) {
+    const pending = [...rootPaths];
+    const visited = new Set();
+
+    while (pending.length > 0) {
+      const currentPath = pending.pop();
+      if (visited.has(currentPath)) {
+        continue;
+      }
+      if (allowedPaths && !allowedPaths.has(currentPath)) {
+        continue;
+      }
+
+      visited.add(currentPath);
+      const outgoingPaths = this.outgoingBySource.get(currentPath);
+      if (!outgoingPaths) {
+        continue;
+      }
+
+      for (const targetPath of outgoingPaths) {
+        if (allowedPaths && !allowedPaths.has(targetPath)) {
+          continue;
+        }
+        if (!visited.has(targetPath)) {
+          pending.push(targetPath);
+        }
+      }
+    }
+
+    return visited;
+  }
+}
+
+module.exports = WatchReachabilityState;

package/webpack/watch-reachability-state.test.js

@@ -0,0 +1,198 @@
+const { describe, expect, test } = require('bun:test');
+const { collectReachableSiteAssets } = require('./reachability');
+const WatchReachabilityState = require('./watch-reachability-state');
+
+function createReader(htmlByPath) {
+  const calls = [];
+
+  return {
+    calls,
+    read(assetPath) {
+      calls.push(assetPath);
+      if (!htmlByPath.has(assetPath)) {
+        throw new Error(`Missing HTML asset: ${assetPath}`);
+      }
+      return htmlByPath.get(assetPath);
+    },
+  };
+}
+
+function createState(htmlEntries) {
+  const htmlByPath = new Map(Object.entries(htmlEntries));
+  const reader = createReader(htmlByPath);
+  const state = new WatchReachabilityState();
+
+  state.setKnownAssets(new Set(htmlByPath.keys()));
+  state.rebuild(assetPath => reader.read(assetPath));
+
+  return { htmlByPath, reader, state };
+}
+
+describe('WatchReachabilityState', () => {
+  test('rebuild matches full traversal reachability', () => {
+    const htmlByPath = new Map([
+      ['index.html', '<a href="/about/">About</a>'],
+      ['about/index.html', '<a href="/deep/">Deep</a>'],
+      ['deep/index.html', '<p>Deep</p>'],
+      ['orphan/index.html', '<p>Orphan</p>'],
+    ]);
+    const reader = createReader(htmlByPath);
+    const state = new WatchReachabilityState();
+
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.rebuild(assetPath => reader.read(assetPath));
+
+    expect(state.getReachablePaths()).toEqual(
+      collectReachableSiteAssets({ htmlAssetsByPath: htmlByPath })
+        .reachableHtmlPaths,
+    );
+  });
+
+  test('incremental update adds a newly linked subtree', () => {
+    const { htmlByPath, reader, state } = createState({
+      'index.html': '<a href="/about/">About</a>',
+      'about/index.html': '<p>About</p>',
+      'hidden/index.html': '<a href="/bonus/">Bonus</a>',
+      'bonus/index.html': '<p>Bonus</p>',
+    });
+
+    reader.calls.length = 0;
+    htmlByPath.set(
+      'about/index.html',
+      '<a href="/hidden/">Reveal hidden subtree</a>',
+    );
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(['about/index.html']),
+      removedAssetPaths: new Set(),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(reader.calls).toEqual(['about/index.html']);
+    expect(state.getReachablePaths()).toEqual([
+      'about/index.html',
+      'bonus/index.html',
+      'hidden/index.html',
+      'index.html',
+    ]);
+  });
+
+  test('incremental update removes a subtree when its only parent stops linking to it', () => {
+    const { htmlByPath, reader, state } = createState({
+      'index.html': '<a href="/about/">About</a>',
+      'about/index.html': '<a href="/hidden/">Hidden</a>',
+      'hidden/index.html': '<a href="/bonus/">Bonus</a>',
+      'bonus/index.html': '<p>Bonus</p>',
+    });
+
+    reader.calls.length = 0;
+    htmlByPath.set('about/index.html', '<p>About</p>');
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(['about/index.html']),
+      removedAssetPaths: new Set(),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(reader.calls).toEqual(['about/index.html']);
+    expect(state.getReachablePaths()).toEqual([
+      'about/index.html',
+      'index.html',
+    ]);
+  });
+
+  test('removing one of two parents keeps the child reachable', () => {
+    const { htmlByPath, reader, state } = createState({
+      'index.html': '<a href="/about/">About</a><a href="/keep/">Keep</a>',
+      'about/index.html': '<a href="/child/">Child</a>',
+      'keep/index.html': '<a href="/child/">Child</a>',
+      'child/index.html': '<p>Child</p>',
+    });
+
+    htmlByPath.delete('about/index.html');
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(),
+      removedAssetPaths: new Set(['about/index.html']),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(state.getReachablePaths()).toEqual([
+      'child/index.html',
+      'index.html',
+      'keep/index.html',
+    ]);
+  });
+
+  test('a supported cycle remains reachable and drops once external support is removed', () => {
+    const { htmlByPath, reader, state } = createState({
+      'index.html': '<a href="/support/">Support</a>',
+      'support/index.html': '<a href="/a/">A</a>',
+      'a/index.html': '<a href="/b/">B</a>',
+      'b/index.html': '<a href="/a/">A</a>',
+    });
+
+    expect(state.getReachablePaths()).toEqual([
+      'a/index.html',
+      'b/index.html',
+      'index.html',
+      'support/index.html',
+    ]);
+
+    reader.calls.length = 0;
+    htmlByPath.set('support/index.html', '<p>No links</p>');
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(['support/index.html']),
+      removedAssetPaths: new Set(),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(reader.calls).toEqual(['support/index.html']);
+    expect(state.getReachablePaths()).toEqual([
+      'index.html',
+      'support/index.html',
+    ]);
+  });
+
+  test('changing an unreachable page updates its graph without reparsing the whole site', () => {
+    const { htmlByPath, reader, state } = createState({
+      'index.html': '<a href="/about/">About</a>',
+      'about/index.html': '<p>About</p>',
+      'hidden/index.html': '<p>Hidden</p>',
+      'bonus/index.html': '<p>Bonus</p>',
+    });
+
+    reader.calls.length = 0;
+    htmlByPath.set('hidden/index.html', '<a href="/bonus/">Bonus</a>');
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(['hidden/index.html']),
+      removedAssetPaths: new Set(),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(reader.calls).toEqual(['hidden/index.html']);
+    expect(state.getReachablePaths()).toEqual([
+      'about/index.html',
+      'index.html',
+    ]);
+
+    reader.calls.length = 0;
+    htmlByPath.set('about/index.html', '<a href="/hidden/">Hidden</a>');
+    state.setKnownAssets(new Set(htmlByPath.keys()));
+    state.applyIncremental({
+      changedAssetPaths: new Set(['about/index.html']),
+      removedAssetPaths: new Set(),
+      readHtmlForAsset: assetPath => reader.read(assetPath),
+    });
+
+    expect(reader.calls).toEqual(['about/index.html']);
+    expect(state.getReachablePaths()).toEqual([
+      'about/index.html',
+      'bonus/index.html',
+      'hidden/index.html',
+      'index.html',
+    ]);
+  });
+});

package/webpack/watch-reload-client.js

@@ -0,0 +1,54 @@
+(function () {
+  const style = document.createElement('style');
+  style.textContent = [
+    '@keyframes tada-shimmer {',
+    '  0%, 25% { background-position: 200% 0; }',
+    '  100% { background-position: -200% 0; }',
+    '}',
+    'header.tada-rebuilding {',
+    '  background-image: linear-gradient(',
+    '    90deg,',
+    '    transparent 25%,',
+    '    var(--bg2-color) 50%,',
+    '    transparent 75%',
+    '  ) !important;',
+    '  background-color: var(--bg-color-translucent) !important;',
+    '  background-size: 200% 100% !important;',
+    '  background-repeat: no-repeat !important;',
+    '  animation: tada-shimmer 2s ease-in-out infinite !important;',
+    '}',
+    'body.tada-rebuilding-cursor,',
+    'body.tada-rebuilding-cursor * {',
+    '  cursor: wait !important;',
+    '}',
+  ].join('\n');
+  document.head.appendChild(style);
+
+  const ws = new WebSocket('ws://localhost:35729');
+
+  ws.onopen = () => {
+    console.log('[watch-reload] connected to watcher');
+  };
+
+  ws.onmessage = event => {
+    if (event.data === 'rebuilding') {
+      console.log('[watch-reload] Rebuilding...');
+      const header = document.querySelector('header');
+      if (header) {
+        header.classList.add('tada-rebuilding');
+      }
+      document.body.classList.add('tada-rebuilding-cursor');
+    } else if (event.data === 'reload') {
+      console.log('[watch-reload] Reloading page...');
+      window.location.reload();
+    }
+  };
+
+  ws.onclose = () => {
+    console.warn('[watch-reload] connection closed');
+  };
+
+  ws.onerror = err => {
+    console.error('[watch-reload] error:', err);
+  };
+})();

package/webpack/watch.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+const webpack = require('webpack');
+const { fork } = require('child_process');
+const path = require('path');
+const WebSocket = require('ws');
+const { B, G } = require('./colors');
+const { makeLogger, getFlair } = require('./log');
+const getConfig = require('./config.dev');
+const ContentWatchPlugin = require('./content-watch-plugin');
+const { getContentDir } = require('./util');
+
+const WEBSOCKET_PORT = 35729;
+
+const log = makeLogger(__filename);
+const wslog = makeLogger('WebSocket');
+const contentDir = getContentDir();
+
+function broadcast(msg) {
+  if (wss == null || !webSocketsReady) {
+    return;
+  }
+  wslog.debug(`Broadcasting "${msg}" to WebSocket clients...`);
+  wss.clients.forEach(client => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(msg);
+    }
+  });
+}
+
+function serve() {
+  const child = fork(path.join(__dirname, 'serve.js'), { stdio: 'inherit' });
+  child.on('close', code => {
+    webServerReady = false;
+    log.error`Web server exited with code ${code}`;
+    process.exit(2);
+  });
+  child.on('error', err => {
+    webServerReady = false;
+    log.error`Web server failed: ${err.message}`;
+  });
+  child.on('message', msg => {
+    if (msg.ready) {
+      webServerReady = true;
+      clearTimeout(webServerTimeout);
+    }
+  });
+
+  webServerTimeout = setTimeout(() => {
+    if (webServerReady) {
+      return;
+    }
+    log.error`Web server failed to report within 10 seconds, exiting`;
+    process.exit(3);
+  }, 10000);
+}
+
+function toContentMarkdownPath(filePath) {
+  if (!filePath) {
+    return null;
+  }
+  const ext = path.extname(filePath).toLowerCase();
+  if (!['.md', '.markdown'].includes(ext)) {
+    return null;
+  }
+
+  const normalizedContentDir = path.resolve(contentDir) + path.sep;
+  const normalizedFilePath = path.resolve(filePath);
+  if (!normalizedFilePath.startsWith(normalizedContentDir)) {
+    return null;
+  }
+
+  return path
+    .relative(contentDir, normalizedFilePath)
+    .split(path.sep)
+    .join(path.posix.sep);
+}
+
+function logChangedMarkdownFiles(files, { skip = new Set() } = {}) {
+  if (!files) {
+    return;
+  }
+
+  const markdownPaths = [...files]
+    .map(toContentMarkdownPath)
+    .filter(markdownPath => markdownPath && !skip.has(markdownPath))
+    .sort();
+
+  for (const markdownPath of markdownPaths) {
+    log.event`${B`${markdownPath}`} changed, rebuilding...`;
+  }
+}
+
+let webSocketsReady = false;
+let webServerReady = false;
+let webServerTimeout;
+let serveStarted = false;
+let currentWatcher = null;
+
+let wss = null;
+try {
+  wss = new WebSocket.Server({ port: WEBSOCKET_PORT });
+
+  wss.on('connection', conn => {
+    wslog.debug`WebSocket client connected`;
+    conn.on('close', () => {
+      wslog.debug`WebSocket client disconnected`;
+    });
+  });
+
+  wss.on('error', err => {
+    wslog.error`WebSocket server error: ${err.message}`;
+  });
+
+  wss.on('listening', () => {
+    wslog.debug`WebSocket server listening at ws://localhost:${WEBSOCKET_PORT}`;
+    webSocketsReady = true;
+  });
+} catch (err) {
+  wslog.error`Failed to start WebSocket server on port ${WEBSOCKET_PORT}: ${err.message}`;
+}
+
+async function startWatching() {
+  const config = await getConfig({ watchMode: true });
+  const compiler = webpack(config);
+  const loggedInvalidationFiles = new Set();
+
+  compiler.hooks.invalid.tap('WatchChangedFileLog', fileName => {
+    broadcast('rebuilding');
+
+    const markdownPath = toContentMarkdownPath(fileName);
+    if (markdownPath) {
+      loggedInvalidationFiles.add(markdownPath);
+      log.event`${B`${markdownPath}`} changed, rebuilding...`;
+    }
+  });
+
+  currentWatcher = compiler.watch({ aggregateTimeout: 300 }, (err, stats) => {
+    logChangedMarkdownFiles(compiler.modifiedFiles, {
+      skip: loggedInvalidationFiles,
+    });
+    loggedInvalidationFiles.clear();
+
+    if (ContentWatchPlugin.needsRestart()) {
+      ContentWatchPlugin.clearRestart();
+      log.event`Content changed, restarting Webpack compiler...`;
+      currentWatcher.close(() => startWatching());
+      return;
+    }
+
+    if (err) {
+      log.error`Build failed: ${err.message}`;
+    } else if (stats.hasErrors()) {
+      process.stderr.write(stats.toString('errors-only') + '\n');
+      log.error`Build failed`;
+    } else {
+      log.event`${getFlair()}  Webpack build completed ${G`successfully`}`;
+      broadcast('reload');
+    }
+    if (!serveStarted && !err && !stats.hasErrors()) {
+      serveStarted = true;
+      serve();
+    }
+  });
+}
+
+startWatching();