Merge pull request #28 from codeAdrian/feature/v2

Feature/v2
codeAdrian · Mar 14, 2022 · 0dfe678 · 0dfe678
2 parents deb3946 + 38983f1
commit 0dfe678
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 231 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
 <img src="https://res.cloudinary.com/dazdt97d3/image/upload/c_scale,q_auto:best,w_200/v1606558223/omni-logo.jpg" alt="Omni font loader logo">
 <br/><br/>
-<h1>Gatsby Omni Font Loader</h1>
+<h1>Gatsby Omni Font Loader v2</h1>
 </div>
 
 - Simple way to add webfonts or custom fonts to Gatsby project
@@ -106,12 +106,12 @@ Add the following snippet to `gatsby-config.js` plugins array.
       <td>false</td>
     </tr>
     <tr>
-      <td>interval</td>
+      <td>interval <strong>(V1 ONLY)</strong></td>
       <td>Works if <code>enableListener</code> is <code>true</code>. Font listener interval (in ms). Default is 300ms. Recommended: >=300ms. </td>
       <td>300</td>
     </tr>
     <tr>
-      <td>timeout</td>
+      <td>timeout <strong>(V1 ONLY)</strong></td>
       <td>Works if <code>enableListener</code> is <code>true</code>. Font listener timeout value (in ms). Default is 30s (30000ms). Listener will no longer check for loaded fonts after timeout, fonts will still be loaded and displayed, but without handling FOUT.</td>
       <td>30000</td>
     </tr>
@@ -164,20 +164,24 @@ To avoid this, we can use CSS to style the fallback font to closely match the fo
 
 When `enableListener: true` is set in plugin config in `gatsby-config.js`, HTML classes are being added to `<body>` element as the fonts are being loaded.
 
-HTML class name format will be in the following format `wf-[font-family-name]--loaded`.
+HTML class name format will be in the following format `wf-[font-family-name]`. When all fonts are loaded `wf-all` is applied.
 
 You can use the [Font Style Matcher](https://meowni.ca/font-style-matcher/) to adjust the perfect fallback font and fallback CSS config.
 
 Here is the example of how `body` element will look like after all fonts are being loaded (depending on the config).
 
 ```html
 <body
-  class="wf-lazy-monday--loaded wf-font-awesome-5-brands--loaded wf-font-awesome-5-free--loaded wf-staatliches--loaded wf-henny-penny--loaded"
+  class="wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all"
 ></body>
 ```
 
 <img alt="FOUT example" src="https://res.cloudinary.com/dazdt97d3/image/upload/v1604140006/fouc.gif">
 
+## V2 breaking changes
+* Removed `interval` and `timeout` options
+* Changed class name format to a more generic `wf-[font-family-name]` to avoid mixing naming conventions
+
 ## Issues and Contributions
 
 Feel free to [report issues](https://github.com/codeAdrian/gatsby-omni-font-loader/issues) you find and feel free to contribute to the project by creating Pull Requests.

diff --git a/components/FontListener.tsx b/components/FontListener.tsx
diff --git a/components/index.ts b/components/index.ts
@@ -1,2 +1 @@
-export * from "./AsyncFonts"
-export * from "./FontListener"
+export * from "./AsyncFonts";
diff --git a/consts/defaults.ts b/consts/defaults.ts
@@ -1,7 +1,2 @@
-export const INTERVAL_DEFAULT = 300
-
-export const TIMEOUT_DEFAULT = 30000
-
-export const MODE_DEFAULT = "async"
-
-export const SCOPE_DEFAULT = "body"
+export const MODE_DEFAULT = "async";
+export const SCOPE_DEFAULT = "body";
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,48 +1,41 @@
-import React from "react"
-import { AsyncFonts, FontListener } from "./components"
-import {
-  INTERVAL_DEFAULT,
-  MODE_DEFAULT,
-  TIMEOUT_DEFAULT,
-  SCOPE_DEFAULT,
-} from "./consts"
-import { getFontFiles, getFontNames } from "./utils"
+import React from "react";
+import { AsyncFonts } from "./components";
+import { MODE_DEFAULT, SCOPE_DEFAULT } from "./consts";
+import { getFontFiles, getFontNames } from "./utils";
+import { fontListener } from "./utils/fontListener";
+
+export const onClientEntry = (
+  _,
+  { custom = [], web = [], enableListener = false, scope = SCOPE_DEFAULT }
+) => {
+  if (!enableListener) {
+    return;
+  }
+
+  const allFonts = [...custom, ...web];
+  const fontNames = getFontNames(allFonts);
+  const listenerProps = { fontNames, scope };
+
+  fontListener(listenerProps);
+};
 
 export const wrapRootElement = (
   { element },
-  {
-    custom = [],
-    web = [],
-    enableListener,
-    interval = INTERVAL_DEFAULT,
-    timeout = TIMEOUT_DEFAULT,
-    scope = SCOPE_DEFAULT,
-    mode = MODE_DEFAULT,
-  }
+  { custom = [], web = [], mode = MODE_DEFAULT }
 ) => {
   if (mode !== "async") {
-    return element
+    return element;
   }
 
-  const allFonts = [...custom, ...web]
-  const fontFiles = getFontFiles(allFonts)
-  const fontNames = getFontNames(allFonts)
+  const allFonts = [...custom, ...web];
+  const fontFiles = getFontFiles(allFonts);
+  const fontNames = getFontNames(allFonts);
+  const hasFontNames = Boolean(fontNames.length);
 
-  const listenerProps = { fontNames, interval, timeout, scope }
-
-  const hasFontFiles = Boolean(fontFiles.length)
-  const hasFontNames = Boolean(fontNames.length)
-
-  const children = (
+  return (
     <>
       {hasFontNames && <AsyncFonts hrefs={fontFiles} />}
       {element}
     </>
-  )
-
-  if (!hasFontFiles || !enableListener) {
-    return children
-  }
-
-  return <FontListener options={listenerProps}>{children}</FontListener>
-}
+  );
+};
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -1,34 +1,21 @@
-import { MODE_DEFAULT } from "./consts"
-import { getFontConfig, getTestFonts } from "./generators"
-import { getFontFiles, getFontNames } from "./utils"
+import { MODE_DEFAULT } from "./consts";
+import { getFontConfig } from "./generators";
+import { getFontFiles } from "./utils";
 
 export const onRenderBody = (
-  { setHeadComponents, setPostBodyComponents },
-  {
-    enableListener,
-    preconnect = [],
-    preload = [],
-    web = [],
-    custom = [],
-    mode = MODE_DEFAULT,
-  }
+  { setHeadComponents },
+  { preconnect = [], preload = [], web = [], custom = [], mode = MODE_DEFAULT }
 ) => {
-  const allFonts = [...web, ...custom]
-  const allPreloads = preload.concat(getFontFiles(allFonts))
-  const fontNames = getFontNames(allFonts)
+  const allFonts = [...web, ...custom];
+  const allPreloads = preload.concat(getFontFiles(allFonts));
 
   const preloadConfig = getFontConfig(
     preconnect,
     allPreloads,
     mode === "async" ? [] : allFonts
-  )
-
-  if (enableListener && Boolean(allFonts.length) && mode === "async") {
-    const testFontConfig = getTestFonts(fontNames)
-    setPostBodyComponents(testFontConfig)
-  }
+  );
 
   if (preloadConfig && Boolean(preloadConfig.length)) {
-    setHeadComponents(preloadConfig)
+    setHeadComponents(preloadConfig);
   }
-}
+};
diff --git a/generators/getTestFonts.tsx b/generators/getTestFonts.tsx
diff --git a/generators/index.ts b/generators/index.ts
@@ -1,2 +1 @@
-export * from "./getFontConfig"
-export * from "./getTestFonts"
+export * from "./getFontConfig";
diff --git a/hooks/index.ts b/hooks/index.ts
diff --git a/hooks/useFontListener.tsx b/hooks/useFontListener.tsx
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "url": "https://github.com/codeAdrian/gatsby-omni-font-loader"
   },
   "peerDependencies": {
-    "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
     "react-helmet": ">=6.0.0"
   }
 }