@youtyan/code-viewer 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.1.7",
+  "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/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,10 +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';
 
@@ -458,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();
@@ -502,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;