fix(plugin): add plugin for head; clean mixin

- add $speedkitHead for apply head in custom definition
basics · Mar 14, 2022 · bffb95d · bffb95d
1 parent eb16b21
commit bffb95d
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 35 deletions.
diff --git a/lib/module.js b/lib/module.js
@@ -73,6 +73,12 @@ async function addBuildTemplates (scope, options) {
     }
   });
 
+  scope.addPlugin({
+    src: path.resolve(__dirname, 'templates/plugin/head.js'),
+    fileName: pkg.name + '/plugin/head.js',
+    options: {}
+  });
+
   scope.addTemplate({
     src: path.resolve(__dirname, 'templates/entry.js'),
     fileName: pkg.name + '/entry.js',

diff --git a/lib/plugins/vFont/mixin.js b/lib/plugins/vFont/mixin.js
@@ -1,8 +1,6 @@
 import FontCollection from 'nuxt-speedkit/classes/FontCollection';
 import { setIdleExecute } from 'nuxt-speedkit/hydrate';
 
-const pageStyles = { prev: new Map(), current: new Map() };
-
 export default {
   install (Vue) {
     Vue.mixin({
@@ -21,12 +19,6 @@ export default {
         next();
       },
 
-      beforeRouteEnter (to, from, next) {
-        pageStyles.prev = new Map(pageStyles.current);
-        pageStyles.current.clear();
-        next();
-      },
-
       props: {
         critical: {
           type: Boolean,
@@ -44,32 +36,7 @@ export default {
       },
 
       head () {
-        const head = this.fontCollection.getHeadDescription ? this.fontCollection.getHeadDescription(this.isCritical, this.$speedkit.crossorigin) : {};
-        let style = head.style || [];
-
-        // add critical fonts to ssr context.
-        if (process.static && process.server && this.isCritical) {
-          head.style.forEach(style => this.$addCriticalFontStyle(style));
-        }
-
-        // get styles from ssr context, important for initial load
-        const nuxtStateData = (this.$nuxt?.context || this.context)?.nuxtState?.data;
-        if (nuxtStateData && nuxtStateData.length) {
-          style = [].concat(style, Object.values(nuxtStateData[0]._criticalFontStyles || {}));
-        }
-
-        // keeping styles in head when changing page
-        style = style.reduce((result, style) => {
-          if (!style.hid) {
-            result.push(style);
-          } else {
-            pageStyles.current.set(style.hid, style);
-          }
-          return result;
-        }, []);
-        style = style.concat(Array.from(pageStyles.prev.values()), Array.from(pageStyles.current.values()));
-
-        return { ...head, style };
+        return this.$speedkitHead();
       },
 
       computed: {

diff --git a/lib/templates/plugin.js b/lib/templates/plugin.js
@@ -46,4 +46,3 @@ export default (context, inject) => {
   }
 });
 
-Vue.config.optionMergeStrategies.head = Vue.config.optionMergeStrategies.data;
diff --git a/lib/templates/plugin/head.js b/lib/templates/plugin/head.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+const pageStyles = { prev: new Map(), current: new Map() };
+
+export default {
+  install (Vue) {
+    Vue.mixin({
+      beforeRouteEnter (to, from, next) {
+        pageStyles.prev = new Map(pageStyles.current);
+        pageStyles.current.clear();
+        next();
+      }
+    })
+  }
+};
+
+const head = function () {
+  const head = this.fontCollection.getHeadDescription ? this.fontCollection.getHeadDescription(this.isCritical, this.$speedkit.crossorigin) : {};
+  let style = head.style || [];
+
+  // add critical fonts to ssr context.
+  if (process.static && process.server && this.isCritical) {
+    head.style.forEach(style => this.$addCriticalFontStyle(style));
+  }
+
+  // get styles from ssr context, important for initial load
+  const nuxtStateData = (this.$nuxt?.context || this.context)?.nuxtState?.data;
+  if (nuxtStateData && nuxtStateData.length) {
+    style = [].concat(style, Object.values(nuxtStateData[0]._criticalFontStyles || {}));
+  }
+
+  // keeping styles in head when changing page
+  style = style.reduce((result, style) => {
+    if (!style.hid) {
+      result.push(style);
+    } else {
+      pageStyles.current.set(style.hid, style);
+    }
+    return result;
+  }, []);
+  style = style.concat(Array.from(pageStyles.prev.values()), Array.from(pageStyles.current.values()));
+
+  return { ...head, style };
+};
+
+!('$speedkitHead' in Vue.prototype) && Object.defineProperty(Vue.prototype, '$speedkitHead', {
+  get () {
+    return head.bind(this);
+  }
+});
+
+Vue.config.optionMergeStrategies.head = Vue.config.optionMergeStrategies.data;