Skip to content

Commit 7edac1c

Browse files
author
Adrian Bece
committed
V2 cleanup and refactor
1 parent deb3946 commit 7edac1c

11 files changed

+94
-218
lines changed

‎components/FontListener.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎components/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export * from "./AsyncFonts"
2-
export * from "./FontListener"
1+
export * from "./AsyncFonts";

‎consts/defaults.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,2 @@
1-
export const INTERVAL_DEFAULT = 300
2-
3-
export const TIMEOUT_DEFAULT = 30000
4-
5-
export const MODE_DEFAULT = "async"
6-
7-
export const SCOPE_DEFAULT = "body"
1+
export const MODE_DEFAULT = "async";
2+
export const SCOPE_DEFAULT = "body";

‎gatsby-browser.js

Lines changed: 27 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,39 @@
1-
import React from "react"
2-
import { AsyncFonts, FontListener } from "./components"
3-
import {
4-
INTERVAL_DEFAULT,
5-
MODE_DEFAULT,
6-
TIMEOUT_DEFAULT,
7-
SCOPE_DEFAULT,
8-
} from "./consts"
9-
import { getFontFiles, getFontNames } from "./utils"
1+
import React from "react";
2+
import { AsyncFonts } from "./components";
3+
import { MODE_DEFAULT, SCOPE_DEFAULT } from "./consts";
4+
import { getFontFiles, getFontNames } from "./utils";
5+
import { fontListener } from "./utils/fontListener";
6+
7+
export const onClientEntry = (
8+
_,
9+
{ custom = [], web = [], enableListener, scope = SCOPE_DEFAULT }
10+
) => {
11+
if (enableListener) {
12+
const listenerProps = { fontNames, scope };
13+
const allFonts = [...custom, ...web];
14+
const fontNames = getFontNames(allFonts);
15+
16+
fontListener(listenerProps);
17+
}
18+
};
1019

1120
export const wrapRootElement = (
1221
{ element },
13-
{
14-
custom = [],
15-
web = [],
16-
enableListener,
17-
interval = INTERVAL_DEFAULT,
18-
timeout = TIMEOUT_DEFAULT,
19-
scope = SCOPE_DEFAULT,
20-
mode = MODE_DEFAULT,
21-
}
22+
{ custom = [], web = [], mode = MODE_DEFAULT }
2223
) => {
2324
if (mode !== "async") {
24-
return element
25+
return element;
2526
}
2627

27-
const allFonts = [...custom, ...web]
28-
const fontFiles = getFontFiles(allFonts)
29-
const fontNames = getFontNames(allFonts)
28+
const allFonts = [...custom, ...web];
29+
const fontFiles = getFontFiles(allFonts);
30+
const fontNames = getFontNames(allFonts);
31+
const hasFontNames = Boolean(fontNames.length);
3032

31-
const listenerProps = { fontNames, interval, timeout, scope }
32-
33-
const hasFontFiles = Boolean(fontFiles.length)
34-
const hasFontNames = Boolean(fontNames.length)
35-
36-
const children = (
33+
return (
3734
<>
3835
{hasFontNames && <AsyncFonts hrefs={fontFiles} />}
3936
{element}
4037
</>
41-
)
42-
43-
if (!hasFontFiles || !enableListener) {
44-
return children
45-
}
46-
47-
return <FontListener options={listenerProps}>{children}</FontListener>
48-
}
38+
);
39+
};

‎gatsby-ssr.js

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { MODE_DEFAULT } from "./consts"
2-
import { getFontConfig, getTestFonts } from "./generators"
3-
import { getFontFiles, getFontNames } from "./utils"
1+
import { MODE_DEFAULT } from "./consts";
2+
import { getFontConfig } from "./generators";
3+
import { getFontFiles, getFontNames } from "./utils";
44

55
export const onRenderBody = (
6-
{ setHeadComponents, setPostBodyComponents },
6+
{ setHeadComponents },
77
{
88
enableListener,
99
preconnect = [],
@@ -13,22 +13,17 @@ export const onRenderBody = (
1313
mode = MODE_DEFAULT,
1414
}
1515
) => {
16-
const allFonts = [...web, ...custom]
17-
const allPreloads = preload.concat(getFontFiles(allFonts))
18-
const fontNames = getFontNames(allFonts)
16+
const allFonts = [...web, ...custom];
17+
const allPreloads = preload.concat(getFontFiles(allFonts));
18+
const fontNames = getFontNames(allFonts);
1919

2020
const preloadConfig = getFontConfig(
2121
preconnect,
2222
allPreloads,
2323
mode === "async" ? [] : allFonts
24-
)
25-
26-
if (enableListener && Boolean(allFonts.length) && mode === "async") {
27-
const testFontConfig = getTestFonts(fontNames)
28-
setPostBodyComponents(testFontConfig)
29-
}
24+
);
3025

3126
if (preloadConfig && Boolean(preloadConfig.length)) {
32-
setHeadComponents(preloadConfig)
27+
setHeadComponents(preloadConfig);
3328
}
34-
}
29+
};

‎generators/getTestFonts.tsx

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎generators/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
export * from "./getFontConfig"
2-
export * from "./getTestFonts"
1+
export * from "./getFontConfig";

‎hooks/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎hooks/useFontListener.tsx

Lines changed: 0 additions & 108 deletions
This file was deleted.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"url": "https://github.com/codeAdrian/gatsby-omni-font-loader"
2828
},
2929
"peerDependencies": {
30-
"gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0",
30+
"gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
3131
"react-helmet": ">=6.0.0"
3232
}
3333
}

‎utils/fontListener.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { kebabCase } from "../utils";
2+
3+
declare var document: { fonts: any };
4+
5+
export const fontListener = ({ fontNames, scope }) => {
6+
const hasFonts = fontNames && Boolean(fontNames.length);
7+
const targetElement = scope === "html" ? "documentElement" : "body";
8+
const apiAvailable = "fonts" in document;
9+
10+
function handleLoadComplete() {
11+
addClassName("all");
12+
}
13+
14+
function handleFontLoad(fontName: string) {
15+
addClassName(fontName);
16+
}
17+
18+
function fontMapper(fontName) {
19+
return document.fonts
20+
.load(`1rem ${fontName}`)
21+
.then(handleFontLoad)
22+
.catch(errorFallback);
23+
}
24+
25+
function loadFonts() {
26+
const fonts = fontNames.map(fontMapper);
27+
Promise.all(fonts).then(handleLoadComplete).catch(errorFallback);
28+
}
29+
30+
function errorFallback() {
31+
fontNames.forEach(addClassName);
32+
}
33+
34+
function handleApiError(error) {
35+
console.info(`document.fonts API error: ${error}`);
36+
console.info(`Replacing fonts instantly. FOUT handling failed.`);
37+
errorFallback();
38+
}
39+
40+
function addClassName(fontName) {
41+
document[targetElement].classList.add(`wf-${kebabCase(fontName)}`);
42+
}
43+
44+
if (!apiAvailable) {
45+
handleApiError("Font loading API not available");
46+
return;
47+
}
48+
49+
if (hasFonts && apiAvailable) {
50+
loadFonts();
51+
}
52+
};

0 commit comments

Comments
 (0)