@quilted/create 0.2.20 → 0.2.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @quilted/create
 
+## 0.2.21
+
+### Patch Changes
+
+- [`eaf0c45`](https://github.com/lemonmade/quilt/commit/eaf0c457f49c9bb60e854e42ffd35df4af59304f) Thanks [@lemonmade](https://github.com/lemonmade)! - Update templates
+
 ## 0.2.20
 
 ### Patch Changes

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.mjs

@@ -2,9 +2,9 @@ import { __exports as out } from '../../../../../../../_virtual/index5.mjs';
 import './providers/async.mjs';
 import './providers/sync.mjs';
 import './settings.mjs';
-import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
-import { __exports as async$1 } from '../../../../../../../_virtual/async4.mjs';
-import { __exports as sync$1 } from '../../../../../../../_virtual/sync4.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
+import { __exports as async$1 } from '../../../../../../../_virtual/async3.mjs';
+import { __exports as sync$1 } from '../../../../../../../_virtual/sync3.mjs';
 
 Object.defineProperty(out, "__esModule", {
   value: true

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/async4.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async3.mjs';
 
 Object.defineProperty(async, "__esModule", {
   value: true

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/sync4.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.mjs';
 
 Object.defineProperty(sync, "__esModule", {
   value: true

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/settings3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
 import './adapters/fs.mjs';
 import { __exports as fs$1 } from '../../../../../../../_virtual/fs2.mjs';
 

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

@@ -3,10 +3,10 @@ import './providers/async.mjs';
 import './providers/stream.mjs';
 import './providers/sync.mjs';
 import './settings.mjs';
-import { __exports as settings } from '../../../../../../../_virtual/settings2.mjs';
-import { __exports as async } from '../../../../../../../_virtual/async3.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
+import { __exports as async } from '../../../../../../../_virtual/async4.mjs';
 import { __exports as stream } from '../../../../../../../_virtual/stream4.mjs';
-import { __exports as sync } from '../../../../../../../_virtual/sync3.mjs';
+import { __exports as sync } from '../../../../../../../_virtual/sync4.mjs';
 
 Object.defineProperty(out, "__esModule", {
   value: true

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/async3.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
 import '../readers/async.mjs';
 import { __exports as async$1 } from '../../../../../../../../_virtual/async5.mjs';
 

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/sync3.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
 import '../readers/sync.mjs';
 import { __exports as sync$1 } from '../../../../../../../../_virtual/sync5.mjs';
 

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/settings2.mjs';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
 import path__default from 'node:path';
 import '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.mjs';
 import { __exports as out } from '../../../../../../../_virtual/index6.mjs';

package/package.json

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

package/templates/app-basic/App.tsx

@@ -1,4 +1,4 @@
-import {type PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -42,7 +42,7 @@ function Routes() {
 }
 
 // This component renders any app-wide context.
-function AppContext({children, context}: PropsWithChildren<AppProps>) {
+function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
 
   return (

package/templates/app-basic/browser.tsx

@@ -1,5 +1,5 @@
 import '@quilted/quilt/globals';
-import {hydrateRoot} from 'react-dom/client';
+import {hydrate} from 'preact';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
 
 import {App} from './App.tsx';
@@ -7,9 +7,9 @@ import {App} from './App.tsx';
 const element = document.querySelector('#app')!;
 const browser = new Browser();
 
-hydrateRoot(
-  element,
+hydrate(
   <BrowserContext browser={browser}>
     <App />
   </BrowserContext>,
+  element,
 );

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

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

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

@@ -1,4 +1,5 @@
-import type {PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
+import Env from '@quilted/quilt/env';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
@@ -16,7 +17,7 @@ import {
 // application you can read that state.
 //
 // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: PropsWithChildren) {
+export function HTML({children}: RenderableProps<{}>) {
   return (
     <>
       <Headers />

package/templates/app-basic/package.json

@@ -12,8 +12,6 @@
   "dependencies": {},
   "devDependencies": {
     "@quilted/quilt": "workspace:^0.6.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "jsdom": "^24.0.0",
     "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",

package/templates/app-basic/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "@quilted/typescript/tsconfig.project.json",
   "compilerOptions": {
     "outDir": "build/typescript",
+    "jsxImportSource": "preact",
     "paths": {
       "~/shared/*": ["./shared/*"],
       "~/tests/*": ["./tests/*"]

package/templates/app-empty/browser.tsx

@@ -1,7 +1,7 @@
-import {hydrateRoot} from 'react-dom/client';
+import {hydrate} from 'preact';
 
 import {App} from './App.tsx';
 
 const element = document.querySelector('#app')!;
 
-hydrateRoot(element, <App />);
+hydrate(<App />, element);

package/templates/app-empty/package.json

@@ -12,8 +12,6 @@
   "dependencies": {},
   "devDependencies": {
     "@quilted/quilt": "^0.6.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",
     "react-dom": "npm:@quilted/react-dom@^18.2.0"

package/templates/app-graphql/App.tsx

@@ -1,4 +1,4 @@
-import {type PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -45,7 +45,7 @@ function Routes() {
 }
 
 // This component renders any app-wide context.
-function AppContext({children, context}: PropsWithChildren<AppProps>) {
+function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
 
   return (

package/templates/app-graphql/browser.tsx

@@ -1,6 +1,6 @@
 import '@quilted/quilt/globals';
 
-import {hydrateRoot} from 'react-dom/client';
+import {hydrate} from 'preact';
 import {QueryClient} from '@tanstack/react-query';
 import {createGraphQLFetch} from '@quilted/quilt/graphql';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
@@ -13,9 +13,9 @@ const browser = new Browser();
 const queryClient = new QueryClient();
 const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'});
 
-hydrateRoot(
-  element,
+hydrate(
   <BrowserContext browser={browser}>
     <App context={{fetchGraphQL, queryClient}} />
   </BrowserContext>,
+  element,
 );

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

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

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

@@ -1,4 +1,4 @@
-import type {PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
@@ -16,7 +16,7 @@ import {
 // application you can read that state.
 //
 // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: PropsWithChildren) {
+export function HTML({children}: RenderableProps<{}>) {
   return (
     <>
       <Headers />

package/templates/app-graphql/package.json

@@ -15,8 +15,6 @@
     "@quilted/quilt": "^0.6.0",
     "@quilted/react-query": "^0.3.0",
     "@tanstack/react-query": "^5.0.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "graphql": "^16.8.0",
     "jsdom": "^24.0.0",
     "preact": "^10.21.0",

package/templates/app-trpc/App.tsx

@@ -1,4 +1,4 @@
-import {type PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 
 import {Routing, useRoutes} from '@quilted/quilt/navigate';
 import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
@@ -45,7 +45,7 @@ function Routes() {
 }
 
 // This component renders any app-wide context.
-function AppContext({children, context}: PropsWithChildren<AppProps>) {
+function AppContext({children, context}: RenderableProps<AppProps>) {
   const locale = useLocaleFromEnvironment() ?? 'en';
 
   return (

package/templates/app-trpc/browser.tsx

@@ -1,5 +1,6 @@
 import '@quilted/quilt/globals';
-import {hydrateRoot} from 'react-dom/client';
+
+import {hydrate} from 'preact';
 import {httpBatchLink} from '@trpc/client';
 import {QueryClient} from '@tanstack/react-query';
 import {Browser, BrowserContext} from '@quilted/quilt/browser';
@@ -16,9 +17,9 @@ const trpcClient = trpc.createClient({
   links: [httpBatchLink({url: new URL('/api', window.location.href).href})],
 });
 
-hydrateRoot(
-  element,
+hydrate(
   <BrowserContext browser={browser}>
     <App context={{trpc: trpcClient, queryClient}} />
   </BrowserContext>,
+  element,
 );

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

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

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

@@ -1,4 +1,4 @@
-import type {PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
 import {
   CacheControl,
@@ -16,7 +16,7 @@ import {
 // application you can read that state.
 //
 // @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: PropsWithChildren) {
+export function HTML({children}: RenderableProps<{}>) {
   return (
     <>
       <Headers />

package/templates/app-trpc/package.json

@@ -18,8 +18,6 @@
     "@trpc/client": "^10.43.0",
     "@trpc/react-query": "^10.43.0",
     "@trpc/server": "^10.43.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "jsdom": "^24.0.0",
     "preact": "^10.21.0",
     "react": "npm:@quilted/react@^18.2.0",