@quilted/create 0.1.58 → 0.1.59

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/create
 
+## 0.1.59
+
+### Patch Changes
+
+- [`ab07f855`](https://github.com/lemonmade/quilt/commit/ab07f855c65011cd437d198ba7b7eec590b6c8c3) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve app templates
+
 ## 0.1.58
 
 ### Patch Changes

package/package.json

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

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

@@ -0,0 +1,14 @@
+import {
+  createOptionalContext,
+  createUseContextHook,
+  createUseOptionalValueHook,
+} from '@quilted/quilt';
+
+export interface AppContext {}
+
+export const AppContextReact = createOptionalContext<AppContext>();
+export const useAppContext = createUseContextHook(AppContextReact);
+
+export function createUseAppContextHook<T>(hook: (context: AppContext) => T) {
+  return createUseOptionalValueHook<T>(() => hook(useAppContext()));
+}

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

@@ -1,12 +1,16 @@
 import '@quilted/quilt/matchers';
 
-import {type PropsWithChildren} from '@quilted/quilt';
 import {
   createRender,
   QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
 
+import {
+  AppContextReact,
+  type AppContext as AppContextType,
+} from '~/shared/context.ts';
+
 type Router = ReturnType<typeof createTestRouter>;
 
 export {createTestRouter};
@@ -26,7 +30,7 @@ export interface RenderOptions {
   locale?: string;
 }
 
-export interface RenderContext {
+export interface RenderContext extends AppContextType {
   /**
    * The router used for this component test.
    */
@@ -52,10 +56,14 @@ export const renderWithAppContext = createRender<
     return {router};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, {router}, {locale}) {
+  render(element, context, {locale}) {
+    const {router} = context;
+
     return (
       <QuiltAppTesting routing={router} localization={locale}>
-        <TestAppContext>{element}</TestAppContext>
+        <AppContextReact.Provider value={context}>
+          {element}
+        </AppContextReact.Provider>
       </QuiltAppTesting>
     );
   },
@@ -66,8 +74,3 @@ export const renderWithAppContext = createRender<
     // once the data is ready.
   },
 });
-
-// This component renders any app-wide context needed for component tests.
-function TestAppContext({children}: PropsWithChildren) {
-  return <>{children}</>;
-}

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

@@ -0,0 +1,14 @@
+import {
+  createOptionalContext,
+  createUseContextHook,
+  createUseOptionalValueHook,
+} from '@quilted/quilt';
+
+export interface AppContext {}
+
+export const AppContextReact = createOptionalContext<AppContext>();
+export const useAppContext = createUseContextHook(AppContextReact);
+
+export function createUseAppContextHook<T>(hook: (context: AppContext) => T) {
+  return createUseOptionalValueHook<T>(() => hook(useAppContext()));
+}

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

@@ -1,6 +1,5 @@
 import '@quilted/quilt/matchers';
 
-import {type Router} from '@quilted/quilt';
 import {
   createRender,
   QuiltAppTesting,
@@ -8,6 +7,11 @@ import {
 } from '@quilted/quilt/testing';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
+import {
+  AppContextReact,
+  type AppContext as AppContextType,
+} from '~/shared/context.ts';
+
 import {
   TestGraphQL,
   fillGraphQL,
@@ -15,6 +19,8 @@ import {
   type GraphQLController,
 } from './graphql.ts';
 
+type Router = ReturnType<typeof createTestRouter>;
+
 export {createTestRouter, fillGraphQL, createGraphQLController};
 
 export interface RenderOptions {
@@ -53,7 +59,7 @@ export interface RenderOptions {
   locale?: string;
 }
 
-export interface RenderContext {
+export interface RenderContext extends AppContextType {
   /**
    * The router used for this component test.
    */
@@ -89,14 +95,18 @@ export const renderWithAppContext = createRender<
     return {router, graphql, queryClient: new QueryClient()};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, {router, graphql, queryClient}, {locale}) {
+  render(element, context, {locale}) {
+    const {router, graphql, queryClient} = context;
+
     return (
       <QuiltAppTesting routing={router} localization={locale}>
-        <TestGraphQL controller={graphql}>
-          <QueryClientProvider client={queryClient}>
-            {element}
-          </QueryClientProvider>
-        </TestGraphQL>
+        <AppContextReact.Provider value={context}>
+          <TestGraphQL controller={graphql}>
+            <QueryClientProvider client={queryClient}>
+              {element}
+            </QueryClientProvider>
+          </TestGraphQL>
+        </AppContextReact.Provider>
       </QuiltAppTesting>
     );
   },

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};