@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.102 → 3.2.0-ultramodern.104

package/dist/esm-node/runtime/prefetchLink.mjs

@@ -5,7 +5,7 @@ function resolvePreloadFromPrefetch(prefetch, preload) {
     if (void 0 !== preload) return preload;
     if ('none' === prefetch) return false;
     if ('intent' === prefetch || 'render' === prefetch || 'viewport' === prefetch) return prefetch;
-    return preload;
+    return 'viewport';
 }
 const LinkComponentImpl = (props)=>{
     const { prefetch, preload, ...rest } = props;

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

@@ -1,27 +1,12 @@
-declare const modifyRoutes: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
-declare const onBeforeCreateRoutes: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
-declare const onBeforeCreateRouter: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
-declare const onAfterCreateRouter: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
-declare const onBeforeHydrateRouter: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
-declare const onAfterHydrateRouter: {
-    tap: (cb: any) => void;
-    call: (...params: any[]) => any;
-};
+import type { TRuntimeContext } from '@modern-js/runtime/context';
+import type { RouteObject } from '@modern-js/runtime-utils/router';
+import type { RouterLifecycleContext } from './lifecycle';
+declare const modifyRoutes: import("@modern-js/plugin").SyncHook<(routes: RouteObject[]) => RouteObject[]>;
+declare const onBeforeCreateRoutes: import("@modern-js/plugin").SyncHook<(context: TRuntimeContext) => void>;
+declare const onBeforeCreateRouter: import("@modern-js/plugin").SyncHook<(context: RouterLifecycleContext) => void>;
+declare const onAfterCreateRouter: import("@modern-js/plugin").SyncHook<(context: RouterLifecycleContext) => void>;
+declare const onBeforeHydrateRouter: import("@modern-js/plugin").SyncHook<(context: RouterLifecycleContext) => void>;
+declare const onAfterHydrateRouter: import("@modern-js/plugin").SyncHook<(context: RouterLifecycleContext) => void>;
 export { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter, };
 export type RouterExtendsHooks = {
     modifyRoutes: typeof modifyRoutes;

package/package.json

@@ -18,7 +18,7 @@
     "modern.js",
     "tanstack-router"
   ],
-  "version": "3.2.0-ultramodern.102",
+  "version": "3.2.0-ultramodern.104",
   "engines": {
     "node": ">=20"
   },
@@ -88,13 +88,13 @@
     "@swc/helpers": "^0.5.23",
     "@tanstack/react-router": "1.170.11",
     "@tanstack/router-core": "1.171.9",
-    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.102",
-    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.102",
-    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.102",
-    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.102"
+    "@modern-js/types": "npm:@bleedingdev/modern-js-types@3.2.0-ultramodern.104",
+    "@modern-js/utils": "npm:@bleedingdev/modern-js-utils@3.2.0-ultramodern.104",
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.2.0-ultramodern.104",
+    "@modern-js/runtime-utils": "npm:@bleedingdev/modern-js-runtime-utils@3.2.0-ultramodern.104"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "3.2.0-ultramodern.102",
+    "@modern-js/runtime": "3.2.0-ultramodern.104",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
@@ -109,9 +109,9 @@
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.102",
-    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.102",
-    "@scripts/rstest-config": "2.66.0"
+    "@modern-js/app-tools": "npm:@bleedingdev/modern-js-app-tools@3.2.0-ultramodern.104",
+    "@scripts/rstest-config": "2.66.0",
+    "@modern-js/runtime": "npm:@bleedingdev/modern-js-runtime@3.2.0-ultramodern.104"
   },
   "sideEffects": false,
   "publishConfig": {

package/src/runtime/outlet.tsx

@@ -1,12 +1,19 @@
 import { Outlet as TanstackOutlet } from '@tanstack/react-router';
 import {
-  type ComponentProps,
   createElement,
   type ElementType,
   memo,
+  type ReactElement,
 } from 'react';
 
-type PreloadableComponent = ElementType<Record<string, unknown>> & {
+type RouteComponentProps = Record<string, unknown>;
+type PreloadableComponent = ElementType<RouteComponentProps> & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+type WrappedPreloadableComponent = ((
+  props: RouteComponentProps,
+) => ReactElement | null) & {
   load?: () => Promise<unknown>;
   preload?: () => Promise<unknown>;
 };
@@ -19,14 +26,13 @@ export function withModernRouteMatchContext(
   component: unknown,
   _routeId: string,
 ): unknown {
-  if (!component) {
+  if (component === null || component === undefined) {
     return component;
   }
 
-  const Component = component as ElementType<Record<string, unknown>>;
-  const WrappedRouteComponent = (
-    props: ComponentProps<ElementType<Record<string, unknown>>>,
-  ) => createElement(Component, props);
+  const Component = component as ElementType<RouteComponentProps>;
+  const WrappedRouteComponent: WrappedPreloadableComponent = props =>
+    createElement(Component, props);
 
   const preloadable = component as PreloadableComponent;
   if (typeof preloadable.load === 'function') {

package/src/runtime/plugin.node.tsx

@@ -169,7 +169,8 @@ function isReactLazyRouteComponent(
   component: unknown,
 ): component is ReactLazyRouteComponent {
   return (
-    Boolean(component) &&
+    component !== null &&
+    component !== undefined &&
     typeof component === 'object' &&
     typeof (component as ReactLazyRouteComponent)._init === 'function' &&
     '_payload' in component

package/src/runtime/plugin.tsx

@@ -208,16 +208,16 @@ function getCachedRouteModule(routeId: string) {
   ]?.[routeId];
 }
 
-async function preloadHydratedRouteComponents(router: AnyRouter) {
+function preloadHydratedRouteComponents(router: AnyRouter): Promise<void> {
   const preloadableRouter = router as RouterWithPreloadableRoutes;
   const routesById = preloadableRouter.routesById || {};
   const matches = preloadableRouter.stores.matches.get() as Array<{
     routeId?: string;
   }>;
 
-  await Promise.all(
+  return Promise.all(
     matches.map(match => {
-      if (!match.routeId) {
+      if (match.routeId === undefined || match.routeId === '') {
         return undefined;
       }
 
@@ -230,10 +230,18 @@ async function preloadHydratedRouteComponents(router: AnyRouter) {
 
       return Promise.resolve(preload.call(component)).then(routeModule => {
         const modernRouteId = route?.options?.staticData?.modernRouteId;
+        const cachedRouteModule =
+          typeof modernRouteId === 'string' && modernRouteId !== ''
+            ? getCachedRouteModule(modernRouteId)
+            : undefined;
         const resolvedComponent = pickRouteModuleComponent(
-          (modernRouteId && getCachedRouteModule(modernRouteId)) || routeModule,
+          cachedRouteModule ?? routeModule,
         );
-        if (resolvedComponent && modernRouteId) {
+        if (
+          resolvedComponent !== undefined &&
+          typeof modernRouteId === 'string' &&
+          modernRouteId !== ''
+        ) {
           route.options.component = withModernRouteMatchContext(
             resolvedComponent,
             modernRouteId,
@@ -241,40 +249,39 @@ async function preloadHydratedRouteComponents(router: AnyRouter) {
         }
       });
     }),
-  );
+  ).then(() => undefined);
 }
 
 function getTanstackSsrHydrationRecord(router: AnyRouter) {
-  let hydrationRecord = routerHydrationRecords.get(router);
-  if (!hydrationRecord) {
-    hydrationRecord = {
-      promise: Promise.resolve(),
-      status: 'pending',
-    };
-    routerHydrationRecords.set(router, hydrationRecord);
-    try {
-      hydrationRecord.promise = hydrateTanstackRouter(router)
-        .then(async value => {
-          await preloadHydratedRouteComponents(router);
+  const existingHydrationRecord = routerHydrationRecords.get(router);
+  if (existingHydrationRecord !== undefined) {
+    return existingHydrationRecord;
+  }
+
+  const hydrationRecord: RouterHydrationRecord = {
+    promise: Promise.resolve(),
+    status: 'pending',
+  };
+  routerHydrationRecords.set(router, hydrationRecord);
+  try {
+    hydrationRecord.promise = hydrateTanstackRouter(router)
+      .then(value => preloadHydratedRouteComponents(router).then(() => value))
+      .then(
+        value => {
+          hydrationRecord.status = 'fulfilled';
           return value;
-        })
-        .then(
-          value => {
-            hydrationRecord.status = 'fulfilled';
-            return value;
-          },
-          error => {
-            hydrationRecord.status = 'rejected';
-            hydrationRecord.error = error;
-            throw error;
-          },
-        );
-    } catch (error) {
-      hydrationRecord.status = 'rejected';
-      hydrationRecord.error = error;
-      hydrationRecord.promise = Promise.reject(error);
-      hydrationRecord.promise.catch(() => {});
-    }
+        },
+        error => {
+          hydrationRecord.status = 'rejected';
+          hydrationRecord.error = error;
+          throw error;
+        },
+      );
+  } catch (error) {
+    hydrationRecord.status = 'rejected';
+    hydrationRecord.error = error;
+    hydrationRecord.promise = Promise.reject(error);
+    hydrationRecord.promise.catch(() => {});
   }
   return hydrationRecord;
 }
@@ -466,20 +473,25 @@ export const tanstackRouterPlugin = (
         return cachedRouter;
       };
 
-      api.onBeforeRender(async context => {
+      api.onBeforeRender(context => {
         const mergedConfig = getMergedConfig();
         if (
           typeof window !== 'undefined' &&
-          (window as { _SSR_DATA?: unknown })._SSR_DATA &&
+          (window as { _SSR_DATA?: unknown })._SSR_DATA !== undefined &&
           mergedConfig.unstable_reloadOnURLMismatch
         ) {
           const { ssrContext } = context;
           const currentPathname = normalizePathname(window.location.pathname);
           const initialPathname =
-            ssrContext?.request?.pathname &&
-            normalizePathname(ssrContext.request.pathname);
-
-          if (initialPathname && initialPathname !== currentPathname) {
+            typeof ssrContext?.request?.pathname === 'string'
+              ? normalizePathname(ssrContext.request.pathname)
+              : undefined;
+
+          if (
+            initialPathname !== undefined &&
+            initialPathname !== '' &&
+            initialPathname !== currentPathname
+          ) {
             const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
             console.error(errorMsg);
             window.location.reload();
@@ -497,14 +509,14 @@ export const tanstackRouterPlugin = (
         const hasSSRBootstrap =
           typeof window !== 'undefined' &&
           Boolean((window as WindowWithTanstackSsr).$_TSR);
-        if (hasSSRBootstrap && getRouteObjects().length) {
+        if (hasSSRBootstrap && getRouteObjects().length > 0) {
           const runtimeContext = context as TInternalRuntimeContext;
           const router = getRouter(
             runtimeContext,
             getClientBasename(runtimeContext),
           );
-          if (router) {
-            await getTanstackSsrHydrationPromise(router);
+          if (router !== undefined && router !== null) {
+            return getTanstackSsrHydrationPromise(router).then(() => undefined);
           }
         }
 
@@ -512,7 +524,7 @@ export const tanstackRouterPlugin = (
       });
 
       api.wrapRoot(App => {
-        if (!getRouteObjects().length) {
+        if (getRouteObjects().length === 0) {
           return App;
         }
 
@@ -523,17 +535,16 @@ export const tanstackRouterPlugin = (
 
           const _basename = getClientBasename(runtimeContext);
 
-          const routeTree = useMemo(() => {
-            return getRouteTree();
-          }, []);
+          const routeTree = useMemo(() => getRouteTree(), []);
 
           if (!routeTree) {
             return App ? <App /> : null;
           }
 
-          const router = useMemo(() => {
-            return getRouter(runtimeContext, _basename);
-          }, [_basename, routeTree, runtimeContext]);
+          const router = useMemo(
+            () => getRouter(runtimeContext, _basename),
+            [_basename, routeTree, runtimeContext],
+          );
           if (!router) {
             return App ? <App /> : null;
           }

package/src/runtime/prefetchLink.tsx

@@ -28,7 +28,7 @@ function resolvePreloadFromPrefetch(
     return prefetch;
   }
 
-  return preload;
+  return 'viewport';
 }
 
 export type LinkProps<

package/src/runtime/routeTree.ts

@@ -164,7 +164,7 @@ function wrapRouteComponentWithModernContext(
     route.options.component = withModernRouteMatchContext(
       component,
       routeMatchId,
-    );
+    ) as typeof route.options.component;
   }
 }
 
@@ -974,7 +974,7 @@ export function createRouteTreeFromModernRoutes(
     rootRoute.options.component = withModernRouteMatchContext(
       rootComponent,
       rootRouteId,
-    );
+    ) as typeof rootRoute.options.component;
   }
 
   const topLevel = rootModern
@@ -1056,7 +1056,7 @@ export function createRouteTreeFromRouteObjects(
     rootRoute.options.component = withModernRouteMatchContext(
       rootComponent,
       rootRouteId,
-    );
+    ) as typeof rootRoute.options.component;
   }
 
   const topLevel = rootLikeRoute

package/tests/router/prefetchLink.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Link } from '../../src/runtime/prefetchLink';
+import { Link, NavLink } from '../../src/runtime/prefetchLink';
 
 type MockLinkProps = {
   children?: React.ReactNode;
@@ -21,23 +21,59 @@ describe('tanstack prefetch link adapter', () => {
     capturedPreloads = [];
   });
 
-  it('maps viewport prefetch to TanStack preload', () => {
+  it('defaults TanStack preload to viewport', () => {
+    render(<Link to="/settings">Settings</Link>);
+
+    expect(capturedPreloads).toEqual(['viewport']);
+  });
+
+  it('preserves explicit preload', () => {
     render(
-      <Link to="/settings" prefetch="viewport">
+      <Link to="/settings" prefetch="render" preload="intent">
         Settings
       </Link>,
     );
 
-    expect(capturedPreloads).toEqual(['viewport']);
+    expect(capturedPreloads).toEqual(['intent']);
   });
 
-  it('does not override explicit preload', () => {
+  it('preserves explicit disabled preload', () => {
     render(
-      <Link to="/settings" prefetch="viewport" preload="intent">
+      <Link to="/settings" prefetch="render" preload={false}>
         Settings
       </Link>,
     );
 
-    expect(capturedPreloads).toEqual(['intent']);
+    expect(capturedPreloads).toEqual([false]);
+  });
+
+  it('maps none prefetch to disabled TanStack preload', () => {
+    render(
+      <Link to="/settings" prefetch="none">
+        Settings
+      </Link>,
+    );
+
+    expect(capturedPreloads).toEqual([false]);
+  });
+
+  it.each([
+    'intent',
+    'render',
+    'viewport',
+  ] as const)('maps %s prefetch to TanStack preload', prefetch => {
+    render(
+      <Link to="/settings" prefetch={prefetch}>
+        Settings
+      </Link>,
+    );
+
+    expect(capturedPreloads).toEqual([prefetch]);
+  });
+
+  it('defaults NavLink preload to viewport', () => {
+    render(<NavLink to="/settings">Settings</NavLink>);
+
+    expect(capturedPreloads).toEqual(['viewport']);
   });
 });