-
+
+
-
@@ -346,6 +354,10 @@ useSeoMeta({
class="text-sm font-medium"
:class="entry.version === version ? 'text-accent' : ''"
dir="ltr"
+ @mouseenter="selectedVersion = entry.version"
+ @mouseleave="selectedVersion = null"
+ @focus="selectedVersion = entry.version"
+ @blur="selectedVersion = null"
>
{{ entry.version }}
@@ -427,18 +439,3 @@ useSeoMeta({
-
-
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 934d81e471..d891f3abdb 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -42,15 +42,7 @@ defineOgImage(
version: () => requestedVersion.value,
variant: 'download-chart',
},
- [
- { key: 'og', alt: () => `npm package ${packageName.value} download chart and stats` },
- {
- key: 'whatsapp',
- width: 800,
- height: 800,
- alt: () => `npm package ${packageName.value} download chart and stats`,
- },
- ],
+ { alt: () => `npm package ${packageName.value} download chart and stats` },
)
if (import.meta.server) {
@@ -108,15 +100,20 @@ const {
)
//copy README file as Markdown
-const { copied: copiedReadme, copy: copyReadme } = useClipboardAsync(
- async () => {
+const {
+ copied: copiedReadme,
+ copy,
+ copyPending: copyReadmePending,
+} = useClipboard({
+ copiedDuring: 2000,
+})
+
+function copyReadme() {
+ copy(async () => {
await fetchReadmeMarkdown()
return readmeMarkdownData.value?.markdown ?? ''
- },
- {
- copiedDuring: 2000,
- },
-)
+ })
+}
function prefetchReadmeMarkdown() {
if (readmeMarkdownStatus.value === 'idle') {
@@ -207,6 +204,7 @@ const {
error,
} = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
+const { data: licenseChangeData } = useLicenseChanges(packageName, resolvedVersion)
const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
useCommandPalettePackageVersions(packageName)
@@ -912,6 +910,8 @@ const showSkeleton = shallowRef(false)
+
+
- {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+ {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+
a + b, 0)
@@ -451,6 +452,37 @@ export type FacetBarChartConfig = VueUiHorizontalBarConfig & {
$t: TrendTranslateFunction
}
+export type TimelineSizeCacheValue = {
+ totalSize: number
+ dependencyCount: number
+}
+
+export type ConvertedTimelineSizeCacheEntry = TimelineSizeCacheValue & {
+ name: string
+}
+
+export type EnrichedTimelineSizeCacheEntry = ConvertedTimelineSizeCacheEntry & {
+ version: string
+ time?: string
+ license?: string
+ type?: string
+ hasTypes?: boolean
+ hasTrustedPublisher?: boolean
+ hasProvenance?: boolean
+ tags: string[]
+ events: SubEvent[]
+ hasPositive: boolean
+ hasNegative: boolean
+}
+
+export type TimelineChartConfig = VueUiXyConfig & {
+ metric: 'totalSize' | 'dependencyCount'
+ packageName: string
+ copy: (text: string) => Promise
+ $t: TrendTranslateFunction
+ numberFormatter: (value: number) => string
+}
+
// Used for TrendsChart.vue
export function createAltTextForTrendLineChart({
dataset,
@@ -705,6 +737,68 @@ export async function copyAltTextForCompareScatterChart({
await config.copy(altText)
}
+// Used for TimelineChart.vue
+export function createAltTextForTimelineChart({
+ dataset,
+ config,
+}: AltCopyArgs) {
+ if (!dataset) return ''
+ const metric =
+ config.metric === 'totalSize'
+ ? config.$t('package.stats.install_size')
+ : config.$t('compare.dependencies')
+ const withEvents = dataset.filter(d => d.events.length)
+ const first = dataset[0]
+ const last = dataset.at(-1)
+
+ if (!first || !last) return ''
+
+ const firstValue = config.metric === 'totalSize' ? first?.totalSize : first?.dependencyCount
+ const lastValue = config.metric === 'totalSize' ? last?.totalSize : last?.dependencyCount
+ const baseline = firstValue ?? 0
+ const current = lastValue ?? baseline
+ const overall_progress_percentage =
+ baseline > 0 ? Math.round(((current - baseline) / baseline) * 100) : 0
+
+ const version_events = withEvents
+ .map(item =>
+ config.$t('package.timeline.chart.copy_alt.version_events', {
+ version: item.version,
+ // eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
+ events: item.events.map(e => config.$t(e.text).toLocaleLowerCase()).join(', '),
+ }),
+ )
+ .join('; ')
+
+ const key_changes = !withEvents.length
+ ? ''
+ : config.$t('package.timeline.chart.copy_alt.key_changes', {
+ version_events,
+ })
+
+ const altText = config.$t('package.timeline.chart.copy_alt.general_description', {
+ metric: metric.toLocaleLowerCase(),
+ package: config.packageName,
+ first: first?.version ?? '',
+ last: last?.version ?? '',
+ first_value: config.numberFormatter(firstValue ?? 0),
+ last_value: config.numberFormatter(lastValue ?? 0),
+ overall_progress_percentage,
+ key_changes,
+ watermark: config.$t('package.trends.copy_alt.watermark'),
+ })
+
+ return altText
+}
+
+export async function copyAltTextForTimelineChart({
+ dataset,
+ config,
+}: AltCopyArgs) {
+ const altText = createAltTextForTimelineChart({ dataset, config })
+ await config.copy(altText)
+}
+
// Used in chart context menu callbacks
// @todo replace with downloadFileLink
export function loadFile(link: string, filename: string) {
diff --git a/app/utils/download-anomalies.data.ts b/app/utils/download-anomalies.data.ts
index 3cb23fb858..55fdafe989 100644
--- a/app/utils/download-anomalies.data.ts
+++ b/app/utils/download-anomalies.data.ts
@@ -22,6 +22,11 @@ export const DOWNLOAD_ANOMALIES: DownloadAnomaly[] = [
start: { date: '2023-11-18', weeklyDownloads: 59_611 },
end: { date: '2023-11-21', weeklyDownloads: 150_680 },
},
+ {
+ packageName: 'solid-js',
+ start: { date: '2024-12-22', weeklyDownloads: 21_395 },
+ end: { date: '2024-12-24', weeklyDownloads: 28_308 },
+ },
/**
* NOTE:
* - please add new entries above this comment.
diff --git a/app/utils/frameworks.ts b/app/utils/frameworks.ts
index 5e5d94f982..349014383e 100644
--- a/app/utils/frameworks.ts
+++ b/app/utils/frameworks.ts
@@ -31,6 +31,11 @@ export const SHOWCASED_FRAMEWORKS = [
package: 'vite',
color: 'oklch(0.7484 0.1439 294.03)',
},
+ {
+ name: 'vitest',
+ package: 'vitest',
+ color: 'oklch(0.8751 0.2422 148.74)',
+ },
{
name: 'next',
package: 'next',
diff --git a/docs/app/components/BadgeGenerator.vue b/docs/app/components/BadgeGenerator.vue
index 8d36371233..1fa4a3ba61 100644
--- a/docs/app/components/BadgeGenerator.vue
+++ b/docs/app/components/BadgeGenerator.vue
@@ -22,7 +22,7 @@ const copyToClipboard = async () => {
class="my-8 p-5 rounded-xl border border-gray-200/60 dark:border-white/5 bg-gray-50/50 dark:bg-white/2 flex flex-col sm:flex-row items-end gap-4"
>
-
{
-
@@ -49,20 +49,20 @@ const copyToClipboard = async () => {
-
![]()
{
alt="Badge Preview"
@error="isValid = false"
/>
-
Invalid
@@ -79,7 +79,7 @@ const copyToClipboard = async () => {