forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: link to e18e page for module replacement (#438)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Garth de Wet
autofix-ci[bot]
and committed by
GitHub
5cab540d
3a4c729d
+51
-25
+35
-13
app/components/PackageReplacement.vue
+35
-13
app/components/PackageReplacement.vue
···
5
5
replacement: ModuleReplacement
6
6
}>()
7
7
8
-
const { t } = useI18n()
9
-
10
-
const message = computed(() => {
8
+
const message = computed<[string, { replacement?: string; nodeVersion?: string }]>(() => {
11
9
switch (props.replacement.type) {
12
10
case 'native':
13
-
return t('package.replacement.native', {
14
-
replacement: props.replacement.replacement,
15
-
nodeVersion: props.replacement.nodeVersion,
16
-
})
11
+
return [
12
+
'package.replacement.native',
13
+
{
14
+
replacement: props.replacement.replacement,
15
+
nodeVersion: props.replacement.nodeVersion,
16
+
},
17
+
]
17
18
case 'simple':
18
-
return t('package.replacement.simple', {
19
-
replacement: props.replacement.replacement,
20
-
})
19
+
return [
20
+
'package.replacement.simple',
21
+
{
22
+
replacement: props.replacement.replacement,
23
+
},
24
+
]
21
25
case 'documented':
22
-
return t('package.replacement.documented')
26
+
return ['package.replacement.documented', {}]
23
27
case 'none':
24
-
return t('package.replacement.none')
28
+
return ['package.replacement.none', {}]
25
29
}
26
30
})
27
31
···
45
49
{{ $t('package.replacement.title') }}
46
50
</h2>
47
51
<p class="text-sm m-0">
48
-
{{ message }}
52
+
<i18n-t :keypath="message[0]" scope="global">
53
+
<template #replacement>
54
+
{{ message[1].replacement ?? '' }}
55
+
</template>
56
+
<template #nodeVersion>
57
+
{{ message[1].nodeVersion ?? '' }}
58
+
</template>
59
+
<template #community>
60
+
<a
61
+
href="https://e18e.dev/docs/replacements/"
62
+
target="_blank"
63
+
rel="noopener noreferrer"
64
+
class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
65
+
>
66
+
{{ $t('package.replacement.community') }}
67
+
<span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
68
+
</a>
69
+
</template>
70
+
</i18n-t>
49
71
<a
50
72
v-if="mdnUrl"
51
73
:href="mdnUrl"
+4
-3
i18n/locales/de-DE.json
+4
-3
i18n/locales/de-DE.json
···
119
119
"replacement": {
120
120
"title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
121
121
"native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
122
-
"simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
123
-
"documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
122
+
"simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
123
+
"documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
124
124
"none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
125
125
"learn_more": "Mehr erfahren",
126
-
"mdn": "MDN"
126
+
"mdn": "MDN",
127
+
"community": "Community"
127
128
},
128
129
"stats": {
129
130
"license": "Lizenz",
+4
-3
i18n/locales/en.json
+4
-3
i18n/locales/en.json
···
119
119
"replacement": {
120
120
"title": "You might not need this dependency.",
121
121
"native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
122
-
"simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
123
-
"documented": "The community has flagged this package as having more performant alternatives.",
122
+
"simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
123
+
"documented": "The {community} has flagged this package as having more performant alternatives.",
124
124
"none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
125
125
"learn_more": "Learn more",
126
-
"mdn": "MDN"
126
+
"mdn": "MDN",
127
+
"community": "community"
127
128
},
128
129
"stats": {
129
130
"license": "License",
+4
-3
lunaria/files/de-DE.json
+4
-3
lunaria/files/de-DE.json
···
119
119
"replacement": {
120
120
"title": "Du brauchst diese Abhängigkeit vielleicht nicht.",
121
121
"native": "Dies kann durch {replacement} ersetzt werden, verfügbar seit Node {nodeVersion}.",
122
-
"simple": "Die Community hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
123
-
"documented": "Die Community hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
122
+
"simple": "Die {community} hat dieses Paket als überflüssig markiert und empfiehlt: {replacement}.",
123
+
"documented": "Die {community} hat dieses Paket als eines mit leistungsstärkeren Alternativen markiert.",
124
124
"none": "Dieses Paket wurde als nicht mehr nötig markiert, und seine Funktionen sind wahrscheinlich in allen Engines von Haus aus verfügbar.",
125
125
"learn_more": "Mehr erfahren",
126
-
"mdn": "MDN"
126
+
"mdn": "MDN",
127
+
"community": "Community"
127
128
},
128
129
"stats": {
129
130
"license": "Lizenz",
+4
-3
lunaria/files/en-US.json
+4
-3
lunaria/files/en-US.json
···
119
119
"replacement": {
120
120
"title": "You might not need this dependency.",
121
121
"native": "This can be replaced with {replacement}, available since Node {nodeVersion}.",
122
-
"simple": "The community has flagged this package as redundant, with the advice: {replacement}.",
123
-
"documented": "The community has flagged this package as having more performant alternatives.",
122
+
"simple": "The {community} has flagged this package as redundant, with the advice: {replacement}.",
123
+
"documented": "The {community} has flagged this package as having more performant alternatives.",
124
124
"none": "This package has been flagged as no longer needed, and its functionality is likely available natively in all engines.",
125
125
"learn_more": "Learn more",
126
-
"mdn": "MDN"
126
+
"mdn": "MDN",
127
+
"community": "community"
127
128
},
128
129
"stats": {
129
130
"license": "License",