git-viewer 9.0.0 → 10.0.0

package/dist/entry.bundled.js

@@ -86,6 +86,8 @@ function createContainer(target, options) {
     }
   };
 }
+var TypedEventTarget = class extends EventTarget {
+};
 var interactions = /* @__PURE__ */ new Map();
 var initializedTargets = /* @__PURE__ */ new WeakMap();
 function defaultOnError(error) {
@@ -1589,74 +1591,54 @@ function jsx(type, props, key) {
 }
 
 // entry.tsx
-var state = {
-  refs: null,
-  commits: [],
-  maxLane: 0,
-  selectedCommit: null,
-  diff: null,
-  filter: "all",
-  search: "",
-  loading: true,
-  fullscreenDiff: false
-};
-var updateApp;
-async function fetchRefs() {
-  let res = await fetch("/api/refs");
+async function fetchRefs(signal) {
+  let res = await fetch("/api/refs", { signal });
   return res.json();
 }
-async function fetchCommits(ref, search) {
+async function fetchCommits(ref, search, signal) {
   let params = new URLSearchParams();
   if (ref) params.set("ref", ref);
   if (search) params.set("search", search);
-  let res = await fetch(`/api/commits?${params}`);
+  let res = await fetch(`/api/commits?${params}`, { signal });
   let data = await res.json();
   return { commits: data.commits, maxLane: data.maxLane };
 }
-async function fetchDiff(sha) {
-  let res = await fetch(`/api/diff/${sha}`);
+async function fetchDiff(sha, signal) {
+  let res = await fetch(`/api/diff/${sha}`, { signal });
   return res.json();
 }
-async function setFilter(filter) {
-  state.filter = filter;
-  state.loading = true;
-  updateApp();
-  let ref = filter === "all" ? "all" : filter === "local" ? state.refs?.currentBranch : filter;
-  let result = await fetchCommits(ref, state.search);
-  state.commits = result.commits;
-  state.maxLane = result.maxLane;
-  state.loading = false;
-  updateApp();
-}
-async function setSearch(search) {
-  state.search = search;
-  state.loading = true;
-  updateApp();
-  let ref = state.filter === "all" ? "all" : state.filter === "local" ? state.refs?.currentBranch : state.filter;
-  let result = await fetchCommits(ref, search);
-  state.commits = result.commits;
-  state.maxLane = result.maxLane;
-  state.loading = false;
-  updateApp();
-}
-async function selectCommit(commit) {
-  state.selectedCommit = commit;
-  state.diff = null;
-  updateApp();
-  state.diff = await fetchDiff(commit.sha);
-  updateApp();
-}
-function toggleFullscreenDiff(open) {
-  if (!document.startViewTransition) {
-    state.fullscreenDiff = open;
-    updateApp();
-    return;
+var AppStore = class extends TypedEventTarget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "refs", null);
+    __publicField(this, "filter", "all");
+    __publicField(this, "search", "");
+    __publicField(this, "selectedCommit", null);
+    __publicField(this, "fullscreenDiff", false);
+  }
+  setRefs(refs) {
+    this.refs = refs;
+    this.dispatchEvent(new Event("refs"));
+  }
+  setFilter(filter) {
+    this.filter = filter;
+    this.dispatchEvent(new Event("filter"));
+  }
+  setSearch(search) {
+    this.search = search;
+    this.dispatchEvent(new Event("filter"));
+  }
+  selectCommit(commit) {
+    this.selectedCommit = commit;
+    this.dispatchEvent(new Event("selectedCommit"));
+  }
+  toggleFullscreenDiff(open) {
+    document.startViewTransition(() => {
+      this.fullscreenDiff = open;
+      this.dispatchEvent(new Event("fullscreenDiff"));
+    });
   }
-  document.startViewTransition(() => {
-    state.fullscreenDiff = open;
-    updateApp();
-  });
-}
+};
 var colors = {
   bg: "#ffffff",
   bgLight: "#f6f8fa",
@@ -1688,17 +1670,11 @@ var graphColors = [
   // dark blue
 ];
 function App(handle) {
-  updateApp = () => handle.update();
-  handle.queueTask(async () => {
-    let [refs, commitsResult] = await Promise.all([
-      fetchRefs(),
-      fetchCommits("all")
-    ]);
-    state.refs = refs;
-    state.commits = commitsResult.commits;
-    state.maxLane = commitsResult.maxLane;
-    state.loading = false;
-    handle.update();
+  let store = new AppStore();
+  handle.context.set(store);
+  handle.queueTask(async (signal) => {
+    let refs = await fetchRefs(signal);
+    store.setRefs(refs);
   });
   return () => /* @__PURE__ */ jsx(
     "div",
@@ -1718,7 +1694,11 @@ function App(handle) {
     }
   );
 }
-function Sidebar() {
+function Sidebar(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    refs: () => handle.update()
+  });
   return () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1743,9 +1723,9 @@ function Sidebar() {
             children: "Git Tree Viewer"
           }
         ),
-        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: state.refs && /* @__PURE__ */ jsx(Fragment, { children: [
-          /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: state.refs.local }),
-          Object.entries(state.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "8px 0" }, children: store.refs && /* @__PURE__ */ jsx(Fragment, { children: [
+          /* @__PURE__ */ jsx(RefSection, { title: "LOCAL", nodes: store.refs.local }),
+          Object.entries(store.refs.remotes).map(([remote, nodes]) => /* @__PURE__ */ jsx(
             RefSection,
             {
               title: remote.toUpperCase(),
@@ -1791,7 +1771,11 @@ function RefSection(handle) {
   ] });
 }
 function RefNodeItem(handle) {
+  let store = handle.context.get(App);
   let expanded = true;
+  handle.on(store, {
+    filter: () => handle.update()
+  });
   return ({ node, depth }) => {
     let paddingLeft = 12 + depth * 12;
     if (node.type === "folder") {
@@ -1825,7 +1809,7 @@ function RefNodeItem(handle) {
         expanded && node.children.map((child) => /* @__PURE__ */ jsx(RefNodeItem, { node: child, depth: depth + 1 }, child.name))
       ] });
     }
-    let isSelected = state.filter === node.fullName;
+    let isSelected = store.filter === node.fullName;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -1843,7 +1827,7 @@ function RefNodeItem(handle) {
             background: isSelected ? colors.accentDim : colors.bgLighter
           }
         },
-        on: { click: () => setFilter(node.fullName) },
+        on: { click: () => store.setFilter(node.fullName) },
         children: [
           node.current && /* @__PURE__ */ jsx("span", { css: { fontSize: "8px", marginRight: "4px" }, children: "\u25CF" }),
           node.name
@@ -1869,12 +1853,27 @@ function MainPanel() {
     }
   );
 }
-function CommitList() {
-  let searchTimeout = null;
-  function handleSearch(value) {
-    if (searchTimeout) clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => setSearch(value), 300);
+function CommitList(handle) {
+  let store = handle.context.get(App);
+  let commits = [];
+  let loading = true;
+  async function loadCommits(signal) {
+    loading = true;
+    handle.update();
+    let ref = store.filter === "all" ? "all" : store.filter === "local" ? store.refs?.currentBranch : store.filter;
+    let result = await fetchCommits(ref, store.search, signal);
+    commits = result.commits;
+    loading = false;
+    handle.update();
   }
+  handle.on(store, {
+    refs(_, signal) {
+      loadCommits(signal);
+    },
+    filter(_, signal) {
+      loadCommits(signal);
+    }
+  });
   return () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1900,11 +1899,11 @@ function CommitList() {
             children: [
               /* @__PURE__ */ jsx(FilterButton, { label: "All", filter: "all" }),
               /* @__PURE__ */ jsx(FilterButton, { label: "Local", filter: "local" }),
-              state.refs && /* @__PURE__ */ jsx(
+              store.refs && /* @__PURE__ */ jsx(
                 FilterButton,
                 {
-                  label: state.refs.currentBranch,
-                  filter: state.refs.currentBranch
+                  label: store.refs.currentBranch,
+                  filter: store.refs.currentBranch
                 }
               ),
               /* @__PURE__ */ jsx("div", { css: { flex: 1 } }),
@@ -1925,14 +1924,14 @@ function CommitList() {
                     "&::placeholder": { color: colors.textMuted }
                   },
                   on: {
-                    input: (e) => handleSearch(e.target.value)
+                    input: (e) => store.setSearch(e.currentTarget.value)
                   }
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.loading ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: loading && commits.length === 0 ? /* @__PURE__ */ jsx(
           "div",
           {
             css: {
@@ -1976,7 +1975,7 @@ function CommitList() {
                 /* @__PURE__ */ jsx("th", { css: { width: "150px" }, children: "Date" }),
                 /* @__PURE__ */ jsx("th", { css: { width: "80px" }, children: "SHA" })
               ] }) }),
-              /* @__PURE__ */ jsx("tbody", { children: state.commits.map((commit) => /* @__PURE__ */ jsx(CommitRow, { commit }, commit.sha)) })
+              /* @__PURE__ */ jsx("tbody", { children: commits.map((commit) => /* @__PURE__ */ jsx(CommitRow, { commit }, commit.sha)) })
             ]
           }
         ) })
@@ -1984,9 +1983,13 @@ function CommitList() {
     }
   );
 }
-function FilterButton() {
+function FilterButton(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    filter: () => handle.update()
+  });
   return ({ label, filter }) => {
-    let isActive = state.filter === filter;
+    let isActive = store.filter === filter;
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -2000,15 +2003,19 @@ function FilterButton() {
           cursor: "pointer",
           "&:hover": { borderColor: colors.accent }
         },
-        on: { click: () => setFilter(filter) },
+        on: { click: () => store.setFilter(filter) },
         children: label
       }
     );
   };
 }
-function CommitRow() {
+function CommitRow(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    selectedCommit: () => handle.update()
+  });
   return ({ commit }) => {
-    let isSelected = state.selectedCommit?.sha === commit.sha;
+    let isSelected = store.selectedCommit?.sha === commit.sha;
     let { graph } = commit;
     let maxUsedLane = graph.lane;
     for (let line of graph.lines) {
@@ -2023,7 +2030,7 @@ function CommitRow() {
           cursor: "pointer",
           background: isSelected ? colors.accentDim : "transparent"
         },
-        on: { click: () => selectCommit(commit) },
+        on: { click: () => store.selectCommit(commit) },
         children: [
           /* @__PURE__ */ jsx("td", { css: { display: "flex", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx(
@@ -2132,8 +2139,26 @@ function CommitRow() {
     );
   };
 }
-function DiffPanel() {
+function DiffPanel(handle) {
+  let store = handle.context.get(App);
+  let diff = null;
   let diffContentRef;
+  handle.on(store, {
+    async selectedCommit(_, signal) {
+      if (!store.selectedCommit) {
+        diff = null;
+        handle.update();
+        return;
+      }
+      diff = null;
+      handle.update();
+      diff = await fetchDiff(store.selectedCommit.sha, signal);
+      handle.update();
+    },
+    fullscreenDiff() {
+      handle.update();
+    }
+  });
   function scrollToFile(path) {
     if (!diffContentRef || !path) return;
     let fileHeaders = diffContentRef.querySelectorAll(".d2h-file-header");
@@ -2146,8 +2171,8 @@ function DiffPanel() {
     }
   }
   return () => {
-    let isFullscreen = state.fullscreenDiff;
-    if (!state.selectedCommit) {
+    let isFullscreen = store.fullscreenDiff;
+    if (!store.selectedCommit) {
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -2196,23 +2221,23 @@ function DiffPanel() {
               },
               children: [
                 /* @__PURE__ */ jsx("div", { css: { flex: 1, minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: state.selectedCommit.subject }),
+                  /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: store.selectedCommit.subject }),
                   /* @__PURE__ */ jsx("div", { css: { fontSize: "12px", color: colors.textMuted }, children: [
-                    /* @__PURE__ */ jsx("span", { children: state.selectedCommit.author }),
+                    /* @__PURE__ */ jsx("span", { children: store.selectedCommit.author }),
                     /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                    /* @__PURE__ */ jsx("span", { children: state.selectedCommit.date }),
+                    /* @__PURE__ */ jsx("span", { children: store.selectedCommit.date }),
                     /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                    /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: state.selectedCommit.shortSha }),
-                    state.diff && /* @__PURE__ */ jsx(Fragment, { children: [
+                    /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: store.selectedCommit.shortSha }),
+                    diff && /* @__PURE__ */ jsx(Fragment, { children: [
                       /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
                       /* @__PURE__ */ jsx("span", { children: [
-                        state.diff.files.length,
+                        diff.files.length,
                         " file",
-                        state.diff.files.length !== 1 ? "s" : ""
+                        diff.files.length !== 1 ? "s" : ""
                       ] })
                     ] })
                   ] }),
-                  state.selectedCommit.body && /* @__PURE__ */ jsx(
+                  store.selectedCommit.body && /* @__PURE__ */ jsx(
                     "div",
                     {
                       css: {
@@ -2221,11 +2246,11 @@ function DiffPanel() {
                         fontSize: "12px",
                         lineHeight: "1.4"
                       },
-                      children: state.selectedCommit.body
+                      children: store.selectedCommit.body
                     }
                   )
                 ] }),
-                state.diff && /* @__PURE__ */ jsx(
+                diff && /* @__PURE__ */ jsx(
                   "button",
                   {
                     css: {
@@ -2245,7 +2270,7 @@ function DiffPanel() {
                         borderColor: colors.accent
                       }
                     },
-                    on: { click: () => toggleFullscreenDiff(!isFullscreen) },
+                    on: { click: () => store.toggleFullscreenDiff(!isFullscreen) },
                     children: isFullscreen ? /* @__PURE__ */ jsx(Fragment, { children: [
                       /* @__PURE__ */ jsx(
                         "svg",
@@ -2281,7 +2306,7 @@ function DiffPanel() {
             }
           ),
           /* @__PURE__ */ jsx("div", { css: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-            state.diff && state.diff.files.length > 0 && /* @__PURE__ */ jsx(
+            diff && diff.files.length > 0 && /* @__PURE__ */ jsx(
               "div",
               {
                 css: {
@@ -2307,7 +2332,7 @@ function DiffPanel() {
                       children: "Changed Files"
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "4px 0" }, children: state.diff.files.map((file) => /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "4px 0" }, children: diff.files.map((file) => /* @__PURE__ */ jsx(
                     FileListItem,
                     {
                       file,
@@ -2318,7 +2343,7 @@ function DiffPanel() {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.diff ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: diff ? /* @__PURE__ */ jsx(
               "section",
               {
                 connect: (node) => diffContentRef = node,
@@ -2348,7 +2373,7 @@ function DiffPanel() {
                   },
                   "& .d2h-diff-tbody": { position: "relative" }
                 },
-                innerHTML: state.diff.diffHtml
+                innerHTML: diff.diffHtml
               }
             ) : /* @__PURE__ */ jsx(
               "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-viewer",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "Visual git log viewer with branch graph and diff display",
   "repository": {
     "type": "git",