@bleedingdev/modern-js-renderer-solid 0.0.0-stage → 3.9.3-ultramodern.1

package/src/router-binding/Transitioner.tsx

@@ -0,0 +1,172 @@
+import type { AnyRouteMatch } from '@tanstack/router-core';
+import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import type { NavigationRef } from 'solid-js';
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+/**
+ * Solid's observe tier (`OBSERVE` is defined on the dev and observe builds,
+ * undefined in production) attributes what the user waited on to the
+ * navigation that caused it. The rule for every router is the same: wrap the
+ * write whose landing is the destination showing, and pass `at` when the
+ * request predates that write. Here that write is the match publish inside
+ * `startTransition` — the loaders were awaited in router-core before it —
+ * so the ref names the destination route from the expected matches and
+ * dates from the history change that started the load. The pending offer
+ * (`offerPending`, a match with `status: 'pending'`) is not the destination
+ * and is published undeclared; the initial load and a same-location reload
+ * are not navigations.
+ */
+function describeNavigation(
+  router: ReturnType<typeof useRouter>,
+  expected: Array<AnyRouteMatch>,
+  at: number | undefined,
+): NavigationRef | undefined {
+  if (expected.some(match => match.status === 'pending')) return;
+  const to = router.latestLocation;
+  const from = router.stores.resolvedLocation.get();
+  // Nothing shown yet (the initial load), or a reload of what is shown.
+  if (!from || from.href === to.href) return;
+  const leaf = expected[expected.length - 1];
+  const ref: NavigationRef = {
+    kind: 'navigation',
+    name: leaf?.fullPath || to.pathname,
+    to: to.pathname,
+    from: from.pathname,
+  };
+  if (leaf && Object.keys(leaf.params).length) ref.params = leaf.params;
+  if (at !== undefined) ref.at = at;
+  return ref;
+}
+
+function getResolvedLocation(router: ReturnType<typeof useRouter>) {
+  const resolvedLocation = router.stores.resolvedLocation.get();
+  if (
+    resolvedLocation?.href === router.latestLocation.href &&
+    resolvedLocation.state.__TSR_key === router.latestLocation.state.__TSR_key
+  ) {
+    return resolvedLocation;
+  }
+  return;
+}
+
+export function Transitioner() {
+  const router = useRouter();
+
+  type Ack = [
+    expected: Array<AnyRouteMatch>,
+    resolve: (rendered: boolean) => void,
+  ];
+  const acks: Array<Ack> = [];
+  let committed: Array<AnyRouteMatch> | undefined;
+
+  const isCommitted = (expected: Array<AnyRouteMatch>) =>
+    !!committed &&
+    committed.length === expected.length &&
+    expected.every((match, index) => committed![index] === match);
+
+  // When the history changed since the last declared publish: the moment
+  // the user asked, which is where the navigation's wait starts.
+  let requestedAt: number | undefined;
+
+  // Ack when the commit's transition settles (the atomic swap), not when the
+  // flush parks it; superseded or rolled-back commits resolve false.
+  router.startTransition = (fn, expectedMatches) => {
+    if (isServer ?? router.isServer) {
+      fn();
+      return Promise.resolve(true);
+    }
+    return new Promise(resolve => {
+      const ack: Ack = [expectedMatches, resolve];
+      acks.push(ack);
+      let publish = fn;
+      if (Solid.OBSERVE !== undefined) {
+        const ref = describeNavigation(router, expectedMatches, requestedAt);
+        if (ref !== undefined) {
+          requestedAt = undefined;
+          const observe = Solid.OBSERVE;
+          publish = () => observe.attribution.withOrigin(ref, fn);
+        }
+      }
+      Solid.runWithOwner(null, publish);
+      try {
+        Solid.flush();
+      } catch {
+        // Solid auto-flushes when this is called from a reactive context.
+      }
+      // A commit that changed nothing produces no settlement to observe.
+      if (acks.includes(ack) && isCommitted(expectedMatches)) {
+        acks.splice(acks.indexOf(ack), 1);
+        resolve(true);
+      }
+    });
+  };
+
+  // No server early-return here or below: Solid 2 derives hydration keys
+  // from the reactive owner tree, so the server must register the same slots
+  // as the client. The callbacks themselves never run on the server.
+  Solid.createEffect(
+    () => router.stores.matches.get(),
+    current => {
+      committed = current;
+      if (acks.length) {
+        for (const [expected, resolve] of acks.splice(0)) {
+          resolve(isCommitted(expected));
+        }
+      }
+    },
+  );
+
+  Solid.onSettled(() => {
+    const unsub = router.history.subscribe(() => {
+      requestedAt ??= performance.now();
+      queueMicrotask(() => router.load().catch(console.error));
+    });
+
+    // The URL may have changed synchronously between render and settlement.
+    router.updateLatestLocation();
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
+    });
+
+    if (
+      trimPathRight(router.latestLocation.publicHref) !==
+      trimPathRight(nextLocation.publicHref)
+    ) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true,
+        ignoreBlocker: true,
+      });
+      return unsub;
+    }
+
+    if (!getResolvedLocation(router) && !router._tx) {
+      queueMicrotask(() => router.load().catch(console.error));
+    }
+
+    return unsub;
+  });
+
+  return null;
+}
+
+export function Rendered() {
+  const router = useRouter();
+  Solid.onSettled(() => {
+    const resolvedLocation = getResolvedLocation(router);
+    if (resolvedLocation) {
+      router.emit({
+        type: 'onRendered',
+        ...getLocationChangeInfo(resolvedLocation, resolvedLocation),
+      });
+    }
+  });
+  return null;
+}

package/src/router-binding/awaited.tsx

@@ -0,0 +1,71 @@
+import type { JSX } from '@solidjs/web';
+import type { DeferredPromise } from '@tanstack/router-core';
+import { defer, TSR_DEFERRED_PROMISE } from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+import type { SolidNode } from './route';
+
+export type AwaitOptions<T> = {
+  promise: Promise<T>;
+};
+
+/**
+ * Native loader data is frozen, and defer() tags the promise it tracks, so a
+ * frozen promise is tracked through a follower that settles the same way.
+ */
+function track<T>(promise: Promise<T>): DeferredPromise<T> {
+  return defer(Object.isExtensible(promise) ? promise : promise.then(v => v));
+}
+
+export function useAwaited<T>({
+  promise: _promise,
+}: AwaitOptions<T>): [data: T, promise: DeferredPromise<T>] {
+  const promise = track(_promise);
+  const data = Solid.createMemo(async () => await promise);
+
+  return [data(), promise];
+}
+
+function InnerAwait<T>(props: {
+  deferred: DeferredPromise<T>;
+  ready: Solid.Accessor<unknown>;
+  children: (res: T) => SolidNode;
+}) {
+  return (
+    <Solid.Show when={props.ready()}>
+      {_ => {
+        const state = props.deferred[TSR_DEFERRED_PROMISE];
+        if (state.status === 'error') {
+          throw state.error;
+        }
+        return props.children(state.data as T) as any;
+      }}
+    </Solid.Show>
+  );
+}
+
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    fallback?: SolidNode;
+    children: (result: T) => SolidNode;
+  },
+): JSX.Element {
+  const deferred = track(props.promise);
+  const ready = Solid.createMemo(async () => {
+    await deferred;
+    return true;
+  });
+
+  const inner = (
+    <InnerAwait deferred={deferred} ready={ready}>
+      {props.children}
+    </InnerAwait>
+  );
+
+  if (props.fallback === undefined) {
+    return inner;
+  }
+
+  return (
+    <Solid.Loading fallback={props.fallback as any}>{inner}</Solid.Loading>
+  );
+}

package/src/router-binding/fileRoute.ts

@@ -0,0 +1,268 @@
+import type {
+  AnyContext,
+  AnyRoute,
+  AnyRouter,
+  Constrain,
+  ConstrainLiteral,
+  FileBaseRouteOptions,
+  FileRoutesByPath,
+  LazyRouteOptions,
+  Register,
+  RegisteredRouter,
+  ResolveParams,
+  Route,
+  RouteById,
+  RouteConstraints,
+  RouteIds,
+  RouteLoaderEntry,
+  UpdatableRouteOptions,
+  UseNavigateResult,
+} from '@tanstack/router-core';
+import { createRoute } from './route';
+import type { UseLoaderDataRoute } from './useLoaderData';
+import { useLoaderData } from './useLoaderData';
+import type { UseLoaderDepsRoute } from './useLoaderDeps';
+import { useLoaderDeps } from './useLoaderDeps';
+import type { UseMatchRoute } from './useMatch';
+import { useMatch } from './useMatch';
+import { useNavigate } from './useNavigate';
+import type { UseParamsRoute } from './useParams';
+import { useParams } from './useParams';
+import type { UseRouteContextRoute } from './useRouteContext';
+import { useRouteContext } from './useRouteContext';
+import { useRouter } from './useRouter';
+import type { UseSearchRoute } from './useSearch';
+import { useSearch } from './useSearch';
+
+export function createFileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'],
+  TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'],
+  TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'],
+  TFullPath extends
+    RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath'],
+>(
+  _path?: TFilePath,
+): FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>['createRoute'] {
+  return options => {
+    const route = createRoute(options as any);
+    (route as any).isRoot = false;
+    return route as any;
+  };
+}
+
+/** 
+  @deprecated It's no longer recommended to use the `FileRoute` class directly.
+  Instead, use `createFileRoute('/path/to/file')(options)` to create a file route.
+*/
+export class FileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'],
+  TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'],
+  TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'],
+  TFullPath extends
+    RouteConstraints['TFullPath'] = FileRoutesByPath[TFilePath]['fullPath'],
+> {
+  silent?: boolean;
+
+  constructor(
+    public path?: TFilePath,
+    _opts?: { silent: boolean },
+  ) {
+    this.silent = _opts?.silent;
+  }
+
+  createRoute = <
+    TRegister = Register,
+    TSearchValidator = undefined,
+    TParams = ResolveParams<TPath>,
+    TRouteContextFn = AnyContext,
+    TBeforeLoadFn = AnyContext,
+    TLoaderDeps extends Record<string, any> = {},
+    TLoaderFn = undefined,
+    TChildren = unknown,
+    TSSR = unknown,
+    const TMiddlewares = unknown,
+    THandlers = undefined,
+  >(
+    options?: FileBaseRouteOptions<
+      TRegister,
+      TParentRoute,
+      TId,
+      TPath,
+      TSearchValidator,
+      TParams,
+      TLoaderDeps,
+      TLoaderFn,
+      AnyContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      AnyContext,
+      TSSR,
+      TMiddlewares,
+      THandlers
+    > &
+      UpdatableRouteOptions<
+        TParentRoute,
+        TId,
+        TFullPath,
+        TParams,
+        TSearchValidator,
+        TLoaderFn,
+        TLoaderDeps,
+        AnyContext,
+        TRouteContextFn,
+        TBeforeLoadFn
+      >,
+  ): Route<
+    TRegister,
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TFilePath,
+    TId,
+    TSearchValidator,
+    TParams,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    unknown,
+    TSSR,
+    TMiddlewares,
+    THandlers
+  > => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!this.silent) {
+        console.warn(
+          'Warning: FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
+        );
+      }
+    }
+    const route = createRoute(options as any);
+    (route as any).isRoot = false;
+    return route as any;
+  };
+}
+
+/** 
+  @deprecated It's recommended not to split loaders into separate files.
+  Instead, place the loader function in the main route file, inside the
+  `createFileRoute('/path/to/file)(options)` options.
+*/
+export function FileRouteLoader<
+  TFilePath extends keyof FileRoutesByPath,
+  TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+>(
+  _path: TFilePath,
+): <TLoaderFn>(
+  loaderFn: Constrain<
+    TLoaderFn,
+    RouteLoaderEntry<
+      Register,
+      TRoute['parentRoute'],
+      TRoute['types']['id'],
+      TRoute['types']['params'],
+      TRoute['types']['loaderDeps'],
+      TRoute['types']['routerContext'],
+      TRoute['types']['routeContextFn'],
+      TRoute['types']['beforeLoadFn']
+    >
+  >,
+) => TLoaderFn {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      `Warning: FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
+    );
+  }
+  return loaderFn => loaderFn as any;
+}
+
+declare module '@tanstack/router-core' {
+  export interface LazyRoute<in out TRoute extends AnyRoute> {
+    useMatch: UseMatchRoute<TRoute['id']>;
+    useRouteContext: UseRouteContextRoute<TRoute['id']>;
+    useSearch: UseSearchRoute<TRoute['id']>;
+    useParams: UseParamsRoute<TRoute['id']>;
+    useLoaderDeps: UseLoaderDepsRoute<TRoute['id']>;
+    useLoaderData: UseLoaderDataRoute<TRoute['id']>;
+    useNavigate: () => UseNavigateResult<TRoute['fullPath']>;
+  }
+}
+
+export class LazyRoute<TRoute extends AnyRoute> {
+  options: {
+    id: string;
+  } & LazyRouteOptions;
+
+  constructor(
+    opts: {
+      id: string;
+    } & LazyRouteOptions,
+  ) {
+    this.options = opts;
+  }
+
+  useMatch: UseMatchRoute<TRoute['id']> = opts => {
+    return useMatch({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any;
+  };
+
+  useRouteContext: UseRouteContextRoute<TRoute['id']> = opts => {
+    return useRouteContext({ ...(opts as any), from: this.options.id });
+  };
+
+  useSearch: UseSearchRoute<TRoute['id']> = opts => {
+    return useSearch({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any;
+  };
+
+  useParams: UseParamsRoute<TRoute['id']> = opts => {
+    return useParams({
+      select: opts?.select,
+      from: this.options.id,
+    } as any) as any;
+  };
+
+  useLoaderDeps: UseLoaderDepsRoute<TRoute['id']> = opts => {
+    return useLoaderDeps({ ...opts, from: this.options.id } as any);
+  };
+
+  useLoaderData: UseLoaderDataRoute<TRoute['id']> = opts => {
+    return useLoaderData({ ...opts, from: this.options.id } as any);
+  };
+
+  useNavigate = (): UseNavigateResult<TRoute['fullPath']> => {
+    const router = useRouter();
+    return useNavigate({ from: router.routesById[this.options.id].fullPath });
+  };
+}
+
+export function createLazyRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TId extends string = string,
+  TRoute extends AnyRoute = RouteById<TRouter['routeTree'], TId>,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
+  return (opts: LazyRouteOptions) => {
+    return new LazyRoute<TRoute>({
+      id: id,
+      ...opts,
+    });
+  };
+}
+export function createLazyFileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+>(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute> {
+  if (typeof id === 'object') {
+    return new LazyRoute<TRoute>(id) as any;
+  }
+
+  return (opts: LazyRouteOptions) => new LazyRoute<TRoute>({ id, ...opts });
+}

package/src/router-binding/flightData.ts

@@ -0,0 +1,90 @@
+import { REVALIDATE_HEADER } from '@solidjs/web';
+import {
+  decodeRedirectHeaderValue,
+  REDIRECT_HEADER,
+  subscribeFlightData,
+} from '@solidjs/web/server-functions';
+import type { AnyRouter } from '@tanstack/router-core';
+
+/**
+ * Registers the router as the unnamed single-flight consumer of Solid's
+ * server-function transport, so the response helpers a mutation returns —
+ * `redirect()`, `reload()`, `respond(value, { revalidate })` — take effect
+ * on the client without the caller wrapping the call: the transport hands
+ * the caller the plain value and the router applies the metadata. Called
+ * by `RouterContextProvider` on the client; returns the unsubscribe.
+ *
+ * Subscribing is also the single-flight opt-in: while registered, the
+ * transport tags mutation calls so the server can fold fresh data for
+ * registered collectors into the same response. The router claims no
+ * slice of that data itself — route data is reloaded through `invalidate`
+ * below, and caches that want seeding (a query client) subscribe under
+ * their own source id.
+ */
+export function setupFlightDataConsumer(router: AnyRouter): () => void {
+  return subscribeFlightData((_data, { response }) =>
+    applyResponseMetadata(router, response),
+  );
+}
+
+/**
+ * Applies a server-function response's integration metadata to the
+ * router. A mutation is a write, so a response carrying metadata reloads
+ * the route data the page is built on: committed and cached matches are
+ * invalidated the way `router.invalidate()` does after a mutation.
+ *
+ * `X-Revalidate` names entries in caches the router does not own, so the
+ * keys themselves are left to those caches' consumers; the router reads
+ * only the declaration's shape. Absent (a bare `redirect()`/`reload()`),
+ * named keys, or the reserved `*` all say a write happened — route data
+ * reloads. An EMPTY declaration (`revalidate: []`) is the author narrowing
+ * the scope to nothing, and the router honors that too: a redirect still
+ * navigates, but nothing is reloaded on the way.
+ *
+ * The redirect carrier delivers the target RESOLVED to an absolute url, so
+ * the soft/hard split is a real origin comparison: a same-origin target
+ * navigates under the router (`replace`, matching what HTTP gives a form
+ * post — the destination takes the submission's place in history), and any
+ * other origin leaves the app through a document navigation.
+ */
+export function applyResponseMetadata(
+  router: AnyRouter,
+  response: Response,
+): void {
+  const carried = decodeRedirectHeaderValue(
+    response.headers.get(REDIRECT_HEADER),
+  );
+  const declared = response.headers.get(REVALIDATE_HEADER);
+  if (!carried && declared === null) return;
+  const reload = declared === null || declared.split(',').some(Boolean);
+
+  const target = carried ? new URL(carried.url) : undefined;
+  const origin = router.options.origin ?? window.location.origin;
+  if (target && target.origin !== origin) {
+    // A full url makes `navigate` reload the document (through the
+    // router, so protocol allowlisting and blockers still apply).
+    router.navigate({ href: target.href, replace: true });
+    return;
+  }
+
+  // Navigate, then invalidate — in this order so the write costs one load.
+  // `navigate` commits the destination to history synchronously (the
+  // adapter's own load follows in a microtask); `invalidate` then marks the
+  // committed matches — the layouts the destination shares with the page
+  // the mutation ran on, whose data is what just changed — and starts a
+  // load that already reads the destination as the latest location. The
+  // adapter's load adopts the loader generations that load started for
+  // the same match ids rather than restarting them, so the destination
+  // commits with the layouts reloaded, and the page being left never has
+  // its own loaders rerun. The other order would reload the abandoned
+  // page first.
+  if (target) {
+    router
+      .navigate({
+        href: target.pathname + target.search + target.hash,
+        replace: true,
+      })
+      .catch(console.error);
+  }
+  if (reload) router.invalidate().catch(console.error);
+}