@quilted/create 0.2.24 → 0.2.26

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @quilted/create
 
+## 0.2.26
+
+### Patch Changes
+
+- [`5c32e10`](https://github.com/lemonmade/quilt/commit/5c32e1022e5330a209817f7bfb49b09b301b36b7) Thanks [@lemonmade](https://github.com/lemonmade)! - Expose app context on browser console in template apps
+
+## 0.2.25
+
+### Patch Changes
+
+- [`fb45f13`](https://github.com/lemonmade/quilt/commit/fb45f13ef3d4be82f7edde567ed3247931957701) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix usage of magic "env" module
+
 ## 0.2.24
 
 ### Patch Changes

package/package.json

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

package/templates/app-basic/browser.tsx

@@ -2,14 +2,20 @@ import '@quilted/quilt/globals';
 import {hydrate} from 'preact';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
+const context = {} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
+
 hydrate(
   <BrowserContext browser={browser}>
-    <App />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

package/templates/app-basic/foundation/frame/Frame.tsx

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }

package/templates/app-basic/foundation/html/HTML.tsx

@@ -1,5 +1,5 @@
 import type {RenderableProps} from 'preact';
-import Env from '@quilted/quilt/env';
+import Env from 'quilt:module/env';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,

package/templates/app-graphql/browser.tsx

@@ -5,17 +5,27 @@ import {QueryClient} from '@tanstack/react-query';
 import {createGraphQLFetch} from '@quilted/quilt/graphql';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
+
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
-const queryClient = new QueryClient();
 const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
+const queryClient = new QueryClient();
+
+const context = {
+  fetchGraphQL,
+  queryClient,
+} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
 
 hydrate(
   <BrowserContext browser={browser}>
-    <App context={{fetchGraphQL, queryClient}} />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

package/templates/app-graphql/foundation/frame/Frame.tsx

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }

package/templates/app-graphql/foundation/html/HTML.tsx

@@ -1,4 +1,5 @@
 import type {RenderableProps} from 'preact';
+import Env from 'quilt:module/env';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,

package/templates/app-trpc/browser.tsx

@@ -5,6 +5,7 @@ import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
+import type {AppContext} from '~/shared/context.ts';
 import {trpc} from '~/shared/trpc.ts';
 
 import {App} from './App.tsx';
@@ -17,9 +18,17 @@ const trpcClient = trpc.createClient({
   links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
 });
 
+const context = {
+  trpc: trpcClient,
+  queryClient,
+} satisfies AppContext;
+
+// Makes key parts of the app available in the browser console
+Object.assign(globalThis, {app: context});
+
 hydrate(
   <BrowserContext browser={browser}>
-    <App context={{trpc: trpcClient, queryClient}} />
+    <App context={context} />
   </BrowserContext>,
   element,
 );

package/templates/app-trpc/foundation/frame/Frame.tsx

@@ -1,7 +1,12 @@
 import type {RenderableProps} from 'preact';
+import {Suspense} from 'preact/compat';
 
 import styles from './Frame.module.css';
 
 export function Frame({children}: RenderableProps<{}>) {
-  return <div className={styles.Frame}>{children}</div>;
+  return (
+    <div className={styles.Frame}>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  );
 }

package/templates/app-trpc/foundation/html/HTML.tsx

@@ -1,4 +1,5 @@
 import type {RenderableProps} from 'preact';
+import Env from 'quilt:module/env';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,

package/templates/github/_github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     name: Lint 💅
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/prepare
       - run: pnpm run lint
 
@@ -25,7 +25,7 @@ jobs:
     name: Type check 🧮
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/prepare
       - run: pnpm run type-check
 
@@ -33,7 +33,7 @@ jobs:
     name: Unit tests 🧪
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/prepare
       - run: pnpm run test
 
@@ -42,6 +42,6 @@ jobs:
     if: ${{ inputs.build || github.event_name == 'push' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/workflows/actions/prepare
       - run: pnpm run build