@quilted/create 0.2.26 → 0.2.28

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quilted/create
 
+## 0.2.28
+
+### Patch Changes
+
+- [`55d5fee`](https://github.com/lemonmade/quilt/commit/55d5fee9235e2625adb8826e367d70fbc0925908) Thanks [@lemonmade](https://github.com/lemonmade)! - Simplify directory structure for template apps
+
+- [`7119a8c`](https://github.com/lemonmade/quilt/commit/7119a8c9464bffe18fc37155fed9fd2188e24c78) Thanks [@lemonmade](https://github.com/lemonmade)! - Add type aliases for React and React DOM to app templates
+
+- [`eaa1110`](https://github.com/lemonmade/quilt/commit/eaa1110d0ce583b3ca904e11cbf9bf098a820f1d) Thanks [@lemonmade](https://github.com/lemonmade)! - Make app context required in basic app template
+
+## 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

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext

@@ -2,9 +2,9 @@ import { __exports as out } from '../../../../../../../_virtual/index5.esnext';
 import './providers/async.esnext';
 import './providers/sync.esnext';
 import './settings.esnext';
-import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
-import { __exports as async$1 } from '../../../../../../../_virtual/async4.esnext';
-import { __exports as sync$1 } from '../../../../../../../_virtual/sync4.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
+import { __exports as async$1 } from '../../../../../../../_virtual/async3.esnext';
+import { __exports as sync$1 } from '../../../../../../../_virtual/sync3.esnext';
 
 Object.defineProperty(out, "__esModule", { value: true });
 out.statSync = out.stat = out.Settings = void 0;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
 
 Object.defineProperty(async, "__esModule", { value: true });
 async.read = void 0;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
 
 Object.defineProperty(sync, "__esModule", { value: true });
 sync.read = void 0;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
 import './adapters/fs.esnext';
 import { __exports as fs$1 } from '../../../../../../../_virtual/fs2.esnext';
 

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/index.esnext

@@ -3,10 +3,10 @@ import './providers/async.esnext';
 import './providers/stream.esnext';
 import './providers/sync.esnext';
 import './settings.esnext';
-import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
-import { __exports as async } from '../../../../../../../_virtual/async3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
+import { __exports as async } from '../../../../../../../_virtual/async4.esnext';
 import { __exports as stream } from '../../../../../../../_virtual/stream4.esnext';
-import { __exports as sync } from '../../../../../../../_virtual/sync3.esnext';
+import { __exports as sync } from '../../../../../../../_virtual/sync4.esnext';
 
 Object.defineProperty(out, "__esModule", { value: true });
 out.Settings = out.walkStream = out.walkSync = out.walk = void 0;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
 import '../readers/async.esnext';
 import { __exports as async$1 } from '../../../../../../../../_virtual/async5.esnext';
 

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
 import '../readers/sync.esnext';
 import { __exports as sync$1 } from '../../../../../../../../_virtual/sync5.esnext';
 

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
 import path__default from 'node:path';
 import '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.esnext';
 import { __exports as out } from '../../../../../../../_virtual/index6.esnext';

package/package.json

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

package/templates/app-basic/App.tsx

@@ -14,7 +14,7 @@ import {
 } from './shared/context.ts';
 
 export interface AppProps {
-  context?: AppContextType;
+  context: AppContextType;
 }
 
 // The root component for your application. You will typically render any

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

@@ -2,7 +2,7 @@ import {describe, it, expect} from 'vitest';
 
 import {renderApp} from '~/tests/render.ts';
 
-import Start from './Start.tsx';
+import Start from '../Start.tsx';
 
 describe('<Start />', () => {
   it('includes a welcome message', async () => {

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

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

package/templates/app-basic/server.tsx

@@ -3,6 +3,8 @@ import {RequestRouter} from '@quilted/quilt/request-router';
 import {renderToResponse} from '@quilted/quilt/server';
 import {BrowserAssets} from 'quilt:module/assets';
 
+import type {AppContext} from '~/shared/context.ts';
+
 import {App} from './App.tsx';
 
 const router = new RequestRouter();
@@ -10,7 +12,9 @@ const assets = new BrowserAssets();
 
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const response = await renderToResponse(<App />, {
+  const context = {} satisfies AppContext;
+
+  const response = await renderToResponse(<App context={context} />, {
     request,
     assets,
   });

package/templates/app-basic/tsconfig.json

@@ -5,7 +5,9 @@
     "jsxImportSource": "preact",
     "paths": {
       "~/shared/*": ["./shared/*"],
-      "~/tests/*": ["./tests/*"]
+      "~/tests/*": ["./tests/*"],
+      "react": ["./node_modules/preact/compat"],
+      "react-dom": ["./node_modules/preact/compat"]
     }
   },
   "include": ["**/*"],

package/templates/app-empty/tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "outDir": "build/typescript",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+    "paths": {
+      "react": ["./node_modules/preact/compat"],
+      "react-dom": ["./node_modules/preact/compat"]
+    }
   },
   "include": ["**/*"],
   "exclude": ["build"],

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,7 +1,7 @@
 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';
 
@@ -13,11 +13,11 @@ const element = document.querySelector('#app')!;
 const browser = new Browser();
 
 const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
-const queryClient = new QueryClient();
+const asyncCache = new AsyncActionCache();
 
 const context = {
   fetchGraphQL,
-  queryClient,
+  asyncCache,
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console

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

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

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

@@ -3,8 +3,8 @@ import {describe, it, expect} from 'vitest';
 import {renderApp} from '~/tests/render.ts';
 import {fillGraphQL, GraphQLController} from '~/tests/graphql.ts';
 
-import Start from './Start.tsx';
-import startQuery from './StartQuery.graphql';
+import Start from '../Start.tsx';
+import startQuery from '../StartQuery.graphql';
 
 describe('<Start />', () => {
   it('welcomes the user with their name', async () => {

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

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

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-graphql/tsconfig.json

@@ -5,7 +5,9 @@
     "jsxImportSource": "preact",
     "paths": {
       "~/shared/*": ["./shared/*"],
-      "~/tests/*": ["./tests/*"]
+      "~/tests/*": ["./tests/*"],
+      "react": ["./node_modules/preact/compat"],
+      "react-dom": ["./node_modules/preact/compat"]
     }
   },
   "include": ["**/*"],

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

@@ -2,7 +2,7 @@ import {describe, it, expect} from 'vitest';
 
 import {renderApp} from '~/tests/render.ts';
 
-import Start from './Start.tsx';
+import Start from '../Start.tsx';
 
 describe('<Start />', () => {
   it('includes a welcome message', async () => {

package/templates/app-trpc/tsconfig.json

@@ -5,7 +5,9 @@
     "jsxImportSource": "preact",
     "paths": {
       "~/shared/*": ["./shared/*"],
-      "~/tests/*": ["./tests/*"]
+      "~/tests/*": ["./tests/*"],
+      "react": ["./node_modules/preact/compat"],
+      "react-dom": ["./node_modules/preact/compat"]
     }
   },
   "include": ["**/*"],

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

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