@quilted/quilt 0.0.0-Simpler-Quilt-app-context-component-20220421223224

package/source/index.ts

@@ -0,0 +1,103 @@
+export {createAsyncLoader} from '@quilted/async';
+export type {AsyncLoader} from '@quilted/async';
+export {
+  useAsync,
+  useAsyncAsset,
+  usePreload,
+  createAsyncComponent,
+} from '@quilted/react-async';
+export type {
+  NoOptions,
+  AssetLoadTiming,
+  HydrationTiming,
+  RenderTiming,
+  AsyncComponentType,
+  Preloadable,
+} from '@quilted/react-async';
+export {
+  GraphQLContext,
+  createGraphQL,
+  createGraphQLHttpFetch,
+  useQuery,
+  useGraphQL,
+  useMutation,
+} from '@quilted/react-graphql';
+export type {
+  GraphQL,
+  GraphQLResult,
+  GraphQLFetch,
+  GraphQLData,
+  GraphQLVariables,
+  GraphQLRequest,
+  GraphQLRequestContext,
+  GraphQLOperation,
+  GraphQLOperationType,
+  GraphQLDeepPartialData,
+  GraphQLHttpFetchContext,
+  GraphQLHttpFetchOptions,
+  PickGraphQLType,
+  GraphQLVariableOptions,
+  GraphQLQueryOptions,
+  GraphQLMutationOptions,
+} from '@quilted/react-graphql';
+export {useIdleCallback} from '@quilted/react-idle';
+export {ServerAction, useServerAction} from '@quilted/react-server-render';
+export type {
+  ServerActionKind,
+  ServerActionOptions,
+  ServerActionPerform,
+  ServerRenderPass,
+} from '@quilted/react-server-render';
+export {
+  Localization,
+  useLocale,
+  useLocaleFromEnvironment,
+  useLocalizedFormatting,
+} from '@quilted/react-localize';
+export type {
+  LocalizedFormatting,
+  LocalizedFormattingCache,
+  LocalizedNumberFormatOptions,
+  LocalizedDateTimeFormatOptions,
+} from '@quilted/react-localize';
+export {
+  PerformanceContext,
+  usePerformance,
+  usePerformanceNavigation,
+} from '@quilted/react-performance';
+export type {
+  Performance,
+  PerformanceNavigation,
+  PerformanceInflightNavigation,
+} from '@quilted/react-performance';
+export {
+  Link,
+  Redirect,
+  Router,
+  Preloader,
+  NavigationBlock,
+  useCurrentUrl,
+  useInitialUrl,
+  useRouter,
+  useRoutes,
+  useMatch,
+  useNavigate,
+  useRedirect,
+  useNavigationBlock,
+  useScrollRestoration,
+  useRouteChangeFocusRef,
+} from '@quilted/react-router';
+export type {NavigateTo, RouteDefinition} from '@quilted/react-router';
+export {
+  useWorker,
+  createWorker,
+  createCallableWorker,
+} from '@quilted/react-workers';
+export type {
+  BasicWorkerCreator,
+  CallableWorkerCreator,
+} from '@quilted/react-workers';
+export {useCookie, useCookies, CookieContext} from '@quilted/react-http';
+export type {PropsWithChildren} from '@quilted/useful-react-types';
+
+export {AppContext} from './AppContext';

package/source/magic/app.ts

@@ -0,0 +1,5 @@
+import type {ComponentType} from 'react';
+
+declare const App: ComponentType<Record<string, unknown>>;
+
+export default App;

package/source/magic/asset-loader.ts

@@ -0,0 +1,5 @@
+import type {AssetLoader} from '@quilted/async/server';
+
+declare const assets: AssetLoader<{userAgent?: string}>;
+
+export default assets;

package/source/magic/http-handler.ts

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

package/source/matchers.ts

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

package/source/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/source/polyfills/base.ts

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

package/source/polyfills/crypto.ts

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

package/source/polyfills/fetch.ts

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

package/source/polyfills/noop.ts

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

package/source/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/source/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/source/react/server.ts

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

package/source/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/source/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/source/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/source/server/index.ts

@@ -0,0 +1,45 @@
+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 {
+  ServerActionKind,
+  ServerActionOptions,
+  ServerActionPerform,
+  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/source/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/source/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),
+      ),
+    ),
+  );
+}