expo-font - npm Package Compare versions

Comparing version 11.1.1 to 11.6.0

build/ExpoFontLoader.d.ts

@@ -1,3 +0,3 @@
-declare const _default: import("expo-modules-core").ProxyNativeModule;
+declare const _default: any;
 export default _default;
 //# sourceMappingURL=ExpoFontLoader.d.ts.map

build/ExpoFontLoader.js

@@ -1,3 +0,3 @@
-import { NativeModulesProxy } from 'expo-modules-core';
-export default NativeModulesProxy.ExpoFontLoader;
+import { requireNativeModule } from 'expo-modules-core';
+export default requireNativeModule('ExpoFontLoader');
 //# sourceMappingURL=ExpoFontLoader.js.map

build/ExpoFontLoader.web.d.ts

@@ -7,5 +7,9 @@ import { UnloadFontOptions } from './Font';
     unloadAsync(fontFamilyName: string, options?: UnloadFontOptions): Promise<void>;
+    getServerResources(): string[];
+    resetServerContext(): void;
+    isLoaded(fontFamilyName: string, resource?: UnloadFontOptions): boolean;
     loadAsync(fontFamilyName: string, resource: FontResource): Promise<void>;
 };
 export default _default;
+export declare function _createWebFontTemplate(fontFamily: string, resource: FontResource): string;
 //# sourceMappingURL=ExpoFontLoader.web.d.ts.map

build/ExpoFontLoader.web.js

@@ -34,2 +34,27 @@ import { CodedError, Platform } from 'expo-modules-core';
 }
+const serverContext = new Set();
+function getHeadElements() {
+    const entries = [...serverContext.entries()];
+    if (!entries.length) {
+        return [];
+    }
+    const css = entries.map(([{ css }]) => css).join('\n');
+    const links = entries.map(([{ resourceId }]) => resourceId);
+    // TODO: Maybe return nothing if no fonts were loaded.
+    return [
+        {
+            $$type: 'style',
+            children: css,
+            id: ID,
+            type: 'text/css',
+        },
+        ...links.map((resourceId) => ({
+            $$type: 'link',
+            rel: 'preload',
+            href: resourceId,
+            as: 'font',
+            crossorigin: '',
+        })),
+    ];
+}
 export default {
@@ -56,6 +81,37 @@ get name() {
     },
-    async loadAsync(fontFamilyName, resource) {
-        if (!Platform.isDOMAvailable) {
-            return;
+    getServerResources() {
+        const elements = getHeadElements();
+        return elements.map((element) => {
+            switch (element.$$type) {
+                case 'style':
+                    return `<style id="${element.id}" type="${element.type}">${element.children}</style>`;
+                case 'link':
+                    return `<link rel="${element.rel}" href="${element.href}" as="${element.as}" crossorigin="${element.crossorigin}" />`;
+                default:
+                    return '';
+            }
+        });
+    },
+    resetServerContext() {
+        serverContext.clear();
+    },
+    isLoaded(fontFamilyName, resource = {}) {
+        if (typeof window === 'undefined') {
+            return !![...serverContext.values()].find((asset) => {
+                return asset.name === fontFamilyName;
+            });
         }
+        return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;
+    },
+    // NOTE(EvanBacon): No async keyword! This cannot return a promise in Node environments.
+    loadAsync(fontFamilyName, resource) {
+        if (typeof window === 'undefined') {
+            serverContext.add({
+                name: fontFamilyName,
+                css: _createWebFontTemplate(fontFamilyName, resource),
+                // @ts-expect-error: typeof string
+                resourceId: resource.uri,
+            });
+            return Promise.resolve();
+        }
         const canInjectStyle = document.head && typeof document.head.appendChild === 'function';
@@ -65,8 +121,12 @@ if (!canInjectStyle) {
         }
-        const style = _createWebStyle(fontFamilyName, resource);
+        const style = getStyleElement();
         document.head.appendChild(style);
+        const res = getFontFaceRulesMatchingResource(fontFamilyName, resource);
+        if (!res.length) {
+            _createWebStyle(fontFamilyName, resource);
+        }
         if (!isFontLoadingListenerSupported()) {
-            return;
+            return Promise.resolve();
         }
-        return new FontObserver(fontFamilyName, { display: resource.display }).load();
+        return new FontObserver(fontFamilyName, { display: resource.display }).load(null, 6000);
     },
@@ -85,8 +145,7 @@ };
 }
+export function _createWebFontTemplate(fontFamily, resource) {
+    return `@font-face{font-family:${fontFamily};src:url(${resource.uri});font-display:${resource.display || FontDisplay.AUTO}}`;
+}
 function _createWebStyle(fontFamily, resource) {
-    const fontStyle = `@font-face {
-    font-family: ${fontFamily};
-    src: url(${resource.uri});
-    font-display: ${resource.display || FontDisplay.AUTO};
-  }`;
+    const fontStyle = _createWebFontTemplate(fontFamily, resource);
     const styleElement = getStyleElement();
@@ -93,0 +152,0 @@ // @ts-ignore: TypeScript does not define HTMLStyleElement::styleSheet. This is just for IE and

build/Font.d.ts

@@ -8,3 +8,3 @@ import { FontDisplay, FontSource, FontResource, UnloadFontOptions } from './Font.types';
  * @param fontFamily Name of font to process.
- * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/introduction/managed-vs-bare/).
+ * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/archive/managed-vs-bare/).
  */
@@ -11,0 +11,0 @@ export declare function processFontFamily(fontFamily: string | null): string | null;

build/Font.js

@@ -1,7 +0,7 @@
-import { CodedError, UnavailabilityError } from 'expo-modules-core';
+import { CodedError, Platform, UnavailabilityError } from 'expo-modules-core';
 import ExpoFontLoader from './ExpoFontLoader';
 import { FontDisplay } from './Font.types';
 import { getAssetForSource, loadSingleFontAsync, fontFamilyNeedsScoping, getNativeFontName, } from './FontLoader';
-const loaded = {};
-const loadPromises = {};
+import { loaded, loadPromises } from './memory';
+import { registerStaticFont } from './server';
 // @needsAudit
@@ -15,3 +15,3 @@ // note(brentvatne): at some point we may want to warn if this is called outside of a managed app.
  * @param fontFamily Name of font to process.
- * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/introduction/managed-vs-bare/).
+ * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/archive/managed-vs-bare/).
  */
@@ -25,11 +25,8 @@ export function processFontFamily(fontFamily) {
             if (isLoading(fontFamily)) {
-                console.error(`You started loading the font "${fontFamily}", but used it before it finished loading. You need to wait for Font.loadAsync to complete before using the font.`);
+                console.warn(`You started loading the font "${fontFamily}", but used it before it finished loading. You need to wait for Font.loadAsync to complete before using the font.`);
             }
             else {
-                console.error(`fontFamily "${fontFamily}" is not a system font and has not been loaded through Font.loadAsync.\n
-- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.\n
-- If this is a custom font, be sure to load it with Font.loadAsync.`);
+                console.warn(`fontFamily "${fontFamily}" is not a system font and has not been loaded through expo-font.`);
             }
         }
-        return 'System';
     }
@@ -46,2 +43,5 @@ return `ExpoFont-${getNativeFontName(fontFamily)}`;
 export function isLoaded(fontFamily) {
+    if (Platform.OS === 'web') {
+        return fontFamily in loaded || !!ExpoFontLoader.isLoaded(fontFamily);
+    }
     return fontFamily in loaded;
@@ -72,13 +72,24 @@ }
  */
-export async function loadAsync(fontFamilyOrFontMap, source) {
+export function loadAsync(fontFamilyOrFontMap, source) {
+    // NOTE(EvanBacon): Static render pass on web must be synchronous to collect all fonts.
+    // Because of this, `loadAsync` doesn't use the `async` keyword and deviates from the
+    // standard Expo SDK style guide.
+    const isServer = Platform.OS === 'web' && typeof window === 'undefined';
     if (typeof fontFamilyOrFontMap === 'object') {
         if (source) {
-            throw new CodedError(`ERR_FONT_API`, `No fontFamily can be used for the provided source: ${source}. The second argument of \`loadAsync()\` can only be used with a \`string\` value as the first argument.`);
+            return Promise.reject(new CodedError(`ERR_FONT_API`, `No fontFamily can be used for the provided source: ${source}. The second argument of \`loadAsync()\` can only be used with a \`string\` value as the first argument.`));
         }
         const fontMap = fontFamilyOrFontMap;
         const names = Object.keys(fontMap);
-        await Promise.all(names.map((name) => loadFontInNamespaceAsync(name, fontMap[name])));
-        return;
+        if (isServer) {
+            names.map((name) => registerStaticFont(name, fontMap[name]));
+            return Promise.resolve();
+        }
+        return Promise.all(names.map((name) => loadFontInNamespaceAsync(name, fontMap[name]))).then(() => { });
     }
-    return await loadFontInNamespaceAsync(fontFamilyOrFontMap, source);
+    if (isServer) {
+        registerStaticFont(fontFamilyOrFontMap, source);
+        return Promise.resolve();
+    }
+    return loadFontInNamespaceAsync(fontFamilyOrFontMap, source);
 }
@@ -85,0 +96,0 @@ async function loadFontInNamespaceAsync(fontFamily, source) {

build/FontHooks.d.ts

@@ -19,3 +19,3 @@ import { FontSource } from './Font.types';
  */
-export declare function useFonts(map: string | Record<string, FontSource>): [boolean, Error | null];
+export declare const useFonts: (map: string | Record<string, FontSource>) => [boolean, Error | null];
 //# sourceMappingURL=FontHooks.d.ts.map

build/FontHooks.js

 import { useEffect, useState } from 'react';
-import { loadAsync } from './Font';
+import { loadAsync, isLoaded } from './Font';
+function isMapLoaded(map) {
+    if (typeof map === 'string') {
+        return isLoaded(map);
+    }
+    else {
+        return Object.keys(map).every((fontFamily) => isLoaded(fontFamily));
+    }
+}
+function useRuntimeFonts(map) {
+    const [loaded, setLoaded] = useState(
+    // For web rehydration, we need to check if the fonts are already loaded during the static render.
+    // Native will also benefit from this optimization.
+    isMapLoaded(map));
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        loadAsync(map)
+            .then(() => setLoaded(true))
+            .catch(setError);
+    }, []);
+    return [loaded, error];
+}
+function useStaticFonts(map) {
+    loadAsync(map);
+    return [true, null];
+}
 // @needsAudit
@@ -21,12 +46,3 @@ /**
  */
-export function useFonts(map) {
-    const [loaded, setLoaded] = useState(false);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        loadAsync(map)
-            .then(() => setLoaded(true))
-            .catch(setError);
-    }, []);
-    return [loaded, error];
-}
+export const useFonts = typeof window === 'undefined' ? useStaticFonts : useRuntimeFonts;
 //# sourceMappingURL=FontHooks.js.map

build/FontLoader.web.js

 import { Asset } from 'expo-asset';
 import { CodedError } from 'expo-modules-core';
 import ExpoFontLoader from './ExpoFontLoader';
-import { FontDisplay } from './Font';
+import { FontDisplay } from './Font.types';
 function uriFromFontSource(asset) {
@@ -40,7 +40,14 @@ if (typeof asset === 'string') {
 }
-export async function loadSingleFontAsync(name, input) {
+// NOTE(EvanBacon): No async keyword!
+export function loadSingleFontAsync(name, input) {
     if (typeof input !== 'object' || typeof input.uri !== 'string' || input.downloadAsync) {
         throwInvalidSourceError(input);
     }
-    await ExpoFontLoader.loadAsync(name, input);
+    try {
+        return ExpoFontLoader.loadAsync(name, input);
+    }
+    catch {
+        // No-op.
+    }
+    return Promise.resolve();
 }
@@ -47,0 +54,0 @@ export function getNativeFontName(name) {

CHANGELOG.md

@@ -13,2 +13,41 @@ # Changelog
 
+## 11.6.0 — 2023-09-04
+
+### 🎉 New features
+
+- Added support for React Native 0.73. ([#24018](https://github.com/expo/expo/pull/24018) by [@kudo](https://github.com/kudo))
+- Add static font extraction support with `expo-router`. ([#24027](https://github.com/expo/expo/pull/24027) by [@EvanBacon](https://github.com/EvanBacon))
+
+### 💡 Others
+
+- Migrated `FontLoaderModule` to use Expo Modules API. ([#24015](https://github.com/expo/expo/pull/24015) by [@lukmccall](https://github.com/lukmccall))
+
+## 11.5.1 — 2023-08-02
+
+### 💡 Others
+
+- Change unloaded font error to a warning. ([#23788](https://github.com/expo/expo/pull/23788) by [@EvanBacon](https://github.com/EvanBacon))
+
+## 11.5.0 — 2023-07-28
+
+### 🐛 Bug fixes
+
+- Gracefully catch exceptions during font loading on web with `fontfaceobserver`. ([#22954](https://github.com/expo/expo/pull/22954) by [@bradjones1](https://github.com/bradjones1))
+
+## 11.4.0 — 2023-06-21
+
+_This version does not introduce any user-facing changes._
+
+## 11.3.0 — 2023-06-13
+
+### 🐛 Bug fixes
+
+- Fixed Android build warnings for Gradle version 8. ([#22537](https://github.com/expo/expo/pull/22537), [#22609](https://github.com/expo/expo/pull/22609) by [@kudo](https://github.com/kudo))
+
+## 11.2.0 — 2023-05-08
+
+### 🐛 Bug fixes
+
+- Fix require cycle on web. ([#21593](https://github.com/expo/expo/pull/21593) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 11.1.1 — 2023-02-09
@@ -15,0 +54,0 @@

package.json

 {
   "name": "expo-font",
-  "version": "11.1.1",
+  "version": "11.6.0",
   "description": "Load fonts at runtime and use them in React Native components.",
@@ -45,3 +45,3 @@ "main": "build/index.js",
   },
-  "gitHead": "1f8a6a09570fd451378565ca34933018ce48454e"
+  "gitHead": "79607a7325f47aa17c36d266100d09a4ff2cc544"
 }

README.md

@@ -1,2 +0,9 @@
-# expo-font
+<p>
+  <a href="https://docs.expo.dev/versions/latest/sdk/font/">
+    <img
+      src="../../.github/resources/expo-font.svg"
+      alt="expo-font"
+      height="64" />
+  </a>
+</p>
 
@@ -12,3 +19,3 @@ Load fonts at runtime and use them in React Native components.
 
-For [managed](https://docs.expo.dev/versions/latest/introduction/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/font/).
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/font/).
 
@@ -22,3 +29,3 @@ # Installation in bare React Native projects
 ```
-expo install expo-font
+npx expo install expo-font
 ```
@@ -25,0 +32,0 @@

src/ExpoFontLoader.ts

@@ -1,2 +0,2 @@
-import { NativeModulesProxy } from 'expo-modules-core';
-export default NativeModulesProxy.ExpoFontLoader;
+import { requireNativeModule } from 'expo-modules-core';
+export default requireNativeModule('ExpoFontLoader');

src/ExpoFontLoader.web.ts

@@ -49,2 +49,38 @@ import { CodedError, Platform } from 'expo-modules-core';
 
+const serverContext: Set<{ name: string; css: string; resourceId: string }> = new Set();
+
+function getHeadElements(): {
+  $$type: string;
+  rel?: string;
+  href?: string;
+  as?: string;
+  crossorigin?: string;
+  children?: string;
+  id?: string;
+  type?: string;
+}[] {
+  const entries = [...serverContext.entries()];
+  if (!entries.length) {
+    return [];
+  }
+  const css = entries.map(([{ css }]) => css).join('\n');
+  const links = entries.map(([{ resourceId }]) => resourceId);
+  // TODO: Maybe return nothing if no fonts were loaded.
+  return [
+    {
+      $$type: 'style',
+      children: css,
+      id: ID,
+      type: 'text/css',
+    },
+    ...links.map((resourceId) => ({
+      $$type: 'link',
+      rel: 'preload',
+      href: resourceId,
+      as: 'font',
+      crossorigin: '',
+    })),
+  ];
+}
+
 export default {
@@ -73,7 +109,42 @@ get name(): string {
 
-  async loadAsync(fontFamilyName: string, resource: FontResource): Promise<void> {
-    if (!Platform.isDOMAvailable) {
-      return;
+  getServerResources(): string[] {
+    const elements = getHeadElements();
+
+    return elements.map((element) => {
+      switch (element.$$type) {
+        case 'style':
+          return `<style id="${element.id}" type="${element.type}">${element.children}</style>`;
+        case 'link':
+          return `<link rel="${element.rel}" href="${element.href}" as="${element.as}" crossorigin="${element.crossorigin}" />`;
+        default:
+          return '';
+      }
+    });
+  },
+
+  resetServerContext() {
+    serverContext.clear();
+  },
+
+  isLoaded(fontFamilyName: string, resource: UnloadFontOptions = {}): boolean {
+    if (typeof window === 'undefined') {
+      return !![...serverContext.values()].find((asset) => {
+        return asset.name === fontFamilyName;
+      });
     }
+    return getFontFaceRulesMatchingResource(fontFamilyName, resource)?.length > 0;
+  },
 
+  // NOTE(EvanBacon): No async keyword! This cannot return a promise in Node environments.
+  loadAsync(fontFamilyName: string, resource: FontResource): Promise<void> {
+    if (typeof window === 'undefined') {
+      serverContext.add({
+        name: fontFamilyName,
+        css: _createWebFontTemplate(fontFamilyName, resource),
+        // @ts-expect-error: typeof string
+        resourceId: resource.uri!,
+      });
+      return Promise.resolve();
+    }
+
     const canInjectStyle = document.head && typeof document.head.appendChild === 'function';
@@ -87,10 +158,15 @@ if (!canInjectStyle) {
 
-    const style = _createWebStyle(fontFamilyName, resource);
+    const style = getStyleElement();
     document.head!.appendChild(style);
 
+    const res = getFontFaceRulesMatchingResource(fontFamilyName, resource);
+    if (!res.length) {
+      _createWebStyle(fontFamilyName, resource);
+    }
+
     if (!isFontLoadingListenerSupported()) {
-      return;
+      return Promise.resolve();
     }
 
-    return new FontObserver(fontFamilyName, { display: resource.display }).load();
+    return new FontObserver(fontFamilyName, { display: resource.display }).load(null, 6000);
   },
@@ -112,8 +188,10 @@ };
 
+export function _createWebFontTemplate(fontFamily: string, resource: FontResource): string {
+  return `@font-face{font-family:${fontFamily};src:url(${resource.uri});font-display:${
+    resource.display || FontDisplay.AUTO
+  }}`;
+}
+
 function _createWebStyle(fontFamily: string, resource: FontResource): HTMLStyleElement {
-  const fontStyle = `@font-face {
-    font-family: ${fontFamily};
-    src: url(${resource.uri});
-    font-display: ${resource.display || FontDisplay.AUTO};
-  }`;
+  const fontStyle = _createWebFontTemplate(fontFamily, resource);
 
@@ -120,0 +198,0 @@ const styleElement = getStyleElement();

src/Font.ts

@@ -1,2 +0,2 @@
-import { CodedError, UnavailabilityError } from 'expo-modules-core';
+import { CodedError, Platform, UnavailabilityError } from 'expo-modules-core';
 
@@ -11,6 +11,5 @@ import ExpoFontLoader from './ExpoFontLoader';
 } from './FontLoader';
+import { loaded, loadPromises } from './memory';
+import { registerStaticFont } from './server';
 
-const loaded: { [name: string]: boolean } = {};
-const loadPromises: { [name: string]: Promise<void> } = {};
-
 // @needsAudit
@@ -24,3 +23,3 @@ // note(brentvatne): at some point we may want to warn if this is called outside of a managed app.
  * @param fontFamily Name of font to process.
- * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/introduction/managed-vs-bare/).
+ * @returns Returns a name processed for use with the [current workflow](https://docs.expo.dev/archive/managed-vs-bare/).
  */
@@ -35,15 +34,11 @@ export function processFontFamily(fontFamily: string | null): string | null {
       if (isLoading(fontFamily)) {
-        console.error(
+        console.warn(
           `You started loading the font "${fontFamily}", but used it before it finished loading. You need to wait for Font.loadAsync to complete before using the font.`
         );
       } else {
-        console.error(
-          `fontFamily "${fontFamily}" is not a system font and has not been loaded through Font.loadAsync.\n
-- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.\n
-- If this is a custom font, be sure to load it with Font.loadAsync.`
+        console.warn(
+          `fontFamily "${fontFamily}" is not a system font and has not been loaded through expo-font.`
         );
       }
     }
-
-    return 'System';
   }
@@ -62,2 +57,5 @@
 export function isLoaded(fontFamily: string): boolean {
+  if (Platform.OS === 'web') {
+    return fontFamily in loaded || !!ExpoFontLoader.isLoaded(fontFamily);
+  }
   return fontFamily in loaded;
@@ -90,11 +88,18 @@ }
  */
-export async function loadAsync(
+export function loadAsync(
   fontFamilyOrFontMap: string | Record<string, FontSource>,
   source?: FontSource
 ): Promise<void> {
+  // NOTE(EvanBacon): Static render pass on web must be synchronous to collect all fonts.
+  // Because of this, `loadAsync` doesn't use the `async` keyword and deviates from the
+  // standard Expo SDK style guide.
+  const isServer = Platform.OS === 'web' && typeof window === 'undefined';
+
   if (typeof fontFamilyOrFontMap === 'object') {
     if (source) {
-      throw new CodedError(
-        `ERR_FONT_API`,
-        `No fontFamily can be used for the provided source: ${source}. The second argument of \`loadAsync()\` can only be used with a \`string\` value as the first argument.`
+      return Promise.reject(
+        new CodedError(
+          `ERR_FONT_API`,
+          `No fontFamily can be used for the provided source: ${source}. The second argument of \`loadAsync()\` can only be used with a \`string\` value as the first argument.`
+        )
       );
@@ -104,7 +109,19 @@ }
     const names = Object.keys(fontMap);
-    await Promise.all(names.map((name) => loadFontInNamespaceAsync(name, fontMap[name])));
-    return;
+
+    if (isServer) {
+      names.map((name) => registerStaticFont(name, fontMap[name]));
+      return Promise.resolve();
+    }
+
+    return Promise.all(names.map((name) => loadFontInNamespaceAsync(name, fontMap[name]))).then(
+      () => {}
+    );
   }
 
-  return await loadFontInNamespaceAsync(fontFamilyOrFontMap, source);
+  if (isServer) {
+    registerStaticFont(fontFamilyOrFontMap, source);
+    return Promise.resolve();
+  }
+
+  return loadFontInNamespaceAsync(fontFamilyOrFontMap, source);
 }
@@ -111,0 +128,0 @@

src/FontHooks.ts

 import { useEffect, useState } from 'react';
 
-import { loadAsync } from './Font';
+import { loadAsync, isLoaded } from './Font';
 import { FontSource } from './Font.types';
 
+function isMapLoaded(map: string | Record<string, FontSource>) {
+  if (typeof map === 'string') {
+    return isLoaded(map);
+  } else {
+    return Object.keys(map).every((fontFamily) => isLoaded(fontFamily));
+  }
+}
+
+function useRuntimeFonts(map: string | Record<string, FontSource>): [boolean, Error | null] {
+  const [loaded, setLoaded] = useState(
+    // For web rehydration, we need to check if the fonts are already loaded during the static render.
+    // Native will also benefit from this optimization.
+    isMapLoaded(map)
+  );
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    loadAsync(map)
+      .then(() => setLoaded(true))
+      .catch(setError);
+  }, []);
+
+  return [loaded, error];
+}
+
+function useStaticFonts(map: string | Record<string, FontSource>): [boolean, Error | null] {
+  loadAsync(map);
+  return [true, null];
+}
+
 // @needsAudit
@@ -24,13 +54,3 @@ /**
  */
-export function useFonts(map: string | Record<string, FontSource>): [boolean, Error | null] {
-  const [loaded, setLoaded] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    loadAsync(map)
-      .then(() => setLoaded(true))
-      .catch(setError);
-  }, []);
-
-  return [loaded, error];
-}
+export const useFonts: (map: string | Record<string, FontSource>) => [boolean, Error | null] =
+  typeof window === 'undefined' ? useStaticFonts : useRuntimeFonts;

src/FontLoader.web.ts

@@ -5,4 +5,3 @@ import { Asset } from 'expo-asset';
 import ExpoFontLoader from './ExpoFontLoader';
-import { FontDisplay } from './Font';
-import { FontResource, FontSource } from './Font.types';
+import { FontResource, FontSource, FontDisplay } from './Font.types';
 
@@ -51,6 +50,4 @@ function uriFromFontSource(asset: any): string | null {
 
-export async function loadSingleFontAsync(
-  name: string,
-  input: Asset | FontResource
-): Promise<void> {
+// NOTE(EvanBacon): No async keyword!
+export function loadSingleFontAsync(name: string, input: Asset | FontResource): Promise<void> {
   if (typeof input !== 'object' || typeof input.uri !== 'string' || (input as any).downloadAsync) {
@@ -60,3 +57,9 @@ throwInvalidSourceError(input);
 
-  await ExpoFontLoader.loadAsync(name, input);
+  try {
+    return ExpoFontLoader.loadAsync(name, input);
+  } catch {
+    // No-op.
+  }
+
+  return Promise.resolve();
 }
@@ -63,0 +66,0 @@

tsconfig.json

@@ -8,3 +8,3 @@ // @generated by expo-module-scripts
   "include": ["./src"],
-  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__stories__/*"]
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126643

increased by18.53%

Number of package files

73

increased by15.87%

Lines of code

1439

increased by24.59%

Number of lines in readme file

42

increased by20%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes