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

package/src/router-binding/CatchBoundary.tsx

@@ -0,0 +1,130 @@
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import * as Solid from 'solid-js';
+import { renderInNonRouteComponentContext } from './nonRouteComponentContext';
+import type { ErrorRouteComponent } from './route';
+
+export function CatchBoundary(
+  props: {
+    getResetKey: () => unknown;
+    children?: JSX.Element;
+    render?: () => JSX.Element;
+    errorComponent?: ErrorRouteComponent;
+    onCatch?: (error: Error) => void;
+  } & Solid.ParentProps,
+) {
+  const [retryKey, setRetryKey] = Solid.createSignal<object>({});
+  let resetBoundary: (() => void) | undefined;
+  let initialized = false;
+  let previousKey: unknown;
+
+  Solid.onCleanup(() => {
+    resetBoundary = undefined;
+  });
+
+  Solid.createEffect(props.getResetKey, key => {
+    if (!initialized) {
+      initialized = true;
+      previousKey = key;
+      return;
+    }
+
+    // The effect re-runs on every recompute of the key function, not only
+    // on value changes — gate on the value so an unchanged key can't
+    // recreate the retried subtree while it settles.
+    if (key === previousKey) {
+      return;
+    }
+    previousKey = key;
+
+    const reset = resetBoundary;
+    if (reset) {
+      queueMicrotask(() => {
+        if (resetBoundary !== reset) {
+          return;
+        }
+        setRetryKey({});
+        reset();
+        Solid.flush();
+      });
+    }
+  });
+
+  return (
+    <Solid.Errored
+      fallback={(error, reset) => {
+        const resolvedError = Solid.untrack(() => error() as Error);
+
+        props.onCatch?.(resolvedError);
+        resetBoundary = reset;
+
+        return process.env.NODE_ENV !== 'production' ? (
+          renderInNonRouteComponentContext(
+            () => (
+              <Dynamic
+                component={props.errorComponent ?? ErrorComponent}
+                error={resolvedError}
+                reset={reset}
+              />
+            ),
+            'errorComponent',
+          )
+        ) : (
+          <Dynamic
+            component={props.errorComponent ?? ErrorComponent}
+            error={resolvedError}
+            reset={reset}
+          />
+        );
+      }}
+    >
+      <Solid.Show when={retryKey()} keyed>
+        {_retryKey => props.render?.() ?? props.children}
+      </Solid.Show>
+    </Solid.Errored>
+  );
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = Solid.createSignal(
+    process.env.NODE_ENV !== 'production',
+  );
+
+  return (
+    <div style={{ padding: '.5rem', 'max-width': '100%' }}>
+      <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>
+        <strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>
+        <button
+          style={{
+            appearance: 'none',
+            'font-size': '.6em',
+            border: '1px solid currentColor',
+            padding: '.1rem .2rem',
+            'font-weight': 'bold',
+            'border-radius': '.25rem',
+          }}
+          onClick={() => setShow(d => !d)}
+        >
+          {show() ? 'Hide Error' : 'Show Error'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show() ? (
+        <div>
+          <pre
+            style={{
+              'font-size': '.7em',
+              border: '1px solid red',
+              'border-radius': '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/router-binding/ClientOnly.tsx

@@ -0,0 +1,76 @@
+import type { JSX } from '@solidjs/web';
+import * as Solid from 'solid-js';
+
+export interface ClientOnlyProps {
+  /**
+   * The children to render when the JS is loaded.
+   */
+  children: JSX.Element;
+  /**
+   * The fallback component to render if the JS is not yet loaded.
+   */
+  fallback?: JSX.Element;
+}
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export function ClientOnly(props: ClientOnlyProps) {
+  const hydrated = useHydrated();
+  return (
+    <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>
+      {props.children}
+    </Solid.Show>
+  );
+}
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * const hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated()} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+let globalHydrated = false;
+
+export function useHydrated(): Solid.Accessor<boolean> {
+  const [hydrated, setHydrated] = Solid.createSignal(
+    globalHydrated && !Solid.isHydrating(),
+  );
+
+  Solid.createEffect(
+    () => true,
+    () => {
+      globalHydrated = true;
+      setHydrated(true);
+    },
+  );
+
+  return hydrated;
+}

package/src/router-binding/HeadContent.tsx

@@ -0,0 +1,23 @@
+import type { JSX } from '@solidjs/web';
+import { HydrationScript, useHead } from '@solidjs/web';
+import type { AssetCrossOriginConfig } from '@tanstack/router-core';
+import { toHeadTags, useTags } from './headContentUtils';
+
+export interface HeadContentProps {
+  assetCrossOrigin?: AssetCrossOriginConfig;
+}
+
+/**
+ * @description The `HeadContent` component registers the current route's meta
+ * tags, links, and scripts with Solid's head registry, which owns emission
+ * into `<head>` (SSR splicing/streaming and client-side patching alike). It
+ * can be rendered anywhere in the tree, though placing it inside the `<head>`
+ * of your document keeps the hydration script in the right place.
+ */
+export function HeadContent(props: HeadContentProps): JSX.Element {
+  const tags = useTags(props.assetCrossOrigin);
+
+  useHead(() => toHeadTags(tags()));
+
+  return <HydrationScript />;
+}

package/src/router-binding/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/router-binding/Match.tsx

@@ -0,0 +1,397 @@
+import type { JSX } from '@solidjs/web';
+import { Dynamic } from '@solidjs/web';
+import type {
+  AnyRoute,
+  AnyRouter,
+  RootRouteOptions,
+} from '@tanstack/router-core';
+import { rootRouteId } from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import * as Solid from 'solid-js';
+import { CatchBoundary, ErrorComponent } from './CatchBoundary';
+import { ClientOnly } from './ClientOnly';
+import { nearestMatchContext } from './matchContext';
+import {
+  nonRouteComponentContext,
+  renderInNonRouteComponentContext,
+} from './nonRouteComponentContext';
+import { CatchNotFound, getNotFound } from './not-found';
+import { renderRouteNotFound } from './renderRouteNotFound';
+import { SafeFragment } from './SafeFragment';
+import { ScrollRestoration } from './scroll-restoration';
+import { useRouter } from './useRouter';
+
+const NearestMatchContext = nearestMatchContext as unknown as Solid.Component<{
+  value: any;
+  children?: any;
+}>;
+
+// Keep the client constant undefined so the server-only script can be dropped.
+const renderScrollRestoration =
+  isServer === false
+    ? undefined
+    : (router: AnyRouter, route: AnyRoute) =>
+        (isServer ?? router.isServer) &&
+        route.parentRoute?.id === rootRouteId &&
+        router.options.scrollRestoration ? (
+          <ScrollRestoration />
+        ) : null;
+
+export const Match = (props: { routeId: string }): JSX.Element => {
+  const router = useRouter();
+  const currentMatch = Solid.createMemo(() =>
+    router.stores.getMatchStore(props.routeId).get(),
+  );
+  const matchState = Solid.createMemo(() => {
+    const match = currentMatch();
+    if (!match) {
+      return null;
+    }
+
+    return {
+      routeId: match.routeId,
+      ssr: match.ssr,
+      status: match.status,
+    };
+  });
+  const nearestMatch = [() => props.routeId, currentMatch] as const;
+
+  return (
+    <Solid.Show when={matchState()}>
+      {currentMatchState => {
+        const route = router.routesById[props.routeId] as AnyRoute;
+        const routeOptions = () => {
+          // Lazy route options become observable with the next publication.
+          currentMatchState();
+          return route.options;
+        };
+        const resolvePendingComponent = Solid.createMemo(
+          () =>
+            routeOptions().pendingComponent ??
+            router.options.defaultPendingComponent,
+        );
+        const routeErrorComponent = Solid.createMemo(
+          () =>
+            routeOptions().errorComponent ??
+            router.options.defaultErrorComponent,
+        );
+        const routeNotFoundComponent = Solid.createMemo(() =>
+          route.isRoot
+            ? (routeOptions().notFoundComponent ??
+              router.options.notFoundRoute?.options.component ??
+              router.options.defaultNotFoundComponent)
+            : (routeOptions().notFoundComponent ??
+              router.options.defaultNotFoundComponent),
+        );
+        const resolvedNoSsr = Solid.createMemo(
+          () =>
+            currentMatchState().ssr === false ||
+            currentMatchState().ssr === 'data-only',
+        );
+        const ResolvedNotFoundBoundary = Solid.createMemo(() =>
+          routeNotFoundComponent() ? CatchNotFound : SafeFragment,
+        );
+        const ShellComponent = Solid.createMemo(() =>
+          route.isRoot
+            ? ((route.options as RootRouteOptions).shellComponent ??
+              SafeFragment)
+            : SafeFragment,
+        );
+
+        const MatchContent = () => (
+          <Solid.Show
+            when={currentMatchState().status !== 'pending'}
+            fallback={(() => {
+              if (process.env.NODE_ENV !== 'production') {
+                return renderInNonRouteComponentContext(
+                  () => <Dynamic component={resolvePendingComponent()} />,
+                  'pendingComponent',
+                );
+              }
+              return <Dynamic component={resolvePendingComponent()} />;
+            })()}
+          >
+            <MatchInner />
+          </Solid.Show>
+        );
+        const RouteContent = () => (
+          <Dynamic
+            component={ResolvedNotFoundBoundary()}
+            fallback={(error: any) => {
+              const notFoundError = getNotFound(error) ?? error;
+              notFoundError.routeId ??= currentMatchState().routeId;
+
+              if (notFoundError.routeId !== currentMatchState().routeId) {
+                throw notFoundError;
+              }
+
+              return process.env.NODE_ENV !== 'production' ? (
+                renderInNonRouteComponentContext(
+                  () => (
+                    <Dynamic
+                      component={routeNotFoundComponent()}
+                      {...notFoundError}
+                    />
+                  ),
+                  'notFoundComponent',
+                )
+              ) : (
+                <Dynamic
+                  component={routeNotFoundComponent()}
+                  {...notFoundError}
+                />
+              );
+            }}
+          >
+            <Solid.Switch>
+              <Solid.Match when={resolvedNoSsr()}>
+                <ClientOnly
+                  fallback={(() => {
+                    if (process.env.NODE_ENV !== 'production') {
+                      return renderInNonRouteComponentContext(
+                        () => <Dynamic component={resolvePendingComponent()} />,
+                        'pendingComponent',
+                      );
+                    }
+                    return <Dynamic component={resolvePendingComponent()} />;
+                  })()}
+                >
+                  <MatchContent />
+                </ClientOnly>
+              </Solid.Match>
+              <Solid.Match when={!resolvedNoSsr()}>
+                <MatchContent />
+              </Solid.Match>
+            </Solid.Switch>
+          </Dynamic>
+        );
+
+        return (
+          <Dynamic component={ShellComponent()}>
+            <NearestMatchContext value={nearestMatch}>
+              <Solid.Show
+                when={routeErrorComponent()}
+                fallback={<RouteContent />}
+              >
+                {errorComponent => (
+                  <CatchBoundary
+                    // Scope the reset key to this match and its
+                    // descendants (whose errors bubble here when they
+                    // have no errorComponent of their own): resetting on
+                    // unrelated matches' transitions just re-throws the
+                    // still-stale error and recreates the retried
+                    // subtree mid-settle.
+                    getResetKey={() => {
+                      const matches = router.stores.matches.get();
+                      const index = matches.findIndex(
+                        match => match.routeId === props.routeId,
+                      );
+                      if (index === -1) {
+                        return '';
+                      }
+                      let key = '';
+                      for (let i = index; i < matches.length; i++) {
+                        const match = matches[i]!;
+                        key += `${match.status}|${match.updatedAt},`;
+                      }
+                      return key;
+                    }}
+                    errorComponent={errorComponent() as any}
+                    onCatch={(error: Error) => {
+                      const notFoundError = getNotFound(error);
+                      if (notFoundError) {
+                        notFoundError.routeId ??= currentMatchState().routeId;
+                        throw notFoundError;
+                      }
+                      if (process.env.NODE_ENV !== 'production') {
+                        console.warn(
+                          `Warning: Error in route match: ${currentMatchState().routeId}`,
+                        );
+                      }
+                      (
+                        routeOptions().onCatch ?? router.options.defaultOnCatch
+                      )?.(error);
+                    }}
+                    render={RouteContent}
+                  />
+                )}
+              </Solid.Show>
+            </NearestMatchContext>
+
+            {renderScrollRestoration?.(router, route)}
+          </Dynamic>
+        );
+      }}
+    </Solid.Show>
+  );
+};
+
+export const MatchInner = (): any => {
+  const router = useRouter();
+  const nearestMatch = Solid.useContext(nearestMatchContext);
+  const match = nearestMatch[1 /* match */];
+  const routeId = nearestMatch[0 /* route id */];
+
+  const matchState = Solid.createMemo(() => {
+    const currentMatch = match();
+    const currentRouteId = routeId();
+    if (!currentMatch || !currentRouteId) {
+      return null;
+    }
+
+    const route = router.routesById[currentRouteId] as AnyRoute;
+    const remount =
+      route.options.remountDeps ?? router.options.defaultRemountDeps;
+    let componentKey: string;
+    if (!remount) {
+      componentKey = currentRouteId;
+    } else {
+      const deps = remount({
+        routeId: currentRouteId,
+        loaderDeps: currentMatch.loaderDeps,
+        params: currentMatch._strictParams,
+        search: currentMatch._strictSearch,
+      });
+      componentKey = JSON.stringify(deps) ?? currentRouteId;
+    }
+
+    return {
+      route,
+      routeId: currentRouteId,
+      match: {
+        id: currentMatch.id,
+        status: currentMatch.status,
+        error: currentMatch.error,
+      },
+      componentKey,
+    };
+  });
+
+  return (
+    <Solid.Show when={matchState()}>
+      {currentMatchState => {
+        const route = Solid.createMemo(() => currentMatchState().route);
+        const currentMatch = Solid.createMemo(() => currentMatchState().match);
+        const componentKey = Solid.createMemo(
+          () => currentMatchState().componentKey,
+        );
+        const OutComponent = Solid.createMemo(
+          () =>
+            route().options.component ??
+            router.options.defaultComponent ??
+            Outlet,
+        );
+        const keyedOut = () => (
+          <Solid.Show when={componentKey()} keyed>
+            {_key => <Dynamic component={OutComponent()} />}
+          </Solid.Show>
+        );
+
+        return (
+          <Solid.Switch>
+            <Solid.Match when={currentMatch().status === 'notFound'}>
+              {_ =>
+                Solid.untrack(() =>
+                  renderRouteNotFound(router, route(), currentMatch().error),
+                )
+              }
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'error'}>
+              {_ => {
+                const matchError = Solid.untrack(
+                  () => currentMatch().error,
+                ) as Error;
+                if (isServer ?? router.isServer) {
+                  const RouteErrorComponent =
+                    (route().options.errorComponent ??
+                      router.options.defaultErrorComponent) ||
+                    ErrorComponent;
+
+                  return process.env.NODE_ENV !== 'production' ? (
+                    renderInNonRouteComponentContext(
+                      () => (
+                        <RouteErrorComponent
+                          error={matchError}
+                          reset={undefined as any}
+                          info={{ componentStack: '' }}
+                        />
+                      ),
+                      'errorComponent',
+                    )
+                  ) : (
+                    <RouteErrorComponent
+                      error={matchError}
+                      reset={undefined as any}
+                      info={{ componentStack: '' }}
+                    />
+                  );
+                }
+
+                throw matchError;
+              }}
+            </Solid.Match>
+            <Solid.Match when={currentMatch().status === 'success'}>
+              {keyedOut()}
+            </Solid.Match>
+          </Solid.Switch>
+        );
+      }}
+    </Solid.Show>
+  );
+};
+
+export const Outlet = (): JSX.Element => {
+  if (process.env.NODE_ENV !== 'production') {
+    const nonRouteComponent = Solid.useContext(nonRouteComponentContext!);
+    if (nonRouteComponent) {
+      console.warn(
+        `Warning: An <Outlet /> was rendered inside a ${nonRouteComponent}. <Outlet /> should only be rendered inside a route component.`,
+      );
+    }
+  }
+
+  const router = useRouter();
+  const nearestParentMatch = Solid.useContext(nearestMatchContext);
+  const parentMatch = nearestParentMatch[1 /* match */];
+  const routeId = nearestParentMatch[0 /* route id */];
+  const route = Solid.createMemo(() => {
+    const currentRouteId = routeId();
+    return currentRouteId
+      ? (router.routesById[currentRouteId] as AnyRoute)
+      : undefined;
+  });
+  const parentNotFound = Solid.createMemo(() => parentMatch()?._notFound);
+  const parentNotFoundError = Solid.createMemo(() => parentMatch()?.error);
+  const childRouteId = Solid.createMemo(() => {
+    if (parentNotFound()) {
+      return undefined;
+    }
+    const currentRouteId = routeId();
+    if (!currentRouteId) {
+      return undefined;
+    }
+    const ids = router.stores.ids.get();
+    return ids[ids.indexOf(currentRouteId) + 1];
+  });
+  return (
+    <Solid.Show
+      when={childRouteId()}
+      keyed
+      fallback={
+        <Solid.Show when={parentNotFound() && route()}>
+          {resolvedRoute =>
+            Solid.untrack(() =>
+              renderRouteNotFound(
+                router,
+                resolvedRoute(),
+                parentNotFoundError(),
+              ),
+            )
+          }
+        </Solid.Show>
+      }
+    >
+      {currentChildRouteId => <Match routeId={currentChildRouteId} />}
+    </Solid.Show>
+  );
+};