Skip to content

Commit 0dfe678

Browse files
codeAdriancodeAdrian
authored
Merge pull request #28 from codeAdrian/feature/v2
Feature/v2
2 parents deb3946 + 38983f1 commit 0dfe678

File tree

12 files changed

+105
-231
lines changed

12 files changed

+105
-231
lines changed

‎README.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div align="center">
22
<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">
33
<br/><br/>
4-
<h1>Gatsby Omni Font Loader</h1>
4+
<h1>Gatsby Omni Font Loader v2</h1>
55
</div>
66

77
- 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.
106106
<td>false</td>
107107
</tr>
108108
<tr>
109-
<td>interval</td>
109+
<td>interval <strong>(V1 ONLY)</strong></td>
110110
<td>Works if <code>enableListener</code> is <code>true</code>. Font listener interval (in ms). Default is 300ms. Recommended: >=300ms. </td>
111111
<td>300</td>
112112
</tr>
113113
<tr>
114-
<td>timeout</td>
114+
<td>timeout <strong>(V1 ONLY)</strong></td>
115115
<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>
116116
<td>30000</td>
117117
</tr>
@@ -164,20 +164,24 @@ To avoid this, we can use CSS to style the fallback font to closely match the fo
164164

165165
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.
166166

167-
HTML class name format will be in the following format `wf-[font-family-name]--loaded`.
167+
HTML class name format will be in the following format `wf-[font-family-name]`. When all fonts are loaded `wf-all` is applied.
168168

169169
You can use the [Font Style Matcher](https://meowni.ca/font-style-matcher/) to adjust the perfect fallback font and fallback CSS config.
170170

171171
Here is the example of how `body` element will look like after all fonts are being loaded (depending on the config).
172172

173173
```html
174174
<body
175-
class="wf-lazy-monday--loaded wf-font-awesome-5-brands--loaded wf-font-awesome-5-free--loaded wf-staatliches--loaded wf-henny-penny--loaded"
175+
class="wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all"
176176
></body>
177177
```
178178

179179
<img alt="FOUT example" src="https://res.cloudinary.com/dazdt97d3/image/upload/v1604140006/fouc.gif">
180180

181+
## V2 breaking changes
182+
* Removed `interval` and `timeout` options
183+
* Changed class name format to a more generic `wf-[font-family-name]` to avoid mixing naming conventions
184+
181185
## Issues and Contributions
182186

183187
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.

‎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: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,41 @@
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 = false, scope = SCOPE_DEFAULT }
10+
) => {
11+
if (!enableListener) {
12+
return;
13+
}
14+
15+
const allFonts = [...custom, ...web];
16+
const fontNames = getFontNames(allFonts);
17+
const listenerProps = { fontNames, scope };
18+
19+
fontListener(listenerProps);
20+
};
1021

1122
export const wrapRootElement = (
1223
{ 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-
}
24+
{ custom = [], web = [], mode = MODE_DEFAULT }
2225
) => {
2326
if (mode !== "async") {
24-
return element
27+
return element;
2528
}
2629

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

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

‎gatsby-ssr.js

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
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 } from "./utils";
44

55
export const onRenderBody = (
6-
{ setHeadComponents, setPostBodyComponents },
7-
{
8-
enableListener,
9-
preconnect = [],
10-
preload = [],
11-
web = [],
12-
custom = [],
13-
mode = MODE_DEFAULT,
14-
}
6+
{ setHeadComponents },
7+
{ preconnect = [], preload = [], web = [], custom = [], mode = MODE_DEFAULT }
158
) => {
16-
const allFonts = [...web, ...custom]
17-
const allPreloads = preload.concat(getFontFiles(allFonts))
18-
const fontNames = getFontNames(allFonts)
9+
const allFonts = [...web, ...custom];
10+
const allPreloads = preload.concat(getFontFiles(allFonts));
1911

2012
const preloadConfig = getFontConfig(
2113
preconnect,
2214
allPreloads,
2315
mode === "async" ? [] : allFonts
24-
)
25-
26-
if (enableListener && Boolean(allFonts.length) && mode === "async") {
27-
const testFontConfig = getTestFonts(fontNames)
28-
setPostBodyComponents(testFontConfig)
29-
}
16+
);
3017

3118
if (preloadConfig && Boolean(preloadConfig.length)) {
32-
setHeadComponents(preloadConfig)
19+
setHeadComponents(preloadConfig);
3320
}
34-
}
21+
};

‎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
}

0 commit comments

Comments
 (0)