@quilted/create 0.2.30 → 0.2.31

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/settings2.esnext';
-import { __exports as async$1 } from '../../../../../../../_virtual/async3.esnext';
-import { __exports as sync$1 } from '../../../../../../../_virtual/sync3.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';
 
 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/async3.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async4.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/sync3.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.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/settings2.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.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/settings3.esnext';
-import { __exports as async } from '../../../../../../../_virtual/async4.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
+import { __exports as async } from '../../../../../../../_virtual/async3.esnext';
 import { __exports as stream } from '../../../../../../../_virtual/stream4.esnext';
-import { __exports as sync } from '../../../../../../../_virtual/sync4.esnext';
+import { __exports as sync } from '../../../../../../../_virtual/sync3.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/async4.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async3.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/sync4.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.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/settings3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.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.30",
+  "version": "0.2.31",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/App.tsx

@@ -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 {HTML} from './foundation/html.ts';
@@ -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: <Home />, renderPreload: <Home.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-basic/features/home/Home.tsx

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

package/templates/app-graphql/App.tsx

@@ -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 {Home} from './features/home.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,14 +50,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: <Home />, renderPreload: <Home.Preload />},
-  ]);
-}
-
 // This component renders any app-wide context.
 function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
@@ -52,9 +60,7 @@ function AppContext({children, context}: RenderableProps<AppProps>) {
         fetch={context.graphql.fetch}
         cache={context.graphql.cache}
       >
-        <Localization locale={locale}>
-          <Routing>{children}</Routing>
-        </Localization>
+        <Localization locale={locale}>{children}</Localization>
       </GraphQLContext>
     </AppContextReact.Provider>
   );

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

@@ -1,3 +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-trpc/App.tsx

@@ -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';
@@ -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: <Home />, renderPreload: <Home.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>
   );