feat(font): add static optimization for fonts in expo router (#24027)# Why Extract fonts loaded with expo-font when using Expo Router on with server rendering on web. This ensures that fonts ar
feat(font): add static optimization for fonts in expo router (#24027)# Why Extract fonts loaded with expo-font when using Expo Router on with server rendering on web. This ensures that fonts are available before the JavaScript loads, leading to much better UI during the initial render. Consider the following snippet: ```js import FontAwesome from "@expo/vector-icons/FontAwesome"; import * as Font from "expo-font"; import { Text } from "react-native"; export default function Layout() { // These fonts will be statically extracted on web and added to the initial HTML. const [loaded, error] = Font.useFonts({ ...FontAwesome.font, Inter_400Regular: require("@/assets/fonts/Inter_400Regular.ttf"), Inter_500Medium: require("@/assets/fonts/Inter_500Medium.ttf"), }); if (loaded) { // This code-path will never be used in static rendering now. return null; } // This font is now styled before the JavaScript loads. return ( <Text style={{ fontFamily: 'Inter_400Regular' }}>Hey</Text> ); } ``` > Native can continue to be written defensively, web will adapt to the API. https://github.com/expo/expo/assets/9664363/e03de783-bcee-49d3-9bca-15bfc87966d5 <!-- Please describe the motivation for this PR, and link to relevant GitHub issues, forums posts, or feature requests. --> # How - When `loadAsync` or `useFonts` is used during static rendering, the font will be added to a shared server context, which is then pulled in `expo-router` and added to the static HTML. This doesn't work if the call is outside the React tree, or if the font is loaded asynchronously, or if the font is loaded in a `useEffect`. - Updated docs to reflect new system. # Test Plan - E2E bundling test. - Ensure that `useFonts` doesn't return `false` on the first render, this prevents returning `null` and rendering nothing actionable. - Ensure fonts are linked and preloaded according to the routes that load them, including nesting. - Node unit test to reduce the chance of breaking the more fragile parts of the API. - Published in a test app: [before](https://64e0e449c07fa060ba0ce443--pillarvalley.netlify.app/settings/) [after](https://64e0fb6251f1396c0b3eb62f--pillarvalley.netlify.app/settings/). Notice that disabling JavaScript doesn't break font loading. <!-- Please describe how you tested this change and how a reviewer could reproduce your test, especially if this PR does not include automated tests! If possible, please also provide terminal output and/or screenshots demonstrating your test/reproduction. --> # Checklist <!-- Please check the appropriate items below if they apply to your diff. This is required for changes to Expo modules. --> - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <[email protected]> Co-authored-by: Aman Mittal <[email protected]>
show more ...
chore: improve expo router testing (#23795)# Why - Ensure the various aspects of `npx expo export` continue to work with the latest Expo Router/Metro depdencies. - We had a bundling testing fo
chore: improve expo router testing (#23795)# Why - Ensure the various aspects of `npx expo export` continue to work with the latest Expo Router/Metro depdencies. - We had a bundling testing for Expo Router but it wasn't linked to the monorepo so the dependencies weren't in sync. <!-- Please describe the motivation for this PR, and link to relevant GitHub issues, forums posts, or feature requests. --> # How - Create a new app in `apps/` which is synchronized with the monorepo. - This app contains multiple expo-router directories and various dynamic settings. - Fold the `expo-router` e2e tests into `@expo/cli`. - Test static rendering, single-page application exporting, and the native url polyfill (api). <!-- How did you build this feature or fix this bug and why? --> # Test Plan - The CLI E2E tests should pass. --------- Co-authored-by: Expo Bot <[email protected]>