From 2d95d11cbb4eba1ab6ffbbb21fa41a8f31d266a7 Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Wed, 20 Mar 2024 18:35:08 +0800 Subject: [PATCH] fix(docs|unconfig-vitepress): hydration mismatches issues in some pages, missing components, and bad layout slots renderer (#111) Signed-off-by: Neko Ayaka --- .github/workflows/ci-build.yaml | 16 +++++++-- docs/.vitepress/config.ts | 16 ++++++++- docs/vite-env.d.ts | 10 ++++++ docs/vite.config.ts | 19 +++++++++- .../package.json | 13 +++---- .../src/client/components/Changelog.vue | 32 +++++++++-------- .../src/client/components/Contributors.vue | 1 + .../src/client/utils.ts | 5 +-- .../src/client/virtual.d.ts | 24 +++---------- .../src/types/index.ts | 2 +- pnpm-lock.yaml | 35 +++++++++---------- 11 files changed, 104 insertions(+), 69 deletions(-) create mode 100644 docs/vite-env.d.ts diff --git a/.github/workflows/ci-build.yaml b/.github/workflows/ci-build.yaml index 9ff221ee..dac1c8bb 100644 --- a/.github/workflows/ci-build.yaml +++ b/.github/workflows/ci-build.yaml @@ -65,10 +65,20 @@ jobs: - name: Install dependencies run: pnpm install --frozen-lockfile + - name: Build packages + run: pnpm packages:build + env: + # As suggested in Verbose Build option to be able to track down errors https://github.com/vuejs/vitepress/issues/422 + # vitepress build command does not have --debug option, so we need to set it manually where the debug package is used. + DEBUG: '*' + - name: Build docs - run: | - pnpm packages:build - pnpm docs:build + run: pnpm docs:build + env: + # As suggested in Verbose Build option to be able to track down errors https://github.com/vuejs/vitepress/issues/422 + # vitepress build command does not have --debug option, so we need to set it manually where the debug package is used. + DEBUG: 'vitepress:*' + VUE_PROD_HYDRATION_MISMATCH_DETAILS_FLAG: '1' - name: Upload artifact uses: actions/upload-artifact@v4 diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1abe8b5b..c852c46b 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,4 +1,4 @@ -import { cwd } from 'node:process' +import { cwd, env } from 'node:process' import { join, relative } from 'node:path' import { type DefaultTheme, defineConfig } from 'vitepress' import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links' @@ -83,8 +83,22 @@ export const sidebars: Record = { ], } +function getVueProdHydrationMismatchDetailsFlag() { + if (!env) { + console.warn('WARNING: env is not available when trying to get Vue Prod Hydration Mismatch Details Flag') + throw new Error('env is not available') + } + + return !!env.VUE_PROD_HYDRATION_MISMATCH_DETAILS_FLAG +} + // https://vitepress.dev/reference/site-config export default defineConfig({ + vite: { + define: { + __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: getVueProdHydrationMismatchDetailsFlag(), + }, + }, lastUpdated: true, themeConfig: { outline: 'deep', diff --git a/docs/vite-env.d.ts b/docs/vite-env.d.ts new file mode 100644 index 00000000..e9e637e1 --- /dev/null +++ b/docs/vite-env.d.ts @@ -0,0 +1,10 @@ +// Env Variables and Modes | Vite +// https://vitejs.dev/guide/env-and-mode#intellisense-for-typescript + +interface ImportMetaEnv { + readonly VUE_PROD_HYDRATION_MISMATCH_DETAILS_FLAG?: '1' +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/docs/vite.config.ts b/docs/vite.config.ts index fc635462..064ad6cb 100644 --- a/docs/vite.config.ts +++ b/docs/vite.config.ts @@ -1,16 +1,33 @@ -import { join, resolve } from 'node:path' +import { dirname, join, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' +import { env } from 'node:process' import { defineConfig } from 'vite' import UnoCSS from 'unocss/vite' import Inspect from 'vite-plugin-inspect' import { GitChangelog, GitChangelogMarkdownSection } from '@nolebase/vitepress-plugin-git-changelog/vite' import { PageProperties, PagePropertiesMarkdownSection } from '@nolebase/vitepress-plugin-page-properties/vite' +function getVueProdHydrationMismatchDetailsFlag() { + if (!env) { + console.warn('WARNING: env is not available when trying to get Vue Prod Hydration Mismatch Details Flag') + throw new Error('env is not available') + } + + return !!env.VUE_PROD_HYDRATION_MISMATCH_DETAILS_FLAG +} + +const __filename = fileURLToPath(import.meta.url) +const __dirname = dirname(__filename) + export default defineConfig({ assetsInclude: [ '**/*.mov', '**/*.mp4', '**/*.riv', ], + define: { + __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: getVueProdHydrationMismatchDetailsFlag(), + }, resolve: { alias: { '@nolebase/ui': resolve(__dirname, '../packages/ui/src/'), diff --git a/packages/vitepress-plugin-git-changelog/package.json b/packages/vitepress-plugin-git-changelog/package.json index d7fe8804..d4305a3b 100644 --- a/packages/vitepress-plugin-git-changelog/package.json +++ b/packages/vitepress-plugin-git-changelog/package.json @@ -54,20 +54,17 @@ "build": "unbuild" }, "peerDependencies": { - "dayjs": ">=1.11.1", - "md5": ">=2.3.0", - "simple-git": ">=3.21.0", "vitepress": ">=1.0.0-rc.44" }, "dependencies": { "@iconify-json/octicon": "^1.1.52", "@nolebase/ui": "workspace:^", - "dayjs": "^1.11.10", - "md5": "^2.3.0" - }, - "devDependencies": { - "builtin-modules": "^3.3.0", "date-fns": "^3.3.1", + "md5": "^2.3.0", "simple-git": "^3.22.0" + }, + "devDependencies": { + "@types/md5": "^2.3.5", + "builtin-modules": "^3.3.0" } } diff --git a/packages/vitepress-plugin-git-changelog/src/client/components/Changelog.vue b/packages/vitepress-plugin-git-changelog/src/client/components/Changelog.vue index 4a9a32d3..abae5bbe 100644 --- a/packages/vitepress-plugin-git-changelog/src/client/components/Changelog.vue +++ b/packages/vitepress-plugin-git-changelog/src/client/components/Changelog.vue @@ -1,5 +1,5 @@ diff --git a/packages/vitepress-plugin-git-changelog/src/client/components/Contributors.vue b/packages/vitepress-plugin-git-changelog/src/client/components/Contributors.vue index 31756933..db679d88 100644 --- a/packages/vitepress-plugin-git-changelog/src/client/components/Contributors.vue +++ b/packages/vitepress-plugin-git-changelog/src/client/components/Contributors.vue @@ -8,6 +8,7 @@ import { useRawPath } from '../composables/path' import { useCommits } from '../composables/commits' import { useI18n } from '../composables/i18n' import { InjectionKey } from '../constants' +import type { Commit } from '../../types' interface ContributorInfo { name: string diff --git a/packages/vitepress-plugin-git-changelog/src/client/utils.ts b/packages/vitepress-plugin-git-changelog/src/client/utils.ts index 660a3847..058789ab 100644 --- a/packages/vitepress-plugin-git-changelog/src/client/utils.ts +++ b/packages/vitepress-plugin-git-changelog/src/client/utils.ts @@ -1,4 +1,5 @@ import { formatDistanceToNow, toDate } from 'date-fns' +import type { Locale } from 'date-fns' import * as DateFnsLocales from 'date-fns/locale' export function renderMarkdown(markdownText = '') { @@ -24,10 +25,10 @@ export function renderCommitMessage(repoLink: string, msg: string) { .replace(/\#([0-9]+)/g, `#$1`) } -export function formatDistanceToNowFromValue(value: string | number | Date, localeName = 'enUS') { +export function formatDistanceToNowFromValue(value: Date, localeName = 'enUS') { try { return formatDistanceToNow(toDate(value), { - locale: DateFnsLocales[localeName] || 'enUS', + locale: (DateFnsLocales as Record)[localeName] || 'enUS', addSuffix: true, }) } diff --git a/packages/vitepress-plugin-git-changelog/src/client/virtual.d.ts b/packages/vitepress-plugin-git-changelog/src/client/virtual.d.ts index 05c7e1cd..6ce54cb5 100644 --- a/packages/vitepress-plugin-git-changelog/src/client/virtual.d.ts +++ b/packages/vitepress-plugin-git-changelog/src/client/virtual.d.ts @@ -1,24 +1,10 @@ -interface Commit { - path: string[][] - tag?: string - release_tag_url?: string - hash: string - hash_url?: string - date: string - message: string - refs?: string - body?: string - author_name: string - author_email: string - author_avatar: string - repo_url?: string -} +declare module 'virtual:nolebase-git-changelog' { + import type { Commit } from '../types' -interface Changelog { - commits: Commit[] -} + interface Changelog { + commits: Commit[] + } -declare module 'virtual:nolebase-git-changelog' { const changelog: Changelog export default changelog } diff --git a/packages/vitepress-plugin-git-changelog/src/types/index.ts b/packages/vitepress-plugin-git-changelog/src/types/index.ts index a417d741..d89536b9 100644 --- a/packages/vitepress-plugin-git-changelog/src/types/index.ts +++ b/packages/vitepress-plugin-git-changelog/src/types/index.ts @@ -5,7 +5,7 @@ export interface Commit { hash: string hash_url?: string date: string - date_timestamp?: number + date_timestamp: number message: string refs?: string body?: string diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63c1fc3f..8705ef1f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -179,25 +179,25 @@ importers: '@nolebase/ui': specifier: workspace:^ version: link:../ui - dayjs: - specifier: ^1.11.10 - version: 1.11.10 + date-fns: + specifier: ^3.3.1 + version: 3.3.1 md5: specifier: ^2.3.0 version: 2.3.0 + simple-git: + specifier: ^3.22.0 + version: 3.22.0 vitepress: specifier: '>=1.0.0-rc.44' version: 1.0.0-rc.44(@algolia/client-search@4.22.1)(@types/node@20.11.28)(less@4.2.0)(postcss@8.4.35)(search-insights@2.13.0)(typescript@5.4.2) devDependencies: + '@types/md5': + specifier: ^2.3.5 + version: 2.3.5 builtin-modules: specifier: ^3.3.0 version: 3.3.0 - date-fns: - specifier: ^3.3.1 - version: 3.3.1 - simple-git: - specifier: ^3.22.0 - version: 3.22.0 packages/vitepress-plugin-highlight-targeted-heading: dependencies: @@ -1259,11 +1259,11 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color - dev: true + dev: false /@kwsites/promise-deferred@1.1.1: resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==} - dev: true + dev: false /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -1738,6 +1738,10 @@ packages: '@types/linkify-it': 3.0.5 '@types/mdurl': 1.0.5 + /@types/md5@2.3.5: + resolution: {integrity: sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==} + dev: true + /@types/mdast@3.0.15: resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==} dependencies: @@ -3487,11 +3491,6 @@ packages: /date-fns@3.3.1: resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==} - dev: true - - /dayjs@1.11.10: - resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} - dev: false /de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -3518,7 +3517,6 @@ packages: optional: true dependencies: ms: 2.1.2 - dev: true /deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} @@ -5303,7 +5301,6 @@ packages: /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} - dev: true /ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -6240,7 +6237,7 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color - dev: true + dev: false /sirv@2.0.4: resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}