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

This reverts commit 16a9caa555.

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

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>