fix(ssr): prevent hydration mismatches

Concerned mostly Dialog, Icon, Tabs without v-model nor defaultTab set
liip · Feb 28, 2022 · 636fbbe · 636fbbe
1 parent a89ac65
commit 636fbbe
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 18 deletions.
diff --git a/packages/chusho/lib/components/CDialog/CDialog.ts b/packages/chusho/lib/components/CDialog/CDialog.ts
@@ -22,6 +22,7 @@ import {
   renderWithTransition,
 } from '../../utils/components';
 import { getFocusableElements } from '../../utils/keyboard';
+import { isClient, isServer } from '../../utils/ssr';
 import {
   PORTAL_ID,
   createPortalIfNotExists,
@@ -109,7 +110,7 @@ export default defineComponent({
     },
 
     activate(): void {
-      if (this.active) return;
+      if (this.active || isServer) return;
 
       this.active = true;
       this.activeElement.save();
@@ -126,7 +127,7 @@ export default defineComponent({
     },
 
     deactivate(): void {
-      if (!this.active) return;
+      if (!this.active || isServer) return;
 
       releaseAccessToPageContent();
 
@@ -209,7 +210,9 @@ export default defineComponent({
   },
 
   render() {
-    createPortalIfNotExists();
+    if (isClient) {
+      createPortalIfNotExists();
+    }
 
     return h(
       Teleport,

diff --git a/packages/chusho/lib/components/CIcon/CIcon.ts b/packages/chusho/lib/components/CIcon/CIcon.ts
@@ -60,25 +60,28 @@ export default defineComponent({
     });
     const id = uid('chusho-icon');
 
+    const children = [
+      h('use', {
+        key: this.id,
+        'xlink:href': `${this.config?.spriteUrl || ''}#${this.id}`,
+      }),
+    ];
+
     if (this.alt) {
       elementProps['aria-labelledby'] = id;
-    } else {
-      elementProps['aria-hidden'] = true;
-    }
-
-    return h('svg', elementProps, [
-      this.alt &&
+      children.unshift(
         h(
           'title',
           {
             id,
           },
           [this.alt]
-        ),
-      h('use', {
-        key: this.id,
-        'xlink:href': `${this.config?.spriteUrl || ''}#${this.id}`,
-      }),
-    ]);
+        )
+      );
+    } else {
+      elementProps['aria-hidden'] = true;
+    }
+
+    return h('svg', elementProps, children);
   },
 });
diff --git a/packages/chusho/lib/composables/useActiveElement.ts b/packages/chusho/lib/composables/useActiveElement.ts
@@ -1,5 +1,7 @@
 import { Ref, computed, ref } from 'vue';
 
+import { isServer } from '../utils/ssr';
+
 /**
  * Generic logic to save and restore document.activeElement
  * (the element currently holding focus in a page)
@@ -8,10 +10,14 @@ export default function useActiveElement() {
   const savedElement: Ref<HTMLElement | null> = ref(null);
 
   function save() {
+    if (isServer) return;
+
     savedElement.value = document?.activeElement as HTMLElement;
   }
 
   function restore() {
+    if (isServer) return;
+
     if (savedElement.value?.focus) {
       savedElement.value.focus();
     }

diff --git a/packages/chusho/lib/composables/useSelectable.ts b/packages/chusho/lib/composables/useSelectable.ts
@@ -3,6 +3,7 @@ import {
   Ref,
   computed,
   getCurrentInstance,
+  readonly,
   ref,
   watch,
 } from 'vue';
@@ -15,7 +16,7 @@ export interface SelectedItem<DataT = null> {
 }
 
 export interface UseSelectable<ItemDataT = null> {
-  selectedItemId: ComputedRef<SelectedItemId | null>;
+  selectedItemId: Readonly<Ref<SelectedItemId | null>>;
   selectedItemIndex: ComputedRef<number | null>;
   selectedItem: ComputedRef<SelectedItem<ItemDataT> | null>;
   items: ComputedRef<SelectedItem<ItemDataT>[]>;
@@ -78,7 +79,7 @@ export default function useSelectable<ItemDataT = null>(
   }
 
   return {
-    selectedItemId: computed(() => selectedItemId.value),
+    selectedItemId: readonly(selectedItemId),
     selectedItemIndex: computed(() =>
       items.value.findIndex((item) => item.id === selectedItemId.value)
     ),

diff --git a/packages/chusho/lib/utils/ssr.ts b/packages/chusho/lib/utils/ssr.ts
@@ -0,0 +1,3 @@
+export const isClient = typeof window !== 'undefined';
+
+export const isServer = !isClient;
diff --git a/packages/chusho/src/components/examples/components/radio/Controlled.vue b/packages/chusho/src/components/examples/components/radio/Controlled.vue
@@ -29,7 +29,7 @@
         variant="inline"
         name="radio-group"
         type="radio"
-        :value="null"
+        value="other"
       />
       Other
     </CLabel>