@quilted/create 0.1.66 → 0.1.68

package/source/help.ts

@@ -13,16 +13,16 @@ export function printHelp({
 
   const usage = stripIndent`
     ${color.bold('Usage:')}   ${command} ${
-    kind ? color.magenta(kind) : color.magenta('[kind]')
-  } ${color.green('[name]')} ${color.cyan('[options]')}
+      kind ? color.magenta(kind) : color.magenta('[kind]')
+    } ${color.green('[name]')} ${color.cyan('[options]')}
   `;
 
   console.log(usage);
 
   const example = stripIndent`
     ${color.bold('Example:')} ${command} ${color.magenta(
-    kind ?? 'app',
-  )} ${color.green(`my-${kind ?? 'app'}`)} ${color.cyan('--install')}
+      kind ?? 'app',
+    )} ${color.green(`my-${kind ?? 'app'}`)} ${color.cyan('--install')}
   `;
 
   console.log(color.dim(example));
@@ -72,8 +72,8 @@ export function printHelp({
     )} flag is set.
 
     Must be one of the following: ${color.bold('pnpm')}, ${color.bold(
-    'npm',
-  )}, or ${color.bold('yarn')}.
+      'npm',
+    )}, or ${color.bold('yarn')}.
 
     ${color.cyan(`--extras`)}, ${color.cyan(`--no-extras`)}
     Extra developer tools to configure when creating your new project. This option only

package/source/package.ts

@@ -238,9 +238,10 @@ export async function createProject() {
 
   await outputRoot.write(
     path.join(packageDirectory, 'README.md'),
-    (
-      await packageTemplate.read('README.md')
-    ).replaceAll('{{name}}', toValidPackageName(name!)),
+    (await packageTemplate.read('README.md')).replaceAll(
+      '{{name}}',
+      toValidPackageName(name!),
+    ),
   );
 
   if (partOfMonorepo) {

package/source/shared.ts

@@ -162,14 +162,17 @@ export async function format(
 ) {
   const [
     {format: rootFormat, default: prettier},
-    {default: babel},
-    {default: typescript},
-    {default: yaml},
+    babel,
+    typescript,
+    yaml,
+    estree,
   ] = await Promise.all([
     import('prettier/standalone'),
-    import('prettier/parser-babel'),
-    import('prettier/parser-typescript'),
-    import('prettier/parser-yaml'),
+    import('prettier/plugins/babel'),
+    import('prettier/plugins/typescript'),
+    import('prettier/plugins/yaml'),
+    // @ts-expect-error Types are not generated correctly for this entry
+    import('prettier/plugins/estree'),
   ]);
 
   // CJS workaround
@@ -181,7 +184,7 @@ export async function format(
     singleQuote: true,
     trailingComma: 'all',
     parser,
-    plugins: [babel, typescript, yaml],
+    plugins: [babel, typescript, yaml, estree],
   });
 }
 

package/templates/app-basic/features/Start/Start.test.tsx

@@ -1,12 +1,12 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
 
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.ts';
 
 import Start from './Start.tsx';
 
 describe('<Start />', () => {
   it('includes a welcome message', async () => {
-    const start = await renderWithAppContext(<Start />);
+    const start = await renderApp(<Start />);
     expect(start).toContainReactText('Hello world!');
   });
 });

package/templates/app-basic/tests/{render.tsx → render/render.tsx}

@@ -1,49 +1,18 @@
-import '@quilted/quilt/matchers';
-
 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};
-
-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.
-   */
-  router?: Router;
-
-  /**
-   * A custom locale to use for this component test.
-   */
-  locale?: string;
-}
-
-export interface RenderContext extends AppContextType {
-  /**
-   * The router used for this component test.
-   */
-  router: Router;
-}
+import {AppContextReact} from '~/shared/context.ts';
 
-export interface RenderActions extends Record<string, never> {}
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
 /**
  * Renders a component with test-friendly versions of all global
  * context available to the application.
  */
-export const renderWithAppContext = createRender<
+export const renderApp = createRender<
   RenderOptions,
   RenderContext,
   RenderActions,

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

@@ -0,0 +1,29 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+
+import type {AppContext} from '~/shared/context.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+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.
+   */
+  readonly router?: Router;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+}
+
+export interface RenderActions extends Record<string, never> {}

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

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

package/templates/app-graphql/features/Start/Start.test.tsx

@@ -1,9 +1,9 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
 
 import {
-  renderWithAppContext,
-  createGraphQLController,
+  renderApp,
   fillGraphQL,
+  createGraphQLController,
 } from '~/tests/render.tsx';
 
 import Start from './Start.tsx';
@@ -14,7 +14,7 @@ describe('<Start />', () => {
     const name = 'Winston';
     const graphql = createGraphQLController(fillGraphQL(startQuery, {name}));
 
-    const start = await renderWithAppContext(<Start />, {graphql});
+    const start = await renderApp(<Start />, {graphql});
 
     expect(graphql).toHavePerformedGraphQLOperation(startQuery);
     expect(start).toContainReactText(`Hello ${name}!`);

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

@@ -0,0 +1,59 @@
+import {
+  createRender,
+  QuiltAppTesting,
+  createTestRouter,
+} from '@quilted/quilt/testing';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+
+import {AppContextReact} from '~/shared/context.ts';
+
+import {TestGraphQL, createGraphQLController} from '../graphql.ts';
+
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
+
+/**
+ * Renders a component with test-friendly versions of all global
+ * context available to the application.
+ */
+export const renderApp = createRender<
+  RenderOptions,
+  RenderContext,
+  RenderActions,
+  true
+>({
+  // 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 = createTestRouter(), graphql = createGraphQLController()}) {
+    return {router, graphql, queryClient: new QueryClient()};
+  },
+  // Render all of our app-wide context providers around each component under test.
+  render(element, context, {locale}) {
+    const {router, graphql, queryClient} = context;
+
+    return (
+      <QuiltAppTesting routing={router} localization={locale}>
+        <AppContextReact.Provider value={context}>
+          <TestGraphQL controller={graphql}>
+            <QueryClientProvider client={queryClient}>
+              {element}
+            </QueryClientProvider>
+          </TestGraphQL>
+        </AppContextReact.Provider>
+      </QuiltAppTesting>
+    );
+  },
+  async afterRender(wrapper) {
+    // If your components need to resolve data before they can render, you can
+    // use this hook to wait for that data to be ready. This will cause the
+    // `render` function to return a promise, so that the component is only usable
+    // once the data is ready.
+
+    await wrapper.act(async () => {
+      await wrapper.context.graphql.resolveAll();
+
+      // react-query needs an extra tick to set state in response to GraphQL queries.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  },
+});

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

@@ -0,0 +1,63 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+import type {QueryClient} from '@tanstack/react-query';
+
+import type {AppContext} from '~/shared/context.ts';
+
+import type {GraphQLController} from '../graphql.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+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.
+   */
+  readonly router?: Router;
+
+  /**
+   * 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 {renderWithAppContext, fillGraphQL, createGraphQLController} from '~/tests/render.tsx';
+   *
+   * import {MyComponent} from './MyComponent.tsx';
+   * import myComponentQuery from './MyComponentQuery.graphql';
+   *
+   * const myComponent = await renderWithAppContext(<MyComponent />, {
+   *   graphql: createGraphQLController(
+   *     fillGraphQL(myComponentQuery, {user: {name: 'Winston'}}),
+   *   ),
+   * });
+   * ```
+   */
+  readonly graphql?: GraphQLController;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+
+  /**
+   * The GraphQL controller used for this component test.
+   */
+  readonly graphql: GraphQLController;
+
+  /**
+   * The react-query client used for this component test.
+   */
+  readonly queryClient: QueryClient;
+}
+
+export interface RenderActions extends Record<string, never> {}

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

@@ -0,0 +1,7 @@
+import '@quilted/quilt/matchers';
+
+export {createTestRouter} from '@quilted/quilt/testing';
+
+export * from './render/types.ts';
+export {renderApp} from './render/render.tsx';
+export {fillGraphQL, createGraphQLController} from './graphql.ts';

package/templates/app-trpc/App.tsx

@@ -1,15 +1,26 @@
-import {QuiltApp, useRoutes, type PropsWithChildren} from '@quilted/quilt';
+import {
+  QuiltApp,
+  useRoutes,
+  type PropsWithChildren,
+  useInitialUrl,
+} from '@quilted/quilt';
+
+import {httpBatchLink} from '@trpc/client';
+import {QueryClient} from '@tanstack/react-query';
+import {ReactQueryContext} from '@quilted/react-query';
 
 import {
   AppContextReact,
   type AppContext as AppContextType,
 } from '~/shared/context.ts';
+import {trpc} from '~/shared/trpc.ts';
 
 import {Http} from './foundation/Http.tsx';
 import {Head} from './foundation/Head.tsx';
 import {Metrics} from './foundation/Metrics.tsx';
 
 import {Start} from './features/Start.tsx';
+import {useMemo} from 'react';
 
 export interface Props extends AppContextType {}
 
@@ -38,9 +49,28 @@ function AppContext({
   children,
   ...appContext
 }: PropsWithChildren<AppContextType>) {
+  const initialUrl = useInitialUrl();
+
+  const {queryClient, trpcClient} = useMemo(() => {
+    return {
+      queryClient: new QueryClient(),
+      trpcClient: trpc.createClient({
+        links: [
+          // We need to use an absolute URL so that queries will
+          // work during server-side rendering
+          httpBatchLink({url: new URL('/api', initialUrl).href}),
+        ],
+      }),
+    };
+  }, [initialUrl]);
+
   return (
     <AppContextReact.Provider value={appContext}>
-      <Metrics>{children}</Metrics>
+      <Metrics>
+        <trpc.Provider client={trpcClient} queryClient={queryClient}>
+          <ReactQueryContext client={queryClient}>{children}</ReactQueryContext>
+        </trpc.Provider>
+      </Metrics>
     </AppContextReact.Provider>
   );
 }

package/templates/app-trpc/tests/{render.tsx → render/render.tsx}

@@ -1,49 +1,20 @@
-import '@quilted/quilt/matchers';
-
 import {
   createRender,
   QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from '~/shared/context.ts';
-
-type Router = ReturnType<typeof createTestRouter>;
-
-export {createTestRouter};
-
-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.
-   */
-  router?: Router;
-
-  /**
-   * A custom locale to use for this component test.
-   */
-  locale?: string;
-}
-
-export interface RenderContext extends AppContextType {
-  /**
-   * The router used for this component test.
-   */
-  router: Router;
-}
+import {trpc} from '~/shared/trpc.ts';
+import {AppContextReact} from '~/shared/context.ts';
 
-export interface RenderActions extends Record<string, never> {}
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
 /**
  * Renders a component with test-friendly versions of all global
  * context available to the application.
  */
-export const renderWithAppContext = createRender<
+export const renderApp = createRender<
   RenderOptions,
   RenderContext,
   RenderActions,
@@ -53,16 +24,20 @@ export const renderWithAppContext = 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 = createTestRouter()}) {
-    return {router};
+    return {router, trpc: trpc.createClient(), queryClient: new QueryClient()};
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale}) {
-    const {router} = context;
+    const {router, trpc: trpcClient, queryClient} = context;
 
     return (
       <QuiltAppTesting routing={router} localization={locale}>
         <AppContextReact.Provider value={context}>
-          {element}
+          <trpc.Provider client={trpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+              {element}
+            </QueryClientProvider>
+          </trpc.Provider>
         </AppContextReact.Provider>
       </QuiltAppTesting>
     );

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

@@ -0,0 +1,35 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+import type {QueryClient} from '@tanstack/react-query';
+
+import type {AppContext} from '~/shared/context.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+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.
+   */
+  readonly router?: Router;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+
+  /**
+   * The react-query client used for this component test.
+   */
+  readonly queryClient: QueryClient;
+}
+
+export interface RenderActions extends Record<string, never> {}

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

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

package/build/cjs/_virtual/parser-babel.cjs

@@ -1,5 +0,0 @@
-'use strict';
-
-var parserBabel = {exports: {}};
-
-exports.__module = parserBabel;

package/build/cjs/_virtual/parser-typescript.cjs

@@ -1,5 +0,0 @@
-'use strict';
-
-var parserTypescript = {exports: {}};
-
-exports.__module = parserTypescript;

package/build/cjs/_virtual/parser-yaml.cjs

@@ -1,5 +0,0 @@
-'use strict';
-
-var parserYaml = {exports: {}};
-
-exports.__module = parserYaml;