fix: unmemoize explorer on rebuild (closes #1077)

Jacky Zhao

2024-08-09 e89c395f7c8cabffb880ce36cc27926667b608de

fix: unmemoize explorer on rebuild (closes #1077)

 quartz/build.ts

@@ -38,8 +38,13 @@

type FileEvent = "add" | "change" | "delete"

function newBuildId() {
  return new Date().toISOString()
}

async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
  const ctx: BuildCtx = {
    buildId: newBuildId(),
    argv,
    cfg,
    allSlugs: [],
@@ -167,6 +172,7 @@

  const perf = new PerfTimer()
  console.log(chalk.yellow("Detected change, rebuilding..."))
  ctx.buildId = newBuildId()

  // UPDATE DEP GRAPH
  const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
@@ -363,14 +369,10 @@

  const perf = new PerfTimer()
  console.log(chalk.yellow("Detected change, rebuilding..."))
  ctx.buildId = newBuildId()

  try {
    const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))

    const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
      .filter((fp) => !toRemove.has(fp))
      .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))

    ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
    const parsedContent = await parseMarkdown(ctx, filesToRebuild)
    for (const content of parsedContent) {
      const [_tree, vfile] = content
@@ -384,6 +386,13 @@
    const parsedFiles = [...contentMap.values()]
    const filteredContent = filterContent(ctx, parsedFiles)

    // re-update slugs
    const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
      .filter((fp) => !toRemove.has(fp))
      .map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))

    ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]

    // TODO: we can probably traverse the link graph to figure out what's safe to delete here
    // instead of just deleting everything
    await rimraf(path.join(argv.output, ".*"), { glob: true })

 quartz/components/Explorer.tsx

@@ -44,12 +44,9 @@
  // memoized
  let fileTree: FileNode
  let jsonTree: string
  let lastBuildId: string = ""

  function constructFileTree(allFiles: QuartzPluginData[]) {
    if (fileTree) {
      return
    }

    // Construct tree from allFiles
    fileTree = new FileNode("")
    allFiles.forEach((file) => fileTree.add(file))
@@ -76,12 +73,17 @@
  }

  const Explorer: QuartzComponent = ({
    ctx,
    cfg,
    allFiles,
    displayClass,
    fileData,
  }: QuartzComponentProps) => {
    if (ctx.buildId !== lastBuildId) {
      lastBuildId = ctx.buildId
    constructFileTree(allFiles)
    }

    return (
      <div class={classNames(displayClass, "explorer")}>
        <button

 quartz/util/ctx.ts

@@ -14,6 +14,7 @@
}

export interface BuildCtx {
  buildId: string
  argv: Argv
  cfg: QuartzConfig
  allSlugs: FullSlug[]