docs(release): update supported versions wording

.vitepress/config.ts

@@ -517,6 +517,9 @@ export default defineConfig({
         'gsap/dist/MotionPathPlugin',
       ],
     },
+    define: {
+      __VITE_VERSION__: JSON.stringify(viteVersion),
+    },
   },
   buildEnd,
 })

.vitepress/theme/components/SupportedVersions.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+declare const __VITE_VERSION__: string
+
+// 定数
+const supportedVersionMessage = {
+  color: 'var(--vp-c-brand-1)',
+  text: 'サポートされています',
+}
+const notSupportedVersionMessage = {
+  color: 'var(--vp-c-danger-1)',
+  text: 'サポートされていません',
+}
+const previousMajorLatestMinors: Record<string, string> = {
+  '2': '2.9',
+  '3': '3.2',
+  '4': '4.5',
+  '5': '5.4',
+  '6': '6.4',
+}
+
+// 現在の最新 Vite バージョンとサポート情報
+const parsedViteVersion = parseVersion(__VITE_VERSION__)!
+const supportInfo = computeSupportInfo(parsedViteVersion)
+
+// サポートバージョン入力のチェック
+const checkedVersion = ref(`${Math.max(parsedViteVersion.major - 3, 2)}.0.0`)
+const checkedResult = computed(() => {
+  const version = checkedVersion.value
+  if (!isValidViteVersion(version)) return notSupportedVersionMessage
+
+  const parsedVersion = parseVersion(checkedVersion.value)
+  if (!parsedVersion) return notSupportedVersionMessage
+
+  const satisfies = (targetVersion: string) => {
+    const compared = parseVersion(targetVersion)!
+    return (
+      parsedVersion.major === compared.major &&
+      parsedVersion.minor >= compared.minor
+    )
+  }
+  const satisfiesOneSupportedVersion =
+    parsedVersion.major >= parsedViteVersion.major || // 将来のメジャーバージョンをサポート対象として扱う
+    supportInfo.regularPatches.some(satisfies) ||
+    supportInfo.importantFixes.some(satisfies) ||
+    supportInfo.securityPatches.some(satisfies)
+
+  return satisfiesOneSupportedVersion
+    ? supportedVersionMessage
+    : notSupportedVersionMessage
+})
+
+function parseVersion(version: string) {
+  let [major, minor, patch] = version.split('.').map((v) => {
+    const num = /^\d+$/.exec(v)?.[0]
+    return num ? parseInt(num) : null
+  })
+  if (!major) return null
+  minor ??= 0
+  patch ??= 0
+
+  return { major, minor, patch }
+}
+
+function computeSupportInfo(
+  version: NonNullable<ReturnType<typeof parseVersion>>,
+) {
+  const { major, minor } = version
+  const f = (versions: string[]) => {
+    return versions
+      .map((v) => previousMajorLatestMinors[v] ?? v)
+      .filter((version) => {
+        if (!isValidViteVersion(version)) return false
+        // 負のバージョンは無効
+        if (/-\d/.test(version)) return false
+        return true
+      })
+  }
+
+  return {
+    regularPatches: f([`${major}.${minor}`]),
+    importantFixes: f([`${major - 1}`, `${major}.${minor - 1}`]),
+    securityPatches: f([`${major - 2}`, `${major}.${minor - 2}`]),
+  }
+}
+
+function versionsToText(versions: string[]) {
+  versions = versions.map((v) => `<code>vite@${v}</code>`)
+  if (versions.length === 0) return ''
+  if (versions.length === 1) return versions[0]
+  return (
+    versions.slice(0, -1).join('、') + ' および ' + versions[versions.length - 1]
+  )
+}
+
+function isValidViteVersion(version: string) {
+  if (version.length === 1) version += '.'
+  // Vite 0.x は記載すべきではなく、Vite 1.x はリリースされなかった
+  if (version.startsWith('0.') || version.startsWith('1.')) return false
+  return true
+}
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li v-if="supportInfo.regularPatches.length">
+        定期的なパッチは <span v-html="versionsToText(supportInfo.regularPatches)"></span> にリリースされます。
+
+      </li>
+      <li v-if="supportInfo.importantFixes.length">
+        重要な修正とセキュリティパッチは <span v-html="versionsToText(supportInfo.importantFixes)"></span> にバックポートされます。
+
+      </li>
+      <li v-if="supportInfo.securityPatches.length">
+        セキュリティパッチは <span v-html="versionsToText(supportInfo.securityPatches)"></span> にもバックポートされます。
+
+      </li>
+      <li>
+        これより前のすべてのバージョンはサポートされていません。ユーザーはアップデートを受け取るためにアップグレードする必要があります。
+
+      </li>
+    </ul>
+    <p>
+      Vite
+      <input
+        class="checked-input"
+        type="text"
+        v-model="checkedVersion"
+        placeholder="0.0.0"
+      /> を使用している場合、それは
+      <strong :style="{ color: checkedResult.color }">{{
+        checkedResult.text
+      }}</strong
+      >。
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.checked-input {
+  display: inline-block;
+  padding: 0px 5px;
+  width: 100px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-soft);
+  font-size: var(--vp-code-font-size);
+  font-family: var(--vp-font-family-mono);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 5px;
+  transition: border-color 0.1s;
+}
+
+.checked-input:focus,
+.checked-input:hover {
+  border-color: var(--vp-c-brand);
+}
+</style>

releases.md

@@ -1,3 +1,7 @@
+<script setup>
+import SupportedVersions from './.vitepress/theme/components/SupportedVersions.vue';
+</script>
+
 # リリース
 
 Vite のリリースは[セマンティック バージョニング](https://semver.org/)に準拠します。Vite の [npm パッケージページ](https://www.npmjs.com/package/vite)で Vite の最新安定バージョンを確認できます。
@@ -12,19 +16,20 @@ Vite には、一定のリリースサイクルがありません。
 - **マイナー**リリースは常に新しい機能が含まれており、必要に応じてリリースされます。マイナーリリースには常にベータプレリリース段階があります（通常は 2 ヶ月ごと）。
 - **メジャー**リリースは通常 [Node.js の EOL スケジュール](https://endoflife.date/nodejs)に従い、予めアナウンスされます。これらのリリースはエコシステムとの長期的な議論を経て、アルファプレリリース段階とベータプレリリース段階があります（通常は 1 年ごと）。
 
-Vite チームがサポートする Vite のバージョン範囲は、以下の通りに自動的に決定されます:
+## サポートバージョン
+
+簡単に説明すると、現在サポートされている Vite のバージョンは以下の通りです:
+
+<SupportedVersions />
+
+<br>
+
+サポートされるバージョン範囲は、以下の通りに自動的に決定されます:
 
 - **現在のマイナー**は、定期的に修正を受け取ります。
 - **1 つ前のメジャー**（最新のマイナー向けのみ）および **1 つ前のマイナー**は、重要な修正とセキュリティパッチを受け取ります。
 - **最後から 2 番目のメジャー**（その最新のマイナー向けのみ）および**最後から 2 番目のマイナー**は、セキュリティパッチを受け取ります。
 - これらより前のバージョンはすべてサポートされなくなります。
-
-例として、Vite の最新バージョンが 5.3.10 の場合:
-
-- 定期パッチは `vite@5.3` に対してリリースされます。
-- 重要な修正とセキュリティパッチは、`vite@4` と `vite@5.2` にバックポートされます。
-- セキュリティパッチは、`vite@3` と `vite@5.1` にもバックポートされます。
-- `vite@2` および `vite@5.0` はサポートされなくなります。アップデートを受け取るには、ユーザーはアップグレードする必要があります。
 
 Vite を定期的にアップデートすることをお勧めします。各メジャーバージョンをアップデートする際には、[移行ガイド](/guide/migration)をご確認ください。Vite チームは、新しいバージョンの品質を確保するために、エコシステムの主要なプロジェクトと緊密に連携しています。Vite チームは、新しい Vite のバージョンをリリースする前に [vite-ecosystem-ci プロジェクト](https://github.com/vitejs/vite-ecosystem-ci)を用いてテストしています。Vite を利用しているほとんどのプロジェクトは、新しいバージョンのリリース後すぐにサポートを提供したり、新しいバージョンに移行したりできるはずです。