Merge branch 'main' into compare-quadrant-chart

Author: graphieros

app/components/Package/Versions.vue

@@ -211,12 +211,16 @@ const visibleTagRows = computed(() => {
       )
     : rowsMaybeFilteredForDeprecation
   const first = rows.slice(0, MAX_VISIBLE_TAGS)
-  const latestTagRow = rows.find(row => row.tag === 'latest')
-  // Ensure 'latest' tag is always included (at the end) if not already present
-  if (latestTagRow && !first.includes(latestTagRow)) {
-    first.pop()
-    first.push(latestTagRow)
+
+  // When no filter is active, ensure 'latest' is always shown (even if not fully loaded)
+  if (!isFilterActive.value) {
+    const latestTagRow = rows.find(row => row.tag === 'latest')
+    if (latestTagRow && !first.includes(latestTagRow)) {
+      first.pop()
+      first.push(latestTagRow)
+    }
   }
+
   return first
 })
 

app/components/Readme.vue

@@ -112,20 +112,25 @@ function handleClick(event: MouseEvent) {
 .readme :deep([data-level='1']) {
   font-size: 1.5rem;
 }
+
 .readme :deep([data-level='2']) {
   font-size: 1.25rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--border);
 }
+
 .readme :deep([data-level='3']) {
   font-size: 1.125rem;
 }
+
 .readme :deep([data-level='4']) {
   font-size: 1rem;
 }
+
 .readme :deep([data-level='5']) {
   font-size: 0.925rem;
 }
+
 .readme :deep([data-level='6']) {
   font-size: 0.875rem;
 }
@@ -137,9 +142,11 @@ function handleClick(event: MouseEvent) {
 .readme :deep(a) {
   @apply underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg transition-colors duration-200;
 }
+
 .readme :deep(a:hover) {
   @apply decoration-accent text-accent;
 }
+
 .readme :deep(a:focus-visible) {
   @apply decoration-accent text-accent;
 }
@@ -318,10 +325,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: var(--syntax-str);
   background: rgba(59, 130, 246, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='note']::before) {
   content: var(--i18n-note, 'Note');
   color: #3b82f6;
 }
+
 .readme :deep(blockquote[data-callout='note']::after) {
   background-color: #3b82f6;
   -webkit-mask: icon('i-lucide:info') no-repeat;
@@ -333,10 +342,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #22c55e;
   background: rgba(34, 197, 94, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='tip']::before) {
   content: var(--i18n-tip, 'Tip');
   color: #22c55e;
 }
+
 .readme :deep(blockquote[data-callout='tip']::after) {
   background-color: #22c55e;
   -webkit-mask: icon('i-lucide:lightbulb') no-repeat;
@@ -348,10 +359,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: var(--syntax-fn);
   background: rgba(168, 85, 247, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='important']::before) {
   content: var(--i18n-important, 'Important');
   color: var(--syntax-fn);
 }
+
 .readme :deep(blockquote[data-callout='important']::after) {
   background-color: var(--syntax-fn);
   -webkit-mask: icon('i-lucide:pin') no-repeat;
@@ -363,10 +376,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #eab308;
   background: rgba(234, 179, 8, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='warning']::before) {
   content: var(--i18n-warning, 'Warning');
   color: #eab308;
 }
+
 .readme :deep(blockquote[data-callout='warning']::after) {
   background-color: #eab308;
   -webkit-mask: icon('i-lucide:triangle-alert') no-repeat;
@@ -378,10 +393,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #ef4444;
   background: rgba(239, 68, 68, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='caution']::before) {
   content: var(--i18n-caution, 'Caution');
   color: #ef4444;
 }
+
 .readme :deep(blockquote[data-callout='caution']::after) {
   background-color: #ef4444;
   -webkit-mask: icon('i-lucide:circle-alert') no-repeat;
@@ -457,4 +474,18 @@ function handleClick(event: MouseEvent) {
   white-space: nowrap;
   border-width: 0;
 }
+
+/* Details element */
+.readme :deep(details) {
+  /**
+   * same size as [data-level='5']
+   */
+  font-size: 0.925rem;
+  color: var(--fg-subtle);
+
+  summary {
+    font-size: 1rem;
+    color: var(--fg-muted);
+  }
+}
 </style>

package.json

@@ -57,6 +57,7 @@
     "@iconify-json/svg-spinners": "1.2.4",
     "@iconify-json/vscode-icons": "1.2.45",
     "@intlify/shared": "11.3.0",
+    "@li/regexp-escape-polyfill": "jsr:0.3.4",
     "@lunariajs/core": "https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935",
     "@napi-rs/canvas": "0.1.97",
     "@nuxt/a11y": "1.0.0-alpha.1",

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+import { regExpEscape } from '@li/regexp-escape-polyfill'
+
 export type DevDependencySuggestionReason = 'known-package' | 'readme-hint'
 
 export interface DevDependencySuggestion {
@@ -59,15 +61,11 @@ function isKnownDevDependencyPackage(packageName: string): boolean {
   )
 }
 
-function escapeRegExp(text: string): string {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
 function hasReadmeDevInstallHint(packageName: string, readmeContent?: string | null): boolean {
   if (!readmeContent) return false
 
-  const escapedName = escapeRegExp(packageName)
-  const escapedNpmName = escapeRegExp(`npm:${packageName}`)
+  const escapedName = regExpEscape(packageName)
+  const escapedNpmName = regExpEscape(`npm:${packageName}`)
   const packageSpec = `(?:${escapedName}|${escapedNpmName})(?:@[\\w.-]+)?`
 
   const patterns = [

shared/utils/dev-dependency.ts

@@ -1,3 +1,5 @@
+import { regExpEscape } from '@li/regexp-escape-polyfill'
+
 // copied from https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs
 const emojis = {
   '100': '💯',
@@ -1907,7 +1909,7 @@ const emojis = {
 
 const emojisKeysRegex = new RegExp(
   Object.keys(emojis)
-    .map(key => `:${key}:`)
+    .map(key => `:${regExpEscape(key)}:`)
     .join('|'),
   'g',
 )

shared/utils/emoji.ts

@@ -1281,6 +1281,21 @@ describe('PackageVersions', () => {
         expect(text).not.toContain('0.5.0')
       })
     })
+
+    it('does not show latest tag when it does not match the filter', async () => {
+      const component = await mountSuspended(PackageVersions, { props: multiVersionProps })
+
+      const input = component.find('input[type="text"]')
+      await input.setValue('^1.0.0 <2.0.0')
+
+      const versionLinks = component.findAll('a').filter(isVersionLink)
+      const versions = versionLinks.map(l => l.text())
+
+      // 3.0.0 is latest but does NOT match the filter
+      expect(versions).not.toContain('3.0.0')
+      // 1.0.0 does match
+      expect(versions).toContain('1.0.0')
+    })
   })
 
   describe('error handling', () => {