Update UI library to use Preact

app/App.tsx

@@ -1,4 +1,4 @@
-import {useMemo, type PropsWithChildren} from 'react';
+import {useMemo, type RenderableProps} from 'preact';
 import {QueryClient} from '@tanstack/react-query';
 import {ReactQueryContext} from '@quilted/react-query';
 
@@ -272,7 +272,7 @@ export function AppContext({
   user: explicitUser,
   fetchGraphQL,
   children,
-}: PropsWithChildren<AppContextProps>) {
+}: RenderableProps<AppContextProps>) {
   const router = useRouter();
   const serializedContext = useSerialized('AppContext', () => ({
     user: explicitUser,
@@ -324,7 +324,7 @@ export function AppContext({
   );
 }
 
-function Authenticated({children}: PropsWithChildren) {
+function Authenticated({children}: RenderableProps) {
   const {user} = useAppContext();
 
   if (user == null) {

app/browser.tsx

@@ -1,6 +1,6 @@
 import '@quilted/quilt/globals';
-import {hydrateRoot} from 'react-dom/client';
-import {createAsyncComponent} from '@quilted/quilt/async';
+import {hydrate} from 'preact';
+import {AsyncComponent} from '@quilted/quilt/async';
 import {type GraphQLFetch, createGraphQLFetch} from '@quilted/quilt/graphql';
 import {SearchParam} from '~/global/auth.ts';
 
@@ -39,8 +39,8 @@ const fetchGraphQL: GraphQLFetch = async function fetchWithAuth(...args) {
   return result;
 };
 
-const App = createAsyncComponent(() => import('./App.tsx'));
+const App = AsyncComponent.from(() => import('./App.tsx'));
 
 const element = document.querySelector('#app')!;
 
-hydrateRoot(element, <App fetchGraphQL={fetchGraphQL} />);
+hydrate(<App fetchGraphQL={fetchGraphQL} />, element);

app/features/Account/Account.tsx

@@ -1,4 +1,4 @@
-import {useState, type ReactNode, type PropsWithChildren} from 'react';
+import {useState, type ReactNode, type RenderableProps} from 'preact';
 import {useSignal} from '@quilted/quilt/signals';
 import {useNavigate, useCurrentUrl} from '@quilted/quilt/navigate';
 import {useLocalizedFormatting} from '@quilted/quilt/localize';
@@ -405,7 +405,7 @@ function SubscribeSection({
   cost,
   level,
   children,
-}: PropsWithChildren<{
+}: RenderableProps<{
   heading: string;
   cost: {amount: number; currency: string};
   level: PrepareSubscriptionMutationVariables['level'];
@@ -441,7 +441,7 @@ function SubscribeSection({
 function SubscribeAction({
   level,
   children,
-}: PropsWithChildren<{
+}: RenderableProps<{
   level: PrepareSubscriptionMutationVariables['level'];
 }>) {
   const navigate = useNavigate();

app/features/Account/CreateAccount.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useState} from 'preact';
 import {useSignal} from '@quilted/quilt/signals';
 import {useNavigate, useCurrentUrl} from '@quilted/quilt/navigate';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';

app/features/Account/Payment.tsx

@@ -4,8 +4,8 @@ import {
   createRef,
   type RefObject,
   type ComponentProps,
-  type PropsWithChildren,
-} from 'react';
+  type RenderableProps,
+} from 'preact';
 import type {Stripe, StripeElements} from '@stripe/stripe-js';
 import {useRouter, Redirect, useCurrentUrl} from '@quilted/quilt/navigate';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
@@ -123,7 +123,7 @@ function StripeForm({
   clientSecret,
   children,
   onSubmit,
-}: PropsWithChildren<
+}: RenderableProps<
   {
     apiKey?: string;
     clientSecret?: string;

app/features/Authentication/SignIn.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'preact';
 import {useSignal, useComputed} from '@quilted/quilt/signals';
 import {
   Link,

app/features/Developer/AccessTokens/AccessTokens.tsx

@@ -1,4 +1,4 @@
-import {useState, type ReactNode} from 'react';
+import {useState, type ReactNode} from 'preact';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
 import {
   BlockStack,

app/features/Developer/Apps/Apps.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {ReactNode} from 'preact';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
 
 import {Text, InlineStack, View, Action, TextBlock} from '@lemon/zest';

app/features/Developer/AuthenticateCli/AuthenticateCli.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {ReactNode} from 'preact';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
 import {BlockStack, TextBlock, Text, Action, TextLink} from '@lemon/zest';
 

app/features/Developer/CreatedAccountFromCli/CreatedAccountFromCli.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {ReactNode} from 'preact';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
 import {BlockStack, TextBlock, Text, Action} from '@lemon/zest';
 

app/features/Internal/ComponentLibrary.tsx

@@ -1,4 +1,4 @@
-import {type ComponentProps} from 'react';
+import {type ComponentProps} from 'preact';
 import {useSignal} from '@quilted/quilt/signals';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';
 import {

app/features/Search/Search.tsx

@@ -1,4 +1,4 @@
-import {useState, useRef, useEffect, useCallback} from 'react';
+import {useState, useRef, useEffect, useCallback} from 'preact';
 
 import {useCurrentUrl, useNavigate} from '@quilted/quilt/navigate';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';

app/features/Series/Series.tsx

@@ -1,4 +1,4 @@
-import {type ComponentProps} from 'react';
+import {type ComponentProps} from 'preact';
 import {useSignal} from '@quilted/quilt/signals';
 import {useNavigate} from '@quilted/quilt/navigate';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';

app/features/WatchThrough/WatchThrough.tsx

@@ -1,4 +1,4 @@
-import {useMemo, type PropsWithChildren, ReactNode} from 'react';
+import {useMemo, type RenderableProps, ReactNode} from 'preact';
 
 import {signal, useSignal, type Signal} from '@quilted/quilt/signals';
 import {useNavigate} from '@quilted/quilt/navigate';
@@ -386,7 +386,7 @@ function WatchAgainAction({
   children,
   watchThrough,
   episodes,
-}: PropsWithChildren<{
+}: RenderableProps<{
   watchThrough: WatchThrough;
   episodes?: StartWatchThroughFromWatchThroughMutationVariables['episodes'];
 }>) {
@@ -548,7 +548,7 @@ function WatchEpisodeForm({
   watchThroughId,
   children,
   onUpdate,
-}: PropsWithChildren<WatchEpisodeFormProps>) {
+}: RenderableProps<WatchEpisodeFormProps>) {
   const {mutateAsync} = useMutation(watchNextEpisodeMutation);
 
   const {at, notes, rating} = form;

app/features/Watching/Watching.tsx

@@ -1,4 +1,4 @@
-import {useMemo, type ReactNode} from 'react';
+import {useMemo, type ReactNode} from 'preact';
 
 import {useLocalizedFormatting} from '@quilted/quilt/localize';
 import {usePerformanceNavigation} from '@quilted/quilt/performance';

app/foundation/Frame/Frame.tsx

@@ -1,4 +1,4 @@
-import {type PropsWithChildren} from 'react';
+import {type RenderableProps} from 'preact';
 
 import {Action, Menu, View, Modal, Icon} from '@lemon/zest';
 
@@ -13,7 +13,7 @@ const ROOT_NAVIGATION_ITEM_MATCHES = [
   /[/]app[/]?($|finished[/]?$|watch-?through[/]|watching[/])/,
 ];
 
-export default function Frame({children}: PropsWithChildren<Props>) {
+export default function Frame({children}: RenderableProps<Props>) {
   return (
     <View display="grid" className={styles.Frame}>
       <View className={styles.GoMenu}>

app/foundation/Frame/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import {useMemo, type ComponentProps, type PropsWithChildren} from 'react';
+import {useMemo, type ComponentProps, type RenderableProps} from 'preact';
 import {
   useCurrentUrl,
   useRouter,
@@ -10,7 +10,7 @@ import styles from './Navigation.module.css';
 
 export interface NavigationProps {}
 
-export function Navigation({children}: PropsWithChildren<NavigationProps>) {
+export function Navigation({children}: RenderableProps<NavigationProps>) {
   return <View className={styles.Navigation}>{children}</View>;
 }
 
@@ -27,7 +27,7 @@ export function NavigationItem({
   matches,
   emphasis,
   children,
-}: PropsWithChildren<NavigationItemProps>) {
+}: RenderableProps<NavigationItemProps>) {
   const selected = useItemSelected(to, matches);
 
   return (

app/foundation/Metrics/Metrics.tsx

@@ -1,8 +1,8 @@
-import type {PropsWithChildren} from 'react';
+import type {RenderableProps} from 'preact';
 import {usePerformanceNavigationEvent} from '@quilted/quilt/performance';
 import Env from 'quilt:module/env';
 
-export function Metrics({children}: PropsWithChildren) {
+export function Metrics({children}: RenderableProps) {
   usePerformanceNavigationEvent(async (navigation) => {
     if (Env.MODE === 'development') {
       console.log('Navigation');

app/package.json

@@ -43,7 +43,7 @@
     "@types/jsonwebtoken": "^8.0.0",
     "@watching/api": "workspace:*",
     "@watching/clips": "workspace:*",
-    "@watching/react-signals": "workspace:*",
+    "@quilted/preact-signals": "workspace:*",
     "@watching/thread-render": "workspace:*",
     "@watching/tools": "workspace:*",
     "base64url": "^3.0.1",

app/shared/auth/SignInWithAppleAction.tsx

@@ -1,5 +1,5 @@
 import {Action} from '@lemon/zest';
-import {type PropsWithChildren} from 'react';
+import {type RenderableProps} from 'preact';
 
 export interface SignInWithActionResponse {
   idToken: string;
@@ -15,7 +15,7 @@ export function SignInWithAppleAction({
   children,
   redirectUrl,
   onPress,
-}: PropsWithChildren<SignInWithAppleActionProps>) {
+}: RenderableProps<SignInWithAppleActionProps>) {
   return (
     <Action
       onPress={async () => {

app/shared/clips/Clip/Clip.tsx

@@ -1,4 +1,4 @@
-import {ComponentType, useEffect, useRef} from 'react';
+import {ComponentType, useEffect, useRef} from 'preact';
 import {type ExtensionPoint} from '@watching/clips';
 import {RemoteRootRenderer} from '@remote-dom/preact/host';
 import {

app/shared/clips/Clip/ClipSettings.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import {useMemo} from 'preact';
 import {signal, type Signal} from '@quilted/quilt/signals';
 import {createTranslate} from '@quilted/localize';
 import {Action, BlockStack, Form, Select, Text, TextField} from '@lemon/zest';

app/shared/clips/components/shared.ts

@@ -3,7 +3,7 @@ import {
   useEffect,
   type ForwardRefExoticComponent,
   type ForwardRefRenderFunction,
-} from 'react';
+} from 'preact';
 import {ElementConstructors, type Elements} from '@watching/clips';
 import {createRemoteComponentRenderer} from '@remote-dom/preact/host';
 import {

app/shared/clips/local-development.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {useEffect} from 'preact';
 import {useInitialUrl} from '@quilted/quilt/navigate';
 
 import {type ClipsManager} from './manager.ts';

app/shared/clips/react.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useEffect} from 'react';
+import {useMemo, useEffect} from 'preact';
 import {signal, useComputed, type Signal} from '@quilted/quilt/signals';
 import {
   type GraphQLResult,

app/shared/github.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback, useEffect, useRef} from 'preact';
 import {useRouter} from '@quilted/quilt/navigate';
 
 import {

app/shared/google.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback, useEffect, useRef} from 'preact';
 import {useRouter} from '@quilted/quilt/navigate';
 
 import {

app/shared/media/MediaGrid/MediaGrid.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, type PropsWithChildren} from 'react';
+import {type ReactNode, type RenderableProps} from 'preact';
 import {classes, variation} from '@lemon/css';
 import {
   Text,
@@ -22,7 +22,7 @@ export function MediaGrid({
   children,
   blockSpacing,
   minInlineSize,
-}: PropsWithChildren<Props>) {
+}: RenderableProps<Props>) {
   const style = minInlineSize
     ? ({
         '--w-internal-MediaGrid-item-min-inline-size':
@@ -58,7 +58,7 @@ export function MediaGridItem({
   title,
   subtitle,
   children,
-}: PropsWithChildren<MediaGridItemProps>) {
+}: RenderableProps<MediaGridItemProps>) {
   const hasImage = Boolean(image);
 
   let actionProps: PressableProps | undefined;

app/shared/page/Page/Page.tsx

@@ -1,4 +1,4 @@
-import type {PropsWithChildren, ReactNode} from 'react';
+import type {RenderableProps, ReactNode} from 'preact';
 
 import {
   Text,
@@ -23,7 +23,7 @@ export function Page({
   menu,
   heading,
   detail,
-}: PropsWithChildren<Props>) {
+}: RenderableProps<Props>) {
   const headingContent = menu ? (
     <HeadingAction overlay={<Popover inlineAttachment="start">{menu}</Popover>}>
       {heading}

app/shared/spoilers/SpoilerAvoidance.tsx

@@ -3,7 +3,7 @@ import {
   isSignal,
   resolveSignalOrValue,
   type SignalOrValue,
-} from '@watching/react-signals';
+} from '@quilted/preact-signals';
 
 import {type SpoilerAvoidance as SpoilerAvoidanceValue} from '~/graphql/types';
 

app/tsconfig.json

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

functions/email/Email.tsx

@@ -1,4 +1,4 @@
-import {type ComponentProps} from 'react';
+import {type ComponentProps} from 'preact';
 
 import {Welcome} from './emails/Welcome.tsx';
 import {SignIn} from './emails/SignIn.tsx';

packages/cli/source/commands/create/create.ts

@@ -78,7 +78,7 @@ export async function create({ui}: {ui: Ui}) {
         choices: [
           {title: 'DOM', value: 'dom'},
           {title: 'Preact', value: 'preact'},
-          {title: 'React', value: 'react'},
+          {title: 'preact', value: 'preact'},
           {title: 'Svelte', value: 'svelte'},
         ],
       });
@@ -180,7 +180,7 @@ function validateTemplate(template: string) {
   return resolvedTemplate;
 }
 
-const VALID_FORMATS = new Set(['dom', 'preact', 'react', 'svelte']);
+const VALID_FORMATS = new Set(['dom', 'preact', 'preact', 'svelte']);
 
 function validateFormat(format: string) {
   const normalized = format.trim().toLowerCase();

packages/clips-react/CHANGELOG.md

@@ -518,7 +518,7 @@
 - Updated dependencies [[`2de545d`](https://github.com/lemonmade/watch/commit/2de545d17240518b47a1933336a14f5ca8626f11), [`507675c`](https://github.com/lemonmade/watch/commit/507675cf02c2ac0b8d68c4e663188d2bba79a1ad), [`260a663`](https://github.com/lemonmade/watch/commit/260a6636fdc376c0e8a8fda3867b19c2abf0e972)]:
   - @watching/clips@0.2.11
   - @watching/remote-react-utilities@0.1.2
-  - @watching/react-signals@0.1.1
+  - @quilted/preact-signals@0.1.1
   - @watching/thread-signals@0.1.3
 
 ## 0.2.11

packages/clips-react/source/extension.tsx

@@ -2,7 +2,7 @@ import {extension as domExtension} from '@watching/clips';
 import type {Api, ExtensionPoint} from '@watching/clips';
 import '@remote-dom/react/polyfill';
 
-import {type ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {ClipRenderContext, type ClipRenderDetails} from './context.ts';

packages/react-signals/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @watching/react-signals
+# @quilted/preact-signals
 
 ## 0.2.0