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

package/src/router-binding/headContentUtils.tsx

@@ -0,0 +1,292 @@
+import type { HeadTag } from '@solidjs/web';
+import type {
+  AssetCrossOriginConfig,
+  RouterManagedTag,
+} from '@tanstack/router-core';
+import {
+  _getAssetMatches,
+  appendUniqueUserTags,
+  escapeHtml,
+  getAssetCrossOrigin,
+  getScriptPreloadAttrs,
+  resolveManifestCssLink,
+} from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+/**
+ * Build the head/link/meta/script tags from the renderable presented prefix.
+ * Used internally by `HeadContent`.
+ */
+export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
+  const router = useRouter();
+  const nonce = router.options.ssr?.nonce;
+  const activeMatches = Solid.createMemo(() =>
+    _getAssetMatches(router.stores.matches.get()),
+  );
+  const routeMeta = Solid.createMemo(() =>
+    activeMatches()
+      .map(match => match.meta)
+      .filter(meta => meta !== undefined),
+  );
+
+  const meta: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {
+    const resultMeta: Array<RouterManagedTag> = [];
+    const metaByAttribute: Record<string, true> = {};
+    let title: RouterManagedTag | undefined;
+    const routeMetasArray = routeMeta();
+    for (let i = routeMetasArray.length - 1; i >= 0; i--) {
+      const metas = routeMetasArray[i]!;
+      for (let j = metas.length - 1; j >= 0; j--) {
+        const m = metas[j];
+        if (!m) {
+          continue;
+        }
+
+        if (m.title) {
+          if (!title) {
+            title = {
+              tag: 'title',
+              children: m.title,
+            };
+          }
+        } else if ('script:ld+json' in m) {
+          try {
+            const json = JSON.stringify(m['script:ld+json']);
+            resultMeta.push({
+              tag: 'script',
+              attrs: {
+                type: 'application/ld+json',
+              },
+              children: escapeHtml(json),
+            });
+          } catch {
+            // Skip invalid JSON-LD objects.
+          }
+        } else {
+          const attribute = m.name ?? m.property;
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
+              continue;
+            }
+            metaByAttribute[attribute] = true;
+          }
+
+          resultMeta.push({
+            tag: 'meta',
+            attrs: {
+              ...m,
+              nonce,
+            },
+          });
+        }
+      }
+    }
+
+    if (title) {
+      resultMeta.push(title);
+    }
+
+    if (nonce) {
+      resultMeta.push({
+        tag: 'meta',
+        attrs: {
+          property: 'csp-nonce',
+          content: nonce,
+        },
+      });
+    }
+    resultMeta.reverse();
+    return resultMeta;
+  });
+
+  const links = Solid.createMemo(() => {
+    return activeMatches()
+      .flatMap(match => match.links ?? [])
+      .filter(link => link !== undefined)
+      .map(link => ({
+        tag: 'link',
+        attrs: {
+          ...link,
+          nonce,
+        },
+      })) satisfies Array<RouterManagedTag>;
+  });
+
+  const retainedManifestCssTags = new Map<string, RouterManagedTag>();
+  const manifestCssTags = Solid.createMemo(() => {
+    const manifest = router.ssr?.manifest;
+    const tags: Array<RouterManagedTag> = [];
+
+    if (!manifest) {
+      return tags;
+    }
+
+    for (const match of activeMatches()) {
+      for (const link of manifest.routes[match.routeId]?.css ?? []) {
+        const resolvedLink = resolveManifestCssLink(link);
+        const tag: RouterManagedTag = {
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            ...resolvedLink,
+            crossOrigin:
+              getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
+              resolvedLink.crossOrigin,
+            nonce,
+          },
+        };
+        const key = JSON.stringify(tag);
+        if (!retainedManifestCssTags.has(key)) {
+          retainedManifestCssTags.set(key, tag);
+        }
+      }
+    }
+
+    // Lazy modules are cached and do not reinsert their CSS when revisited.
+    tags.push(...retainedManifestCssTags.values());
+
+    if (manifest.inlineStyle) {
+      tags.push({
+        tag: 'style',
+        attrs: {
+          ...manifest.inlineStyle.attrs,
+          nonce,
+        },
+        ...(manifest.inlineStyle.children !== undefined
+          ? { children: manifest.inlineStyle.children }
+          : {}),
+        inlineCss: true,
+      });
+    }
+
+    return tags;
+  });
+
+  const preloadLinks = Solid.createMemo(() => {
+    const manifest = router.ssr?.manifest;
+    const tags: Array<RouterManagedTag> = [];
+    for (const match of activeMatches()) {
+      for (const preload of manifest?.routes[match.routeId]?.preloads ?? []) {
+        if (!preload) {
+          continue;
+        }
+        tags.push({
+          tag: 'link',
+          attrs: {
+            ...getScriptPreloadAttrs(manifest, preload, assetCrossOrigin),
+            nonce,
+          },
+        });
+      }
+    }
+    return tags;
+  });
+
+  const styles = Solid.createMemo(() => {
+    return activeMatches()
+      .flatMap(match => match.styles ?? [])
+      .filter(style => style !== undefined)
+      .map(({ children, ...attrs }) => ({
+        tag: 'style',
+        attrs: {
+          ...attrs,
+          nonce,
+        },
+        ...(children != null ? { children: String(children) } : {}),
+      })) satisfies Array<RouterManagedTag>;
+  });
+
+  const headScripts = Solid.createMemo(() => {
+    return activeMatches()
+      .flatMap(match => match.headScripts ?? [])
+      .filter(script => script !== undefined)
+      .map(({ children, ...attrs }) => ({
+        tag: 'script',
+        attrs: {
+          ...attrs,
+          nonce,
+        },
+        ...(children != null ? { children: String(children) } : {}),
+      })) satisfies Array<RouterManagedTag>;
+  });
+
+  return Solid.createMemo(() => {
+    const next: Array<RouterManagedTag> = [];
+    appendUniqueUserTags(next, meta());
+    appendUniqueUserTags(next, links());
+    next.push(...manifestCssTags());
+    next.push(...preloadLinks());
+    appendUniqueUserTags(next, styles());
+    appendUniqueUserTags(next, headScripts());
+    return next;
+  });
+};
+
+const INLINE_CSS_HYDRATION_ATTR = 'data-tsr-inline-css';
+
+/**
+ * Convert the router-managed tags into head registry descriptors for
+ * `useHead`. Pure data mapping — it is evaluated inside the registry's own
+ * flush boundary (server) / effect (client), so it must not allocate
+ * reactive owners.
+ */
+export function toHeadTags(tags: Array<RouterManagedTag>): Array<HeadTag> {
+  return tags.map(toHeadTag);
+}
+
+function toHeadTag(t: RouterManagedTag): HeadTag {
+  const props: Record<string, any> = { ...t.attrs };
+  let children: string | undefined = t.children;
+
+  if (
+    t.tag === 'style' &&
+    t.inlineCss &&
+    (process.env.TSS_INLINE_CSS_ENABLED === 'true' ||
+      (process.env.TSS_INLINE_CSS_ENABLED === undefined && isServer))
+  ) {
+    // Mark the inline-CSS style so the client can find it again: the
+    // serialized manifest omits the CSS text, so on the client the tag
+    // arrives with `children === undefined` and the text is recovered from
+    // the server-rendered element.
+    props[INLINE_CSS_HYDRATION_ATTR] = '';
+  }
+
+  if (
+    t.tag === 'style' &&
+    t.inlineCss &&
+    children === undefined &&
+    typeof document !== 'undefined'
+  ) {
+    children =
+      document.querySelector<HTMLStyleElement>(
+        `style[${INLINE_CSS_HYDRATION_ATTR}]`,
+      )?.textContent ?? '';
+  }
+
+  if (children !== undefined) {
+    props.children = children;
+  }
+
+  const headTag: HeadTag = { tag: t.tag, props };
+
+  // Inline scripts and styles have no natural registry identity: the
+  // registry assigns them per-runtime unique ids, which can never match
+  // between server and client, so hydration would append a client copy
+  // next to the server-rendered one. A stable content-derived key gives
+  // both runtimes the same identity to reconcile on.
+  if (t.tag === 'style' || (t.tag === 'script' && props.src === undefined)) {
+    headTag.key = `tsr-${hashString(t.tag + JSON.stringify(props))}`;
+  }
+
+  return headTag;
+}
+
+function hashString(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) {
+    h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  }
+  return (h >>> 0).toString(36);
+}

package/src/router-binding/history.ts

@@ -0,0 +1,9 @@
+import type { HistoryLocation } from '@tanstack/history';
+
+declare module '@tanstack/history' {
+  interface HistoryState {
+    __tempLocation?: HistoryLocation;
+    __tempKey?: string;
+    __hashScrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+  }
+}

package/src/router-binding/index.tsx

@@ -0,0 +1,315 @@
+export type {
+  BlockerFn,
+  HistoryLocation,
+  HistoryState,
+  ParsedPath,
+  RouterHistory,
+} from '@tanstack/history';
+export {
+  createBrowserHistory,
+  createHashHistory,
+  createHistory,
+  createMemoryHistory,
+} from '@tanstack/history';
+export type {
+  AbsoluteToPath,
+  ActiveOptions,
+  AllContext,
+  AllLoaderData,
+  AllParams,
+  AnyContext,
+  AnyPathParams,
+  AnyRedirect,
+  AnyRoute,
+  AnyRouteMatch,
+  AnyRouter,
+  AnyRouterWithContext,
+  AnyRouteWithContext,
+  AnySchema,
+  AnyValidator,
+  AnyValidatorAdapter,
+  AnyValidatorFn,
+  AnyValidatorObj,
+  Assign,
+  BaseRouteOptions,
+  BeforeLoadContextOptions,
+  BeforeLoadContextParameter,
+  BuildLocationFn,
+  BuildNextOptions,
+  CommitLocationOptions,
+  Constrain,
+  ContextAsyncReturnType,
+  ContextOptions,
+  ContextReturnType,
+  ControllablePromise,
+  ControlledPromise,
+  CreateFileRoute,
+  CreateLazyFileRoute,
+  DefaultValidator,
+  DeferredPromise,
+  DeferredPromiseState,
+  ErrorComponentProps,
+  ErrorRouteProps,
+  Expand,
+  FileBaseRouteOptions,
+  FileRoutesByPath,
+  FileRouteTypes,
+  FullSearchSchema,
+  FullSearchSchemaInput,
+  FullSearchSchemaOption,
+  InferAllContext,
+  InferAllParams,
+  InferDescendantToPaths,
+  InferFrom,
+  InferFullSearchSchema,
+  InferFullSearchSchemaInput,
+  InferMaskFrom,
+  InferMaskTo,
+  InferSelected,
+  InferShouldThrow,
+  InferStrict,
+  InferTo,
+  IntersectAssign,
+  LazyRouteOptions,
+  LinkOptions,
+  ListenerFn,
+  LoaderFnContext,
+  LocationRewrite,
+  LocationRewriteFunction,
+  LooseAsyncReturnType,
+  LooseReturnType,
+  MakeOptionalPathParams,
+  MakeRemountDepsOptionsUnion,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  Manifest,
+  MatchLocation,
+  MatchRouteOptions,
+  MergeAll,
+  MetaDescriptor,
+  NavigateFn,
+  NavigateOptions,
+  NotFoundError,
+  NotFoundRouteProps,
+  ParamsOptions,
+  ParsedLocation,
+  ParseParamsFn,
+  ParseRoute,
+  PathParamOptions,
+  PreloadableObj,
+  Redirect,
+  RedirectOptions,
+  Register,
+  RegisteredRouter,
+  RelativeToCurrentPath,
+  RelativeToParentPath,
+  RelativeToPath,
+  RelativeToPathAutoComplete,
+  RemountDepsOptions,
+  RemoveLeadingSlashes,
+  RemoveTrailingSlashes,
+  ResolveAllContext,
+  ResolveAllParamsFromParent,
+  ResolvedRedirect,
+  ResolveFullPath,
+  ResolveFullSearchSchema,
+  ResolveFullSearchSchemaInput,
+  ResolveId,
+  ResolveLoaderData,
+  ResolveOptionalParams,
+  ResolveParams,
+  ResolveRelativePath,
+  ResolveRequiredParams,
+  ResolveRoute,
+  ResolveRouteContext,
+  ResolveSearchValidatorInput,
+  ResolveSearchValidatorInputFn,
+  ResolveValidatorInput,
+  ResolveValidatorInputFn,
+  ResolveValidatorOutput,
+  ResolveValidatorOutputFn,
+  RootRouteId,
+  RootRouteOptions,
+  RouteById,
+  RouteByPath,
+  RouteConstraints,
+  RouteContext,
+  RouteContextFn,
+  RouteContextOptions,
+  RouteContextParameter,
+  RouteIds,
+  RouteLinkEntry,
+  RouteLoaderFn,
+  RouteMask,
+  RouteMatch,
+  RouteOptions,
+  RoutePathOptions,
+  RoutePathOptionsIntersection,
+  RoutePaths,
+  RouterConstructorOptions,
+  RouterContextOptions,
+  RouterEvent,
+  RouterEvents,
+  RouterListener,
+  RouterManagedTag,
+  RouterState,
+  RoutesById,
+  RoutesByPath,
+  SearchFilter,
+  SearchParamOptions,
+  SearchParser,
+  SearchSchemaInput,
+  SearchSerializer,
+  SerializableExtensions,
+  StaticDataRouteOption,
+  StringifyParamsFn,
+  ToMaskOptions,
+  ToOptions,
+  ToPathOption,
+  ToSubOptions,
+  TrailingSlashOption,
+  TrimPath,
+  TrimPathLeft,
+  TrimPathRight,
+  UpdatableRouteOptions,
+  UpdatableStaticRouteOption,
+  UseNavigateResult,
+  ValidateFromPath,
+  ValidateId,
+  ValidateNavigateOptions,
+  ValidateNavigateOptionsArray,
+  ValidateParams,
+  ValidateRedirectOptions,
+  ValidateRedirectOptionsArray,
+  ValidateSearch,
+  ValidateToPath,
+  ValidateUseParamsResult,
+  ValidateUseSearchResult,
+  Validator,
+  ValidatorAdapter,
+  ValidatorFn,
+  ValidatorObj,
+} from '@tanstack/router-core';
+export {
+  cleanPath,
+  composeRewrites,
+  createControlledPromise,
+  DEFAULT_PROTOCOL_ALLOWLIST,
+  deepEqual,
+  defaultParseSearch,
+  defaultStringifySearch,
+  defer,
+  functionalUpdate,
+  interpolatePath,
+  isMatch,
+  isNotFound,
+  isRedirect,
+  joinPaths,
+  lazyFn,
+  notFound,
+  parseSearchWith,
+  redirect,
+  replaceEqualDeep,
+  resolvePath,
+  retainSearchParams,
+  rootRouteId,
+  SearchParamError,
+  stringifySearchWith,
+  stripSearchParams,
+  trimPath,
+  trimPathLeft,
+  trimPathRight,
+} from '@tanstack/router-core';
+export { Asset } from './Asset';
+export type { AwaitOptions } from './awaited';
+export { Await, useAwaited } from './awaited';
+export { CatchBoundary, ErrorComponent } from './CatchBoundary';
+export { ClientOnly, useHydrated } from './ClientOnly';
+export {
+  createFileRoute,
+  createLazyFileRoute,
+  createLazyRoute,
+  FileRoute,
+  FileRouteLoader,
+  LazyRoute,
+} from './fileRoute';
+export { HeadContent } from './HeadContent';
+export { useTags } from './headContentUtils';
+export * from './history';
+export { lazyRouteComponent } from './lazyRouteComponent';
+export type {
+  ActiveLinkOptions,
+  CreateLinkProps,
+  LinkComponent,
+  LinkComponentProps,
+  LinkProps,
+  UseLinkPropsOptions,
+} from './link';
+export { createLink, Link, linkOptions, useLinkProps } from './link';
+export { Match, Outlet } from './Match';
+export type { MakeMatchRouteOptions, UseMatchRouteOptions } from './Matches';
+export {
+  Matches,
+  MatchRoute,
+  useChildMatches,
+  useMatches,
+  useMatchRoute,
+  useParentMatches,
+} from './Matches';
+export { CatchNotFound, DefaultGlobalNotFound } from './not-found';
+export type { PublicMatchError, PublicSnapshotOwner } from './publicMatchData';
+export {
+  preparePublicContextData,
+  preparePublicLoaderData,
+  preparePublicMatchError,
+} from './publicMatchData';
+export type { RouterProps } from './RouterProvider';
+export { RouterContextProvider, RouterProvider } from './RouterProvider';
+export { prepareRouterMatchTransfer } from './registryTransfer';
+export type {
+  AnyRootRoute,
+  AsyncRouteComponent,
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  RouteComponent,
+  SolidNode,
+} from './route';
+export {
+  createRootRoute,
+  createRootRouteWithContext,
+  createRoute,
+  createRouteMask,
+  getRouteApi,
+  NotFoundRoute,
+  RootRoute,
+  Route,
+  RouteApi,
+  rootRouteWithContext,
+} from './route';
+export { createRouter, Router } from './router';
+export type { RouterOptions } from './routerOptions';
+export { ScriptOnce } from './ScriptOnce';
+export { Scripts } from './Scripts';
+export {
+  ScrollRestoration,
+  useElementScrollRestoration,
+} from './ScrollRestoration';
+export type {
+  ValidateLinkOptions,
+  ValidateLinkOptionsArray,
+  ValidateUseParamsOptions,
+  ValidateUseSearchOptions,
+} from './typePrimitives';
+export type { ShouldBlockFn, UseBlockerOpts } from './useBlocker';
+export { Block, useBlocker } from './useBlocker';
+export { useCanGoBack } from './useCanGoBack';
+export { useLoaderData } from './useLoaderData';
+export { useLoaderDeps } from './useLoaderDeps';
+export { useLocation } from './useLocation';
+export { useMatch } from './useMatch';
+export { Navigate, useNavigate } from './useNavigate';
+export { useParams } from './useParams';
+export { useRouteContext } from './useRouteContext';
+export { useRouter } from './useRouter';
+export { useRouterState } from './useRouterState';
+export { useSearch } from './useSearch';

package/src/router-binding/lazyRouteComponent.tsx

@@ -0,0 +1,70 @@
+import { isModuleNotFoundError } from '@tanstack/router-core';
+import { lazy } from 'solid-js';
+import type { AsyncRouteComponent } from './route';
+
+export function lazyRouteComponent<
+  T extends Record<string, any>,
+  TKey extends keyof T = 'default',
+>(
+  importer: () => Promise<T>,
+  exportName?: TKey,
+): T[TKey] extends (props: infer TProps) => any
+  ? AsyncRouteComponent<TProps>
+  : never {
+  const resolvedExport = (exportName as string | undefined) ?? 'default';
+  let preloadPromise: Promise<void> | undefined;
+
+  // lazy()'s { export } option names which export of the resolved module is
+  // the component — a call-site literal available on both runtimes, so the
+  // module namespace passes through untouched ($$moduleUrl included, which
+  // is how server-side lazy() resolves the route chunk's client assets) and
+  // hydration claims the component synchronously from the preloaded module.
+  const comp = lazy(
+    () =>
+      importer().catch(error => {
+        // If the load fails due to module not found, it may mean a new
+        // version of the build was deployed and the user's browser is still
+        // using an old version with an outdated URL to the lazy module. In
+        // that case, attempt one window refresh to get the latest — gated
+        // through sessionStorage so some other issue can't cause a reload
+        // loop.
+        if (
+          isModuleNotFoundError(error) &&
+          error instanceof Error &&
+          typeof window !== 'undefined' &&
+          typeof sessionStorage !== 'undefined'
+        ) {
+          const storageKey = `tanstack_router_reload:${error.message}`;
+          if (!sessionStorage.getItem(storageKey)) {
+            sessionStorage.setItem(storageKey, '1');
+            window.location.reload();
+
+            // The page is reloading; render nothing in the meantime.
+            return { [resolvedExport]: () => null } as unknown as T;
+          }
+        }
+
+        throw error;
+      }),
+    { export: resolvedExport },
+  );
+
+  const load = comp.preload;
+
+  // TanStack's preload contract: a memoized Promise<void> that never
+  // rejects. lazy() does not cache rejected module promises, so a failed
+  // download is retried by the next preload or render.
+  comp.preload = () => {
+    if (!preloadPromise) {
+      preloadPromise = load().then(
+        () => {},
+        () => {
+          preloadPromise = undefined;
+        },
+      );
+    }
+    return preloadPromise;
+  };
+
+  return comp as any;
+}