From 33266dfad668b7bf70bbbdcc9b7b06035f582954 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <me@laymonage.com>
Date: Sat, 14 May 2022 10:33:08 +0700
Subject: [PATCH 1/4] react: Only render after component is mounted

---
 react/src/lib/Giscus.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/react/src/lib/Giscus.tsx b/react/src/lib/Giscus.tsx
index cc61c46a..decedc52 100644
--- a/react/src/lib/Giscus.tsx
+++ b/react/src/lib/Giscus.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import type { GiscusProps } from './types';
 
 export default function Giscus({
@@ -16,10 +16,16 @@ export default function Giscus({
   lang,
   loading,
 }: GiscusProps) {
+  const [mounted, setMounted] = useState(false);
+
   useEffect(() => {
+    if (mounted) return;
     import('giscus');
+    setMounted(true);
   }, []);
 
+  if (!mounted) return null;
+
   return (
     <giscus-widget
       id={id}

From 2e554573c9495a690f89c650f135e70b490e538d Mon Sep 17 00:00:00 2001
From: Sage Abdullah <me@laymonage.com>
Date: Sat, 14 May 2022 10:33:18 +0700
Subject: [PATCH 2/4] vue: Only render after component is mounted

---
 vue/src/lib/Giscus.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/vue/src/lib/Giscus.vue b/vue/src/lib/Giscus.vue
index f7c5c40b..d2f18107 100644
--- a/vue/src/lib/Giscus.vue
+++ b/vue/src/lib/Giscus.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import type {
   AvailableLanguage,
   BooleanString,
@@ -26,11 +26,17 @@ defineProps<{
   loading?: Loading;
 }>();
 
-onMounted(() => import('giscus'));
+const mounted = ref(false);
+
+onMounted(() => {
+  mounted.value = true;
+  import('giscus');
+});
 </script>
 
 <template>
   <giscus-widget
+    v-if="mounted"
     :id="id"
     :repo="repo"
     :repoid="repoId"

From ec31d7e2e8b61bf92ffbb9f182819d384622a789 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <me@laymonage.com>
Date: Sat, 14 May 2022 10:33:30 +0700
Subject: [PATCH 3/4] svelte: Only render after component is mounted

---
 svelte/src/lib/Giscus.svelte | 41 +++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/svelte/src/lib/Giscus.svelte b/svelte/src/lib/Giscus.svelte
index 92391c7a..07d7dc7e 100644
--- a/svelte/src/lib/Giscus.svelte
+++ b/svelte/src/lib/Giscus.svelte
@@ -9,8 +9,6 @@
     Theme,
   } from '.';
 
-  onMount(() => import('giscus'));
-
   export let id: string = undefined;
   export let repo: `${string}/${string}`;
   export let repoId: string;
@@ -24,20 +22,29 @@
   export let theme: Theme = 'light';
   export let lang: AvailableLanguage = 'en';
   export let loading: Loading = 'eager';
+
+  let mounted = false;
+
+  onMount(() => {
+    mounted = true;
+    import('giscus');
+  });
 </script>
 
-<giscus-widget
-  {id}
-  {repo}
-  repoid={repoId}
-  {category}
-  categoryid={categoryId}
-  {mapping}
-  {term}
-  reactionsenabled={reactionsEnabled}
-  emitmetadata={emitMetadata}
-  inputposition={inputPosition}
-  {theme}
-  {lang}
-  {loading}
-/>
+{#if mounted}
+  <giscus-widget
+    {id}
+    {repo}
+    repoid={repoId}
+    {category}
+    categoryid={categoryId}
+    {mapping}
+    {term}
+    reactionsenabled={reactionsEnabled}
+    emitmetadata={emitMetadata}
+    inputposition={inputPosition}
+    {theme}
+    {lang}
+    {loading}
+  />
+{/if}

From e7b515240ef2e614d19742a8fe4979aa38b5dcb9 Mon Sep 17 00:00:00 2001
From: Sage Abdullah <me@laymonage.com>
Date: Sat, 14 May 2022 10:33:50 +0700
Subject: [PATCH 4/4] vue: Mark components with dashes as custom elements

---
 vue/vite.config.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/vue/vite.config.ts b/vue/vite.config.ts
index a8b62ae0..fe2b4b0f 100644
--- a/vue/vite.config.ts
+++ b/vue/vite.config.ts
@@ -6,7 +6,13 @@ const resolvePath = (str: string) => resolve(__dirname, str);
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: { isCustomElement: (tag) => tag.includes('-') },
+      },
+    }),
+  ],
   build: {
     lib: {
       entry: resolvePath('src/lib/index.ts'),