npm - @quilted/create - Versions diffs - 0.2.17 → 0.2.19 - Mend

@quilted/create 0.2.17 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/CHANGELOG.md +14 -0
package/package.json +1 -1
package/templates/app-basic/App.tsx +18 -22
package/templates/app-basic/browser.tsx +8 -1
package/templates/app-basic/features/start.ts +2 -2
package/templates/app-basic/foundation/html/HTML.test.tsx +46 -0
package/templates/app-basic/foundation/{http/Headers.tsx → html/HTML.tsx} +50 -10
package/templates/app-basic/foundation/html.ts +1 -1
package/templates/app-basic/package.json +1 -1
package/templates/app-graphql/App.tsx +24 -41
package/templates/app-graphql/browser.tsx +9 -1
package/templates/app-graphql/features/start.ts +2 -2
package/templates/app-graphql/foundation/html/HTML.test.tsx +46 -0
package/templates/app-graphql/foundation/{http/Headers.tsx → html/HTML.tsx} +50 -10
package/templates/app-graphql/foundation/html.ts +1 -1
package/templates/app-graphql/package.json +1 -1
package/templates/app-graphql/server/graphql.ts +1 -1
package/templates/app-graphql/server.tsx +8 -2
package/templates/app-graphql/shared/graphql.ts +11 -0
package/templates/app-graphql/tests/render/render.tsx +6 -1
package/templates/app-trpc/App.tsx +30 -46
package/templates/app-trpc/browser.tsx +10 -1
package/templates/app-trpc/features/start.ts +2 -2
package/templates/app-trpc/foundation/html/HTML.test.tsx +46 -0
package/templates/app-trpc/foundation/{http/Headers.tsx → html/HTML.tsx} +50 -10
package/templates/app-trpc/foundation/html.ts +1 -1
package/templates/app-trpc/server.tsx +8 -2
package/templates/app-trpc/shared/trpc.ts +4 -2
package/templates/app-basic/foundation/html/Head.test.tsx +0 -25
package/templates/app-basic/foundation/html/Head.tsx +0 -34
package/templates/app-basic/foundation/http/Headers.test.tsx +0 -24
package/templates/app-basic/foundation/http.ts +0 -1
package/templates/app-graphql/foundation/html/Head.test.tsx +0 -25
package/templates/app-graphql/foundation/html/Head.tsx +0 -34
package/templates/app-graphql/foundation/http/Headers.test.tsx +0 -24
package/templates/app-graphql/foundation/http.ts +0 -1
package/templates/app-trpc/foundation/html/Head.test.tsx +0 -25
package/templates/app-trpc/foundation/html/Head.tsx +0 -34
package/templates/app-trpc/foundation/http/Headers.test.tsx +0 -24
package/templates/app-trpc/foundation/http.ts +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,19 @@
 # @quilted/create
+## 0.2.19
+### Patch Changes
+- [#716](https://github.com/lemonmade/quilt/pull/716) [`7daafca`](https://github.com/lemonmade/quilt/commit/7daafca900b3d9ea66be179394eadf7998cc94be) Thanks [@lemonmade](https://github.com/lemonmade)! - Refactor browser APIs
+## 0.2.18
+### Patch Changes
+- [#714](https://github.com/lemonmade/quilt/pull/714) [`d4bda43`](https://github.com/lemonmade/quilt/commit/d4bda430900d0e4afd5ccecb04abe9ac81245486) Thanks [@lemonmade](https://github.com/lemonmade)! - Update GraphQL dependencies
+- [#699](https://github.com/lemonmade/quilt/pull/699) [`8335c47`](https://github.com/lemonmade/quilt/commit/8335c47fa1896ad65d5cd218fe068f22627815d9) Thanks [@lemonmade](https://github.com/lemonmade)! - Update async APIs
 ## 0.2.17
 ### Patch Changes

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/App.tsx CHANGED Viewed

@@ -1,11 +1,9 @@
 import {type PropsWithChildren} from 'react';
-import {HTML} from '@quilted/quilt/html';
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
-import {Head} from './foundation/html.ts';
-import {Headers} from './foundation/http.ts';
+import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 import {Start} from './features/start.ts';
@@ -15,27 +13,21 @@ import {
   type AppContext as AppContextType,
 } from './shared/context.ts';
-export interface AppProps extends AppContextType {}
+export interface AppProps {
+  context?: AppContextType;
+}
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export function App(props: AppProps) {
-  const locale = useLocaleFromEnvironment() ?? 'en';
+export function App({context}: AppProps) {
   return (
-    <HTML>
-      <Localization locale={locale}>
-        <Routing>
-          <AppContext {...props}>
-            <Headers />
-            <Head />
-            <Frame>
-              <Routes />
-            </Frame>
-          </AppContext>
-        </Routing>
-      </Localization>
-    </HTML>
+    <AppContext context={context}>
+      <HTML>
+        <Frame>
+          <Routes />
+        </Frame>
+      </HTML>
+    </AppContext>
   );
 }
@@ -50,10 +42,14 @@ function Routes() {
 }
 // This component renders any app-wide context.
-function AppContext({children, ...context}: PropsWithChildren<AppProps>) {
+function AppContext({children, context}: PropsWithChildren<AppProps>) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
   return (
     <AppContextReact.Provider value={context}>
-      {children}
+      <Localization locale={locale}>
+        <Routing>{children}</Routing>
+      </Localization>
     </AppContextReact.Provider>
   );
 }

package/templates/app-basic/browser.tsx CHANGED Viewed

@@ -1,8 +1,15 @@
 import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
+import {Browser, BrowserContext} from '@quilted/quilt/browser';
 import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
+const browser = new Browser();
-hydrateRoot(element, <App />);
+hydrateRoot(
+  element,
+  <BrowserContext browser={browser}>
+    <App />
+  </BrowserContext>,
+);

package/templates/app-basic/features/start.ts CHANGED Viewed

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

package/templates/app-basic/foundation/html/HTML.test.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import {describe, it, expect} from 'vitest';
+import {
+  CacheControl,
+  ContentSecurityPolicy,
+  SearchRobots,
+  Viewport,
+} from '@quilted/quilt/server';
+import {renderApp} from '~/tests/render.ts';
+import {HTML} from './HTML.tsx';
+describe('<HTML />', () => {
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(Viewport, {
+      cover: true,
+    });
+  });
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+  it('does not cache the response', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(CacheControl, {
+      cache: false,
+    });
+  });
+  it('adds a content security policy with a strict default policy', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+      defaultSources: ["'self'"],
+    });
+  });
+});

package/templates/app-basic/foundation/{http/Headers.tsx → html/HTML.tsx} RENAMED Viewed

@@ -1,21 +1,34 @@
-import Env from '@quilted/quilt/env';
-import {useInitialUrl} from '@quilted/quilt/navigate';
+import type {PropsWithChildren} from 'react';
+import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
   ResponseHeader,
   ContentSecurityPolicy,
   PermissionsPolicy,
+  SearchRobots,
   StrictTransportSecurity,
-} from '@quilted/quilt/http';
+  Viewport,
+} from '@quilted/quilt/server';
-// This component sets details on the HTTP response for all HTML server-rendering
-// requests. If you need to customize any of these details based on conditions like
-// the active route, or some state about the user, you can move these components to
-// wherever in your application you can read that state.
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
 //
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
-export function Headers() {
-  const isHttps = useInitialUrl().protocol === 'https:';
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function HTML({children}: PropsWithChildren) {
+  return (
+    <>
+      <Headers />
+      <Head />
+      {children}
+    </>
+  );
+}
+function Headers() {
+  const {url} = useBrowserRequest();
+  const isHttps = new URL(url).protocol === 'https:';
   return (
     <>
@@ -116,3 +129,30 @@ export function Headers() {
     </>
   );
 }
+function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

package/templates/app-basic/foundation/html.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export {~~Head~~} from './html/~~Head~~.tsx';
1	+ export {HTML} from './html/HTML.tsx';

package/templates/app-basic/package.json CHANGED Viewed

@@ -11,7 +11,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.6.0",
+    "@quilted/quilt": "workspace:^0.6.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "jsdom": "^24.0.0",

package/templates/app-graphql/App.tsx CHANGED Viewed

@@ -1,15 +1,12 @@
-import {useMemo, type PropsWithChildren} from 'react';
+import {type PropsWithChildren} from 'react';
-import {HTML} from '@quilted/quilt/html';
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
-import {GraphQLContext, type GraphQLRun} from '@quilted/quilt/graphql';
+import {GraphQLContext} from '@quilted/quilt/graphql';
 import {ReactQueryContext} from '@quilted/react-query';
-import {QueryClient} from '@tanstack/react-query';
-import {Head} from './foundation/html.ts';
-import {Headers} from './foundation/http.ts';
+import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 import {Start} from './features/start.ts';
@@ -19,29 +16,21 @@ import {
   type AppContext as AppContextType,
 } from './shared/context.ts';
-export interface AppProps extends AppContextType {
-  fetchGraphQL: GraphQLRun;
+export interface AppProps {
+  context: AppContextType;
 }
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export function App(props: AppProps) {
-  const locale = useLocaleFromEnvironment() ?? 'en';
+export function App({context}: AppProps) {
   return (
-    <HTML>
-      <Localization locale={locale}>
-        <Routing>
-          <AppContext {...props}>
-            <Headers />
-            <Head />
-            <Frame>
-              <Routes />
-            </Frame>
-          </AppContext>
-        </Routing>
-      </Localization>
-    </HTML>
+    <AppContext context={context}>
+      <HTML>
+        <Frame>
+          <Routes />
+        </Frame>
+      </HTML>
+    </AppContext>
   );
 }
@@ -56,24 +45,18 @@ function Routes() {
 }
 // This component renders any app-wide context.
-function AppContext({
-  children,
-  fetchGraphQL,
-  ...context
-}: PropsWithChildren<AppProps>) {
-  const {queryClient} = useMemo(() => {
-    return {
-      queryClient: new QueryClient(),
-    };
-  }, []);
+function AppContext({children, context}: PropsWithChildren<AppProps>) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
   return (
-    <GraphQLContext fetch={fetchGraphQL}>
-      <ReactQueryContext client={queryClient}>
-        <AppContextReact.Provider value={context}>
-          {children}
-        </AppContextReact.Provider>
-      </ReactQueryContext>
-    </GraphQLContext>
+    <AppContextReact.Provider value={context}>
+      <GraphQLContext fetch={context.fetchGraphQL}>
+        <ReactQueryContext client={context.queryClient}>
+          <Localization locale={locale}>
+            <Routing>{children}</Routing>
+          </Localization>
+        </ReactQueryContext>
+      </GraphQLContext>
+    </AppContextReact.Provider>
   );
 }

package/templates/app-graphql/browser.tsx CHANGED Viewed

@@ -1,13 +1,21 @@
 import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
+import {QueryClient} from '@tanstack/react-query';
 import {createGraphQLFetch} from '@quilted/quilt/graphql';
+import {Browser, BrowserContext} from '@quilted/quilt/browser';
 import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
+const browser = new Browser();
+const queryClient = new QueryClient();
+const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
 hydrateRoot(
   element,
-  <App fetchGraphQL={createGraphQLFetch({url: '/api/graphql'})} />,
+  <BrowserContext browser={browser}>
+    <App context={{fetchGraphQL, queryClient}} />
+  </BrowserContext>,
 );

package/templates/app-graphql/features/start.ts CHANGED Viewed

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

package/templates/app-graphql/foundation/html/HTML.test.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import {describe, it, expect} from 'vitest';
+import {
+  CacheControl,
+  ContentSecurityPolicy,
+  SearchRobots,
+  Viewport,
+} from '@quilted/quilt/server';
+import {renderApp} from '~/tests/render.ts';
+import {HTML} from './HTML.tsx';
+describe('<HTML />', () => {
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(Viewport, {
+      cover: true,
+    });
+  });
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+  it('does not cache the response', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(CacheControl, {
+      cache: false,
+    });
+  });
+  it('adds a content security policy with a strict default policy', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+      defaultSources: ["'self'"],
+    });
+  });
+});

package/templates/app-graphql/foundation/{http/Headers.tsx → html/HTML.tsx} RENAMED Viewed

@@ -1,21 +1,34 @@
-import Env from '@quilted/quilt/env';
-import {useInitialUrl} from '@quilted/quilt/navigate';
+import type {PropsWithChildren} from 'react';
+import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
   ResponseHeader,
   ContentSecurityPolicy,
   PermissionsPolicy,
+  SearchRobots,
   StrictTransportSecurity,
-} from '@quilted/quilt/http';
+  Viewport,
+} from '@quilted/quilt/server';
-// This component sets details on the HTTP response for all HTML server-rendering
-// requests. If you need to customize any of these details based on conditions like
-// the active route, or some state about the user, you can move these components to
-// wherever in your application you can read that state.
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
 //
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
-export function Headers() {
-  const isHttps = useInitialUrl().protocol === 'https:';
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function HTML({children}: PropsWithChildren) {
+  return (
+    <>
+      <Headers />
+      <Head />
+      {children}
+    </>
+  );
+}
+function Headers() {
+  const {url} = useBrowserRequest();
+  const isHttps = new URL(url).protocol === 'https:';
   return (
     <>
@@ -116,3 +129,30 @@ export function Headers() {
     </>
   );
 }
+function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

package/templates/app-graphql/foundation/html.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export {~~Head~~} from './html/~~Head~~.tsx';
1	+ export {HTML} from './html/HTML.tsx';

package/templates/app-graphql/package.json CHANGED Viewed

@@ -16,7 +16,7 @@
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "graphql": "^16.7.0",
+    "graphql": "^16.8.0",
     "jsdom": "^24.0.0",
     "preact": "^10.20.0",
     "react": "npm:@quilted/react@^18.2.0",

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

@@ -30,7 +30,7 @@ const Query = createQueryResolver({
 const schema = createGraphQLSchema(schemaSource, {Query, Person});
-export const performGraphQLOperation: GraphQLRun =
+export const performGraphQLOperation: GraphQLRun<{}> =
   async function performGraphQLOperation(operation, options) {
     const result = await graphql({
       schema,

package/templates/app-graphql/server.tsx CHANGED Viewed

@@ -21,15 +21,21 @@ router.post('/api/graphql', async (request) => {
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const [{App}, {performGraphQLOperation}, {renderToResponse}] =
+  const [{App}, {performGraphQLOperation}, {renderToResponse}, {QueryClient}] =
     await Promise.all([
       import('./App.tsx'),
       import('./server/graphql.ts'),
       import('@quilted/quilt/server'),
+      import('@tanstack/react-query'),
     ]);
   const response = await renderToResponse(
-    <App fetchGraphQL={performGraphQLOperation} />,
+    <App
+      context={{
+        fetchGraphQL: performGraphQLOperation,
+        queryClient: new QueryClient(),
+      }}
+    />,
     {
       request,
       assets,

package/templates/app-graphql/shared/graphql.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type {GraphQLFetch} from '@quilted/quilt/graphql';
+import type {QueryClient} from '@tanstack/react-query';
+declare module '~/shared/context.ts' {
+  interface AppContext {
+    queryClient: QueryClient;
+    fetchGraphQL: GraphQLFetch<{}>;
+  }
+}
+export {};

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

@@ -24,7 +24,12 @@ export const renderApp = createRender<
   // 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 = new TestRouter(), graphql = new GraphQLController()}) {
-    return {router, graphql, queryClient: new QueryClient()};
+    return {
+      router,
+      graphql,
+      fetchGraphQL: graphql.fetch,
+      queryClient: new QueryClient(),
+    };
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {

package/templates/app-trpc/App.tsx CHANGED Viewed

@@ -1,15 +1,11 @@
-import {useMemo, type PropsWithChildren} from 'react';
+import {type PropsWithChildren} from 'react';
-import {HTML} from '@quilted/quilt/html';
-import {Routing, useRoutes, useInitialUrl} from '@quilted/quilt/navigate';
+import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
-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 {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 import {Start} from './features/start.ts';
@@ -20,27 +16,21 @@ import {
   type AppContext as AppContextType,
 } from './shared/context.ts';
-export interface AppProps extends AppContextType {}
+export interface AppProps {
+  context: AppContextType;
+}
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export function App(props: AppProps) {
-  const locale = useLocaleFromEnvironment() ?? 'en';
+export function App({context}: AppProps) {
   return (
-    <HTML>
-      <Localization locale={locale}>
-        <Routing>
-          <AppContext {...props}>
-            <Headers />
-            <Head />
-            <Frame>
-              <Routes />
-            </Frame>
-          </AppContext>
-        </Routing>
-      </Localization>
-    </HTML>
+    <AppContext context={context}>
+      <HTML>
+        <Frame>
+          <Routes />
+        </Frame>
+      </HTML>
+    </AppContext>
   );
 }
@@ -55,29 +45,23 @@ function Routes() {
 }
 // This component renders any app-wide context.
-function AppContext({children, ...context}: PropsWithChildren<AppProps>) {
-  const initialUrl = useInitialUrl();
-  const {queryClient, trpcClient} = useMemo(() => {
-    return {
-      queryClient: new QueryClient(),
-      trpcClient: trpc.createClient({
-        links: [
-          // We need to use an absolute URL so that queries will
-          // work during server-side rendering
-          httpBatchLink({url: new URL('/api', initialUrl).href}),
-        ],
-      }),
-    };
-  }, [initialUrl]);
+function AppContext({children, context}: PropsWithChildren<AppProps>) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
   return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <ReactQueryContext client={queryClient}>
-        <AppContextReact.Provider value={context}>
-          {children}
-        </AppContextReact.Provider>
-      </ReactQueryContext>
-    </trpc.Provider>
+    <AppContextReact.Provider value={context}>
+      <Localization locale={locale}>
+        <Routing>
+          <trpc.Provider
+            client={context.trpc}
+            queryClient={context.queryClient}
+          >
+            <ReactQueryContext client={context.queryClient}>
+              {children}
+            </ReactQueryContext>
+          </trpc.Provider>
+        </Routing>
+      </Localization>
+    </AppContextReact.Provider>
   );
 }

package/templates/app-trpc/browser.tsx CHANGED Viewed

@@ -1,15 +1,24 @@
 import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
 import {httpBatchLink} from '@trpc/client';
+import {QueryClient} from '@tanstack/react-query';
+import {Browser, BrowserContext} from '@quilted/quilt/browser';
 import {trpc} from '~/shared/trpc.ts';
 import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
+const browser = new Browser();
+const queryClient = new QueryClient();
 const trpcClient = trpc.createClient({
   links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
 });
-hydrateRoot(element, <App trpc={trpcClient} />);
+hydrateRoot(
+  element,
+  <BrowserContext browser={browser}>
+    <App context={{trpc: trpcClient, queryClient}} />
+  </BrowserContext>,
+);

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

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

package/templates/app-trpc/foundation/html/HTML.test.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import {describe, it, expect} from 'vitest';
+import {
+  CacheControl,
+  ContentSecurityPolicy,
+  SearchRobots,
+  Viewport,
+} from '@quilted/quilt/server';
+import {renderApp} from '~/tests/render.ts';
+import {HTML} from './HTML.tsx';
+describe('<HTML />', () => {
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(Viewport, {
+      cover: true,
+    });
+  });
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+  it('does not cache the response', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(CacheControl, {
+      cache: false,
+    });
+  });
+  it('adds a content security policy with a strict default policy', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+      defaultSources: ["'self'"],
+    });
+  });
+});

package/templates/app-trpc/foundation/{http/Headers.tsx → html/HTML.tsx} RENAMED Viewed

@@ -1,21 +1,34 @@
-import Env from '@quilted/quilt/env';
-import {useInitialUrl} from '@quilted/quilt/navigate';
+import type {PropsWithChildren} from 'react';
+import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
   ResponseHeader,
   ContentSecurityPolicy,
   PermissionsPolicy,
+  SearchRobots,
   StrictTransportSecurity,
-} from '@quilted/quilt/http';
+  Viewport,
+} from '@quilted/quilt/server';
-// This component sets details on the HTTP response for all HTML server-rendering
-// requests. If you need to customize any of these details based on conditions like
-// the active route, or some state about the user, you can move these components to
-// wherever in your application you can read that state.
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
 //
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
-export function Headers() {
-  const isHttps = useInitialUrl().protocol === 'https:';
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function HTML({children}: PropsWithChildren) {
+  return (
+    <>
+      <Headers />
+      <Head />
+      {children}
+    </>
+  );
+}
+function Headers() {
+  const {url} = useBrowserRequest();
+  const isHttps = new URL(url).protocol === 'https:';
   return (
     <>
@@ -116,3 +129,30 @@ export function Headers() {
     </>
   );
 }
+function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

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

	@@ -1 +1 @@
1	- export {~~Head~~} from './html/~~Head~~.tsx';
1	+ export {HTML} from './html/HTML.tsx';

package/templates/app-trpc/server.tsx CHANGED Viewed

@@ -25,13 +25,19 @@ router.any(
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const [{App}, {renderToResponse}] = await Promise.all([
+  const [{App}, {renderToResponse}, {QueryClient}] = await Promise.all([
     import('./App.tsx'),
     import('@quilted/quilt/server'),
+    import('@tanstack/react-query'),
   ]);
   const response = await renderToResponse(
-    <App trpc={createDirectClient(appRouter)} />,
+    <App
+      context={{
+        trpc: createDirectClient(appRouter),
+        queryClient: new QueryClient(),
+      }}
+    />,
     {
       request,
       assets,

package/templates/app-trpc/shared/trpc.ts CHANGED Viewed

@@ -1,10 +1,11 @@
-import {type TRPCClient} from '@trpc/client';
+import type {TRPCClient} from '@trpc/client';
 import {createTRPCReact, type CreateTRPCReact} from '@trpc/react-query';
+import type {QueryClient} from '@tanstack/react-query';
 // Get access to our app’s router type signature, which will
 // provide strong typing on the queries and mutations we can
 // perform.
-import {type AppRouter} from '../trpc.ts';
+import type {AppRouter} from '../trpc.ts';
 export const trpc: CreateTRPCReact<AppRouter, unknown, null> =
   createTRPCReact<AppRouter>();
@@ -12,5 +13,6 @@ export const trpc: CreateTRPCReact<AppRouter, unknown, null> =
 declare module '~/shared/context.ts' {
   interface AppContext {
     trpc: TRPCClient<AppRouter>;
+    queryClient: QueryClient;
   }
 }

package/templates/app-basic/foundation/html/Head.test.tsx DELETED Viewed

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

package/templates/app-basic/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-basic/foundation/http/Headers.test.tsx DELETED Viewed

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

package/templates/app-basic/foundation/http.ts DELETED Viewed

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

package/templates/app-graphql/foundation/html/Head.test.tsx DELETED Viewed

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

package/templates/app-graphql/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-graphql/foundation/http/Headers.test.tsx DELETED Viewed

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

package/templates/app-graphql/foundation/http.ts DELETED Viewed

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

package/templates/app-trpc/foundation/html/Head.test.tsx DELETED Viewed

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

package/templates/app-trpc/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-trpc/foundation/http/Headers.test.tsx DELETED Viewed

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

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

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