perf: memoize filetree computation (#490)

Jacky Zhao

2023-09-20 48452231d5fcd14ef218928bde9ae7e5bc745f4a

 quartz/components/Explorer.tsx

@@ -4,6 +4,7 @@
// @ts-ignore
import script from "./scripts/explorer.inline"
import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
import { QuartzPluginData } from "../plugins/vfile"

// Options interface defined in `ExplorerNode` to avoid circular dependency
const defaultOptions = {
@@ -27,12 +28,17 @@
} satisfies Options

export default ((userOpts?: Partial<Options>) => {
  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
    // Parse config
    const opts: Options = { ...defaultOptions, ...userOpts }

  // memoized
  let fileTree: FileNode
  let jsonTree: string

  function constructFileTree(allFiles: QuartzPluginData[]) {
    if (!fileTree) {
    // Construct tree from allFiles
    const fileTree = new FileNode("")
      fileTree = new FileNode("")
    allFiles.forEach((file) => fileTree.add(file, 1))

    /**
@@ -68,8 +74,12 @@
    const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")

    // Stringify to pass json tree as data attribute ([data-tree])
    const jsonTree = JSON.stringify(folders)
      jsonTree = JSON.stringify(folders)
    }
  }

  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
    constructFileTree(allFiles)
    return (
      <div class={`explorer ${displayClass}`}>
        <button