@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.3 → 3.5.0-ultramodern.31

package/src/runtime/ssrManagedTags.ts

@@ -0,0 +1,107 @@
+// @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off
+/// <reference path="./ssr-shim.d.ts" />
+
+import type { AnyRouter } from '@tanstack/react-router';
+import type {
+  RouterManagedTag,
+  RouterMatchWithError,
+  TanstackRouterWithServerSsr,
+} from './ssrTypes';
+
+export async function waitForRouterSerialization(
+  tanstackRouter: TanstackRouterWithServerSsr,
+) {
+  const serverSsr = tanstackRouter.serverSsr;
+  if (
+    !serverSsr ||
+    typeof serverSsr.onSerializationFinished !== 'function' ||
+    serverSsr.isSerializationFinished?.()
+  ) {
+    return;
+  }
+
+  await new Promise<void>(resolve => {
+    serverSsr.onSerializationFinished?.(resolve);
+  });
+}
+
+function htmlEscapeAttr(value: string) {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+function routerManagedTagToHtml(tag: unknown): string {
+  if (!tag || typeof tag !== 'object') {
+    return '';
+  }
+
+  const managedTag = tag as RouterManagedTag;
+  if (!managedTag || managedTag.tag !== 'script') {
+    return '';
+  }
+
+  const attrs: Record<string, unknown> = managedTag.attrs || {};
+  const attrsStr = Object.entries(attrs)
+    .filter(([, v]) => v != null && v !== false)
+    .map(([k, v]) => {
+      const name = k === 'className' ? 'class' : k;
+      if (v === true) {
+        return name;
+      }
+      return `${name}="${htmlEscapeAttr(String(v))}"`;
+    })
+    .join(' ');
+
+  const open = attrsStr.length ? `<script ${attrsStr}>` : '<script>';
+  const children =
+    typeof managedTag.children === 'string' ? managedTag.children : '';
+  return `${open}${children}</script>`;
+}
+
+export function routerManagedTagsToHtml(tags: unknown): string[] {
+  const normalizedTags = Array.isArray(tags) ? tags : [tags];
+  return normalizedTags.map(routerManagedTagToHtml).filter(Boolean);
+}
+
+export function createGetSsrHref(request: Request): string {
+  const url = new URL(request.url);
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+export function collectRouterErrors(
+  tanstackRouter: AnyRouter,
+): Record<string, unknown> | undefined {
+  const state = tanstackRouter.state as { matches?: unknown };
+  const matches = Array.isArray(state.matches)
+    ? (state.matches as RouterMatchWithError[])
+    : [];
+  const errors = matches.reduce((acc: Record<string, unknown>, match) => {
+    if (!match.error) {
+      return acc;
+    }
+
+    const routeId =
+      typeof match.routeId === 'string'
+        ? match.routeId
+        : typeof match.route?.id === 'string'
+          ? match.route.id
+          : `match-${Object.keys(acc).length}`;
+
+    acc[routeId] = match.error;
+    return acc;
+  }, {});
+
+  return Object.keys(errors).length > 0 ? errors : undefined;
+}
+
+export async function attachServerSsrUtils(
+  router: TanstackRouterWithServerSsr,
+) {
+  const { attachRouterServerSsrUtils } = await import(
+    '@tanstack/router-core/ssr/server'
+  );
+
+  attachRouterServerSsrUtils({
+    router,
+    manifest: undefined,
+  });
+}

package/src/runtime/ssrPreload.ts

@@ -0,0 +1,125 @@
+// @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
+
+import type {
+  RouterMatchWithError,
+  TanstackRouterWithServerSsr,
+} from './ssrTypes';
+
+type PreloadableRouteComponent = {
+  load?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
+  preload?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
+};
+
+type ReactLazyRouteComponent = {
+  _init?: (payload: unknown) => unknown;
+  _payload?: unknown;
+};
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return Boolean(
+    value && typeof (value as PromiseLike<unknown>).then === 'function',
+  );
+}
+
+function isPreloadableRouteComponent(
+  component: unknown,
+): component is PreloadableRouteComponent {
+  if (!component || typeof component !== 'function') {
+    return false;
+  }
+
+  const preloadable = component as PreloadableRouteComponent;
+  return (
+    typeof preloadable.load === 'function' ||
+    typeof preloadable.preload === 'function'
+  );
+}
+
+function isReactLazyRouteComponent(
+  component: unknown,
+): component is ReactLazyRouteComponent {
+  return (
+    component !== null &&
+    component !== undefined &&
+    typeof component === 'object' &&
+    typeof (component as ReactLazyRouteComponent)._init === 'function' &&
+    '_payload' in component
+  );
+}
+
+async function preloadReactLazyRouteComponent(
+  component: ReactLazyRouteComponent,
+) {
+  try {
+    component._init?.(component._payload);
+  } catch (thrown) {
+    if (!isPromiseLike(thrown)) {
+      throw thrown;
+    }
+    await thrown;
+    component._init?.(component._payload);
+  }
+}
+
+async function preloadRouteComponent(
+  component: unknown,
+  preloadedComponents: Set<unknown>,
+) {
+  if (isReactLazyRouteComponent(component)) {
+    if (preloadedComponents.has(component)) {
+      return;
+    }
+    preloadedComponents.add(component);
+    await preloadReactLazyRouteComponent(component);
+    return;
+  }
+
+  if (!isPreloadableRouteComponent(component)) {
+    return;
+  }
+
+  if (preloadedComponents.has(component)) {
+    return;
+  }
+  preloadedComponents.add(component);
+
+  if (typeof component.load === 'function') {
+    await component.load({});
+    return;
+  }
+
+  await component.preload?.({});
+}
+
+export async function preloadMatchedRouteComponents(
+  tanstackRouter: TanstackRouterWithServerSsr,
+) {
+  const matches = Array.isArray(tanstackRouter.state.matches)
+    ? (tanstackRouter.state.matches as RouterMatchWithError[])
+    : [];
+  const routesById = tanstackRouter.routesById || {};
+  const preloadedComponents = new Set<unknown>();
+
+  await Promise.all(
+    matches.map(async match => {
+      const routeId =
+        typeof match.routeId === 'string'
+          ? match.routeId
+          : typeof match.route?.id === 'string'
+            ? match.route.id
+            : undefined;
+      const route = routeId ? routesById[routeId] : match.route;
+      const options = route?.options;
+      if (!options) {
+        return;
+      }
+
+      await Promise.all([
+        preloadRouteComponent(options.component, preloadedComponents),
+        preloadRouteComponent(options.pendingComponent, preloadedComponents),
+        preloadRouteComponent(options.errorComponent, preloadedComponents),
+        preloadRouteComponent(options.notFoundComponent, preloadedComponents),
+      ]);
+    }),
+  );
+}

package/src/runtime/ssrTypes.ts

@@ -0,0 +1,51 @@
+/// <reference path="./ssr-shim.d.ts" />
+
+import type { RequestContext } from '@modern-js/runtime-utils/node';
+import type { AnyRouter } from '@tanstack/react-router';
+
+export type ModernTanstackRouterContext = {
+  request: Request;
+  requestContext: RequestContext<Record<string, unknown>>;
+};
+
+export type RouterManagedTag = {
+  attrs?: Record<string, unknown>;
+  children?: unknown;
+  tag?: unknown;
+};
+
+export type RouterMatchWithError = {
+  error?: unknown;
+  route?: {
+    id?: unknown;
+    options?: RouterRouteOptions;
+  };
+  routeId?: unknown;
+};
+
+export type RouterRouteOptions = {
+  component?: unknown;
+  errorComponent?: unknown;
+  notFoundComponent?: unknown;
+  pendingComponent?: unknown;
+};
+
+export type RouterRouteWithOptions = {
+  options?: RouterRouteOptions;
+};
+
+export type TanstackRouterWithServerSsr = AnyRouter & {
+  resolveRedirect?: (redirect: Response) => Response;
+  routesById?: Record<string, RouterRouteWithOptions>;
+  serverSsr?: {
+    cleanup?: () => void;
+    dehydrate?: () => Promise<void> | void;
+    isSerializationFinished?: () => boolean;
+    onSerializationFinished?: (listener: () => void) => void;
+    takeBufferedScripts?: () => unknown;
+  };
+  state: AnyRouter['state'] & {
+    matches?: unknown;
+    redirect?: Response;
+  };
+};

package/src/runtime/state.ts

@@ -1,6 +1,8 @@
-import { getRouterRuntimeState } from '@modern-js/runtime/context';
+import {
+  getRouterRuntimeState,
+  type InternalRouterRuntimeState,
+} from '@modern-js/runtime/context';
 import type { AnyRouter } from '@tanstack/react-router';
-import type { InternalRouterRuntimeState } from './types';
 
 /**
  * Router runtime state as published by the TanStack router provider into the

package/src/runtime/submitAction.ts

@@ -0,0 +1,194 @@
+// @effect-diagnostics asyncFunction:off extendsNativeError:off strictBooleanExpressions:off
+import type { AnyRouter } from '@tanstack/react-router';
+import type { SubmitOptions, SubmitTarget } from './formData';
+import {
+  formDataToTextPlain,
+  formDataToUrlSearchParams,
+  toFormData,
+} from './formData';
+
+export class RouteActionResponseError<TData = unknown> extends Error {
+  readonly response: Response;
+  readonly data: TData;
+
+  constructor(response: Response, data: TData) {
+    super(`Route action failed with status ${response.status}`);
+    this.name = 'RouteActionResponseError';
+    this.response = response;
+    this.data = data;
+  }
+}
+
+type RouteAction = (args: {
+  request: Request;
+  params: Record<string, string>;
+  context?: unknown;
+}) => Promise<unknown> | unknown;
+
+type RouteLoader = (args: {
+  request: Request;
+  params: Record<string, string>;
+  context?: unknown;
+}) => Promise<unknown> | unknown;
+
+function resolveRouteHandlers(router: AnyRouter, actionTo: string) {
+  const builtLocation = router.buildLocation({
+    to: actionTo as any,
+  } as any);
+  const href = router.getParsedLocationHref(builtLocation as any);
+  const matchedRoutes = router.getMatchedRoutes(
+    (builtLocation as any).pathname,
+  );
+  const routeStaticData = matchedRoutes.foundRoute?.options?.staticData as
+    | Record<string, unknown>
+    | undefined;
+  const action = routeStaticData?.modernRouteAction as RouteAction | undefined;
+  const loader = routeStaticData?.modernRouteLoader as RouteLoader | undefined;
+
+  return {
+    action,
+    loader,
+    href,
+    params: (matchedRoutes.routeParams || {}) as Record<string, string>,
+  };
+}
+
+function isRedirectResponse(value: unknown): value is Response {
+  if (!(value instanceof Response)) {
+    return false;
+  }
+  return [301, 302, 303, 307, 308].includes(value.status);
+}
+
+async function parseResponseData(response: Response) {
+  if (response.status === 204) {
+    return null;
+  }
+
+  const contentType = response.headers.get('Content-Type') || '';
+  if (contentType.includes('application/json')) {
+    return response.json();
+  }
+  return response.text();
+}
+
+async function parseResponseResultOrThrow(response: Response) {
+  const parsed = await parseResponseData(response);
+  if (!response.ok) {
+    throw new RouteActionResponseError(response, parsed);
+  }
+  return parsed;
+}
+
+export async function submitRouteAction({
+  router,
+  target,
+  options = {},
+  isFetcher = false,
+  onInvalidateStart,
+}: {
+  router: AnyRouter;
+  target: SubmitTarget;
+  options?: SubmitOptions;
+  isFetcher?: boolean;
+  onInvalidateStart?: () => void;
+}) {
+  const method = (options.method || 'post').toLowerCase();
+  const encType = options.encType || 'application/x-www-form-urlencoded';
+  const actionTo = options.action || '.';
+  const formData = toFormData(target);
+  const resolved = resolveRouteHandlers(router, actionTo);
+
+  if (method === 'get') {
+    const search = formDataToUrlSearchParams(formData).toString();
+    const requestUrl = new URL(resolved.href, window.location.origin);
+    requestUrl.search = search;
+
+    if (isFetcher && resolved.loader) {
+      const result = await resolved.loader({
+        request: new Request(requestUrl, {
+          method: 'GET',
+        }),
+        params: resolved.params,
+      });
+
+      if (result instanceof Response) {
+        const redirectTo =
+          result.headers.get('X-Modernjs-Redirect') ||
+          result.headers.get('Location');
+        if (redirectTo || isRedirectResponse(result)) {
+          await router.navigate({
+            to: (redirectTo || '/') as any,
+          } as any);
+          return parseResponseData(result);
+        }
+        return parseResponseResultOrThrow(result);
+      }
+
+      return result;
+    }
+
+    await router.navigate({
+      href: `${requestUrl.pathname}${requestUrl.search}${requestUrl.hash}`,
+    } as any);
+    return;
+  }
+
+  if (!resolved.action) {
+    throw new Error(`No route action found for "${actionTo}"`);
+  }
+
+  const headers = new Headers();
+  let body: BodyInit | null = null;
+  if (encType.includes('application/json')) {
+    headers.set('Content-Type', 'application/json');
+    body = JSON.stringify(
+      Object.fromEntries(formDataToUrlSearchParams(formData).entries()),
+    );
+  } else if (encType.includes('text/plain')) {
+    headers.set('Content-Type', 'text/plain;charset=UTF-8');
+    body = formDataToTextPlain(formData);
+  } else if (encType.includes('application/x-www-form-urlencoded')) {
+    headers.set(
+      'Content-Type',
+      'application/x-www-form-urlencoded;charset=UTF-8',
+    );
+    body = formDataToUrlSearchParams(formData);
+  } else {
+    body = formData;
+  }
+
+  const request = new Request(new URL(resolved.href, window.location.origin), {
+    method: method.toUpperCase(),
+    headers,
+    body,
+  });
+
+  const result = await resolved.action({
+    request,
+    params: resolved.params,
+  });
+
+  if (result instanceof Response) {
+    const redirectTo =
+      result.headers.get('X-Modernjs-Redirect') ||
+      result.headers.get('Location');
+    if (redirectTo || isRedirectResponse(result)) {
+      await router.navigate({
+        to: (redirectTo || '/') as any,
+      } as any);
+      return parseResponseData(result);
+    }
+
+    const parsed = isFetcher
+      ? await parseResponseResultOrThrow(result)
+      : await parseResponseData(result);
+    onInvalidateStart?.();
+    await router.invalidate();
+    return parsed;
+  }
+
+  onInvalidateStart?.();
+  await router.invalidate();
+  return result;
+}

package/src/runtime/types.ts

@@ -1,32 +1,25 @@
-import type {
-  RouterFramework,
-  // The router runtime state types are owned by @modern-js/runtime; they are
-  // imported through the `/context` seam instead of being copied here so
-  // upstream fixes propagate to this package automatically.
-} from '@modern-js/runtime/context';
+import type { ModernRoute, RouterFramework } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type { NestedRoute, PageRoute } from '@modern-js/types';
 import type React from 'react';
 
 export type {
   BuiltInRouterFramework,
   InternalRouterRuntimeState,
   InternalRouterServerSnapshot,
+  LoaderFunction,
+  LoaderFunctionArgs,
+  ModernRoute,
   RouterFramework,
   RouterRouteMatchSnapshot,
   RouterServerPrepareResult,
 } from '@modern-js/runtime/context';
 
-/**
- * TanStack-specific router config. Unlike the react-router provider config,
- * this intentionally has no `oldVersion`/`future` fields — those are
- * react-router-only knobs with no meaning here.
- */
+/** TanStack-specific router config. */
 export type RouterConfig = {
   framework?: RouterFramework;
   routesConfig: {
     globalApp?: React.ComponentType<any>;
-    routes?: (NestedRoute | PageRoute)[];
+    routes?: ModernRoute[];
   };
   serverBase?: string[];
   supportHtml5History?: boolean;