Inertia v2

.changeset/fine-papayas-agree.md

@@ -0,0 +1,5 @@
+---
+"inertia-adapter-solid": minor
+---
+
+enhancement(components): Implement `<Deferred />` component

.changeset/fresh-drinks-follow.md

@@ -0,0 +1,5 @@
+---
+"inertia-adapter-solid": minor
+---
+
+enhancement(components): Implement `<WhenVisible />` component

.changeset/olive-owls-play.md

@@ -0,0 +1,5 @@
+---
+"inertia-adapter-solid": minor
+---
+
+enhancement(util): Implement `usePoll()` utility

.changeset/proud-rice-notice.md

@@ -0,0 +1,5 @@
+---
+"inertia-adapter-solid": minor
+---
+
+enhancement(util): Implement `usePrefetch()` utility

.changeset/swift-ads-press.md

@@ -0,0 +1,5 @@
+---
+"inertia-adapter-solid": minor
+---
+
+enhancement: Upgrade @inertiajs/core to v2

README.md

@@ -235,7 +235,7 @@ Actually, the fix is really simple. Add the following to your `tsconfig.json` fi
 {
   "compilerOptions": {
     "jsx": "preserve",
-    "jsxImportSource": "solid-js",
+    "jsxImportSource": "solid-js"
   }
 }
 ```

package.json

@@ -37,7 +37,7 @@
     "prepublish": "pnpm build"
   },
   "dependencies": {
-    "@inertiajs/core": "^1.3.0",
+    "@inertiajs/core": "^2.2.8",
     "@solid-primitives/deep": "^0.3.3",
     "es-toolkit": "^1.40.0"
   },
@@ -46,8 +46,8 @@
     "@changesets/changelog-git": "^0.2.1",
     "@changesets/cli": "^2.29.7",
     "@solidjs/meta": "^0.29.4",
-    "@types/node": "^20.19.20",
-    "esbuild": "^0.20.2",
+    "@types/node": "^24.7.1",
+    "esbuild": "^0.25.10",
     "esbuild-node-externals": "^1.18.0",
     "solid-js": "^1.9.9",
     "typescript": "^5.9.3"

playground/Components/MainLayout.jsx

@@ -13,10 +13,32 @@ export default function MainLayout(props) {
               <Link href="/preserve-state">Preserve State</Link>
             </li>
             <li>
-              <Link href="/use-remember">UseRemember</Link>
+              Components
+              <ul>
+                <li>
+                  <Link href="/components/deferred">Deferred</Link>
+                </li>
+                <li>
+                  <Link href="/components/when-visible">WhenVisible</Link>
+                </li>
+              </ul>
             </li>
             <li>
-              <Link href="/use-form">UseForm</Link>
+              Utilities
+              <ul>
+                <li>
+                  <Link href="/utilities/use-form">UseForm</Link>
+                </li>
+                <li>
+                  <Link href="/utilities/use-poll">UsePoll</Link>
+                </li>
+                <li>
+                  <Link href="/utilities/use-prefetch">UsePrefetch</Link>
+                </li>
+                <li>
+                  <Link href="/utilities/use-remember">UseRemember</Link>
+                </li>
+              </ul>
             </li>
             <li>
               Layouts

playground/Pages/Components/Deferred.jsx

@@ -0,0 +1,30 @@
+import MainLayout from '@/Components/MainLayout'
+import { Deferred } from 'inertia-adapter-solid'
+import { For, Show } from 'solid-js'
+
+export default function DeferredTest(props) {
+  return (
+    <>
+      <div>
+        <h3>Inertia's &lt;Deferred /&gt; component</h3>
+        <Deferred data={['messages', 'users']} fallback={<p>Loading "deferred" users and messages...</p>}>
+          <ul>
+            <For each={props.messages}>{(message) => <li>{message}</li>}</For>
+            <For each={props.users}>{(user) => <li>{user.name}</li>}</For>
+          </ul>
+        </Deferred>
+      </div>
+
+      <div>
+        <h3>Compatibility with &lt;Show /&gt; component</h3>
+        <Show when={props.users} fallback={<p>Loading "deferred" users...</p>}>
+          <ul>
+            <For each={props.users}>{(user) => <li>{user.name}</li>}</For>
+          </ul>
+        </Show>
+      </div>
+    </>
+  )
+}
+
+DeferredTest.layout = MainLayout

playground/Pages/Components/WhenVisible.jsx

@@ -0,0 +1,36 @@
+import MainLayout from '@/Components/MainLayout'
+import { WhenVisible } from 'inertia-adapter-solid'
+import { For } from 'solid-js'
+
+export default function WhenVisibleTest(props) {
+  return (
+    <>
+      <ul>
+        <For each={[...Array(20).keys()]}>{(item) => <li>{'↓'.repeat(item)}</li>}</For>
+      </ul>
+      <WhenVisible data={['messages', 'users']} always buffer={100} fallback={<div>Loading...</div>}>
+        <>
+          <div>
+            <p>Messages</p>
+            <ul>
+              <For each={props.messages} fallback={<div>No messages</div>}>
+                {(message) => <li>{message}</li>}
+              </For>
+            </ul>
+          </div>
+
+          <div>
+            <p>Users</p>
+            <ul>
+              <For each={props.users} fallback={<div>No users</div>}>
+                {(user) => <li>{user.name}</li>}
+              </For>
+            </ul>
+          </div>
+        </>
+      </WhenVisible>
+    </>
+  )
+}
+
+WhenVisibleTest.layout = MainLayout

playground/Pages/Util/UsePoll.jsx

@@ -0,0 +1,10 @@
+import MainLayout from '@/Components/MainLayout'
+import { usePoll } from 'inertia-adapter-solid'
+
+export default function UsePoll(props) {
+  const { start, stop } = usePoll(5_000)
+
+  return <div>Date: {props.now}</div>
+}
+
+UsePoll.layout = MainLayout

playground/app.jsx

@@ -5,7 +5,14 @@ import { render } from 'solid-js/web'
 await server.start()
 
 createInertiaApp({
-  page: await (await fetch(window.location.href)).json(),
+  page: await (
+    await fetch(window.location.href, {
+      headers: {
+        'X-Inertia': true,
+        Accept: 'application/json',
+      },
+    })
+  ).json(),
   resolve(name) {
     const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
     return pages[`./Pages/${name}.jsx`]

playground/package.json

@@ -8,11 +8,12 @@
   "license": "ISC",
   "packageManager": "pnpm@10.12.4",
   "devDependencies": {
-    "@inertiajs/core": "^1.3.0",
+    "@antennajs/core": "2.0.0-beta.1",
     "inertia-adapter-solid": "workspace:*",
     "msw": "^2.11.5",
     "solid-js": "^1.9.9",
-    "vite": "^6.3.6",
+    "type-fest": "^5.1.0",
+    "vite": "^6.4.0",
     "vite-plugin-solid": "^2.11.9"
   },
   "msw": {

playground/public/mockServiceWorker.js

@@ -7,8 +7,8 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.10.4'
-const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const PACKAGE_VERSION = '2.11.5'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -71,11 +71,6 @@ addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
@@ -94,6 +89,8 @@ addEventListener('message', async function (event) {
 })
 
 addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return
@@ -110,23 +107,29 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event, requestId, requestInterceptedAt) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(event, client, requestId)
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -202,9 +205,10 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId) {
+async function getResponse(event, client, requestId, requestInterceptedAt) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
@@ -255,6 +259,7 @@ async function getResponse(event, client, requestId) {
       type: 'REQUEST',
       payload: {
         id: requestId,
+        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },

playground/server/Inertia.ts

@@ -1,66 +1,42 @@
-import { HttpResponse } from 'msw'
-
-function objectFilter<TObject>(obj: TObject, predicate: (entry: [string, unknown]) => boolean): object {
-  return Object.fromEntries(
-    Object.entries(obj)
-      // @ts-ignore
-      .filter(predicate),
-  )
+import { Inertia, type InertiaSharedProps } from '@antennajs/core'
+import type { AlwaysProp, DeferProp, LazyProp, MergeProp, OptionalProp, ScrollProp } from '@antennajs/core/dist/props'
+import type { ProvidesScrollMetadata } from '@antennajs/core/dist/scroll'
+import type { InertiaPrimitive, MaybeResolvable, Resolvable } from '@antennajs/core/dist/types'
+import type { Promisable } from 'type-fest'
+import html from '../index.html?raw'
+
+type InertiaMswAdapter = Omit<Inertia, 'render'> & {
+  render(request: Request, component: string, props?: InertiaSharedProps): Promise<Response>
+
+  // Fixes static methods not being available
+  lazy<TValue extends InertiaPrimitive>(callback: Resolvable<TValue>): LazyProp<TValue>
+  optional<TValue extends InertiaPrimitive>(callback: Resolvable<TValue>): OptionalProp<TValue>
+  defer<TValue extends InertiaPrimitive>(callback: Resolvable<TValue>, group?: string): DeferProp<TValue>
+  merge<TValue extends InertiaPrimitive>(value: MaybeResolvable<TValue>): MergeProp<TValue>
+  deepMerge<TValue extends InertiaPrimitive>(value: MaybeResolvable<TValue>): MergeProp<TValue>
+  always<TValue extends InertiaPrimitive>(value: MaybeResolvable<TValue>): AlwaysProp<TValue>
+  scroll<TValue extends InertiaPrimitive>(
+    value: MaybeResolvable<TValue>,
+    wrapper?: string,
+    metadata?: ProvidesScrollMetadata | ((value: Promisable<TValue>) => ProvidesScrollMetadata),
+  ): ScrollProp<TValue>
+  location(request: Request, url: string | URL): Response
 }
 
-class LazyProp<TValue = unknown> {
-  public constructor(protected callback: () => TValue) {}
-
-  public resolve(): TValue {
-    return this.callback()
-  }
-}
-
-async function resolvePropertyInstances(props: object | unknown[]) {
-  for (let [key, value] of Object.entries(props)) {
-    if (typeof value === 'function') {
-      value = value()
-    }
-
-    if (value instanceof LazyProp) {
-      value = value.resolve()
-    }
+export default new Proxy<InertiaMswAdapter>(
+  // @ts-ignore
+  {},
+  {
+    get(_, property, receiver) {
+      if (Reflect.has(Inertia, property)) {
+        return Reflect.get(Inertia, property, receiver)
+      }
 
-    // In case value is a Promise, otherwise, it resolves instantly
-    value = await Promise.resolve(value)
+      const inertia = new Inertia()
 
-    if (typeof value === 'object' && value !== null) {
-      value = await resolvePropertyInstances(value)
-    }
+      inertia.setView(() => html)
 
-    props[key] = value
-  }
-
-  return props
-}
-
-export default {
-  async render(request: Request, component: string, props: Record<string, unknown> = {}, version?: string) {
-    const only = (request.headers.get('X-Inertia-Partial-Data') ?? '').split(',').filter(Boolean)
-
-    return HttpResponse.json(
-      {
-        component,
-        props: await resolvePropertyInstances(
-          only && request.headers.get('X-Inertia-Partial-Component') === component
-            ? objectFilter(props, ([key]) => only.includes(key))
-            : objectFilter(props, ([, value]) => !(value instanceof LazyProp)),
-        ),
-        url: request.url,
-        version,
-      },
-      {
-        status: 200,
-        headers: {
-          'X-Inertia': 'true',
-          'Content-Type': 'application/json',
-        },
-      },
-    )
+      return Reflect.get(inertia, property, receiver)
+    },
   },
-}
+)