npm - @quilted/create - Versions diffs - 0.2.18 → 0.2.20 - Mend

@quilted/create 0.2.18 → 0.2.20

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 (61) hide show

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

@@ -0,0 +1,46 @@
+import {describe, it, expect} from 'vitest';
+import {
+  CacheControl,
+  ContentSecurityPolicy,
+  SearchRobots,
+  Viewport,
+} from '@quilted/quilt/server';
+import {renderApp} from '~/tests/render.ts';
+import {HTML} from './HTML.tsx';
+describe('<HTML />', () => {
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(Viewport, {
+      cover: true,
+    });
+  });
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<HTML />);
+    expect(head).toContainReactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+  it('does not cache the response', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(CacheControl, {
+      cache: false,
+    });
+  });
+  it('adds a content security policy with a strict default policy', async () => {
+    const headers = await renderApp(<HTML />);
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
+      defaultSources: ["'self'"],
+    });
+  });
+});

package/templates/app-trpc/foundation/{http/Headers.tsx → html/HTML.tsx} RENAMED Viewed

@@ -1,21 +1,34 @@
-import Env from '@quilted/quilt/env';
-import {useInitialUrl} from '@quilted/quilt/navigate';
+import type {PropsWithChildren} from 'react';
+import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
   ResponseHeader,
   ContentSecurityPolicy,
   PermissionsPolicy,
+  SearchRobots,
   StrictTransportSecurity,
-} from '@quilted/quilt/http';
+  Viewport,
+} from '@quilted/quilt/server';
-// This component sets details on the HTTP response for all HTML server-rendering
-// requests. If you need to customize any of these details based on conditions like
-// the active route, or some state about the user, you can move these components to
-// wherever in your application you can read that state.
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
 //
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
-export function Headers() {
-  const isHttps = useInitialUrl().protocol === 'https:';
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function HTML({children}: PropsWithChildren) {
+  return (
+    <>
+      <Headers />
+      <Head />
+      {children}
+    </>
+  );
+}
+function Headers() {
+  const {url} = useBrowserRequest();
+  const isHttps = new URL(url).protocol === 'https:';
   return (
     <>
@@ -116,3 +129,30 @@ export function Headers() {
     </>
   );
 }
+function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

package/templates/app-trpc/foundation/html.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export {~~Head~~} from './html/~~Head~~.tsx';
1	+ export {HTML} from './html/HTML.tsx';

package/templates/app-trpc/package.json CHANGED Viewed

@@ -21,7 +21,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "jsdom": "^24.0.0",
-    "preact": "^10.20.0",
+    "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",
     "react-dom": "npm:@quilted/react-dom@^18.2.0",
     "zod": "^3.22.0"

package/templates/app-trpc/server.tsx CHANGED Viewed

@@ -25,13 +25,19 @@ router.any(
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const [{App}, {renderToResponse}] = await Promise.all([
+  const [{App}, {renderToResponse}, {QueryClient}] = await Promise.all([
     import('./App.tsx'),
     import('@quilted/quilt/server'),
+    import('@tanstack/react-query'),
   ]);
   const response = await renderToResponse(
-    <App trpc={createDirectClient(appRouter)} />,
+    <App
+      context={{
+        trpc: createDirectClient(appRouter),
+        queryClient: new QueryClient(),
+      }}
+    />,
     {
       request,
       assets,

package/templates/app-trpc/shared/trpc.ts CHANGED Viewed

@@ -1,10 +1,11 @@
-import {type TRPCClient} from '@trpc/client';
+import type {TRPCClient} from '@trpc/client';
 import {createTRPCReact, type CreateTRPCReact} from '@trpc/react-query';
+import type {QueryClient} from '@tanstack/react-query';
 // Get access to our app’s router type signature, which will
 // provide strong typing on the queries and mutations we can
 // perform.
-import {type AppRouter} from '../trpc.ts';
+import type {AppRouter} from '../trpc.ts';
 export const trpc: CreateTRPCReact<AppRouter, unknown, null> =
   createTRPCReact<AppRouter>();
@@ -12,5 +13,6 @@ export const trpc: CreateTRPCReact<AppRouter, unknown, null> =
 declare module '~/shared/context.ts' {
   interface AppContext {
     trpc: TRPCClient<AppRouter>;
+    queryClient: QueryClient;
   }
 }

package/templates/app-trpc/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/project.json",
+  "extends": "@quilted/typescript/project.json",
   "compilerOptions": {
     "outDir": "build/typescript",
     "paths": {

package/templates/module/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/project.json",
+  "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "outDir": "build/typescript"
   },

package/templates/package/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/project.json",
+  "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "rootDir": "source",
     "outDir": "build/typescript"

package/templates/server-basic/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/project.json",
+  "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "outDir": "build/typescript"
   },

package/templates/workspace/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/workspace.json",
+  "extends": "@quilted/typescript/tsconfig.workspace.json",
   "compilerOptions": {
     "outDir": "build/typescript"
   },

package/tsconfig.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "extends": "@quilted/craft/typescript/project.json",
+  "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "rootDir": "source",
     "outDir": "build/typescript"
@@ -8,7 +8,6 @@
   "exclude": ["**/*.test.ts", "**/*.test.tsx"],
   "references": [
     {"path": "../quilt"},
-    {"path": "../craft"},
     {"path": "../cli-kit"},
     {"path": "../events"}
   ]

package/templates/app-basic/foundation/html/Head.test.tsx DELETED Viewed

@@ -1,25 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
-import {renderApp} from '~/tests/render.ts';
-import {Head} from './Head.tsx';
-describe('<Head />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(Viewport, {
-      cover: true,
-    });
-  });
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-});

package/templates/app-basic/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-basic/foundation/http/Headers.test.tsx DELETED Viewed

@@ -1,24 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
-import {renderApp} from '~/tests/render.ts';
-import {Headers} from './Headers.tsx';
-describe('<Headers />', () => {
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});

package/templates/app-basic/foundation/http.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Headers} from './http/Headers.tsx';

package/templates/app-graphql/foundation/html/Head.test.tsx DELETED Viewed

@@ -1,25 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
-import {renderApp} from '~/tests/render.ts';
-import {Head} from './Head.tsx';
-describe('<Head />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(Viewport, {
-      cover: true,
-    });
-  });
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-});

package/templates/app-graphql/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-graphql/foundation/http/Headers.test.tsx DELETED Viewed

@@ -1,24 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
-import {renderApp} from '~/tests/render.ts';
-import {Headers} from './Headers.tsx';
-describe('<Headers />', () => {
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});

package/templates/app-graphql/foundation/http.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Headers} from './http/Headers.tsx';

package/templates/app-trpc/foundation/html/Head.test.tsx DELETED Viewed

@@ -1,25 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
-import {renderApp} from '~/tests/render.ts';
-import {Head} from './Head.tsx';
-describe('<Head />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(Viewport, {
-      cover: true,
-    });
-  });
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<Head />);
-    expect(head).toContainReactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-});

package/templates/app-trpc/foundation/html/Head.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}

package/templates/app-trpc/foundation/http/Headers.test.tsx DELETED Viewed

@@ -1,24 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
-import {renderApp} from '~/tests/render.ts';
-import {Headers} from './Headers.tsx';
-describe('<Headers />', () => {
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<Headers />);
-    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});

package/templates/app-trpc/foundation/http.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Headers} from './http/Headers.tsx';