Update some parts of templates

lemonmade · May 3, 2024 · db42943 · db42943
1 parent 406edc6
commit db42943
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 113 deletions.
diff --git a/packages/create/templates/app-basic/App.tsx b/packages/create/templates/app-basic/App.tsx
@@ -1,6 +1,5 @@
 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';
 
@@ -15,25 +14,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 (
-    <Localization locale={locale}>
-      <Routing>
-        <AppContext {...props}>
-          <Headers />
-          <Head />
-          <Frame>
-            <Routes />
-          </Frame>
-        </AppContext>
-      </Routing>
-    </Localization>
+    <AppContext context={context}>
+      <Headers />
+      <Head />
+      <Frame>
+        <Routes />
+      </Frame>
+    </AppContext>
   );
 }
 
@@ -48,10 +43,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>
   );
 }
diff --git a/packages/create/templates/app-basic/browser.tsx b/packages/create/templates/app-basic/browser.tsx
@@ -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>,
+);
diff --git a/packages/create/templates/app-graphql/App.tsx b/packages/create/templates/app-graphql/App.tsx
@@ -1,12 +1,10 @@
-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';
@@ -19,29 +17,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}>
+      <Headers />
+      <Head />
+      <Frame>
+        <Routes />
+      </Frame>
+    </AppContext>
   );
 }
 
@@ -56,24 +46,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>
   );
 }
diff --git a/packages/create/templates/app-graphql/browser.tsx b/packages/create/templates/app-graphql/browser.tsx
@@ -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>,
 );
diff --git a/packages/create/templates/app-graphql/server.tsx b/packages/create/templates/app-graphql/server.tsx
@@ -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,

diff --git a/packages/create/templates/app-graphql/server/graphql.ts b/packages/create/templates/app-graphql/server/graphql.ts
@@ -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,

diff --git a/packages/create/templates/app-graphql/shared/graphql.ts b/packages/create/templates/app-graphql/shared/graphql.ts
@@ -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 {};
diff --git a/packages/create/templates/app-trpc/App.tsx b/packages/create/templates/app-trpc/App.tsx
@@ -1,11 +1,8 @@
-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';
@@ -20,27 +17,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}>
+      <Headers />
+      <Head />
+      <Frame>
+        <Routes />
+      </Frame>
+    </AppContext>
   );
 }
 
@@ -55,29 +46,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>
   );
 }
diff --git a/packages/create/templates/app-trpc/browser.tsx b/packages/create/templates/app-trpc/browser.tsx
@@ -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>,
+);
diff --git a/packages/create/templates/app-trpc/foundation/html/Head.tsx b/packages/create/templates/app-trpc/foundation/html/Head.tsx
@@ -1,4 +1,4 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
+import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/browser';
 
 // 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

diff --git a/packages/create/templates/app-trpc/foundation/http/Headers.tsx b/packages/create/templates/app-trpc/foundation/http/Headers.tsx
@@ -6,7 +6,8 @@ import {
   ContentSecurityPolicy,
   PermissionsPolicy,
   StrictTransportSecurity,
-} from '@quilted/quilt/http';
+  useBro,
+} 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

diff --git a/packages/create/templates/app-trpc/server.tsx b/packages/create/templates/app-trpc/server.tsx
@@ -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,