make component resources a proper emitter

Jacky Zhao

2023-07-24 4811500b1b9c169aac82254d771677cd6dc2a86c

make component resources a proper emitter

 content/features/upcoming features.md

@@ -4,7 +4,6 @@

## high priority

- component resources should be emitted by an emitter
- https://help.obsidian.md/Editing+and+formatting/Tags#Nested+tags nested tags??
- watch mode for config/source code
- https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Task+lists task list styling

 quartz.config.ts

@@ -95,6 +95,7 @@
    filters: [Plugin.RemoveDrafts()],
    emitters: [
      Plugin.AliasRedirects(),
      Plugin.ComponentResources(),
      Plugin.ContentPage({
        ...sharedPageComponents,
        ...contentPageLayout,

 quartz/bootstrap-cli.mjs

@@ -82,8 +82,8 @@
  bundleInfo: {
    boolean: true,
    default: false,
    describe: "show detailed bundle information"
  }
    describe: "show detailed bundle information",
  },
}

function escapePath(fp) {
@@ -351,9 +351,9 @@
      console.log(
        `Successfully transpiled ${Object.keys(meta.inputs).length} files (${prettyBytes(
          meta.bytes,
        )})`)
      console.log(await esbuild.analyzeMetafile(result.metafile, { color: true })
        )})`,
      )
      console.log(await esbuild.analyzeMetafile(result.metafile, { color: true }))
    }

    const { default: buildQuartz } = await import(cacheFile)

 quartz/plugins/emitters/componentResources.ts

New file
@@ -0,0 +1,154 @@
import { FilePath, ServerSlug } from "../../path"
import { PluginTypes, QuartzEmitterPlugin } from "../types"

// @ts-ignore
import spaRouterScript from "../../components/scripts/spa.inline"
// @ts-ignore
import plausibleScript from "../../components/scripts/plausible.inline"
// @ts-ignore
import popoverScript from "../../components/scripts/popover.inline"
import styles from "../../styles/base.scss"
import popoverStyle from "../../components/styles/popover.scss"
import { BuildCtx } from "../../ctx"
import { StaticResources } from "../../resources"
import { QuartzComponent } from "../../components/types"
import { googleFontHref, joinStyles } from "../../theme"

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

function getComponentResources(plugins: PluginTypes): ComponentResources {
  const allComponents: Set<QuartzComponent> = new Set()
  for (const emitter of plugins.emitters) {
    const components = emitter.getQuartzComponents()
    for (const component of components) {
      allComponents.add(component)
    }
  }

  const componentResources = {
    css: new Set<string>(),
    beforeDOMLoaded: new Set<string>(),
    afterDOMLoaded: new Set<string>(),
  }

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

  return {
    css: [...componentResources.css],
    beforeDOMLoaded: [...componentResources.beforeDOMLoaded],
    afterDOMLoaded: [...componentResources.afterDOMLoaded],
  }
}

function joinScripts(scripts: string[]): string {
  // wrap with iife to prevent scope collision
  return scripts.map((script) => `(function () {${script}})();`).join("\n")
}

function addGlobalPageResources(
  ctx: BuildCtx,
  staticResources: StaticResources,
  componentResources: ComponentResources,
) {
  const cfg = ctx.cfg.configuration
  const reloadScript = ctx.argv.serve
  staticResources.css.push(googleFontHref(cfg.theme))

  // popovers
  if (cfg.enablePopovers) {
    componentResources.afterDOMLoaded.push(popoverScript)
    componentResources.css.push(popoverStyle)
  }

  if (cfg.analytics?.provider === "google") {
    const tagId = cfg.analytics.tagId
    staticResources.js.push({
      src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
      contentType: "external",
      loadTime: "afterDOMReady",
    })
    componentResources.afterDOMLoaded.push(`
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag(\`js\`, new Date());
      gtag(\`config\`, \`${tagId}\`, { send_page_view: false });
  
      document.addEventListener(\`nav\`, () => {
        gtag(\`event\`, \`page_view\`, {
          page_title: document.title,
          page_location: location.href,
        });
      });`)
  } else if (cfg.analytics?.provider === "plausible") {
    componentResources.afterDOMLoaded.push(plausibleScript)
  }

  // spa
  if (cfg.enableSPA) {
    componentResources.afterDOMLoaded.push(spaRouterScript)
  } else {
    componentResources.afterDOMLoaded.push(`
        window.spaNavigate = (url, _) => window.location.assign(url)
        const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
        document.dispatchEvent(event)`)
  }

  if (reloadScript) {
    staticResources.js.push({
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
          const socket = new WebSocket('ws://localhost:3001')
          socket.addEventListener('message', () => document.location.reload())
        `,
    })
  }
}

export const ComponentResources: QuartzEmitterPlugin = () => ({
  name: "ComponentResources",
  getQuartzComponents() {
    return []
  },
  async emit(ctx, _content, resources, emit): Promise<FilePath[]> {
    // component specific scripts and styles
    const componentResources = getComponentResources(ctx.cfg.plugins)
    // important that this goes *after* component scripts
    // as the "nav" event gets triggered here and we should make sure
    // that everyone else had the chance to register a listener for it
    addGlobalPageResources(ctx, resources, componentResources)
    const fps = await Promise.all([
      emit({
        slug: "index" as ServerSlug,
        ext: ".css",
        content: joinStyles(ctx.cfg.configuration.theme, styles, ...componentResources.css),
      }),
      emit({
        slug: "prescript" as ServerSlug,
        ext: ".js",
        content: joinScripts(componentResources.beforeDOMLoaded),
      }),
      emit({
        slug: "postscript" as ServerSlug,
        ext: ".js",
        content: joinScripts(componentResources.afterDOMLoaded),
      }),
    ])
    return fps
  },
})

 quartz/plugins/emitters/index.ts

@@ -5,3 +5,4 @@
export { AliasRedirects } from "./aliases"
export { Assets } from "./assets"
export { Static } from "./static"
export { ComponentResources } from "./componentResources"

 quartz/plugins/index.ts

@@ -1,82 +1,7 @@
import { GlobalConfiguration } from "../cfg"
import { QuartzComponent } from "../components/types"
import { StaticResources } from "../resources"
import { joinStyles } from "../theme"
import { EmitCallback, PluginTypes } from "./types"
import styles from "../styles/base.scss"
import { PluginTypes } from "./types"
import { FilePath, ServerSlug } from "../path"

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

export function getComponentResources(plugins: PluginTypes): ComponentResources {
  const allComponents: Set<QuartzComponent> = new Set()
  for (const emitter of plugins.emitters) {
    const components = emitter.getQuartzComponents()
    for (const component of components) {
      allComponents.add(component)
    }
  }

  const componentResources = {
    css: new Set<string>(),
    beforeDOMLoaded: new Set<string>(),
    afterDOMLoaded: new Set<string>(),
  }

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

  return {
    css: [...componentResources.css],
    beforeDOMLoaded: [...componentResources.beforeDOMLoaded],
    afterDOMLoaded: [...componentResources.afterDOMLoaded],
  }
}

function joinScripts(scripts: string[]): string {
  // wrap with iife to prevent scope collision
  return scripts.map((script) => `(function () {${script}})();`).join("\n")
}

export async function emitComponentResources(
  cfg: GlobalConfiguration,
  res: ComponentResources,
  emit: EmitCallback,
): Promise<FilePath[]> {
  const fps = await Promise.all([
    emit({
      slug: "index" as ServerSlug,
      ext: ".css",
      content: joinStyles(cfg.theme, styles, ...res.css),
    }),
    emit({
      slug: "prescript" as ServerSlug,
      ext: ".js",
      content: joinScripts(res.beforeDOMLoaded),
    }),
    emit({
      slug: "postscript" as ServerSlug,
      ext: ".js",
      content: joinScripts(res.afterDOMLoaded),
    }),
  ])
  return fps
}

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

 quartz/processors/emit.ts

@@ -1,89 +1,14 @@
import path from "path"
import fs from "fs"
import { PerfTimer } from "../perf"
import {
  ComponentResources,
  emitComponentResources,
  getComponentResources,
  getStaticResourcesFromPlugins,
} from "../plugins"
import { getStaticResourcesFromPlugins } from "../plugins"
import { EmitCallback } from "../plugins/types"
import { ProcessedContent } from "../plugins/vfile"
import { FilePath } from "../path"

// @ts-ignore
import spaRouterScript from "../components/scripts/spa.inline"
// @ts-ignore
import plausibleScript from "../components/scripts/plausible.inline"
// @ts-ignore
import popoverScript from "../components/scripts/popover.inline"
import popoverStyle from "../components/styles/popover.scss"
import { StaticResources } from "../resources"
import { QuartzLogger } from "../log"
import { googleFontHref } from "../theme"
import { trace } from "../trace"
import { BuildCtx } from "../ctx"

function addGlobalPageResources(
  ctx: BuildCtx,
  staticResources: StaticResources,
  componentResources: ComponentResources,
) {
  const cfg = ctx.cfg.configuration
  const reloadScript = ctx.argv.serve
  staticResources.css.push(googleFontHref(cfg.theme))

  // popovers
  if (cfg.enablePopovers) {
    componentResources.afterDOMLoaded.push(popoverScript)
    componentResources.css.push(popoverStyle)
  }

  if (cfg.analytics?.provider === "google") {
    const tagId = cfg.analytics.tagId
    staticResources.js.push({
      src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
      contentType: "external",
      loadTime: "afterDOMReady",
    })
    componentResources.afterDOMLoaded.push(`
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag(\`js\`, new Date());
    gtag(\`config\`, \`${tagId}\`, { send_page_view: false });

    document.addEventListener(\`nav\`, () => {
      gtag(\`event\`, \`page_view\`, {
        page_title: document.title,
        page_location: location.href,
      });
    });`)
  } else if (cfg.analytics?.provider === "plausible") {
    componentResources.afterDOMLoaded.push(plausibleScript)
  }

  // spa
  if (cfg.enableSPA) {
    componentResources.afterDOMLoaded.push(spaRouterScript)
  } else {
    componentResources.afterDOMLoaded.push(`
      window.spaNavigate = (url, _) => window.location.assign(url)
      const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
      document.dispatchEvent(event)`)
  }

  if (reloadScript) {
    staticResources.js.push({
      loadTime: "afterDOMReady",
      contentType: "inline",
      script: `
        const socket = new WebSocket('ws://localhost:3001')
        socket.addEventListener('message', () => document.location.reload())
      `,
    })
  }
}

export async function emitContent(ctx: BuildCtx, content: ProcessedContent[]) {
  const { argv, cfg } = ctx
  const perf = new PerfTimer()
@@ -98,27 +23,8 @@
    return pathToPage
  }

  // initialize from plugins
  const staticResources = getStaticResourcesFromPlugins(cfg.plugins)

  // component specific scripts and styles
  const componentResources = getComponentResources(cfg.plugins)

  // important that this goes *after* component scripts
  // as the "nav" event gets triggered here and we should make sure
  // that everyone else had the chance to register a listener for it
  addGlobalPageResources(ctx, staticResources, componentResources)

  let emittedFiles = 0
  const emittedResources = await emitComponentResources(cfg.configuration, componentResources, emit)
  if (argv.verbose) {
    for (const file of emittedResources) {
      emittedFiles += 1
      console.log(`[emit:Resources] ${file}`)
    }
  }

  // emitter plugins
  const staticResources = getStaticResourcesFromPlugins(cfg.plugins)
  for (const emitter of cfg.plugins.emitters) {
    try {
      const emitted = await emitter.emit(ctx, content, staticResources, emit)