@quilted/create 0.2.21 → 0.2.22

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/create
 
+## 0.2.22
+
+### Patch Changes
+
+- [`285b2f0`](https://github.com/lemonmade/quilt/commit/285b2f083bfc6fe81db35e2950c8b3ae846486d3) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix templates
+
 ## 0.2.21
 
 ### Patch Changes

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.mjs

@@ -2,9 +2,9 @@ import { __exports as out } from '../../../../../../../_virtual/index5.mjs';
 import './providers/async.mjs';
 import './providers/sync.mjs';
 import './settings.mjs';
-import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
-import { __exports as async$1 } from '../../../../../../../_virtual/async3.mjs';
-import { __exports as sync$1 } from '../../../../../../../_virtual/sync3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
+import { __exports as async$1 } from '../../../../../../../_virtual/async4.mjs';
+import { __exports as sync$1 } from '../../../../../../../_virtual/sync4.mjs';
 
 Object.defineProperty(out, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/async.mjs

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async3.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
 
 Object.defineProperty(async, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/sync.mjs

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync3.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
 
 Object.defineProperty(sync, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/settings.mjs

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
 import './adapters/fs.mjs';
 import { __exports as fs$1 } from '../../../../../../../_virtual/fs2.mjs';
 

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/index.mjs

@@ -3,10 +3,10 @@ import './providers/async.mjs';
 import './providers/stream.mjs';
 import './providers/sync.mjs';
 import './settings.mjs';
-import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
-import { __exports as async } from '../../../../../../../_virtual/async4.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
+import { __exports as async } from '../../../../../../../_virtual/async3.mjs';
 import { __exports as stream } from '../../../../../../../_virtual/stream4.mjs';
-import { __exports as sync } from '../../../../../../../_virtual/sync4.mjs';
+import { __exports as sync } from '../../../../../../../_virtual/sync3.mjs';
 
 Object.defineProperty(out, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/async.mjs

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async3.mjs';
 import '../readers/async.mjs';
 import { __exports as async$1 } from '../../../../../../../../_virtual/async5.mjs';
 

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/sync.mjs

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.mjs';
 import '../readers/sync.mjs';
 import { __exports as sync$1 } from '../../../../../../../../_virtual/sync5.mjs';
 

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/settings.mjs

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
 import path__default from 'node:path';
 import '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.mjs';
 import { __exports as out } from '../../../../../../../_virtual/index6.mjs';

package/package.json

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

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

@@ -7,6 +7,6 @@ import Start from './Start.tsx';
 describe('<Start />', () => {
   it('includes a welcome message', async () => {
     const start = await renderApp(<Start />);
-    expect(start).toContainReactText('Hello world!');
+    expect(start).toContainPreactText('Hello world!');
   });
 });

package/templates/app-basic/foundation/html/HTML.test.tsx

@@ -14,7 +14,7 @@ describe('<HTML />', () => {
   it('includes a responsive viewport tag', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(Viewport, {
+    expect(head).toContainPreactComponent(Viewport, {
       cover: true,
     });
   });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
   it('prevents search robots from indexing the application', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(SearchRobots, {
+    expect(head).toContainPreactComponent(SearchRobots, {
       index: false,
       follow: false,
     });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
   it('does not cache the response', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(CacheControl, {
+    expect(headers).toContainPreactComponent(CacheControl, {
       cache: false,
     });
   });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
   it('adds a content security policy with a strict default policy', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });

package/templates/app-basic/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "workspace:^0.6.0",
+    "@quilted/quilt": "^0.7.0",
     "jsdom": "^24.0.0",
     "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",

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

@@ -1,9 +1,6 @@
-import {
-  createOptionalContext,
-  createUseContextHook,
-} from '@quilted/quilt/react';
+import {createOptionalContext} from '@quilted/quilt/context';
 
 export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = createUseContextHook(AppContextReact);
+export const useAppContext = AppContextReact.use;

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

@@ -1,4 +1,5 @@
-import {createRender} from '@quilted/quilt/react/testing';
+import {createRender} from '@quilted/quilt/testing';
+import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
 import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -19,21 +20,21 @@ 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()}) {
-    return {router};
+  context({router = new TestRouter(), browser = new BrowserTestMock()}) {
+    return {router, browser};
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router} = context;
+    const {router, browser} = context;
 
     return (
-      <Localization locale={locale}>
-        <TestRouting router={router}>
-          <AppContextReact.Provider value={context}>
-            {element}
-          </AppContextReact.Provider>
-        </TestRouting>
-      </Localization>
+      <AppContextReact.Provider value={context}>
+        <BrowserContext browser={browser}>
+          <Localization locale={locale}>
+            <TestRouting router={router}>{element}</TestRouting>
+          </Localization>
+        </BrowserContext>
+      </AppContextReact.Provider>
     );
   },
   async afterRender() {

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

@@ -1,4 +1,5 @@
 import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 
 import type {AppContext} from '~/shared/context.ts';
 
@@ -11,6 +12,11 @@ export interface RenderOptions {
    */
   readonly router?: TestRouter;
 
+  /**
+   * A custom environment for this component test.
+   */
+  readonly browser?: BrowserTestMock;
+
   /**
    * A custom locale to use for this component test.
    */
@@ -22,6 +28,11 @@ export interface RenderContext extends AppContext {
    * The router used for this component test.
    */
   readonly router: TestRouter;
+
+  /**
+   * The browser environment for this component test.
+   */
+  readonly browser: BrowserTestMock;
 }
 
 export interface RenderActions extends Record<string, never> {}

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

@@ -1,4 +1,4 @@
-import '@quilted/quilt/react/testing';
+import '@quilted/quilt/testing';
 
 export {TestRouter} from '@quilted/quilt/navigate/testing';
 

package/templates/app-empty/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.6.0",
+    "@quilted/quilt": "^0.7.0",
     "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",
     "react-dom": "npm:@quilted/react-dom@^18.2.0"

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

@@ -16,6 +16,6 @@ describe('<Start />', () => {
     const start = await renderApp(<Start />, {graphql});
 
     expect(graphql).toHavePerformedGraphQLQuery(startQuery);
-    expect(start).toContainReactText(`Hello ${name}!`);
+    expect(start).toContainPreactText(`Hello ${name}!`);
   });
 });

package/templates/app-graphql/foundation/html/HTML.test.tsx

@@ -14,7 +14,7 @@ describe('<HTML />', () => {
   it('includes a responsive viewport tag', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(Viewport, {
+    expect(head).toContainPreactComponent(Viewport, {
       cover: true,
     });
   });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
   it('prevents search robots from indexing the application', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(SearchRobots, {
+    expect(head).toContainPreactComponent(SearchRobots, {
       index: false,
       follow: false,
     });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
   it('does not cache the response', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(CacheControl, {
+    expect(headers).toContainPreactComponent(CacheControl, {
       cache: false,
     });
   });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
   it('adds a content security policy with a strict default policy', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });

package/templates/app-graphql/package.json

@@ -12,8 +12,8 @@
   "dependencies": {},
   "devDependencies": {
     "@quilted/graphql-tools": "^0.2.0",
-    "@quilted/quilt": "^0.6.0",
-    "@quilted/react-query": "^0.3.0",
+    "@quilted/quilt": "^0.7.0",
+    "@quilted/react-query": "^0.4.0",
     "@tanstack/react-query": "^5.0.0",
     "graphql": "^16.8.0",
     "jsdom": "^24.0.0",

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

@@ -1,9 +1,6 @@
-import {
-  createOptionalContext,
-  createUseContextHook,
-} from '@quilted/quilt/react';
+import {createOptionalContext} from '@quilted/quilt/context';
 
 export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = createUseContextHook(AppContextReact);
+export const useAppContext = AppContextReact.use;

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

@@ -1,4 +1,5 @@
-import {createRender} from '@quilted/quilt/react/testing';
+import {createRender} from '@quilted/quilt/testing';
+import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
 import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -23,9 +24,14 @@ 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(), graphql = new GraphQLController()}) {
+  context({
+    router = new TestRouter(),
+    browser = new BrowserTestMock(),
+    graphql = new GraphQLController(),
+  }) {
     return {
       router,
+      browser,
       graphql,
       fetchGraphQL: graphql.fetch,
       queryClient: new QueryClient(),
@@ -33,20 +39,22 @@ export const renderApp = createRender<
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router, graphql, queryClient} = context;
+    const {router, browser, graphql, queryClient} = context;
 
     return (
-      <Localization locale={locale}>
-        <TestRouting router={router}>
-          <GraphQLTesting controller={graphql}>
-            <QueryClientProvider client={queryClient}>
-              <AppContextReact.Provider value={context}>
-                {element}
-              </AppContextReact.Provider>
-            </QueryClientProvider>
-          </GraphQLTesting>
-        </TestRouting>
-      </Localization>
+      <AppContextReact.Provider value={context}>
+        <BrowserContext browser={browser}>
+          <Localization locale={locale}>
+            <TestRouting router={router}>
+              <GraphQLTesting controller={graphql}>
+                <QueryClientProvider client={queryClient}>
+                  {element}
+                </QueryClientProvider>
+              </GraphQLTesting>
+            </TestRouting>
+          </Localization>
+        </BrowserContext>
+      </AppContextReact.Provider>
     );
   },
   async afterRender(wrapper) {

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

@@ -1,4 +1,5 @@
 import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 import type {QueryClient} from '@tanstack/react-query';
 
 import type {AppContext} from '~/shared/context.ts';
@@ -14,6 +15,11 @@ export interface RenderOptions {
    */
   readonly router?: TestRouter;
 
+  /**
+   * A custom environment for this component test.
+   */
+  readonly browser?: BrowserTestMock;
+
   /**
    * An object that controls the responses to GraphQL queries and mutations
    * for the component under test. You can customize the responses using
@@ -48,6 +54,11 @@ export interface RenderContext extends AppContext {
    */
   readonly router: TestRouter;
 
+  /**
+   * The browser environment for this component test.
+   */
+  readonly browser: BrowserTestMock;
+
   /**
    * The GraphQL controller used for this component test.
    */

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

@@ -1,4 +1,4 @@
-import '@quilted/quilt/react/testing';
+import '@quilted/quilt/testing';
 
 export {TestRouter} from '@quilted/quilt/navigate/testing';
 

package/templates/app-trpc/features/start/Start/Start.test.tsx

@@ -7,6 +7,6 @@ import Start from './Start.tsx';
 describe('<Start />', () => {
   it('includes a welcome message', async () => {
     const start = await renderApp(<Start />);
-    expect(start).toContainReactText('Hello world!');
+    expect(start).toContainPreactText('Hello world!');
   });
 });

package/templates/app-trpc/foundation/html/HTML.test.tsx

@@ -14,7 +14,7 @@ describe('<HTML />', () => {
   it('includes a responsive viewport tag', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(Viewport, {
+    expect(head).toContainPreactComponent(Viewport, {
       cover: true,
     });
   });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
   it('prevents search robots from indexing the application', async () => {
     const head = await renderApp(<HTML />);
 
-    expect(head).toContainReactComponent(SearchRobots, {
+    expect(head).toContainPreactComponent(SearchRobots, {
       index: false,
       follow: false,
     });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
   it('does not cache the response', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(CacheControl, {
+    expect(headers).toContainPreactComponent(CacheControl, {
       cache: false,
     });
   });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
   it('adds a content security policy with a strict default policy', async () => {
     const headers = await renderApp(<HTML />);
 
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });

package/templates/app-trpc/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.6.0",
-    "@quilted/react-query": "^0.3.0",
+    "@quilted/quilt": "^0.7.0",
+    "@quilted/react-query": "^0.4.0",
     "@quilted/trpc": "^0.2.0",
     "@tanstack/react-query": "^5.0.0",
     "@trpc/client": "^10.43.0",

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

@@ -1,9 +1,6 @@
-import {
-  createOptionalContext,
-  createUseContextHook,
-} from '@quilted/quilt/react';
+import {createOptionalContext} from '@quilted/quilt/context';
 
 export interface AppContext {}
 
 export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = createUseContextHook(AppContextReact);
+export const useAppContext = AppContextReact.use;

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

@@ -1,4 +1,5 @@
-import {createRender} from '@quilted/quilt/react/testing';
+import {createRender} from '@quilted/quilt/testing';
+import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
 import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -22,25 +23,32 @@ 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()}) {
-    return {router, trpc: trpc.createClient(), queryClient: new QueryClient()};
+  context({router = new TestRouter(), browser = new BrowserTestMock()}) {
+    return {
+      router,
+      browser,
+      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 {router, trpc: trpcClient, queryClient} = context;
+    const {router, browser, trpc: trpcClient, queryClient} = context;
 
     return (
-      <Localization locale={locale}>
-        <TestRouting router={router}>
-          <AppContextReact.Provider value={context}>
-            <trpc.Provider client={trpcClient} queryClient={queryClient}>
-              <QueryClientProvider client={queryClient}>
-                {element}
-              </QueryClientProvider>
-            </trpc.Provider>
-          </AppContextReact.Provider>
-        </TestRouting>
-      </Localization>
+      <AppContextReact.Provider value={context}>
+        <BrowserContext browser={browser}>
+          <Localization locale={locale}>
+            <TestRouting router={router}>
+              <trpc.Provider client={trpcClient} queryClient={queryClient}>
+                <QueryClientProvider client={queryClient}>
+                  {element}
+                </QueryClientProvider>
+              </trpc.Provider>
+            </TestRouting>
+          </Localization>
+        </BrowserContext>
+      </AppContextReact.Provider>
     );
   },
   async afterRender() {

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

@@ -1,4 +1,5 @@
 import type {TestRouter} from '@quilted/quilt/navigate/testing';
+import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 import type {QueryClient} from '@tanstack/react-query';
 
 import type {AppContext} from '~/shared/context.ts';
@@ -12,6 +13,11 @@ export interface RenderOptions {
    */
   readonly router?: TestRouter;
 
+  /**
+   * A custom environment for this component test.
+   */
+  readonly browser?: BrowserTestMock;
+
   /**
    * A custom locale to use for this component test.
    */
@@ -24,6 +30,11 @@ export interface RenderContext extends AppContext {
    */
   readonly router: TestRouter;
 
+  /**
+   * The browser environment for this component test.
+   */
+  readonly browser: BrowserTestMock;
+
   /**
    * The react-query client used for this component test.
    */

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

@@ -1,4 +1,4 @@
-import '@quilted/quilt/react/testing';
+import '@quilted/quilt/testing';
 
 export {TestRouter} from '@quilted/quilt/navigate/testing';