From 48452231d5fcd14ef218928bde9ae7e5bc745f4a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 20 Sep 2023 23:09:18 +0000
Subject: [PATCH] perf: memoize filetree computation (#490)
---
docs/features/explorer.md | 37 ++++++++++++++++---------------------
1 files changed, 16 insertions(+), 21 deletions(-)
diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 8a9f506..b0eb12d 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -42,7 +42,7 @@
- Removing table of contents: remove `Component.Explorer()` from `quartz.layout.ts`
- (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
-- Changing `sort`, `filter` and `map` behavior: explained in [[explorer#Advanced customization]]
+- Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
- Component:
- Wrapper (Outer component, generates file tree, etc): `quartz/components/Explorer.tsx`
- Explorer node (recursive, either a folder or a file): `quartz/components/ExplorerNode.tsx`
@@ -57,7 +57,8 @@
```ts title="quartz/components/ExplorerNode.tsx" {2-5}
export class FileNode {
children: FileNode[] // children of current node
- name: string // name of node (only useful for folders)
+ name: string // last part of slug
+ displayName: string // what actually should be displayed in the explorer
file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
depth: number // depth of current node
@@ -72,7 +73,7 @@
Component.Explorer({
sortFn: (a, b) => {
if ((!a.file && !b.file) || (a.file && b.file)) {
- return a.name.localeCompare(b.name)
+ return a.displayName.localeCompare(b.displayName)
}
if (a.file && !b.file) {
return 1
@@ -85,7 +86,7 @@
---
-You can pass your own functions for `sortFn`, `filterFn` and `mapFn`. All functions will be executed in the order provided by the `order` option (see [[explorer#Customization]]). These functions behave similarly to their `Array.prototype` counterpart, except they modify the entire `FileNode` tree in place instead of returning a new one.
+You can pass your own functions for `sortFn`, `filterFn` and `mapFn`. All functions will be executed in the order provided by the `order` option (see [[#Customization]]). These functions behave similarly to their `Array.prototype` counterpart, except they modify the entire `FileNode` tree in place instead of returning a new one.
For more information on how to use `sort`, `filter` and `map`, you can check [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
@@ -120,7 +121,7 @@
Component.Explorer({
sortFn: (a, b) => {
if ((!a.file && !b.file) || (a.file && b.file)) {
- return a.name.localeCompare(b.name)
+ return a.displayName.localeCompare(b.displayName)
}
if (a.file && !b.file) {
return -1
@@ -138,32 +139,26 @@
```ts title="quartz.layout.ts"
Component.Explorer({
mapFn: (node) => {
- node.name = node.name.toUpperCase()
+ node.displayName = node.displayName.toUpperCase()
},
})
```
### Remove list of elements (`filter`)
-Using this example, you can remove elements from your explorer by providing a list of folders/files using the `list` array.
+Using this example, you can remove elements from your explorer by providing an array of folders/files using the `omit` set.
```ts title="quartz.layout.ts"
Component.Explorer({
filterFn: (node) => {
- // list containing names of everything you want to filter out
- const list = ["authoring content", "building your", "tags", "hosting"]
-
- for (let listNodeName of list) {
- if (listNodeName.toLowerCase() === node.name.toLowerCase()) {
- return false // Found a match, so return false to filter out the node
- }
- }
- return true // No match found, so return true to keep the node
+ // set containing names of everything you want to filter out
+ const omit = new Set(["authoring content", "tags", "hosting"])
+ return !omit.has(node.name.toLowerCase())
},
})
```
-You can customize this by changing the entries of the `list` array. Simply add all folder or file names you want to remove to the array (case insensitive).
+You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.
## Advanced examples
@@ -178,9 +173,9 @@
if (node.depth > 0) {
// set emoji for file/folder
if (node.file) {
- node.name = "📄 " + node.name
+ node.displayName = "📄 " + node.displayName
} else {
- node.name = "📁 " + node.name
+ node.displayName = "📁 " + node.displayName
}
}
},
@@ -189,7 +184,7 @@
### Putting it all together
-In this example, we're going to customize the explorer by using functions from examples above to [[explorer#Add emoji prefix | add emoji prefixes]], [[explorer#remove-list-of-elements-filter| filter out some folders]] and [[explorer#use-sort-to-put-files-first | sort with files above folders]].
+In this example, we're going to customize the explorer by using functions from examples above to [[#Add emoji prefix | add emoji prefixes]], [[#remove-list-of-elements-filter| filter out some folders]] and [[#use-sort-to-put-files-first | sort with files above folders]].
```ts title="quartz.layout.ts"
Component.Explorer({
@@ -224,7 +219,7 @@
> You can then import them like this:
>
> ```ts title="quartz.layout.ts"
-> import { mapFn, filterFn, sortFn } from "./path/to/your/functions"
+> import { mapFn, filterFn, sortFn } from "./functions.ts"
> Component.Explorer({
> mapFn: mapFn,
> filterFn: filterFn,
--
Gitblit v1.10.0