[pull] main from expo:main

apps/router-e2e/__e2e__/server-loader/app/_layout.tsx

@@ -0,0 +1,11 @@
+import { Slot } from 'expo-router';
+
+import { Container } from '../components/Container';
+
+export default function RootLayout() {
+  return (
+    <Container>
+      <Slot />
+    </Container>
+  );
+}

apps/router-e2e/__e2e__/server-loader/app/env.tsx

@@ -1,21 +1,32 @@
 import { useLoaderData, useLocalSearchParams, usePathname } from 'expo-router';
-import { Container } from '../components/Container';
-import { Table, TableRow } from '../components/Table';
+import { Suspense } from 'react';
+
+import { Loading } from '../components/Loading';
 import { SiteLinks, SiteLink } from '../components/SiteLink';
+import { Table, TableRow } from '../components/Table';
 
 export async function loader() {
   return Promise.resolve({
-    ...process.env,
+    TEST_SECRET_KEY: process.env.TEST_SECRET_KEY,
+    TEST_SECRET_RUNTIME_KEY: process.env.TEST_SECRET_RUNTIME_KEY,
   });
 }
 
-export default function Env() {
+export default function EnvRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <EnvScreen />
+    </Suspense>
+  );
+}
+
+const EnvScreen = () => {
   const pathname = usePathname();
   const localParams = useLocalSearchParams();
   const data = useLoaderData<typeof loader>();
 
   return (
-    <Container>
+    <>
       <Table>
         <TableRow label="Pathname" value={pathname} testID="pathname-result" />
         <TableRow label="Local Params" value={localParams} testID="localparams-result" />
@@ -26,6 +37,6 @@ export default function Env() {
         <SiteLink href="/">Go to Index</SiteLink>
         <SiteLink href="/second">Go to Second</SiteLink>
       </SiteLinks>
-    </Container>
-  );
-}
+    </>
+  )
+}

apps/router-e2e/__e2e__/server-loader/app/error.tsx

@@ -0,0 +1,46 @@
+import { ErrorBoundaryProps, useLoaderData } from 'expo-router';
+import { Suspense } from 'react';
+
+import { Loading } from '../components/Loading';
+import { SiteLinks, SiteLink } from '../components/SiteLink';
+import { Table, TableRow } from '../components/Table';
+
+export async function loader() {
+  if (process.env.TEST_THROW_ERROR === 'true') {
+    throw new Error('Intentional loader error for testing');
+  }
+}
+
+export function ErrorBoundary({ error }: ErrorBoundaryProps) {
+  return (
+    <>
+      <Table>
+        <TableRow label="Error" value={error.message} testID="error-message" />
+      </Table>
+
+      <SiteLinks>
+        <SiteLink href="/">Go to Index</SiteLink>
+      </SiteLinks>
+    </>
+  );
+}
+
+export default function ErrorRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <ErrorScreen />
+    </Suspense>
+  )
+}
+
+const ErrorScreen = () => {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <Table>
+        <TableRow label="This should not render" value={data} testID="should-not-render" />
+      </Table>
+    </>
+  );
+}

apps/router-e2e/__e2e__/server-loader/app/index.tsx

@@ -1,14 +1,18 @@
 import { useLocalSearchParams, usePathname } from 'expo-router';
-import { Container } from '../components/Container';
+
 import { Table, TableRow } from '../components/Table';
 import { SiteLinks, SiteLink } from '../components/SiteLink';
 
-export default function Index() {
+export default function IndexRoute() {
+  return (<IndexScreen />)
+}
+
+const IndexScreen = () => {
   const pathname = usePathname();
   const localParams = useLocalSearchParams();
 
   return (
-    <Container>
+    <>
       <Table>
         <TableRow label="Pathname" value={pathname} testID="pathname-result" />
         <TableRow label="Local Params" value={localParams} testID="localparams-result" />
@@ -21,8 +25,9 @@ export default function Index() {
         <SiteLink href="/response">Go to Response</SiteLink>
         <SiteLink href="/posts/static-post-1">Go to static Post 1</SiteLink>
         <SiteLink href="/posts/static-post-2">Go to static Post 2</SiteLink>
+        <SiteLink href="/error">Go to Error</SiteLink>
       </SiteLinks>
-    </Container>
+    </>
   );
 }
 

apps/router-e2e/__e2e__/server-loader/app/meta.tsx

@@ -0,0 +1,53 @@
+import { useLoaderData, useLocalSearchParams, usePathname } from 'expo-router';
+import Head from 'expo-router/head';
+import { Suspense } from 'react';
+
+import { Container } from '../components/Container';
+import { Loading } from '../components/Loading';
+import { Table, TableRow } from '../components/Table';
+import { SiteLinks, SiteLink } from '../components/SiteLink';
+
+export async function loader() {
+  return {
+    title: 'Meta page',
+    description: 'Meta tag testing',
+    keywords: 'expo-router,loaders,meta',
+    author: 'Expo'
+  };
+}
+
+export default function MetaRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <MetaScreen />
+    </Suspense>
+  );
+}
+
+const MetaScreen = () => {
+  const pathname = usePathname();
+  const localParams = useLocalSearchParams();
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <Head>
+        <title>{data.title}</title>
+        <meta name="description" content={data.description} />
+        <meta name="keywords" content={data.keywords} />
+        <meta name="author" content={data.author} />
+      </Head>
+
+      <Table>
+        <TableRow label="Pathname" value={pathname} testID="pathname-result" />
+        <TableRow label="Local Params" value={localParams} testID="localparams-result" />
+        <TableRow label="Loader Data" value={data} testID="loader-result" />
+      </Table>
+
+      <SiteLinks>
+        <SiteLink href="/">Go to Index</SiteLink>
+        <SiteLink href="/second">Go to Second</SiteLink>
+      </SiteLinks>
+    </>
+  );
+}

apps/router-e2e/__e2e__/server-loader/app/nullish/[value].tsx

@@ -1,8 +1,10 @@
 import { useLoaderData, useLocalSearchParams, usePathname } from 'expo-router';
 import { ImmutableRequest } from 'expo-router/server';
-import { Container } from '../../components/Container';
-import { Table, TableRow } from '../../components/Table';
+import { Suspense } from 'react';
+
+import { Loading } from '../../components/Loading';
 import { SiteLinks, SiteLink } from '../../components/SiteLink';
+import { Table, TableRow } from '../../components/Table';
 
 export async function generateStaticParams(): Promise<Record<string, string>[]> {
   return [{ value: 'null' }, { value: 'undefined' }];
@@ -18,16 +20,24 @@ export async function loader(_: ImmutableRequest, params: { value: string }) {
   return { value: params.value };
 }
 
-export default function Nullish() {
+export default function NullishRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <NullishScreen />
+    </Suspense>
+  );
+}
+
+const NullishScreen = () => {
   const pathname = usePathname();
   const { value } = useLocalSearchParams<{ value: string }>();
   const data = useLoaderData<typeof loader>();
 
-  const displayData = data === null ? 'NULL' : data === undefined ? 'UNDEFINED' : data;
+  const displayData = data === null ? 'NULL' : data;
   const displayType = data === null ? 'null' : typeof data;
 
   return (
-    <Container>
+    <>
       <Table>
         <TableRow label="Pathname" value={pathname} testID="pathname-result" />
         <TableRow label="Param Value" value={value} testID="param-result" />
@@ -39,6 +49,6 @@ export default function Nullish() {
         <SiteLink href="/nullish/null">Test Null</SiteLink>
         <SiteLink href="/nullish/undefined">Test Undefined</SiteLink>
       </SiteLinks>
-    </Container>
+    </>
   );
-}
+}

apps/router-e2e/__e2e__/server-loader/app/posts/[postId].tsx

@@ -1,8 +1,10 @@
 import { useLoaderData, useLocalSearchParams, usePathname } from 'expo-router';
 import { ImmutableRequest } from 'expo-router/server';
-import { Container } from '../../components/Container';
-import { Table, TableRow } from '../../components/Table';
+import { Suspense } from 'react';
+
+import { Loading } from '../../components/Loading';;
 import { SiteLinks, SiteLink } from '../../components/SiteLink';
+import { Table, TableRow } from '../../components/Table';
 
 export async function generateStaticParams(params: {
   id: 'one' | 'two';
@@ -23,13 +25,21 @@ export async function loader(_: ImmutableRequest, params: Record<string, string
   });
 }
 
-export default function PostById() {
+export default function PostByIdRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <PostByIdScreen />
+    </Suspense>
+  );
+}
+
+const PostByIdScreen = () => {
   const pathname = usePathname();
   const localParams = useLocalSearchParams();
   const data = useLoaderData<typeof loader>();
 
   return (
-    <Container>
+    <>
       <Table>
         <TableRow label="Pathname" value={pathname} testID="pathname-result" />
         <TableRow label="Local Params" value={localParams} testID="localparams-result" />
@@ -40,6 +50,6 @@ export default function PostById() {
         <SiteLink href="/">Go to Index</SiteLink>
         <SiteLink href="/second">Go to Second</SiteLink>
       </SiteLinks>
-    </Container>
+    </>
   );
-}
+}

apps/router-e2e/__e2e__/server-loader/app/request.tsx

@@ -1,6 +1,8 @@
 import { useLoaderData, useLocalSearchParams, usePathname } from 'expo-router';
 import type { LoaderFunction } from 'expo-router/server';
-import { Container } from '../components/Container';
+import { Suspense } from 'react';
+
+import { Loading } from '../components/Loading';
 import { Table, TableRow } from '../components/Table';
 import { SiteLinks, SiteLink } from '../components/SiteLink';
 
@@ -10,6 +12,18 @@ export const loader: LoaderFunction = (request, params) => {
     return { headers: null, url: null, method: null };
   }
 
+  const url = new URL(request.url);
+
+  if (url.searchParams.get('immutable') === 'true') {
+    try {
+      // @ts-ignore The next line will fail at runtime for test purposes
+      request.headers.set('X-Test', 'value');
+      return { immutable: false, error: null }; // Should not reach here
+    } catch (error) {
+      return { immutable: true, error: (error as Error).message };
+    }
+  }
+
   let headers: { key: string; value: string }[] = [];
   request.headers.forEach((value, key) => {
     headers.push({ key, value });
@@ -22,12 +36,20 @@ export const loader: LoaderFunction = (request, params) => {
 };
 
 export default function RequestRoute() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <RequestScreen />
+    </Suspense>
+  );
+}
+
+const RequestScreen = () => {
   const pathname = usePathname();
   const localParams = useLocalSearchParams();
   const data = useLoaderData<typeof loader>();
 
   return (
-    <Container>
+    <>
       <Table>
         <TableRow label="Pathname" value={pathname} testID="pathname-result" />
         <TableRow label="Local Params" value={localParams} testID="localparams-result" />
@@ -38,6 +60,6 @@ export default function RequestRoute() {
         <SiteLink href="/">Go to Index</SiteLink>
         <SiteLink href="/second">Go to Second</SiteLink>
       </SiteLinks>
-    </Container>
+    </>
   );
 }