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

package/src/router-binding/router.ts

@@ -0,0 +1,121 @@
+import type { JSX } from '@solidjs/web';
+import type { RouterHistory } from '@tanstack/history';
+import type {
+  AnyRoute,
+  CreateRouterFn,
+  RouterConstructorOptions,
+  TrailingSlashOption,
+} from '@tanstack/router-core';
+import { RouterCore } from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import {
+  installPublicContextPublication,
+  primeRouterFromRegistry,
+} from './registryTransfer';
+import type {
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  RouteComponent,
+} from './route';
+import { getStoreFactory } from './routerStores';
+
+declare module '@tanstack/router-core' {
+  export interface RouterOptionsExtensions {
+    /**
+     * The default `component` a route should use if no component is provided.
+     *
+     * @default Outlet
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultcomponent-property)
+     */
+    defaultComponent?: RouteComponent;
+    /**
+     * The default `errorComponent` a route should use if no error component is provided.
+     *
+     * @default ErrorComponent
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaulterrorcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#handling-errors-with-routeoptionserrorcomponent)
+     */
+    defaultErrorComponent?: ErrorRouteComponent;
+    /**
+     * The default `pendingComponent` a route should use if no pending component is provided.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultpendingcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#showing-a-pending-component)
+     */
+    defaultPendingComponent?: RouteComponent;
+    /**
+     * The default `notFoundComponent` a route should use if no notFound component is provided.
+     *
+     * @default NotFound
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#defaultnotfoundcomponent-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/solid/guide/not-found-errors#default-router-wide-not-found-handling)
+     */
+    defaultNotFoundComponent?: NotFoundRouteComponent;
+    /**
+     * A component that will be used to wrap the entire router.
+     *
+     * This is useful for providing a context to the entire router.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#wrap-property)
+     */
+    Wrap?: (props: { children: any }) => JSX.Element;
+    /**
+     * A component that will be used to wrap the inner contents of the router.
+     *
+     * This is useful for providing a context to the inner contents of the router where you also need access to the router context and hooks.
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/solid/api/router/RouterOptionsType#innerwrap-property)
+     */
+    InnerWrap?: (props: { children: any }) => JSX.Element;
+
+    /**
+     * The default `onCatch` handler for errors caught by the Router ErrorBoundary
+     *
+     * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultoncatch-property)
+     * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#handling-errors-with-routeoptionsoncatch)
+     */
+    defaultOnCatch?: (error: Error) => void;
+  }
+}
+
+export const createRouter: CreateRouterFn = options => {
+  return new Router(options);
+};
+
+export class Router<
+  in out TRouteTree extends AnyRoute,
+  in out TTrailingSlashOption extends TrailingSlashOption = 'never',
+  in out TDefaultStructuralSharingOption extends boolean = false,
+  in out TRouterHistory extends RouterHistory = RouterHistory,
+  in out TDehydrated extends Record<string, any> = Record<string, any>,
+> extends RouterCore<
+  TRouteTree,
+  TTrailingSlashOption,
+  TDefaultStructuralSharingOption,
+  TRouterHistory,
+  TDehydrated
+> {
+  constructor(
+    options: RouterConstructorOptions<
+      TRouteTree,
+      TTrailingSlashOption,
+      TDefaultStructuralSharingOption,
+      TRouterHistory,
+      TDehydrated
+    >,
+  ) {
+    super(options, getStoreFactory);
+    installPublicContextPublication(this);
+    // The hydration-claiming boot (see registryTransfer). Router creation is
+    // the client's natural pre-render moment: module code runs after the
+    // document — and the registry entries the server's RouterProvider wrote —
+    // have parsed, and always before hydrate(). Committing here keeps every
+    // store write outside the hydration render, where it would desync the
+    // claiming walk. Inert without entries: an SPA page has no registry, and
+    // a Start app transfers through its own channel (`router.serverSsr`),
+    // so the first missing entry falls through to unchanged behavior.
+    if (!(isServer ?? this.isServer)) {
+      primeRouterFromRegistry(this);
+    }
+  }
+}

package/src/router-binding/routerContext.tsx

@@ -0,0 +1,6 @@
+import type { AnyRouter } from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+
+export const routerContext = Solid.createContext<AnyRouter>(
+  null as unknown as AnyRouter,
+);

package/src/router-binding/routerStores.ts

@@ -0,0 +1,85 @@
+import type {
+  GetStoreConfig,
+  RouterReadableStore,
+  RouterWritableStore,
+} from '@tanstack/router-core';
+import {
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore,
+} from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import * as Solid from 'solid-js';
+
+export const getStoreFactory: GetStoreConfig = opts => {
+  if (isServer ?? opts.isServer) {
+    return {
+      createMutableStore: createNonReactiveMutableStore,
+      createReadonlyStore: createNonReactiveReadonlyStore,
+      batch: fn => fn(),
+    };
+  }
+
+  // router-core writes stores and re-reads them synchronously mid-pipeline,
+  // but Solid 2 defers signal commits to its scheduler. Rather than forcing a
+  // full synchronous flush after every core batch (which runs all effects,
+  // including renders, several times per navigation), each store keeps a
+  // synchronous shadow of its eventual settled value and serves it until the
+  // scheduler catches up. The reactive graph settles on its own schedule; the
+  // one explicit flush per navigation is the settle point in `startTransition`.
+  let writeEpoch = 0;
+
+  function createSolidMutableStore<TValue>(
+    initialValue: TValue,
+  ): RouterWritableStore<TValue> {
+    const [signal, setSignal] = Solid.createSignal(initialValue as any);
+    let current = initialValue;
+    let dirty = false;
+
+    return {
+      get: () => {
+        const settled = signal();
+        // `current` is always the post-flush value, so once the signal
+        // catches up the shadow can retire until the next write.
+        if (dirty && settled === current) dirty = false;
+        return dirty ? current : settled;
+      },
+      set: (next: TValue | ((prev: TValue) => TValue)) => {
+        current =
+          typeof next === 'function'
+            ? (next as (prev: TValue) => TValue)(current)
+            : next;
+        dirty = true;
+        writeEpoch++;
+        setSignal(() => current);
+      },
+    };
+  }
+
+  function createSolidReadonlyStore<TValue>(
+    read: () => TValue,
+  ): RouterReadableStore<TValue> {
+    const memo = Solid.createRoot(() => Solid.createMemo(read));
+    let cache: TValue;
+    let cachedAt = -1;
+
+    return {
+      get: () => {
+        // The memo carries reactive subscriptions; the served value comes
+        // from the epoch cache so it is fresh before the scheduler settles
+        // and identity-stable across flushes that change nothing.
+        memo();
+        if (cachedAt !== writeEpoch) {
+          cache = Solid.untrack(read);
+          cachedAt = writeEpoch;
+        }
+        return cache;
+      },
+    };
+  }
+
+  return {
+    createMutableStore: createSolidMutableStore,
+    createReadonlyStore: createSolidReadonlyStore,
+    batch: fn => fn(),
+  };
+};

package/src/router-binding/scroll-restoration.tsx

@@ -0,0 +1,15 @@
+import type { JSX } from '@solidjs/web';
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
+import { ScriptOnce } from './ScriptOnce';
+import { useRouter } from './useRouter';
+
+export function ScrollRestoration(): JSX.Element {
+  const router = useRouter();
+  const script = getScrollRestorationScriptForRouter(router);
+
+  if (!script) {
+    return null;
+  }
+
+  return <ScriptOnce children={script} />;
+}

package/src/router-binding/typePrimitives.ts

@@ -0,0 +1,74 @@
+import type {
+  AnyRouter,
+  Constrain,
+  InferFrom,
+  InferMaskFrom,
+  InferMaskTo,
+  InferSelected,
+  InferShouldThrow,
+  InferStrict,
+  InferTo,
+  RegisteredRouter,
+} from '@tanstack/router-core';
+import type { LinkComponentProps } from './link';
+import type { UseParamsOptions } from './useParams';
+import type { UseSearchOptions } from './useSearch';
+
+export type ValidateLinkOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions = unknown,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = Constrain<
+  TOptions,
+  LinkComponentProps<
+    TComp,
+    TRouter,
+    InferFrom<TOptions, TDefaultFrom>,
+    InferTo<TOptions>,
+    InferMaskFrom<TOptions>,
+    InferMaskTo<TOptions>
+  >
+>;
+
+export type ValidateLinkOptionsArray<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions extends ReadonlyArray<any> = ReadonlyArray<unknown>,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = {
+  [K in keyof TOptions]: ValidateLinkOptions<
+    TRouter,
+    TOptions[K],
+    TDefaultFrom,
+    TComp
+  >;
+};
+
+export type ValidateUseSearchOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseSearchOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>
+  >
+>;
+
+export type ValidateUseParamsOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseParamsOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>
+  >
+>;

package/src/router-binding/useBlocker.tsx

@@ -0,0 +1,359 @@
+import type {
+  BlockerFnArgs,
+  HistoryAction,
+  HistoryLocation,
+} from '@tanstack/history';
+import type {
+  AnyRoute,
+  AnyRouter,
+  ParseRoute,
+  RegisteredRouter,
+} from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+import type { SolidNode } from './route';
+import { useRouter } from './useRouter';
+
+type ShouldBlockFnLocation<
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+> = {
+  routeId: TRouteId;
+  fullPath: TFullPath;
+  pathname: string;
+  params: TAllParams;
+  search: TFullSearchSchema;
+};
+
+type AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>;
+type MakeShouldBlockFnLocationUnion<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,
+> = TRoute extends any
+  ? ShouldBlockFnLocation<
+      TRoute['id'],
+      TRoute['fullPath'],
+      TRoute['types']['allParams'],
+      TRoute['types']['fullSearchSchema']
+    >
+  : never;
+
+type BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =
+  | {
+      status: 'blocked';
+      current: MakeShouldBlockFnLocationUnion<TRouter>;
+      next: MakeShouldBlockFnLocationUnion<TRouter>;
+      action: HistoryAction;
+      proceed: () => void;
+      reset: () => void;
+    }
+  | {
+      status: 'idle';
+      current: undefined;
+      next: undefined;
+      action: undefined;
+      proceed: undefined;
+      reset: undefined;
+    };
+
+type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
+  current: MakeShouldBlockFnLocationUnion<TRouter>;
+  next: MakeShouldBlockFnLocationUnion<TRouter>;
+  action: HistoryAction;
+};
+
+export type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (
+  args: ShouldBlockFnArgs<TRouter>,
+) => boolean | Promise<boolean>;
+export type UseBlockerOpts<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+> = {
+  shouldBlockFn: ShouldBlockFn<TRouter>;
+  enableBeforeUnload?: boolean | (() => boolean);
+  disabled?: boolean;
+  withResolver?: TWithResolver;
+};
+
+type LegacyBlockerFn = () => Promise<any> | any;
+type LegacyBlockerOpts = {
+  blockerFn?: LegacyBlockerFn;
+  condition?: boolean | any;
+};
+
+function _resolveBlockerOpts(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): UseBlockerOpts {
+  if (opts === undefined) {
+    return {
+      shouldBlockFn: () => true,
+      withResolver: false,
+    };
+  }
+
+  if ('shouldBlockFn' in opts) {
+    return opts;
+  }
+
+  if (typeof opts === 'function') {
+    const shouldBlock = Boolean(condition ?? true);
+
+    const _customBlockerFn = async () => {
+      if (shouldBlock) return await opts();
+      return false;
+    };
+
+    return {
+      shouldBlockFn: _customBlockerFn,
+      enableBeforeUnload: shouldBlock,
+      withResolver: false,
+    };
+  }
+
+  const shouldBlock = Solid.createMemo(() => Boolean(opts.condition ?? true));
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock() && opts.blockerFn !== undefined) {
+      return await opts.blockerFn();
+    }
+    return shouldBlock();
+  };
+
+  return {
+    get shouldBlockFn() {
+      return _customBlockerFn;
+    },
+    get enableBeforeUnload() {
+      return shouldBlock();
+    },
+    get withResolver() {
+      return opts.blockerFn === undefined;
+    },
+  };
+}
+
+export function useBlocker<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = false,
+>(
+  opts: UseBlockerOpts<TRouter, TWithResolver>,
+): TWithResolver extends true ? Solid.Accessor<BlockerResolver<TRouter>> : void;
+
+/**
+ * @deprecated Use the shouldBlockFn property instead
+ */
+export function useBlocker(
+  blockerFnOrOpts?: LegacyBlockerOpts,
+): Solid.Accessor<BlockerResolver>;
+
+/**
+ * @deprecated Use the UseBlockerOpts object syntax instead
+ */
+export function useBlocker(
+  blockerFn?: LegacyBlockerFn,
+  condition?: boolean | any,
+): Solid.Accessor<BlockerResolver>;
+
+export function useBlocker(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): Solid.Accessor<BlockerResolver> | void {
+  const props = Solid.merge(
+    {
+      enableBeforeUnload: true,
+      disabled: false,
+      withResolver: false,
+    },
+    _resolveBlockerOpts(opts, condition),
+  );
+
+  const router = useRouter();
+
+  const [resolver, setResolver] = Solid.createSignal<BlockerResolver>({
+    status: 'idle',
+    current: undefined,
+    next: undefined,
+    action: undefined,
+    proceed: undefined,
+    reset: undefined,
+  });
+
+  let disposeBlock: (() => void) | undefined;
+
+  Solid.createEffect(
+    () => props.disabled,
+    disabled => {
+      // Dispose previous blocker registration when re-running
+      disposeBlock?.();
+      disposeBlock = undefined;
+
+      if (disabled) {
+        return;
+      }
+
+      const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+        function getLocation(
+          location: HistoryLocation,
+        ): AnyShouldBlockFnLocation {
+          const parsedLocation = router.parseLocation(location);
+          const [, rawParams, foundRoute] = router.getMatchedRoutes(
+            parsedLocation.pathname,
+          );
+          if (foundRoute === undefined) {
+            return {
+              routeId: '__notFound__',
+              fullPath: parsedLocation.pathname,
+              pathname: parsedLocation.pathname,
+              params: rawParams,
+              search: parsedLocation.search,
+            };
+          }
+          return {
+            routeId: foundRoute.id,
+            fullPath: foundRoute.fullPath,
+            pathname: parsedLocation.pathname,
+            params: rawParams,
+            search: parsedLocation.search,
+          };
+        }
+
+        const current = getLocation(blockerFnArgs.currentLocation);
+        const next = getLocation(blockerFnArgs.nextLocation);
+
+        if (
+          current.routeId === '__notFound__' &&
+          next.routeId !== '__notFound__'
+        ) {
+          return false;
+        }
+
+        const shouldBlock = await props.shouldBlockFn({
+          action: blockerFnArgs.action,
+          current,
+          next,
+        });
+        if (!props.withResolver) {
+          return shouldBlock;
+        }
+
+        if (!shouldBlock) {
+          return false;
+        }
+
+        const promise = new Promise<boolean>(resolve => {
+          setResolver({
+            status: 'blocked',
+            current,
+            next,
+            action: blockerFnArgs.action,
+            proceed: () => resolve(false),
+            reset: () => resolve(true),
+          });
+        });
+
+        const canNavigateAsync = await promise;
+        setResolver({
+          status: 'idle',
+          current: undefined,
+          next: undefined,
+          action: undefined,
+          proceed: undefined,
+          reset: undefined,
+        });
+
+        return canNavigateAsync;
+      };
+
+      disposeBlock = router.history.block({
+        blockerFn: blockerFnComposed,
+        enableBeforeUnload: props.enableBeforeUnload,
+      });
+    },
+  );
+
+  // Clean up on unmount
+  Solid.onSettled(() => {
+    return () => {
+      disposeBlock?.();
+      disposeBlock = undefined;
+    };
+  });
+
+  return resolver;
+}
+
+const _resolvePromptBlockerArgs = (
+  props: PromptProps | LegacyPromptProps,
+): UseBlockerOpts => {
+  if ('shouldBlockFn' in props) {
+    return props;
+  }
+
+  const shouldBlock = Solid.createMemo(() => Boolean(props.condition ?? true));
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock() && props.blockerFn !== undefined) {
+      return await props.blockerFn();
+    }
+    return shouldBlock;
+  };
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    get enableBeforeUnload() {
+      return shouldBlock();
+    },
+    get withResolver() {
+      return props.blockerFn === undefined;
+    },
+  };
+};
+
+interface BlockComponent {
+  <
+    TRouter extends AnyRouter = RegisteredRouter,
+    TWithResolver extends boolean = boolean,
+  >(
+    opts: PromptProps<TRouter, TWithResolver>,
+  ): SolidNode;
+  /**
+   *  @deprecated Use the UseBlockerOpts property instead
+   */
+  (opts: LegacyPromptProps): SolidNode;
+}
+
+export const Block: BlockComponent = function Block(
+  opts: PromptProps | LegacyPromptProps,
+): SolidNode {
+  const propsWithChildren = {
+    get children() {
+      return opts.children;
+    },
+  };
+  const args = _resolvePromptBlockerArgs(opts);
+
+  const resolver = useBlocker(args);
+  const children = Solid.createMemo(() => {
+    const child = propsWithChildren.children;
+    if (resolver && typeof child === 'function') return child(resolver());
+    return child;
+  });
+
+  return <>{children()}</>;
+};
+
+type LegacyPromptProps = {
+  blockerFn?: LegacyBlockerFn;
+  condition?: boolean | any;
+  children?: SolidNode | ((params: BlockerResolver) => SolidNode);
+};
+
+type PromptProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+  TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,
+> = UseBlockerOpts<TRouter, TWithResolver> & {
+  children?: SolidNode | ((params: TParams) => SolidNode);
+};

package/src/router-binding/useCanGoBack.ts

@@ -0,0 +1,9 @@
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+export function useCanGoBack() {
+  const router = useRouter();
+  return Solid.createMemo(
+    () => router.stores.location.get().state.__TSR_index !== 0,
+  );
+}