@quilted/create 0.3.0 → 0.3.2

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/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext

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

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

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index10.esnext';
+import { __exports as out } from '../../../../../../../_virtual/index11.esnext';
 import { __require as requireAsync } from './providers/async.esnext';
 import { __require as requireStream } from './providers/stream.esnext';
 import { __require as requireSync } from './providers/sync.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/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/readers/stream.esnext

@@ -1,4 +1,4 @@
-import { __exports as stream } from '../../../../../../../_virtual/stream2.esnext';
+import { __exports as stream } from '../../../../../../../_virtual/stream3.esnext';
 import require$$0 from 'node:stream';
 import { __require as requireOut } from '../../../../../@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext';
 import { __require as requireOut$1 } from '../../../../../@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/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/build/esnext/node_modules/.pnpm/fast-glob@3.3.3/node_modules/fast-glob/out/utils/stream.esnext

@@ -1,4 +1,4 @@
-import { __exports as stream } from '../../../../../../../_virtual/stream3.esnext';
+import { __exports as stream } from '../../../../../../../_virtual/stream2.esnext';
 import { __require as requireMerge2 } from '../../../../../merge2@1.4.1/node_modules/merge2/index.esnext';
 
 var hasRequiredStream;

package/build/esnext/node_modules/.pnpm/prettier@3.5.1/node_modules/prettier/plugins/typescript.esnext

@@ -3516,10 +3516,10 @@ function z2(e, t) {
   return V2(e) & t;
 }
 function F2(e, t, a) {
-  return e.kind >= 0 && e.kind <= 165 ? 0 : (e.modifierFlagsCache & 536870912 || (e.modifierFlagsCache = T1(e) | 536870912), W2(e.modifierFlagsCache));
+  return e.kind >= 0 && e.kind <= 165 ? 0 : (e.modifierFlagsCache & 536870912 || (e.modifierFlagsCache = T1(e) | 536870912), a || t && ea(e) ? (!(e.modifierFlagsCache & 268435456) && e.parent && (e.modifierFlagsCache |= b1(e) | 268435456), v1(e.modifierFlagsCache)) : W2(e.modifierFlagsCache));
 }
 function V2(e) {
-  return F2(e);
+  return F2(e, false);
 }
 function b1(e) {
   let t = 0;

package/package.json

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

package/templates/app-basic/App.tsx

@@ -7,8 +7,9 @@ import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
 
-import {AppContextPreact, type AppContext} from './shared/context.ts';
-import {routeWithAppContext} from './shared/navigation.ts';
+import type {AppContext} from './context/types.ts';
+import {AppContextPreact} from './context/preact.ts';
+import {routeWithAppContext} from './context/navigation.ts';
 
 export interface AppProps {
   context: AppContext;
@@ -38,7 +39,11 @@ export function App({context}: AppProps) {
     <AppContextPreact.Provider value={context}>
       <Localization>
         <Head />
-        <Navigation router={context.router} routes={routes} context={context} />
+        <Navigation
+          router={context.navigation.router}
+          routes={routes}
+          context={context}
+        />
       </Localization>
     </AppContextPreact.Provider>
   );

package/templates/app-basic/browser.css

@@ -0,0 +1,10 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+}

package/templates/app-basic/browser.tsx

@@ -1,18 +1,11 @@
+import './browser.css';
+
 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 {BrowserAppContext} from '~/context/browser.ts';
 import {App} from './App.tsx';
 
-class BrowserAppContext implements AppContext {
-  readonly router: Router;
-
-  constructor() {
-    this.router = new Router();
-  }
-}
-
 class BrowserApp {
   /**
    * The app’s globally-available context.
@@ -42,8 +35,11 @@ class BrowserApp {
       writable: true,
     });
   }
+
+  hydrate() {
+    hydrate(this.rendered);
+  }
 }
 
 const app = new BrowserApp();
-
-hydrate(app.rendered);
+app.hydrate();

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

@@ -0,0 +1,10 @@
+import type {AppContext} from './types.ts';
+import {NavigationForApp} from './navigation.ts';
+
+export class BrowserAppContext implements AppContext {
+  readonly navigation: NavigationForApp;
+
+  constructor() {
+    this.navigation = new NavigationForApp();
+  }
+}

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

@@ -0,0 +1,17 @@
+import {createContextRouteFunction, Router} from '@quilted/quilt/navigation';
+
+import type {AppContext} from './types.ts';
+
+export interface Navigation {
+  readonly router: Router;
+}
+
+export class NavigationForApp implements Navigation {
+  readonly router: Router;
+
+  constructor(url?: string | URL) {
+    this.router = new Router(url);
+  }
+}
+
+export const routeWithAppContext = createContextRouteFunction<AppContext>();

package/templates/app-basic/{shared/context.ts → context/preact.ts}

@@ -1,6 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
 
-export interface AppContext {}
+import type {AppContext} from './types.ts';
 
 export const AppContextPreact = createOptionalContext<AppContext>();
 export const useAppContext = AppContextPreact.use;

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

@@ -0,0 +1,10 @@
+import type {AppContext} from './types.ts';
+import {NavigationForApp} from './navigation.ts';
+
+export class ServerAppContext implements AppContext {
+  readonly navigation: NavigationForApp;
+
+  constructor(request: Request) {
+    this.navigation = new NavigationForApp(request.url);
+  }
+}

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

@@ -0,0 +1,5 @@
+import type {Navigation} from './navigation.ts';
+
+export interface AppContext {
+  readonly navigation: Navigation;
+}

package/templates/app-basic/foundation/frame/Frame.module.css

@@ -1,14 +1,3 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-}
-
 .Frame {
   padding: 1rem;
 }

package/templates/app-basic/server.tsx

@@ -6,30 +6,21 @@ import {
   PermissionsPolicyHeader,
   StrictTransportSecurityHeader,
 } from '@quilted/quilt/server';
-import {Router} from '@quilted/quilt/navigation';
-
 import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
-import type {AppContext} from '~/shared/context.ts';
-
-import {App} from './App.tsx';
-
 const app = new Hono();
 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.
 app.get('*', async (c) => {
   const request = c.req.raw;
 
+  const [{App}, {ServerAppContext}] = await Promise.all([
+    import('./App.tsx'),
+    import('./context/server.ts'),
+  ]);
+
   const context = new ServerAppContext(request);
 
   const isHttps = request.url.startsWith('https://');

package/templates/app-basic/tests/render/render.tsx

@@ -6,7 +6,7 @@ import {
 import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
-import {AppContextReact} from '~/shared/context.ts';
+import {AppContextPreact} from '~/context/preact.ts';
 
 import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
@@ -24,20 +24,23 @@ export const renderApp = createRender<
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
   context({router = new TestRouter(), browser = new BrowserTestMock()}) {
-    return {router, browser};
+    return {navigation: {router}, browser};
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router, browser} = context;
+    const {
+      navigation: {router},
+      browser,
+    } = context;
 
     return (
-      <AppContextReact.Provider value={context}>
+      <AppContextPreact.Provider value={context}>
         <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>{element}</Navigation>
           </Localization>
         </BrowserDetailsContext.Provider>
-      </AppContextReact.Provider>
+      </AppContextPreact.Provider>
     );
   },
   async afterRender() {

package/templates/app-basic/tests/render/types.ts

@@ -1,7 +1,7 @@
 import type {TestRouter} from '@quilted/quilt/navigation/testing';
 import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
 
-import type {AppContext} from '~/shared/context.ts';
+import type {AppContext} from '~/context/types.ts';
 
 export interface RenderOptions {
   /**
@@ -27,7 +27,7 @@ export interface RenderContext extends AppContext {
   /**
    * The router used for this component test.
    */
-  readonly router: TestRouter;
+  readonly navigation: {router: TestRouter};
 
   /**
    * The browser environment for this component test.

package/templates/app-basic/tsconfig.json

@@ -3,10 +3,8 @@
   "compilerOptions": {
     "jsxImportSource": "preact",
     "paths": {
-      "~/shared/*": ["./shared/*"],
-      "~/tests/*": ["./tests/*"],
-      "react": ["./node_modules/preact/compat"],
-      "react-dom": ["./node_modules/preact/compat"]
+      "~/context/*": ["./context/*"],
+      "~/tests/*": ["./tests/*"]
     }
   },
   "include": ["**/*"],

package/templates/app-graphql/App.tsx

@@ -8,8 +8,9 @@ import {Frame} from './foundation/frame.ts';
 
 import {Home, homeQuery} from './features/home.ts';
 
-import {AppContextPreact, type AppContext} from './shared/context.ts';
-import {routeWithAppContext} from './shared/navigation.ts';
+import type {AppContext} from './context/types.ts';
+import {AppContextPreact} from './context/preact.ts';
+import {routeWithAppContext} from './context/navigation.ts';
 
 export interface AppProps {
   context: AppContext;
@@ -44,7 +45,7 @@ export function App({context}: AppProps) {
         <Localization>
           <Head />
           <Navigation
-            router={context.router}
+            router={context.navigation.router}
             routes={routes}
             context={context}
           />

package/templates/app-graphql/browser.css

@@ -0,0 +1,10 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+}

package/templates/app-graphql/browser.tsx

@@ -1,29 +1,12 @@
+import './browser.css';
+
 import type {ComponentChild} from 'preact';
 import {hydrate} from '@quilted/quilt/browser';
-import {Router} from '@quilted/quilt/navigation';
-import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
-import type {AppContext} from '~/shared/context.ts';
+import {BrowserAppContext} from '~/context/browser.ts';
 
 import {App} from './App.tsx';
 
-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.
@@ -44,7 +27,7 @@ class BrowserApp {
     // @example
     // ```js
     // // Log the current URL
-    // console.log(globalThis.app.context.router.currentRequest.url);
+    // console.log(globalThis.app.context.navigation.router.currentRequest.url);
     // ```
     Object.defineProperty(globalThis, 'app', {
       value: this,
@@ -53,8 +36,11 @@ class BrowserApp {
       writable: true,
     });
   }
+
+  hydrate() {
+    hydrate(this.rendered);
+  }
 }
 
 const app = new BrowserApp();
-
-hydrate(app.rendered);
+app.hydrate();

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

@@ -0,0 +1,21 @@
+import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
+
+import type {AppContext} from './types.ts';
+import {NavigationForApp} from './navigation.ts';
+
+export class BrowserAppContext implements AppContext {
+  readonly navigation: NavigationForApp;
+  readonly graphql: AppContext['graphql'];
+
+  constructor() {
+    this.navigation = new NavigationForApp();
+
+    const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
+    const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
+
+    this.graphql = {
+      fetch: graphQLFetch,
+      cache: graphQLCache,
+    };
+  }
+}

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

@@ -0,0 +1,17 @@
+import {createContextRouteFunction, Router} from '@quilted/quilt/navigation';
+
+import type {AppContext} from './types.ts';
+
+export interface Navigation {
+  readonly router: Router;
+}
+
+export class NavigationForApp implements Navigation {
+  readonly router: Router;
+
+  constructor(url?: string | URL) {
+    this.router = new Router(url);
+  }
+}
+
+export const routeWithAppContext = createContextRouteFunction<AppContext>();

package/templates/{app-trpc/shared/context.ts → app-graphql/context/preact.ts}

@@ -1,6 +1,6 @@
 import {createOptionalContext} from '@quilted/quilt/context';
 
-export interface AppContext {}
+import type {AppContext} from './types.ts';
 
 export const AppContextPreact = createOptionalContext<AppContext>();
 export const useAppContext = AppContextPreact.use;

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

@@ -0,0 +1,23 @@
+import {GraphQLCache} from '@quilted/quilt/graphql';
+
+import type {AppContext} from './types.ts';
+import {NavigationForApp} from './navigation.ts';
+
+export class ServerAppContext implements AppContext {
+  readonly navigation: NavigationForApp;
+  readonly graphql: AppContext['graphql'];
+
+  constructor(request: Request) {
+    this.navigation = new NavigationForApp(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}),
+    };
+  }
+}

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

@@ -0,0 +1,10 @@
+import type {Navigation} from './navigation.ts';
+import type {GraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
+
+export interface AppContext {
+  readonly navigation: Navigation;
+  readonly graphql: {
+    readonly fetch: GraphQLFetch;
+    readonly cache: GraphQLCache;
+  };
+}

package/templates/app-graphql/server.tsx

@@ -1,5 +1,4 @@
 import {Hono} from 'hono';
-import {Router} from '@quilted/quilt/navigation';
 import {
   renderAppToHTMLResponse,
   CacheControlHeader,
@@ -7,35 +6,13 @@ 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';
 
-import type {AppContext} from '~/shared/context.ts';
-
 const app = new Hono();
 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
 app.post('/api/graphql', async (c) => {
   const request = c.req.raw;
@@ -55,7 +32,10 @@ app.post('/api/graphql', async (c) => {
 app.get('*', async (c) => {
   const request = c.req.raw;
 
-  const [{App}] = await Promise.all([import('./App.tsx')]);
+  const [{App}, {ServerAppContext}] = await Promise.all([
+    import('./App.tsx'),
+    import('./context/server.ts'),
+  ]);
 
   const context = new ServerAppContext(request);
 

package/templates/app-graphql/tests/render/render.tsx

@@ -9,7 +9,7 @@ import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 import {GraphQLCache} from '@quilted/quilt/graphql';
 
-import {AppContextReact} from '~/shared/context.ts';
+import {AppContextPreact} from '~/context/preact.ts';
 
 import {GraphQLTesting, GraphQLController} from '../graphql.ts';
 
@@ -32,26 +32,29 @@ export const renderApp = createRender<
     router = new TestRouter(),
     browser = new BrowserTestMock(),
     graphql = new GraphQLController(),
-    graphQLCache = new GraphQLCache(),
+    graphQLCache = new GraphQLCache({fetch: graphql.fetch}),
   }) {
     return {
-      router,
+      navigation: {router},
       browser,
-      graphql: {fetch: graphql.fetch, cache: graphQLCache},
-      graphQLController: graphql,
+      graphql: {fetch: graphql.fetch, cache: graphQLCache, controller: graphql},
     };
   },
   // Render all of our app-wide context providers around each component under test.
   render(element, context, {locale = 'en'}) {
-    const {router, browser, graphql, graphQLController} = context;
+    const {
+      navigation: {router},
+      browser,
+      graphql,
+    } = context;
 
     return (
-      <AppContextReact.Provider value={context}>
+      <AppContextPreact.Provider value={context}>
         <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>
               <GraphQLTesting
-                controller={graphQLController}
+                controller={graphql.controller}
                 cache={graphql.cache}
               >
                 <Suspense fallback={null}>{element}</Suspense>
@@ -59,7 +62,7 @@ export const renderApp = createRender<
             </Navigation>
           </Localization>
         </BrowserDetailsContext.Provider>
-      </AppContextReact.Provider>
+      </AppContextPreact.Provider>
     );
   },
   async afterRender(wrapper) {
@@ -69,7 +72,7 @@ export const renderApp = createRender<
     // once the data is ready.
 
     await wrapper.act(async () => {
-      await wrapper.context.graphQLController.resolveAll();
+      await wrapper.context.graphql.controller.resolveAll();
     });
   },
 });