perf: memoize filetree computation (#490)

* perf: memoize filetree computation

* format

* var -> let

quartz/components/Explorer.tsx

@@ -4,6 +4,7 @@ import explorerStyle from "./styles/explorer.scss"
 // @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 @@ const defaultOptions = {
 } 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 @@ export default ((userOpts?: Partial<Options>) => {
       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