chore: Upgrade pnpm to 11

.github/actions/environment/action.yml

@@ -8,6 +8,7 @@ runs:
       uses: pnpm/action-setup@v4
       with:
         run_install: false
+        standalone: true
 
     - name: Setup Node.js
       uses: actions/setup-node@v4

frameworks/preact/package.json

@@ -48,6 +48,7 @@
     "@preact/signals": "^2.9.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/preact": "^3.2.4",
+    "@types/node": "24.0.13",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.31.0",
     "eslint-config-preact": "^2.0.0",

frameworks/solid/package.json

@@ -57,6 +57,7 @@
     "@formisch/methods": "workspace:*",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.6.0",
+    "@types/node": "24.0.13",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.31.0",
     "eslint-plugin-solid": "^0.14.5",

frameworks/svelte/package.json

@@ -58,6 +58,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/svelte": "^5.2.4",
+    "@types/node": "24.0.13",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.35.0",
     "eslint-plugin-svelte": "^3.12.2",

package.json

@@ -11,7 +11,10 @@
   },
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@11.3.0",
+  "engines": {
+    "node": ">=22"
+  },
   "scripts": {
     "build": "pnpm run build-packages && pnpm run build-frameworks",
     "build-packages": "pnpm --filter './packages/*' --if-present build",
@@ -45,10 +48,5 @@
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "typescript": "^5.8.3"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "@qwik.dev/router@2.0.0-beta.9": "patches/@qwik.dev__router@2.0.0-beta.9.patch"
-    }
   }
 }

packages/core/package.json

@@ -77,9 +77,11 @@
     "@preact/signals": "^2.9.0",
     "@qwik.dev/core": "2.0.0-beta.5",
     "@types/node": "24.0.13",
+    "@types/react": "^19.2.5",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.31.0",
     "jsdom": "^26.1.0",
+    "react": "^19.2.1",
     "rolldown": "1.0.0-beta.26",
     "rolldown-plugin-dts": "^0.13.13",
     "solid-js": "^1.9.7",
@@ -93,6 +95,8 @@
   "peerDependencies": {
     "@angular/core": ">=17.0.0",
     "@qwik.dev/core": "^2.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "solid-js": "^1.6.0",
     "svelte": "^5.29.0",
     "typescript": ">=5",
@@ -109,6 +113,12 @@
     "@qwik.dev/core": {
       "optional": true
     },
+    "@types/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
     "solid-js": {
       "optional": true
     },

packages/eslint-config/index.js

@@ -65,6 +65,7 @@ export const commonRules = {
 
   // Import
   'import/no-unresolved': 'off',
+  'import/named': 'off',
 
   // JSDoc
   'jsdoc/require-param-type': 'off',

pnpm-workspace.yaml

@@ -4,3 +4,11 @@ packages:
   - 'playgrounds/*'
   - 'scripts'
   - 'website'
+allowBuilds:
+  '@parcel/watcher': true
+  deasync: true
+  esbuild: true
+  sharp: true
+  vercel: true
+patchedDependencies:
+  '@qwik.dev/router@2.0.0-beta.9': patches/@qwik.dev__router@2.0.0-beta.9.patch

website/src/components/ApiList.tsx

@@ -11,7 +11,7 @@ type ApiListProps = {
  * List to display APIs and navigate to their documentation.
  */
 export const ApiList = component$<ApiListProps>(({ label, items }) => (
-  <ul class="ml-8! flex list-none flex-row flex-wrap gap-2 lg:ml-10!">
+  <ul class="ml-8! lg:ml-10! flex list-none flex-row flex-wrap gap-2">
     {label && label + ': '}
     {items.map((item, index) => (
       <li key={item.href} class="p-0!">

website/src/components/Checkbox.tsx

@@ -22,7 +22,7 @@ export const Checkbox = component$(
     const { name, required } = props;
     return (
       <div class={clsx('px-8 lg:px-10', props.class)}>
-        <label class="flex gap-4 font-medium select-none md:text-lg lg:text-xl">
+        <label class="flex select-none gap-4 font-medium md:text-lg lg:text-xl">
           <input
             {...props}
             class="mt-1 h-4 w-4 cursor-pointer lg:mt-1 lg:h-5 lg:w-5"

website/src/components/Debugger.tsx

@@ -181,7 +181,7 @@ export const FieldValueList = component$((props: FieldValuesProps) => {
               {value instanceof File ? value.name : String(value)}
             </span>
           ) : (
-            <FieldValueList class="mt-3 ml-2" values={value} />
+            <FieldValueList class="ml-2 mt-3" values={value} />
           )}
         </li>
       ))}

website/src/components/DocSearch.tsx

@@ -347,7 +347,7 @@ export const DocSearch = component$<DocSearchProps>(({ open }) => {
     <div
       class={clsx(
         open.value &&
-          'fixed top-0 left-0 z-40 h-screen w-screen lg:p-40 xl:p-48'
+          'fixed left-0 top-0 z-40 h-screen w-screen lg:p-40 xl:p-48'
       )}
       window:onKeyDown$={[preventDefault, handleKeyDown]}
     >
@@ -437,7 +437,7 @@ export const DocSearch = component$<DocSearchProps>(({ open }) => {
                                     getPrevItem()?.relation !== 'page'
                                   ? 'mt-6'
                                   : item.relation === 'child'
-                                    ? 'border-l-2 border-l-slate-200 pt-2.5 pl-2 dark:border-l-slate-800'
+                                    ? 'border-l-2 border-l-slate-200 pl-2 pt-2.5 dark:border-l-slate-800'
                                     : 'mt-2.5')
                           )}
                         >
@@ -491,7 +491,7 @@ export const DocSearch = component$<DocSearchProps>(({ open }) => {
             </footer>
           </div>
           <div
-            class="hidden lg:absolute lg:top-0 lg:left-0 lg:-z-10 lg:block lg:h-full lg:w-full lg:cursor-default lg:bg-gray-200/50 lg:backdrop-blur-sm lg:dark:bg-gray-800/50"
+            class="hidden lg:absolute lg:left-0 lg:top-0 lg:-z-10 lg:block lg:h-full lg:w-full lg:cursor-default lg:bg-gray-200/50 lg:backdrop-blur-sm lg:dark:bg-gray-800/50"
             role="button"
             onClick$={() => (open.value = false)}
           />

website/src/components/DocsLayout.tsx

@@ -113,7 +113,7 @@ export const DocsLayout = component$(() => {
           'relative flex-1 py-12 md:py-14 lg:w-px lg:py-24 xl:py-32',
           // Shown: padding on both sides. Hidden: drop the right padding so the
           // article fills the freed chapters column (a same-property override).
-          'no-chapters:lg:pr-0 lg:pr-9 lg:pl-9'
+          'no-chapters:lg:pr-0 lg:pl-9 lg:pr-9'
         )}
       >
         {/* Navigation buttons */}

website/src/components/Header.tsx

@@ -80,7 +80,7 @@ export const Header = component$<HeaderProps>(({ searchOpen }) => {
         {/* Website logo */}
         <div class="-m-1 overflow-hidden p-1 lg:w-64">
           <Link
-            class="focus-ring inline-flex w-full items-center rounded-lg p-2 font-medium transition-colors select-none hover:text-slate-900 md:w-auto md:text-lg lg:text-xl dark:hover:text-slate-200"
+            class="focus-ring inline-flex w-full select-none items-center rounded-lg p-2 font-medium transition-colors hover:text-slate-900 md:w-auto md:text-lg lg:text-xl dark:hover:text-slate-200"
             href="/"
             preventdefault:contextmenu
             onContextMenu$={() =>
@@ -111,7 +111,7 @@ export const Header = component$<HeaderProps>(({ searchOpen }) => {
         {/* Main menu */}
         <nav
           class={clsx(
-            'absolute top-full left-0 flex max-h-[60vh] w-full origin-top flex-col overflow-y-auto border-b-2 pt-4 pb-8 duration-200 lg:static lg:top-auto lg:w-auto lg:translate-y-0 lg:flex-row lg:gap-5 lg:overflow-visible lg:border-none lg:bg-transparent lg:p-0 xl:gap-6 lg:dark:bg-transparent',
+            'absolute left-0 top-full flex max-h-[60vh] w-full origin-top flex-col overflow-y-auto border-b-2 pb-8 pt-4 duration-200 lg:static lg:top-auto lg:w-auto lg:translate-y-0 lg:flex-row lg:gap-5 lg:overflow-visible lg:border-none lg:bg-transparent lg:p-0 xl:gap-6 lg:dark:bg-transparent',
             !isOpen.value && 'invisible scale-y-0 lg:visible lg:scale-y-100',
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             (isOpen.value && 'bg-white dark:bg-gray-900') ||

website/src/components/Navigation.tsx

@@ -122,7 +122,7 @@ const NavItem = component$<NavItemProps>(({ navElement, text, items }) => {
         >
           {text}
         </h4>
-        <div class="pointer-events-none absolute -top-8 -z-10 h-24 w-full bg-linear-to-b from-white via-white to-transparent opacity-90 dark:from-gray-900 dark:via-gray-900" />
+        <div class="bg-linear-to-b pointer-events-none absolute -top-8 -z-10 h-24 w-full from-white via-white to-transparent opacity-90 dark:from-gray-900 dark:via-gray-900" />
       </div>
       <div class="relative">
         <ul

website/src/components/PostCover.tsx

@@ -12,7 +12,7 @@ type PostCoverProps = {
 export const PostCover = component$<PostCoverProps>(({ variant, label }) => (
   <div
     class={clsx(
-      'relative flex aspect-video items-center justify-center overflow-hidden rounded-xl border-2 border-slate-200 select-none dark:border-slate-800',
+      'relative flex aspect-video select-none items-center justify-center overflow-hidden rounded-xl border-2 border-slate-200 dark:border-slate-800',
       variant === 'blog' &&
         'duration-100 will-change-transform hover:-translate-y-1 lg:rounded-2xl',
       variant === 'post' &&
@@ -21,7 +21,7 @@ export const PostCover = component$<PostCoverProps>(({ variant, label }) => (
     role="img"
     aria-label="Post cover image"
   >
-    <div class="absolute -top-[60%] -right-[20%] h-[150%] w-[60%] bg-[radial-gradient(theme(--color-yellow-500/.06),transparent_70%)] dark:bg-[radial-gradient(theme(--color-yellow-300/.05),transparent_70%)]" />
+    <div class="absolute -right-[20%] -top-[60%] h-[150%] w-[60%] bg-[radial-gradient(theme(--color-yellow-500/.06),transparent_70%)] dark:bg-[radial-gradient(theme(--color-yellow-300/.05),transparent_70%)]" />
     <div class="absolute -bottom-[60%] -left-[20%] h-[150%] w-[60%] bg-[radial-gradient(theme(--color-sky-600/.08),transparent_70%)] dark:bg-[radial-gradient(theme(--color-sky-400/.08),transparent_70%)]" />
     <div
       class={clsx(

website/src/components/PostList.tsx

@@ -25,7 +25,7 @@ export const PostList = component$<PostListProps>(({ posts }) => (
         <Link class="flex flex-col gap-8" href={post.href} prefetch={false}>
           <PostCover variant="blog" label={post.cover} />
           <div class="flex flex-col gap-5">
-            <h3 class="text-lg leading-normal font-medium text-slate-900 md:text-xl lg:text-2xl dark:text-slate-200">
+            <h3 class="text-lg font-medium leading-normal text-slate-900 md:text-xl lg:text-2xl dark:text-slate-200">
               {post.title}
             </h3>
             <PostMeta

website/src/components/Property.tsx

@@ -156,7 +156,7 @@ const Definition = component$<DefinitionProps>(({ parent, data }) => (
             data === 'never' ||
             data === 'any' ||
             data === 'unknown',
-          'text-sky-600 capitalize dark:text-sky-400':
+          'capitalize text-sky-600 dark:text-sky-400':
             data === 'object' ||
             data === 'array' ||
             data === 'tuple' ||
@@ -198,7 +198,7 @@ const Definition = component$<DefinitionProps>(({ parent, data }) => (
                     </>
                   ) : entrie.key.type ? (
                     <>
-                      <span class="text-orange-500 italic dark:text-orange-300">
+                      <span class="italic text-orange-500 dark:text-orange-300">
                         {entrie.key.name}
                       </span>
                       <span class="text-red-600 dark:text-red-400">:</span>{' '}

website/src/components/Radio.tsx

@@ -13,7 +13,7 @@ interface RadioProps extends FieldElementProps {
  */
 export const Radio = component$(({ label, checked, ...props }: RadioProps) => {
   return (
-    <label class="flex cursor-pointer items-center space-x-3 font-medium select-none md:text-lg lg:text-xl">
+    <label class="flex cursor-pointer select-none items-center space-x-3 font-medium md:text-lg lg:text-xl">
       <input
         {...props}
         class="h-4 w-4 cursor-pointer lg:h-5 lg:w-5"

website/src/components/SideBar.tsx

@@ -110,7 +110,7 @@ export const SideBar = component$<SideBarProps>(({ ref, toggle, ...props }) => {
         {/* Gradient overlay */}
         <div
           class={clsx(
-            'pointer-events-none absolute bottom-14 z-20 h-14 w-full origin-bottom translate-y-0.5 bg-linear-to-b from-transparent to-white duration-300 md:bottom-16 lg:hidden dark:to-gray-900',
+            'bg-linear-to-b pointer-events-none absolute bottom-14 z-20 h-14 w-full origin-bottom translate-y-0.5 from-transparent to-white duration-300 md:bottom-16 lg:hidden dark:to-gray-900',
             !toggle.value && 'invisible scale-y-0'
           )}
         />

website/src/components/Spinner.tsx

@@ -9,7 +9,7 @@ type SpinnerProps = {
  */
 export const Spinner = component$<SpinnerProps>((props) => (
   <span
-    class="h-5 w-5 animate-spin rounded-full border-t-2 border-r-2 border-t-current border-r-transparent md:h-[22px] md:w-[22px] md:border-t-[2.5px] md:border-r-[2.5px] lg:h-6 lg:w-6"
+    class="h-5 w-5 animate-spin rounded-full border-r-2 border-t-2 border-r-transparent border-t-current md:h-[22px] md:w-[22px] md:border-r-[2.5px] md:border-t-[2.5px] lg:h-6 lg:w-6"
     aria-label={props.label || 'Loading'}
   />
 ));

website/src/components/TextLink.tsx

@@ -16,7 +16,7 @@ export const TextLink = component$<TextLinkProps>(
     return (
       <UnstyledButton
         class={clsx(
-          'focus-ring rounded focus-visible:ring-offset-[6px] focus-visible:outline-offset-4',
+          'focus-ring rounded focus-visible:outline-offset-4 focus-visible:ring-offset-[6px]',
           colored && 'text-sky-600 dark:text-sky-400',
           underlined &&
             'underline decoration-slate-400 decoration-dashed underline-offset-[3px] dark:decoration-slate-600',

website/src/hooks/useMDXComponents.tsx

@@ -26,7 +26,7 @@ const Pre = component$(() => {
 
   return (
     <div class="code-wrapper group/code relative overflow-hidden rounded-2xl border-2 border-slate-200 lg:rounded-3xl lg:border-[3px] dark:border-slate-800">
-      <div class="absolute top-5 right-5 hidden gap-5 group-hover/code:flex lg:top-10 lg:right-10">
+      <div class="absolute right-5 top-5 hidden gap-5 group-hover/code:flex lg:right-10 lg:top-10">
         <IconButton
           type="button"
           variant="secondary"

website/src/routes/(legal)/layout.tsx

@@ -1,7 +1,7 @@
 import { component$, Slot } from '@qwik.dev/core';
 
 export default component$(() => (
-  <main class="mdx flex w-full max-w-(--breakpoint-lg) flex-1 flex-col self-center py-12 md:py-20 lg:py-32">
+  <main class="mdx max-w-(--breakpoint-lg) flex w-full flex-1 flex-col self-center py-12 md:py-20 lg:py-32">
     <Slot />
   </main>
 ));

website/src/routes/404.tsx

@@ -14,7 +14,7 @@ export const head: DocumentHead = {
 };
 
 export default component$(() => (
-  <main class="flex w-full max-w-(--breakpoint-lg) flex-1 flex-col self-center py-12 md:py-20 lg:py-32">
+  <main class="max-w-(--breakpoint-lg) flex w-full flex-1 flex-col self-center py-12 md:py-20 lg:py-32">
     <div class="mdx">
       <h1>Page not found</h1>
       <p>

website/src/routes/blog/(posts)/layout.tsx

@@ -17,10 +17,10 @@ export default component$(() => {
   return (
     <main class="flex flex-1 flex-col items-center py-12 md:py-20 lg:py-28 xl:py-32">
       {/* Article */}
-      <article class="flex w-full max-w-(--breakpoint-xl) flex-col gap-12 md:gap-20 lg:gap-24">
-        <div class="mx-8 flex max-w-(--breakpoint-md) flex-col gap-5 md:items-center md:gap-7 md:self-center lg:mx-10 lg:gap-9">
+      <article class="max-w-(--breakpoint-xl) flex w-full flex-col gap-12 md:gap-20 lg:gap-24">
+        <div class="max-w-(--breakpoint-md) mx-8 flex flex-col gap-5 md:items-center md:gap-7 md:self-center lg:mx-10 lg:gap-9">
           {/* Title */}
-          <h1 class="text-2xl leading-normal font-medium text-slate-900 md:text-center md:text-3xl lg:text-4xl dark:text-slate-200">
+          <h1 class="text-2xl font-medium leading-normal text-slate-900 md:text-center md:text-3xl lg:text-4xl dark:text-slate-200">
             {head.title}
           </h1>
 
@@ -36,7 +36,7 @@ export default component$(() => {
         <PostCover variant="post" label={head.frontmatter.cover} />
 
         {/* Content */}
-        <div class="mdx flex w-full max-w-(--breakpoint-lg) flex-col lg:self-center">
+        <div class="mdx max-w-(--breakpoint-lg) flex w-full flex-col lg:self-center">
           <Slot />
 
           {/* Edit page button */}
@@ -54,7 +54,7 @@ export default component$(() => {
       </article>
 
       {/* Credits */}
-      <div class="w-full max-w-(--breakpoint-lg)">
+      <div class="max-w-(--breakpoint-lg) w-full">
         <Credits />
       </div>
     </main>

website/src/routes/blog/index.tsx

@@ -91,7 +91,7 @@ export const usePosts = routeLoader$(async () => {
 export default component$(() => {
   const posts = usePosts();
   return (
-    <main class="flex w-full max-w-(--breakpoint-lg) flex-1 flex-col gap-12 self-center py-12 md:gap-14 md:py-14 lg:gap-16 lg:py-24 xl:py-32">
+    <main class="max-w-(--breakpoint-lg) flex w-full flex-1 flex-col gap-12 self-center py-12 md:gap-14 md:py-14 lg:gap-16 lg:py-24 xl:py-32">
       <div class="mdx">
         <h1>Blog</h1>
         <p>

website/src/routes/index.tsx

@@ -37,7 +37,7 @@ export default component$(() => {
     <main class="flex flex-1 flex-col items-center gap-24 py-24 md:gap-36 md:py-36 xl:gap-52 xl:py-52">
       {/* Pitch */}
       <section class="px-4 text-center">
-        <h1 class="text-[min(5vw,30px)] leading-normal font-medium text-slate-900 md:text-[34px] lg:text-[40px] xl:text-5xl dark:text-slate-200">
+        <h1 class="text-[min(5vw,30px)] font-medium leading-normal text-slate-900 md:text-[34px] lg:text-[40px] xl:text-5xl dark:text-slate-200">
           Modular and type-safe forms
         </h1>
         <p class="mt-6 max-w-4xl leading-loose md:mt-10 md:text-[17px] lg:mt-14 lg:text-lg xl:text-2xl xl:leading-loose">
@@ -58,10 +58,10 @@ export default component$(() => {
             href="/playground/login/"
           />
         </ButtonGroup>
-        <div class="absolute top-0 left-0 -z-10 flex w-full justify-center overflow-x-clip">
+        <div class="absolute left-0 top-0 -z-10 flex w-full justify-center overflow-x-clip">
           <div class="relative w-full xl:w-0">
-            <div class="absolute -top-[250px] -right-[300px] h-[600px] w-[600px] bg-[radial-gradient(theme(--color-yellow-500/.08),transparent_70%)] md:-top-[500px] md:-right-[500px] md:h-[1000px] md:w-[1000px] xl:-top-[500px] xl:-right-[1100px] dark:bg-[radial-gradient(theme(--color-yellow-300/.08),transparent_70%)]" />
-            <div class="absolute top-[200px] -left-[370px] h-[600px] w-[600px] bg-[radial-gradient(theme(--color-sky-600/.08),transparent_70%)] md:top-[100px] md:-left-[550px] md:h-[1000px] md:w-[1000px] lg:top-[200px] xl:top-[300px] xl:-left-[1100px] dark:bg-[radial-gradient(theme(--color-sky-400/.08),transparent_70%)]" />
+            <div class="absolute -right-[300px] -top-[250px] h-[600px] w-[600px] bg-[radial-gradient(theme(--color-yellow-500/.08),transparent_70%)] md:-right-[500px] md:-top-[500px] md:h-[1000px] md:w-[1000px] xl:-right-[1100px] xl:-top-[500px] dark:bg-[radial-gradient(theme(--color-yellow-300/.08),transparent_70%)]" />
+            <div class="absolute -left-[370px] top-[200px] h-[600px] w-[600px] bg-[radial-gradient(theme(--color-sky-600/.08),transparent_70%)] md:-left-[550px] md:top-[100px] md:h-[1000px] md:w-[1000px] lg:top-[200px] xl:-left-[1100px] xl:top-[300px] dark:bg-[radial-gradient(theme(--color-sky-400/.08),transparent_70%)]" />
           </div>
         </div>
       </section>
@@ -310,7 +310,7 @@ export default component$(() => {
               <li key={heading} class="flex flex-col px-8">
                 <button
                   class={clsx(
-                    'focus-ring flex w-full justify-between gap-4 rounded-md transition-colors focus-visible:ring-offset-8 focus-visible:outline-offset-[6px]',
+                    'focus-ring flex w-full justify-between gap-4 rounded-md transition-colors focus-visible:outline-offset-[6px] focus-visible:ring-offset-8',
                     isOpen.value
                       ? 'text-sky-600 dark:text-sky-400'
                       : 'text-slate-800 hover:text-slate-700 dark:text-slate-300 hover:dark:text-slate-400'
@@ -323,7 +323,7 @@ export default component$(() => {
                     faqIndex.value = index;
                   }}
                 >
-                  <span class="text-left leading-relaxed font-medium md:text-xl lg:text-2xl">
+                  <span class="text-left font-medium leading-relaxed md:text-xl lg:text-2xl">
                     {heading}
                   </span>
                   <PlusIcon