Merge pull request #132 from GrabarzUndPartner/feature/vue-lazy-hydration

Feature/vue lazy hydration

Author: ThornWalli

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Project Changelog
 
+## [1.0.6](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v1.0.5...v1.0.6) (2021-01-22)
+
+
+### Bug Fixes
+
+* **font:** fix font-weight safari ([0403352](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/0403352e34c004d8267639fcec0ef86454e22181))
+* **font:** fix weight normalize ([4b8ee08](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/4b8ee081f5df9f967ed1e09dfd0d178395eb202a))
+* **font:** weight normalize both values ([214bec4](https://github.com/GrabarzUndPartner/nuxt-speedkit/commit/214bec4993909face7bb9612b1ccb3d9644ae168))
+
 ## [1.0.5](https://github.com/GrabarzUndPartner/nuxt-speedkit/compare/v1.0.4...v1.0.5) (2021-01-16)
 
 

README.md

@@ -1,11 +1,10 @@
 # nuxt-speedkit
 
+![nuxt-speedkit][logo]
+
 [![Grabarz & Partner - Module][grabarz-partner-module-src]][grabarz-partner-href] 
 
 [![main][github-workflow-main-src]][github-workflow-main-href]
-[![dependencies status][dependencies-status-src]][dependencies-status-href]
-[![dev-dependencies status][dependencies-dev-status-src]][dependencies-dev-status-href]
-
 [![Sonarcloud Status][sonarcloud-src]][sonarcloud-href]
 
 [![npm version][npm-version-latest-src]][npm-version-latest-href]
@@ -357,7 +356,7 @@ or look here
 [MIT License](./LICENSE)
 
 <!-- Badges -->
-
+[logo]: https://repository-images.githubusercontent.com/265295866/7e292000-5cc1-11eb-8469-1aafbf1d2727 "nuxt-speedkit"
 [grabarz-partner-module-src]: <https://img.shields.io/badge/Grabarz%20&%20Partner-Module-d19700>
 [grabarz-partner-href]: <https://grabarzundpartner.de>
 

example/pages/full-example-with-components.vue

@@ -23,7 +23,7 @@ export default {
 
     const lazyImageWebp = require('@/assets/img/lazy-2400.jpg?resize&sizes[]=480,sizes[]=768,sizes[]=960,sizes[]=1080,sizes[]=1200,sizes[]=1536,sizes[]=2160,sizes[]=2400&placeholder&format=webp');
     const lazyImageJpeg = require('@/assets/img/lazy-2400.jpg?resize&sizes[]=480,sizes[]=768,sizes[]=960,sizes[]=1080,sizes[]=1200,sizes[]=1536,sizes[]=2160,sizes[]=2400&placeholder');
-    const lazyPlaceholder = require('@/assets/img/lazy-2400.jpg?lqip');
+    const lazyPlaceholder = require('@/assets/img/lazy-2400.jpg?sqip');
 
     return {
       contentA: '<p>This is a basic test with single font variant.</p>',

example/pages/index.vue

@@ -61,10 +61,6 @@ export default {
               title: 'Test: SpeedkitIframe',
               to: '/tests/speedkit-iframe'
             },
-            {
-              title: 'Test: Speedkit Function',
-              to: '/tests/speedkit-function'
-            },
             {
               title: 'Test: Component Import (Critical by Prop)',
               to: '/tests/component-import/critical-prop'

example/pages/tests/speedkit-function.vue

@@ -1,6 +1,6 @@
 // IMPORTANT: speedkitComponent must be equal projekt import
 import FontCollection from 'nuxt-speedkit/classes/FontCollection';
-import speedkit, { MODE } from 'nuxt-speedkit/utils/speedkit';
+import { hydrateWhenVisible } from 'vue-lazy-hydration';
 
 export default {
   install (Vue) {
@@ -49,7 +49,7 @@ export default {
           .entries(this.$options.speedkitComponents || {})
           .reduce((result, [key, value]) => {
             return Object.assign(result, {
-              [key]: speedkit(() => wrapComponent(value()), MODE.VISIBLE, {
+              [key]: hydrateWhenVisible(value, {
                 rootMargin: process.env.NUXT_SPEEDKIT_LAZY_OFFSET_COMPONENT || '0%'
               })
             });
@@ -59,18 +59,3 @@ export default {
     });
   }
 };
-
-function wrapComponent (module) {
-  return module.then((component) => {
-    return {
-      functional: true,
-      render (h, context) {
-        const componentData = context.data;
-        componentData.attrs = Object.assign({}, componentData.attrs, context.props);
-        return h(component.default || component, Object.assign({}, componentData));
-      }
-    };
-  }).catch((err) => {
-    throw err;
-  });
-}