npmx.dev/app/components/Package/Replacement.vue at 8dcea7049d89eb645a9ec981a5c6999a73ae398b · 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
<script setup lang="ts">
import type { ModuleReplacement } from 'module-replacements'

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

const message = computed<
  [string, { replacement?: string; nodeVersion?: string; community?: string }]
>(() => {
  switch (props.replacement.type) {
    case 'native':
      return [
        'package.replacement.native',
        {
          replacement: props.replacement.replacement,
          nodeVersion: props.replacement.nodeVersion,
        },
      ]
    case 'simple':
      return [
        'package.replacement.simple',
        {
          replacement: props.replacement.replacement,
          community: $t('package.replacement.community'),
        },
      ]
    case 'documented':
      return [
        'package.replacement.documented',
        {
          community: $t('package.replacement.community'),
        },
      ]
    case 'none':
      return ['package.replacement.none', {}]
  }
})

const mdnUrl = computed(() => {
  if (props.replacement.type !== 'native' || !props.replacement.mdnPath) return null
  return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${props.replacement.mdnPath}`
})

const docPath = computed(() => {
  if (props.replacement.type !== 'documented' || !props.replacement.docPath) return null
  return `https://github.com/es-tooling/module-replacements/blob/main/docs/modules/${props.replacement.docPath}.md`
})
</script>

<template>
  <div
    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-700 dark:text-amber-400"
  >
    <h2 class="font-medium mb-1 flex items-center gap-2">
      <span class="i-carbon-idea w-4 h-4" aria-hidden="true" />
      {{ $t('package.replacement.title') }}
    </h2>
    <p class="text-sm m-0">
      <i18n-t :keypath="message[0]" scope="global">
        <template #replacement>
          {{ message[1].replacement ?? '' }}
        </template>
        <template #nodeVersion>
          {{ message[1].nodeVersion ?? '' }}
        </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-carbon-launch w-3 h-3" aria-hidden="true" />
          </a>
        </template>
      </i18n-t>
      <a
        v-if="mdnUrl"
        :href="mdnUrl"
        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.mdn') }}
        <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
      </a>
      <a
        v-if="docPath"
        :href="docPath"
        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-carbon-launch w-3 h-3" aria-hidden="true" />
      </a>
    </p>
  </div>
</template>