@quilted/create 0.2.40 → 0.2.42

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @quilted/create
 
+## 0.2.42
+
+### Patch Changes
+
+- [#843](https://github.com/lemonmade/quilt/pull/843) [`5a8036d`](https://github.com/lemonmade/quilt/commit/5a8036d39d93c576812428ecc8fe537a30696dba) Thanks [@lemonmade](https://github.com/lemonmade)! - Make browser context creation implicit on the client
+
+## 0.2.41
+
+### Patch Changes
+
+- [#832](https://github.com/lemonmade/quilt/pull/832) [`f0105b4`](https://github.com/lemonmade/quilt/commit/f0105b41db07ebdf21d131d664c1a909659a5142) Thanks [@lemonmade](https://github.com/lemonmade)! - Update template dependencies
+
 ## 0.2.40
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,6 +26,9 @@
   "devDependencies": {
     "@quilted/cli-kit": "^0.2.0",
     "@types/common-tags": "^1.8.0",
+    "@trpc/client": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
     "@types/fs-extra": "^9.0.11",
     "@types/minimatch": "^3.0.5",
     "@types/prompts": "^2.0.13",
@@ -38,7 +41,8 @@
     "pkg-dir": "^6.0.0",
     "prettier": "^3.0.0",
     "prompts": "^2.4.0",
-    "yaml": "^2.1.0"
+    "yaml": "^2.1.0",
+    "zod": "^3.23.8"
   },
   "scripts": {
     "build": "rollup --config configuration/rollup.config.js"

package/templates/app-basic/browser.tsx

@@ -1,24 +1,15 @@
 import '@quilted/quilt/globals';
-import {hydrate} from 'preact';
-import {Browser, BrowserContext} from '@quilted/quilt/browser';
+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 element = document.querySelector('#app')!;
-const browser = new Browser();
-
 const context = {
-  router: new Router(browser.request.url),
+  router: new Router(),
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console
 Object.assign(globalThis, {app: context});
 
-hydrate(
-  <BrowserContext browser={browser}>
-    <App context={context} />
-  </BrowserContext>,
-  element,
-);
+hydrate(<App context={context} />);

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

@@ -1,5 +1,8 @@
 import {createRender} from '@quilted/quilt/testing';
-import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
+import {
+  BrowserDetailsContext,
+  BrowserTestMock,
+} from '@quilted/quilt/browser/testing';
 import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -29,11 +32,11 @@ export const renderApp = createRender<
 
     return (
       <AppContextReact.Provider value={context}>
-        <BrowserContext browser={browser}>
+        <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>{element}</Navigation>
           </Localization>
-        </BrowserContext>
+        </BrowserDetailsContext.Provider>
       </AppContextReact.Provider>
     );
   },

package/templates/app-graphql/browser.tsx

@@ -1,22 +1,18 @@
 import '@quilted/quilt/globals';
 
-import {hydrate} from 'preact';
-import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
-import {Browser, BrowserContext} from '@quilted/quilt/browser';
+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 {App} from './App.tsx';
 
-const element = document.querySelector('#app')!;
-const browser = new Browser();
-
 const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
 const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
 
 const context = {
-  router: new Router(browser.request.url),
+  router: new Router(),
   graphql: {
     fetch: graphQLFetch,
     cache: graphQLCache,
@@ -26,9 +22,4 @@ const context = {
 // Makes key parts of the app available in the browser console
 Object.assign(globalThis, {app: context});
 
-hydrate(
-  <BrowserContext browser={browser}>
-    <App context={context} />
-  </BrowserContext>,
-  element,
-);
+hydrate(<App context={context} />);

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

@@ -1,7 +1,10 @@
 import {Suspense} from 'preact/compat';
 
 import {createRender} from '@quilted/quilt/testing';
-import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
+import {
+  BrowserDetailsContext,
+  BrowserTestMock,
+} from '@quilted/quilt/browser/testing';
 import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 import {GraphQLCache} from '@quilted/quilt/graphql';
@@ -44,7 +47,7 @@ export const renderApp = createRender<
 
     return (
       <AppContextReact.Provider value={context}>
-        <BrowserContext browser={browser}>
+        <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>
               <GraphQLTesting
@@ -55,7 +58,7 @@ export const renderApp = createRender<
               </GraphQLTesting>
             </Navigation>
           </Localization>
-        </BrowserContext>
+        </BrowserDetailsContext.Provider>
       </AppContextReact.Provider>
     );
   },

package/templates/app-trpc/browser.tsx

@@ -1,26 +1,23 @@
 import '@quilted/quilt/globals';
 
-import {hydrate} from 'preact';
+import {hydrate} from '@quilted/quilt/browser';
+import {Router} from '@quilted/quilt/navigation';
+
 import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
-import {Browser, BrowserContext} from '@quilted/quilt/browser';
-import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 import {trpc} from '~/shared/trpc.ts';
 
 import {App} from './App.tsx';
 
-const element = document.querySelector('#app')!;
-const browser = new Browser();
-
 const queryClient = new QueryClient();
 const trpcClient = trpc.createClient({
   links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
 });
 
 const context = {
-  router: new Router(browser.request.url),
+  router: new Router(),
   trpc: trpcClient,
   queryClient,
 } satisfies AppContext;
@@ -28,9 +25,4 @@ const context = {
 // Makes key parts of the app available in the browser console
 Object.assign(globalThis, {app: context});
 
-hydrate(
-  <BrowserContext browser={browser}>
-    <App context={context} />
-  </BrowserContext>,
-  element,
-);
+hydrate(<App context={context} />);

package/templates/app-trpc/shared/trpc.ts

@@ -1,4 +1,4 @@
-import type {TRPCClient} from '@trpc/client';
+import type {TRPCUntypedClient} from '@trpc/client';
 import {createTRPCReact, type CreateTRPCReact} from '@trpc/react-query';
 import type {QueryClient} from '@tanstack/react-query';
 
@@ -7,12 +7,12 @@ import type {QueryClient} from '@tanstack/react-query';
 // perform.
 import type {AppRouter} from '../trpc.ts';
 
-export const trpc: CreateTRPCReact<AppRouter, unknown, null> =
+export const trpc: CreateTRPCReact<AppRouter, {}> =
   createTRPCReact<AppRouter>();
 
 declare module '~/shared/context.ts' {
   interface AppContext {
-    trpc: TRPCClient<AppRouter>;
+    trpc: TRPCUntypedClient<AppRouter>;
     queryClient: QueryClient;
   }
 }

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

@@ -1,5 +1,8 @@
 import {createRender} from '@quilted/quilt/testing';
-import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
+import {
+  BrowserDetailsContext,
+  BrowserTestMock,
+} from '@quilted/quilt/browser/testing';
 import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -37,7 +40,7 @@ export const renderApp = createRender<
 
     return (
       <AppContextReact.Provider value={context}>
-        <BrowserContext browser={browser}>
+        <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>
               <trpc.Provider client={trpcClient} queryClient={queryClient}>
@@ -47,7 +50,7 @@ export const renderApp = createRender<
               </trpc.Provider>
             </Navigation>
           </Localization>
-        </BrowserContext>
+        </BrowserDetailsContext.Provider>
       </AppContextReact.Provider>
     );
   },

package/templates/app-trpc/trpc.ts

@@ -11,3 +11,5 @@ export const appRouter = t.router({
 // Our client-side code will use this type to infer the
 // procedures that are defined.
 export type AppRouter = typeof appRouter;
+
+export const createCaller = t.createCallerFactory(appRouter);

package/templates/workspace/package.json

@@ -16,11 +16,11 @@
     "@quilted/rollup": "^0.2.0",
     "@quilted/vite": "^0.1.0",
     "@quilted/typescript": "^0.4.0",
-    "rollup": "^4.14.0",
-    "prettier": "^3.0.0",
-    "tsx": "^4.9.0",
+    "rollup": "^4.21.0",
+    "prettier": "^3.3.0",
+    "tsx": "^4.19.0",
     "typescript": "^5.5.0",
-    "vite": "^5.3.0",
+    "vite": "^5.4.0",
     "vitest": "^2.0.0"
   },
   "prettier": {