vite-plugin-fonts - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.d.ts

@@ -73,2 +73,11 @@ import { Plugin } from 'vite';
     preload?: boolean;
+    /**
+     * Using `<link rel="prefetch">` is intended for prefetching resources
+     * that will be used in the next navigation/page load
+     * (e.g. when you go to the next page)
+     *
+     * Note: this can not be used with `preload`
+     * @default false
+     */
+    prefetch?: boolean;
 }
@@ -75,0 +84,0 @@

dist/index.js

@@ -224,7 +224,7 @@ var __defProp = Object.defineProperty;
 };
-var createFontFaceLink = (href) => {
+var createFontFaceLink = (prefetch = false) => (href) => {
   return {
     tag: "link",
     attrs: {
-      rel: "preload",
+      rel: prefetch ? "prefetch" : "preload",
       as: "font",
@@ -243,3 +243,4 @@ type: `font/${href.split(".").pop()}`,
     display = "auto",
-    preload = true
+    preload = true,
+    prefetch = false
   } = options;
@@ -266,4 +267,8 @@ if (!Array.isArray(families)) {
     const hrefs = faces.flatMap((face) => face.src).map((src2) => src2.replace(config2.root, "."));
-    if (preload)
-      tags.push(...hrefs.map(createFontFaceLink));
+    if (preload && prefetch) {
+      console.warn("vite-plugin-fonts: Prefetch and a Preload options can not be used together.");
+      console.warn("vite-plugin-fonts: The prefetch stand for a lower priority for the resource (maybe we will need it in a future page) whereas preload is for the current page, so we can not have both.");
+    }
+    if (preload || prefetch)
+      tags.push(...hrefs.map(createFontFaceLink(prefetch)));
     for (const face of faces)
@@ -270,0 +275,0 @@ css.push(createFontFaceCSS(face));

package.json

 {
   "name": "vite-plugin-fonts",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Webfont loader for vite",
+  "license": "MIT",
   "author": "stafyniaksacha",
   "repository": "stafyniaksacha/vite-plugin-fonts",
-  "license": "MIT",
   "main": "dist/index.js",
@@ -26,2 +26,5 @@ "module": "dist/index.mjs",
   },
+  "dependencies": {
+    "fast-glob": "^3.2.11"
+  },
   "devDependencies": {
@@ -35,6 +38,3 @@ "@antfu/eslint-config-ts": "^0.18.8",
     "vite": "^2.8.6"
-  },
-  "dependencies": {
-    "fast-glob": "^3.2.11"
   }
 }

README.md

@@ -21,5 +21,5 @@ # vite-plugin-fonts
       google: {
-        families: ['Source Sans Pro']
+        families: ['Source Sans Pro'],
       },
-    })
+    }),
   ],
@@ -51,3 +51,3 @@ }
         id: '<projectId>',
-        
+
         /**
@@ -58,3 +58,3 @@ * enable non-blocking renderer
          */
-        defer: true
+        defer: true,
       },
@@ -65,3 +65,3 @@
         /**
-         * enable preconnect link injection 
+         * enable preconnect link injection
          *   <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
@@ -71,3 +71,3 @@ * default: true
         preconnect: false,
-        
+
         /**
@@ -78,3 +78,3 @@ * values: auto, block, swap(default), fallback, optional
         display: 'block',
-        
+
         /**
@@ -86,3 +86,2 @@ * values: auto, block, swap(default), fallback, optional
 
-        
         /**
@@ -112,5 +111,5 @@ * Fonts families lists
              */
-            defer: true
-          }
-        ]
+            defer: true,
+          },
+        ],
       },
@@ -150,5 +149,14 @@
          */
-        preload: true
-      }
-    })
+        preload: true,
+
+        /**
+         * Using `<link rel="prefetch">` is intended for prefetching resources
+         * that will be used in the next navigation/page load
+         * (e.g. when you go to the next page)
+         *
+         * Note: this can not be used with `preload`
+         */
+        prefetch: false,
+      },
+    }),
   ],
@@ -155,0 +163,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

26221

10.57%

Number of package files

6

20%

Lines of code

690

2.83%

Number of lines in readme file

162

5.19%

No dependency changes