feat(ui): new composable - useHydration()

docs/src/assets/menu.js

@@ -662,6 +662,11 @@ export default [
         name: 'useMeta',
         path: 'use-meta'
       },
+      {
+        name: 'useHydration',
+        badge: 'new',
+        path: 'use-hydration'
+      },
       {
         name: 'useRenderCache',
         badge: 'new',
@@ -676,6 +681,11 @@ export default [
         name: 'useTimeout',
         badge: 'new',
         path: 'use-timeout'
+      },
+      {
+        name: 'useSplitAttrs',
+        badge: 'new',
+        path: 'use-split-attrs'
       }
     ]
   },

docs/src/pages/vue-components/no-ssr.md

@@ -5,6 +5,7 @@ keys: QNoSsr
 related:
   - /quasar-cli-vite/developing-ssr/introduction
   - /quasar-cli-webpack/developing-ssr/introduction
+  - /vue-composables/use-hydration
 ---
 The QNoSsr component makes sense only if you are creating a SSR website/app.
 

docs/src/pages/vue-composables/use-hydration.md

@@ -0,0 +1,52 @@
+---
+title: useHydration composable
+desc: What is useHydration() composable and how you can use it
+keys: useHydration
+badge: Quasar v2.15+
+related:
+  - /vue-components/no-ssr
+---
+
+The useHydration composable is useful when you build for SSR (but can be used for non SSR builds as well). It is a lower level util of the [QNoSsr](/vue-components/no-ssr) component.
+
+## Syntax
+
+```js
+import { useHydration } from 'quasar'
+
+setup () {
+  const { isHydrated } = useHydration()
+}
+```
+
+```js
+function useHydration(): {
+  isHydrated: Ref<boolean>;
+};
+```
+
+## Example
+
+```html
+<template>
+  <div>
+    <div v-if="isHydrated">
+      Gets rendered only after hydration.
+    </div>
+  </div>
+</template>
+
+<script>
+import { useHydration } from 'quasar'
+
+export default {
+  setup () {
+    const { isHydrated } = useHydration()
+
+    return {
+      isHydrated
+    }
+  }
+}
+</script>
+```

docs/src/pages/vue-composables/use-render-cache.md

@@ -32,7 +32,7 @@ setup () {
 
 ```js
 function useRenderCache(): {
-  getCache: <T = any>(key: string, defaultValue?: T | (() => T)) => T | undefined;
+  getCache: <T = any>(key: string, defaultValue?: T | (() => T)) => T;
   setCache: <T = any>(key: string, value: T) => void;
   hasCache: (key: string) => boolean;
   clearCache: (key?: string) => void;

docs/src/pages/vue-composables/use-split-attrs.md

@@ -23,9 +23,11 @@ setup () {
 ```
 
 ```js
+import { Ref } from 'vue'
+
 function useSplitAttrs(): {
-  attributes: Ref<Record<string, any>>;
-  listeners: Ref<Record<string, any>>;
+  attributes: Ref<Record<string, string | null | undefined>>;
+  listeners: Ref<Record<string, (...args: any[]) => any>>;
 };
 ```
 

ui/src/components/no-ssr/QNoSsr.js

@@ -1,6 +1,6 @@
 import { h } from 'vue'
 
-import useCanRender from '../../composables/private/use-can-render.js'
+import useHydration from '../../composables/use-hydration.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
@@ -18,10 +18,10 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const canRender = useCanRender()
+    const { isHydrated } = useHydration()
 
     return () => {
-      if (canRender.value === true) {
+      if (isHydrated.value === true) {
         const node = hSlot(slots.default)
         return node === void 0
           ? node

ui/src/components/resize-observer/QResizeObserver.js

@@ -1,6 +1,6 @@
 import { h, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
 
-import useCanRender from '../../composables/private/use-can-render.js'
+import useHydration from '../../composables/use-hydration.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { listenOpts, noop } from '../../utils/event.js'
@@ -95,7 +95,7 @@ export default createComponent({
       return noop
     }
     else { // no observer, so fallback to old iframe method
-      const canRender = useCanRender()
+      const { isHydrated } = useHydration()
 
       let curDocView
 
@@ -134,7 +134,7 @@ export default createComponent({
       onBeforeUnmount(cleanup)
 
       return () => {
-        if (canRender.value === true) {
+        if (isHydrated.value === true) {
           return h('object', {
             class: 'q--avoid-card-border',
             style: resizeProps.style,

ui/src/composables.js

@@ -2,6 +2,8 @@ import useDialogPluginComponent from './composables/use-dialog-plugin-component.
 import useFormChild from './composables/use-form-child.js'
 import useMeta from './composables/use-meta.js'
 import useQuasar from './composables/use-quasar.js'
+
+import useHydration from './composables/use-hydration.js'
 import useRenderCache from './composables/use-render-cache.js'
 import useSplitAttrs from './composables/use-split-attrs.js'
 import useTick from './composables/use-tick.js'
@@ -12,6 +14,8 @@ export {
   useFormChild,
   useMeta,
   useQuasar,
+
+  useHydration,
   useRenderCache,
   useSplitAttrs,
   useTick,

ui/src/composables/use-hydration.js

@@ -0,0 +1,16 @@
+import { ref, onMounted } from 'vue'
+
+// using it to manage SSR rendering with best performance
+import { isRuntimeSsrPreHydration } from '../plugins/Platform.js'
+
+export default function () {
+  const isHydrated = ref(!isRuntimeSsrPreHydration.value)
+
+  if (isHydrated.value === false) {
+    onMounted(() => {
+      isHydrated.value = true
+    })
+  }
+
+  return { isHydrated }
+}

ui/types/composables.d.ts

@@ -27,20 +27,24 @@ interface UseFormChildOptions {
 
 export function useFormChild(options: UseFormChildOptions): void;
 
+export function useHydration(): {
+  isHydrated: Ref<boolean>;
+};
+
 export function useMeta(options: MetaOptions | (() => MetaOptions)): void;
 
 export function useQuasar(): QVueGlobals;
 
 export function useRenderCache(): {
-  getCache: <T = any>(key: string, defaultValue?: T | (() => T)) => T | undefined;
+  getCache: <T = any>(key: string, defaultValue?: T | (() => T)) => T;
   setCache: <T = any>(key: string, value: T) => void;
   hasCache: (key: string) => boolean;
   clearCache: (key?: string) => void;
 };
 
 export function useSplitAttrs(): {
-  attributes: Ref<Record<string, any>>;
-  listeners: Ref<Record<string, any>>;
+  attributes: Ref<Record<string, string | null | undefined>>;
+  listeners: Ref<Record<string, (...args: any[]) => any>>;
 };
 
 export function useTick(): {