@quilted/create 0.1.78 → 0.1.80

package/templates/app-graphql/server.tsx

@@ -1,50 +1,53 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 
-import {createRequestRouter, json} from '@quilted/quilt/request-router';
-import {createServerRender} from '@quilted/quilt/server';
+import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
 import {type GraphQLFetch} from '@quilted/quilt/graphql';
-import {createBrowserAssets} from '@quilted/quilt/magic/assets';
+import {BrowserAssets} from '@quilted/quilt/magic/assets';
 
-const router = createRequestRouter();
+const router = new RequestRouter();
+const assets = new BrowserAssets();
 
 // GraphQL API, called from the client
 router.post('/api/graphql', async (request) => {
-  const [{performGraphQLOperation}, {query, operationName, variables}] =
-    await Promise.all([import('./server/graphql.ts'), request.json()]);
+  const [{query, operationName, variables}, {performGraphQLOperation}] =
+    await Promise.all([request.json(), import('./server/graphql.ts')]);
 
   const result = await performGraphQLOperation(query, {
     variables,
     operationName,
   });
 
-  return json(result);
+  return new JSONResponse(result);
 });
 
 // For all GET requests, render our React application.
-router.get(
-  createServerRender(
-    async () => {
-      const [{default: App}, {performGraphQLOperation}] = await Promise.all([
-        import('./App.tsx'),
-        import('./server/graphql.ts'),
-      ]);
-
-      // GraphQL API, called during server rendering
-      const fetchGraphQL: GraphQLFetch = async (operation, variables) => {
-        const result = await performGraphQLOperation(operation.source, {
-          variables,
-          operationName: operation.name,
-        });
-
-        return result;
-      };
-
-      return <App fetchGraphQL={fetchGraphQL} />;
-    },
-    {
-      assets: createBrowserAssets(),
-    },
-  ),
-);
+router.get(async (request) => {
+  const [{App}, {performGraphQLOperation}, {renderToResponse}] =
+    await Promise.all([
+      import('./App.tsx'),
+      import('./server/graphql.ts'),
+      import('@quilted/quilt/server'),
+    ]);
+
+  // GraphQL API, called during server rendering
+  const fetchGraphQL: GraphQLFetch = async (operation, options) => {
+    const result = await performGraphQLOperation<any>(
+      (operation as any).source,
+      {
+        variables: options?.variables as any,
+        operationName: (operation as any).name,
+      },
+    );
+
+    return result;
+  };
+
+  const response = await renderToResponse(<App fetchGraphQL={fetchGraphQL} />, {
+    request,
+    assets,
+  });
+
+  return response;
+});
 
 export default router;

package/templates/app-graphql/shared/context.ts

@@ -1,14 +1,9 @@
 import {
   createOptionalContext,
   createUseContextHook,
-  createUseOptionalValueHook,
-} from '@quilted/quilt';
+} from '@quilted/quilt/react/tools';
 
 export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = createUseContextHook(AppContextReact);
-
-export function createUseAppContextHook<T>(hook: (context: AppContext) => T) {
-  return createUseOptionalValueHook<T>(() => hook(useAppContext()));
-}

package/templates/app-graphql/tests/graphql.ts

@@ -1,9 +1,8 @@
 import {
-  TestGraphQL,
+  GraphQLTesting,
+  GraphQLController,
   createGraphQLSchema,
   createGraphQLFiller,
-  createGraphQLController,
-  type GraphQLController,
 } from '@quilted/quilt/graphql/testing';
 
 import schemaSource from '../graphql/schema.ts';
@@ -11,4 +10,4 @@ import schemaSource from '../graphql/schema.ts';
 export const schema = createGraphQLSchema(schemaSource);
 export const fillGraphQL = createGraphQLFiller(schema);
 
-export {createGraphQLController, TestGraphQL, type GraphQLController};
+export {GraphQLController, GraphQLTesting};

package/templates/app-graphql/tests/render/render.tsx

@@ -1,13 +1,12 @@
-import {
-  createRender,
-  QuiltAppTesting,
-  createTestRouter,
-} from '@quilted/quilt/testing';
+import {createRender} from '@quilted/quilt/react/testing';
+import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
+import {Localization} from '@quilted/quilt/localize';
+
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
 import {AppContextReact} from '~/shared/context.ts';
 
-import {TestGraphQL, createGraphQLController} from '../graphql.ts';
+import {GraphQLTesting, GraphQLController} from '../graphql.ts';
 
 import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
@@ -24,23 +23,25 @@ export const renderApp = createRender<
   // Create context that can be used by the `render` function, and referenced by test
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
-  context({router = createTestRouter(), graphql = createGraphQLController()}) {
+  context({router = new TestRouter(), graphql = new GraphQLController()}) {
     return {router, graphql, queryClient: new QueryClient()};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale}) {
+  render(element, context, {locale = 'en'}) {
     const {router, graphql, queryClient} = context;
 
     return (
-      <QuiltAppTesting routing={router} localization={locale}>
-        <AppContextReact.Provider value={context}>
-          <TestGraphQL controller={graphql}>
+      <Localization locale={locale}>
+        <TestRouting router={router}>
+          <GraphQLTesting controller={graphql}>
             <QueryClientProvider client={queryClient}>
-              {element}
+              <AppContextReact.Provider value={context}>
+                {element}
+              </AppContextReact.Provider>
             </QueryClientProvider>
-          </TestGraphQL>
-        </AppContextReact.Provider>
-      </QuiltAppTesting>
+          </GraphQLTesting>
+        </TestRouting>
+      </Localization>
     );
   },
   async afterRender(wrapper) {

package/templates/app-graphql/tests/render/types.ts

@@ -1,12 +1,10 @@
-import type {createTestRouter} from '@quilted/quilt/testing';
+import type {TestRouter} from '@quilted/quilt/navigate/testing';
 import type {QueryClient} from '@tanstack/react-query';
 
 import type {AppContext} from '~/shared/context.ts';
 
 import type {GraphQLController} from '../graphql.ts';
 
-type Router = ReturnType<typeof createTestRouter>;
-
 export interface RenderOptions {
   /**
    * A custom router to use for this component test. You can use a
@@ -14,7 +12,7 @@ export interface RenderOptions {
    * its navigation method to check that components navigate as
    * you expect.
    */
-  readonly router?: Router;
+  readonly router?: TestRouter;
 
   /**
    * An object that controls the responses to GraphQL queries and mutations
@@ -23,15 +21,16 @@ export interface RenderOptions {
    * by this module.
    *
    * ```tsx
-   * import {renderWithAppContext, fillGraphQL, createGraphQLController} from '~/tests/render.tsx';
+   * import {renderApp} from '~/tests/render.ts';
+   * import {fillGraphQL, GraphQLController} from '~/tests/graphql.ts';
    *
    * import {MyComponent} from './MyComponent.tsx';
    * import myComponentQuery from './MyComponentQuery.graphql';
    *
-   * const myComponent = await renderWithAppContext(<MyComponent />, {
-   *   graphql: createGraphQLController(
-   *     fillGraphQL(myComponentQuery, {user: {name: 'Winston'}}),
-   *   ),
+   * const myComponent = await renderApp(<MyComponent />, {
+   *   graphql: new GraphQLController([
+   *     fillGraphQL(myComponentQuery, {me: {name: 'Winston'}}),
+   *   ]),
    * });
    * ```
    */
@@ -47,7 +46,7 @@ export interface RenderContext extends AppContext {
   /**
    * The router used for this component test.
    */
-  readonly router: Router;
+  readonly router: TestRouter;
 
   /**
    * The GraphQL controller used for this component test.

package/templates/app-graphql/tests/render.ts

@@ -1,7 +1,6 @@
-import '@quilted/quilt/matchers';
+import '@quilted/quilt/react/testing';
 
-export {createTestRouter} from '@quilted/quilt/testing';
+export {TestRouter} from '@quilted/quilt/navigate/testing';
 
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';
-export {fillGraphQL, createGraphQLController} from './graphql.ts';

package/templates/app-graphql/tsconfig.json

@@ -8,6 +8,6 @@
     }
   },
   "include": ["**/*"],
-  "exclude": ["build", "quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": ["build", "quilt.project.ts"],
   "references": []
 }

package/templates/app-trpc/App.tsx

@@ -1,38 +1,47 @@
-import {
-  QuiltApp,
-  useRoutes,
-  type PropsWithChildren,
-  useInitialUrl,
-} from '@quilted/quilt';
+import {useMemo} from 'react';
+
+import {HTML} from '@quilted/quilt/html';
+import {Routing, useRoutes, useInitialUrl} from '@quilted/quilt/navigate';
+import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {type PropsWithChildren} from '@quilted/quilt/react/tools';
 
 import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 import {ReactQueryContext} from '@quilted/react-query';
 
+import {Head} from './foundation/html.ts';
+import {Headers} from './foundation/http.ts';
+import {Frame} from './foundation/frame.ts';
+
+import {Start} from './features/start.ts';
+
+import {trpc} from './shared/trpc.ts';
 import {
   AppContextReact,
   type AppContext as AppContextType,
-} from '~/shared/context.ts';
-import {trpc} from '~/shared/trpc.ts';
+} from './shared/context.ts';
 
-import {Http} from './foundation/Http.tsx';
-import {Head} from './foundation/Head.tsx';
-import {Metrics} from './foundation/Metrics.tsx';
-
-import {Start} from './features/Start.tsx';
-import {useMemo} from 'react';
-
-export interface Props extends AppContextType {}
+export interface AppProps extends AppContextType {}
 
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export default function App(props: Props) {
+export function App(props: AppProps) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
+
   return (
-    <QuiltApp http={<Http />} html={<Head />}>
-      <AppContext {...props}>
-        <Routes />
-      </AppContext>
-    </QuiltApp>
+    <HTML>
+      <Localization locale={locale}>
+        <Routing>
+          <AppContext {...props}>
+            <Headers />
+            <Head />
+            <Frame>
+              <Routes />
+            </Frame>
+          </AppContext>
+        </Routing>
+      </Localization>
+    </HTML>
   );
 }
 
@@ -45,10 +54,7 @@ function Routes() {
 }
 
 // This component renders any app-wide context.
-function AppContext({
-  children,
-  ...appContext
-}: PropsWithChildren<AppContextType>) {
+function AppContext({children, ...context}: PropsWithChildren<AppProps>) {
   const initialUrl = useInitialUrl();
 
   const {queryClient, trpcClient} = useMemo(() => {
@@ -65,12 +71,12 @@ function AppContext({
   }, [initialUrl]);
 
   return (
-    <AppContextReact.Provider value={appContext}>
-      <Metrics>
-        <trpc.Provider client={trpcClient} queryClient={queryClient}>
-          <ReactQueryContext client={queryClient}>{children}</ReactQueryContext>
-        </trpc.Provider>
-      </Metrics>
-    </AppContextReact.Provider>
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <ReactQueryContext client={queryClient}>
+        <AppContextReact.Provider value={context}>
+          {children}
+        </AppContextReact.Provider>
+      </ReactQueryContext>
+    </trpc.Provider>
   );
 }

package/templates/app-trpc/browser.tsx

@@ -1,10 +1,10 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
 import {httpBatchLink} from '@trpc/client';
 
 import {trpc} from '~/shared/trpc.ts';
 
-import App from './App.tsx';
+import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 

package/templates/app-trpc/features/{Start → start/Start}/Start.test.tsx

@@ -1,12 +1,12 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
 
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.ts';
 
 import Start from './Start.tsx';
 
 describe('<Start />', () => {
   it('includes a welcome message', async () => {
-    const start = await renderWithAppContext(<Start />);
+    const start = await renderApp(<Start />);
     expect(start).toContainReactText('Hello world!');
   });
 });

package/templates/app-trpc/features/start/Start/Start.tsx

@@ -0,0 +1,9 @@
+import {trpc} from '~/shared/trpc.ts';
+
+import styles from './Start.module.css';
+
+export default function Start() {
+  const [data] = trpc.message.useSuspenseQuery('world');
+
+  return <div className={styles.Start}>{data}</div>;
+}

package/templates/app-trpc/features/start.ts

@@ -0,0 +1,5 @@
+import {createAsyncComponent} from '@quilted/quilt/async';
+
+export const Start = createAsyncComponent(
+  () => import('./start/Start/Start.tsx'),
+);

package/templates/app-trpc/foundation/frame/Frame.module.css

@@ -0,0 +1,14 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+}
+
+.Frame {
+  padding: 1rem;
+}

package/templates/app-trpc/foundation/frame/Frame.tsx

@@ -0,0 +1,7 @@
+import type {PropsWithChildren} from '@quilted/quilt/react/tools';
+
+import styles from './Frame.module.css';
+
+export function Frame({children}: PropsWithChildren) {
+  return <div className={styles.Frame}>{children}</div>;
+}

package/templates/app-trpc/foundation/frame.ts

@@ -0,0 +1 @@
+export {Frame} from './frame/Frame.tsx';

package/templates/{app-graphql/foundation/Head → app-trpc/foundation/html}/Head.test.tsx

@@ -1,13 +1,13 @@
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {Viewport, SearchRobots} from '@quilted/quilt/html';
 
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.ts';
 
 import {Head} from './Head.tsx';
 
 describe('<Head />', () => {
   it('includes a responsive viewport tag', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
 
     expect(head).toContainReactComponent(Viewport, {
       cover: true,
@@ -15,7 +15,7 @@ describe('<Head />', () => {
   });
 
   it('prevents search robots from indexing the application', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
 
     expect(head).toContainReactComponent(SearchRobots, {
       index: false,

package/templates/app-trpc/foundation/html.ts

@@ -0,0 +1 @@
+export {Head} from './html/Head.tsx';

package/templates/{app-graphql/foundation/Http/Http.test.tsx → app-trpc/foundation/http/Headers.test.tsx}

@@ -1,23 +1,23 @@
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
 
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.ts';
 
-import {Http} from './Http.tsx';
+import {Headers} from './Headers.tsx';
 
-describe('<Http />', () => {
+describe('<Headers />', () => {
   it('does not cache the response', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
 
-    expect(http).toContainReactComponent(CacheControl, {
+    expect(headers).toContainReactComponent(CacheControl, {
       cache: false,
     });
   });
 
   it('adds a content security policy with a strict default policy', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
 
-    expect(http).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });

package/templates/app-trpc/foundation/{Http/Http.tsx → http/Headers.tsx}

@@ -1,5 +1,5 @@
 import Env from '@quilted/quilt/env';
-import {useCurrentUrl} from '@quilted/quilt';
+import {useInitialUrl} from '@quilted/quilt/navigate';
 import {
   CacheControl,
   ResponseHeader,
@@ -14,8 +14,8 @@ import {
 // wherever in your application you can read that state.
 //
 // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
-export function Http() {
-  const isHttps = useCurrentUrl().protocol === 'https:';
+export function Headers() {
+  const isHttps = useInitialUrl().protocol === 'https:';
 
   return (
     <>

package/templates/app-trpc/foundation/http.ts

@@ -0,0 +1 @@
+export {Headers} from './http/Headers.tsx';

package/templates/app-trpc/server.tsx

@@ -1,12 +1,14 @@
-import '@quilted/quilt/global';
-import {createRequestRouter, createServerRender} from '@quilted/quilt/server';
-import {createBrowserAssets} from '@quilted/quilt/magic/assets';
+import '@quilted/quilt/globals';
+import {RequestRouter} from '@quilted/quilt/request-router';
+import {BrowserAssets} from '@quilted/quilt/magic/assets';
+
 import {createDirectClient} from '@quilted/trpc/server';
 import {fetchRequestHandler} from '@trpc/server/adapters/fetch';
 
 import {appRouter} from './trpc.ts';
 
-const router = createRequestRouter();
+const router = new RequestRouter();
+const assets = new BrowserAssets();
 
 router.any(
   'api',
@@ -22,16 +24,21 @@ router.any(
 );
 
 // For all GET requests, render our React application.
-router.get(
-  createServerRender(
-    async () => {
-      const {default: App} = await import('./App.tsx');
-      return <App trpc={createDirectClient(appRouter)} />;
-    },
+router.get(async (request) => {
+  const [{App}, {renderToResponse}] = await Promise.all([
+    import('./App.tsx'),
+    import('@quilted/quilt/server'),
+  ]);
+
+  const response = await renderToResponse(
+    <App trpc={createDirectClient(appRouter)} />,
     {
-      assets: createBrowserAssets(),
+      request,
+      assets,
     },
-  ),
-);
+  );
+
+  return response;
+});
 
 export default router;

package/templates/app-trpc/shared/context.ts

@@ -1,14 +1,9 @@
 import {
   createOptionalContext,
   createUseContextHook,
-  createUseOptionalValueHook,
-} from '@quilted/quilt';
+} from '@quilted/quilt/react/tools';
 
 export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = createUseContextHook(AppContextReact);
-
-export function createUseAppContextHook<T>(hook: (context: AppContext) => T) {
-  return createUseOptionalValueHook<T>(() => hook(useAppContext()));
-}

package/templates/app-trpc/tests/render/render.tsx

@@ -1,8 +1,7 @@
-import {
-  createRender,
-  QuiltAppTesting,
-  createTestRouter,
-} from '@quilted/quilt/testing';
+import {createRender} from '@quilted/quilt/react/testing';
+import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
+import {Localization} from '@quilted/quilt/localize';
+
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
 import {trpc} from '~/shared/trpc.ts';
@@ -23,23 +22,25 @@ export const renderApp = createRender<
   // Create context that can be used by the `render` function, and referenced by test
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
-  context({router = createTestRouter()}) {
+  context({router = new TestRouter()}) {
     return {router, trpc: trpc.createClient(), queryClient: new QueryClient()};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale}) {
+  render(element, context, {locale = 'en'}) {
     const {router, trpc: trpcClient, queryClient} = context;
 
     return (
-      <QuiltAppTesting routing={router} localization={locale}>
-        <AppContextReact.Provider value={context}>
-          <trpc.Provider client={trpcClient} queryClient={queryClient}>
-            <QueryClientProvider client={queryClient}>
-              {element}
-            </QueryClientProvider>
-          </trpc.Provider>
-        </AppContextReact.Provider>
-      </QuiltAppTesting>
+      <Localization locale={locale}>
+        <TestRouting router={router}>
+          <AppContextReact.Provider value={context}>
+            <trpc.Provider client={trpcClient} queryClient={queryClient}>
+              <QueryClientProvider client={queryClient}>
+                {element}
+              </QueryClientProvider>
+            </trpc.Provider>
+          </AppContextReact.Provider>
+        </TestRouting>
+      </Localization>
     );
   },
   async afterRender() {

package/templates/app-trpc/tsconfig.json

@@ -8,6 +8,6 @@
     }
   },
   "include": ["**/*"],
-  "exclude": ["build", "quilt.project.ts", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": ["build", "quilt.project.ts"],
   "references": []
 }

package/templates/service-basic/service.ts

@@ -1,6 +1,6 @@
-import {createRequestRouter} from '@quilted/quilt/request-router';
+import {RequestRouter} from '@quilted/quilt/request-router';
 
-const app = createRequestRouter();
+const app = new RequestRouter();
 
 app.get('/', () => new Response('Hello, world!'));