@modern-js/runtime 2.10.0 → 2.11.0

package/dist/esm-node/router/runtime/PrefetchLink.js

@@ -0,0 +1,177 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useContext, useMemo } from "react";
+import {
+  Link as RouterLink,
+  matchRoutes,
+  useResolvedPath,
+  useHref,
+  useMatches,
+  NavLink as RouterNavLink
+} from "react-router-dom";
+import { RuntimeReactContext } from "../../core";
+function composeEventHandlers(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler == null ? void 0 : theirHandler(event);
+    if (!event.defaultPrevented) {
+      ourHandler(event);
+    }
+  };
+}
+const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+function usePrefetchBehavior(prefetch, theirElementProps) {
+  const [maybePrefetch, setMaybePrefetch] = React.useState(false);
+  const [shouldPrefetch, setShouldPrefetch] = React.useState(false);
+  const { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
+  React.useEffect(() => {
+    if (prefetch === "render") {
+      setShouldPrefetch(true);
+    }
+  }, [prefetch]);
+  const setIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(true);
+    }
+  };
+  const cancelIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(false);
+      setShouldPrefetch(false);
+    }
+  };
+  React.useEffect(() => {
+    if (maybePrefetch) {
+      const id = setTimeout(() => {
+        setShouldPrefetch(true);
+      }, 100);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [maybePrefetch]);
+  return [
+    shouldPrefetch,
+    {
+      onFocus: composeEventHandlers(onFocus, setIntent),
+      onBlur: composeEventHandlers(onBlur, cancelIntent),
+      onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+      onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+      onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+    }
+  ];
+}
+async function loadRouteModule(route, routeAssets) {
+  const routeId = route.id;
+  if (!routeId) {
+    return;
+  }
+  if (!routeAssets[routeId]) {
+    return;
+  }
+  const { chunkIds } = routeAssets[routeId];
+  if (!chunkIds) {
+    return;
+  }
+  try {
+    await Promise.all(
+      chunkIds.map((chunkId) => {
+        return __webpack_chunk_load__ == null ? void 0 : __webpack_chunk_load__(String(chunkId));
+      })
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+const getRequestUrl = (pathname, routeId) => {
+  const LOADER_ID_PARAM = "__loader";
+  const DIRECT_PARAM = "__ssrDirect";
+  const { protocol, host } = window.location;
+  const url = new URL(pathname, `${protocol}//${host}`);
+  url.searchParams.append(LOADER_ID_PARAM, routeId);
+  url.searchParams.append(DIRECT_PARAM, "true");
+  return url;
+};
+const createDataHref = (href) => {
+  return /* @__PURE__ */ jsx("link", { rel: "prefetch", as: "fetch", href }, href);
+};
+const getDataHref = (route, pathname, basename) => {
+  const { id } = route;
+  const path = basename === "/" ? pathname : `${basename}${pathname}`;
+  const url = getRequestUrl(path, id);
+  return createDataHref(url.toString());
+};
+const PrefetchPageLinks = ({ pathname }) => {
+  const context = useContext(RuntimeReactContext);
+  const { routeManifest, routes } = context;
+  const { routeAssets } = routeManifest;
+  const matches = Array.isArray(routes) ? matchRoutes(routes, pathname) : [];
+  if (Array.isArray(matches)) {
+    matches == null ? void 0 : matches.forEach((match) => loadRouteModule(match.route, routeAssets));
+  }
+  if (!window._SSR_DATA) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    PrefetchDataLinks,
+    {
+      matches,
+      pathname,
+      routeManifest
+    }
+  );
+};
+const PrefetchDataLinks = ({ matches, pathname, routeManifest }) => {
+  const currentMatches = useMatches();
+  const basename = useHref("/");
+  const dataHrefs = useMemo(() => {
+    return matches == null ? void 0 : matches.filter(
+      (match) => match.route.loader && typeof match.route.loader === "function" && match.route.loader.length > 0
+    ).filter((match, index) => {
+      const currentMatch = currentMatches[index];
+      if (!currentMatch || currentMatch.id !== match.route.id) {
+        return true;
+      }
+      if (currentMatch.pathname !== match.pathname) {
+        return true;
+      }
+      if (currentMatch.pathname.endsWith("*") && currentMatch.params["*"] !== match.params["*"]) {
+        return true;
+      }
+      return false;
+    }).map((match) => getDataHref(match.route, pathname, basename));
+  }, [matches, pathname, routeManifest]);
+  return /* @__PURE__ */ jsx(Fragment, { children: dataHrefs });
+};
+const createPrefetchLink = (Link2) => {
+  return React.forwardRef(
+    ({ to, prefetch = "none", ...props }, forwardedRef) => {
+      const isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+      const [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
+        prefetch,
+        props
+      );
+      const resolvedPath = useResolvedPath(to);
+      const { pathname } = resolvedPath;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Link2,
+          {
+            ref: forwardedRef,
+            to,
+            ...props,
+            ...prefetchHandlers
+          }
+        ),
+        shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /* @__PURE__ */ jsx(PrefetchPageLinks, { pathname }) : null
+      ] });
+    }
+  );
+};
+const Link = createPrefetchLink(RouterLink);
+Link.displayName = "Link";
+const NavLink = createPrefetchLink(RouterNavLink);
+NavLink.displayName = "NavLink";
+export {
+  Link as PrefetchLink,
+  NavLink as PrefetchNavLink,
+  composeEventHandlers
+};

package/dist/esm-node/router/runtime/index.js

@@ -2,6 +2,7 @@ import { routerPlugin } from "./plugin";
 var runtime_default = routerPlugin;
 import { modifyRoutes } from "./plugin";
 export * from "./withRouter";
+import { PrefetchLink, PrefetchNavLink } from "./PrefetchLink";
 import {
   createBrowserRouter,
   createHashRouter,
@@ -57,7 +58,7 @@ import {
   renderMatches,
   resolvePath
 } from "react-router-dom";
-import { defer, json, redirect } from "@modern-js/utils/remix-router";
+import { defer, json, redirect } from "@modern-js/utils/universal/remix-router";
 export {
   Await,
   BrowserRouter,
@@ -68,6 +69,8 @@ export {
   NavLink,
   Navigate,
   Outlet,
+  PrefetchLink,
+  PrefetchNavLink,
   Route,
   Router,
   RouterProvider,

package/dist/esm-node/router/runtime/plugin.js

@@ -32,6 +32,7 @@ const routerPlugin = ({
   createRoutes
 }) => {
   const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+  let routes = [];
   finalRouteConfig = routesConfig;
   return {
     name: "@modern-js/plugin-router",
@@ -42,6 +43,11 @@ const routerPlugin = ({
             useMatches,
             useLocation
           };
+          Object.defineProperty(context, "routes", {
+            get() {
+              return routes;
+            }
+          });
           return next({ context });
         },
         hoc: ({ App }, next) => {
@@ -52,7 +58,12 @@ const routerPlugin = ({
             return (props) => {
               var _a;
               beforeCreateRouter = true;
-              const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
+              routes = createRoutes ? createRoutes() : createRoutesFromElements(
+                renderRoutes({
+                  routesConfig: finalRouteConfig,
+                  props
+                })
+              );
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;

package/dist/esm-node/router/runtime/plugin.node.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { createStaticHandler } from "@modern-js/utils/remix-router";
+import { createStaticHandler } from "@modern-js/utils/universal/remix-router";
 import {
   createStaticRouter,
   StaticRouterProvider
@@ -53,7 +53,12 @@ const routerPlugin = ({
           const { request, mode: ssrMode } = context.ssrContext;
           const baseUrl = request.baseUrl;
           const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig, ssrMode));
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(
+            renderRoutes({
+              routesConfig,
+              ssrMode
+            })
+          );
           const { query } = createStaticHandler(routes, {
             basename: _basename
           });

package/dist/esm-node/router/runtime/utils.js

@@ -1,28 +1,30 @@
 import { jsx } from "react/jsx-runtime";
 import { Route } from "react-router-dom";
-import { renderNestedRoute } from "@modern-js/utils/nestedRoutes";
 import {
   ErrorResponse,
   isRouteErrorResponse
-} from "@modern-js/utils/remix-router";
+} from "@modern-js/utils/universal/remix-router";
+import { renderNestedRoute } from "@modern-js/utils/universal/nestedRoutes";
 import { DefaultNotFound } from "./DefaultNotFound";
 import DeferredDataScripts from "./DeferredDataScripts";
 function getRouteComponents(routes, {
   globalApp,
-  ssrMode
+  ssrMode,
+  props
 }) {
-  const Layout = ({ Component, ...props }) => {
+  const Layout = ({ Component, ...props2 }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
-      return /* @__PURE__ */ jsx(Component, { ...props });
+      return /* @__PURE__ */ jsx(Component, { ...props2 });
     }
-    return /* @__PURE__ */ jsx(GlobalLayout, { Component, ...props });
+    return /* @__PURE__ */ jsx(GlobalLayout, { Component, ...props2 });
   };
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
       const routeElement = renderNestedRoute(route, {
-        DeferredDataComponent: ssrMode === "stream" ? DeferredDataScripts : void 0
+        DeferredDataComponent: ssrMode === "stream" ? DeferredDataScripts : void 0,
+        props
       });
       routeElements.push(routeElement);
     } else {
@@ -40,7 +42,11 @@ function getRouteComponents(routes, {
   routeElements.push(/* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(DefaultNotFound, {}) }, "*"));
   return routeElements;
 }
-function renderRoutes(routesConfig, ssrMode) {
+function renderRoutes({
+  routesConfig,
+  props,
+  ssrMode
+}) {
   if (!routesConfig) {
     return null;
   }
@@ -48,7 +54,11 @@ function renderRoutes(routesConfig, ssrMode) {
   if (!routes) {
     return null;
   }
-  const routeElements = getRouteComponents(routes, { globalApp, ssrMode });
+  const routeElements = getRouteComponents(routes, {
+    globalApp,
+    ssrMode,
+    props
+  });
   return routeElements;
 }
 function getLocation(serverContext) {

package/dist/esm-node/ssr/index.js

@@ -15,6 +15,9 @@ const ssr = (config) => ({
         var _a;
         const hydrateContext = {
           ...context,
+          get routes() {
+            return context.routes;
+          },
           _hydration: true
         };
         const callback = () => {

package/dist/esm-node/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -1,4 +1,4 @@
-import { serializeJson } from "@modern-js/utils/serialize";
+import { serializeJson } from "@modern-js/utils/universal/serialize";
 import { buildTemplate } from "./buildTemplate.share";
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];

package/dist/esm-node/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -42,8 +42,8 @@ function getHeadTemplate(beforeEntryTemplate, context) {
         if (routeId) {
           const routeManifest2 = routeAssets[routeId];
           if (routeManifest2) {
-            const { assets = [] } = routeManifest2;
-            const _cssChunks = assets.filter(
+            const { referenceCssAssets = [] } = routeManifest2;
+            const _cssChunks = referenceCssAssets.filter(
               (asset) => asset == null ? void 0 : asset.endsWith(".css")
             );
             cssChunks.push(..._cssChunks);

package/dist/esm-node/ssr/serverRender/renderToString/entry.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDomServer from "react-dom/server";
-import { serializeJson } from "@modern-js/utils/serialize";
+import { serializeJson } from "@modern-js/utils/universal/serialize";
 import ReactHelmet from "react-helmet";
 import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";

package/dist/types/router/runtime/PrefetchLink.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { LinkProps as RouterLinkProps, NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
+export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
+/**
+ * Modified from https://github.com/remix-run/remix/blob/9a0601bd704d2f3ee622e0ddacab9b611eb0c5bc/packages/remix-react/components.tsx#L218
+ *
+ * MIT Licensed
+ * Author Michael Jackson
+ * Copyright 2021 Remix Software Inc.
+ * https://github.com/remix-run/remix/blob/2b5e1a72fc628d0408e27cf4d72e537762f1dc5b/LICENSE.md
+ */
+
+/**
+ * Defines the prefetching behavior of the link:
+ *
+ * - "intent": Fetched when the user focuses or hovers the link
+ * - "render": Fetched when the link is rendered
+ * - "none": Never fetched
+ */
+
+type PrefetchBehavior = 'intent' | 'render' | 'none';
+export interface PrefetchLinkProps extends RouterLinkProps {
+  prefetch?: PrefetchBehavior;
+}
+export interface PrefetchNavLinkProps extends RouterNavLinkProps {
+  prefetch?: PrefetchBehavior;
+}
+declare const Link: React.ForwardRefExoticComponent<PrefetchLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavLink: React.ForwardRefExoticComponent<PrefetchNavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { Link as PrefetchLink, NavLink as PrefetchNavLink };

package/dist/types/router/runtime/index.d.ts

@@ -4,6 +4,8 @@ export type { SingleRouteConfig, RouterConfig };
 export default routerPlugin;
 export { modifyRoutes } from './plugin';
 export * from './withRouter';
+export { PrefetchLink, PrefetchNavLink } from './PrefetchLink';
+export type { PrefetchLinkProps, PrefetchNavLinkProps } from './PrefetchLink';
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, BrowserRouterProps, HashRouterProps, HistoryRouterProps, LinkProps, NavLinkProps, FormProps, ScrollRestorationProps, SubmitFunction, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
 export { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Link, NavLink, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from 'react-router-dom';
-export { defer, json, redirect } from '@modern-js/utils/remix-router';
+export { defer, json, redirect } from '@modern-js/utils/universal/remix-router';

package/dist/types/router/runtime/types.d.ts

@@ -37,4 +37,13 @@ export type RouterConfig = {
   basename?: string;
   createRoutes?: () => RouteObject[];
 };
-export type Routes = RouterConfig['routesConfig']['routes'];
+export type Routes = RouterConfig['routesConfig']['routes'];
+export interface RouteManifest {
+  routeAssets: RouteAssets;
+}
+export interface RouteAssets {
+  [routeId: string]: {
+    chunkIds?: (string | number)[];
+    assets?: string[];
+  };
+}

package/dist/types/router/runtime/utils.d.ts

@@ -1,15 +1,25 @@
 import React from 'react';
 import { type NestedRoute, type PageRoute, type SSRMode } from '@modern-js/types';
-import { type Router, type StaticHandlerContext } from '@modern-js/utils/remix-router';
+import { type Router, type StaticHandlerContext } from '@modern-js/utils/universal/remix-router';
 import { RouterConfig } from './types';
 export declare function getRouteComponents(routes: (NestedRoute | PageRoute)[], {
   globalApp,
-  ssrMode
+  ssrMode,
+  props
 }: {
   globalApp?: React.ComponentType<any>;
   ssrMode?: SSRMode;
+  props?: Record<string, any>;
 }): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-export declare function renderRoutes(routesConfig: RouterConfig['routesConfig'], ssrMode?: SSRMode): React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | null;
+export declare function renderRoutes({
+  routesConfig,
+  props,
+  ssrMode
+}: {
+  routesConfig: RouterConfig['routesConfig'];
+  props?: Record<string, any>;
+  ssrMode?: SSRMode;
+}): React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | null;
 export declare function getLocation(serverContext: any): string;
 export declare const urlJoin: (...parts: string[]) => string;
 export declare function standardSlash(str: string): string;

package/dist/types/runtimeContext.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { Store } from '@modern-js-reduck/store';
-import type { StaticHandlerContext } from '@modern-js/utils/remix-router';
+import type { StaticHandlerContext } from '@modern-js/utils/universal/remix-router';
 import { createLoaderManager } from './core/loader/loaderManager';
 import { runtime } from './core/plugin';
+import { RouteManifest } from './router/runtime/types';
 import { SSRServerContext } from './ssr/serverRender/types';
 export interface BaseRuntimeContext {
   initialData?: Record<string, unknown>;
@@ -10,6 +11,7 @@ export interface BaseRuntimeContext {
   runner: ReturnType<typeof runtime.init>;
   ssrContext?: SSRServerContext;
   store?: Store;
+  routeManifest: RouteManifest;
   routerContext?: StaticHandlerContext;
 }
 export interface RuntimeContext extends BaseRuntimeContext {

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.10.0",
+  "version": "2.11.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -158,9 +158,9 @@
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.10.0",
-    "@modern-js/types": "2.10.0",
-    "@modern-js/utils": "2.10.0"
+    "@modern-js/plugin": "2.11.0",
+    "@modern-js/types": "2.11.0",
+    "@modern-js/utils": "2.11.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -181,11 +181,11 @@
     "react-dom": "^18",
     "ts-jest": "^29.0.5",
     "typescript": "^4",
-    "@modern-js/app-tools": "2.10.0",
-    "@modern-js/core": "2.10.0",
-    "@modern-js/server-core": "2.10.0",
-    "@scripts/build": "2.10.0",
-    "@scripts/jest-config": "2.10.0"
+    "@modern-js/app-tools": "2.11.0",
+    "@modern-js/core": "2.11.0",
+    "@modern-js/server-core": "2.11.0",
+    "@scripts/build": "2.11.0",
+    "@scripts/jest-config": "2.11.0"
   },
   "sideEffects": false,
   "modernConfig": {},