@quilted/create 0.1.77 → 0.1.79

package/templates/app-graphql/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-graphql/foundation/http.ts

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

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

@@ -11,7 +11,7 @@ const {createResolver, createQueryResolver} =
   createGraphQLResolverBuilder<Schema>();
 
 const Person = createResolver('Person', {
-  name: 'Winston',
+  name: async () => 'Winston',
 });
 
 const Query = createQueryResolver({
@@ -35,7 +35,6 @@ export async function performGraphQLOperation<
     source: operation,
     operationName,
     variableValues: variables,
-    rootValue: {name: () => 'Winston'},
   });
 
   return result as GraphQLResult<Data>;

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
@@ -47,7 +45,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,7 @@
-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';
+export {fillGraphQL, GraphQLController} from './graphql.ts';

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,4 +1,4 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
 import {httpBatchLink} from '@trpc/client';
 

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.tsx';
 
 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.tsx';
 
-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,4 +1,4 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 import {createRequestRouter, createServerRender} from '@quilted/quilt/server';
 import {createBrowserAssets} from '@quilted/quilt/magic/assets';
 import {createDirectClient} from '@quilted/trpc/server';

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/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!'));
 

package/templates/app-basic/features/Start/Start.tsx

@@ -1,12 +0,0 @@
-import {usePerformanceNavigation} from '@quilted/quilt';
-
-import styles from './Start.module.css';
-
-export default function Start() {
-  // This hook indicates that the page has loaded. It is used as part of Quilt’s
-  // navigation performance tracking feature. If you have disabled this feature,
-  // you can remove this hook.
-  usePerformanceNavigation();
-
-  return <div className={styles.Start}>Hello world!</div>;
-}

package/templates/app-basic/features/Start.tsx

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

package/templates/app-basic/foundation/Head.tsx

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

package/templates/app-basic/foundation/Http.tsx

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

package/templates/app-basic/foundation/Metrics/Metrics.tsx

@@ -1,23 +0,0 @@
-import {
-  usePerformanceNavigationEvent,
-  type PropsWithChildren,
-} from '@quilted/quilt';
-import Env from '@quilted/quilt/env';
-
-// This component records metrics about your application.
-export function Metrics({children}: PropsWithChildren) {
-  usePerformanceNavigationEvent(async (navigation) => {
-    if (Env.MODE === 'development') {
-      // eslint-disable-next-line no-console
-      console.log('Navigation:');
-      // eslint-disable-next-line no-console
-      console.log(navigation);
-      return;
-    }
-
-    // If you have a service that collects metrics, you can send navigation
-    // data to them here.
-  });
-
-  return <>{children}</>;
-}