feat(perf:fast-rebuilds): Stop mutating resources param in ComponentResourc...

kabirgh

2024-03-10 b4236e5142c31829cf809c0fbc8370ac22b6d1ba

 quartz/plugins/index.ts

@@ -1,97 +1,52 @@
import { GlobalConfiguration } from '../cfg'
import { QuartzComponent } from '../components/types'
import { StaticResources } from '../resources'
import { googleFontHref, joinStyles } from '../theme'
import { EmitCallback, PluginTypes } from './types'
import styles from '../styles/base.scss'
import { StaticResources } from "../util/resources"
import { FilePath, FullSlug } from "../util/path"
import { BuildCtx } from "../util/ctx"

export type ComponentResources = {
  css: string[],
  beforeDOMLoaded: string[],
  afterDOMLoaded: string[]
}

function joinScripts(scripts: string[]): string {
  return scripts.join("\n")
}

export function emitComponentResources(cfg: GlobalConfiguration, resources: StaticResources, plugins: PluginTypes, emit: EmitCallback) {
  const fps: string[] = []
  const allComponents: Set<QuartzComponent<any>> = new Set()
  for (const emitter of plugins.emitters) {
    const components = emitter.getQuartzComponents()
    for (const component of components) {
      allComponents.add(component)
    }
  }

  const componentResources: ComponentResources = {
    css: [],
    beforeDOMLoaded: [],
    afterDOMLoaded: []
  }

  for (const component of allComponents) {
    const { css, beforeDOMLoaded, afterDOMLoaded } = component
    if (css) {
      componentResources.css.push(css)
    }
    if (beforeDOMLoaded) {
      componentResources.beforeDOMLoaded.push(beforeDOMLoaded)
    }
    if (afterDOMLoaded) {
      componentResources.beforeDOMLoaded.push(afterDOMLoaded)
    }
  }

  emit({
    slug: "index",
    ext: ".css",
    content: joinStyles(cfg.theme, styles, ...componentResources.css)
  })
  emit({
    slug: "prescript",
    ext: ".js",
    content: joinScripts(componentResources.beforeDOMLoaded)
  })
  emit({
    slug: "postscript",
    ext: ".js",
    content: joinScripts(componentResources.afterDOMLoaded)
  })

  fps.push("index.css", "prescript.js", "postscript.js")
  resources.css.push(googleFontHref(cfg.theme))
  return fps
}

export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
  const staticResources: StaticResources = {
    css: [],
    js: [],
  }

  for (const transformer of plugins.transformers) {
    const res = transformer.externalResources
  for (const transformer of ctx.cfg.plugins.transformers) {
    const res = transformer.externalResources ? transformer.externalResources(ctx) : {}
    if (res?.js) {
      staticResources.js = staticResources.js.concat(res.js)
      staticResources.js.push(...res.js)
    }
    if (res?.css) {
      staticResources.css = staticResources.css.concat(res.css)
      staticResources.css.push(...res.css)
    }
  }

  // if serving locally, listen for rebuilds and reload the page
  if (ctx.argv.serve) {
    const wsUrl = ctx.argv.remoteDevHost
      ? `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
      : `ws://localhost:${ctx.argv.wsPort}`

    staticResources.js.push({
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
            const socket = new WebSocket('${wsUrl}')
            // reload(true) ensures resources like images and scripts are fetched again in firefox
            socket.addEventListener('message', () => document.location.reload(true))
          `,
    })
  }

  return staticResources
}

export * from './transformers'
export * from './filters'
export * from './emitters'
export * from "./transformers"
export * from "./filters"
export * from "./emitters"

declare module 'vfile' {
declare module "vfile" {
  // inserted in processors.ts
  interface DataMap {
    slug: string
    filePath: string
    slug: FullSlug
    filePath: FilePath
    relativePath: FilePath
  }
}