@quilted/create 0.2.47 → 0.2.48

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/create
 
+## 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/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/prompts.mjs';
+import { __exports as prompts } from '../../../../../../_virtual/prompts2.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/prompts2.mjs';
+import { __exports as prompts } from '../../../../../../_virtual/prompts.mjs';
 import { __require as requireElements } from './elements/index.mjs';
 
 var hasRequiredPrompts;

package/build/esnext/_virtual/index7.esnext

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

package/build/esnext/_virtual/index8.esnext

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

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/index7.esnext';
+import { __module as dirGlob } from '../../../../../_virtual/index8.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/index8.esnext';
+import { __exports as utils } from '../../../../../../../_virtual/index7.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.47",
+  "version": "0.2.48",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/browser.tsx

@@ -1,19 +1,50 @@
 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

@@ -20,11 +20,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://');
 

package/templates/app-graphql/browser.tsx

@@ -1,5 +1,5 @@
 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 +8,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

@@ -9,6 +9,7 @@ import {
   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 +19,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 +53,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://');
 

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,5 @@
 import '@quilted/quilt/globals';
-
+import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
 
@@ -11,22 +11,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

@@ -15,6 +15,7 @@ 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 +24,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 +51,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 context = {
-    router: new Router(request.url),
-    trpc: createDirectClient(appRouter),
-    queryClient: new QueryClient(),
-  } satisfies AppContext;
+  const [{App}] = await Promise.all([import('./App.tsx')]);
+
+  const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');