GH-2248 Fix snippet inconsistencies (Fix #2234)

The snippet is now extracted from the HTML via textContent and not generated separately to avoid inconsistencies
dzikoysk · Oct 4, 2024 · 1d8df95 · 1d8df95
1 parent 69cddbd
commit 1d8df95
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 73 deletions.
diff --git a/reposilite-frontend/src/components/card/ArtifactSnippet.vue b/reposilite-frontend/src/components/card/ArtifactSnippet.vue
@@ -18,6 +18,7 @@
 import XmlTag from './XmlTag.vue'
 import CodeString from './CodeString.vue'
 import CodeBrackets from "./CodeBrackets.vue"
+import { computed, ref } from "vue";
 
 defineProps({
   configuration: {
@@ -29,23 +30,28 @@ defineProps({
     required: true
   }
 })
+
+const preElement = ref()
+const content = computed(() => preElement?.value?.textContent)
+
+defineExpose({ content })
 </script>
 
 <template>
-<pre v-if="configuration.lang === 'xml'">
+<pre v-if="configuration.lang === 'xml'" ref="preElement">
 <XmlTag name="dependency">
   <XmlTag name="groupId">{{ data.groupId }}</XmlTag>
   <XmlTag name="artifactId">{{ data.artifactId }}</XmlTag>
   <XmlTag name="version">{{ data.version }}</XmlTag>
 </XmlTag>
 </pre>
-<pre v-else-if="configuration.lang === 'groovy'">
+<pre v-else-if="configuration.lang === 'groovy'" ref="preElement">
 implementation <CodeString>{{ `${data.groupId}:${data.artifactId}:${data.version}` }}</CodeString>
 </pre>
-<pre v-else-if="configuration.lang === 'kotlin'">
+<pre v-else-if="configuration.lang === 'kotlin'" ref="preElement">
 implementation<CodeBrackets start="(" end=")"><CodeString>{{ `${data.groupId}:${data.artifactId}:${data.version}` }}</CodeString></CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'scala'">
+<pre v-else-if="configuration.lang === 'scala'" ref="preElement">
 <CodeString>{{data.groupId}}</CodeString> %% <CodeString>{{data.artifactId}}</CodeString> %% <CodeString>{{data.version}}</CodeString>
 </pre>
-</template>
+</template>
diff --git a/reposilite-frontend/src/components/card/RepositorySnippet.vue b/reposilite-frontend/src/components/card/RepositorySnippet.vue
@@ -18,7 +18,7 @@
 import XmlTag from './XmlTag.vue'
 import CodeString from './CodeString.vue'
 import CodeBrackets from "./CodeBrackets.vue"
-import {computed} from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   configuration: {
@@ -40,29 +40,33 @@ const gradleId = computed(() => {
   return gradleIdUppercase.charAt(0).toLowerCase() + gradleIdUppercase.slice(1)
 })
 
+const preElement = ref(null)
+const content = computed(() => preElement?.value?.textContent)
+
+defineExpose({ content })
 </script>
 
 <template>
-<pre v-if="configuration.lang === 'xml'">
+<pre v-if="configuration.lang === 'xml'" ref="preElement">
 <XmlTag name="repository">
   <XmlTag name="id">{{ data.repoId }}</XmlTag>
   <XmlTag name="name">{{ data.title }}</XmlTag>
   <XmlTag name="url">{{ data.domain }}</XmlTag>
 </XmlTag>
 </pre>
-<pre v-else-if="configuration.lang === 'groovy'">
+<pre v-else-if="configuration.lang === 'groovy'" ref="preElement">
 maven <CodeBrackets start="{" end="}">
     name <CodeString>{{ gradleId }}</CodeString>
     url <CodeString>{{ data.domain }}</CodeString>
 </CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'kotlin'">
+<pre v-else-if="configuration.lang === 'kotlin'" ref="preElement">
 maven <CodeBrackets start="{" end="}">
     name = <CodeString>{{ gradleId }}</CodeString>
     url = uri<CodeBrackets start="(" end=")"><CodeString>{{ data.domain }}</CodeString></CodeBrackets>
 </CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'scala'">
+<pre v-else-if="configuration.lang === 'scala'" ref="preElement">
 resolvers +=
   <CodeString>{{data.repoId}}</CodeString>
      at <CodeString>{{data.domain}}</CodeString>

diff --git a/reposilite-frontend/src/components/card/SnippetsCard.vue b/reposilite-frontend/src/components/card/SnippetsCard.vue
@@ -19,7 +19,6 @@ import { ref, watch, watchEffect } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { createToast } from 'mosha-vue-toastify'
 import { useSession } from '../../store/session'
-import useArtifacts from '../../store/maven/artifact'
 import useRepository from '../../store/maven/repository'
 import useMetadata from '../../store/maven/metadata'
 import CopyIcon from '../icons/CopyIcon.vue'
@@ -42,8 +41,7 @@ const configurations = [
   { name: 'SBT', lang: 'scala' }
 ]
 const data = ref({})
-const { createRepositories, createRepositorySnippet } = useRepository()
-const { createArtifactSnippet } = useArtifacts()
+const { createRepositories } = useRepository()
 const { parseMetadata } = useMetadata()
 const { client } = useSession()
 const { copy: copyText, isSupported: isCopySupported } = useClipboard()
@@ -96,13 +94,10 @@ watch(selectedTab, (to, from) => {
   transitionName.value = toIndex - fromIndex < 0 ? 'slide-left' : 'slide-right'
 })
 
+const snippetRef = ref()
+
 const copy = async () => {
-  let snippet = ''
-  if (data.value.type === 'artifact') {
-    snippet = createArtifactSnippet(selectedTab.value, data.value)
-  } else if (data.value.type === 'repository') {
-    snippet = createRepositorySnippet(selectedTab.value, data.value)
-  }
+  let snippet = snippetRef.value[0].content.trim()
   await copyText(snippet)
   return createToast('Snippet copied', { type: 'info', timeout: '2000' })
 }
@@ -136,11 +131,13 @@ const selectTab = (tab) =>
           <template v-if="entry.name === selectedTab">
             <RepositorySnippet
                 v-if="data.type === 'repository'"
+                ref="snippetRef"
                 :configuration="entry"
                 :data="data"
             />
             <ArtifactSnippet
                 v-else-if="data.type === 'artifact'"
+                ref="snippetRef"
                 :configuration="entry"
                 :data="data"
             />

diff --git a/reposilite-frontend/src/store/maven/artifact.js b/reposilite-frontend/src/store/maven/artifact.js
diff --git a/reposilite-frontend/src/store/maven/repository.js b/reposilite-frontend/src/store/maven/repository.js
@@ -34,24 +34,7 @@ export default function useRepository() {
     return { type: "repository", repoId, title, domain }
   }
 
-  const createRepositorySnippet = (name, { repoId, title, domain }) => {
-    switch (name) {
-      case "Maven": return `
-<repository>
-  <id>${repoId}</id>
-  <name>${title}</name>
-  <url>${domain}</url>
-</repository>`.trim()
-      case "Gradle Groovy": return `maven {\n    url "${domain}"\n}`
-      case "Gradle Kotlin": return `maven {\n    url = uri("${domain}")\n}`
-      case "SBT": return `resolvers +=\n  "${repoId}" \n     at "${domain}"`
-      default: return ""
-    }
-  }
-
-
   return {
-    createRepositories,
-    createRepositorySnippet
+    createRepositories
   }
 }