alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2024-11-22 19:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
This reverts commit 16a9caa555.
This commit is contained in:
Jacky Zhao 2024-09-20 15:48:06 -07:00
parent 4aaeb768d8
commit 9cefcd0dd1
2 changed files with 45 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
quartz/components/Explorer.tsx
View file

@ -7,7 +7,6 @@ import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
import { QuartzPluginData } from "../plugins/vfile" import { QuartzPluginData } from "../plugins/vfile"
import { classNames } from "../util/lang" import { classNames } from "../util/lang"
import { i18n } from "../i18n" import { i18n } from "../i18n"
import { VNode } from "preact"
// Options interface defined in `ExplorerNode` to avoid circular dependency // Options interface defined in `ExplorerNode` to avoid circular dependency
const defaultOptions = { const defaultOptions = {
@ -45,7 +44,6 @@ export default ((userOpts?: Partial<Options>) => {
// memoized // memoized
let fileTree: FileNode let fileTree: FileNode
let jsonTree: string let jsonTree: string
let component: VNode
let lastBuildId: string = "" let lastBuildId: string = ""
function constructFileTree(allFiles: QuartzPluginData[]) { function constructFileTree(allFiles: QuartzPluginData[]) {
@ -84,8 +82,9 @@ export default ((userOpts?: Partial<Options>) => {
if (ctx.buildId !== lastBuildId) { if (ctx.buildId !== lastBuildId) {
lastBuildId = ctx.buildId lastBuildId = ctx.buildId
constructFileTree(allFiles) constructFileTree(allFiles)
const tree = ExplorerNode({ node: fileTree, opts, fileData }) }
component = (
return (
<div class={classNames(displayClass, "explorer")}> <div class={classNames(displayClass, "explorer")}>
<button <button
type="button" type="button"
@ -115,7 +114,7 @@ export default ((userOpts?: Partial<Options>) => {
</button> </button>
<div id="explorer-content"> <div id="explorer-content">
<ul class="overflow" id="explorer-ul"> <ul class="overflow" id="explorer-ul">
{tree} <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<li id="explorer-end" /> <li id="explorer-end" />
</ul> </ul>
</div> </div>
@ -123,9 +122,6 @@ export default ((userOpts?: Partial<Options>) => {
) )
} }
return component
}
Explorer.css = explorerStyle Explorer.css = explorerStyle
Explorer.afterDOMLoaded = script Explorer.afterDOMLoaded = script
return Explorer return Explorer

13
quartz/components/ExplorerNode.tsx
View file

@ -224,10 +224,15 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
class="content" class="content"
data-folderul={folderPath} data-folderul={folderPath}
> >
{node.children.map((childNode) => {node.children.map((childNode, i) => (
// eagerly render children so we can memoize properly <ExplorerNode
ExplorerNode({ node: childNode, opts, fileData, fullPath: folderPath }), node={childNode}
)} key={i}
opts={opts}
fullPath={folderPath}
fileData={fileData}
/>
))}
</ul> </ul>
</div> </div>
</li> </li>