npm - @quilted/create - Versions diffs - 0.2.29 → 0.2.31 - Mend

@quilted/create 0.2.29 → 0.2.31

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 (30) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # @quilted/create
+## 0.2.31
+### Patch Changes
+- [`36ad8b1`](https://github.com/lemonmade/quilt/commit/36ad8b15df3dbad465b4f324dcaa26ea9892f234) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix incorrect style import in basic app template
+- [#757](https://github.com/lemonmade/quilt/pull/757) [`00cac4b`](https://github.com/lemonmade/quilt/commit/00cac4b4d01831ba654e94152d7a67a0ef75043b) Thanks [@lemonmade](https://github.com/lemonmade)! - Simplify routing library
+## 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/package.json CHANGED Viewed

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

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

@@ -1,12 +1,13 @@
 import type {RenderableProps} from 'preact';
-import {Routing, useRoutes} from '@quilted/quilt/navigate';
+import {NotFound} from '@quilted/quilt/server';
+import {Navigation, route} from '@quilted/quilt/navigate';
 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,
@@ -17,15 +18,30 @@ export interface AppProps {
   context: AppContextType;
 }
+// Define the routes for your application. If you have a lot of routes, you
+// might want to split this into a separate file.
+const routes = [
+  route('*', {
+    render: (children) => <Frame>{children}</Frame>,
+    children: [
+      route('/', {
+        async load() {
+          await Promise.all([Home.load()]);
+        },
+        render: <Home />,
+      }),
+      route('*', {render: <NotFound />}),
+    ],
+  }),
+];
 // The root component for your application. You will typically render any
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
       <HTML>
-        <Frame>
-          <Routes />
-        </Frame>
+        <Navigation routes={routes} context={context} />
       </HTML>
     </AppContext>
   );
@@ -33,23 +49,13 @@ export function App({context}: AppProps) {
 export default App;
-// This component renders the routes for your application. If you have a lot
-// of routes, you may want to split this component into its own file.
-function Routes() {
-  return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
-  ]);
-}
 // This component renders any app-wide context.
 function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
   return (
     <AppContextReact.Provider value={context}>
-      <Localization locale={locale}>
-        <Routing>{children}</Routing>
-      </Localization>
+      <Localization locale={locale}>{children}</Localization>
     </AppContextReact.Provider>
   );
 }

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

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

package/templates/app-basic/features/home/Home.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import styles from './Home.module.css';
+export default function Home() {
+  return <div className={styles.Home}>Hello world!</div>;
+}

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,13 +1,14 @@
 import type {RenderableProps} from 'preact';
+import {NotFound} from '@quilted/quilt/server';
 import {GraphQLContext} from '@quilted/quilt/graphql';
-import {Routing, useRoutes} from '@quilted/quilt/navigate';
+import {Navigation, route} from '@quilted/quilt/navigate';
 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, homeQuery} from './features/home.ts';
 import {
   AppContextReact,
@@ -18,15 +19,30 @@ export interface AppProps {
   context: AppContextType;
 }
+// Define the routes for your application. If you have a lot of routes, you
+// might want to split this into a separate file.
+const routes = [
+  route('*', {
+    render: (children) => <Frame>{children}</Frame>,
+    children: [
+      route('/', {
+        async load(_navigation, {graphql}: AppContextType) {
+          await Promise.all([Home.load(), graphql.cache.query(homeQuery)]);
+        },
+        render: <Home />,
+      }),
+      route('*', {render: <NotFound />}),
+    ],
+  }),
+];
 // The root component for your application. You will typically render any
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
       <HTML>
-        <Frame>
-          <Routes />
-        </Frame>
+        <Navigation routes={routes} context={context} />
       </HTML>
     </AppContext>
   );
@@ -34,24 +50,17 @@ export function App({context}: AppProps) {
 export default App;
-// This component renders the routes for your application. If you have a lot
-// of routes, you may want to split this component into its own file.
-function Routes() {
-  return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
-  ]);
-}
 // This component renders any app-wide context.
 function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
   return (
     <AppContextReact.Provider value={context}>
-      <GraphQLContext fetch={context.fetchGraphQL} cache={context.graphQLCache}>
-        <Localization locale={locale}>
-          <Routing>{children}</Routing>
-        </Localization>
+      <GraphQLContext
+        fetch={context.graphql.fetch}
+        cache={context.graphql.cache}
+      >
+        <Localization locale={locale}>{children}</Localization>
       </GraphQLContext>
     </AppContextReact.Provider>
   );

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

@@ -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} RENAMED Viewed

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

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

@@ -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} RENAMED Viewed

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

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

@@ -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 ADDED Viewed

@@ -0,0 +1,5 @@
+import {AsyncComponent} from '@quilted/quilt/async';
+export {default as homeQuery} from './home/HomeQuery.graphql';
+export const Home = AsyncComponent.from(() => import('./home/Home.tsx'));

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,7 @@
 import type {RenderableProps} from 'preact';
-import {Routing, useRoutes} from '@quilted/quilt/navigate';
+import {NotFound} from '@quilted/quilt/server';
+import {Navigation, route} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
 import {ReactQueryContext} from '@quilted/react-query';
@@ -8,7 +9,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 {
@@ -20,15 +21,30 @@ export interface AppProps {
   context: AppContextType;
 }
+// Define the routes for your application. If you have a lot of routes, you
+// might want to split this into a separate file.
+const routes = [
+  route('*', {
+    render: (children) => <Frame>{children}</Frame>,
+    children: [
+      route('/', {
+        async load() {
+          await Promise.all([Home.load()]);
+        },
+        render: <Home />,
+      }),
+      route('*', {render: <NotFound />}),
+    ],
+  }),
+];
 // The root component for your application. You will typically render any
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
       <HTML>
-        <Frame>
-          <Routes />
-        </Frame>
+        <Navigation routes={routes} context={context} />
       </HTML>
     </AppContext>
   );
@@ -36,14 +52,6 @@ export function App({context}: AppProps) {
 export default App;
-// This component renders the routes for your application. If you have a lot
-// of routes, you may want to split this component into its own file.
-function Routes() {
-  return useRoutes([
-    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
-  ]);
-}
 // This component renders any app-wide context.
 function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
@@ -51,16 +59,11 @@ function AppContext({children, context}: RenderableProps<AppProps>) {
   return (
     <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>
+        <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
+          <ReactQueryContext client={context.queryClient}>
+            {children}
+          </ReactQueryContext>
+        </trpc.Provider>
       </Localization>
     </AppContextReact.Provider>
   );

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/Start.tsx DELETED Viewed

@@ -1,5 +0,0 @@
-import styles from './Start.module.css';
-export default function Start() {
-  return <div className={styles.Start}>Hello world!</div>;
-}

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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