fix(SSR): apply lazy ID & browser check for SSR render (#290)

pubg · Nov 21, 2024 · b78acd4 · b78acd4
1 parent dd444b0
commit b78acd4
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 26 deletions.
diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -27,7 +27,7 @@
                 :checked="isChecked(option)"
                 :dense="dense"
                 :disabled="computedDisabled"
-                :id="`${computedId}-${optionIds[index]}`"
+                :id="`${computedId}-${index}`"
                 :label="getOptionLabel(option)"
                 :name="name"
                 :readonly="computedReadonly"
@@ -231,12 +231,9 @@ export default defineComponent({
             checkboxRefs.value[0]?.blur();
         }
 
-        const optionIds = computed(() => options.value.map(() => utils.string.createID()));
-
         return {
             computedId,
             checkboxRefs,
-            optionIds,
             classObj,
             computedColorScheme,
             computedState,

diff --git a/packages/vlossom/src/components/vs-footer/types.ts b/packages/vlossom/src/components/vs-footer/types.ts
@@ -5,4 +5,5 @@ export interface VsFooterStyleSet {
     height?: string;
     padding?: string;
     width?: string;
+    zIndex?: string;
 }
diff --git a/packages/vlossom/src/components/vs-header/types.ts b/packages/vlossom/src/components/vs-header/types.ts
@@ -5,4 +5,5 @@ export interface VsHeaderStyleSet {
     height?: string;
     padding?: string;
     width?: string;
+    zIndex?: string;
 }
diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -27,7 +27,7 @@
                 :checked="isChecked(option)"
                 :dense="dense"
                 :disabled="computedDisabled"
-                :id="`${computedId}-${optionIds[index]}`"
+                :id="`${computedId}-${index}`"
                 :label="getOptionLabel(option)"
                 :name="name"
                 :readonly="computedReadonly"
@@ -188,12 +188,9 @@ export default defineComponent({
             radioRefs.value[0]?.blur();
         }
 
-        const optionIds = computed(() => options.value.map(() => utils.string.createID()));
-
         return {
             computedId,
             radioRefs,
-            optionIds,
             classObj,
             computedColorScheme,
             computedState,

diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -25,7 +25,6 @@
                     <template #check>
                         <vs-checkbox-node
                             class="vs-table-select vs-select-all"
-                            :id="utils.string.createID()"
                             type="checkbox"
                             :color-scheme="computedColorScheme"
                             :indeterminate="!isSelectedAll && selectedItems.length > 0"

diff --git a/packages/vlossom/src/components/vs-table/VsTableBody.vue b/packages/vlossom/src/components/vs-table/VsTableBody.vue
@@ -26,7 +26,6 @@
             >
                 <template #check>
                     <vs-checkbox-node
-                        :id="element.id"
                         type="checkbox"
                         :color-scheme="colorScheme"
                         :checked="isSelected(element.id)"

diff --git a/packages/vlossom/src/composables/index.ts b/packages/vlossom/src/composables/index.ts
@@ -8,6 +8,7 @@ export * from './input-form-composable';
 export * from './input-modifier-composable';
 export * from './input-option-composable';
 export * from './layout-composable';
+export * from './lazy-id-composable';
 export * from './overlay-composable';
 export * from './responsive-composable';
 export * from './scroll-lock-composable';

diff --git a/packages/vlossom/src/composables/input-composable.ts b/packages/vlossom/src/composables/input-composable.ts
@@ -1,7 +1,7 @@
 import { ComputedRef, Ref, computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useLazyId } from '@/composables';
 import { useInputForm } from './input-form-composable';
 import { UIState } from '@/declaration';
-import { utils } from '@/utils';
 
 import type { StateMessage, InputComponentParams } from '@/declaration';
 
@@ -21,8 +21,7 @@ export function useInput<T = unknown>(ctx: any, inputParams: InputComponentParam
         callbacks = {},
     } = inputParams;
 
-    const innerId = utils.string.createID();
-    const computedId = computed(() => id.value || innerId);
+    const { computedId } = useLazyId(id);
 
     const changed = ref(false);
     const isInitialized = ref(false);

diff --git a/packages/vlossom/src/composables/input-form-composable.ts b/packages/vlossom/src/composables/input-form-composable.ts
@@ -1,4 +1,4 @@
-import { Ref, inject, onBeforeMount, onBeforeUnmount, watch } from 'vue';
+import { Ref, inject, onMounted, onBeforeUnmount, watch } from 'vue';
 import { VS_FORM, VsFormProvide } from '@/declaration';
 import { useFormProvide } from './form-provide-composable';
 
@@ -27,11 +27,17 @@ export function useInputForm(
 
     watch(clearFlag, clear);
 
-    onBeforeMount(() => {
+    onMounted(() => {
         updateChanged(id.value, changed.value);
         updateValid(id.value, valid.value);
     });
 
+    watch(id, (newId, oldId) => {
+        removeFromForm(oldId);
+        updateChanged(newId, changed.value);
+        updateValid(newId, valid.value);
+    });
+
     onBeforeUnmount(() => {
         removeFromForm(id.value);
     });

diff --git a/packages/vlossom/src/composables/lazy-id-composable.ts b/packages/vlossom/src/composables/lazy-id-composable.ts
@@ -0,0 +1,17 @@
+import { computed, onMounted, Ref, ref } from 'vue';
+import { utils } from '@/utils';
+
+// This composable is used to generate a unique ID for SSR components
+export function useLazyId(id: Ref<string>) {
+    const innerId = ref('');
+    const computedId = computed(() => id.value || innerId.value);
+
+    onMounted(() => {
+        innerId.value = utils.string.createID();
+    });
+
+    return {
+        innerId,
+        computedId,
+    };
+}
diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
@@ -26,7 +26,7 @@
 <script lang="ts">
 import { computed, defineComponent, nextTick, PropType, Ref, ref, toRefs, watch } from 'vue';
 import { ColorScheme, UIState, VsNode } from '@/declaration';
-import { useColorScheme, useStateClass, useStyleSet } from '@/composables';
+import { useColorScheme, useLazyId, useStateClass, useStyleSet } from '@/composables';
 import { utils } from '@/utils';
 import { VsCheckboxNodeStyleSet } from './types';
 
@@ -70,8 +70,7 @@ export default defineComponent({
             'vs-indeterminate': indeterminate.value,
         }));
 
-        const innerId = utils.string.createID();
-        const computedId = computed(() => id.value || innerId);
+        const { computedId } = useLazyId(id);
 
         function toggle(event: Event) {
             emit('change', event);

diff --git a/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue b/packages/vlossom/src/nodes/vs-focus-trap/VsFocusTrap.vue
@@ -127,7 +127,7 @@ export default defineComponent({
                 return null;
             }
 
-            const vNodes = slots.default().filter((vnode) => vnode.type !== Comment);
+            const vNodes = slots.default();
             if (vNodes.length !== 1) {
                 utils.log.error('vs-focus-trap', 'FocusTrap can only contain one child');
 

diff --git a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
@@ -27,7 +27,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
 import { ColorScheme, UIState, VsNode } from '@/declaration';
-import { useColorScheme, useStateClass, useStyleSet } from '@/composables';
+import { useColorScheme, useLazyId, useStateClass, useStyleSet } from '@/composables';
 import { utils } from '@/utils';
 import { VsRadioNodeStyleSet } from './types';
 
@@ -68,8 +68,7 @@ export default defineComponent({
             'vs-readonly': readonly.value,
         }));
 
-        const innerId = utils.string.createID();
-        const computedId = computed(() => id.value || innerId);
+        const { computedId } = useLazyId(id);
 
         function toggle(event: Event) {
             emit('change', event);

diff --git a/packages/vlossom/src/styles/variables.scss b/packages/vlossom/src/styles/variables.scss
@@ -7,6 +7,7 @@ $variables: (
     font-size-xl: 1.9rem,
 
     // radius
+    radius-ratio: 1,
     radius-xs: 0.2rem,
     radius-sm: 0.5rem,
     radius: 0.8rem,

diff --git a/packages/vlossom/src/utils/dom.ts b/packages/vlossom/src/utils/dom.ts
@@ -1,4 +1,7 @@
 export const domUtil = {
+    isBrowser(): boolean {
+        return typeof window !== 'undefined';
+    },
     getClientRect(element: HTMLElement): DOMRect {
         return element.getBoundingClientRect();
     },

diff --git a/packages/vlossom/src/vlossom-framework.ts b/packages/vlossom/src/vlossom-framework.ts
@@ -1,20 +1,29 @@
 import { store } from './stores';
 import * as vsPlugins from './plugins';
+import { utils } from './utils';
 
 import type { App } from 'vue';
 import type { VlossomOptions, VsComponent, VsNode } from '@/declaration';
 import type { ToastPlugin, ConfirmPlugin } from './plugins';
 
 export class Vlossom {
     constructor(options?: VlossomOptions) {
-        const { colorScheme = {}, styleSet = {}, theme = 'light', radiusRatio = 1 } = options || {};
+        const {
+            colorScheme = {},
+            styleSet = {},
+            theme = 'light',
+            radiusRatio = 1,
+            detectOSTheme = false,
+        } = options || {};
 
-        this.theme = (this.getDefaultTheme(options) as 'light' | 'dark') || theme;
         store.option.setGlobalColorScheme(colorScheme);
         store.option.registerStyleSet(styleSet);
-        store.option.setGlobalRadiusRatio(radiusRatio);
+        if (utils.dom.isBrowser()) {
+            this.theme = (this.getDefaultTheme(options) as 'light' | 'dark') || theme;
+            store.option.setGlobalRadiusRatio(radiusRatio);
+        }
 
-        if (options?.detectOSTheme) {
+        if (utils.dom.isBrowser() && detectOSTheme) {
             const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
             mediaQueryList.addEventListener('change', (event) => {
                 this.theme = event.matches ? 'dark' : 'light';