@quilted/create 0.2.25 → 0.2.27

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @quilted/create
 
+## 0.2.27
+
+### Patch Changes
+
+- [`e5877f9`](https://github.com/lemonmade/quilt/commit/e5877f9b94f62a8ec09a75a44f028c4530ea9f2d) Thanks [@lemonmade](https://github.com/lemonmade)! - Update GraphQL template
+
+## 0.2.26
+
+### Patch Changes
+
+- [`5c32e10`](https://github.com/lemonmade/quilt/commit/5c32e1022e5330a209817f7bfb49b09b301b36b7) Thanks [@lemonmade](https://github.com/lemonmade)! - Expose app context on browser console in template apps
+
 ## 0.2.25
 
 ### Patch Changes

package/package.json

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

package/templates/app-basic/browser.tsx

@@ -2,14 +2,20 @@ import '@quilted/quilt/globals';
 import {hydrate} from 'preact';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
+const context = {} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
+
 hydrate(
   <BrowserContext browser={browser}>
-    <App />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

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

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }

package/templates/app-graphql/App.tsx

@@ -1,10 +1,9 @@
 import type {RenderableProps} from 'preact';
 
+import {AsyncContext} from '@quilted/quilt/async';
+import {GraphQLContext} from '@quilted/quilt/graphql';
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
-import {GraphQLContext} from '@quilted/quilt/graphql';
-
-import {ReactQueryContext} from '@quilted/react-query';
 
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
@@ -51,11 +50,11 @@ function AppContext({children, context}: RenderableProps<AppProps>) {
   return (
     <AppContextReact.Provider value={context}>
       <GraphQLContext fetch={context.fetchGraphQL}>
-        <ReactQueryContext client={context.queryClient}>
+        <AsyncContext cache={context.asyncCache}>
           <Localization locale={locale}>
             <Routing>{children}</Routing>
           </Localization>
-        </ReactQueryContext>
+        </AsyncContext>
       </GraphQLContext>
     </AppContextReact.Provider>
   );

package/templates/app-graphql/browser.tsx

@@ -1,21 +1,31 @@
 import '@quilted/quilt/globals';
 
 import {hydrate} from 'preact';
-import {QueryClient} from '@tanstack/react-query';
+import {AsyncActionCache} from '@quilted/quilt/async';
 import {createGraphQLFetch} from '@quilted/quilt/graphql';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
+
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
-const queryClient = new QueryClient();
 const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
+const asyncCache = new AsyncActionCache();
+
+const context = {
+  fetchGraphQL,
+  asyncCache,
+} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
 
 hydrate(
   <BrowserContext browser={browser}>
-    <App context={{fetchGraphQL, queryClient}} />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

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

@@ -1,14 +1,13 @@
-import {useGraphQLQuery} from '@quilted/react-query';
+import {useGraphQLQuery} from '@quilted/quilt/graphql';
 
 import styles from './Start.module.css';
 import startQuery from './StartQuery.graphql';
 
 export default function Start() {
-  const {data} = useGraphQLQuery(startQuery);
+  const query = useGraphQLQuery(startQuery);
 
-  return (
-    <div className={styles.Start}>
-      {data ? `Hello ${data.me.name}!` : 'Hello!'}
-    </div>
-  );
+  const me = query.result?.data?.me;
+  const greeting = me ? `Hello ${me.name}!` : 'Hello!';
+
+  return <div className={styles.Start}>{greeting}</div>;
 }

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

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }

package/templates/app-graphql/package.json

@@ -13,8 +13,6 @@
   "devDependencies": {
     "@quilted/graphql-tools": "^0.2.0",
     "@quilted/quilt": "^0.7.0",
-    "@quilted/react-query": "^0.4.0",
-    "@tanstack/react-query": "^5.0.0",
     "graphql": "^16.8.0",
     "jsdom": "^24.0.0",
     "preact": "^10.21.0",

package/templates/app-graphql/server.tsx

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

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

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

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

@@ -1,9 +1,10 @@
+import {Suspense} from 'preact/compat';
+
 import {createRender} from '@quilted/quilt/testing';
 import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
 import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
 import {Localization} from '@quilted/quilt/localize';
-
-import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {AsyncActionCache, AsyncContext} from '@quilted/quilt/async';
 
 import {AppContextReact} from '~/shared/context.ts';
 
@@ -28,18 +29,19 @@ export const renderApp = createRender<
     router = new TestRouter(),
     browser = new BrowserTestMock(),
     graphql = new GraphQLController(),
+    asyncCache = new AsyncActionCache(),
   }) {
     return {
       router,
       browser,
       graphql,
       fetchGraphQL: graphql.fetch,
-      queryClient: new QueryClient(),
+      asyncCache,
     };
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router, browser, graphql, queryClient} = context;
+    const {router, browser, graphql, asyncCache} = context;
 
     return (
       <AppContextReact.Provider value={context}>
@@ -47,9 +49,9 @@ export const renderApp = createRender<
           <Localization locale={locale}>
             <TestRouting router={router}>
               <GraphQLTesting controller={graphql}>
-                <QueryClientProvider client={queryClient}>
-                  {element}
-                </QueryClientProvider>
+                <AsyncContext cache={asyncCache}>
+                  <Suspense fallback={null}>{element}</Suspense>
+                </AsyncContext>
               </GraphQLTesting>
             </TestRouting>
           </Localization>
@@ -65,9 +67,6 @@ export const renderApp = createRender<
 
     await wrapper.act(async () => {
       await wrapper.context.graphql.resolveAll();
-
-      // react-query needs an extra tick to set state in response to GraphQL queries.
-      await new Promise((resolve) => setTimeout(resolve, 0));
     });
   },
 });

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

@@ -1,6 +1,6 @@
 import type {TestRouter} from '@quilted/quilt/navigate/testing';
 import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
-import type {QueryClient} from '@tanstack/react-query';
+import type {AsyncActionCache} from '@quilted/quilt/async';
 
 import type {AppContext} from '~/shared/context.ts';
 
@@ -42,6 +42,12 @@ export interface RenderOptions {
    */
   readonly graphql?: GraphQLController;
 
+  /**
+   * The cache of GraphQL query results. When not provided, an empty cache
+   * will be used.
+   */
+  readonly asyncCache?: AsyncActionCache;
+
   /**
    * A custom locale to use for this component test.
    */
@@ -65,9 +71,9 @@ export interface RenderContext extends AppContext {
   readonly graphql: GraphQLController;
 
   /**
-   * The react-query client used for this component test.
+   * The cache of GraphQL query results.
    */
-  readonly queryClient: QueryClient;
+  readonly asyncCache: AsyncActionCache;
 }
 
 export interface RenderActions extends Record<string, never> {}

package/templates/app-trpc/browser.tsx

@@ -5,6 +5,7 @@ import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
 import {trpc} from '~/shared/trpc.ts';
 
 import {App} from './App.tsx';
@@ -17,9 +18,17 @@ const trpcClient = trpc.createClient({
   links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
 });
 
+const context = {
+  trpc: trpcClient,
+  queryClient,
+} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
+
 hydrate(
   <BrowserContext browser={browser}>
-    <App context={{trpc: trpcClient, queryClient}} />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

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

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }