08-插件系统

// 以评论为例
// 评论（排除掉运行时自身 client.ts）
const adapterModules = import.meta.glob<CommentAdapter>(['./*.ts', '!./client.ts'])
// 统计（未排除 client.ts，写成 statsScript: 'client' 会加载到运行时自身，故不要这么做）
// const pluginModules = import.meta.glob<StatsPlugin>('./*.ts')
const adapterCache = new Map<string, Promise<CommentAdapter | null>>()

function loadAdapter(name: string) {
  let cached = adapterCache.get(name)
  if (!cached) {
    cached = (async () => {
      const importer = adapterModules[`./${name}.ts`]
      if (!importer) { console.warn(`未找到 …${name}.ts，已停用`); return null }
      …
    })()
    adapterCache.set(name, cached)
  }
  return cached
}

// src/site.config.ts
commentScript: 'utterances',   // 启用 src/comments/utterances.ts
commentScript: '',             // 停用（默认）

<section class="comment-section is-loading" data-comment-script="utterances" aria-label="Comments">
  <div class="comment-skeleton" aria-hidden="true"><span/><span/><span/></div>
  <div class="comment-mount"></div>     <!-- ← 适配器唯一允许写入的容器 -->
</section>

const UTTERANCES_ORIGIN = 'https://utteranc.es'

export function mountComment(container: HTMLElement): void {
  if (!config.repo) throw new Error('[comments] utterances.repo 未配置，请编辑 src/comments/utterances.ts 填写 repo')
  const script = document.createElement('script')
  script.src = `${UTTERANCES_ORIGIN}/client.js`
  script.async = true
  script.crossOrigin = 'anonymous'
  script.setAttribute('repo', config.repo)
  script.setAttribute('issue-term', config.issueTerm)
  if (config.label) script.setAttribute('label', config.label)
  script.setAttribute('theme', utterancesTheme(isDark()))
  container.appendChild(script)
}

export function onThemeChange(dark: boolean): void {
  document.querySelectorAll<HTMLIFrameElement>('.utterances iframe').forEach((iframe) => {
    iframe.contentWindow?.postMessage({ type: 'set-theme', theme: utterancesTheme(dark) }, UTTERANCES_ORIGIN)
  })
}

// src/comments/waline.ts —— site.config.ts 填 commentScript: 'waline' 即启用

// ========== 配置区 ==========
const config = {
  serverURL: '',            // 必填：Waline 服务端地址，如 https://waline.example.com
  lang: 'zh-CN',
  dark: false,              // 是否使用内置暗色
  meta: ['nick', 'mail', 'link'],
  requiredMeta: ['nick'],
}
// ============================

let instance: { update?: (opts: object) => void } | null = null

export async function mountComment(container: HTMLElement): Promise<void> {
  if (!config.serverURL) throw new Error('[comments] waline.serverURL 未配置')
  // 动态注入一个带 ESM 的初始化脚本
  await new Promise<void>((resolve, reject) => {
    const s = document.createElement('script')
    s.type = 'module'
    s.src = `${config.serverURL}/client.js`
    s.onload = () => resolve()
    s.onerror = () => reject(new Error('[comments] Waline 客户端加载失败'))
    container.appendChild(s)
    const init = document.createElement('script')
    init.type = 'module'
    init.textContent = `
      import { init } from '${config.serverURL}/client.js'
      window.__waline = init({ el: '.comment-mount', serverURL: '${config.serverURL}', lang: '${config.lang}', dark: ${document.documentElement.classList.contains('dark')} })
    `
    container.appendChild(init)
  })
}

export function onThemeChange(dark: boolean): void {
  // Waline 的 dark 选项在 init 时固定，需要重新 init 或改 CSS 变量；
  // 最简单的方式是让 Waline 自己跟随 prefers-color-scheme，或在这里切换 .dark 类
  document.querySelector('.wl-panel')?.classList.toggle('wl-dark', dark)
}

// src/site.config.ts
statsScript: 'visitor-stats',   // 正式：需自建统计服务
statsScript: 'random-visitor',  // 测试：随机数字（出厂默认，上线前请改掉）
statsScript: '',                // 停用

document.querySelectorAll('[data-stats]').forEach((el) => {
  const path = el.closest('[data-stats-path]')?.dataset.statsPath   // ← 用最近祖先取 path
  switch (el.dataset.stats) {
    case 'site-pv': site.pv.push(el); break
    case 'site-uv': site.uv.push(el); break
    case 'article-pv':
    case 'article-uv': {
      if (!path) return                                            // ← 无 path 则忽略
      …按 path 分组
    }
  }
})

// src/stats/my-stats.ts —— site.config.ts 填 statsScript: 'my-stats' 即启用

export function trackVisit(path: string = location.pathname) {
  fetch(`https://api.example.com/log?path=${encodeURIComponent(path)}`).catch(() => {})
}

export function getSiteTotal() {
  return fetch('https://api.example.com/site')
    .then((r) => r.json())
    .then((d) => ({ siteTotal: d.views, siteUnique: d.visitors }))
}

export function getArticleStats(path: string) {
  return fetch(`https://api.example.com/page?path=${encodeURIComponent(path)}`)
    .then((r) => r.json())
    .then((d) => ({
      articleTotal: d.views,
      articleUnique: d.visitors,
      siteTotal: d.siteViews,      // 可选，能带就带（省一次请求）
      siteUnique: d.siteVisitors,
    }))
}

// src/site.config.ts
musicPlayer: {
  enabled: true,           // false 时整个播放器不渲染
  playlist: [] as MusicTrack[],
},