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

Jacky Zhao

2024-09-16 16a9caa555a2d63b7ff8af0731fbfd3231d6225c

 quartz/components/Explorer.tsx

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

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

    return component
  }

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