|
| 1 | +<script setup lang="ts"> |
| 2 | +import { ref, computed } from 'vue' |
| 3 | +
|
| 4 | +declare const __VITE_VERSION__: string |
| 5 | +
|
| 6 | +// Constants |
| 7 | +const supportedVersionMessage = { |
| 8 | + color: 'var(--vp-c-brand-1)', |
| 9 | + text: 'supported', |
| 10 | +} |
| 11 | +const notSupportedVersionMessage = { |
| 12 | + color: 'var(--vp-c-danger-1)', |
| 13 | + text: 'not supported', |
| 14 | +} |
| 15 | +const previousMajorLatestMinors: Record<string, string> = { |
| 16 | + '2': '2.9', |
| 17 | + '3': '3.2', |
| 18 | + '4': '4.5', |
| 19 | + '5': '5.4', |
| 20 | + '6': '6.4', |
| 21 | +} |
| 22 | +
|
| 23 | +// Current latest Vite version and support info |
| 24 | +const parsedViteVersion = parseVersion(__VITE_VERSION__)! |
| 25 | +const supportInfo = computeSupportInfo(parsedViteVersion) |
| 26 | +
|
| 27 | +// Check supported version input |
| 28 | +const checkedVersion = ref(`${Math.max(parsedViteVersion.major - 3, 2)}.0.0`) |
| 29 | +const checkedResult = computed(() => { |
| 30 | + const version = checkedVersion.value |
| 31 | + if (!isValidViteVersion(version)) return notSupportedVersionMessage |
| 32 | +
|
| 33 | + const parsedVersion = parseVersion(checkedVersion.value) |
| 34 | + if (!parsedVersion) return notSupportedVersionMessage |
| 35 | +
|
| 36 | + const satisfies = (targetVersion: string) => { |
| 37 | + const compared = parseVersion(targetVersion)! |
| 38 | + return ( |
| 39 | + parsedVersion.major === compared.major && |
| 40 | + parsedVersion.minor >= compared.minor |
| 41 | + ) |
| 42 | + } |
| 43 | + const satisfiesOneSupportedVersion = |
| 44 | + parsedVersion.major >= parsedViteVersion.major || // Treat future major versions as supported |
| 45 | + supportInfo.regularPatches.some(satisfies) || |
| 46 | + supportInfo.importantFixes.some(satisfies) || |
| 47 | + supportInfo.securityPatches.some(satisfies) |
| 48 | +
|
| 49 | + return satisfiesOneSupportedVersion |
| 50 | + ? supportedVersionMessage |
| 51 | + : notSupportedVersionMessage |
| 52 | +}) |
| 53 | +
|
| 54 | +function parseVersion(version: string) { |
| 55 | + let [major, minor, patch] = version.split('.').map((v) => { |
| 56 | + const num = /^\d+$/.exec(v)?.[0] |
| 57 | + return num ? parseInt(num) : null |
| 58 | + }) |
| 59 | + if (!major) return null |
| 60 | + minor ??= 0 |
| 61 | + patch ??= 0 |
| 62 | +
|
| 63 | + return { major, minor, patch } |
| 64 | +} |
| 65 | +
|
| 66 | +function computeSupportInfo( |
| 67 | + version: NonNullable<ReturnType<typeof parseVersion>>, |
| 68 | +) { |
| 69 | + const { major, minor } = version |
| 70 | + const f = (versions: string[]) => { |
| 71 | + return versions |
| 72 | + .map((v) => previousMajorLatestMinors[v] ?? v) |
| 73 | + .filter((version) => { |
| 74 | + if (!isValidViteVersion(version)) return false |
| 75 | + // Negative versions are invalid |
| 76 | + if (/-\d/.test(version)) return false |
| 77 | + return true |
| 78 | + }) |
| 79 | + } |
| 80 | +
|
| 81 | + return { |
| 82 | + regularPatches: f([`${major}.${minor}`]), |
| 83 | + importantFixes: f([`${major - 1}`, `${major}.${minor - 1}`]), |
| 84 | + securityPatches: f([`${major - 2}`, `${major}.${minor - 2}`]), |
| 85 | + } |
| 86 | +} |
| 87 | +
|
| 88 | +function versionsToText(versions: string[]) { |
| 89 | + versions = versions.map((v) => `<code>vite@${v}</code>`) |
| 90 | + if (versions.length === 0) return '' |
| 91 | + if (versions.length === 1) return versions[0] |
| 92 | + return ( |
| 93 | + versions.slice(0, -1).join(', ') + ' and ' + versions[versions.length - 1] |
| 94 | + ) |
| 95 | +} |
| 96 | +
|
| 97 | +function isValidViteVersion(version: string) { |
| 98 | + if (version.length === 1) version += '.' |
| 99 | + // Vite 0.x shouldn't be mentioned, and Vite 1.x was never released |
| 100 | + if (version.startsWith('0.') || version.startsWith('1.')) return false |
| 101 | + return true |
| 102 | +} |
| 103 | +</script> |
| 104 | + |
| 105 | +<template> |
| 106 | + <div> |
| 107 | + <ul> |
| 108 | + <li v-if="supportInfo.regularPatches.length"> |
| 109 | + Regular patches are released for |
| 110 | + <span v-html="versionsToText(supportInfo.regularPatches)"></span>. |
| 111 | + </li> |
| 112 | + <li v-if="supportInfo.importantFixes.length"> |
| 113 | + Important fixes and security patches are backported to |
| 114 | + <span v-html="versionsToText(supportInfo.importantFixes)"></span>. |
| 115 | + </li> |
| 116 | + <li v-if="supportInfo.securityPatches.length"> |
| 117 | + Security patches are also backported to |
| 118 | + <span v-html="versionsToText(supportInfo.securityPatches)"></span>. |
| 119 | + </li> |
| 120 | + <li> |
| 121 | + All versions before these are no longer supported. Users should upgrade |
| 122 | + to receive updates. |
| 123 | + </li> |
| 124 | + </ul> |
| 125 | + <p> |
| 126 | + If you're using Vite |
| 127 | + <input |
| 128 | + class="checked-input" |
| 129 | + type="text" |
| 130 | + v-model="checkedVersion" |
| 131 | + placeholder="0.0.0" |
| 132 | + />, it is |
| 133 | + <strong :style="{ color: checkedResult.color }">{{ |
| 134 | + checkedResult.text |
| 135 | + }}</strong |
| 136 | + >. |
| 137 | + </p> |
| 138 | + </div> |
| 139 | +</template> |
| 140 | + |
| 141 | +<style scoped> |
| 142 | +.checked-input { |
| 143 | + display: inline-block; |
| 144 | + padding: 0px 5px; |
| 145 | + width: 100px; |
| 146 | + color: var(--vp-c-text-1); |
| 147 | + background: var(--vp-c-bg-soft); |
| 148 | + font-size: var(--vp-code-font-size); |
| 149 | + font-family: var(--vp-font-family-mono); |
| 150 | + border: 1px solid var(--vp-c-divider); |
| 151 | + border-radius: 5px; |
| 152 | + transition: border-color 0.1s; |
| 153 | +} |
| 154 | +
|
| 155 | +.checked-input:focus, |
| 156 | +.checked-input:hover { |
| 157 | + border-color: var(--vp-c-brand); |
| 158 | +} |
| 159 | +</style> |
0 commit comments