perf: eagerly compute explorer nodes to avoid re-render in memoized v…

…alue
hzkonor · Sep 16, 2024 · 16a9caa · 16a9caa
1 parent b1c60b8
commit 16a9caa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 45 deletions.
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
@@ -7,6 +7,7 @@ import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
+import { VNode } from "preact"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
@@ -44,6 +45,7 @@ export default ((userOpts?: Partial<Options>) => {
   // memoized
   let fileTree: FileNode
   let jsonTree: string
+  let component: VNode
   let lastBuildId: string = ""
 
   function constructFileTree(allFiles: QuartzPluginData[]) {
@@ -82,44 +84,46 @@ export default ((userOpts?: Partial<Options>) => {
     if (ctx.buildId !== lastBuildId) {
       lastBuildId = ctx.buildId
       constructFileTree(allFiles)
-    }
-
-    return (
-      <div class={classNames(displayClass, "explorer")}>
-        <button
-          type="button"
-          id="explorer"
-          data-behavior={opts.folderClickBehavior}
-          data-collapsed={opts.folderDefaultState}
-          data-savestate={opts.useSavedState}
-          data-tree={jsonTree}
-          aria-controls="explorer-content"
-          aria-expanded={opts.folderDefaultState === "open"}
-        >
-          <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="5 8 14 8"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="fold"
+      const tree = ExplorerNode({ node: fileTree, opts, fileData })
+      component = (
+        <div class={classNames(displayClass, "explorer")}>
+          <button
+            type="button"
+            id="explorer"
+            data-behavior={opts.folderClickBehavior}
+            data-collapsed={opts.folderDefaultState}
+            data-savestate={opts.useSavedState}
+            data-tree={jsonTree}
+            aria-controls="explorer-content"
+            aria-expanded={opts.folderDefaultState === "open"}
           >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </button>
-        <div id="explorer-content">
-          <ul class="overflow" id="explorer-ul">
-            <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
-            <li id="explorer-end" />
-          </ul>
+            <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="5 8 14 8"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="fold"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+          <div id="explorer-content">
+            <ul class="overflow" id="explorer-ul">
+              {tree}
+              <li id="explorer-end" />
+            </ul>
+          </div>
         </div>
-      </div>
-    )
+      )
+    }
+
+    return component
   }
 
   Explorer.css = explorerStyle

diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
@@ -224,15 +224,10 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
               class="content"
               data-folderul={folderPath}
             >
-              {node.children.map((childNode, i) => (
-                <ExplorerNode
-                  node={childNode}
-                  key={i}
-                  opts={opts}
-                  fullPath={folderPath}
-                  fileData={fileData}
-                />
-              ))}
+              {node.children.map((childNode) =>
+                // eagerly render children so we can memoize properly
+                ExplorerNode({ node: childNode, opts, fileData, fullPath: folderPath }),
+              )}
             </ul>
           </div>
         </li>