@expo/cli 54.0.10 → 54.1.0-canary-20251003-7b9d7ff

package/build/src/start/server/metro/MetroBundlerDevServer.js

@@ -108,6 +108,7 @@ const _BundlerDevServer = require("../BundlerDevServer");
 const _getStaticRenderFunctions = require("../getStaticRenderFunctions");
 const _ContextModuleSourceMapsMiddleware = require("../middleware/ContextModuleSourceMapsMiddleware");
 const _CreateFileMiddleware = require("../middleware/CreateFileMiddleware");
+const _DataLoaderModuleMiddleware = require("../middleware/DataLoaderModuleMiddleware");
 const _DevToolsPluginMiddleware = require("../middleware/DevToolsPluginMiddleware");
 const _DomComponentsMiddleware = require("../middleware/DomComponentsMiddleware");
 const _FaviconMiddleware = require("../middleware/FaviconMiddleware");
@@ -319,7 +320,9 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             })
         };
     }
-    async getStaticRenderFunctionAsync() {
+    /**
+   * This function is invoked when exporting via `expo export`
+   */ async getStaticRenderFunctionAsync() {
         var _exp_extra, _exp_extra1;
         const url = this.getDevServerUrlOrAssert();
         const { getStaticContent, getManifest, getBuildTimeServerManifestAsync } = await this.ssrLoadModule('expo-router/node/render.js', {
@@ -328,10 +331,11 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             environment: 'node'
         });
         const { exp } = (0, _config().getConfig)(this.projectRoot);
+        const serverManifest = await getBuildTimeServerManifestAsync({
+            ...(_exp_extra = exp.extra) == null ? void 0 : _exp_extra.router
+        });
         return {
-            serverManifest: await getBuildTimeServerManifestAsync({
-                ...(_exp_extra = exp.extra) == null ? void 0 : _exp_extra.router
-            }),
+            serverManifest,
             // Get routes from Expo Router.
             manifest: await getManifest({
                 preserveApiRoutes: false,
@@ -367,7 +371,10 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             bytecode: false
         });
     }
-    async getStaticPageAsync(pathname) {
+    /**
+   * This function is invoked when running in development via `expo start`
+   */ async getStaticPageAsync(pathname, route) {
+        const { exp } = (0, _config().getConfig)(this.projectRoot);
         const { mode, isExporting, clientBoundaries, baseUrl, reactCompiler, routerRoot, asyncRoutes } = this.instanceMetroOptions;
         (0, _assert().default)(mode != null && isExporting != null && baseUrl != null && reactCompiler != null && routerRoot != null && asyncRoutes != null, 'The server must be started before calling getStaticPageAsync.');
         const platform = 'web';
@@ -389,6 +396,7 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             bytecode: false
         });
         const bundleStaticHtml = async ()=>{
+            var _exp_extra_router, _exp_extra;
             const { getStaticContent } = await this.ssrLoadModule('expo-router/node/render.js', {
                 // This must always use the legacy rendering resolution (no `react-server`) because it leverages
                 // the previous React SSG utilities which aren't available in React 19.
@@ -398,7 +406,17 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
                 platform
             });
             const location = new URL(pathname, this.getDevServerUrlOrAssert());
-            return await getStaticContent(location);
+            const useServerDataLoaders = (_exp_extra = exp.extra) == null ? void 0 : (_exp_extra_router = _exp_extra.router) == null ? void 0 : _exp_extra_router.unstable_useServerDataLoaders;
+            if (useServerDataLoaders) {
+                const data = await this.executeServerDataLoaderAsync(location, route);
+                return await getStaticContent(location, {
+                    loader: {
+                        data
+                    }
+                });
+            } else {
+                return await getStaticContent(location);
+            }
         };
         const [{ artifacts: resources }, staticHtml] = await Promise.all([
             this.getStaticResourcesAsync({
@@ -806,6 +824,14 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             middleware.use(new _CreateFileMiddleware.CreateFileMiddleware(this.projectRoot).getHandler());
             // Append support for redirecting unhandled requests to the index.html page on web.
             if (this.isTargetingWeb()) {
+                var _exp_extra_router1, _exp_extra2;
+                if ((_exp_extra2 = exp.extra) == null ? void 0 : (_exp_extra_router1 = _exp_extra2.router) == null ? void 0 : _exp_extra_router1.unstable_useServerDataLoaders) {
+                    const loaderModuleMiddleware = new _DataLoaderModuleMiddleware.DataLoaderModuleMiddleware(this.projectRoot, appDir, async (location, route)=>{
+                        return this.executeServerDataLoaderAsync(location, route);
+                    }, ()=>this.getDevServerUrlOrAssert());
+                    // This MUST be before ServeStaticMiddleware so it doesn't treat the loader files as static assets
+                    middleware.use(loaderModuleMiddleware.getHandler());
+                }
                 // This MUST be after the manifest middleware so it doesn't have a chance to serve the template `public/index.html`.
                 middleware.use(new _ServeStaticMiddleware.ServeStaticMiddleware(this.projectRoot).getHandler());
                 // This should come after the static middleware so it doesn't serve the favicon from `public/favicon.ico`.
@@ -816,6 +842,7 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
                     metro,
                     server
                 }, (events)=>{
+                    var _exp_extra_router, _exp_extra;
                     if (hasApiRoutes) {
                         // NOTE(EvanBacon): We aren't sure what files the API routes are using so we'll just invalidate
                         // aggressively to ensure we always have the latest. The only caching we really get here is for
@@ -834,6 +861,15 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
                             }
                         }
                     }
+                    // Handle loader file changes for HMR
+                    if ((_exp_extra = exp.extra) == null ? void 0 : (_exp_extra_router = _exp_extra.router) == null ? void 0 : _exp_extra_router.unstable_useServerDataLoaders) {
+                        for (const event of events){
+                            var _event_metadata1;
+                            if (((_event_metadata1 = event.metadata) == null ? void 0 : _event_metadata1.type) !== 'd') {
+                                this.handleLoaderFileChange(event.filePath);
+                            }
+                        }
+                    }
                 });
             }
             // If React 19 is enabled, then add RSC middleware to the dev server.
@@ -867,7 +903,7 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
                         bundleApiRoute: (functionFilePath)=>this.ssrImportApiRoute(functionFilePath, {
                                 platform: 'web'
                             }),
-                        getStaticPageAsync: async (pathname)=>{
+                        getStaticPageAsync: async (pathname, route)=>{
                             // TODO: Add server rendering when RSC is enabled.
                             if (isReactServerComponentsEnabled) {
                                 // NOTE: This is a temporary hack to return the SPA/template index.html in development when RSC is enabled.
@@ -878,7 +914,7 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
                                 };
                             }
                             // Non-RSC apps will bundle the static HTML for a given pathname and respond with it.
-                            return this.getStaticPageAsync(pathname);
+                            return this.getStaticPageAsync(pathname, route);
                         }
                     }));
                 }
@@ -1112,6 +1148,62 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
     invalidateApiRouteCache() {
         this.pendingRouteOperations.clear();
     }
+    /**
+   * Execute a route's loader function. Used during SSR/SSG to fetch data required by routes.
+   *
+   * This function is used during development and production builds, and **must** receive a valid
+   * matched route.
+   *
+   * @experimental
+   */ async executeServerDataLoaderAsync(location, route) {
+        var _exp_extra;
+        const { exp } = (0, _config().getConfig)(this.projectRoot);
+        const { unstable_useServerDataLoaders } = (_exp_extra = exp.extra) == null ? void 0 : _exp_extra.router;
+        if (!unstable_useServerDataLoaders) {
+            throw new _errors.CommandError('LOADERS_NOT_ENABLED', 'Server data loaders are not enabled. Add `unstable_useServerDataLoaders` to your `expo-router` plugin config.');
+        }
+        // If the route is unmatched, we can ignore it
+        // TODO(@hassankhan): Is this the best way of determining the route is unmatched?
+        if (route.page === '/+not-found') {
+            return;
+        }
+        const { routerRoot } = this.instanceMetroOptions;
+        (0, _assert().default)(routerRoot != null, 'The server must be started before calling executeRouteLoaderAsync.');
+        let loaderData;
+        try {
+            debug('Matched route loader to file: ', route.file);
+            // TODO(@hassankhan): This should move to a util function
+            const params = {};
+            const match = route.namedRegex.exec(location.pathname);
+            if (match == null ? void 0 : match.groups) {
+                for (const [key, value] of Object.entries(match.groups)){
+                    const namedKey = route.routeKeys[key];
+                    params[namedKey] = value;
+                }
+            }
+            let modulePath = route.file;
+            const appDir = _path().default.join(this.projectRoot, routerRoot);
+            modulePath = _path().default.isAbsolute(modulePath) ? modulePath : _path().default.join(appDir, modulePath);
+            modulePath = modulePath.replace(/\.(js|ts)x?$/, '');
+            debug('Using loader module path: ', modulePath);
+            const routeModule = await this.ssrLoadModule(modulePath, {
+                environment: 'node'
+            });
+            if (routeModule.loader) {
+                // Register this module for loader HMR
+                this.setupLoaderHmr(modulePath);
+                loaderData = await routeModule.loader({
+                    params,
+                    // NOTE(@hassankhan): The `request` object should only be available when using SSR
+                    request: null
+                });
+            }
+        } catch (error) {
+            throw new _errors.CommandError('LOADER_EXECUTION_FAILED', `Failed to execute loader for route "${location.pathname}": ${error.message}`);
+        }
+        debug('Loader data:', loaderData, ' for location:', location.pathname);
+        return loaderData;
+    }
     // Ensure the global is available for SSR CSS modules to inject client updates.
     bindRSCDevModuleInjectionHandler() {
         // Used by SSR CSS modules to broadcast client updates.
@@ -1150,6 +1242,30 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
         };
         this.registerSsrHmrAsync(url.toString(), onReload);
     }
+    setupLoaderHmr(modulePath) {
+        if (this.watchedLoaderFiles.has(modulePath)) {
+            return;
+        }
+        this.watchedLoaderFiles.add(modulePath);
+        debug('[Loader HMR] Registering loader file for HMR:', modulePath);
+    }
+    handleLoaderFileChange(changedFilePath) {
+        for (const loaderPath of this.watchedLoaderFiles){
+            const possibleExtensions = [
+                '.tsx',
+                '.ts',
+                '.jsx',
+                '.js'
+            ];
+            const isLoaderFile = possibleExtensions.some((ext)=>changedFilePath === loaderPath + ext || changedFilePath === loaderPath);
+            if (isLoaderFile) {
+                debug('[Loader HMR] Loader file changed, triggering reload:', changedFilePath);
+                this.broadcastMessage('sendDevCommand', {
+                    name: 'reload'
+                });
+            }
+        }
+    }
     // Direct Metro access
     // Emulates the Metro dev server .bundle endpoint without having to go through a server.
     async _bundleDirectAsync(resolvedEntryFilePath, { transformOptions, resolverOptions, graphOptions, serializerOptions }) {
@@ -1367,7 +1483,7 @@ class MetroBundlerDevServer extends _BundlerDevServer.BundlerDevServer {
             }
             return (0, _getStaticRenderFunctions.evalMetroAndWrapFunctions)(this.projectRoot, res.src, res.filename, specificOptions.isExporting ?? this.instanceMetroOptions.isExporting);
         }, this.rscRenderer = null, this.onReloadRscEvent = null, // API Routes
-        this.pendingRouteOperations = new Map();
+        this.pendingRouteOperations = new Map(), this.watchedLoaderFiles = new Set();
     }
 }
 function getBuildID(buildNumber) {