Merge pull request #1129 from basics/next

Next

CHANGELOG.md

@@ -1,5 +1,52 @@
 # Project Changelog
 
+## [3.1.6-next.6](https://github.com/basics/nuxt-booster/compare/v3.1.6-next.5...v3.1.6-next.6) (2024-09-17)
+
+
+### Bug Fixes
+
+* **components:** fix class ([d7e84f6](https://github.com/basics/nuxt-booster/commit/d7e84f67e67038e68bd46885d63bcd118bf70425))
+* **components:** remove Test component ([f64b550](https://github.com/basics/nuxt-booster/commit/f64b55049ceec29dffad63eaedf7fc56e7614cad))
+* **components:** removed unused props ([4d071f1](https://github.com/basics/nuxt-booster/commit/4d071f119065b1b782f8b60f3dfdec12f8beb8bf))
+* **hydrate:** removed `vue3-lazy-hydration`, added vue hydration ([ffd02c9](https://github.com/basics/nuxt-booster/commit/ffd02c9816f851cadc6e3c1f717e5bdc42605dce))
+* **module:** update compatibility for nuxt ([765b835](https://github.com/basics/nuxt-booster/commit/765b8358e4b194654a61c542a65ac4e90cebf974))
+* **update:** removed unused values ([e8f603e](https://github.com/basics/nuxt-booster/commit/e8f603e7576a71933aab484274d906f93932132f))
+
+## [3.1.6-next.5](https://github.com/basics/nuxt-booster/compare/v3.1.6-next.4...v3.1.6-next.5) (2024-09-13)
+
+
+### Bug Fixes
+
+* **plugin:** improved dimension query ([819c4d0](https://github.com/basics/nuxt-booster/commit/819c4d0392e4915abff689fd6ef7487e27796cca))
+
+## [3.1.6-next.4](https://github.com/basics/nuxt-booster/compare/v3.1.6-next.3...v3.1.6-next.4) (2024-09-10)
+
+
+### Bug Fixes
+
+* **components:** removed log ([e880d2e](https://github.com/basics/nuxt-booster/commit/e880d2eb1b50a0cac939c24277673e759acfe072))
+
+## [3.1.6-next.3](https://github.com/basics/nuxt-booster/compare/v3.1.6-next.2...v3.1.6-next.3) (2024-09-05)
+
+
+### Bug Fixes
+
+* **components:** removed inheritAttrs ([624a666](https://github.com/basics/nuxt-booster/commit/624a6665fba9aadd445d1bcf9786d5502b9324ba))
+
+## [3.1.6-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.6-next.1...v3.1.6-next.2) (2024-09-05)
+
+
+### Bug Fixes
+
+* **components:** improvements for typescript ([e3f9409](https://github.com/basics/nuxt-booster/commit/e3f9409263e695bb92ae92fe656948a93301d4cc))
+
+## [3.1.6-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.5...v3.1.6-next.1) (2024-09-05)
+
+
+### Bug Fixes
+
+* **components:** added export for create missing ts defs ([04406bf](https://github.com/basics/nuxt-booster/commit/04406bfba67759eee02111442f0a9cc6e97c96f1))
+
 ## [3.1.5](https://github.com/basics/nuxt-booster/compare/v3.1.4...v3.1.5) (2024-08-18)
 
 

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