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

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,9 +84,8 @@ export default ((userOpts?: Partial<Options>) => {
     if (ctx.buildId !== lastBuildId) {
       lastBuildId = ctx.buildId
       constructFileTree(allFiles)
-    }
-
-    return (
+      const tree = ExplorerNode({ node: fileTree, opts, fileData })
+      component = (
         <div class={classNames(displayClass, "explorer")}>
           <button
             type="button"
@@ -114,7 +115,7 @@ export default ((userOpts?: Partial<Options>) => {
           </button>
           <div id="explorer-content">
             <ul class="overflow" id="explorer-ul">
-            <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
+              {tree}
               <li id="explorer-end" />
             </ul>
           </div>
@@ -122,6 +123,9 @@ export default ((userOpts?: Partial<Options>) => {
       )
     }
 
+    return component
+  }
+
   Explorer.css = explorerStyle
   Explorer.afterDOMLoaded = script
   return Explorer

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>