mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-29 14:36:22 +00:00
perf: memoize filetree computation (#490)
* perf: memoize filetree computation * format * var -> let
This commit is contained in:
parent
16d33fb771
commit
48452231d5
1 changed files with 45 additions and 35 deletions
|
@ -4,6 +4,7 @@ import explorerStyle from "./styles/explorer.scss"
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import script from "./scripts/explorer.inline"
|
import script from "./scripts/explorer.inline"
|
||||||
import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
|
import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
|
||||||
|
import { QuartzPluginData } from "../plugins/vfile"
|
||||||
|
|
||||||
// Options interface defined in `ExplorerNode` to avoid circular dependency
|
// Options interface defined in `ExplorerNode` to avoid circular dependency
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
|
@ -27,12 +28,17 @@ const defaultOptions = {
|
||||||
} satisfies Options
|
} satisfies Options
|
||||||
|
|
||||||
export default ((userOpts?: Partial<Options>) => {
|
export default ((userOpts?: Partial<Options>) => {
|
||||||
function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
|
|
||||||
// Parse config
|
// Parse config
|
||||||
const opts: Options = { ...defaultOptions, ...userOpts }
|
const opts: Options = { ...defaultOptions, ...userOpts }
|
||||||
|
|
||||||
|
// memoized
|
||||||
|
let fileTree: FileNode
|
||||||
|
let jsonTree: string
|
||||||
|
|
||||||
|
function constructFileTree(allFiles: QuartzPluginData[]) {
|
||||||
|
if (!fileTree) {
|
||||||
// Construct tree from allFiles
|
// Construct tree from allFiles
|
||||||
const fileTree = new FileNode("")
|
fileTree = new FileNode("")
|
||||||
allFiles.forEach((file) => fileTree.add(file, 1))
|
allFiles.forEach((file) => fileTree.add(file, 1))
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -68,8 +74,12 @@ export default ((userOpts?: Partial<Options>) => {
|
||||||
const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
|
const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
|
||||||
|
|
||||||
// Stringify to pass json tree as data attribute ([data-tree])
|
// 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 (
|
return (
|
||||||
<div class={`explorer ${displayClass}`}>
|
<div class={`explorer ${displayClass}`}>
|
||||||
<button
|
<button
|
||||||
|
|
Loading…
Reference in a new issue