Merge pull request #1120 from basics/feature/update-hydrate

fix(hydrate): removed vue3-lazy-hydration, added vue hydration

build.config.js

@@ -6,7 +6,6 @@ export default {
     'change-case',
     'hash-sum',
     'probe-image-size',
-    'vue3-lazy-hydration',
     'node-cache',
 
     // package
@@ -20,7 +19,6 @@ export default {
     'image-meta',
     'pathe',
     'sort-css-media-queries',
-    'vue3-lazy-hydration',
     'mime-types',
     'mime-db'
   ],

docs/src/composables/useBoosterHydrate.md

@@ -1,13 +1,32 @@
 ---
 title: useBoosterHydrate
+title2: useBoosterHydrate(component, hydrateOverride)
 ---
 
-# {{$frontmatter.title}}
+# {{$frontmatter.title2}}
 
 Compasable provides a function for wrapping components in order to control hydration.
 
 [Learn more about component import](/guide/usage#import-components).
 
+## Arguments
+
+### `component`
+
+- Type: `Function`
+  - Default: `true`
+
+Component import function.
+
+### `hydrateOverride`
+
+- Type: `Function`
+  - Default: `hydrateOnVisible(…)`
+
+Hydrate override function.
+
+Learn more about [Lazy Hydration](https://vuejs.org/guide/components/async#lazy-hydration).
+
 ## Return
 
 Returns import wrapper function.
@@ -17,5 +36,30 @@ Returns import wrapper function.
 ```js
 const hydrate = useBoosterHydrate();
 
-const component = hydrate(() => import('~/components/MyComponent.vue'));
+const component = hydrate(
+  () => import('~/components/MyComponent.vue'),
+  hydrateOnVisibleSpezificRoute({ rootMargin: '100px' })
+);
+```
+
+### Useful
+
+With a custom hydrate function, you can control the hydration of components.
+
+It is possible to create a custom hydrate function that will hydrate only on a specific route.
+
+#### Example
+
+```js
+
+const $router = useRouter();
+
+const hydrateOnVisibleSpezificRoute = options => (hydrate, forEach) => {
+  if ($router.currentRoute.value === 'specific-route') {
+    return hydrateOnVisible(options)(hydrate, forEach);
+  } else {
+    hydrate();
+  }
+};
+
 ```

docs/src/guide/usage.md

@@ -40,8 +40,6 @@ Until now, components were imported either statically (`import component from '@
 - 'Ensures that components are initialized only when needed in the visible viewport.'
 - 'Optimizes initialization of critical components on initial page load (critical components are initially in the visible viewport).'
 
-In the background, the module [`vue3-lazy-hydration`](https://github.com/freddy38510/vue3-lazy-hydration) inspired by `vue-lazy-hydration` from [Markus Oberlehner](https://github.com/maoberlehner/vue-lazy-hydration) is used in a standardised way.
-
 [Learn more about `useBoosterHydrate`](/composables/useBoosterHydrate).
 
 ````js