refactor: unify QuartzComponent type to structural interface (Phase C)

- Changed QuartzComponent from ComponentType<QuartzComponentProps> to callable type ((props: QuartzComponentProps) => any)
- Added optional displayName property for better debugging
- Removed ComponentType import from preact
- Removed all 13 'as QuartzComponent' type casts from quartz.layout.ts
- Community plugin components now directly assignable without casts

quartz.layout.ts

@@ -1,21 +1,20 @@
 import { PageLayout, SharedLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
-import { QuartzComponent } from "./quartz/components/types"
 import * as Plugin from "./.quartz/plugins"
 
 // Create plugin components once and reuse across layouts
-const explorerComponent = Plugin.Explorer() as QuartzComponent
-const graphComponent = Plugin.Graph() as QuartzComponent
-const searchComponent = Plugin.Search() as QuartzComponent
-const backlinksComponent = Plugin.Backlinks() as QuartzComponent
-const tocComponent = Plugin.TableOfContents() as QuartzComponent
-const articleTitleComponent = Plugin.ArticleTitle() as QuartzComponent
-const contentMetaComponent = Plugin.ContentMeta() as QuartzComponent
-const tagListComponent = Plugin.TagList() as QuartzComponent
-const pageTitleComponent = Plugin.PageTitle() as QuartzComponent
-const darkmodeComponent = Plugin.Darkmode() as QuartzComponent
-const readerModeComponent = Plugin.ReaderMode() as QuartzComponent
-const breadcrumbsComponent = Plugin.Breadcrumbs() as QuartzComponent
+const explorerComponent = Plugin.Explorer()
+const graphComponent = Plugin.Graph()
+const searchComponent = Plugin.Search()
+const backlinksComponent = Plugin.Backlinks()
+const tocComponent = Plugin.TableOfContents()
+const articleTitleComponent = Plugin.ArticleTitle()
+const contentMetaComponent = Plugin.ContentMeta()
+const tagListComponent = Plugin.TagList()
+const pageTitleComponent = Plugin.PageTitle()
+const darkmodeComponent = Plugin.Darkmode()
+const readerModeComponent = Plugin.ReaderMode()
+const breadcrumbsComponent = Plugin.Breadcrumbs()
 
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
@@ -24,14 +23,14 @@ export const sharedPageComponents: SharedLayout = {
   afterBody: [
     // Plugin.Comments({
     //   provider: "giscus",
-    //   options: {}) as QuartzComponent,
+    //   options: {}}),
   ],
   footer: Plugin.Footer({
     links: {
       GitHub: "https://github.com/jackyzha0/quartz",
       "Discord Community": "https://discord.gg/cRFFHYye7t",
     },
-  }) as QuartzComponent,
+  }),
 }
 
 // components for pages that display a single page (e.g. a single note)

quartz/components/types.ts

@@ -1,4 +1,4 @@
-import { ComponentType, JSX } from "preact"
+import { JSX } from "preact"
 import { StaticResources, StringResource } from "../util/resources"
 import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
@@ -18,7 +18,8 @@ export type QuartzComponentProps = {
     [key: string]: any
   }
 
-export type QuartzComponent = ComponentType<QuartzComponentProps> & {
+export type QuartzComponent = ((props: QuartzComponentProps) => any) & {
+  displayName?: string
   css?: StringResource
   beforeDOMLoaded?: StringResource
   afterDOMLoaded?: StringResource