@quilted/create 0.2.25 → 0.2.26

package/CHANGELOG.md

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.2.25",
+  "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-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-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>
+  );
 }