perf(theme): improve build template (#289)

theme/src/node/config/index.ts

@@ -2,7 +2,6 @@ export * from './extendsBundlerOptions.js'
 export * from './resolveAlias.js'
 export * from './resolveLocaleOptions.js'
 export * from './resolveNotesOptions.js'
-export * from './resolvePageHead.js'
 
 export * from './resolveProvideData.js'
 export * from './resolveSearchOptions.js'

theme/src/node/config/resolvePageHead.ts

@@ -1,30 +0,0 @@
-import type { Page } from 'vuepress'
-import type { PlumeThemeLocaleOptions } from '../../shared/index.js'
-
-export function resolvePageHead(page: Page, localeOptions: PlumeThemeLocaleOptions) {
-  page.frontmatter.head ??= []
-  if (localeOptions.appearance ?? true) {
-    const appearance = typeof localeOptions.appearance === 'string'
-      ? localeOptions.appearance
-      : 'auto'
-
-    page.frontmatter.head.push([
-      'script',
-      { id: 'check-dark-mode' },
-      appearance === 'force-dark'
-        ? `document.documentElement.dataset.theme = 'dark'`
-        : `;(function () {
-        const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}';
-        const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const isDark = um === 'dark' || (um !== 'light' && sm);
-        document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-      })();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, ''),
-    ])
-  }
-
-  page.frontmatter.head?.push([
-    'script',
-    { id: 'check-mac-os' },
-    `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`,
-  ])
-}

theme/src/node/config/templateBuildRenderer.ts

@@ -1,11 +1,36 @@
+import type { PlumeThemeLocaleOptions } from '../../shared/index.js'
 import { templateRenderer, type TemplateRendererContext } from 'vuepress/utils'
 import { getThemePackage } from '../utils/index.js'
 
-export function templateBuildRenderer(template: string, context: TemplateRendererContext) {
+export function templateBuildRenderer(
+  template: string,
+  context: TemplateRendererContext,
+  options: PlumeThemeLocaleOptions,
+) {
   const pkg = getThemePackage()
   template = template
     .replace('{{ themeVersion }}', pkg.version || '')
     .replace(/^\s+|\s+$/gm, '')
     .replace(/\n/g, '')
+
+  if (options.appearance ?? true) {
+    const appearance = typeof options.appearance === 'string'
+      ? options.appearance
+      : 'auto'
+    const script = appearance === 'force-dark'
+      ? `document.documentElement.dataset.theme = 'dark'`
+      : `;(function () {
+    const um= localStorage.getItem('vuepress-theme-appearance') || '${appearance}';
+    const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDark = um === 'dark' || (um !== 'light' && sm);
+    document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+  })();`.replace(/^\s+|\s+$/gm, '').replace(/\n/g, '')
+
+    template = template
+      .replace('<!--vuepress-theme-plume-appearance-->', `<script id="check-dark-mode">${script}</script>`)
+  }
+  else {
+    template = template.replace('<!--vuepress-theme-plume-appearance-->', '')
+  }
   return templateRenderer(template, context)
 }

theme/src/node/theme.ts

@@ -2,7 +2,7 @@ import type { Page, Theme } from 'vuepress/core'
 import type { PlumeThemeOptions, PlumeThemePageData } from '../shared/index.js'
 import { sleep } from '@pengzhanbo/utils'
 import { generateAutoFrontmatter, initAutoFrontmatter, watchAutoFrontmatter } from './autoFrontmatter/index.js'
-import { extendsBundlerOptions, resolveAlias, resolvePageHead, resolveProvideData, resolveThemeOptions, templateBuildRenderer } from './config/index.js'
+import { extendsBundlerOptions, resolveAlias, resolveProvideData, resolveThemeOptions, templateBuildRenderer } from './config/index.js'
 import { getThemeConfig, initConfigLoader, waitForConfigLoaded, watchConfigFile } from './loadConfig/index.js'
 import { getPlugins } from './plugins/index.js'
 import { prepareData, watchPrepare } from './prepare/index.js'
@@ -37,7 +37,8 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme {
 
       extendsBundlerOptions,
 
-      templateBuildRenderer,
+      templateBuildRenderer: (template, context) =>
+        templateBuildRenderer(template, context, getThemeConfig().localeOptions),
 
       extendsMarkdown: async (_, app) => {
         const { autoFrontmatter, localeOptions } = await waitForConfigLoaded()
@@ -53,7 +54,6 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme {
       extendsPage: async (page) => {
         const { localeOptions } = getThemeConfig()
         extendsPageData(page as Page<PlumeThemePageData>, localeOptions)
-        resolvePageHead(page, localeOptions)
       },
 
       onInitialized: async (app) => {

theme/templates/build.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="generator" content="VuePress {{ version }}" />
     <meta name="theme" content="VuePress Theme Plume {{ themeVersion }}" />
+    <script id="check-mac-os">document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))</script>
+    <!--vuepress-theme-plume-appearance-->
     <!--vuepress-ssr-head-->
     <!--vuepress-ssr-styles-->
     <!--vuepress-ssr-preload-->