Parallel font loading

creaton-io · Sep 19, 2024 · 10e2b05 · 10e2b05
1 parent 67cca6d
commit 10e2b05
Show file tree

Hide file tree

Showing 21 changed files with 290 additions and 12 deletions.
diff --git a/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf b/bskyweb/static/media/Inter-Black.66e9a87f1c921e844ed4.otf
diff --git a/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf b/bskyweb/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf
diff --git a/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf b/bskyweb/static/media/Inter-Bold.8d330503e1d034ad68de.otf
diff --git a/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf b/bskyweb/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf
diff --git a/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf b/bskyweb/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf
diff --git a/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf b/bskyweb/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf
diff --git a/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf b/bskyweb/static/media/Inter-Italic.95778eb0c75dc956257e.otf
diff --git a/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf b/bskyweb/static/media/Inter-Medium.296aa2d65964269836b3.otf
diff --git a/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf b/bskyweb/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf
diff --git a/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf b/bskyweb/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf
diff --git a/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf b/bskyweb/static/media/Inter-SemiBold.2277990330981b8409bb.otf
diff --git a/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf b/bskyweb/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf
diff --git a/bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf b/bskyweb/static/media/MaterialIcons.f20305dee9d396fea5c7.ttf
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -315,6 +315,133 @@
   <meta property="og:site_name" content="Bluesky Social" />
   <link type="application/activity+json" href="" />
 
+  <script>
+    try {
+      const InterRegular = new FontFace(
+        'Inter-Regular',
+        'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
+        {
+          style: 'normal',
+          weight: 400,
+        }
+      );
+      const InterItalic = new FontFace(
+        'Inter-Italic',
+        'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
+        {
+          style: 'italic',
+          weight: 400,
+        }
+      );
+      const InterMedium = new FontFace(
+        'Inter-Medium',
+        'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
+        {
+          style: 'normal',
+          weight: 500,
+        }
+      );
+      const InterMediumItalic = new FontFace(
+        'Inter-MediumItalic',
+        'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
+        {
+          style: 'italic',
+          weight: 500,
+        }
+      );
+      const InterSemiBold = new FontFace(
+        'Inter-SemiBold',
+        'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
+        {
+          style: 'normal',
+          weight: 600,
+        }
+      );
+      const InterSemiBoldItalic = new FontFace(
+        'Inter-SemiBoldItalic',
+        'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
+        {
+          style: 'italic',
+          weight: 600,
+        }
+      );
+      const InterBold = new FontFace(
+        'Inter-Bold',
+        'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
+        {
+          style: 'normal',
+          weight: 700,
+        }
+      );
+      const InterBoldItalic = new FontFace(
+        'Inter-BoldItalic',
+        'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
+        {
+          style: 'italic',
+          weight: 700,
+        }
+      );
+      const InterExtraBold = new FontFace(
+        'Inter-ExtraBold',
+        'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
+        {
+          style: 'normal',
+          weight: 800,
+        }
+      );
+      const InterExtraBoldItalic = new FontFace(
+        'Inter-ExtraBoldItalic',
+        'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
+        {
+          style: 'italic',
+          weight: 800,
+        }
+      );
+      const InterBlack = new FontFace(
+        'Inter-Black',
+        'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
+        {
+          style: 'normal',
+          weight: 900,
+        }
+      );
+      const InterBlackItalic = new FontFace(
+        'Inter-BlackItalic',
+        'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
+        {
+          style: 'italic',
+          weight: 900,
+        }
+      );
+
+      document.fonts.add(InterRegular);
+      document.fonts.add(InterItalic);
+      document.fonts.add(InterMedium);
+      document.fonts.add(InterMediumItalic);
+      document.fonts.add(InterSemiBold);
+      document.fonts.add(InterSemiBoldItalic);
+      document.fonts.add(InterBold);
+      document.fonts.add(InterBoldItalic);
+      document.fonts.add(InterExtraBold);
+      document.fonts.add(InterExtraBoldItalic);
+      document.fonts.add(InterBlack);
+      document.fonts.add(InterBlackItalic);
+
+      InterRegular.load();
+      InterItalic.load();
+      InterMedium.load();
+      InterMediumItalic.load();
+      InterSemiBold.load();
+      InterSemiBoldItalic.load();
+      InterBold.load();
+      InterBoldItalic.load();
+      InterExtraBold.load();
+      InterExtraBoldItalic.load();
+      InterBlack.load();
+      InterBlackItalic.load();
+    } catch () {}
+  </script>
+
   {% block html_head_extra -%}{%- endblock %}
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
     "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
+    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/* ./bskyweb/static/media/",
     "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
     "build-ios": "yarn use-build-number-with-bump eas build -p ios",
     "build-android": "yarn use-build-number-with-bump eas build -p android",

diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -55,8 +55,9 @@ import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
-import {ThemeProvider as Alf, useFonts} from '#/alf'
+import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {useFonts} from '#/alf/util/useFonts'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'

diff --git a/src/App.web.tsx b/src/App.web.tsx
@@ -46,8 +46,9 @@ import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/Video
 import * as Toast from '#/view/com/util/Toast'
 import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
-import {ThemeProvider as Alf, useFonts} from '#/alf'
+import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {useFonts} from '#/alf/util/useFonts'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'

diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
@@ -1,6 +1,6 @@
 import {useFonts as defaultUseFonts} from 'expo-font'
 
-import {isNative, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'
 
 const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
@@ -35,15 +35,16 @@ export function setFontFamily(fontFamily: Device['fontFamily']) {
 }
 
 /*
- * Unused fonts are commented out, but the files are there if we need them.
+ * IMPORTANT: This is unused. Expo statically extracts these fonts, but we load
+ * them manually so that we can parallelize the loading along with the JS
+ * bundle.
+ *
+ * See `#/alf/util/useFonts` for the actually used hooks.
+ *
+ * All used fonts MUST be configured here. Unused fonts are commented out, but
+ * the files are there if we need them.
  */
-export function useFonts() {
-  /**
-   * For native, the `expo-font` config plugin embeds the fonts in the
-   * application binary. But `expo-font` isn't supported on web, so we fall
-   * back to async loading here.
-   */
-  if (isNative) return [true, null]
+export function DO_NOT_USE() {
   return defaultUseFonts({
     // 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
     // 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),

diff --git a/src/alf/util/useFonts.ts b/src/alf/util/useFonts.ts
@@ -0,0 +1,8 @@
+export function useFonts() {
+  /**
+   * For native, the `expo-font` config plugin embeds the fonts in the
+   * application binary. But `expo-font` isn't supported on web, so we fall
+   * back to async loading here.
+   */
+  return [true, null]
+}
diff --git a/src/alf/util/useFonts.web.ts b/src/alf/util/useFonts.web.ts
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export function useFonts() {
+  const [loaded, setLoaded] = React.useState(false)
+
+  React.useEffect(() => {
+    document.fonts.ready.then(() => {
+      setLoaded(true)
+    })
+  }, [setLoaded])
+
+  return [loaded, null]
+}
diff --git a/web/index.html b/web/index.html
@@ -308,6 +308,133 @@
         margin-left: -6px;
       }
     </style>
+
+    <script>
+      try {
+        const InterRegular = new FontFace(
+          'Inter-Regular',
+          'url(/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf)',
+          {
+            style: 'normal',
+            weight: 400,
+          }
+        );
+        const InterItalic = new FontFace(
+          'Inter-Italic',
+          'url(/static/media/Inter-Italic.95778eb0c75dc956257e.otf)',
+          {
+            style: 'italic',
+            weight: 400,
+          }
+        );
+        const InterMedium = new FontFace(
+          'Inter-Medium',
+          'url(/static/media/Inter-Medium.296aa2d65964269836b3.otf)',
+          {
+            style: 'normal',
+            weight: 500,
+          }
+        );
+        const InterMediumItalic = new FontFace(
+          'Inter-MediumItalic',
+          'url(/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf)',
+          {
+            style: 'italic',
+            weight: 500,
+          }
+        );
+        const InterSemiBold = new FontFace(
+          'Inter-SemiBold',
+          'url(/static/media/Inter-SemiBold.2277990330981b8409bb.otf)',
+          {
+            style: 'normal',
+            weight: 600,
+          }
+        );
+        const InterSemiBoldItalic = new FontFace(
+          'Inter-SemiBoldItalic',
+          'url(/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf)',
+          {
+            style: 'italic',
+            weight: 600,
+          }
+        );
+        const InterBold = new FontFace(
+          'Inter-Bold',
+          'url(/static/media/Inter-Bold.8d330503e1d034ad68de.otf)',
+          {
+            style: 'normal',
+            weight: 700,
+          }
+        );
+        const InterBoldItalic = new FontFace(
+          'Inter-BoldItalic',
+          'url(/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf)',
+          {
+            style: 'italic',
+            weight: 700,
+          }
+        );
+        const InterExtraBold = new FontFace(
+          'Inter-ExtraBold',
+          'url(/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf)',
+          {
+            style: 'normal',
+            weight: 800,
+          }
+        );
+        const InterExtraBoldItalic = new FontFace(
+          'Inter-ExtraBoldItalic',
+          'url(/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf)',
+          {
+            style: 'italic',
+            weight: 800,
+          }
+        );
+        const InterBlack = new FontFace(
+          'Inter-Black',
+          'url(/static/media/Inter-Black.66e9a87f1c921e844ed4.otf)',
+          {
+            style: 'normal',
+            weight: 900,
+          }
+        );
+        const InterBlackItalic = new FontFace(
+          'Inter-BlackItalic',
+          'url(/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf)',
+          {
+            style: 'italic',
+            weight: 900,
+          }
+        );
+
+        document.fonts.add(InterRegular);
+        document.fonts.add(InterItalic);
+        document.fonts.add(InterMedium);
+        document.fonts.add(InterMediumItalic);
+        document.fonts.add(InterSemiBold);
+        document.fonts.add(InterSemiBoldItalic);
+        document.fonts.add(InterBold);
+        document.fonts.add(InterBoldItalic);
+        document.fonts.add(InterExtraBold);
+        document.fonts.add(InterExtraBoldItalic);
+        document.fonts.add(InterBlack);
+        document.fonts.add(InterBlackItalic);
+
+        InterRegular.load();
+        InterItalic.load();
+        InterMedium.load();
+        InterMediumItalic.load();
+        InterSemiBold.load();
+        InterSemiBoldItalic.load();
+        InterBold.load();
+        InterBoldItalic.load();
+        InterExtraBold.load();
+        InterExtraBoldItalic.load();
+        InterBlack.load();
+        InterBlackItalic.load();
+      } catch () {}
+    </script>
   </head>
 
   <body>