Revert to classnames

Francis Champagne · Francis Champagne · commit f950670f10aa · 2021-01-12T22:29:50.000-05:00
diff --git a/components/FontListener.tsx b/components/FontListener.tsx
@@ -8,12 +8,14 @@ interface Props {
   fontNames: string[]
   interval: number
   timeout: number
+  scope: string
 }
 
 export const FontListener: React.FC<Props> = ({
   fontNames,
   interval,
   timeout,
+  scope,
 }) => {
   const [hasLoaded, setHasLoaded] = useState<Boolean>(false)
   const [loadedFonts, setLoadedFonts] = useState<string[]>([])
@@ -25,7 +27,9 @@ export const FontListener: React.FC<Props> = ({
     [loadedFonts, fontNames]
   )
 
-  const loadedAttrName = useMemo(getLoadedFontAttrNames, [loadedFonts])
+  const classnameScope = useMemo(() => scope, [])
+  const loadedClassname = useMemo(getLoadedFontClassNames, [loadedFonts])
+  const targetElement = classnameScope === "html" ? "documentElement" : "body"
   
   const apiAvailable = "fonts" in document
 
@@ -46,17 +50,18 @@ export const FontListener: React.FC<Props> = ({
       clearInterval(intervalId)
     }
   }, [hasLoaded, intervalId])
+
+  useEffect(() => {
+    document[targetElement].className += " " + loadedClassname
+  }, [loadedClassname])
   
-  return (
-    <Helmet>
-      <html {...loadedAttrName} />
-    </Helmet>
-  )
+  return null
 
-  function getLoadedFontAttrNames() {
+  function getLoadedFontClassNames() {
     return Boolean(loadedFonts.length)
       ? loadedFonts
-          .reduce((acc, fontName) => ({ ...acc, ...({[`wf-${kebabCase(fontName)}`]: "loaded"}) }), {})
+          .map(fontName => `wf-${kebabCase(fontName)}--loaded`)
+          .join(" ")
       : ""
   }
 
diff --git a/consts/defaults.ts b/consts/defaults.ts
@@ -3,3 +3,5 @@ export const INTERVAL_DEFAULT = 300
 export const TIMEOUT_DEFAULT = 30000
 
 export const MODE_DEFAULT = "async"
+
+export const SCOPE_DEFAULT = "body"
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { AsyncFonts, FontListener } from "./components"
-import { INTERVAL_DEFAULT, MODE_DEFAULT, TIMEOUT_DEFAULT } from "./consts"
+import { INTERVAL_DEFAULT, MODE_DEFAULT, TIMEOUT_DEFAULT, SCOPE_DEFAULT } from "./consts"
 import { getFontFiles, getFontNames } from "./utils"
 
 export const wrapRootElement = (
@@ -11,6 +11,7 @@ export const wrapRootElement = (
     enableListener,
     interval = INTERVAL_DEFAULT,
     timeout = TIMEOUT_DEFAULT,
+    scope = SCOPE_DEFAULT,
     mode = MODE_DEFAULT,
   }
 ) => {
@@ -22,7 +23,7 @@ export const wrapRootElement = (
   const fontFiles = getFontFiles(allFonts)
   const fontNames = getFontNames(allFonts)
 
-  const listenerProps = { fontNames, interval, timeout }
+  const listenerProps = { fontNames, interval, timeout, scope }
 
   const hasFontFiles = Boolean(fontFiles.length)
   const hasFontNames = Boolean(fontNames.length)
