npmx.dev/app/components/Package/Replacement.vue at 81e5c01954a98e4de89af7f528de387301846c6e · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<script setup lang="ts">
import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
import { resolveDocUrl } from 'module-replacements'
import { getReplacementDescription, getReplacementNodeVersion } from '~/utils/module-replacements'

const props = defineProps<{
  mapping: ModuleReplacementMapping
  replacement: ModuleReplacement
}>()

const externalUrl = computed(() => resolveDocUrl(props.mapping.url ?? props.replacement.url))

const nodeVersion = computed(() => getReplacementNodeVersion(props.replacement))

const replacementDescription = useMarkdown(() => ({
  text: getReplacementDescription(props.replacement),
}))
</script>

<template>
  <div
    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
    data-testid="replacement-card"
  >
    <h2 class="font-medium mb-1 flex items-center gap-2">
      <span class="i-lucide:lightbulb w-4 h-4" aria-hidden="true" />
      {{ $t('package.replacement.title') }}
    </h2>
    <p>
      <i18n-t
        v-if="nodeVersion && replacement.type === 'native'"
        keypath="package.replacement.native"
        scope="global"
      >
        <template #replacement>
          <span v-if="replacementDescription" v-html="replacementDescription" />
          <span v-else
            ><code>{{ replacement.id }}</code></span
          >
        </template>
        <template #nodeVersion>
          {{ nodeVersion }}
        </template>
      </i18n-t>
      <i18n-t
        v-else-if="replacement.type === 'native'"
        keypath="package.replacement.native_no_version"
        scope="global"
      >
        <template #replacement>
          <span v-if="replacementDescription" v-html="replacementDescription" />
          <span v-else
            ><code>{{ replacement.id }}</code></span
          >
        </template>
      </i18n-t>
      <i18n-t
        v-else-if="replacement.type === 'documented'"
        keypath="package.replacement.documented"
        scope="global"
      >
        <template #replacement>
          <code>{{ replacement.replacementModule }}</code>
        </template>
        <template #community>
          <a
            href="https://e18e.dev/docs/replacements/"
            target="_blank"
            rel="noopener noreferrer"
            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"
          >
            {{ $t('package.replacement.community') }}
            <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
          </a>
        </template>
      </i18n-t>
      <template v-else-if="replacement.type === 'removal'">
        <span v-html="replacementDescription" />
      </template>
      <template v-else-if="replacement.type === 'simple'">
        <span v-html="replacementDescription" />
      </template>
      <template v-else>
        {{ $t('package.replacement.none') }}
      </template>
      <a
        v-if="externalUrl"
        :href="externalUrl"
        target="_blank"
        rel="noopener noreferrer"
        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"
      >
        {{ $t('package.replacement.learn_more') }}
        <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
      </a>
    </p>
    <div v-if="replacement.type === 'simple' && replacement.example">
      <strong class="block mb-1.5">{{ $t('package.replacement.example') }}</strong>
      <pre
        class="bg-amber-800/10 dark:bg-amber-950/30 p-2 rounded border border-amber-700/20 overflow-x-auto text-xs font-mono leading-relaxed"
      ><code>{{ replacement.example }}</code></pre>
    </div>
  </div>
</template>