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

Jacky Zhao

2024-09-20 9cefcd0dd1a503c727c8bbb2deb1b631329b3a42

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

This reverts commit 16a9caa555a2d63b7ff8af0731fbfd3231d6225c.

 quartz/components/Explorer.tsx

@@ -7,7 +7,6 @@
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 @@
  // memoized
  let fileTree: FileNode
  let jsonTree: string
  let component: VNode
  let lastBuildId: string = ""

  function constructFileTree(allFiles: QuartzPluginData[]) {
@@ -84,8 +82,9 @@
    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 @@
          </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 @@
      )
    }

    return component
  }

  Explorer.css = explorerStyle
  Explorer.afterDOMLoaded = script
  return Explorer

 quartz/components/ExplorerNode.tsx

@@ -224,10 +224,15 @@
              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>