@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.0

package/src/runtime/rsc/symbols.ts

@@ -0,0 +1,106 @@
+import type React from 'react';
+
+export interface ServerComponentStream {
+  createReplayStream: () => ReadableStream<Uint8Array>;
+}
+
+export const SERVER_COMPONENT_STREAM = Symbol.for('modern.tanstack.rsc.stream');
+
+export const RENDERABLE_RSC = Symbol.for('modern.tanstack.rsc.renderable');
+
+export const RSC_PROXY_GET_TREE = Symbol.for(
+  'modern.tanstack.rsc.proxy.getTree',
+);
+
+export const RSC_PROXY_PATH = Symbol.for('modern.tanstack.rsc.proxy.path');
+
+export const RSC_SLOT_USAGES_STREAM = Symbol.for(
+  'modern.tanstack.rsc.slotUsages.stream',
+);
+
+export const RSC_SLOT_USAGES = Symbol.for('modern.tanstack.rsc.slotUsages');
+
+export type SerializableSlotArg =
+  | string
+  | number
+  | boolean
+  | bigint
+  | null
+  | undefined
+  | SerializableSlotArg[]
+  | { [key: string]: SerializableSlotArg };
+
+export type RscSlotUsageEvent = {
+  slot: string;
+  args?: SerializableSlotArg[];
+};
+
+export interface AnyRenderableServerComponent<TNode = React.ReactNode> {
+  [SERVER_COMPONENT_STREAM]: ServerComponentStream;
+  [RENDERABLE_RSC]: true;
+  [RSC_PROXY_GET_TREE]?: () => unknown;
+  [RSC_PROXY_PATH]?: string[];
+  [RSC_SLOT_USAGES_STREAM]?: ReadableStream<RscSlotUsageEvent>;
+  '~types'?: {
+    node: TNode;
+  };
+}
+
+export interface AnyCompositeComponent<
+  TProps extends object = Record<string, unknown>,
+  TReturn = React.ReactNode,
+> {
+  [SERVER_COMPONENT_STREAM]?: ServerComponentStream;
+  [RSC_PROXY_GET_TREE]?: () => unknown;
+  [RSC_PROXY_PATH]?: string[];
+  [RSC_SLOT_USAGES]?: RscSlotUsageEvent[];
+  [RSC_SLOT_USAGES_STREAM]?: ReadableStream<RscSlotUsageEvent>;
+  '~types'?: {
+    props: TProps;
+    return: TReturn;
+  };
+}
+
+type InferCompositeProps<TComp extends AnyCompositeComponent> =
+  TComp extends AnyCompositeComponent<infer TProps, unknown>
+    ? TProps
+    : Record<string, unknown>;
+
+export type CompositeComponentProps<TComp extends AnyCompositeComponent> = {
+  src: TComp;
+  strict?: boolean;
+} & InferCompositeProps<TComp>;
+
+export function isServerComponent(
+  value: unknown,
+): value is AnyCompositeComponent | AnyRenderableServerComponent {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  if (typeof value !== 'object' && typeof value !== 'function') {
+    return false;
+  }
+
+  return (
+    SERVER_COMPONENT_STREAM in value &&
+    typeof (value as { [SERVER_COMPONENT_STREAM]?: unknown })[
+      SERVER_COMPONENT_STREAM
+    ] !== 'undefined'
+  );
+}
+
+export function isRenderableServerComponent(value: unknown): boolean {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  if (typeof value !== 'object' && typeof value !== 'function') {
+    return false;
+  }
+
+  return (
+    RENDERABLE_RSC in value &&
+    (value as { [RENDERABLE_RSC]?: unknown })[RENDERABLE_RSC] === true
+  );
+}

package/src/runtime/ssr-shim.d.ts

@@ -0,0 +1,12 @@
+declare module '@tanstack/react-router/ssr/client' {
+  export function RouterClient(props: {
+    router: unknown;
+  }): import('react').JSX.Element;
+}
+
+declare module '@tanstack/react-router/ssr/server' {
+  export function attachRouterServerSsrUtils(opts: {
+    router: unknown;
+    manifest?: unknown;
+  }): void;
+}

package/src/runtime/types.ts

@@ -0,0 +1,83 @@
+import type { RequestContext } from '@modern-js/runtime-utils/node';
+import type { RouteObject } from '@modern-js/runtime-utils/router';
+import type { NestedRoute, PageRoute } from '@modern-js/types';
+import type React from 'react';
+
+export type BuiltInRouterFramework = 'react-router' | 'tanstack';
+export type RouterFramework = BuiltInRouterFramework | (string & {});
+
+export type RouterConfig = {
+  framework?: RouterFramework;
+  routesConfig: {
+    globalApp?: React.ComponentType<any>;
+    routes?: (NestedRoute | PageRoute)[];
+  };
+  oldVersion?: boolean;
+  serverBase?: string[];
+  supportHtml5History?: boolean;
+  basename?: string;
+  createRoutes?: () => RouteObject[];
+  future?: Partial<{
+    v7_startTransition: boolean;
+  }>;
+  unstable_reloadOnURLMismatch?: boolean;
+};
+
+export interface RouterRouteMatchSnapshot {
+  routeId: string;
+  assetRouteId?: string;
+  pathname?: string;
+  params?: Record<string, string>;
+}
+
+export interface InternalRouterServerSnapshot {
+  framework?: RouterFramework;
+  basename?: string;
+  statusCode?: number;
+  errors?: Record<string, unknown>;
+  routerData?: {
+    loaderData?: Record<string, unknown>;
+    errors?: Record<string, unknown>;
+  };
+  hydrationScript?: string;
+  hydrationScripts?: string[];
+  matchedRouteIds?: string[];
+  matches?: RouterRouteMatchSnapshot[];
+}
+
+export interface InternalRouterRuntimeState {
+  framework: RouterFramework;
+  basename?: string;
+  instance?: unknown;
+  hydrationScript?: string;
+  hydrationScripts?: string[];
+  matchedRouteIds?: string[];
+  matches?: RouterRouteMatchSnapshot[];
+  serverSnapshot?: InternalRouterServerSnapshot;
+  cleanup?: () => void | Promise<void>;
+}
+
+export interface RouterServerPrepareResult {
+  state: InternalRouterRuntimeState;
+  snapshot?: InternalRouterServerSnapshot;
+  redirect?: Response;
+  cleanup?: () => void | Promise<void>;
+}
+
+interface DataFunctionArgs<D = any> {
+  request: Request;
+  params: Record<string, string>;
+  context?: D;
+}
+
+export type LoaderFunctionArgs<
+  P extends Record<string, unknown> = Record<string, unknown>,
+> = DataFunctionArgs<RequestContext<P>>;
+
+type DataFunctionValue = Response | NonNullable<unknown> | null;
+
+export type LoaderFunction = <
+  P extends Record<string, unknown> = Record<string, unknown>,
+>(
+  args: LoaderFunctionArgs<P>,
+) => Promise<DataFunctionValue> | DataFunctionValue;

package/src/runtime/utils.tsx

@@ -0,0 +1,161 @@
+import type { RouteObject } from '@modern-js/runtime-utils/router';
+import type { NestedRoute, PageRoute, SSRMode } from '@modern-js/types';
+import React from 'react';
+import { DefaultNotFound } from './DefaultNotFound';
+
+type RouterConfig = {
+  routesConfig: {
+    globalApp?: React.ComponentType<any>;
+    routes?: (NestedRoute | PageRoute)[];
+  };
+};
+
+type LayoutWrapperProps = {
+  [key: string]: unknown;
+};
+
+type GlobalAppProps = {
+  Component: React.ComponentType;
+  [key: string]: unknown;
+};
+
+export type ModernRouteObject = RouteObject & {
+  isClientComponent?: boolean;
+  hasClientLoader?: boolean;
+  hasLoader?: boolean;
+  hasAction?: boolean;
+  inValidSSRRoute?: boolean;
+  lazyImport?: () => Promise<{ default: React.ComponentType }>;
+};
+
+export function getRouteObjects(
+  routes: (NestedRoute | PageRoute)[],
+  {
+    globalApp,
+    ssrMode,
+    props,
+  }: {
+    globalApp?: React.ComponentType<GlobalAppProps>;
+    ssrMode?: SSRMode;
+    props?: Record<string, unknown>;
+  },
+) {
+  const createLayoutElement = (
+    Component: React.ComponentType,
+  ): React.ComponentType => {
+    const GlobalLayout = globalApp;
+    if (!GlobalLayout) {
+      return Component;
+    }
+
+    const LayoutWrapper = (props: LayoutWrapperProps) => {
+      const LayoutComponent = GlobalLayout;
+      return <LayoutComponent Component={Component} {...props} />;
+    };
+
+    return LayoutWrapper;
+  };
+
+  const routeObjects: RouteObject[] = [];
+
+  for (const route of routes) {
+    if (route.type === 'nested') {
+      const nestedRouteObject = {
+        path: route.path,
+        id: route.id,
+        loader: route.loader,
+        action: route.action,
+        hasErrorBoundary: route.hasErrorBoundary,
+        shouldRevalidate: route.shouldRevalidate,
+        handle: {
+          ...route.handle,
+          ...(typeof route.config === 'object' ? route.config?.handle : {}),
+        },
+        index: route.index,
+        hasLoader: Boolean(route.loader),
+        hasClientLoader: Boolean(route.clientData),
+        hasAction: Boolean(route.action),
+        ...(route.isClientComponent ? { isClientComponent: true } : {}),
+        ...(route.inValidSSRRoute ? { inValidSSRRoute: true } : {}),
+        lazyImport: route.lazyImport,
+        Component: route.component ? route.component : undefined,
+        errorElement: route.error ? <route.error /> : undefined,
+        children: route.children
+          ? route.children.map(
+              child =>
+                getRouteObjects([child], { globalApp, ssrMode, props })[0],
+            )
+          : undefined,
+      } as ModernRouteObject;
+
+      routeObjects.push(nestedRouteObject);
+    } else if (
+      typeof route.component === 'function' ||
+      typeof route.component === 'object'
+    ) {
+      const LayoutComponent = createLayoutElement(
+        route.component as React.ComponentType,
+      );
+      const routeObject: RouteObject = {
+        path: route.path,
+        element: React.createElement(LayoutComponent),
+      };
+
+      routeObjects.push(routeObject);
+    }
+  }
+
+  routeObjects.push({
+    path: '*',
+    element: <DefaultNotFound />,
+  });
+
+  return routeObjects;
+}
+
+export function createRouteObjectsFromConfig({
+  routesConfig,
+  props,
+  ssrMode,
+}: {
+  routesConfig: RouterConfig['routesConfig'];
+  props?: Record<string, unknown>;
+  ssrMode?: SSRMode;
+}): RouteObject[] | null {
+  if (!routesConfig) {
+    return null;
+  }
+  const { routes, globalApp } = routesConfig;
+  if (!routes) {
+    return null;
+  }
+  return getRouteObjects(routes, {
+    globalApp,
+    ssrMode,
+    props,
+  });
+}
+
+export const urlJoin = (...parts: string[]) => {
+  const separator = '/';
+  const replace = new RegExp(`${separator}{1,}`, 'g');
+  return standardSlash(parts.join(separator).replace(replace, separator));
+};
+
+export function standardSlash(str: string) {
+  let addr = str;
+  if (!addr || typeof addr !== 'string') {
+    return addr;
+  }
+  if (addr.startsWith('.')) {
+    addr = addr.slice(1);
+  }
+  if (!addr.startsWith('/')) {
+    addr = `/${addr}`;
+  }
+  if (addr.endsWith('/') && addr !== '/') {
+    addr = addr.slice(0, addr.length - 1);
+  }
+
+  return addr;
+}

package/src/runtime.ts

@@ -0,0 +1 @@
+export * from './runtime/index';