@quilted/create 0.2.29 → 0.2.30

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @quilted/create
 
+## 0.2.30
+
+### Patch Changes
+
+- [`f5981c1`](https://github.com/lemonmade/quilt/commit/f5981c1a28c91ffed11536b1ab6274c3d945bdf8) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve app context in GraphQL template
+
+- [`a70f378`](https://github.com/lemonmade/quilt/commit/a70f378463b7c951654e6ff44b4bf5aaeda3a386) Thanks [@lemonmade](https://github.com/lemonmade)! - Rename `Start` to `Home` in app templates
+
 ## 0.2.29
 
 ### 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.29",
+  "version": "0.2.30",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/App.tsx

@@ -6,7 +6,7 @@ import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
-import {Start} from './features/start.ts';
+import {Home} from './features/home.ts';
 
 import {
   AppContextReact,
@@ -37,7 +37,7 @@ export default App;
 // of routes, you may want to split this component into its own file.
 function Routes() {
   return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
+    {match: '/', render: <Home />, renderPreload: <Home.Preload />},
   ]);
 }
 

package/templates/{app-graphql/features/start/Start.module.css → app-basic/features/home/Home.module.css}

@@ -1,3 +1,3 @@
-.Start {
+.Home {
   font-weight: 900;
 }

package/templates/app-basic/features/home/tests/Home.test.tsx

@@ -0,0 +1,12 @@
+import {describe, it, expect} from 'vitest';
+
+import {renderApp} from '~/tests/render.ts';
+
+import Home from '../Home.tsx';
+
+describe('<Home />', () => {
+  it('includes a welcome message', async () => {
+    const home = await renderApp(<Home />);
+    expect(home).toContainPreactText('Hello world!');
+  });
+});

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

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

package/templates/app-graphql/App.tsx

@@ -7,7 +7,7 @@ import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
-import {Start} from './features/start.ts';
+import {Home} from './features/home.ts';
 
 import {
   AppContextReact,
@@ -38,7 +38,7 @@ export default App;
 // of routes, you may want to split this component into its own file.
 function Routes() {
   return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
+    {match: '/', render: <Home />, renderPreload: <Home.Preload />},
   ]);
 }
 
@@ -48,7 +48,10 @@ function AppContext({children, context}: RenderableProps<AppProps>) {
 
   return (
     <AppContextReact.Provider value={context}>
-      <GraphQLContext fetch={context.fetchGraphQL} cache={context.graphQLCache}>
+      <GraphQLContext
+        fetch={context.graphql.fetch}
+        cache={context.graphql.cache}
+      >
         <Localization locale={locale}>
           <Routing>{children}</Routing>
         </Localization>

package/templates/app-graphql/browser.tsx

@@ -11,12 +11,14 @@ import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
-const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
-const graphQLCache = new GraphQLCache({fetch: fetchGraphQL});
+const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
+const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
 
 const context = {
-  fetchGraphQL,
-  graphQLCache,
+  graphql: {
+    fetch: graphQLFetch,
+    cache: graphQLCache,
+  },
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console

package/templates/{app-basic/features/start/Start.module.css → app-graphql/features/home/Home.module.css}

@@ -1,3 +1,3 @@
-.Start {
+.Home {
   font-weight: 900;
 }

package/templates/app-graphql/features/home/Home.tsx

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

package/templates/app-graphql/features/{start/StartQuery.graphql → home/HomeQuery.graphql}

@@ -1,4 +1,4 @@
-query Start {
+query Home {
   me {
     name
   }

package/templates/app-graphql/features/home/tests/Home.test.tsx

@@ -0,0 +1,21 @@
+import {describe, it, expect} from 'vitest';
+
+import {renderApp} from '~/tests/render.ts';
+import {fillGraphQL, GraphQLController} from '~/tests/graphql.ts';
+
+import Home from '../Home.tsx';
+import homeQuery from '../HomeQuery.graphql';
+
+describe('<Home />', () => {
+  it('welcomes the user with their name', async () => {
+    const name = 'Winston';
+    const graphql = new GraphQLController([
+      fillGraphQL(homeQuery, {me: {name}}),
+    ]);
+
+    const home = await renderApp(<Home />, {graphql});
+
+    expect(graphql).toHavePerformedGraphQLQuery(homeQuery);
+    expect(home).toContainPreactText(`Hello ${name}!`);
+  });
+});

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

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

package/templates/app-graphql/server.tsx

@@ -3,6 +3,8 @@ import '@quilted/quilt/globals';
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
 import {BrowserAssets} from 'quilt:module/assets';
 
+import type {AppContext} from '~/shared/context.ts';
+
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
@@ -29,18 +31,17 @@ router.get(async (request) => {
       import('@quilted/quilt/server'),
     ]);
 
-  const response = await renderToResponse(
-    <App
-      context={{
-        fetchGraphQL: performGraphQLOperation,
-        graphQLCache: new GraphQLCache(),
-      }}
-    />,
-    {
-      request,
-      assets,
+  const context = {
+    graphql: {
+      fetch: performGraphQLOperation,
+      cache: new GraphQLCache(),
     },
-  );
+  } satisfies AppContext;
+
+  const response = await renderToResponse(<App context={context} />, {
+    request,
+    assets,
+  });
 
   return response;
 });

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

@@ -2,8 +2,10 @@ import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
 declare module '~/shared/context.ts' {
   interface AppContext {
-    readonly fetchGraphQL: GraphQLFetch;
-    readonly graphQLCache: GraphQLCache;
+    readonly graphql: {
+      readonly fetch: GraphQLFetch;
+      readonly cache: GraphQLCache;
+    };
   }
 }
 

package/templates/app-trpc/App.tsx

@@ -8,7 +8,7 @@ import {ReactQueryContext} from '@quilted/react-query';
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
-import {Start} from './features/start.ts';
+import {Home} from './features/home.ts';
 
 import {trpc} from './shared/trpc.ts';
 import {
@@ -40,7 +40,7 @@ export default App;
 // of routes, you may want to split this component into its own file.
 function Routes() {
   return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
+    {match: '/', render: <Home />, renderPreload: <Home.Preload />},
   ]);
 }
 

package/templates/app-trpc/features/{start/Start.module.css → home/Home.module.css}

@@ -1,3 +1,3 @@
-.Start {
+.Home {
   font-weight: 900;
 }

package/templates/app-trpc/features/home/Home.tsx

@@ -0,0 +1,9 @@
+import {trpc} from '~/shared/trpc.ts';
+
+import styles from './Home.module.css';
+
+export default function Home() {
+  const [data] = trpc.message.useSuspenseQuery('world');
+
+  return <div className={styles.Home}>{data}</div>;
+}

package/templates/app-trpc/features/home/tests/Home.test.tsx

@@ -0,0 +1,12 @@
+import {describe, it, expect} from 'vitest';
+
+import {renderApp} from '~/tests/render.ts';
+
+import Home from '../Home.tsx';
+
+describe('<Home />', () => {
+  it('includes a welcome message', async () => {
+    const home = await renderApp(<Home />);
+    expect(home).toContainPreactText('Hello world!');
+  });
+});

package/templates/app-trpc/features/home.ts

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

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

@@ -1,12 +0,0 @@
-import {describe, it, expect} from 'vitest';
-
-import {renderApp} from '~/tests/render.ts';
-
-import Start from '../Start.tsx';
-
-describe('<Start />', () => {
-  it('includes a welcome message', async () => {
-    const start = await renderApp(<Start />);
-    expect(start).toContainPreactText('Hello world!');
-  });
-});

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

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

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

@@ -1,13 +0,0 @@
-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/tests/Start.test.tsx

@@ -1,21 +0,0 @@
-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';
-
-describe('<Start />', () => {
-  it('welcomes the user with their name', async () => {
-    const name = 'Winston';
-    const graphql = new GraphQLController([
-      fillGraphQL(startQuery, {me: {name}}),
-    ]);
-
-    const start = await renderApp(<Start />, {graphql});
-
-    expect(graphql).toHavePerformedGraphQLQuery(startQuery);
-    expect(start).toContainPreactText(`Hello ${name}!`);
-  });
-});

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

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

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

@@ -1,9 +0,0 @@
-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/tests/Start.test.tsx

@@ -1,12 +0,0 @@
-import {describe, it, expect} from 'vitest';
-
-import {renderApp} from '~/tests/render.ts';
-
-import Start from '../Start.tsx';
-
-describe('<Start />', () => {
-  it('includes a welcome message', async () => {
-    const start = await renderApp(<Start />);
-    expect(start).toContainPreactText('Hello world!');
-  });
-});

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

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