@youtyan/code-viewer 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Local browser-based git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -109,6 +109,21 @@
     };
   }
 
+  // web-src/catch-up.ts
+  function shouldCatchUpDiff(route) {
+    return route.screen !== "repo" && !(route.screen === "file" && route.view === "blob");
+  }
+  function createCatchUpGate(now, minIntervalMs) {
+    let lastForceAt = 0;
+    return function shouldRun() {
+      const current = now();
+      if (current - lastForceAt < minIntervalMs)
+        return false;
+      lastForceAt = current;
+      return true;
+    };
+  }
+
   // web-src/routes.ts
   function assertNever(value) {
     throw new Error("unhandled route: " + JSON.stringify(value));
@@ -2686,7 +2701,7 @@
         syncHeaderMenu();
       }).catch(() => setStatus("error"));
     }
-    function load() {
+    function load(options = {}) {
       if (STATE.route.screen === "repo")
         return loadRepo();
       setStatus("refreshing");
@@ -2697,6 +2712,8 @@
         params.set("from", STATE.from);
       if (STATE.to)
         params.set("to", STATE.to);
+      if (options.force)
+        params.set("nocache", "1");
       const url = "/diff.json" + (params.toString() ? "?" + params.toString() : "");
       return trackLoad(fetch(url).then((r) => r.json())).then((data) => {
         renderShell(data);
@@ -3033,24 +3050,30 @@
       }, 350);
     }
     const es = new EventSource("/events");
+    const catchUpGate = createCatchUpGate(() => Date.now(), 1000);
+    let openedOnce = false;
     es.addEventListener("update", () => scheduleSseLoad());
     es.addEventListener("reload", () => location.reload());
     es.addEventListener("error", () => setStatus("error"));
-    es.addEventListener("open", () => setStatus("live"));
-    let assetVersion = null;
-    function pollAssetVersion() {
-      fetch("/_asset_version").then((r) => r.ok ? r.json() : null).then((data) => {
-        if (!data || !data.version)
-          return;
-        if (assetVersion == null) {
-          assetVersion = data.version;
-          return;
-        }
-        if (data.version !== assetVersion)
-          location.reload();
-      }).catch(() => {});
+    es.addEventListener("open", () => {
+      setStatus("live");
+      if (!openedOnce) {
+        openedOnce = true;
+        return;
+      }
+      catchUpDiff();
+    });
+    function catchUpDiff() {
+      if (!shouldCatchUpDiff(STATE.route))
+        return;
+      if (!catchUpGate())
+        return;
+      load({ force: true });
     }
-    pollAssetVersion();
-    setInterval(pollAssetVersion, 1500);
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden)
+        catchUpDiff();
+    });
+    window.addEventListener("focus", catchUpDiff);
   })();
 })();

package/web-src/server/cache.ts

@@ -0,0 +1,13 @@
+// Short enough that a browser reload self-heals stale git data, while still
+// coalescing bursts from one render pass.
+export const CACHE_TTL_MS = 1500;
+
+export type TimedCacheEntry<T> = T & { storedAt: number };
+
+export function cacheFresh<T>(
+  cached: TimedCacheEntry<T> | undefined,
+  now = Date.now(),
+  ttlMs = CACHE_TTL_MS,
+): cached is TimedCacheEntry<T> {
+  return !!cached && now - cached.storedAt <= ttlMs;
+}

package/web-src/server/dev-assets.ts

@@ -0,0 +1,37 @@
+import { basename } from 'node:path';
+
+export type WatchFn = (
+  path: string,
+  options: { persistent?: boolean },
+  listener: (eventType: string, filename: string | Buffer | null) => void,
+) => unknown;
+
+type DevAssetReloadOptions = {
+  enabled: boolean;
+  webRoot: string;
+  watchedFiles: readonly string[];
+  watch: WatchFn;
+  sendReload: () => void;
+  setTimeoutFn?: typeof setTimeout;
+  clearTimeoutFn?: typeof clearTimeout;
+  debounceMs?: number;
+};
+
+export function startDevAssetReload(options: DevAssetReloadOptions): boolean {
+  if (!options.enabled) return false;
+  const watched = new Set(options.watchedFiles);
+  const setTimer = options.setTimeoutFn || setTimeout;
+  const clearTimer = options.clearTimeoutFn || clearTimeout;
+  const debounceMs = options.debounceMs ?? 150;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  options.watch(options.webRoot, { persistent: false }, (_event, filename) => {
+    if (!filename || !watched.has(basename(filename.toString()))) return;
+    if (timer) clearTimer(timer);
+    timer = setTimer(() => {
+      timer = null;
+      options.sendReload();
+    }, debounceMs);
+  });
+  return true;
+}

package/web-src/server/dev.ts

@@ -56,7 +56,12 @@ function startServer() {
   firstStart = false;
   server = Bun.spawn([
     'bun', 'run', 'web-src/server/preview.ts', ...args,
-  ], { cwd: ROOT, stdout: 'inherit', stderr: 'inherit' }) as ChildProcess;
+  ], {
+    cwd: ROOT,
+    stdout: 'inherit',
+    stderr: 'inherit',
+    env: { ...process.env, CODE_VIEWER_DEV: '1' },
+  }) as ChildProcess;
 }
 
 async function restartServer() {

package/web-src/server/preview.ts

@@ -1,9 +1,11 @@
 #!/usr/bin/env bun
 
-import { existsSync, readFileSync, realpathSync, statSync } from 'node:fs';
+import { existsSync, readFileSync, realpathSync, statSync, watch } from 'node:fs';
 import { basename, extname, join, normalize, relative } from 'node:path';
 import { APP_ENTRY_PATHS, SPA_PATHS } from '../routes';
 import type { DiffMeta, FileDiffResponse, FileMeta, FileRangeResponse, RepoTreeResponse } from '../types';
+import { cacheFresh, type TimedCacheEntry } from './cache';
+import { startDevAssetReload } from './dev-assets';
 import * as git from './git';
 import { isSameWorktreeRange } from './range';
 
@@ -24,8 +26,8 @@ let listenPort = 0;
 
 const enc = new TextEncoder();
 const sseClients = new Set<ReadableStreamDefaultController<Uint8Array>>();
-const fileCache = new Map<string, string>();
-const metaCache = new Map<string, { body: string; sig: string }>();
+const fileCache = new Map<string, TimedCacheEntry<{ diffText: string }>>();
+const metaCache = new Map<string, TimedCacheEntry<{ body: string; sig: string }>>();
 
 function parseCli() {
   const rest: string[] = [];
@@ -242,14 +244,14 @@ function handleDiffJson(url: URL) {
       fileCache.clear();
     }
     const body = JSON.stringify(payload);
-    metaCache.set(key, { body, sig });
+    metaCache.set(key, { body, sig, storedAt: Date.now() });
     return new Response(body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
   }
   const cached = metaCache.get(key);
-  if (cached) return new Response(cached.body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
+  if (cacheFresh(cached)) return new Response(cached.body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
   const payload = computePayload(extras, range);
   const body = JSON.stringify(payload);
-  metaCache.set(key, { body, sig: JSON.stringify({ ...payload, generation: undefined }) });
+  metaCache.set(key, { body, sig: JSON.stringify({ ...payload, generation: undefined }), storedAt: Date.now() });
   return new Response(body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
 }
 
@@ -343,9 +345,12 @@ function handleFileDiff(url: URL) {
   const cacheKey = isUntracked
     ? `u\0${path}\0${extras.join('\0')}`
     : `t\0${path}\0${oldPath || ''}\0${[...extras, ...args].join('\0')}`;
-  let diffText = fileCache.get(cacheKey);
+  const cached = fileCache.get(cacheKey);
+  let diffText: string;
   let errText = '';
-  if (!diffText) {
+  if (cacheFresh(cached)) {
+    diffText = cached.diffText;
+  } else {
     if (isUntracked) {
       diffText = git.untrackedFileDiff(extras, path, cwd).stdout || '';
     } else {
@@ -353,7 +358,7 @@ function handleFileDiff(url: URL) {
       diffText = res.stdout || '';
       if (res.code !== 0) errText = res.stderr;
     }
-    fileCache.set(cacheKey, diffText);
+    fileCache.set(cacheKey, { diffText, storedAt: Date.now() });
   }
   const mode = url.searchParams.get('mode') || 'full';
   const truncated = mode === 'preview'
@@ -454,10 +459,6 @@ const server = Bun.serve({
     if (url.pathname === '/file_range') return handleFileRange(url);
     if (url.pathname === '/_file') return handleRawFile(url);
     if (url.pathname === '/_refs') return json(git.refs(cwd));
-    if (url.pathname === '/_asset_version') {
-      const version = Math.max(...WATCHED_ASSET_FILES.map((name) => statSync(join(WEB_ROOT, name)).mtimeMs));
-      return json({ version });
-    }
     if (url.pathname === '/refresh' && req.method === 'POST') {
       generation++;
       fileCache.clear();
@@ -498,5 +499,13 @@ const server = Bun.serve({
   },
 });
 
+startDevAssetReload({
+  enabled: process.env.CODE_VIEWER_DEV === '1',
+  webRoot: WEB_ROOT,
+  watchedFiles: WATCHED_ASSET_FILES,
+  watch,
+  sendReload: () => sendSse('reload'),
+});
+
 console.log(`GDP_LISTEN_URL=http://127.0.0.1:${server.port}/`);
 console.log(`git-diff-preview serving ${cwd}`);

package/web-src/server/runtime.d.ts

@@ -17,6 +17,7 @@ declare const Bun: {
 
 declare const process: {
   argv: string[];
+  env: Record<string, string | undefined>;
   cwd(): string;
   platform: 'darwin' | 'win32' | string;
   on(event: 'SIGINT' | 'SIGTERM', listener: () => void): void;
@@ -34,6 +35,11 @@ declare module 'node:fs' {
   export function readFileSync(path: string, encoding: BufferEncoding): string;
   export function realpathSync(path: string): string;
   export function statSync(path: string): { mtimeMs: number };
+  export function watch(
+    path: string,
+    options: { persistent?: boolean },
+    listener: (eventType: string, filename: string | Buffer | null) => void,
+  ): unknown;
 }
 
 declare module 'node:path' {

package/web-src/types.ts

@@ -86,10 +86,6 @@ export type RefResponse = {
   current?: string;
 };
 
-export type AssetVersionResponse = {
-  version?: number;
-};
-
 declare global {
   interface Window {
     Diff2HtmlUI: any;