@quilted/create 0.3.3 → 0.3.4

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

@@ -1,10 +1,27 @@
-import type {Navigation} from './navigation.ts';
-import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
+import type {GraphQLClient} from '@quilted/quilt/graphql';
+import type {Navigation} from '@quilted/quilt/navigation';
+import type {Localization} from '@quilted/quilt/localize';
 
+/**
+ * The shared context for this application. Values in this object are
+ * available to all components in the app via `useAppContext()`.
+ */
 export interface AppContext {
+  /**
+   * The navigation instance for this application. Manages the current URL,
+   * browser history, and programmatic navigation.
+   */
   readonly navigation: Navigation;
-  readonly graphql: {
-    readonly fetch: GraphQLFetch;
-    readonly cache: GraphQLCache;
-  };
+
+  /**
+   * The localization instance for this application. Contains the active
+   * locale and formatting utilities for numbers, dates, currencies, and more.
+   */
+  readonly localization: Localization;
+
+  /**
+   * The GraphQL client for this application. Provides the fetch function
+   * used to execute operations and the cache used to store results.
+   */
+  readonly graphql: GraphQLClient;
 }

package/templates/app-graphql/package.json

@@ -20,7 +20,7 @@
     "graphql": "^16.8.0",
     "hono": "^4.8.0",
     "jsdom": "^26.0.0",
-    "preact": "^10.26.0",
+    "preact": "^10.29.0",
     "react": "npm:@quilted/react@^19.0.0",
     "react-dom": "npm:@quilted/react-dom@^19.0.0"
   },

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

@@ -1,15 +1,10 @@
 import {Suspense} from 'preact/compat';
 
 import {createRender} from '@quilted/quilt/testing';
-import {
-  BrowserDetailsContext,
-  BrowserTestMock,
-} from '@quilted/quilt/browser/testing';
-import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
+import {TestBrowser} from '@quilted/quilt/browser/testing';
+import {TestNavigation} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
-import {GraphQLCache} from '@quilted/quilt/graphql';
-
-import {AppContextPreact} from '~/context/preact.ts';
+import {QuiltFrameworkTestContext} from '@quilted/quilt/context/testing';
 
 import {GraphQLTesting, GraphQLController} from '../graphql.ts';
 
@@ -29,40 +24,25 @@ export const renderApp = createRender<
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
   context({
-    router = new TestRouter(),
-    browser = new BrowserTestMock(),
+    navigation = new TestNavigation(),
+    browser = new TestBrowser(),
+    localization = new Localization('en'),
     graphql = new GraphQLController(),
-    graphQLCache = new GraphQLCache({fetch: graphql.fetch}),
   }) {
-    return {
-      navigation: {router},
-      browser,
-      graphql: {fetch: graphql.fetch, cache: graphQLCache, controller: graphql},
-    };
+    return {navigation, browser, localization, graphql: {controller: graphql}};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale = 'en'}) {
-    const {
-      navigation: {router},
-      browser,
-      graphql,
-    } = context;
-
+  render(element, {navigation, browser, localization, graphql}) {
     return (
-      <AppContextPreact.Provider value={context}>
-        <BrowserDetailsContext.Provider value={browser}>
-          <Localization locale={locale}>
-            <Navigation router={router}>
-              <GraphQLTesting
-                controller={graphql.controller}
-                cache={graphql.cache}
-              >
-                <Suspense fallback={null}>{element}</Suspense>
-              </GraphQLTesting>
-            </Navigation>
-          </Localization>
-        </BrowserDetailsContext.Provider>
-      </AppContextPreact.Provider>
+      <QuiltFrameworkTestContext
+        navigation={navigation}
+        browser={browser}
+        localization={localization}
+      >
+        <GraphQLTesting controller={graphql.controller}>
+          <Suspense fallback={null}>{element}</Suspense>
+        </GraphQLTesting>
+      </QuiltFrameworkTestContext>
     );
   },
   async afterRender(wrapper) {

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

@@ -1,77 +1,52 @@
-import type {TestRouter} from '@quilted/quilt/navigation/testing';
-import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
-import type {GraphQLCache} from '@quilted/quilt/graphql';
-
-import type {AppContext} from '~/context/types.ts';
+import type {TestNavigation} from '@quilted/quilt/navigation/testing';
+import type {TestBrowser} from '@quilted/quilt/browser/testing';
+import type {Localization} from '@quilted/quilt/localize';
 
 import type {GraphQLController} from '../graphql.ts';
 
 export interface RenderOptions {
   /**
-   * A custom router to use for this component test. You can use a
-   * custom router to simulate a particular URL, and you can spy on
-   * its navigation method to check that components navigate as
-   * you expect.
+   * A custom navigation to use for this component test.
    */
-  readonly router?: TestRouter;
+  readonly navigation?: TestNavigation;
 
   /**
    * A custom environment for this component test.
    */
-  readonly browser?: BrowserTestMock;
+  readonly browser?: TestBrowser;
 
   /**
-   * An object that controls the responses to GraphQL queries and mutations
-   * for the component under test. You can customize the responses using
-   * the `fillGraphQL` and `createGraphQLController` utilities provided
-   * by this module.
-   *
-   * ```tsx
-   * import {renderApp} from '~/tests/render.ts';
-   * import {fillGraphQL, GraphQLController} from '~/tests/graphql.ts';
-   *
-   * import {MyComponent} from './MyComponent.tsx';
-   * import myComponentQuery from './MyComponentQuery.graphql';
-   *
-   * const myComponent = await renderApp(<MyComponent />, {
-   *   graphql: new GraphQLController([
-   *     fillGraphQL(myComponentQuery, {me: {name: 'Winston'}}),
-   *   ]),
-   * });
-   * ```
+   * A custom localization instance to use for this component test.
    */
-  readonly graphql?: GraphQLController;
+  readonly localization?: Localization;
 
   /**
-   * The cache of GraphQL query results. When not provided, an empty cache
-   * will be used.
+   * An object that controls the responses to GraphQL queries and mutations
+   * for the component under test.
    */
-  readonly graphQLCache?: GraphQLCache;
+  readonly graphql?: GraphQLController;
+}
 
+export interface RenderContext {
   /**
-   * A custom locale to use for this component test.
+   * The navigation used for this component test.
    */
-  readonly locale?: string;
-}
+  readonly navigation: TestNavigation;
 
-export interface RenderContext extends AppContext {
   /**
-   * The router used for this component test.
+   * The browser environment for this component test.
    */
-  readonly navigation: {router: TestRouter};
+  readonly browser: TestBrowser;
 
   /**
-   * The browser environment for this component test.
+   * The localization used for this component test.
    */
-  readonly browser: BrowserTestMock;
+  readonly localization: Localization;
 
   /**
    * The GraphQL context used for this component test.
    */
-  readonly graphql: AppContext['graphql'] & {
-    /**
-     * The GraphQL controller used for this component test.
-     */
+  readonly graphql: {
     readonly controller: GraphQLController;
   };
 }

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

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

package/templates/app-trpc/App.tsx

@@ -1,7 +1,6 @@
 import {NotFound} from '@quilted/quilt/server';
-import {Navigation} from '@quilted/quilt/navigation';
-import {Localization} from '@quilted/quilt/localize';
-
+import {Routes} from '@quilted/quilt/navigation';
+import {QuiltFrameworkContext} from '@quilted/quilt/context';
 import {ReactQueryContext} from '@quilted/react-query';
 
 import {Head} from './foundation/html.ts';
@@ -9,13 +8,13 @@ import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
 
-import {trpc} from './context/trpc.ts';
-import type {AppContext as AppContextType} from './context/types.ts';
+import type {AppContext} from './context/types.ts';
 import {AppContextPreact} from './context/preact.ts';
+import {trpc} from './context/trpc.ts';
 import {routeWithAppContext} from './context/navigation.ts';
 
 export interface AppProps {
-  context: AppContextType;
+  context: AppContext;
 }
 
 // Define the routes for your application. If you have a lot of routes, you
@@ -40,18 +39,17 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContextPreact.Provider value={context}>
-      <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
-        <ReactQueryContext client={context.queryClient}>
-          <Localization>
+      <QuiltFrameworkContext
+        navigation={context.navigation}
+        localization={context.localization}
+      >
+        <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
+          <ReactQueryContext client={context.queryClient}>
             <Head />
-            <Navigation
-              router={context.navigation.router}
-              routes={routes}
-              context={context}
-            />
-          </Localization>
-        </ReactQueryContext>
-      </trpc.Provider>
+            <Routes list={routes} context={context} />
+          </ReactQueryContext>
+        </trpc.Provider>
+      </QuiltFrameworkContext>
     </AppContextPreact.Provider>
   );
 }

package/templates/app-trpc/browser.tsx

@@ -15,7 +15,7 @@ const app = new BrowserApp(<App context={context} />, {context});
 // @example
 // ```js
 // // Log the current URL
-// console.log(globalThis.app.context.navigation.router.currentRequest.url);
+// console.log(globalThis.app.context.navigation.currentRequest.url);
 // ```
 Object.defineProperty(globalThis, 'app', {
   value: app,

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

@@ -1,17 +1,21 @@
 import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 
-import type {AppContext} from './types.ts';
-import {NavigationForApp} from './navigation.ts';
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization} from '@quilted/quilt/localize';
+
 import {trpc} from './trpc.ts';
+import type {AppContext} from './types.ts';
 
 export class BrowserAppContext implements AppContext {
-  readonly navigation: NavigationForApp;
+  readonly navigation: Navigation;
+  readonly localization: Localization;
   readonly trpc: AppContext['trpc'];
   readonly queryClient: QueryClient;
 
   constructor() {
-    this.navigation = new NavigationForApp();
+    this.navigation = new Navigation();
+    this.localization = new Localization(navigator.language);
     this.queryClient = new QueryClient();
     this.trpc = trpc.createClient({
       links: [httpBatchLink({url: new URL('/api', window.location.href).href})],

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

@@ -1,17 +1,10 @@
-import {createContextRouteFunction, Router} from '@quilted/quilt/navigation';
+import {
+  createContextRouteFunction,
+  Navigation,
+} from '@quilted/quilt/navigation';
 
 import type {AppContext} from './types.ts';
 
-export interface Navigation {
-  readonly router: Router;
-}
-
-export class NavigationForApp implements Navigation {
-  readonly router: Router;
-
-  constructor(url?: string | URL) {
-    this.router = new Router(url);
-  }
-}
-
 export const routeWithAppContext = createContextRouteFunction<AppContext>();
+
+export {Navigation};

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

@@ -2,5 +2,14 @@ import {createOptionalContext} from '@quilted/quilt/context';
 
 import type {AppContext} from './types.ts';
 
+/**
+ * The Preact context object for this application's shared context.
+ * Provide it in `App.tsx` via `<AppContextPreact.Provider value={context}>`.
+ */
 export const AppContextPreact = createOptionalContext<AppContext>();
+
+/**
+ * Returns the app's shared context. All fields in `AppContext` are required
+ * and will be available anywhere inside `<AppContextPreact.Provider>`.
+ */
 export const useAppContext = AppContextPreact.use;

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

@@ -1,17 +1,24 @@
 import {createDirectClient} from '@quilted/trpc/server';
 import {QueryClient} from '@tanstack/react-query';
 
-import type {AppContext} from './types.ts';
-import {NavigationForApp} from './navigation.ts';
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization, parseAcceptLanguageHeader} from '@quilted/quilt/localize';
+
 import {appRouter} from '../trpc.ts';
+import type {AppContext} from './types.ts';
 
 export class ServerAppContext implements AppContext {
-  readonly navigation: NavigationForApp;
+  readonly navigation: Navigation;
+  readonly localization: Localization;
   readonly trpc: AppContext['trpc'];
   readonly queryClient: QueryClient;
 
   constructor(request: Request) {
-    this.navigation = new NavigationForApp(request.url);
+    this.navigation = new Navigation(request.url);
+    this.localization = new Localization(
+      parseAcceptLanguageHeader(request.headers.get('Accept-Language') ?? '') ??
+        'en',
+    );
     this.trpc = createDirectClient(appRouter);
     this.queryClient = new QueryClient();
   }

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

@@ -1,11 +1,35 @@
-import type {Navigation} from './navigation.ts';
-import type {TRPCUntypedClient} from '@trpc/client';
+import type {TRPCClient} from '@trpc/client';
 import type {QueryClient} from '@tanstack/react-query';
+import type {Navigation} from '@quilted/quilt/navigation';
+import type {Localization} from '@quilted/quilt/localize';
 
 import type {AppRouter} from '../trpc.ts';
 
+/**
+ * The shared context for this application. Values in this object are
+ * available to all components in the app via `useAppContext()`.
+ */
 export interface AppContext {
+  /**
+   * The navigation instance for this application. Manages the current URL,
+   * browser history, and programmatic navigation.
+   */
   readonly navigation: Navigation;
-  readonly trpc: TRPCUntypedClient<AppRouter>;
+
+  /**
+   * The localization instance for this application. Contains the active
+   * locale and formatting utilities for numbers, dates, currencies, and more.
+   */
+  readonly localization: Localization;
+
+  /**
+   * The tRPC client for this application, used to call tRPC procedures.
+   */
+  readonly trpc: TRPCClient<AppRouter>;
+
+  /**
+   * The react-query client for this application, used by tRPC to manage
+   * request state and caching.
+   */
   readonly queryClient: QueryClient;
 }

package/templates/app-trpc/package.json

@@ -24,7 +24,7 @@
     "@trpc/server": "next",
     "hono": "^4.8.0",
     "jsdom": "^26.0.0",
-    "preact": "^10.26.0",
+    "preact": "^10.29.0",
     "react": "npm:@quilted/react@^19.0.0",
     "react-dom": "npm:@quilted/react-dom@^19.0.0",
     "zod": "^3.22.0"

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

@@ -1,15 +1,12 @@
 import {createRender} from '@quilted/quilt/testing';
-import {
-  BrowserDetailsContext,
-  BrowserTestMock,
-} from '@quilted/quilt/browser/testing';
-import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
+import {TestBrowser} from '@quilted/quilt/browser/testing';
+import {TestNavigation} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
+import {QuiltFrameworkTestContext} from '@quilted/quilt/context/testing';
 
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
 import {trpc} from '~/context/trpc.ts';
-import {AppContextPreact} from '~/context/preact.ts';
 
 import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
@@ -26,37 +23,36 @@ export const renderApp = createRender<
   // Create context that can be used by the `render` function, and referenced by test
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
-  context({router = new TestRouter(), browser = new BrowserTestMock()}) {
+  context({
+    navigation = new TestNavigation(),
+    browser = new TestBrowser(),
+    localization = new Localization('en'),
+  }) {
     return {
-      navigation: {router},
+      navigation,
       browser,
+      localization,
       trpc: trpc.createClient(),
       queryClient: new QueryClient(),
     };
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale = 'en'}) {
-    const {
-      navigation: {router},
-      browser,
-      trpc: trpcClient,
-      queryClient,
-    } = context;
-
+  render(
+    element,
+    {navigation, browser, localization, trpc: trpcClient, queryClient},
+  ) {
     return (
-      <AppContextPreact.Provider value={context}>
-        <BrowserDetailsContext.Provider value={browser}>
-          <Localization locale={locale}>
-            <Navigation router={router}>
-              <trpc.Provider client={trpcClient} queryClient={queryClient}>
-                <QueryClientProvider client={queryClient}>
-                  {element}
-                </QueryClientProvider>
-              </trpc.Provider>
-            </Navigation>
-          </Localization>
-        </BrowserDetailsContext.Provider>
-      </AppContextPreact.Provider>
+      <QuiltFrameworkTestContext
+        navigation={navigation}
+        browser={browser}
+        localization={localization}
+      >
+        <trpc.Provider client={trpcClient} queryClient={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            {element}
+          </QueryClientProvider>
+        </trpc.Provider>
+      </QuiltFrameworkTestContext>
     );
   },
   async afterRender() {

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

@@ -1,39 +1,40 @@
-import type {TestRouter} from '@quilted/quilt/navigation/testing';
-import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
+import type {TestNavigation} from '@quilted/quilt/navigation/testing';
+import type {TestBrowser} from '@quilted/quilt/browser/testing';
+import type {Localization} from '@quilted/quilt/localize';
 import type {QueryClient} from '@tanstack/react-query';
 
-import type {AppContext} from '~/context/types.ts';
-
 export interface RenderOptions {
   /**
-   * A custom router to use for this component test. You can use a
-   * custom router to simulate a particular URL, and you can spy on
-   * its navigation method to check that components navigate as
-   * you expect.
+   * A custom navigation to use for this component test.
    */
-  readonly router?: TestRouter;
+  readonly navigation?: TestNavigation;
 
   /**
    * A custom environment for this component test.
    */
-  readonly browser?: BrowserTestMock;
+  readonly browser?: TestBrowser;
 
   /**
-   * A custom locale to use for this component test.
+   * A custom localization instance to use for this component test.
    */
-  readonly locale?: string;
+  readonly localization?: Localization;
 }
 
-export interface RenderContext extends AppContext {
+export interface RenderContext {
   /**
-   * The router used for this component test.
+   * The navigation used for this component test.
    */
-  readonly navigation: {router: TestRouter};
+  readonly navigation: TestNavigation;
 
   /**
    * The browser environment for this component test.
    */
-  readonly browser: BrowserTestMock;
+  readonly browser: TestBrowser;
+
+  /**
+   * The localization used for this component test.
+   */
+  readonly localization: Localization;
 
   /**
    * The react-query client used for this component test.

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

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