@quilted/create 0.2.20 → 0.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +1 -1
  3. package/templates/app-basic/App.tsx +2 -2
  4. package/templates/app-basic/browser.tsx +3 -3
  5. package/templates/app-basic/features/start/Start/Start.test.tsx +1 -1
  6. package/templates/app-basic/foundation/frame/Frame.tsx +2 -2
  7. package/templates/app-basic/foundation/html/HTML.test.tsx +4 -4
  8. package/templates/app-basic/foundation/html/HTML.tsx +3 -2
  9. package/templates/app-basic/package.json +1 -3
  10. package/templates/app-basic/shared/context.ts +2 -5
  11. package/templates/app-basic/tests/render/render.tsx +12 -11
  12. package/templates/app-basic/tests/render/types.ts +11 -0
  13. package/templates/app-basic/tests/render.ts +1 -1
  14. package/templates/app-basic/tsconfig.json +1 -0
  15. package/templates/app-empty/browser.tsx +2 -2
  16. package/templates/app-empty/package.json +1 -3
  17. package/templates/app-graphql/App.tsx +2 -2
  18. package/templates/app-graphql/browser.tsx +3 -3
  19. package/templates/app-graphql/features/start/Start/Start.test.tsx +1 -1
  20. package/templates/app-graphql/foundation/frame/Frame.tsx +2 -2
  21. package/templates/app-graphql/foundation/html/HTML.test.tsx +4 -4
  22. package/templates/app-graphql/foundation/html/HTML.tsx +2 -2
  23. package/templates/app-graphql/package.json +2 -4
  24. package/templates/app-graphql/shared/context.ts +2 -5
  25. package/templates/app-graphql/tests/render/render.tsx +22 -14
  26. package/templates/app-graphql/tests/render/types.ts +11 -0
  27. package/templates/app-graphql/tests/render.ts +1 -1
  28. package/templates/app-trpc/App.tsx +2 -2
  29. package/templates/app-trpc/browser.tsx +4 -3
  30. package/templates/app-trpc/features/start/Start/Start.test.tsx +1 -1
  31. package/templates/app-trpc/foundation/frame/Frame.tsx +2 -2
  32. package/templates/app-trpc/foundation/html/HTML.test.tsx +4 -4
  33. package/templates/app-trpc/foundation/html/HTML.tsx +2 -2
  34. package/templates/app-trpc/package.json +2 -4
  35. package/templates/app-trpc/shared/context.ts +2 -5
  36. package/templates/app-trpc/tests/render/render.tsx +23 -15
  37. package/templates/app-trpc/tests/render/types.ts +11 -0
  38. package/templates/app-trpc/tests/render.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @quilted/create
2
2
 
3
+ ## 0.2.22
4
+
5
+ ### Patch Changes
6
+
7
+ - [`285b2f0`](https://github.com/lemonmade/quilt/commit/285b2f083bfc6fe81db35e2950c8b3ae846486d3) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix templates
8
+
9
+ ## 0.2.21
10
+
11
+ ### Patch Changes
12
+
13
+ - [`eaf0c45`](https://github.com/lemonmade/quilt/commit/eaf0c457f49c9bb60e854e42ffd35df4af59304f) Thanks [@lemonmade](https://github.com/lemonmade)! - Update templates
14
+
3
15
  ## 0.2.20
4
16
 
5
17
  ### Patch Changes
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@quilted/create",
3
3
  "type": "module",
4
- "version": "0.2.20",
4
+ "version": "0.2.22",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/templates/app-basic/App.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {type PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import {Routing, useRoutes} from '@quilted/quilt/navigate';
4
4
  import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -42,7 +42,7 @@ function Routes() {
42
42
  }
43
43
 
44
44
  // This component renders any app-wide context.
45
- function AppContext({children, context}: PropsWithChildren<AppProps>) {
45
+ function AppContext({children, context}: RenderableProps<AppProps>) {
46
46
  const locale = useLocaleFromEnvironment() ?? 'en';
47
47
 
48
48
  return (
package/templates/app-basic/browser.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import '@quilted/quilt/globals';
2
- import {hydrateRoot} from 'react-dom/client';
2
+ import {hydrate} from 'preact';
3
3
  import {Browser, BrowserContext} from '@quilted/quilt/browser';
4
4
 
5
5
  import {App} from './App.tsx';
@@ -7,9 +7,9 @@ import {App} from './App.tsx';
7
7
  const element = document.querySelector('#app')!;
8
8
  const browser = new Browser();
9
9
 
10
- hydrateRoot(
11
- element,
10
+ hydrate(
12
11
  <BrowserContext browser={browser}>
13
12
  <App />
14
13
  </BrowserContext>,
14
+ element,
15
15
  );
package/templates/app-basic/features/start/Start/Start.test.tsx CHANGED
@@ -7,6 +7,6 @@ import Start from './Start.tsx';
7
7
  describe('<Start />', () => {
8
8
  it('includes a welcome message', async () => {
9
9
  const start = await renderApp(<Start />);
10
- expect(start).toContainReactText('Hello world!');
10
+ expect(start).toContainPreactText('Hello world!');
11
11
  });
12
12
  });
package/templates/app-basic/foundation/frame/Frame.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import styles from './Frame.module.css';
4
4
 
5
- export function Frame({children}: PropsWithChildren) {
5
+ export function Frame({children}: RenderableProps<{}>) {
6
6
  return <div className={styles.Frame}>{children}</div>;
7
7
  }
package/templates/app-basic/foundation/html/HTML.test.tsx CHANGED
@@ -14,7 +14,7 @@ describe('<HTML />', () => {
14
14
  it('includes a responsive viewport tag', async () => {
15
15
  const head = await renderApp(<HTML />);
16
16
 
17
- expect(head).toContainReactComponent(Viewport, {
17
+ expect(head).toContainPreactComponent(Viewport, {
18
18
  cover: true,
19
19
  });
20
20
  });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
22
22
  it('prevents search robots from indexing the application', async () => {
23
23
  const head = await renderApp(<HTML />);
24
24
 
25
- expect(head).toContainReactComponent(SearchRobots, {
25
+ expect(head).toContainPreactComponent(SearchRobots, {
26
26
  index: false,
27
27
  follow: false,
28
28
  });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
31
31
  it('does not cache the response', async () => {
32
32
  const headers = await renderApp(<HTML />);
33
33
 
34
- expect(headers).toContainReactComponent(CacheControl, {
34
+ expect(headers).toContainPreactComponent(CacheControl, {
35
35
  cache: false,
36
36
  });
37
37
  });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
39
39
  it('adds a content security policy with a strict default policy', async () => {
40
40
  const headers = await renderApp(<HTML />);
41
41
 
42
- expect(headers).toContainReactComponent(ContentSecurityPolicy, {
42
+ expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
43
43
  defaultSources: ["'self'"],
44
44
  });
45
45
  });
package/templates/app-basic/foundation/html/HTML.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
+ import Env from '@quilted/quilt/env';
2
3
  import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
3
4
  import {
4
5
  CacheControl,
@@ -16,7 +17,7 @@ import {
16
17
  // application you can read that state.
17
18
  //
18
19
  // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
19
- export function HTML({children}: PropsWithChildren) {
20
+ export function HTML({children}: RenderableProps<{}>) {
20
21
  return (
21
22
  <>
22
23
  <Headers />
package/templates/app-basic/package.json CHANGED
@@ -11,9 +11,7 @@
11
11
  },
12
12
  "dependencies": {},
13
13
  "devDependencies": {
14
- "@quilted/quilt": "workspace:^0.6.0",
15
- "@types/react": "^18.2.0",
16
- "@types/react-dom": "^18.2.0",
14
+ "@quilted/quilt": "^0.7.0",
17
15
  "jsdom": "^24.0.0",
18
16
  "preact": "^10.21.0",
19
17
  "react": "npm:@quilted/react@^18.2.0",
package/templates/app-basic/shared/context.ts CHANGED
@@ -1,9 +1,6 @@
1
- import {
2
- createOptionalContext,
3
- createUseContextHook,
4
- } from '@quilted/quilt/react';
1
+ import {createOptionalContext} from '@quilted/quilt/context';
5
2
 
6
3
  export interface AppContext {}
7
4
 
8
5
  export const AppContextReact = createOptionalContext<AppContext>();
9
- export const useAppContext = createUseContextHook(AppContextReact);
6
+ export const useAppContext = AppContextReact.use;
package/templates/app-basic/tests/render/render.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import {createRender} from '@quilted/quilt/react/testing';
1
+ import {createRender} from '@quilted/quilt/testing';
2
+ import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
  import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
3
4
  import {Localization} from '@quilted/quilt/localize';
4
5
 
@@ -19,21 +20,21 @@ export const renderApp = createRender<
19
20
  // Create context that can be used by the `render` function, and referenced by test
20
21
  // authors on the `root.context` property. Context is used to share data between your
21
22
  // React tree and your test code, and is ideal for mocking out global context providers.
22
- context({router = new TestRouter()}) {
23
- return {router};
23
+ context({router = new TestRouter(), browser = new BrowserTestMock()}) {
24
+ return {router, browser};
24
25
  },
25
26
  // Render all of our app-wide context providers around each component under test.
26
27
  render(element, context, {locale = 'en'}) {
27
- const {router} = context;
28
+ const {router, browser} = context;
28
29
 
29
30
  return (
30
- <Localization locale={locale}>
31
- <TestRouting router={router}>
32
- <AppContextReact.Provider value={context}>
33
- {element}
34
- </AppContextReact.Provider>
35
- </TestRouting>
36
- </Localization>
31
+ <AppContextReact.Provider value={context}>
32
+ <BrowserContext browser={browser}>
33
+ <Localization locale={locale}>
34
+ <TestRouting router={router}>{element}</TestRouting>
35
+ </Localization>
36
+ </BrowserContext>
37
+ </AppContextReact.Provider>
37
38
  );
38
39
  },
39
40
  async afterRender() {
package/templates/app-basic/tests/render/types.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type {TestRouter} from '@quilted/quilt/navigate/testing';
2
+ import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
 
3
4
  import type {AppContext} from '~/shared/context.ts';
4
5
 
@@ -11,6 +12,11 @@ export interface RenderOptions {
11
12
  */
12
13
  readonly router?: TestRouter;
13
14
 
15
+ /**
16
+ * A custom environment for this component test.
17
+ */
18
+ readonly browser?: BrowserTestMock;
19
+
14
20
  /**
15
21
  * A custom locale to use for this component test.
16
22
  */
@@ -22,6 +28,11 @@ export interface RenderContext extends AppContext {
22
28
  * The router used for this component test.
23
29
  */
24
30
  readonly router: TestRouter;
31
+
32
+ /**
33
+ * The browser environment for this component test.
34
+ */
35
+ readonly browser: BrowserTestMock;
25
36
  }
26
37
 
27
38
  export interface RenderActions extends Record<string, never> {}
package/templates/app-basic/tests/render.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@quilted/quilt/react/testing';
1
+ import '@quilted/quilt/testing';
2
2
 
3
3
  export {TestRouter} from '@quilted/quilt/navigate/testing';
4
4
 
package/templates/app-basic/tsconfig.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "extends": "@quilted/typescript/tsconfig.project.json",
3
3
  "compilerOptions": {
4
4
  "outDir": "build/typescript",
5
+ "jsxImportSource": "preact",
5
6
  "paths": {
6
7
  "~/shared/*": ["./shared/*"],
7
8
  "~/tests/*": ["./tests/*"]
package/templates/app-empty/browser.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import {hydrateRoot} from 'react-dom/client';
1
+ import {hydrate} from 'preact';
2
2
 
3
3
  import {App} from './App.tsx';
4
4
 
5
5
  const element = document.querySelector('#app')!;
6
6
 
7
- hydrateRoot(element, <App />);
7
+ hydrate(<App />, element);
package/templates/app-empty/package.json CHANGED
@@ -11,9 +11,7 @@
11
11
  },
12
12
  "dependencies": {},
13
13
  "devDependencies": {
14
- "@quilted/quilt": "^0.6.0",
15
- "@types/react": "^18.2.0",
16
- "@types/react-dom": "^18.2.0",
14
+ "@quilted/quilt": "^0.7.0",
17
15
  "preact": "^10.21.0",
18
16
  "react": "npm:@quilted/react@^18.2.0",
19
17
  "react-dom": "npm:@quilted/react-dom@^18.2.0"
package/templates/app-graphql/App.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {type PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import {Routing, useRoutes} from '@quilted/quilt/navigate';
4
4
  import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -45,7 +45,7 @@ function Routes() {
45
45
  }
46
46
 
47
47
  // This component renders any app-wide context.
48
- function AppContext({children, context}: PropsWithChildren<AppProps>) {
48
+ function AppContext({children, context}: RenderableProps<AppProps>) {
49
49
  const locale = useLocaleFromEnvironment() ?? 'en';
50
50
 
51
51
  return (
package/templates/app-graphql/browser.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import '@quilted/quilt/globals';
2
2
 
3
- import {hydrateRoot} from 'react-dom/client';
3
+ import {hydrate} from 'preact';
4
4
  import {QueryClient} from '@tanstack/react-query';
5
5
  import {createGraphQLFetch} from '@quilted/quilt/graphql';
6
6
  import {Browser, BrowserContext} from '@quilted/quilt/browser';
@@ -13,9 +13,9 @@ const browser = new Browser();
13
13
  const queryClient = new QueryClient();
14
14
  const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
15
15
 
16
- hydrateRoot(
17
- element,
16
+ hydrate(
18
17
  <BrowserContext browser={browser}>
19
18
  <App context={{fetchGraphQL, queryClient}} />
20
19
  </BrowserContext>,
20
+ element,
21
21
  );
package/templates/app-graphql/features/start/Start/Start.test.tsx CHANGED
@@ -16,6 +16,6 @@ describe('<Start />', () => {
16
16
  const start = await renderApp(<Start />, {graphql});
17
17
 
18
18
  expect(graphql).toHavePerformedGraphQLQuery(startQuery);
19
- expect(start).toContainReactText(`Hello ${name}!`);
19
+ expect(start).toContainPreactText(`Hello ${name}!`);
20
20
  });
21
21
  });
package/templates/app-graphql/foundation/frame/Frame.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import styles from './Frame.module.css';
4
4
 
5
- export function Frame({children}: PropsWithChildren) {
5
+ export function Frame({children}: RenderableProps<{}>) {
6
6
  return <div className={styles.Frame}>{children}</div>;
7
7
  }
package/templates/app-graphql/foundation/html/HTML.test.tsx CHANGED
@@ -14,7 +14,7 @@ describe('<HTML />', () => {
14
14
  it('includes a responsive viewport tag', async () => {
15
15
  const head = await renderApp(<HTML />);
16
16
 
17
- expect(head).toContainReactComponent(Viewport, {
17
+ expect(head).toContainPreactComponent(Viewport, {
18
18
  cover: true,
19
19
  });
20
20
  });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
22
22
  it('prevents search robots from indexing the application', async () => {
23
23
  const head = await renderApp(<HTML />);
24
24
 
25
- expect(head).toContainReactComponent(SearchRobots, {
25
+ expect(head).toContainPreactComponent(SearchRobots, {
26
26
  index: false,
27
27
  follow: false,
28
28
  });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
31
31
  it('does not cache the response', async () => {
32
32
  const headers = await renderApp(<HTML />);
33
33
 
34
- expect(headers).toContainReactComponent(CacheControl, {
34
+ expect(headers).toContainPreactComponent(CacheControl, {
35
35
  cache: false,
36
36
  });
37
37
  });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
39
39
  it('adds a content security policy with a strict default policy', async () => {
40
40
  const headers = await renderApp(<HTML />);
41
41
 
42
- expect(headers).toContainReactComponent(ContentSecurityPolicy, {
42
+ expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
43
43
  defaultSources: ["'self'"],
44
44
  });
45
45
  });
package/templates/app-graphql/foundation/html/HTML.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
  import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
3
3
  import {
4
4
  CacheControl,
@@ -16,7 +16,7 @@ import {
16
16
  // application you can read that state.
17
17
  //
18
18
  // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
19
- export function HTML({children}: PropsWithChildren) {
19
+ export function HTML({children}: RenderableProps<{}>) {
20
20
  return (
21
21
  <>
22
22
  <Headers />
package/templates/app-graphql/package.json CHANGED
@@ -12,11 +12,9 @@
12
12
  "dependencies": {},
13
13
  "devDependencies": {
14
14
  "@quilted/graphql-tools": "^0.2.0",
15
- "@quilted/quilt": "^0.6.0",
16
- "@quilted/react-query": "^0.3.0",
15
+ "@quilted/quilt": "^0.7.0",
16
+ "@quilted/react-query": "^0.4.0",
17
17
  "@tanstack/react-query": "^5.0.0",
18
- "@types/react": "^18.2.0",
19
- "@types/react-dom": "^18.2.0",
20
18
  "graphql": "^16.8.0",
21
19
  "jsdom": "^24.0.0",
22
20
  "preact": "^10.21.0",
package/templates/app-graphql/shared/context.ts CHANGED
@@ -1,9 +1,6 @@
1
- import {
2
- createOptionalContext,
3
- createUseContextHook,
4
- } from '@quilted/quilt/react';
1
+ import {createOptionalContext} from '@quilted/quilt/context';
5
2
 
6
3
  export interface AppContext {}
7
4
 
8
5
  export const AppContextReact = createOptionalContext<AppContext>();
9
- export const useAppContext = createUseContextHook(AppContextReact);
6
+ export const useAppContext = AppContextReact.use;
package/templates/app-graphql/tests/render/render.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import {createRender} from '@quilted/quilt/react/testing';
1
+ import {createRender} from '@quilted/quilt/testing';
2
+ import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
  import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
3
4
  import {Localization} from '@quilted/quilt/localize';
4
5
 
@@ -23,9 +24,14 @@ export const renderApp = createRender<
23
24
  // Create context that can be used by the `render` function, and referenced by test
24
25
  // authors on the `root.context` property. Context is used to share data between your
25
26
  // React tree and your test code, and is ideal for mocking out global context providers.
26
- context({router = new TestRouter(), graphql = new GraphQLController()}) {
27
+ context({
28
+ router = new TestRouter(),
29
+ browser = new BrowserTestMock(),
30
+ graphql = new GraphQLController(),
31
+ }) {
27
32
  return {
28
33
  router,
34
+ browser,
29
35
  graphql,
30
36
  fetchGraphQL: graphql.fetch,
31
37
  queryClient: new QueryClient(),
@@ -33,20 +39,22 @@ export const renderApp = createRender<
33
39
  },
34
40
  // Render all of our app-wide context providers around each component under test.
35
41
  render(element, context, {locale = 'en'}) {
36
- const {router, graphql, queryClient} = context;
42
+ const {router, browser, graphql, queryClient} = context;
37
43
 
38
44
  return (
39
- <Localization locale={locale}>
40
- <TestRouting router={router}>
41
- <GraphQLTesting controller={graphql}>
42
- <QueryClientProvider client={queryClient}>
43
- <AppContextReact.Provider value={context}>
44
- {element}
45
- </AppContextReact.Provider>
46
- </QueryClientProvider>
47
- </GraphQLTesting>
48
- </TestRouting>
49
- </Localization>
45
+ <AppContextReact.Provider value={context}>
46
+ <BrowserContext browser={browser}>
47
+ <Localization locale={locale}>
48
+ <TestRouting router={router}>
49
+ <GraphQLTesting controller={graphql}>
50
+ <QueryClientProvider client={queryClient}>
51
+ {element}
52
+ </QueryClientProvider>
53
+ </GraphQLTesting>
54
+ </TestRouting>
55
+ </Localization>
56
+ </BrowserContext>
57
+ </AppContextReact.Provider>
50
58
  );
51
59
  },
52
60
  async afterRender(wrapper) {
package/templates/app-graphql/tests/render/types.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type {TestRouter} from '@quilted/quilt/navigate/testing';
2
+ import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
  import type {QueryClient} from '@tanstack/react-query';
3
4
 
4
5
  import type {AppContext} from '~/shared/context.ts';
@@ -14,6 +15,11 @@ export interface RenderOptions {
14
15
  */
15
16
  readonly router?: TestRouter;
16
17
 
18
+ /**
19
+ * A custom environment for this component test.
20
+ */
21
+ readonly browser?: BrowserTestMock;
22
+
17
23
  /**
18
24
  * An object that controls the responses to GraphQL queries and mutations
19
25
  * for the component under test. You can customize the responses using
@@ -48,6 +54,11 @@ export interface RenderContext extends AppContext {
48
54
  */
49
55
  readonly router: TestRouter;
50
56
 
57
+ /**
58
+ * The browser environment for this component test.
59
+ */
60
+ readonly browser: BrowserTestMock;
61
+
51
62
  /**
52
63
  * The GraphQL controller used for this component test.
53
64
  */
package/templates/app-graphql/tests/render.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@quilted/quilt/react/testing';
1
+ import '@quilted/quilt/testing';
2
2
 
3
3
  export {TestRouter} from '@quilted/quilt/navigate/testing';
4
4
 
package/templates/app-trpc/App.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {type PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import {Routing, useRoutes} from '@quilted/quilt/navigate';
4
4
  import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -45,7 +45,7 @@ function Routes() {
45
45
  }
46
46
 
47
47
  // This component renders any app-wide context.
48
- function AppContext({children, context}: PropsWithChildren<AppProps>) {
48
+ function AppContext({children, context}: RenderableProps<AppProps>) {
49
49
  const locale = useLocaleFromEnvironment() ?? 'en';
50
50
 
51
51
  return (
package/templates/app-trpc/browser.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import '@quilted/quilt/globals';
2
- import {hydrateRoot} from 'react-dom/client';
2
+
3
+ import {hydrate} from 'preact';
3
4
  import {httpBatchLink} from '@trpc/client';
4
5
  import {QueryClient} from '@tanstack/react-query';
5
6
  import {Browser, BrowserContext} from '@quilted/quilt/browser';
@@ -16,9 +17,9 @@ const trpcClient = trpc.createClient({
16
17
  links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
17
18
  });
18
19
 
19
- hydrateRoot(
20
- element,
20
+ hydrate(
21
21
  <BrowserContext browser={browser}>
22
22
  <App context={{trpc: trpcClient, queryClient}} />
23
23
  </BrowserContext>,
24
+ element,
24
25
  );
package/templates/app-trpc/features/start/Start/Start.test.tsx CHANGED
@@ -7,6 +7,6 @@ import Start from './Start.tsx';
7
7
  describe('<Start />', () => {
8
8
  it('includes a welcome message', async () => {
9
9
  const start = await renderApp(<Start />);
10
- expect(start).toContainReactText('Hello world!');
10
+ expect(start).toContainPreactText('Hello world!');
11
11
  });
12
12
  });
package/templates/app-trpc/foundation/frame/Frame.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
 
3
3
  import styles from './Frame.module.css';
4
4
 
5
- export function Frame({children}: PropsWithChildren) {
5
+ export function Frame({children}: RenderableProps<{}>) {
6
6
  return <div className={styles.Frame}>{children}</div>;
7
7
  }
package/templates/app-trpc/foundation/html/HTML.test.tsx CHANGED
@@ -14,7 +14,7 @@ describe('<HTML />', () => {
14
14
  it('includes a responsive viewport tag', async () => {
15
15
  const head = await renderApp(<HTML />);
16
16
 
17
- expect(head).toContainReactComponent(Viewport, {
17
+ expect(head).toContainPreactComponent(Viewport, {
18
18
  cover: true,
19
19
  });
20
20
  });
@@ -22,7 +22,7 @@ describe('<HTML />', () => {
22
22
  it('prevents search robots from indexing the application', async () => {
23
23
  const head = await renderApp(<HTML />);
24
24
 
25
- expect(head).toContainReactComponent(SearchRobots, {
25
+ expect(head).toContainPreactComponent(SearchRobots, {
26
26
  index: false,
27
27
  follow: false,
28
28
  });
@@ -31,7 +31,7 @@ describe('<HTML />', () => {
31
31
  it('does not cache the response', async () => {
32
32
  const headers = await renderApp(<HTML />);
33
33
 
34
- expect(headers).toContainReactComponent(CacheControl, {
34
+ expect(headers).toContainPreactComponent(CacheControl, {
35
35
  cache: false,
36
36
  });
37
37
  });
@@ -39,7 +39,7 @@ describe('<HTML />', () => {
39
39
  it('adds a content security policy with a strict default policy', async () => {
40
40
  const headers = await renderApp(<HTML />);
41
41
 
42
- expect(headers).toContainReactComponent(ContentSecurityPolicy, {
42
+ expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
43
43
  defaultSources: ["'self'"],
44
44
  });
45
45
  });
package/templates/app-trpc/foundation/html/HTML.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type {PropsWithChildren} from 'react';
1
+ import type {RenderableProps} from 'preact';
2
2
  import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
3
3
  import {
4
4
  CacheControl,
@@ -16,7 +16,7 @@ import {
16
16
  // application you can read that state.
17
17
  //
18
18
  // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
19
- export function HTML({children}: PropsWithChildren) {
19
+ export function HTML({children}: RenderableProps<{}>) {
20
20
  return (
21
21
  <>
22
22
  <Headers />
package/templates/app-trpc/package.json CHANGED
@@ -11,15 +11,13 @@
11
11
  },
12
12
  "dependencies": {},
13
13
  "devDependencies": {
14
- "@quilted/quilt": "^0.6.0",
15
- "@quilted/react-query": "^0.3.0",
14
+ "@quilted/quilt": "^0.7.0",
15
+ "@quilted/react-query": "^0.4.0",
16
16
  "@quilted/trpc": "^0.2.0",
17
17
  "@tanstack/react-query": "^5.0.0",
18
18
  "@trpc/client": "^10.43.0",
19
19
  "@trpc/react-query": "^10.43.0",
20
20
  "@trpc/server": "^10.43.0",
21
- "@types/react": "^18.2.0",
22
- "@types/react-dom": "^18.2.0",
23
21
  "jsdom": "^24.0.0",
24
22
  "preact": "^10.21.0",
25
23
  "react": "npm:@quilted/react@^18.2.0",
package/templates/app-trpc/shared/context.ts CHANGED
@@ -1,9 +1,6 @@
1
- import {
2
- createOptionalContext,
3
- createUseContextHook,
4
- } from '@quilted/quilt/react';
1
+ import {createOptionalContext} from '@quilted/quilt/context';
5
2
 
6
3
  export interface AppContext {}
7
4
 
8
5
  export const AppContextReact = createOptionalContext<AppContext>();
9
- export const useAppContext = createUseContextHook(AppContextReact);
6
+ export const useAppContext = AppContextReact.use;
package/templates/app-trpc/tests/render/render.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import {createRender} from '@quilted/quilt/react/testing';
1
+ import {createRender} from '@quilted/quilt/testing';
2
+ import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
  import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
3
4
  import {Localization} from '@quilted/quilt/localize';
4
5
 
@@ -22,25 +23,32 @@ export const renderApp = createRender<
22
23
  // Create context that can be used by the `render` function, and referenced by test
23
24
  // authors on the `root.context` property. Context is used to share data between your
24
25
  // React tree and your test code, and is ideal for mocking out global context providers.
25
- context({router = new TestRouter()}) {
26
- return {router, trpc: trpc.createClient(), queryClient: new QueryClient()};
26
+ context({router = new TestRouter(), browser = new BrowserTestMock()}) {
27
+ return {
28
+ router,
29
+ browser,
30
+ trpc: trpc.createClient(),
31
+ queryClient: new QueryClient(),
32
+ };
27
33
  },
28
34
  // Render all of our app-wide context providers around each component under test.
29
35
  render(element, context, {locale = 'en'}) {
30
- const {router, trpc: trpcClient, queryClient} = context;
36
+ const {router, browser, trpc: trpcClient, queryClient} = context;
31
37
 
32
38
  return (
33
- <Localization locale={locale}>
34
- <TestRouting router={router}>
35
- <AppContextReact.Provider value={context}>
36
- <trpc.Provider client={trpcClient} queryClient={queryClient}>
37
- <QueryClientProvider client={queryClient}>
38
- {element}
39
- </QueryClientProvider>
40
- </trpc.Provider>
41
- </AppContextReact.Provider>
42
- </TestRouting>
43
- </Localization>
39
+ <AppContextReact.Provider value={context}>
40
+ <BrowserContext browser={browser}>
41
+ <Localization locale={locale}>
42
+ <TestRouting router={router}>
43
+ <trpc.Provider client={trpcClient} queryClient={queryClient}>
44
+ <QueryClientProvider client={queryClient}>
45
+ {element}
46
+ </QueryClientProvider>
47
+ </trpc.Provider>
48
+ </TestRouting>
49
+ </Localization>
50
+ </BrowserContext>
51
+ </AppContextReact.Provider>
44
52
  );
45
53
  },
46
54
  async afterRender() {
package/templates/app-trpc/tests/render/types.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type {TestRouter} from '@quilted/quilt/navigate/testing';
2
+ import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
2
3
  import type {QueryClient} from '@tanstack/react-query';
3
4
 
4
5
  import type {AppContext} from '~/shared/context.ts';
@@ -12,6 +13,11 @@ export interface RenderOptions {
12
13
  */
13
14
  readonly router?: TestRouter;
14
15
 
16
+ /**
17
+ * A custom environment for this component test.
18
+ */
19
+ readonly browser?: BrowserTestMock;
20
+
15
21
  /**
16
22
  * A custom locale to use for this component test.
17
23
  */
@@ -24,6 +30,11 @@ export interface RenderContext extends AppContext {
24
30
  */
25
31
  readonly router: TestRouter;
26
32
 
33
+ /**
34
+ * The browser environment for this component test.
35
+ */
36
+ readonly browser: BrowserTestMock;
37
+
27
38
  /**
28
39
  * The react-query client used for this component test.
29
40
  */
package/templates/app-trpc/tests/render.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@quilted/quilt/react/testing';
1
+ import '@quilted/quilt/testing';
2
2
 
3
3
  export {TestRouter} from '@quilted/quilt/navigate/testing';
4
4