@quilted/create 0.2.34 → 0.2.36

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @quilted/create
 
+## 0.2.36
+
+### Patch Changes
+
+- [#788](https://github.com/lemonmade/quilt/pull/788) [`85a4b7e`](https://github.com/lemonmade/quilt/commit/85a4b7ed8e6ad58662ebf969d8fabbe8e21510a3) Thanks [@lemonmade](https://github.com/lemonmade)! - Add `Browser.locale` and use it in place of `useLocaleFromEnvironment()`
+
+## 0.2.35
+
+### Patch Changes
+
+- [`5c418c3`](https://github.com/lemonmade/quilt/commit/5c418c3a9a7de7c5ee4337cbd02b68e4bcd2d581) Thanks [@lemonmade](https://github.com/lemonmade)! - Add `createContextRouteFunction()` helper for creating routes with a known context, and use it for app context
+
+- [`7dae2be`](https://github.com/lemonmade/quilt/commit/7dae2bebab01a4a4e2baf6c1799ce0adb59a5bb7) Thanks [@lemonmade](https://github.com/lemonmade)! - Rename `@quilted/quilt/navigate` to `@quilted/quilt/navigation`
+
 ## 0.2.34
 
 ### Patch Changes

package/package.json

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

package/templates/app-basic/App.tsx

@@ -1,8 +1,8 @@
 import type {RenderableProps} from 'preact';
 
 import {NotFound} from '@quilted/quilt/server';
-import {Navigation, route} from '@quilted/quilt/navigate';
-import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization} from '@quilted/quilt/localize';
 
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
@@ -13,6 +13,7 @@ import {
   AppContextReact,
   type AppContext as AppContextType,
 } from './shared/context.ts';
+import {routeWithAppContext} from './shared/navigation.ts';
 
 export interface AppProps {
   context: AppContextType;
@@ -21,16 +22,16 @@ export interface AppProps {
 // 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('*', {
+  routeWithAppContext('*', {
     render: (children) => <Frame>{children}</Frame>,
     children: [
-      route('/', {
+      routeWithAppContext('/', {
         async load() {
           await Promise.all([Home.load()]);
         },
         render: <Home />,
       }),
-      route('*', {render: <NotFound />}),
+      routeWithAppContext('*', {render: <NotFound />}),
     ],
   }),
 ];
@@ -51,11 +52,9 @@ export default App;
 
 // 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}>{children}</Localization>
+      <Localization>{children}</Localization>
     </AppContextReact.Provider>
   );
 }

package/templates/app-basic/browser.tsx

@@ -1,7 +1,7 @@
 import '@quilted/quilt/globals';
 import {hydrate} from 'preact';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
-import {Router} from '@quilted/quilt/navigate';
+import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 import {App} from './App.tsx';

package/templates/app-basic/server.tsx

@@ -1,7 +1,7 @@
 import '@quilted/quilt/globals';
 import {RequestRouter} from '@quilted/quilt/request-router';
 import {renderToResponse} from '@quilted/quilt/server';
-import {Router} from '@quilted/quilt/navigate';
+import {Router} from '@quilted/quilt/navigation';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';

package/templates/app-basic/shared/context.ts

@@ -1,12 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
-import type {Router} from '@quilted/quilt/navigate';
 
-export interface AppContext {
-  /**
-   * The router used to control navigation throughout the application.
-   */
-  readonly router: Router;
-}
+export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = AppContextReact.use;

package/templates/app-basic/shared/navigation.ts

@@ -0,0 +1,15 @@
+import type {Router} from '@quilted/quilt/navigation';
+import {createContextRouteFunction} from '@quilted/quilt/navigation';
+
+import type {AppContext} from '~/shared/context.ts';
+
+declare module '~/shared/context.ts' {
+  interface AppContext {
+    /**
+     * The router used to control navigation throughout the application.
+     */
+    readonly router: Router;
+  }
+}
+
+export const routeWithAppContext = createContextRouteFunction<AppContext>();

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

@@ -1,6 +1,6 @@
 import {createRender} from '@quilted/quilt/testing';
 import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
-import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
+import {TestRouting, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
 import {AppContextReact} from '~/shared/context.ts';

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

@@ -1,4 +1,4 @@
-import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {TestRouter} from '@quilted/quilt/navigation/testing';
 import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 
 import type {AppContext} from '~/shared/context.ts';

package/templates/app-basic/tests/render.ts

@@ -1,6 +1,6 @@
 import '@quilted/quilt/testing';
 
-export {TestRouter} from '@quilted/quilt/navigate/testing';
+export {TestRouter} from '@quilted/quilt/navigation/testing';
 
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';

package/templates/app-graphql/App.tsx

@@ -2,8 +2,8 @@ import type {RenderableProps} from 'preact';
 
 import {NotFound} from '@quilted/quilt/server';
 import {GraphQLContext} from '@quilted/quilt/graphql';
-import {Navigation, route} from '@quilted/quilt/navigate';
-import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization} from '@quilted/quilt/localize';
 
 import {HTML} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
@@ -14,6 +14,7 @@ import {
   AppContextReact,
   type AppContext as AppContextType,
 } from './shared/context.ts';
+import {routeWithAppContext} from './shared/navigation.ts';
 
 export interface AppProps {
   context: AppContextType;
@@ -22,16 +23,16 @@ export interface AppProps {
 // 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('*', {
+  routeWithAppContext('*', {
     render: (children) => <Frame>{children}</Frame>,
     children: [
-      route('/', {
-        async load(_navigation, {graphql}: AppContextType) {
+      routeWithAppContext('/', {
+        async load({context: {graphql}}) {
           await Promise.all([Home.load(), graphql.cache.query(homeQuery)]);
         },
         render: <Home />,
       }),
-      route('*', {render: <NotFound />}),
+      routeWithAppContext('*', {render: <NotFound />}),
     ],
   }),
 ];
@@ -52,15 +53,13 @@ export default App;
 
 // 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.graphql.fetch}
         cache={context.graphql.cache}
       >
-        <Localization locale={locale}>{children}</Localization>
+        <Localization>{children}</Localization>
       </GraphQLContext>
     </AppContextReact.Provider>
   );

package/templates/app-graphql/browser.tsx

@@ -3,7 +3,7 @@ import '@quilted/quilt/globals';
 import {hydrate} from 'preact';
 import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
-import {Router} from '@quilted/quilt/navigate';
+import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 

package/templates/app-graphql/server.tsx

@@ -1,7 +1,7 @@
 import '@quilted/quilt/globals';
 
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
-import {Router} from '@quilted/quilt/navigate';
+import {Router} from '@quilted/quilt/navigation';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';

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

@@ -1,12 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
-import type {Router} from '@quilted/quilt/navigate';
 
-export interface AppContext {
-  /**
-   * The router used to control navigation throughout the application.
-   */
-  readonly router: Router;
-}
+export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = AppContextReact.use;

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

@@ -0,0 +1,15 @@
+import type {Router} from '@quilted/quilt/navigation';
+import {createContextRouteFunction} from '@quilted/quilt/navigation';
+
+import type {AppContext} from '~/shared/context.ts';
+
+declare module '~/shared/context.ts' {
+  interface AppContext {
+    /**
+     * The router used to control navigation throughout the application.
+     */
+    readonly router: Router;
+  }
+}
+
+export const routeWithAppContext = createContextRouteFunction<AppContext>();

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

@@ -2,7 +2,7 @@ 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 {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 import {GraphQLCache} from '@quilted/quilt/graphql';
 
@@ -34,24 +34,26 @@ export const renderApp = createRender<
     return {
       router,
       browser,
-      graphql,
-      fetchGraphQL: graphql.fetch,
-      graphQLCache,
+      graphql: {fetch: graphql.fetch, cache: graphQLCache},
+      graphQLController: graphql,
     };
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router, browser, graphql, graphQLCache} = context;
+    const {router, browser, graphql, graphQLController} = context;
 
     return (
       <AppContextReact.Provider value={context}>
         <BrowserContext browser={browser}>
           <Localization locale={locale}>
-            <TestRouting router={router}>
-              <GraphQLTesting controller={graphql} cache={graphQLCache}>
+            <Navigation router={router}>
+              <GraphQLTesting
+                controller={graphQLController}
+                cache={graphql.cache}
+              >
                 <Suspense fallback={null}>{element}</Suspense>
               </GraphQLTesting>
-            </TestRouting>
+            </Navigation>
           </Localization>
         </BrowserContext>
       </AppContextReact.Provider>
@@ -64,7 +66,7 @@ export const renderApp = createRender<
     // once the data is ready.
 
     await wrapper.act(async () => {
-      await wrapper.context.graphql.resolveAll();
+      await wrapper.context.graphQLController.resolveAll();
     });
   },
 });

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

@@ -1,4 +1,4 @@
-import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {TestRouter} from '@quilted/quilt/navigation/testing';
 import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 import type {GraphQLCache} from '@quilted/quilt/graphql';
 
@@ -68,12 +68,7 @@ export interface RenderContext extends AppContext {
   /**
    * The GraphQL controller used for this component test.
    */
-  readonly graphql: GraphQLController;
-
-  /**
-   * The cache of GraphQL query results.
-   */
-  readonly graphQLCache: GraphQLCache;
+  readonly graphQLController: GraphQLController;
 }
 
 export interface RenderActions extends Record<string, never> {}

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

@@ -1,6 +1,6 @@
 import '@quilted/quilt/testing';
 
-export {TestRouter} from '@quilted/quilt/navigate/testing';
+export {TestRouter} from '@quilted/quilt/navigation/testing';
 
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';

package/templates/app-trpc/App.tsx

@@ -1,8 +1,8 @@
 import type {RenderableProps} from 'preact';
 
 import {NotFound} from '@quilted/quilt/server';
-import {Navigation, route} from '@quilted/quilt/navigate';
-import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization} from '@quilted/quilt/localize';
 
 import {ReactQueryContext} from '@quilted/react-query';
 
@@ -16,6 +16,7 @@ import {
   AppContextReact,
   type AppContext as AppContextType,
 } from './shared/context.ts';
+import {routeWithAppContext} from './shared/navigation.ts';
 
 export interface AppProps {
   context: AppContextType;
@@ -24,16 +25,16 @@ export interface AppProps {
 // 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('*', {
+  routeWithAppContext('*', {
     render: (children) => <Frame>{children}</Frame>,
     children: [
-      route('/', {
+      routeWithAppContext('/', {
         async load() {
           await Promise.all([Home.load()]);
         },
         render: <Home />,
       }),
-      route('*', {render: <NotFound />}),
+      routeWithAppContext('*', {render: <NotFound />}),
     ],
   }),
 ];
@@ -44,7 +45,7 @@ export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
       <HTML>
-        <Navigation routes={routes} context={context} />
+        <Navigation router={context.router} routes={routes} context={context} />
       </HTML>
     </AppContext>
   );
@@ -54,11 +55,9 @@ export default App;
 
 // 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}>
+      <Localization>
         <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
           <ReactQueryContext client={context.queryClient}>
             {children}

package/templates/app-trpc/browser.tsx

@@ -4,7 +4,7 @@ import {hydrate} from 'preact';
 import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
-import {Router} from '@quilted/quilt/navigate';
+import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 import {trpc} from '~/shared/trpc.ts';

package/templates/app-trpc/server.tsx

@@ -31,7 +31,7 @@ router.get(async (request) => {
     await Promise.all([
       import('./App.tsx'),
       import('@quilted/quilt/server'),
-      import('@quilted/quilt/navigate'),
+      import('@quilted/quilt/navigation'),
       import('@tanstack/react-query'),
     ]);
 

package/templates/app-trpc/shared/context.ts

@@ -1,12 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
-import type {Router} from '@quilted/quilt/navigate';
 
-export interface AppContext {
-  /**
-   * The router used to control navigation throughout the application.
-   */
-  readonly router: Router;
-}
+export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = AppContextReact.use;

package/templates/app-trpc/shared/navigation.ts

@@ -0,0 +1,15 @@
+import type {Router} from '@quilted/quilt/navigation';
+import {createContextRouteFunction} from '@quilted/quilt/navigation';
+
+import type {AppContext} from '~/shared/context.ts';
+
+declare module '~/shared/context.ts' {
+  interface AppContext {
+    /**
+     * The router used to control navigation throughout the application.
+     */
+    readonly router: Router;
+  }
+}
+
+export const routeWithAppContext = createContextRouteFunction<AppContext>();

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

@@ -1,6 +1,6 @@
 import {createRender} from '@quilted/quilt/testing';
 import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
-import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
+import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
@@ -39,13 +39,13 @@ export const renderApp = createRender<
       <AppContextReact.Provider value={context}>
         <BrowserContext browser={browser}>
           <Localization locale={locale}>
-            <TestRouting router={router}>
+            <Navigation router={router}>
               <trpc.Provider client={trpcClient} queryClient={queryClient}>
                 <QueryClientProvider client={queryClient}>
                   {element}
                 </QueryClientProvider>
               </trpc.Provider>
-            </TestRouting>
+            </Navigation>
           </Localization>
         </BrowserContext>
       </AppContextReact.Provider>

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

@@ -1,4 +1,4 @@
-import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {TestRouter} from '@quilted/quilt/navigation/testing';
 import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 import type {QueryClient} from '@tanstack/react-query';
 

package/templates/app-trpc/tests/render.ts

@@ -1,6 +1,6 @@
 import '@quilted/quilt/testing';
 
-export {TestRouter} from '@quilted/quilt/navigate/testing';
+export {TestRouter} from '@quilted/quilt/navigation/testing';
 
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';