@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

package/src/runtime/clientHydration.ts

@@ -0,0 +1,149 @@
+// @effect-diagnostics strictBooleanExpressions:off
+
+import { type AnyRouter, RouterProvider } from '@tanstack/react-router';
+import { createElement } from 'react';
+import { withModernRouteMatchContext } from './outlet';
+import { pickRouteModuleComponent } from './routeTree';
+
+export type WindowWithTanstackSsr = Window & {
+  $_TSR?: unknown;
+};
+
+type RouteComponentPreloadable = {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
+type RouterWithPreloadableRoutes = AnyRouter & {
+  routesById?: Record<
+    string,
+    {
+      options?: {
+        component?: unknown;
+        staticData?: {
+          modernRouteId?: string;
+        };
+      };
+    }
+  >;
+};
+
+type RouterHydrationRecord = {
+  error?: unknown;
+  promise: Promise<unknown>;
+  status: 'pending' | 'fulfilled' | 'rejected';
+};
+
+const routerHydrationRecords = new WeakMap<AnyRouter, RouterHydrationRecord>();
+const routeModulesKey = '_routeModules';
+
+function getCachedRouteModule(routeId: string) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  return (window as unknown as Record<string, Record<string, unknown>>)[
+    routeModulesKey
+  ]?.[routeId];
+}
+
+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;
+  }>;
+
+  return Promise.all(
+    matches.map(match => {
+      if (match.routeId === undefined || match.routeId === '') {
+        return undefined;
+      }
+      const route = routesById[match.routeId];
+      const component = route?.options?.component as RouteComponentPreloadable;
+      const preload = component?.load || component?.preload;
+      if (typeof preload !== 'function') {
+        return undefined;
+      }
+      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(
+          cachedRouteModule ?? routeModule,
+        );
+        if (
+          resolvedComponent !== undefined &&
+          typeof modernRouteId === 'string' &&
+          modernRouteId !== ''
+        ) {
+          route.options.component = withModernRouteMatchContext(
+            resolvedComponent,
+            modernRouteId,
+          );
+        }
+      });
+    }),
+  ).then(() => undefined);
+}
+
+export function hydrateTanstackRouter(router: AnyRouter) {
+  return import('@tanstack/react-router/ssr/client').then(({ hydrate }) =>
+    hydrate(router),
+  );
+}
+
+function getTanstackSsrHydrationRecord(router: AnyRouter) {
+  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;
+        },
+        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;
+}
+
+export function getTanstackSsrHydrationPromise(router: AnyRouter) {
+  return getTanstackSsrHydrationRecord(router).promise;
+}
+
+export function hasTanstackSsrHydrationRecord(router: AnyRouter) {
+  return routerHydrationRecords.has(router);
+}
+
+export function ModernRouterClient({ router }: { router: AnyRouter }) {
+  const hydrationRecord = getTanstackSsrHydrationRecord(router);
+  if (hydrationRecord.status === 'pending') {
+    throw hydrationRecord.promise;
+  }
+  if (hydrationRecord.status === 'rejected') {
+    throw hydrationRecord.error;
+  }
+  return createElement(RouterProvider, { router });
+}

package/src/runtime/dataMutation.tsx

@@ -1,317 +1,20 @@
 // @effect-diagnostics asyncFunction:off extendsNativeError:off strictBooleanExpressions:off
-import type { AnyRouter } from '@tanstack/react-router';
 import { useRouter } from '@tanstack/react-router';
 import type React from 'react';
 import { useCallback, useRef, useState } from 'react';
+import type { SubmitOptions, SubmitTarget } from './formData';
+import {
+  createFormDataFromSubmit,
+  getSubmitter,
+  resolveSubmitOptionsFromForm,
+} from './formData';
+import { submitRouteAction } from './submitAction';
 
-type SubmitTarget =
-  | HTMLFormElement
-  | FormData
-  | URLSearchParams
-  | Record<string, string | number | boolean | null | undefined>;
-type SubmitterElement = HTMLButtonElement | HTMLInputElement;
-
-export type SubmitOptions = {
-  action?: string;
-  method?: string;
-  encType?: string;
-};
+export type { SubmitOptions } from './formData';
+export { RouteActionResponseError } from './submitAction';
 
 export type FetcherState = 'idle' | 'submitting' | 'loading';
 
-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 formDataToUrlSearchParams(formData: FormData) {
-  const searchParams = new URLSearchParams();
-  formData.forEach((value, key) => {
-    if (typeof value === 'string') {
-      searchParams.append(key, value);
-    }
-  });
-  return searchParams;
-}
-
-function formDataToTextPlain(formData: FormData) {
-  return Array.from(formData.entries())
-    .map(([key, value]) => `${key}=${String(value)}`)
-    .join('\n');
-}
-
-function toFormData(target: SubmitTarget): FormData {
-  if (target instanceof HTMLFormElement) {
-    return new FormData(target);
-  }
-
-  if (target instanceof FormData) {
-    return target;
-  }
-
-  if (target instanceof URLSearchParams) {
-    const formData = new FormData();
-    target.forEach((value, key) => {
-      formData.append(key, value);
-    });
-    return formData;
-  }
-
-  const formData = new FormData();
-  Object.entries(target).forEach(([key, value]) => {
-    if (typeof value === 'undefined' || value === null) {
-      return;
-    }
-    formData.append(key, String(value));
-  });
-  return formData;
-}
-
-function getSubmitter(event: React.FormEvent<HTMLFormElement>) {
-  const nativeEvent = event.nativeEvent as SubmitEvent | undefined;
-  const submitter = nativeEvent?.submitter;
-  if (
-    submitter instanceof HTMLButtonElement ||
-    submitter instanceof HTMLInputElement
-  ) {
-    return submitter;
-  }
-  return null;
-}
-
-function createFormDataFromSubmit({
-  form,
-  submitter,
-}: {
-  form: HTMLFormElement;
-  submitter: SubmitterElement | null;
-}) {
-  if (submitter) {
-    try {
-      return new FormData(form, submitter);
-    } catch {}
-  }
-  return new FormData(form);
-}
-
-function resolveSubmitOptionsFromForm({
-  form,
-  submitter,
-  action,
-  method,
-  encType,
-}: {
-  form: HTMLFormElement;
-  submitter: SubmitterElement | null;
-  action?: string;
-  method?: string;
-  encType?: string;
-}): Required<SubmitOptions> {
-  const resolvedAction =
-    submitter?.getAttribute('formaction') ||
-    action ||
-    form.getAttribute('action') ||
-    '.';
-  const resolvedMethod = (
-    submitter?.getAttribute('formmethod') ||
-    method ||
-    form.getAttribute('method') ||
-    'get'
-  ).toLowerCase();
-  const resolvedEncType =
-    submitter?.getAttribute('formenctype') ||
-    encType ||
-    form.getAttribute('enctype') ||
-    'application/x-www-form-urlencoded';
-
-  return {
-    action: resolvedAction,
-    method: resolvedMethod,
-    encType: resolvedEncType,
-  };
-}
-
-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;
-}
-
-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: search ? `${resolved.href}?${search}` : resolved.href,
-    } 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;
-}
-
 export type FormProps = Omit<
   React.FormHTMLAttributes<HTMLFormElement>,
   'onSubmit' | 'action'

package/src/runtime/formData.ts

@@ -0,0 +1,153 @@
+// @effect-diagnostics asyncFunction:off extendsNativeError:off strictBooleanExpressions:off
+import type React from 'react';
+
+export type SubmitTarget =
+  | HTMLFormElement
+  | FormData
+  | URLSearchParams
+  | Record<string, string | number | boolean | null | undefined>;
+type SubmitterElement = HTMLButtonElement | HTMLInputElement;
+
+export type SubmitOptions = {
+  action?: string;
+  method?: string;
+  encType?: string;
+};
+
+export function formDataToUrlSearchParams(formData: FormData) {
+  const searchParams = new URLSearchParams();
+  formData.forEach((value, key) => {
+    if (typeof value === 'string') {
+      searchParams.append(key, value);
+    }
+  });
+  return searchParams;
+}
+
+export function formDataToTextPlain(formData: FormData) {
+  return Array.from(formData.entries())
+    .map(([key, value]) => `${key}=${String(value)}`)
+    .join('\n');
+}
+
+export function toFormData(target: SubmitTarget): FormData {
+  if (target instanceof HTMLFormElement) {
+    return new FormData(target);
+  }
+
+  if (target instanceof FormData) {
+    return target;
+  }
+
+  if (target instanceof URLSearchParams) {
+    const formData = new FormData();
+    target.forEach((value, key) => {
+      formData.append(key, value);
+    });
+    return formData;
+  }
+
+  const formData = new FormData();
+  Object.entries(target).forEach(([key, value]) => {
+    if (typeof value === 'undefined' || value === null) {
+      return;
+    }
+    formData.append(key, String(value));
+  });
+  return formData;
+}
+
+export function getSubmitter(event: React.FormEvent<HTMLFormElement>) {
+  const nativeEvent = event.nativeEvent as SubmitEvent | undefined;
+  const submitter = nativeEvent?.submitter;
+  if (
+    submitter instanceof HTMLButtonElement ||
+    submitter instanceof HTMLInputElement
+  ) {
+    return submitter;
+  }
+  return null;
+}
+
+function appendSubmitterValue(
+  formData: FormData,
+  form: HTMLFormElement,
+  submitter: SubmitterElement,
+) {
+  if (submitter.form !== form || submitter.disabled) {
+    return;
+  }
+
+  if (submitter instanceof HTMLInputElement && submitter.type === 'image') {
+    const namePrefix = submitter.name ? `${submitter.name}.` : '';
+    formData.append(`${namePrefix}x`, '0');
+    formData.append(`${namePrefix}y`, '0');
+    return;
+  }
+
+  if (
+    !submitter.name ||
+    submitter.type === 'button' ||
+    submitter.type === 'reset'
+  ) {
+    return;
+  }
+
+  formData.append(submitter.name, submitter.value);
+}
+
+export function createFormDataFromSubmit({
+  form,
+  submitter,
+}: {
+  form: HTMLFormElement;
+  submitter: SubmitterElement | null;
+}) {
+  if (submitter) {
+    try {
+      return new FormData(form, submitter);
+    } catch {}
+  }
+  const formData = new FormData(form);
+  if (submitter) {
+    appendSubmitterValue(formData, form, submitter);
+  }
+  return formData;
+}
+
+export function resolveSubmitOptionsFromForm({
+  form,
+  submitter,
+  action,
+  method,
+  encType,
+}: {
+  form: HTMLFormElement;
+  submitter: SubmitterElement | null;
+  action?: string;
+  method?: string;
+  encType?: string;
+}): Required<SubmitOptions> {
+  const resolvedAction =
+    submitter?.getAttribute('formaction') ||
+    action ||
+    form.getAttribute('action') ||
+    '.';
+  const resolvedMethod = (
+    submitter?.getAttribute('formmethod') ||
+    method ||
+    form.getAttribute('method') ||
+    'get'
+  ).toLowerCase();
+  const resolvedEncType =
+    submitter?.getAttribute('formenctype') ||
+    encType ||
+    form.getAttribute('enctype') ||
+    'application/x-www-form-urlencoded';
+
+  return {
+    action: resolvedAction,
+    method: resolvedMethod,
+    encType: resolvedEncType,
+  };
+}

package/src/runtime/loaderBridge.ts

@@ -9,6 +9,9 @@
  * helpers for the same reason.
  */
 import { notFound, redirect } from '@tanstack/react-router';
+import { isAbsoluteUrl } from './shared/isAbsoluteUrl';
+
+export { isAbsoluteUrl };
 
 /** Router context shape used by the generated TanStack router types. */
 export type ModernRouterContext = {
@@ -44,15 +47,6 @@ export function isTanstackRedirect(value: unknown): boolean {
   );
 }
 
-export function isAbsoluteUrl(value: string): boolean {
-  try {
-    void new URL(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 /**
  * Re-throw a Modern.js `Location` redirect as a TanStack redirect.
  *
@@ -232,9 +226,14 @@ export function modernLoaderToTanstack<TLoader extends (args: any) => any>(
       const href = getLoaderHref(ctx);
 
       const request =
-        baseRequest !== undefined
-          ? new Request(baseRequest, { signal })
-          : new Request(href, { signal });
+        baseRequest !== undefined && href !== ''
+          ? new Request(new URL(href, baseRequest.url).href, {
+              headers: baseRequest.headers,
+              signal,
+            })
+          : baseRequest !== undefined
+            ? new Request(baseRequest, { signal })
+            : new Request(href, { signal });
 
       const params = mapSplatParamsForModernLoader(
         getLoaderParams(ctx),