@quilted/quilt 0.0.0-fix-react-types-20220320044002

package/src/magic/http-handler.ts

@@ -0,0 +1,5 @@
+import type {HttpHandler} from '@quilted/http-handlers';
+
+declare const handler: HttpHandler;
+
+export default handler;

package/src/matchers.ts

@@ -0,0 +1,2 @@
+import '@quilted/react-testing/matchers';
+import '@quilted/graphql/matchers';

package/src/polyfills/README.md

@@ -0,0 +1,3 @@
+# `@quilted/quilt/polyfills/*`
+
+This directory re-exports the polyfills provided by `@quilted/polyfills`. This is done because most consumers will have a dependency only on `@quilted/quilt`, not `@quilted/polyfills`, but we need to insert imports for polyfills into “app code”. Strict package managers, like `pnpm`, will then install `@quilted/polyfills` in such a way that imports of that package fail to resolve. To fix this, we re-export all the entry points that can be inserted in app code from `@quilted/quilt/polyfills/*`.

package/src/polyfills/base.ts

@@ -0,0 +1 @@
+import '@quilted/polyfills/base';

package/src/polyfills/crypto.ts

@@ -0,0 +1 @@
+import '@quilted/polyfills/crypto';

package/src/polyfills/fetch.ts

@@ -0,0 +1 @@
+import '@quilted/polyfills/fetch';

package/src/polyfills/noop.ts

@@ -0,0 +1 @@
+import '@quilted/polyfills/noop';

package/src/react/index.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error This module is not imported for types
+export * from '@quilted/react';
+// @ts-expect-error This module is not imported for types
+export {default} from '@quilted/react';

package/src/react/jsx-runtime.ts

@@ -0,0 +1,2 @@
+// @ts-expect-error This module is not imported for types
+export * from '@quilted/react/jsx-runtime';

package/src/react/server.ts

@@ -0,0 +1,2 @@
+// @ts-expect-error This module is never imported for types
+export * from '@quilted/react/server';

package/src/react/test-utils.ts

@@ -0,0 +1,2 @@
+// @ts-expect-error This module is not imported for types
+export * from '@quilted/react/test-utils';

package/src/server/ServerContext.tsx

@@ -0,0 +1,42 @@
+import type {PropsWithChildren} from 'react';
+
+import {InitialUrlContext} from '@quilted/react-router';
+import {HtmlContext} from '@quilted/react-html/server';
+import type {HtmlManager} from '@quilted/react-html/server';
+import {AsyncAssetContext} from '@quilted/react-async/server';
+import type {AsyncAssetManager} from '@quilted/react-async/server';
+import {HttpServerContext} from '@quilted/react-http/server';
+import type {HttpManager} from '@quilted/react-http/server';
+
+import {maybeWrapContext} from '../utilities/react';
+
+interface Props {
+  url?: string | URL;
+  html?: HtmlManager;
+  http?: HttpManager;
+  asyncAssets?: AsyncAssetManager;
+}
+
+export function ServerContext({
+  url,
+  html,
+  http,
+  asyncAssets,
+  children,
+}: PropsWithChildren<Props>) {
+  const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
+
+  return maybeWrapContext(
+    AsyncAssetContext,
+    asyncAssets,
+    maybeWrapContext(
+      HttpServerContext,
+      http,
+      maybeWrapContext(
+        HtmlContext,
+        html,
+        maybeWrapContext(InitialUrlContext, normalizedUrl, children),
+      ),
+    ),
+  );
+}

package/src/server/http-handler.tsx

@@ -0,0 +1,101 @@
+import type {ComponentType, ReactElement} from 'react';
+
+import type {AssetLoader} from '@quilted/async/server';
+import {render as renderToString, Html} from '@quilted/react-html/server';
+import type {Options as ExtractOptions} from '@quilted/react-server-render/server';
+
+import {createHttpHandler, html, redirect} from '@quilted/http-handlers';
+import type {
+  Request,
+  HttpHandler,
+  RequestHandler,
+} from '@quilted/http-handlers';
+
+import {renderApp} from './render';
+
+export interface Options<Props = Record<string, never>> extends ExtractOptions {
+  assets?: AssetLoader<unknown>;
+  handler?: HttpHandler;
+  renderProps?(options: {request: Request}): Props;
+}
+
+export function createServerRenderingHttpHandler<Props>(
+  App: ComponentType<Props>,
+  {handler = createHttpHandler(), ...options}: Options<Props>,
+) {
+  handler.get(createServerRenderingRequestHandler(App, options));
+  return handler;
+}
+
+export function createServerRenderingRequestHandler<Props>(
+  App: ComponentType<Props>,
+  {renderProps, ...options}: Omit<Options<Props>, 'handler'> = {},
+): RequestHandler {
+  return (request) => {
+    return renderToResponse(
+      <App {...(renderProps?.({request}) as any)} />,
+      request,
+      options,
+    );
+  };
+}
+
+export async function renderToResponse<Props>(
+  element: ReactElement<Props>,
+  request: Request,
+  {assets, ...options}: Omit<Options<Props>, 'handler' | 'renderProps'> = {},
+) {
+  const accepts = request.headers.get('Accept');
+
+  if (accepts != null && !accepts.includes('text/html')) return;
+
+  const {
+    html: htmlManager,
+    http,
+    markup,
+    asyncAssets,
+  } = await renderApp(element, {
+    ...options,
+    url: request.url,
+    headers: request.headers,
+  });
+
+  const {headers, statusCode = 200, redirectUrl} = http.state;
+
+  if (redirectUrl) {
+    return redirect(redirectUrl, {
+      status: statusCode as 301,
+      headers,
+    });
+  }
+
+  const usedAssets = asyncAssets.used({timing: 'load'});
+  const assetOptions = {userAgent: request.headers.get('User-Agent')};
+
+  const [styles, scripts, preload] = assets
+    ? await Promise.all([
+        assets.styles({async: usedAssets, options: assetOptions}),
+        assets.scripts({async: usedAssets, options: assetOptions}),
+        assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
+          options: assetOptions,
+        }),
+      ])
+    : [];
+
+  return html(
+    renderToString(
+      <Html
+        manager={htmlManager}
+        styles={styles}
+        scripts={scripts}
+        preloadAssets={preload}
+      >
+        {markup}
+      </Html>,
+    ),
+    {
+      headers,
+      status: statusCode,
+    },
+  );
+}

package/src/server/index.ts

@@ -0,0 +1,40 @@
+export {
+  render,
+  Html,
+  Serialize,
+  HtmlManager,
+  HtmlContext,
+  SERVER_ACTION_ID as HTML_SERVER_ACTION_ID,
+} from '@quilted/react-html/server';
+export {
+  ServerAction,
+  useServerAction,
+  ServerRenderManager,
+  ServerRenderContext,
+  extract,
+} from '@quilted/react-server-render/server';
+export {createAssetLoader} from '@quilted/async/server';
+export type {
+  Asset,
+  AssetLoader,
+  AssetSelector,
+  AssetManifest,
+  AssetManifestEntry,
+} from '@quilted/async/server';
+export {
+  AsyncAssetContext,
+  AsyncAssetManager,
+  SERVER_ACTION_ID as ASYNC_ASSETS_SERVER_ACTION_ID,
+} from '@quilted/react-async/server';
+export type {ServerRenderPass} from '@quilted/react-server-render/server';
+export {renderEmail} from '@quilted/react-email/server';
+export type {HttpState} from '@quilted/react-http/server';
+export {createHttpHandler} from '@quilted/http-handlers';
+
+export {renderApp} from './render';
+export {ServerContext} from './ServerContext';
+export {
+  createServerRenderingRequestHandler,
+  createServerRenderingHttpHandler,
+  renderToResponse,
+} from './http-handler';

package/src/server/render.tsx

@@ -0,0 +1,43 @@
+import type {ReactElement} from 'react';
+
+import {extract} from '@quilted/react-server-render/server';
+import type {Options as ExtractOptions} from '@quilted/react-server-render/server';
+import {HtmlManager} from '@quilted/react-html/server';
+import {HttpManager} from '@quilted/react-http/server';
+import {AsyncAssetManager} from '@quilted/react-async/server';
+
+import {ServerContext} from './ServerContext';
+
+interface Options extends ExtractOptions {
+  url?: string | URL;
+  headers?: NonNullable<
+    ConstructorParameters<typeof HttpManager>[0]
+  >['headers'];
+}
+
+export async function renderApp(
+  app: ReactElement<any>,
+  {decorate, url, headers, ...rest}: Options = {},
+) {
+  const html = new HtmlManager();
+  const asyncAssets = new AsyncAssetManager();
+  const http = new HttpManager({headers});
+
+  const markup = await extract(app, {
+    decorate(app) {
+      return (
+        <ServerContext
+          asyncAssets={asyncAssets}
+          http={http}
+          html={html}
+          url={url}
+        >
+          {decorate?.(app) ?? app}
+        </ServerContext>
+      );
+    },
+    ...rest,
+  });
+
+  return {markup, http, html, asyncAssets};
+}

package/src/static/StaticContext.tsx

@@ -0,0 +1,42 @@
+import type {PropsWithChildren} from 'react';
+
+import {InitialUrlContext} from '@quilted/react-router';
+import {HtmlContext} from '@quilted/react-html/server';
+import type {HtmlManager} from '@quilted/react-html/server';
+import {AsyncAssetContext} from '@quilted/react-async/server';
+import type {AsyncAssetManager} from '@quilted/react-async/server';
+import {HttpServerContext} from '@quilted/react-http/server';
+import type {HttpManager} from '@quilted/react-http/server';
+
+import {maybeWrapContext} from '../utilities/react';
+
+interface Props {
+  url?: string | URL;
+  html?: HtmlManager;
+  http?: HttpManager;
+  asyncAssets?: AsyncAssetManager;
+}
+
+export function StaticContext({
+  url,
+  html,
+  http,
+  asyncAssets,
+  children,
+}: PropsWithChildren<Props>) {
+  const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
+
+  return maybeWrapContext(
+    AsyncAssetContext,
+    asyncAssets,
+    maybeWrapContext(
+      HttpServerContext,
+      http,
+      maybeWrapContext(
+        HtmlContext,
+        html,
+        maybeWrapContext(InitialUrlContext, normalizedUrl, children),
+      ),
+    ),
+  );
+}

package/src/static/index.tsx

@@ -0,0 +1,307 @@
+import type {ComponentType} from 'react';
+
+import type {AssetLoader} from '@quilted/async/server';
+import {render, Html} from '@quilted/react-html/server';
+import type {RouteDefinition} from '@quilted/react-router';
+import {
+  StaticRenderer,
+  StaticRendererContext,
+} from '@quilted/react-router/static';
+import type {HttpState} from '@quilted/react-http/server';
+
+import {renderApp} from './render';
+
+export interface RenderDetails {
+  readonly route: string;
+  readonly hasChildren: boolean;
+  readonly fallback: boolean;
+  readonly content: string;
+  readonly http: HttpState;
+}
+
+interface RenderableRoute {
+  route: string;
+  fallback: boolean;
+}
+
+export interface Options {
+  routes: string[];
+  assets: AssetLoader<{modules: boolean}>;
+  crawl?: boolean;
+  baseUrl?: string;
+  prettify?: boolean;
+  onRender(details: RenderDetails): void | Promise<void>;
+}
+
+const BASE_URL = 'http://localhost:3000';
+
+export async function renderStatic(
+  App: ComponentType<any>,
+  {
+    assets,
+    routes: startingRoutes,
+    onRender,
+    crawl = true,
+    baseUrl = BASE_URL,
+    prettify = true,
+  }: Options,
+) {
+  const routesToHandle = startingRoutes.map<RenderableRoute>((route) => ({
+    route: removePostfixSlash(new URL(route, baseUrl).pathname),
+    fallback: false,
+  }));
+  const seenRoutes = [...routesToHandle];
+  const seenRouteIds = new Set<string>(seenRoutes.map(({route}) => route));
+
+  let renderableRoute: RenderableRoute | undefined;
+
+  while ((renderableRoute = routesToHandle.shift())) {
+    const {route, fallback} = renderableRoute;
+
+    const url = new URL(route, baseUrl);
+
+    const {html, http, routes} = await renderUrl(url, {fallback});
+
+    if (crawl) {
+      for (const {
+        routes: routeDefinitions,
+        fallback = false,
+        consumedPath,
+        prefix,
+      } of routes) {
+        const basePathname = joinPath(prefix, consumedPath);
+        const baseId =
+          basePathname === '/'
+            ? basePathname
+            : `__QUILT_BASE_${basePathname}__`;
+
+        for (const routeDefinition of routeDefinitions) {
+          await recordRouteDefinition(routeDefinition, {
+            baseId,
+            basePathname,
+            addFallbacks: fallback,
+          });
+        }
+
+        if (
+          fallback &&
+          routeDefinitions[routeDefinitions.length - 1]?.match != null
+        ) {
+          await recordRouteDefinition(
+            {},
+            {
+              baseId,
+              basePathname,
+              addFallbacks: fallback,
+            },
+          );
+        }
+      }
+    }
+
+    await onRender({
+      route,
+      content: html,
+      http,
+      fallback,
+      hasChildren:
+        !fallback &&
+        seenRoutes.some((otherRoute) =>
+          otherRoute.route.startsWith(`${route}/`),
+        ),
+    });
+  }
+
+  async function recordRouteDefinition(
+    {match, children, renderStatic}: RouteDefinition,
+    {
+      basePathname,
+      baseId,
+      addFallbacks,
+    }: {basePathname: string; baseId: string; addFallbacks: boolean},
+  ) {
+    if (renderStatic === false) return;
+
+    let routeId: string;
+    const hasChildren = children && children.length > 0;
+    const hasManualMatches =
+      typeof renderStatic === 'function' && typeof match !== 'string';
+
+    const matchedRoutes: {id: string; route: string; fallback: boolean}[] = [];
+
+    if (typeof match === 'string') {
+      routeId = joinPath(baseId, match);
+      matchedRoutes.push({
+        id: routeId,
+        route: joinPath(basePathname, match),
+        fallback: false,
+      });
+    } else if (typeof match === 'function') {
+      routeId = joinPath(
+        baseId,
+        `__QUILT_FUNCTION_ROUTE_${match.toString()}__`,
+      );
+    } else if (match instanceof RegExp) {
+      routeId = joinPath(`__QUILT_REGEX_ROUTE_${match.source}__`);
+    } else {
+      routeId = joinPath(baseId, '__QUILT_FALLBACK_ROUTE__');
+
+      if (!hasManualMatches) {
+        matchedRoutes.push({id: routeId, route: basePathname, fallback: true});
+      }
+    }
+
+    if (seenRouteIds.has(routeId)) return;
+    seenRouteIds.add(routeId);
+
+    if (typeof renderStatic === 'function' && typeof match !== 'string') {
+      const matchedRouteParts = await renderStatic();
+
+      for (const routePart of matchedRouteParts) {
+        const id = joinPath(baseId, `__QUILT_MATCH_${routePart}__`);
+        seenRouteIds.add(id);
+
+        matchedRoutes.push({
+          id,
+          route: joinPath(basePathname, routePart),
+          fallback: false,
+        });
+      }
+    }
+
+    if (hasChildren) {
+      for (const {id, route} of matchedRoutes) {
+        for (const child of children!) {
+          await recordRouteDefinition(child, {
+            addFallbacks,
+            basePathname: route,
+            baseId: id,
+          });
+        }
+
+        if (addFallbacks && children![children!.length - 1]?.match != null) {
+          await recordRouteDefinition(
+            {},
+            {
+              addFallbacks,
+              basePathname: route,
+              baseId: id,
+            },
+          );
+        }
+      }
+
+      return;
+    }
+
+    for (const {route, fallback} of matchedRoutes) {
+      const renderableRoute = {route, fallback};
+      seenRoutes.push(renderableRoute);
+      routesToHandle.push(renderableRoute);
+    }
+  }
+
+  async function renderUrl(url: URL, {fallback = false} = {}) {
+    const routeRecorder = new StaticRenderer({
+      forceFallback: fallback ? url.pathname : undefined,
+    });
+
+    const {
+      http,
+      html: htmlManager,
+      markup,
+      asyncAssets,
+    } = await renderApp(<App />, {
+      url,
+      decorate(app) {
+        return (
+          <StaticRendererContext.Provider value={routeRecorder}>
+            {app}
+          </StaticRendererContext.Provider>
+        );
+      },
+    });
+
+    const usedAssets = asyncAssets.used({timing: 'load'});
+
+    const [
+      moduleStyles,
+      moduleScripts,
+      modulePreload,
+      nomoduleStyles,
+      nomoduleScripts,
+    ] = await Promise.all([
+      assets.styles({async: usedAssets, options: {modules: true}}),
+      assets.scripts({async: usedAssets, options: {modules: true}}),
+      assets.asyncAssets(asyncAssets.used({timing: 'preload'}), {
+        options: {modules: true},
+      }),
+      assets.styles({async: usedAssets, options: {modules: false}}),
+      assets.scripts({async: usedAssets, options: {modules: false}}),
+    ]);
+
+    // We don’t want to load styles from both bundles, so we only use module styles,
+    // since modules are intended to be the default and CSS (usually) doesn’t
+    // have features that meaningfully break older user agents.
+    const styles = moduleStyles.length > 0 ? moduleStyles : nomoduleStyles;
+
+    // If there are nomodule scripts, we can’t really do preloading, because we can’t
+    // prevent the nomodule scripts from being preloaded in module browsers. If there
+    // are only module scripts, we can preload those.
+    const preload = nomoduleScripts.length > 0 ? [] : modulePreload;
+
+    const scripts = [
+      ...moduleScripts,
+      ...nomoduleScripts.map((script) => ({...script, nomodule: true})),
+    ];
+
+    const minifiedHtml = render(
+      <Html
+        manager={htmlManager}
+        styles={styles}
+        scripts={scripts}
+        preloadAssets={preload}
+      >
+        {markup}
+      </Html>,
+    );
+
+    const html = prettify ? await prettifyHtml(minifiedHtml) : minifiedHtml;
+
+    return {
+      html,
+      http: http.state,
+      routes: routeRecorder.state,
+    };
+  }
+}
+
+async function prettifyHtml(html: string) {
+  try {
+    const {default: prettier} = await import('prettier');
+    return prettier.format(html, {parser: 'html'});
+  } catch (error) {
+    return html;
+  }
+}
+
+function joinPath(...parts: (string | undefined | null | false)[]) {
+  let path = '/';
+
+  for (const part of parts) {
+    if (typeof part !== 'string') continue;
+    const normalizedPart = part.startsWith('/') ? part.slice(1) : part;
+    if (normalizedPart.length === 0) continue;
+    if (path !== '/') path += '/';
+    path += normalizedPart;
+    path = removePostfixSlash(path);
+  }
+
+  return path;
+}
+
+function removePostfixSlash(value: string) {
+  return value.endsWith('/') && value !== '/'
+    ? value.slice(0, value.length - 1)
+    : value;
+}

package/src/static/render.tsx

@@ -0,0 +1,43 @@
+import type {ReactElement} from 'react';
+
+import {extract} from '@quilted/react-server-render/server';
+import type {Options as ExtractOptions} from '@quilted/react-server-render/server';
+import {HtmlManager} from '@quilted/react-html/server';
+import {HttpManager} from '@quilted/react-http/server';
+import {AsyncAssetManager} from '@quilted/react-async/server';
+
+import {StaticContext} from './StaticContext';
+
+interface Options extends ExtractOptions {
+  url?: string | URL;
+  headers?: NonNullable<
+    ConstructorParameters<typeof HttpManager>[0]
+  >['headers'];
+}
+
+export async function renderApp(
+  app: ReactElement<any>,
+  {decorate, url, headers, ...rest}: Options = {},
+) {
+  const html = new HtmlManager();
+  const asyncAssets = new AsyncAssetManager();
+  const http = new HttpManager({headers});
+
+  const markup = await extract(app, {
+    decorate(app) {
+      return (
+        <StaticContext
+          asyncAssets={asyncAssets}
+          html={html}
+          http={http}
+          url={url}
+        >
+          {decorate?.(app) ?? app}
+        </StaticContext>
+      );
+    },
+    ...rest,
+  });
+
+  return {markup, http, html, asyncAssets};
+}

package/src/testing.ts

@@ -0,0 +1,7 @@
+export {mount, unmountAll, createMount} from '@quilted/react-testing';
+export {TestRouter, createTestRouter} from '@quilted/react-router/testing';
+export {
+  TestGraphQL,
+  createFiller,
+  createTestGraphQL,
+} from '@quilted/react-graphql/testing';

package/src/utilities/react.tsx

@@ -0,0 +1,13 @@
+import type {Context as ReactContext, ReactNode, ReactElement} from 'react';
+
+export function maybeWrapContext<T>(
+  Context: ReactContext<T>,
+  value: T | null | undefined,
+  children: ReactNode,
+): ReactElement {
+  return value ? (
+    <Context.Provider value={value}>{children}</Context.Provider>
+  ) : (
+    (children as any)
+  );
+}