Revert "perf: eagerly compute explorer nodes to avoid re-render in me…

…moized value" This reverts commit 16a9caa555a2d63b7ff8af0731fbfd3231d6225c.
ndrooo · Sep 22, 2024 · d0fdfd2 · d0fdfd2
1 parent bb3ed32
commit d0fdfd2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 44 deletions.
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
@@ -7,7 +7,6 @@ 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 = {
@@ -45,7 +44,6 @@ export default ((userOpts?: Partial<Options>) => {
   // memoized
   let fileTree: FileNode
   let jsonTree: string
-  let component: VNode
   let lastBuildId: string = ""
 
   function constructFileTree(allFiles: QuartzPluginData[]) {
@@ -84,46 +82,44 @@ export default ((userOpts?: Partial<Options>) => {
     if (ctx.buildId !== lastBuildId) {
       lastBuildId = ctx.buildId
       constructFileTree(allFiles)
-      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"}
-          >
-            <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>
-      )
     }
 
-    return component
+    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"
+          >
+            <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>
+        </div>
+      </div>
+    )
   }
 
   Explorer.css = explorerStyle

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