refactor plugins to be functions instead of classes

package-lock.json

@@ -14,7 +14,6 @@
         "chalk": "^4.1.2",
         "cli-spinner": "^0.2.10",
         "esbuild-sass-plugin": "^2.9.0",
-        "flamethrower-router": "^0.0.0-meme.12",
         "github-slugger": "^2.0.0",
         "globby": "^13.1.4",
         "gray-matter": "^4.0.3",
@@ -22,9 +21,12 @@
         "hast-util-to-string": "^2.0.0",
         "is-absolute-url": "^4.0.1",
         "mdast-util-find-and-replace": "^2.2.2",
+        "mdast-util-to-string": "^3.2.0",
+        "micromorph": "^0.4.5",
         "preact": "^10.14.1",
         "preact-render-to-string": "^6.0.3",
         "pretty-time": "^1.1.0",
+        "reading-time": "^1.5.0",
         "rehype-autolink-headings": "^6.1.1",
         "rehype-katex": "^6.0.3",
         "rehype-pretty-code": "^0.9.6",
@@ -1523,11 +1525,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/flamethrower-router": {
-      "version": "0.0.0-meme.12",
-      "resolved": "https://registry.npmjs.org/flamethrower-router/-/flamethrower-router-0.0.0-meme.12.tgz",
-      "integrity": "sha512-PWcNrjzItwk61RTk/SbbKJNcAgl6qCXH8xkZjGjUGV/dgKAnURci+k+Yk8emubUQWTdAd1kSqujy0VRjoeEgxg=="
-    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -3006,6 +3003,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micromorph": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/micromorph/-/micromorph-0.4.5.tgz",
+      "integrity": "sha512-Erasr0xiDvDeEhh7B/k7RFTwwfaAX10D7BMorNpokkwDh6XsRLYWDPaWF1m5JQeMSkGdqlEtQ8s68NcdDWuGgw=="
+    },
     "node_modules/mime-db": {
       "version": "1.33.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
@@ -3268,6 +3270,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
+    },
     "node_modules/rehype-autolink-headings": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-6.1.1.tgz",

package.json

@@ -30,7 +30,6 @@
     "chalk": "^4.1.2",
     "cli-spinner": "^0.2.10",
     "esbuild-sass-plugin": "^2.9.0",
-    "flamethrower-router": "^0.0.0-meme.12",
     "github-slugger": "^2.0.0",
     "globby": "^13.1.4",
     "gray-matter": "^4.0.3",
@@ -38,9 +37,12 @@
     "hast-util-to-string": "^2.0.0",
     "is-absolute-url": "^4.0.1",
     "mdast-util-find-and-replace": "^2.2.2",
+    "mdast-util-to-string": "^3.2.0",
+    "micromorph": "^0.4.5",
     "preact": "^10.14.1",
     "preact-render-to-string": "^6.0.3",
     "pretty-time": "^1.1.0",
+    "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
     "rehype-pretty-code": "^0.9.6",

quartz.config.ts

@@ -39,23 +39,23 @@ const config: QuartzConfig = {
   },
   plugins: {
     transformers: [
-      new Plugin.FrontMatter(),
+      Plugin.FrontMatter(),
-      new Plugin.Description(),
+      Plugin.Description(),
-      new Plugin.TableOfContents({ showByDefault: true }),
+      Plugin.TableOfContents({ showByDefault: true }),
-      new Plugin.CreatedModifiedDate({
+      Plugin.CreatedModifiedDate({
         priority: ['frontmatter', 'filesystem'] // you can add 'git' here for last modified from Git but this makes the build slower
       }),
-      new Plugin.GitHubFlavoredMarkdown(),
+      Plugin.GitHubFlavoredMarkdown(),
-      new Plugin.ObsidianFlavoredMarkdown(),
+      Plugin.ObsidianFlavoredMarkdown(),
-      new Plugin.ResolveLinks(),
+      Plugin.ResolveLinks(),
-      new Plugin.SyntaxHighlighting(),
+      Plugin.SyntaxHighlighting(),
-      new Plugin.Katex(),
+      Plugin.Katex(),
     ],
     filters: [
-      new Plugin.RemoveDrafts()
+      Plugin.RemoveDrafts()
     ],
     emitters: [
-      new Plugin.ContentPage({
+      Plugin.ContentPage({
         head: Component.Head,
         header: [Component.PageTitle, Component.Spacer, Component.Darkmode],
         body: [Component.ArticleTitle, Component.ReadingTime, Component.TableOfContents, Component.Content]

quartz/components/TableOfContents.tsx

@@ -1,24 +1,19 @@
 import { QuartzComponentProps } from "./types"
 import style from "./styles/toc.scss"
 
-export default function TableOfContents({ fileData, position }: QuartzComponentProps) {
+export default function TableOfContents({ fileData }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
 
-  if (position === 'body') {
+  return <details class="toc" open>
-    // TODO: animate this
-    return <details className="toc" open>
     <summary><h3>Table of Contents</h3></summary>
     <ul>
-        {fileData.toc.map(tocEntry => <li key={tocEntry.slug} className={`depth-${tocEntry.depth}`}>
+      {fileData.toc.map(tocEntry => <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
         <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
       </li>)}
     </ul>
   </details>
-  } else if (position === 'sidebar') {
-    // TODO
-  }
 }
 
 TableOfContents.css = style

quartz/components/types.ts

@@ -10,7 +10,6 @@ export type QuartzComponentProps = {
   cfg: GlobalConfiguration
   children: QuartzComponent[] | JSX.Element[]
   tree: Node<QuartzPluginData>
-  position?: 'sidebar' | 'header' | 'body'
 }
 
 export type QuartzComponent = ComponentType<QuartzComponentProps> & {
@@ -18,3 +17,5 @@ export type QuartzComponent = ComponentType<QuartzComponentProps> & {
   beforeDOMLoaded?: string,
   afterDOMLoaded?: string,
 }
+
+export type QuartzComponentConstructor<Options extends object> = (opts: Options) => QuartzComponent

quartz/plugins/emitters/contentPage.tsx

@@ -15,23 +15,20 @@ interface Options {
   body: QuartzComponent[]
 }
 
-export class ContentPage extends QuartzEmitterPlugin {
+export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
-  name = "ContentPage"
+  if (!opts) {
-  opts: Options
+    throw new Error("ContentPage must be initialized with options specifiying the components to use")
-
-  constructor(opts: Options) {
-    super()
-    this.opts = opts
-  }
-
-  getQuartzComponents(): QuartzComponent[] {
-    return [this.opts.head, Header, ...this.opts.header, ...this.opts.body]
   }
 
+  return {
+    name: "ContentPage",
+    getQuartzComponents() {
+      return [opts.head, Header, ...opts.header, ...opts.body]
+    },
     async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {
       const fps: string[] = []
 
-    const { head: Head, header, body } = this.opts
+      const { head: Head, header, body } = opts
       for (const [tree, file] of content) {
         const baseDir = resolveToRoot(file.data.slug!)
         const pageResources: StaticResources = {
@@ -56,10 +53,10 @@ export class ContentPage extends QuartzEmitterPlugin {
           <body>
             <div id="quartz-root" class="page">
               <Header {...componentData} >
-              {header.map(HeaderComponent => <HeaderComponent {...componentData} position="header" />)}
+                {header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
               </Header>
               <Body {...componentData}>
-              {body.map(BodyComponent => <BodyComponent {...componentData } position="body" />)}
+                {body.map(BodyComponent => <BodyComponent {...componentData} />)}
               </Body>
             </div>
           </body>
@@ -78,3 +75,4 @@ export class ContentPage extends QuartzEmitterPlugin {
       return fps
     }
   }
+}

quartz/plugins/filters/draft.ts

@@ -1,10 +1,9 @@
 import { QuartzFilterPlugin } from "../types"
-import { ProcessedContent } from "../vfile"
 
-export class RemoveDrafts extends QuartzFilterPlugin {
+export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
-  name = "RemoveDrafts"
+  name: "RemoveDrafts",
-  shouldPublish([_tree, vfile]: ProcessedContent): boolean {
+  shouldPublish([_tree, vfile]) {
     const draftFlag: boolean = vfile.data?.frontmatter?.draft ?? false
     return !draftFlag
   }
-}
+})

quartz/plugins/filters/explicit.ts

@@ -1,10 +1,9 @@
 import { QuartzFilterPlugin } from "../types"
-import { ProcessedContent } from "../vfile"
 
-export class ExplicitPublish extends QuartzFilterPlugin {
+export const ExplicitPublish: QuartzFilterPlugin = () => ({
-  name = "ExplicitPublish"
+  name: "ExplicitPublish",
-  shouldPublish([_tree, vfile]: ProcessedContent): boolean {
+  shouldPublish([_tree, vfile]) {
     const publishFlag: boolean = vfile.data?.frontmatter?.publish ?? false
     return publishFlag
   }
-}
+})

quartz/plugins/transformers/description.ts

@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
 import { Root as HTMLRoot } from 'hast'
 import { toString } from "hast-util-to-string"
 import { QuartzTransformerPlugin } from "../types"
@@ -11,20 +10,14 @@ const defaultOptions: Options = {
   descriptionLength: 150
 }
 
-export class Description extends QuartzTransformerPlugin {
+export const Description: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "Description"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "Description",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  markdownPlugins(): PluggableList {
       return []
-  }
+    },
-
+    htmlPlugins() {
-  htmlPlugins(): PluggableList {
       return [
         () => {
           return async (tree: HTMLRoot, file) => {
@@ -35,7 +28,7 @@ export class Description extends QuartzTransformerPlugin {
             const sentences = desc.replace(/\s+/g, ' ').split('.')
             let finalDesc = ""
             let sentenceIdx = 0
-          const len = this.opts.descriptionLength
+            const len = opts.descriptionLength
             while (finalDesc.length < len) {
               finalDesc += sentences[sentenceIdx] + '.'
               sentenceIdx++
@@ -48,6 +41,7 @@ export class Description extends QuartzTransformerPlugin {
       ]
     }
   }
+}
 
 declare module 'vfile' {
   interface DataMap {

quartz/plugins/transformers/frontmatter.ts

@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
 import matter from "gray-matter"
 import remarkFrontmatter from 'remark-frontmatter'
 import { QuartzTransformerPlugin } from "../types"
@@ -13,21 +12,16 @@ const defaultOptions: Options = {
   delims: '---'
 }
 
-export class FrontMatter extends QuartzTransformerPlugin {
+export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "FrontMatter"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "FrontMatter",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  markdownPlugins(): PluggableList {
       return [
         remarkFrontmatter,
         () => {
           return (_, file) => {
-          const { data } = matter(file.value, this.opts)
+            const { data } = matter(file.value, opts)
 
             // fill in frontmatter
             file.data.frontmatter = {
@@ -38,12 +32,12 @@ export class FrontMatter extends QuartzTransformerPlugin {
           }
         }
       ]
-  }
+    },
-
+    htmlPlugins() {
-  htmlPlugins(): PluggableList {
       return []
     }
   }
+}
 
 declare module 'vfile' {
   interface DataMap {

quartz/plugins/transformers/gfm.ts

@@ -15,27 +15,24 @@ const defaultOptions: Options = {
   linkHeadings: true
 }
 
-export class GitHubFlavoredMarkdown extends QuartzTransformerPlugin {
+export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "GitHubFlavoredMarkdown"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "GitHubFlavoredMarkdown",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
+      return opts.enableSmartyPants ? [remarkGfm] : [remarkGfm, smartypants]
-    this.opts = { ...defaultOptions, ...opts }
+    },
-  }
+    htmlPlugins() {
-
+      if (opts.linkHeadings) {
-  markdownPlugins(): PluggableList {
+        return [rehypeSlug, [rehypeAutolinkHeadings, {
-    return this.opts.enableSmartyPants ? [remarkGfm] : [remarkGfm, smartypants]
-  }
-
-  htmlPlugins(): PluggableList {
-    return this.opts.linkHeadings
-      ? [rehypeSlug, [rehypeAutolinkHeadings, {
           behavior: 'append', content: {
             type: 'text',
             value: ' §'
           }
         }]]
-      : []
+      } else {
+        return []
+      }
+    }
   }
 }

quartz/plugins/transformers/lastmod.ts

@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
 import fs from "fs"
 import path from 'path'
 import { Repository } from "@napi-rs/simple-git"
@@ -12,19 +11,11 @@ const defaultOptions: Options = {
   priority: ['frontmatter', 'git', 'filesystem']
 }
 
-export class CreatedModifiedDate extends QuartzTransformerPlugin {
+export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "CreatedModifiedDate"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "CreatedModifiedDate",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = {
-      ...defaultOptions,
-      ...opts,
-    }
-  }
-
-  markdownPlugins(): PluggableList {
       return [
         () => {
           let repo: Repository | undefined = undefined
@@ -34,7 +25,7 @@ export class CreatedModifiedDate extends QuartzTransformerPlugin {
             let published: undefined | Date = undefined
 
             const fp = path.join(file.cwd, file.data.filePath as string)
-          for (const source of this.opts.priority) {
+            for (const source of opts.priority) {
               if (source === "filesystem") {
                 const st = await fs.promises.stat(fp)
                 created ||= new Date(st.birthtimeMs)
@@ -61,12 +52,12 @@ export class CreatedModifiedDate extends QuartzTransformerPlugin {
           }
         }
       ]
-  }
+    },
-
+    htmlPlugins() {
-  htmlPlugins(): PluggableList {
       return []
     }
   }
+}
 
 declare module 'vfile' {
   interface DataMap {

quartz/plugins/transformers/latex.ts

@@ -1,24 +1,20 @@
-import { PluggableList } from "unified"
 import remarkMath from "remark-math"
 import rehypeKatex from 'rehype-katex'
-import { StaticResources } from "../../resources"
 import { QuartzTransformerPlugin } from "../types"
 
-export class Katex extends QuartzTransformerPlugin {
+export const Katex: QuartzTransformerPlugin = () => ({
-  name = "Katex"
+  name: "Katex",
-  markdownPlugins(): PluggableList {
+  markdownPlugins() {
     return [remarkMath]
-  }
+  },
-
+  htmlPlugins() {
-  htmlPlugins(): PluggableList {
     return [
       [rehypeKatex, {
         output: 'html',
       }]
     ]
-  }
+  },
-
+  externalResources: {
-  externalResources: Partial<StaticResources> = {
     css: [
       // base css
       "https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
@@ -31,4 +27,4 @@ export class Katex extends QuartzTransformerPlugin {
       }
     ]
   }
-}
+})

quartz/plugins/transformers/links.ts

@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
 import { QuartzTransformerPlugin } from "../types"
 import { relative, relativeToRoot, slugify } from "../../path"
 import path from "path"
@@ -17,26 +16,20 @@ const defaultOptions: Options = {
   prettyLinks: true
 }
 
-export class ResolveLinks extends QuartzTransformerPlugin {
+export const ResolveLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "LinkProcessing"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "LinkProcessing",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  markdownPlugins(): PluggableList {
       return []
-  }
+    },
-
+    htmlPlugins() {
-  htmlPlugins(): PluggableList {
       return [() => {
         return (tree, file) => {
           const curSlug = file.data.slug!
           const transformLink = (target: string) => {
             const targetSlug = slugify(decodeURI(target).trim())
-          if (this.opts.markdownLinkResolution === 'relative' && !path.isAbsolute(targetSlug)) {
+            if (opts.markdownLinkResolution === 'relative' && !path.isAbsolute(targetSlug)) {
               return './' + relative(curSlug, targetSlug)
             } else {
               return './' + relativeToRoot(curSlug, targetSlug)
@@ -58,7 +51,7 @@ export class ResolveLinks extends QuartzTransformerPlugin {
               }
 
               // rewrite link internals if prettylinks is on
-            if (this.opts.prettyLinks && node.children.length === 1 && node.children[0].type === 'text') {
+              if (opts.prettyLinks && node.children.length === 1 && node.children[0].type === 'text') {
                 node.children[0].value = path.basename(node.children[0].value)
               }
             }
@@ -79,3 +72,4 @@ export class ResolveLinks extends QuartzTransformerPlugin {
       }]
     }
   }
+}

quartz/plugins/transformers/ofm.ts

@@ -89,19 +89,13 @@ const capitalize = (s: string): string => {
   return s.substring(0, 1).toUpperCase() + s.substring(1);
 }
 
-export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
+export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "ObsidianFlavoredMarkdown"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "ObsidianFlavoredMarkdown",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  markdownPlugins(): PluggableList {
       const plugins: PluggableList = []
-
+      if (opts.wikilinks) {
-    if (this.opts.wikilinks) {
         plugins.push(() => {
           // Match wikilinks 
           // !?               -> optional embedding
@@ -169,7 +163,7 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
         )
       }
 
-    if (this.opts.highlight) {
+      if (opts.highlight) {
         plugins.push(() => {
           // Match highlights 
           const highlightRegex = new RegExp(/==(.+)==/, "g")
@@ -185,7 +179,7 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
         })
       }
 
-    if (this.opts.callouts) {
+      if (opts.callouts) {
         plugins.push(() => {
           // from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
           const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
@@ -252,11 +246,11 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
           }
         })
       }
-
       return plugins
-  }
+    },
 
-  htmlPlugins(): PluggableList {
+    htmlPlugins() {
       return [rehypeRaw]
     }
   }
+}

quartz/plugins/transformers/syntax.ts

@@ -1,15 +1,12 @@
-import { PluggableList } from "unified"
 import { QuartzTransformerPlugin } from "../types"
 import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
 
-export class SyntaxHighlighting extends QuartzTransformerPlugin {
+export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
-  name = "SyntaxHighlighting"
+  name: "SyntaxHighlighting",
-
+  markdownPlugins() {
-  markdownPlugins(): PluggableList {
     return []
-  }
+  },
-
+  htmlPlugins() {
-  htmlPlugins(): PluggableList {
     return [[rehypePrettyCode, {
       theme: 'css-variables',
       onVisitLine(node) {
@@ -25,4 +22,4 @@ export class SyntaxHighlighting extends QuartzTransformerPlugin {
       },
     } satisfies Partial<CodeOptions>]]
   }
-}
+})

quartz/plugins/transformers/toc.ts

@@ -1,4 +1,3 @@
-import { PluggableList } from "unified"
 import { QuartzTransformerPlugin } from "../types"
 import { Root } from "mdast"
 import { visit } from "unist-util-visit"
@@ -23,24 +22,19 @@ interface TocEntry {
   slug: string
 }
 
-export class TableOfContents extends QuartzTransformerPlugin {
+export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
-  name = "TableOfContents"
+  const opts = { ...defaultOptions, ...userOpts }
-  opts: Options
+  return {
-
+    name: "TableOfContents",
-  constructor(opts?: Partial<Options>) {
+    markdownPlugins() {
-    super()
-    this.opts = { ...defaultOptions, ...opts }
-  }
-
-  markdownPlugins(): PluggableList {
       return [() => {
         return async (tree: Root, file) => {
-        const display = file.data.frontmatter?.enableToc ?? this.opts.showByDefault
+          const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
           if (display) {
             const toc: TocEntry[] = []
-          let highestDepth: number = this.opts.maxDepth
+            let highestDepth: number = opts.maxDepth
             visit(tree, 'heading', (node) => {
-            if (node.depth <= this.opts.maxDepth) {
+              if (node.depth <= opts.maxDepth) {
                 const text = toString(node)
                 highestDepth = Math.min(highestDepth, node.depth)
                 toc.push({
@@ -51,18 +45,18 @@ export class TableOfContents extends QuartzTransformerPlugin {
               }
             })
 
-          if (toc.length > this.opts.minEntries) {
+            if (toc.length > opts.minEntries) {
               file.data.toc = toc.map(entry => ({ ...entry, depth: entry.depth - highestDepth }))
             }
           }
         }
       }]
-  }
+    },
-
+    htmlPlugins() {
-  htmlPlugins(): PluggableList {
       return []
     }
   }
+}
 
 declare module 'vfile' {
   interface DataMap {

quartz/plugins/types.ts

@@ -4,16 +4,32 @@ import { ProcessedContent } from "./vfile"
 import { GlobalConfiguration } from "../cfg"
 import { QuartzComponent } from "../components/types"
 
-export abstract class QuartzTransformerPlugin {
+export interface PluginTypes {
-  abstract name: string
+  transformers: QuartzTransformerPluginInstance[],
-  abstract markdownPlugins(): PluggableList
+  filters: QuartzFilterPluginInstance[],
-  abstract htmlPlugins(): PluggableList
+  emitters: QuartzEmitterPluginInstance[],
+}
+
+type OptionType = object | undefined
+export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzTransformerPluginInstance
+export type QuartzTransformerPluginInstance = {
+  name: string
+  markdownPlugins(): PluggableList
+  htmlPlugins(): PluggableList
   externalResources?: Partial<StaticResources>
 }
 
-export abstract class QuartzFilterPlugin {
+export type QuartzFilterPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzFilterPluginInstance 
-  abstract name: string
+export type QuartzFilterPluginInstance = {
-  abstract shouldPublish(content: ProcessedContent): boolean
+  name: string
+  shouldPublish(content: ProcessedContent): boolean
+}
+
+export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzEmitterPluginInstance 
+export type QuartzEmitterPluginInstance = {
+  name: string
+  emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emitCallback: EmitCallback): Promise<string[]>
+  getQuartzComponents(): QuartzComponent[]
 }
 
 export interface EmitOptions {
@@ -23,14 +39,3 @@ export interface EmitOptions {
 }
 
 export type EmitCallback = (data: EmitOptions) => Promise<string>
-export abstract class QuartzEmitterPlugin {
-  abstract name: string
-  abstract emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emitCallback: EmitCallback): Promise<string[]>
-  abstract getQuartzComponents(): QuartzComponent[]
-}
-
-export interface PluginTypes {
-  transformers: QuartzTransformerPlugin[],
-  filters: QuartzFilterPlugin[],
-  emitters: QuartzEmitterPlugin[],
-}

quartz/processors/filter.ts

@@ -1,8 +1,8 @@
 import { PerfTimer } from "../perf"
-import { QuartzFilterPlugin } from "../plugins/types"
+import { QuartzFilterPluginInstance } from "../plugins/types"
 import { ProcessedContent } from "../plugins/vfile"
 
-export function filterContent(plugins: QuartzFilterPlugin[], content: ProcessedContent[], verbose: boolean): ProcessedContent[] {
+export function filterContent(plugins: QuartzFilterPluginInstance[], content: ProcessedContent[], verbose: boolean): ProcessedContent[] {
   const perf = new PerfTimer()
   const initialLength = content.length
   for (const plugin of plugins) {

quartz/processors/parse.ts

@@ -11,12 +11,12 @@ import { slugify } from '../path'
 import path from 'path'
 import os from 'os'
 import workerpool, { Promise as WorkerPromise } from 'workerpool'
-import { QuartzTransformerPlugin } from '../plugins/types'
+import { QuartzTransformerPluginInstance } from '../plugins/types'
 import { QuartzLogger } from '../log'
 import chalk from 'chalk'
 
 export type QuartzProcessor = Processor<MDRoot, HTMLRoot, void>
-export function createProcessor(transformers: QuartzTransformerPlugin[]): QuartzProcessor {
+export function createProcessor(transformers: QuartzTransformerPluginInstance[]): QuartzProcessor {
   // base Markdown -> MD AST
   let processor = unified().use(remarkParse)
 
@@ -101,7 +101,7 @@ export function createFileParser(baseDir: string, fps: string[], verbose: boolea
   }
 }
 
-export async function parseMarkdown(transformers: QuartzTransformerPlugin[], baseDir: string, fps: string[], verbose: boolean): Promise<ProcessedContent[]> {
+export async function parseMarkdown(transformers: QuartzTransformerPluginInstance[], baseDir: string, fps: string[], verbose: boolean): Promise<ProcessedContent[]> {
   const perf = new PerfTimer()
   const log = new QuartzLogger(verbose)