perf(WordOptionDropdown): prevent larg html output; pass only nessary…

… data
felix-berlin · Feb 25, 2024 · 2bd9dd3 · 2bd9dd3
1 parent 3d4b37a
commit 2bd9dd3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/word/SingleWord.vue b/src/components/word/SingleWord.vue
@@ -33,7 +33,11 @@
           {{ translation?.translation }}
         </dd>
       </dl>
-      <WordOptionDropdown :word="source" class="c-word-list__options-dropdown">
+      <WordOptionDropdown
+        :berlinerisch="source.wordProperties?.berlinerisch"
+        :slug="source.slug"
+        class="c-word-list__options-dropdown"
+      >
         <template #after>
           <a :href="routeToWord(source.slug!)" class="c-options-dropdown__copy-button c-button">
             <BookOpen width="18" height="18" class="c-options-dropdown__icon-button" />

diff --git a/src/components/word/WordOptionDropdown.vue b/src/components/word/WordOptionDropdown.vue
@@ -19,7 +19,7 @@
         aria-label="Wort teilen"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="shareWord(word.slug!)"
+        @click="shareWord(slug)"
       >
         <Share2 width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -31,7 +31,7 @@
         aria-label="Link zum Wort kopieren"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="copyWordPageUrlToClipboard(word.slug!)"
+        @click="copyWordPageUrlToClipboard(slug)"
       >
         <Link width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -43,7 +43,7 @@
         aria-label="Wort kopieren"
         type="button"
         class="c-options-dropdown__copy-button c-button"
-        @click="copyNameToClipboard(word.wordProperties?.berlinerisch!)"
+        @click="copyNameToClipboard(berlinerisch)"
       >
         <Copy width="18" height="18" class="c-options-dropdown__icon-button" />
 
@@ -62,11 +62,12 @@ import Link from "virtual:icons/lucide/link";
 import Share2 from "virtual:icons/lucide/share-2";
 import { routeToWord } from "@utils/helpers.ts";
 import { useClipboard, useShare } from "@vueuse/core";
-import type { CleanBerlinerWord } from "@stores/index.ts";
+import type { BerlinerWord } from "@stores/index.ts";
 import { createToastNotify } from "@stores/index.ts";
 
 interface WordProps {
-  word: CleanBerlinerWord;
+  berlinerisch: BerlinerWord["wordProperties"]["berlinerisch"];
+  slug: BerlinerWord["slug"];
 }
 
 const { word } = defineProps<WordProps>();

diff --git a/src/pages/wort/[...wordSlug].astro b/src/pages/wort/[...wordSlug].astro
@@ -122,7 +122,11 @@ if (wordProps?.images && wordProps?.images?.nodes.length > 1) {
           )
         }
       </h1>
-      <WordOptionDropdown word={word} client:only="vue" />
+      <WordOptionDropdown
+        berlinerisch={word.wordProperties?.berlinerisch}
+        slug={word.slug}
+        client:only="vue"
+      />
     </header>
     <main class="c-single-word__main">
       {