@quilted/create 0.2.48 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quilted/create
 
+## 0.3.0
+
+### Minor Changes
+
+- [#872](https://github.com/lemonmade/quilt/pull/872) [`8bf65e7`](https://github.com/lemonmade/quilt/commit/8bf65e797f929ee95730323426c229409e65c9a4) Thanks [@lemonmade](https://github.com/lemonmade)! - Replace @quilted/request-router with Hono
+
+## 0.2.49
+
+### Patch Changes
+
+- [#871](https://github.com/lemonmade/quilt/pull/871) [`c16b322`](https://github.com/lemonmade/quilt/commit/c16b3224d3c86bc3a3b6f6af44267650d1e8dc1d) Thanks [@lemonmade](https://github.com/lemonmade)! - Remove @quilt/quilt/globals module
+
+- [`fc772fb`](https://github.com/lemonmade/quilt/commit/fc772fb47bd077eb10f67a986a9f4ae792f631f0) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix old @quilted/rollup dependency in workspace template
+
+- [`64fc42b`](https://github.com/lemonmade/quilt/commit/64fc42b87ca72eec8dfab211d2ddecdbbaa0e4ac) Thanks [@lemonmade](https://github.com/lemonmade)! - Transition browser header helpers to use classes
+
 ## 0.2.48
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index11.mjs';
+import { __exports as out } from '../../../../../../../_virtual/index10.mjs';
 import { __require as requireAsync } from './providers/async.mjs';
 import { __require as requireSync } from './providers/sync.mjs';
 import { __require as requireSettings } from './settings.mjs';

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/async4.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async3.mjs';
 
 var hasRequiredAsync;
 function requireAsync() {

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/sync4.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.mjs';
 
 var hasRequiredSync;
 function requireSync() {

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/settings3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
 import { __require as requireFs } from './adapters/fs.mjs';
 
 var hasRequiredSettings;

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

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index10.mjs';
+import { __exports as out } from '../../../../../../../_virtual/index11.mjs';
 import { __require as requireAsync } from './providers/async.mjs';
 import { __require as requireStream } from './providers/stream.mjs';
 import { __require as requireSync } from './providers/sync.mjs';

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/async3.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
 import { __require as requireAsync$1 } from '../readers/async.mjs';
 
 var hasRequiredAsync;

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/sync3.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
 import { __require as requireSync$1 } from '../readers/sync.mjs';
 
 var hasRequiredSync;

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/settings2.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
 import path__default from 'node:path';
 import { __require as requireOut } from '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.mjs';
 

package/build/esm/node_modules/.pnpm/prompts@2.4.2/node_modules/prompts/dist/prompts.mjs

@@ -1,4 +1,4 @@
-import { __exports as prompts } from '../../../../../../_virtual/prompts2.mjs';
+import { __exports as prompts } from '../../../../../../_virtual/prompts.mjs';
 import { __require as requireElements } from './elements/index.mjs';
 
 var hasRequiredPrompts;

package/build/esm/node_modules/.pnpm/prompts@2.4.2/node_modules/prompts/lib/prompts.mjs

@@ -1,4 +1,4 @@
-import { __exports as prompts } from '../../../../../../_virtual/prompts.mjs';
+import { __exports as prompts } from '../../../../../../_virtual/prompts2.mjs';
 import { __require as requireElements } from './elements/index.mjs';
 
 var hasRequiredPrompts;

package/build/esnext/_virtual/index7.esnext

@@ -1,3 +1,3 @@
-var utils = {};
+var dirGlob = {exports: {}};
 
-export { utils as __exports };
+export { dirGlob as __module };

package/build/esnext/_virtual/index8.esnext

@@ -1,3 +1,3 @@
-var dirGlob = {exports: {}};
+var utils = {};
 
-export { dirGlob as __module };
+export { utils as __exports };

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

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
 
 var hasRequiredAsync;
 function requireAsync() {

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

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
 
 var hasRequiredSync;
 function requireSync() {

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

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
 import { __require as requireFs } from './adapters/fs.esnext';
 
 var hasRequiredSettings;

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

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
 import { __require as requireAsync$1 } from '../readers/async.esnext';
 
 var hasRequiredAsync;

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

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
 import { __require as requireSync$1 } from '../readers/sync.esnext';
 
 var hasRequiredSync;

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

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

package/build/esnext/node_modules/.pnpm/dir-glob@3.0.1/node_modules/dir-glob/index.esnext

@@ -1,4 +1,4 @@
-import { __module as dirGlob } from '../../../../../_virtual/index8.esnext';
+import { __module as dirGlob } from '../../../../../_virtual/index7.esnext';
 import path__default from 'node:path';
 import { __require as requirePathType } from '../../../path-type@4.0.0/node_modules/path-type/index.esnext';
 

package/build/esnext/node_modules/.pnpm/fast-glob@3.3.3/node_modules/fast-glob/out/utils/index.esnext

@@ -1,4 +1,4 @@
-import { __exports as utils } from '../../../../../../../_virtual/index7.esnext';
+import { __exports as utils } from '../../../../../../../_virtual/index8.esnext';
 import { __require as requireArray } from './array.esnext';
 import { __require as requireErrno } from './errno.esnext';
 import { __require as requireFs } from './fs.esnext';

package/package.json

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

package/templates/app-basic/App.tsx

@@ -1,5 +1,3 @@
-import type {RenderableProps} from 'preact';
-
 import {NotFound} from '@quilted/quilt/server';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
@@ -9,14 +7,11 @@ import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
 
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from './shared/context.ts';
+import {AppContextPreact, type AppContext} from './shared/context.ts';
 import {routeWithAppContext} from './shared/navigation.ts';
 
 export interface AppProps {
-  context: AppContextType;
+  context: AppContext;
 }
 
 // Define the routes for your application. If you have a lot of routes, you
@@ -40,20 +35,13 @@ const routes = [
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
-    <AppContext context={context}>
-      <Head />
-      <Navigation router={context.router} routes={routes} context={context} />
-    </AppContext>
+    <AppContextPreact.Provider value={context}>
+      <Localization>
+        <Head />
+        <Navigation router={context.router} routes={routes} context={context} />
+      </Localization>
+    </AppContextPreact.Provider>
   );
 }
 
 export default App;
-
-// This component renders any app-wide context.
-function AppContext({children, context}: RenderableProps<AppProps>) {
-  return (
-    <AppContextReact.Provider value={context}>
-      <Localization>{children}</Localization>
-    </AppContextReact.Provider>
-  );
-}

package/templates/app-basic/browser.tsx

@@ -1,4 +1,3 @@
-import '@quilted/quilt/globals';
 import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';

package/templates/app-basic/package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.8.0",
+    "@quilted/quilt": "^0.9.0",
+    "hono": "^4.8.0",
     "jsdom": "^26.0.0",
     "preact": "^10.26.0",
     "react": "npm:@quilted/react@^19.0.0",

package/templates/app-basic/server.tsx

@@ -1,14 +1,12 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter} from '@quilted/quilt/request-router';
-import {Router} from '@quilted/quilt/navigation';
+import {Hono} from 'hono';
 import {
   renderAppToHTMLResponse,
-  cacheControlHeader,
-  contentSecurityPolicyHeader,
-  permissionsPolicyHeader,
-  strictTransportSecurityHeader,
+  CacheControlHeader,
+  ContentSecurityPolicyHeader,
+  PermissionsPolicyHeader,
+  StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
+import {Router} from '@quilted/quilt/navigation';
 
 import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
@@ -17,7 +15,7 @@ import type {AppContext} from '~/shared/context.ts';
 
 import {App} from './App.tsx';
 
-const router = new RequestRouter();
+const app = new Hono();
 const assets = new BrowserAssets();
 
 class ServerAppContext implements AppContext {
@@ -29,7 +27,9 @@ class ServerAppContext implements AppContext {
 }
 
 // For all GET requests, render our Preact application.
-router.get(async (request) => {
+app.get('*', async (c) => {
+  const request = c.req.raw;
+
   const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');
@@ -53,7 +53,7 @@ router.get(async (request) => {
       // app or deployment, make sure to update this component accordingly!
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-      'Cache-Control': cacheControlHeader({
+      'Cache-Control': CacheControlHeader.stringify({
         cache: false,
       }),
 
@@ -64,7 +64,7 @@ router.get(async (request) => {
       // to the allowlist for more specific directives.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-      'Content-Security-Policy': contentSecurityPolicyHeader({
+      'Content-Security-Policy': ContentSecurityPolicyHeader.stringify({
         // By default, only allow sources from the page's origin.
         defaultSources: ["'self'"],
         // In development, allow connections to local websockets for hot reloading.
@@ -89,8 +89,8 @@ router.get(async (request) => {
       // Sets a strict permissions policy for this page, which limits access
       // to some native browser features.
       //
-      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-      'Permissions-Policy': permissionsPolicyHeader({
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy
+      'Permissions-Policy': PermissionsPolicyHeader.stringify({
         // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
         // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
         interestCohort: false,
@@ -110,11 +110,11 @@ router.get(async (request) => {
       // Instructs browsers to only load this page over HTTPS.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-      'Strict-Transport-Security': strictTransportSecurityHeader(),
+      'Strict-Transport-Security': StrictTransportSecurityHeader.stringify(),
     },
   });
 
   return response;
 });
 
-export default router;
+export default app;

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

@@ -2,5 +2,5 @@ import {createOptionalContext} from '@quilted/quilt/context';
 
 export interface AppContext {}
 
-export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = AppContextReact.use;
+export const AppContextPreact = createOptionalContext<AppContext>();
+export const useAppContext = AppContextPreact.use;

package/templates/app-empty/package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.8.0",
+    "@quilted/quilt": "^0.9.0",
+    "hono": "^4.8.0",
     "preact": "^10.26.0",
     "react": "npm:@quilted/react@^19.0.0",
     "react-dom": "npm:@quilted/react-dom@^19.0.0"

package/templates/app-empty/server.tsx

@@ -1,16 +1,15 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter} from '@quilted/quilt/request-router';
+import {Hono} from 'hono';
 import {renderAppToHTMLResponse} from '@quilted/quilt/server';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {App} from './App.tsx';
 
-const router = new RequestRouter();
+const app = new Hono();
 const assets = new BrowserAssets();
 
-// For all GET requests, render our Preact application.
-router.get(async (request) => {
+app.get('*', async (c) => {
+  const request = c.req.raw;
+
   const response = await renderAppToHTMLResponse(<App />, {
     request,
     assets,
@@ -19,4 +18,4 @@ router.get(async (request) => {
   return response;
 });
 
-export default router;
+export default app;

package/templates/app-graphql/App.tsx

@@ -1,5 +1,3 @@
-import type {RenderableProps} from 'preact';
-
 import {NotFound} from '@quilted/quilt/server';
 import {GraphQLContext} from '@quilted/quilt/graphql';
 import {Navigation} from '@quilted/quilt/navigation';
@@ -10,14 +8,11 @@ import {Frame} from './foundation/frame.ts';
 
 import {Home, homeQuery} from './features/home.ts';
 
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from './shared/context.ts';
+import {AppContextPreact, type AppContext} from './shared/context.ts';
 import {routeWithAppContext} from './shared/navigation.ts';
 
 export interface AppProps {
-  context: AppContextType;
+  context: AppContext;
 }
 
 // Define the routes for your application. If you have a lot of routes, you
@@ -41,25 +36,22 @@ const routes = [
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
-    <AppContext context={context}>
-      <Head />
-      <Navigation router={context.router} routes={routes} context={context} />
-    </AppContext>
-  );
-}
-
-export default App;
-
-// This component renders any app-wide context.
-function AppContext({children, context}: RenderableProps<AppProps>) {
-  return (
-    <AppContextReact.Provider value={context}>
+    <AppContextPreact.Provider value={context}>
       <GraphQLContext
         fetch={context.graphql.fetch}
         cache={context.graphql.cache}
       >
-        <Localization>{children}</Localization>
+        <Localization>
+          <Head />
+          <Navigation
+            router={context.router}
+            routes={routes}
+            context={context}
+          />
+        </Localization>
       </GraphQLContext>
-    </AppContextReact.Provider>
+    </AppContextPreact.Provider>
   );
 }
+
+export default App;

package/templates/app-graphql/browser.tsx

@@ -1,4 +1,3 @@
-import '@quilted/quilt/globals';
 import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';

package/templates/app-graphql/package.json

@@ -16,8 +16,9 @@
   "dependencies": {},
   "devDependencies": {
     "@quilted/graphql-tools": "^0.2.0",
-    "@quilted/quilt": "^0.8.0",
+    "@quilted/quilt": "^0.9.0",
     "graphql": "^16.8.0",
+    "hono": "^4.8.0",
     "jsdom": "^26.0.0",
     "preact": "^10.26.0",
     "react": "npm:@quilted/react@^19.0.0",

package/templates/app-graphql/server.tsx

@@ -1,13 +1,11 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
+import {Hono} from 'hono';
 import {Router} from '@quilted/quilt/navigation';
 import {
   renderAppToHTMLResponse,
-  cacheControlHeader,
-  contentSecurityPolicyHeader,
-  permissionsPolicyHeader,
-  strictTransportSecurityHeader,
+  CacheControlHeader,
+  ContentSecurityPolicyHeader,
+  PermissionsPolicyHeader,
+  StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
 import {GraphQLCache} from '@quilted/quilt/graphql';
 
@@ -16,7 +14,7 @@ import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
 
-const router = new RequestRouter();
+const app = new Hono();
 const assets = new BrowserAssets();
 
 class ServerAppContext implements AppContext {
@@ -39,7 +37,9 @@ class ServerAppContext implements AppContext {
 }
 
 // GraphQL API, called from the client
-router.post('/api/graphql', async (request) => {
+app.post('/api/graphql', async (c) => {
+  const request = c.req.raw;
+
   const [{query, operationName, variables}, {performGraphQLOperation}] =
     await Promise.all([request.json(), import('./server/graphql.ts')]);
 
@@ -48,11 +48,13 @@ router.post('/api/graphql', async (request) => {
     operationName,
   });
 
-  return new JSONResponse(result);
+  return Response.json(result);
 });
 
-// For all GET requests, render our Preact application.
-router.get(async (request) => {
+// Preact app
+app.get('*', async (c) => {
+  const request = c.req.raw;
+
   const [{App}] = await Promise.all([import('./App.tsx')]);
 
   const context = new ServerAppContext(request);
@@ -78,7 +80,7 @@ router.get(async (request) => {
       // app or deployment, make sure to update this component accordingly!
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-      'Cache-Control': cacheControlHeader({
+      'Cache-Control': CacheControlHeader.stringify({
         cache: false,
       }),
 
@@ -89,7 +91,7 @@ router.get(async (request) => {
       // to the allowlist for more specific directives.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-      'Content-Security-Policy': contentSecurityPolicyHeader({
+      'Content-Security-Policy': ContentSecurityPolicyHeader.stringify({
         // By default, only allow sources from the page's origin.
         defaultSources: ["'self'"],
         // In development, allow connections to local websockets for hot reloading.
@@ -114,8 +116,8 @@ router.get(async (request) => {
       // Sets a strict permissions policy for this page, which limits access
       // to some native browser features.
       //
-      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-      'Permissions-Policy': permissionsPolicyHeader({
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy
+      'Permissions-Policy': PermissionsPolicyHeader.stringify({
         // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
         // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
         interestCohort: false,
@@ -135,11 +137,11 @@ router.get(async (request) => {
       // Instructs browsers to only load this page over HTTPS.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-      'Strict-Transport-Security': strictTransportSecurityHeader(),
+      'Strict-Transport-Security': StrictTransportSecurityHeader.stringify(),
     },
   });
 
   return response;
 });
 
-export default router;
+export default app;

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

@@ -1,14 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
-import type {Router} from '@quilted/quilt/navigation';
-import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
-export interface AppContext {
-  readonly router: Router;
-  readonly graphql: {
-    readonly fetch: GraphQLFetch<any>;
-    readonly cache: GraphQLCache;
-  };
-}
+export interface AppContext {}
 
-export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = AppContextReact.use;
+export const AppContextPreact = createOptionalContext<AppContext>();
+export const useAppContext = AppContextPreact.use;

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

@@ -2,8 +2,18 @@ import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
 declare module '~/shared/context.ts' {
   interface AppContext {
+    /**
+     * The app’s GraphQL client.
+     */
     readonly graphql: {
+      /**
+       * A function to perform GraphQL operations.
+       */
       readonly fetch: GraphQLFetch;
+
+      /**
+       * The app’s GraphQL cache.
+       */
       readonly cache: GraphQLCache;
     };
   }

package/templates/app-trpc/App.tsx

@@ -1,5 +1,3 @@
-import type {RenderableProps} from 'preact';
-
 import {NotFound} from '@quilted/quilt/server';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
@@ -13,7 +11,7 @@ import {Home} from './features/home.ts';
 
 import {trpc} from './shared/trpc.ts';
 import {
-  AppContextReact,
+  AppContextPreact,
   type AppContext as AppContextType,
 } from './shared/context.ts';
 import {routeWithAppContext} from './shared/navigation.ts';
@@ -43,26 +41,21 @@ const routes = [
 // app-wide context in this component.
 export function App({context}: AppProps) {
   return (
-    <AppContext context={context}>
-      <Head />
-      <Navigation router={context.router} routes={routes} context={context} />
-    </AppContext>
+    <AppContextPreact.Provider value={context}>
+      <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
+        <ReactQueryContext client={context.queryClient}>
+          <Localization>
+            <Head />
+            <Navigation
+              router={context.router}
+              routes={routes}
+              context={context}
+            />
+          </Localization>
+        </ReactQueryContext>
+      </trpc.Provider>
+    </AppContextPreact.Provider>
   );
 }
 
 export default App;
-
-// This component renders any app-wide context.
-function AppContext({children, context}: RenderableProps<AppProps>) {
-  return (
-    <AppContextReact.Provider value={context}>
-      <Localization>
-        <trpc.Provider client={context.trpc} queryClient={context.queryClient}>
-          <ReactQueryContext client={context.queryClient}>
-            {children}
-          </ReactQueryContext>
-        </trpc.Provider>
-      </Localization>
-    </AppContextReact.Provider>
-  );
-}

package/templates/app-trpc/browser.tsx

@@ -1,4 +1,3 @@
-import '@quilted/quilt/globals';
 import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';

package/templates/app-trpc/package.json

@@ -15,13 +15,14 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@quilted/quilt": "^0.8.0",
+    "@quilted/quilt": "^0.9.0",
     "@quilted/react-query": "^0.4.0",
     "@quilted/trpc": "^0.2.0",
     "@tanstack/react-query": "^5.0.0",
     "@trpc/client": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
+    "hono": "^4.8.0",
     "jsdom": "^26.0.0",
     "preact": "^10.26.0",
     "react": "npm:@quilted/react@^19.0.0",

package/templates/app-trpc/server.tsx

@@ -1,14 +1,12 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter} from '@quilted/quilt/request-router';
-import {Router} from '@quilted/quilt/navigation';
+import {Hono} from 'hono';
 import {
   renderAppToHTMLResponse,
-  cacheControlHeader,
-  contentSecurityPolicyHeader,
-  permissionsPolicyHeader,
-  strictTransportSecurityHeader,
+  CacheControlHeader,
+  ContentSecurityPolicyHeader,
+  PermissionsPolicyHeader,
+  StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
+import {Router} from '@quilted/quilt/navigation';
 
 import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
@@ -21,7 +19,7 @@ import type {AppContext} from '~/shared/context.ts';
 
 import {appRouter} from './trpc.ts';
 
-const router = new RequestRouter();
+const app = new Hono();
 const assets = new BrowserAssets();
 
 class ServerAppContext implements AppContext {
@@ -36,21 +34,21 @@ class ServerAppContext implements AppContext {
   }
 }
 
-router.any(
-  'api',
-  (request) => {
-    return fetchRequestHandler({
-      endpoint: '/api',
-      req: request,
-      router: appRouter,
-      createContext: () => ({}),
-    });
-  },
-  {exact: false},
-);
-
-// For all GET requests, render our React application.
-router.get(async (request) => {
+// TRPC API
+app.all('/api/*', async (c) => {
+  const request = c.req.raw;
+  return fetchRequestHandler({
+    endpoint: '/api',
+    req: request,
+    router: appRouter,
+    createContext: () => ({}),
+  });
+});
+
+// Preact app
+app.get('*', async (c) => {
+  const request = c.req.raw;
+
   const [{App}] = await Promise.all([import('./App.tsx')]);
 
   const context = new ServerAppContext(request);
@@ -76,7 +74,7 @@ router.get(async (request) => {
       // app or deployment, make sure to update this component accordingly!
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-      'Cache-Control': cacheControlHeader({
+      'Cache-Control': CacheControlHeader.stringify({
         cache: false,
       }),
 
@@ -87,7 +85,7 @@ router.get(async (request) => {
       // to the allowlist for more specific directives.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-      'Content-Security-Policy': contentSecurityPolicyHeader({
+      'Content-Security-Policy': ContentSecurityPolicyHeader.stringify({
         // By default, only allow sources from the page's origin.
         defaultSources: ["'self'"],
         // In development, allow connections to local websockets for hot reloading.
@@ -112,8 +110,8 @@ router.get(async (request) => {
       // Sets a strict permissions policy for this page, which limits access
       // to some native browser features.
       //
-      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-      'Permissions-Policy': permissionsPolicyHeader({
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy
+      'Permissions-Policy': PermissionsPolicyHeader.stringify({
         // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
         // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
         interestCohort: false,
@@ -133,11 +131,11 @@ router.get(async (request) => {
       // Instructs browsers to only load this page over HTTPS.
       //
       // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-      'Strict-Transport-Security': strictTransportSecurityHeader(),
+      'Strict-Transport-Security': StrictTransportSecurityHeader.stringify(),
     },
   });
 
   return response;
 });
 
-export default router;
+export default app;

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

@@ -2,5 +2,5 @@ import {createOptionalContext} from '@quilted/quilt/context';
 
 export interface AppContext {}
 
-export const AppContextReact = createOptionalContext<AppContext>();
-export const useAppContext = AppContextReact.use;
+export const AppContextPreact = createOptionalContext<AppContext>();
+export const useAppContext = AppContextPreact.use;

package/templates/server-basic/package.json

@@ -7,7 +7,7 @@
     "build": "rollup --config ./rollup.config.js"
   },
   "devDependencies": {
-    "@quilted/quilt": "^0.6.0"
+    "@quilted/quilt": "^0.9.0"
   },
   "browserslist": [
     "current node version"

package/templates/server-basic/server.ts

@@ -1,6 +1,6 @@
-import {RequestRouter} from '@quilted/quilt/request-router';
+import {Hono} from 'hono';
 
-const app = new RequestRouter();
+const app = new Hono();
 
 app.get('/', () => new Response('Hello, world!'));
 

package/templates/workspace/package.json

@@ -13,7 +13,7 @@
     "typescript:watch": "tsx watch --conditions quilt:source"
   },
   "devDependencies": {
-    "@quilted/rollup": "^0.2.0",
+    "@quilted/rollup": "^0.3.0",
     "@quilted/vite": "^0.2.0",
     "@quilted/typescript": "^0.4.0",
     "rollup": "^4.34.0",