@quilted/create 0.2.47 → 0.2.49

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quilted/create
 
+## 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
+
+- [`1abfd9e`](https://github.com/lemonmade/quilt/commit/1abfd9e7f163065bec12db6220fda7a800641b7b) Thanks [@lemonmade](https://github.com/lemonmade)! - Use classes for complex template browser and server entrypoints
+
 ## 0.2.47
 
 ### 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/index10.mjs';
+import { __exports as out } from '../../../../../../../_virtual/index11.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/async3.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.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/sync3.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.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/settings2.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.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/index11.mjs';
+import { __exports as out } from '../../../../../../../_virtual/index10.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/async4.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async3.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/sync4.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.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/settings3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.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/package.json

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

package/templates/app-basic/browser.tsx

@@ -1,19 +1,49 @@
-import '@quilted/quilt/globals';
+import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 import {App} from './App.tsx';
 
-const context = {
-  router: new Router(),
-} satisfies AppContext;
+class BrowserAppContext implements AppContext {
+  readonly router: Router;
 
-// Makes key parts of the app available in the browser console
-Object.defineProperty(globalThis, 'app', {
-  value: {context},
-  enumerable: false,
-  configurable: true,
-});
+  constructor() {
+    this.router = new Router();
+  }
+}
 
-hydrate(<App context={context} />);
+class BrowserApp {
+  /**
+   * The app’s globally-available context.
+   */
+  readonly context: BrowserAppContext;
+
+  /**
+   * The app’s root JSX element, seeded with the necessary app context.
+   */
+  readonly rendered: ComponentChild;
+
+  constructor() {
+    this.context = new BrowserAppContext();
+    this.rendered = <App context={this.context} />;
+
+    // Makes key parts of the app available in the browser console.
+    //
+    // @example
+    // ```js
+    // // Log the current URL
+    // console.log(globalThis.app.context.router.currentRequest.url);
+    // ```
+    Object.defineProperty(globalThis, 'app', {
+      value: this,
+      enumerable: false,
+      configurable: true,
+      writable: true,
+    });
+  }
+}
+
+const app = new BrowserApp();
+
+hydrate(app.rendered);

package/templates/app-basic/server.tsx

@@ -1,13 +1,11 @@
-import '@quilted/quilt/globals';
-
 import {RequestRouter} from '@quilted/quilt/request-router';
 import {Router} from '@quilted/quilt/navigation';
 import {
   renderAppToHTMLResponse,
-  cacheControlHeader,
-  contentSecurityPolicyHeader,
-  permissionsPolicyHeader,
-  strictTransportSecurityHeader,
+  CacheControlHeader,
+  ContentSecurityPolicyHeader,
+  PermissionsPolicyHeader,
+  StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
 
 import Env from 'quilt:module/env';
@@ -20,11 +18,17 @@ import {App} from './App.tsx';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
+class ServerAppContext implements AppContext {
+  readonly router: Router;
+
+  constructor(request: Request) {
+    this.router = new Router(request.url);
+  }
+}
+
 // For all GET requests, render our Preact application.
 router.get(async (request) => {
-  const context = {
-    router: new Router(request.url),
-  } satisfies AppContext;
+  const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');
 
@@ -47,7 +51,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,
       }),
 
@@ -58,7 +62,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.
@@ -83,8 +87,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,
@@ -104,7 +108,7 @@ 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(),
     },
   });
 

package/templates/app-empty/server.tsx

@@ -1,7 +1,5 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter} from '@quilted/quilt/request-router';
 import {renderAppToHTMLResponse} from '@quilted/quilt/server';
+import {RequestRouter} from '@quilted/quilt/request-router';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {App} from './App.tsx';

package/templates/app-graphql/browser.tsx

@@ -1,5 +1,4 @@
-import '@quilted/quilt/globals';
-
+import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
 import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
@@ -8,22 +7,54 @@ import type {AppContext} from '~/shared/context.ts';
 
 import {App} from './App.tsx';
 
-const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
-const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
-
-const context = {
-  router: new Router(),
-  graphql: {
-    fetch: graphQLFetch,
-    cache: graphQLCache,
-  },
-} satisfies AppContext;
-
-// Makes key parts of the app available in the browser console
-Object.defineProperty(globalThis, 'app', {
-  value: {context},
-  enumerable: false,
-  configurable: true,
-});
-
-hydrate(<App context={context} />);
+class BrowserAppContext implements AppContext {
+  readonly router: Router;
+  readonly graphql: AppContext['graphql'];
+
+  constructor() {
+    this.router = new Router();
+
+    const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
+    const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
+
+    this.graphql = {
+      fetch: graphQLFetch,
+      cache: graphQLCache,
+    };
+  }
+}
+
+class BrowserApp {
+  /**
+   * The app's globally-available context.
+   */
+  readonly context: BrowserAppContext;
+
+  /**
+   * The app's root JSX element, seeded with the necessary app context.
+   */
+  readonly rendered: ComponentChild;
+
+  constructor() {
+    this.context = new BrowserAppContext();
+    this.rendered = <App context={this.context} />;
+
+    // Makes key parts of the app available in the browser console.
+    //
+    // @example
+    // ```js
+    // // Log the current URL
+    // console.log(globalThis.app.context.router.currentRequest.url);
+    // ```
+    Object.defineProperty(globalThis, 'app', {
+      value: this,
+      enumerable: false,
+      configurable: true,
+      writable: true,
+    });
+  }
+}
+
+const app = new BrowserApp();
+
+hydrate(app.rendered);

package/templates/app-graphql/server.tsx

@@ -1,14 +1,13 @@
-import '@quilted/quilt/globals';
-
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
 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';
 
 import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
@@ -18,6 +17,25 @@ import type {AppContext} from '~/shared/context.ts';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
+class ServerAppContext implements AppContext {
+  readonly router: Router;
+  readonly graphql: AppContext['graphql'];
+
+  constructor(request: Request) {
+    this.router = new Router(request.url);
+
+    const graphQLFetch: AppContext['graphql']['fetch'] = async (...args) => {
+      const {performGraphQLOperation} = await import('./server/graphql.ts');
+      return performGraphQLOperation(...args);
+    };
+
+    this.graphql = {
+      fetch: graphQLFetch,
+      cache: new GraphQLCache({fetch: graphQLFetch}),
+    };
+  }
+}
+
 // GraphQL API, called from the client
 router.post('/api/graphql', async (request) => {
   const [{query, operationName, variables}, {performGraphQLOperation}] =
@@ -33,19 +51,9 @@ router.post('/api/graphql', async (request) => {
 
 // For all GET requests, render our Preact application.
 router.get(async (request) => {
-  const [{App}, {performGraphQLOperation}, {GraphQLCache}] = await Promise.all([
-    import('./App.tsx'),
-    import('./server/graphql.ts'),
-    import('@quilted/quilt/graphql'),
-  ]);
-
-  const context = {
-    router: new Router(request.url),
-    graphql: {
-      fetch: performGraphQLOperation,
-      cache: new GraphQLCache({fetch: performGraphQLOperation}),
-    },
-  } satisfies AppContext;
+  const [{App}] = await Promise.all([import('./App.tsx')]);
+
+  const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');
 
@@ -68,7 +76,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,
       }),
 
@@ -79,7 +87,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.
@@ -104,8 +112,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,
@@ -125,7 +133,7 @@ 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(),
     },
   });
 

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

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

package/templates/app-trpc/browser.tsx

@@ -1,5 +1,4 @@
-import '@quilted/quilt/globals';
-
+import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
 
@@ -11,22 +10,51 @@ import {trpc} from '~/shared/trpc.ts';
 
 import {App} from './App.tsx';
 
-const queryClient = new QueryClient();
-const trpcClient = trpc.createClient({
-  links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
-});
-
-const context = {
-  router: new Router(),
-  trpc: trpcClient,
-  queryClient,
-} satisfies AppContext;
-
-// Makes key parts of the app available in the browser console
-Object.defineProperty(globalThis, 'app', {
-  value: {context},
-  enumerable: false,
-  configurable: true,
-});
-
-hydrate(<App context={context} />);
+class BrowserAppContext implements AppContext {
+  readonly router: Router;
+  readonly trpc: AppContext['trpc'];
+  readonly queryClient: QueryClient;
+
+  constructor() {
+    this.router = new Router();
+    this.queryClient = new QueryClient();
+    this.trpc = trpc.createClient({
+      links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
+    });
+  }
+}
+
+class BrowserApp {
+  /**
+   * The app's globally-available context.
+   */
+  readonly context: BrowserAppContext;
+
+  /**
+   * The app's root JSX element, seeded with the necessary app context.
+   */
+  readonly rendered: ComponentChild;
+
+  constructor() {
+    this.context = new BrowserAppContext();
+    this.rendered = <App context={this.context} />;
+
+    // Makes key parts of the app available in the browser console.
+    //
+    // @example
+    // ```js
+    // // Log the current URL
+    // console.log(globalThis.app.context.router.currentRequest.url);
+    // ```
+    Object.defineProperty(globalThis, 'app', {
+      value: this,
+      enumerable: false,
+      configurable: true,
+      writable: true,
+    });
+  }
+}
+
+const app = new BrowserApp();
+
+hydrate(app.rendered);

package/templates/app-trpc/server.tsx

@@ -1,20 +1,19 @@
-import '@quilted/quilt/globals';
-
-import {RequestRouter} from '@quilted/quilt/request-router';
-import {Router} from '@quilted/quilt/navigation';
 import {
   renderAppToHTMLResponse,
-  cacheControlHeader,
-  contentSecurityPolicyHeader,
-  permissionsPolicyHeader,
-  strictTransportSecurityHeader,
+  CacheControlHeader,
+  ContentSecurityPolicyHeader,
+  PermissionsPolicyHeader,
+  StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
+import {RequestRouter} from '@quilted/quilt/request-router';
+import {Router} from '@quilted/quilt/navigation';
 
 import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {createDirectClient} from '@quilted/trpc/server';
 import {fetchRequestHandler} from '@trpc/server/adapters/fetch';
+import {QueryClient} from '@tanstack/react-query';
 
 import type {AppContext} from '~/shared/context.ts';
 
@@ -23,6 +22,18 @@ import {appRouter} from './trpc.ts';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
+class ServerAppContext implements AppContext {
+  readonly router: Router;
+  readonly trpc: AppContext['trpc'];
+  readonly queryClient: QueryClient;
+
+  constructor(request: Request) {
+    this.router = new Router(request.url);
+    this.trpc = createDirectClient(appRouter);
+    this.queryClient = new QueryClient();
+  }
+}
+
 router.any(
   'api',
   (request) => {
@@ -38,16 +49,9 @@ router.any(
 
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const [{App}, {QueryClient}] = await Promise.all([
-    import('./App.tsx'),
-    import('@tanstack/react-query'),
-  ]);
+  const [{App}] = await Promise.all([import('./App.tsx')]);
 
-  const context = {
-    router: new Router(request.url),
-    trpc: createDirectClient(appRouter),
-    queryClient: new QueryClient(),
-  } satisfies AppContext;
+  const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');
 
@@ -70,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,
       }),
 
@@ -81,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.
@@ -106,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,
@@ -127,7 +131,7 @@ 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(),
     },
   });
 

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",