brustjs 0.1.29-alpha → 0.1.31-alpha

package/example/pokedex/components/AddToTeamButton.tsx

@@ -12,29 +12,20 @@ import { Plus } from 'lucide-react'
 import { client } from 'brustjs/client'
 import { computed, signal } from 'brustjs/store'
 import type { Actions } from '../actions'
-import type { TeamMember } from '../lib/types'
+import type { AddTeamProps, TeamMember } from '../lib/types'
 import { teamStore } from '../stores/team'
 
 const api = client<Actions>()
 
-interface AddToTeamProps {
-  id: number
-  name: string
-  displayName: string
-  num: string
-  types: string[]
-  artwork: string
-}
-
 const BASE =
   'inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-600 disabled:opacity-50'
 const IN_TEAM =
   'inline-flex w-full items-center justify-center rounded-lg bg-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-colors disabled:opacity-50 dark:bg-slate-700 dark:text-slate-100'
 
 // behavior → client bundle, registered as "addToTeamButton" (camelCase filename).
-// `props` is the JSON parsed out of the element's x-props attribute (precomputed
-// by the loader as a JSON string — native templates can't call JSON.stringify).
-export const behavior = ({ props }: { props: AddToTeamProps }) => {
+// `props` is the object parsed out of the element's x-props attribute (the
+// compiler serializes the loader's structured object via `json_attr`).
+export const behavior = ({ props }: { props: AddTeamProps }) => {
   const busy = signal(false)
   const full = signal(false)
   const inTeam = computed(() =>
@@ -83,9 +74,9 @@ export const behavior = ({ props }: { props: AddToTeamProps }) => {
 
 // default → jinja (server). The x-* directives are static string attributes the
 // native compiler passes straight through; the directive runtime binds them to
-// the behavior instance on the client. `data` is the loader-precomputed JSON
-// string, emitted by the compiler as x-props="{{ (data) | e }}" (XSS-safe).
-export default function AddToTeamButton({ data }: { data: string }) {
+// the behavior instance on the client. `data` is the loader's structured object,
+// emitted by the compiler as x-props="{{ (data) | json_attr }}" (XSS-safe).
+export default function AddToTeamButton({ data }: { data: AddTeamProps }) {
   return (
     <div x-data="addToTeamButton" x-props={data} className="relative">
       <Plus

package/example/pokedex/components/DexFilter.tsx

@@ -20,25 +20,39 @@ interface Card {
 }
 
 export const behavior = ({ props }: { el: HTMLElement; props: unknown }) => {
-  const all = ((props as { items?: Card[] })?.items ?? []) as Card[]
+  const all = ((props as Card[]) ?? []) as Card[]
+  const items = signal(all) // seeded to the SAME data as the SSR {% for %}
   const q = signal('')
   const sortAz = signal(false)
-  const filtered = computed(() => {
+  const apply = () => {
     const needle = q().trim().toLowerCase()
     let out = needle ? all.filter((c) => c.name.includes(needle)) : all.slice()
     if (sortAz()) out = out.slice().sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
-    return out
-  })
-  const onInput = (e: Event) => q.set((e.target as HTMLInputElement).value)
-  const setDex = () => sortAz.set(false)
-  const setAz = () => sortAz.set(true)
-  const countLabel = computed(() => `${filtered().length} / ${all.length}`)
-  return { q, sortAz, filtered, onInput, setDex, setAz, countLabel }
+    items.set(out)
+  }
+  const onInput = (e: Event) => {
+    q.set((e.target as HTMLInputElement).value)
+    apply()
+  }
+  const setDex = () => {
+    sortAz.set(false)
+    apply()
+  }
+  const setAz = () => {
+    sortAz.set(true)
+    apply()
+  }
+  const countLabel = computed(() => `${items().length} / ${all.length}`)
+  return { items, q, sortAz, onInput, setDex, setAz, countLabel }
 }
 
-export default function DexFilter({ data }: { data?: string }) {
+// `items` (the loader array) feeds BOTH the SSR list AND the client behavior: the
+// idiomatic `.map()` + bare `x-for` desugars to the `{% for c in items %}` adopt
+// seed, and `x-props={items}` serializes the SAME array (json_attr) into the
+// behavior's props — one prop, no separate pre-stringified `dexProps`.
+export default function DexFilter({ items }: { items: Card[] }) {
   return (
-    <section x-data="dexFilter" x-props={data}>
+    <section x-data="dexFilter" x-props={items}>
       <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="relative w-full sm:max-w-xs">
           <Search
@@ -80,28 +94,27 @@ export default function DexFilter({ data }: { data?: string }) {
       </div>
 
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-        {/* biome-ignore lint/a11y/useValidAnchor: href is bound at hydration via x-bind-href (the template clone gets c.detailHref) */}
-        <a
-          x-for="c in filtered by c.id"
-          x-bind-href="c.detailHref"
-          className="group flex flex-col items-center rounded-2xl border border-slate-200 bg-white p-3 no-underline shadow-sm transition-all hover:-translate-y-0.5 hover:border-brand-500/50 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
-        >
-          <span
-            x-text="c.num"
-            className="self-start text-[11px] font-semibold tabular-nums text-slate-400"
-          />
-          {/* biome-ignore lint/a11y/useAltText: alt is bound at hydration via x-bind-alt (c.displayName) */}
-          <img
-            x-bind-src="c.artwork"
-            x-bind-alt="c.displayName"
-            loading="lazy"
-            className="h-24 w-24 object-contain transition-transform group-hover:scale-110"
-          />
-          <div
-            x-text="c.displayName"
-            className="mt-1 text-sm font-semibold text-slate-800 dark:text-slate-100"
-          />
-        </a>
+        {items.map((c) => (
+          <a
+            x-for
+            key={c.id}
+            href={c.detailHref}
+            className="group flex flex-col items-center rounded-2xl border border-slate-200 bg-white p-3 no-underline shadow-sm transition-all hover:-translate-y-0.5 hover:border-brand-500/50 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
+          >
+            <span className="self-start text-[11px] font-semibold tabular-nums text-slate-400">
+              {c.num}
+            </span>
+            <img
+              src={c.artwork}
+              alt={c.displayName}
+              loading="lazy"
+              className="h-24 w-24 object-contain transition-transform group-hover:scale-110"
+            />
+            <div className="mt-1 text-sm font-semibold text-slate-800 dark:text-slate-100">
+              {c.displayName}
+            </div>
+          </a>
+        ))}
       </div>
     </section>
   )

package/example/pokedex/lib/loaders.ts

@@ -91,7 +91,7 @@ export async function browseLoader({ req }: LoaderCtx): Promise<BrowseData> {
   }))
   return {
     ...chrome(req, 'Pokédex · Browse', 'Pokédex'),
-    dexProps: JSON.stringify({ items }),
+    items,
   }
 }
 
@@ -181,16 +181,16 @@ export async function detailLoader({
     hasAbilities: abilities.length > 0,
     evolution,
     hasEvolution: evolution.length > 1,
-    // Native templates can't call JSON.stringify, so precompute the x-props JSON
-    // here. AddToTeamButton's prop contract is unchanged.
-    addProps: JSON.stringify({
+    // The compiler serializes this structured object into AddToTeamButton's
+    // x-props via `json_attr`; the behavior receives it as a parsed object.
+    addProps: {
       id: p.id,
       name: p.name,
       displayName: cap(p.name),
       num: pad(p.id),
       types: p.types,
       artwork: p.artwork,
-    }),
+    },
   }
 }
 
@@ -216,14 +216,14 @@ function emptyDetail(req: BrustRequest, name: string): DetailData {
     hasAbilities: false,
     evolution: [],
     hasEvolution: false,
-    addProps: JSON.stringify({
+    addProps: {
       id: 0,
       name,
       displayName: cap(name),
       num: '',
       types: [],
       artwork: '',
-    }),
+    },
   }
 }
 

package/example/pokedex/lib/types.ts

@@ -84,10 +84,23 @@ export interface HomeData extends ChromeData {
   typeTiles: TypeTileVM[]
 }
 
-/** Browse (dex grid) page data. `dexProps` is the loader-precomputed JSON
- *  string handed to the DexFilter native directive (gen-1 grid, keyed x-for). */
+/** Browse (dex grid) page data. `items` feeds BOTH the SSR `{% for %}` and the
+ *  DexFilter directive's `x-props` (json_attr-serialized) — one array, no separate
+ *  pre-stringified JSON. */
 export interface BrowseData extends ChromeData {
-  dexProps: string
+  items: DexCard[] // SSR {% for %} source + serialized x-props (one prop)
+}
+
+/** The structured x-props payload for the AddToTeamButton native directive. The
+ *  compiler serializes it via `json_attr`; the behavior reads it as an object.
+ *  `types` mirrors the loader's raw `p.types` (string keys). */
+export interface AddTeamProps {
+  id: number
+  name: string
+  displayName: string
+  num: string
+  types: string[]
+  artwork: string
 }
 
 /** Detail page data. Every formatted string / className / inline-style value /
@@ -112,7 +125,7 @@ export interface DetailData extends ChromeData {
   hasAbilities: boolean
   evolution: EvoStageVM[]
   hasEvolution: boolean
-  addProps: string // loader-precomputed x-props JSON for AddToTeamButton
+  addProps: AddTeamProps // structured x-props for AddToTeamButton (json_attr-serialized)
 }
 
 /** One cell of the type chart. */

package/example/pokedex/pages/BrowsePage.tsx

@@ -1,14 +1,15 @@
 // Native leaf route "/pokedex" — the dex grid. Renders into AppLayout's
 // <Outlet/> slot (chrome lives in AppLayout). SINGLE return, NO local bindings.
 //
-// The grid itself is the DexFilter native directive: the loader precomputes the
-// full gen-1 item list as the `dexProps` JSON string, handed to DexFilter via
-// the native `data` prop → emitted as x-props. DexFilter owns search/sort and
-// the keyed x-for reconcile.
+// The grid itself is the DexFilter native directive. The loader provides the
+// gen-1 item list ONCE as `items` (the array): it feeds the SSR `{% for c in items %}`
+// seed (151 cards paint server-side) AND `x-props={items}` (json_attr-serialized for
+// the behavior). DexFilter seeds a signal from props + owns search/sort + the keyed
+// x-for reconcile that adopts the SSR'd nodes.
 import DexFilter from '../components/DexFilter'
 import type { BrowseData } from '../lib/types'
 
-export default function BrowsePage({ dexProps }: BrowseData) {
+export default function BrowsePage({ items }: BrowseData) {
   return (
     <section className="py-2">
       <div className="mb-6">
@@ -24,7 +25,7 @@ export default function BrowsePage({ dexProps }: BrowseData) {
           , no full re-render.
         </p>
       </div>
-      <DexFilter native data={dexProps} />
+      <DexFilter native items={items} />
     </section>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brustjs",
-  "version": "0.1.29-alpha",
+  "version": "0.1.31-alpha",
   "description": "Bun + Rust SSR framework — React on the server, Rust everywhere else (napi cdylib + per-worker SharedArrayBuffer).",
   "license": "MIT",
   "repository": {
@@ -40,12 +40,12 @@
     "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "brustjs-darwin-x64": "0.1.29-alpha",
-    "brustjs-darwin-arm64": "0.1.29-alpha",
-    "brustjs-linux-x64-gnu": "0.1.29-alpha",
-    "brustjs-linux-arm64-gnu": "0.1.29-alpha",
-    "brustjs-linux-x64-musl": "0.1.29-alpha",
-    "brustjs-linux-arm64-musl": "0.1.29-alpha"
+    "brustjs-darwin-x64": "0.1.31-alpha",
+    "brustjs-darwin-arm64": "0.1.31-alpha",
+    "brustjs-linux-x64-gnu": "0.1.31-alpha",
+    "brustjs-linux-arm64-gnu": "0.1.31-alpha",
+    "brustjs-linux-x64-musl": "0.1.31-alpha",
+    "brustjs-linux-arm64-musl": "0.1.31-alpha"
   },
   "peerDependencies": {
     "react": "^19.2.6",

package/runtime/index.js

@@ -77,8 +77,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm64')
         const bindingPackageVersion = require('brustjs-android-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -93,8 +93,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-android-arm-eabi')
         const bindingPackageVersion = require('brustjs-android-arm-eabi/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -114,8 +114,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-gnu')
         const bindingPackageVersion = require('brustjs-win32-x64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -130,8 +130,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-x64-msvc')
         const bindingPackageVersion = require('brustjs-win32-x64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -147,8 +147,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-ia32-msvc')
         const bindingPackageVersion = require('brustjs-win32-ia32-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -163,8 +163,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-win32-arm64-msvc')
         const bindingPackageVersion = require('brustjs-win32-arm64-msvc/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -182,8 +182,8 @@ function requireNative() {
     try {
       const binding = require('brustjs-darwin-universal')
       const bindingPackageVersion = require('brustjs-darwin-universal/package.json').version
-      if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-        throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+      if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+        throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
       }
       return binding
     } catch (e) {
@@ -198,8 +198,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-x64')
         const bindingPackageVersion = require('brustjs-darwin-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -214,8 +214,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-darwin-arm64')
         const bindingPackageVersion = require('brustjs-darwin-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -234,8 +234,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-x64')
         const bindingPackageVersion = require('brustjs-freebsd-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -250,8 +250,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-freebsd-arm64')
         const bindingPackageVersion = require('brustjs-freebsd-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -271,8 +271,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-musl')
           const bindingPackageVersion = require('brustjs-linux-x64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -287,8 +287,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-x64-gnu')
           const bindingPackageVersion = require('brustjs-linux-x64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -305,8 +305,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-musl')
           const bindingPackageVersion = require('brustjs-linux-arm64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -321,8 +321,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm64-gnu')
           const bindingPackageVersion = require('brustjs-linux-arm64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -339,8 +339,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-musleabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-musleabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -355,8 +355,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-arm-gnueabihf')
           const bindingPackageVersion = require('brustjs-linux-arm-gnueabihf/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -373,8 +373,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-musl')
           const bindingPackageVersion = require('brustjs-linux-loong64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -389,8 +389,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-loong64-gnu')
           const bindingPackageVersion = require('brustjs-linux-loong64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -407,8 +407,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-musl')
           const bindingPackageVersion = require('brustjs-linux-riscv64-musl/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -423,8 +423,8 @@ function requireNative() {
         try {
           const binding = require('brustjs-linux-riscv64-gnu')
           const bindingPackageVersion = require('brustjs-linux-riscv64-gnu/package.json').version
-          if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-            throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+          if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+            throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
           }
           return binding
         } catch (e) {
@@ -440,8 +440,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-ppc64-gnu')
         const bindingPackageVersion = require('brustjs-linux-ppc64-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -456,8 +456,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-linux-s390x-gnu')
         const bindingPackageVersion = require('brustjs-linux-s390x-gnu/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -476,8 +476,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm64')
         const bindingPackageVersion = require('brustjs-openharmony-arm64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -492,8 +492,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-x64')
         const bindingPackageVersion = require('brustjs-openharmony-x64/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {
@@ -508,8 +508,8 @@ function requireNative() {
       try {
         const binding = require('brustjs-openharmony-arm')
         const bindingPackageVersion = require('brustjs-openharmony-arm/package.json').version
-        if (bindingPackageVersion !== '0.1.29-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
-          throw new Error(`Native binding package version mismatch, expected 0.1.29-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
+        if (bindingPackageVersion !== '0.1.31-alpha' && process.env.NAPI_RS_ENFORCE_VERSION_CHECK && process.env.NAPI_RS_ENFORCE_VERSION_CHECK !== '0') {
+          throw new Error(`Native binding package version mismatch, expected 0.1.31-alpha but got ${bindingPackageVersion}. You can reinstall dependencies to fix this issue.`)
         }
         return binding
       } catch (e) {

package/runtime/native/runtime.ts

@@ -183,6 +183,11 @@ interface ForEntry {
   disposers: Array<() => void>
 }
 
+// One x-for mount per (parent, listPath): the SSR seed renders N sibling nodes
+// each carrying x-for, and bindTree's parent loop visits every one — without this
+// guard, bindFor would mount the list N times.
+const forMountGuard = new WeakMap<Node, Set<string>>()
+
 // `x-for="item in member"` — the element is the template. Replace it with a comment
 // anchor. Without a `by` key clause this is a full re-render on each list change
 // (legacy v1, now with optional plain index). With `by <keypath>...` it is an opt-in
@@ -197,6 +202,27 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
   const { itemName, indexName, listPath, keyPaths } = expr
   const parent = tplEl.parentNode
   if (!parent) return
+
+  // Idempotency: the SSR seed renders N sibling x-for nodes; bindTree's parent loop
+  // visits each. Mount the list ONCE per (parent, listPath); later siblings no-op.
+  let mountedSet = forMountGuard.get(parent)
+  if (!mountedSet) {
+    mountedSet = new Set()
+    forMountGuard.set(parent, mountedSet)
+  }
+  if (mountedSet.has(listPath)) return
+  mountedSet.add(listPath)
+  disposers.push(() => mountedSet?.delete(listPath)) // re-mount (SPA nav) works again
+
+  // ---- SSR adopt: keyed x-for whose seed nodes were server-rendered ----
+  if (keyPaths) {
+    const seeds = collectSeeds(parent, keyPaths, tplEl.getAttribute('x-for') ?? '')
+    if (seeds.length > 0) {
+      bindForAdopt(seeds, instance, parent, expr, disposers)
+      return
+    }
+  }
+
   const anchor = tplEl.ownerDocument.createComment(`x-for:${itemName}`)
   parent.insertBefore(anchor, tplEl)
   tplEl.removeAttribute('x-for')
@@ -237,8 +263,25 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
     return
   }
 
-  // ---- keyed reconcile ----
-  let map = new Map<string, ForEntry>()
+  // ---- keyed reconcile (client-only x-for: no SSR seed) ----
+  installKeyedReconcile(instance, parent, expr, template, anchor, new Map(), disposers)
+}
+
+/** The 0.1.28 keyed reconcile, parameterized by an INITIAL `map` (empty for a
+ *  client-only x-for; pre-populated with adopted SSR seeds for an SSR-seeded one)
+ *  and a `template`/`anchor` already derived by the caller. */
+function installKeyedReconcile(
+  instance: Instance,
+  parent: Node,
+  expr: ForExpr,
+  template: HTMLElement,
+  anchor: Comment,
+  initialMap: Map<string, ForEntry>,
+  disposers: Array<() => void>,
+): void {
+  const { itemName, indexName, listPath, keyPaths } = expr
+  const keys = keyPaths as string[] // keyed path → always defined
+  let live = initialMap
   const disposeEntry = (e: ForEntry) => {
     for (const d of e.disposers.splice(0)) {
       try {
@@ -256,25 +299,21 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
       const next = new Map<string, ForEntry>()
       for (let i = 0; i < arr.length; i++) {
         const item = arr[i]
-        const probe: Instance = { [itemName]: item } // plain scope for key extraction
+        const probe: Instance = { [itemName]: item }
         if (indexName) probe[indexName] = i
-        // resolveRaw (NOT read): never calls signal getters → the reconcile effect
-        // tracks ONLY the list signal, even if a list item nests a signal on a key
-        // path. Keys are plain identity data by contract; this just makes the
-        // no-self-retrigger invariant hold unconditionally.
-        let key = keyPaths.map((p) => String(resolveRaw(probe, p))).join('\x00')
+        let key = keys.map((p) => String(resolveRaw(probe, p))).join('\x00')
         if (next.has(key)) {
           console.warn(`[brust] duplicate x-for key "${key}"`)
           key = `${key}\x00#${i}`
         }
-        const existing = map.get(key)
+        const existing = live.get(key)
         if (existing) {
           batch(() => {
             existing.itemSig.set(item)
             existing.idxSig?.set(i)
           })
-          parent.insertBefore(existing.node, anchor) // move into new order
-          map.delete(key)
+          parent.insertBefore(existing.node, anchor)
+          live.delete(key)
           next.set(key, existing)
         } else {
           const clone = template.cloneNode(true) as HTMLElement
@@ -289,17 +328,122 @@ function bindFor(tplEl: HTMLElement, instance: Instance, disposers: Array<() =>
           next.set(key, { node: clone, itemSig, idxSig, disposers: entryDisposers })
         }
       }
-      for (const e of map.values()) disposeEntry(e) // not reused this pass → gone
-      map = next
+      for (const e of live.values()) disposeEntry(e)
+      live = next
     }),
   )
-  // component-unmount teardown of all live entries (mirrors legacy `clear`)
   disposers.push(() => {
-    for (const e of map.values()) disposeEntry(e)
-    map.clear()
+    for (const e of live.values()) disposeEntry(e)
+    live.clear()
   })
 }
 
+/** Direct-child seed nodes of THIS x-for (matched by the identical compiled
+ *  `x-for` string) carrying the SSR key attr (single `data-x-key`, composite
+ *  `data-x-key-0`). Only direct children — the key attr lives on the for-item
+ *  root, never a descendant. The x-for match prevents a sibling x-for list under
+ *  the same parent from having its seeds consumed by this one. */
+function collectSeeds(parent: Node, keyPaths: string[], xforRaw: string): HTMLElement[] {
+  const sel = keyPaths.length > 1 ? '[data-x-key-0]' : '[data-x-key]'
+  const out: HTMLElement[] = []
+  for (const c of Array.from((parent as Element).children ?? [])) {
+    if (c instanceof HTMLElement && c.matches(sel) && c.getAttribute('x-for') === xforRaw) {
+      out.push(c)
+    }
+  }
+  return out
+}
+
+/** The seed's key from markup — must match the reconcile's computed key (single
+ *  `data-x-key`, OR `data-x-key-*` joined with `\x00` IN JS — NUL never in HTML). */
+function seedKey(node: HTMLElement, keyPaths: string[]): string {
+  if (keyPaths.length > 1) {
+    return keyPaths.map((_, i) => node.getAttribute(`data-x-key-${i}`) ?? '').join('\x00')
+  }
+  return node.getAttribute('data-x-key') ?? ''
+}
+
+function stripKeyAttrs(el: HTMLElement, keyPaths: string[]): void {
+  if (keyPaths.length > 1) {
+    for (let i = 0; i < keyPaths.length; i++) el.removeAttribute(`data-x-key-${i}`)
+  } else {
+    el.removeAttribute('data-x-key')
+  }
+}
+
+/** Bind an adopted seed node as a plain subtree. The node KEEPS its x-for attr so
+ *  the parent bindTree loop's later re-visit routes back to bindFor → mount guard
+ *  no-ops; do NOT route the node itself through bindFor again here. */
+function bindAdoptedNode(node: HTMLElement, scope: Instance, disposers: Array<() => void>): void {
+  bindAttrs(node, scope, disposers)
+  for (const child of Array.from(node.children)) {
+    if (!(child instanceof HTMLElement)) continue
+    if (child.hasAttribute('x-data')) continue
+    bindTree(child, scope, disposers)
+  }
+}
+
+/** Adopt SSR-seeded keyed x-for: reuse the seed nodes (identity preserved), seed
+ *  each item-signal from the matching client item by key, wire reactivity, then
+ *  hand the pre-populated map to the shared reconcile (first run = all reused). */
+function bindForAdopt(
+  seeds: HTMLElement[],
+  instance: Instance,
+  parent: Node,
+  expr: ForExpr,
+  disposers: Array<() => void>,
+): void {
+  const { itemName, indexName, listPath, keyPaths } = expr
+  // Static fallback: a sugar-marked (or hand-written) x-for whose list has NO
+  // backing signal on the instance must NOT reconcile — installKeyedReconcile would
+  // wipe the SSR seeds on its first (empty-list) tick. resolveRaw returns the signal
+  // OBJECT for a registered signal (truthy); undefined only when truly absent.
+  if (resolveRaw(instance, listPath) == null) {
+    return // leave the SSR seed nodes exactly as rendered (fully static)
+  }
+  const keys = keyPaths as string[]
+  // template for future creates: stripped clone of the first seed.
+  const template = seeds[0].cloneNode(true) as HTMLElement
+  template.removeAttribute('x-for')
+  stripKeyAttrs(template, keys)
+  // anchor AFTER the last seed so future inserts keep document order.
+  const last = seeds[seeds.length - 1]
+  const anchor = last.ownerDocument.createComment(`x-for:${itemName}`)
+  parent.insertBefore(anchor, last.nextSibling)
+  // index the client list by key (same computation as the reconcile).
+  const list = read(instance, listPath)
+  const arr = Array.isArray(list) ? list : []
+  const byKey = new Map<string, { item: unknown; idx: number }>()
+  for (let i = 0; i < arr.length; i++) {
+    const probe: Instance = { [itemName]: arr[i] }
+    if (indexName) probe[indexName] = i
+    const k = keys.map((p) => String(resolveRaw(probe, p))).join('\x00')
+    if (!byKey.has(k)) byKey.set(k, { item: arr[i], idx: i })
+  }
+  // adopt each seed in place.
+  const map = new Map<string, ForEntry>()
+  for (let si = 0; si < seeds.length; si++) {
+    const node = seeds[si] as HTMLElement
+    let key = seedKey(node, keys)
+    if (map.has(key)) {
+      // mirror the reconcile's dup-key handling: suffix so the entry is tracked
+      // (and disposed on the first reconcile, since no client item matches it).
+      console.warn(`[brust] duplicate x-for seed key "${key}"`)
+      key = `${key}\x00#${si}`
+    }
+    const match = byKey.get(key)
+    const itemSig = signal(match ? match.item : undefined)
+    const idxSig = indexName ? signal(match ? match.idx : 0) : undefined
+    const childScope: Instance = Object.create(instance)
+    childScope[itemName] = itemSig
+    if (indexName && idxSig) childScope[indexName] = idxSig
+    const entryDisposers: Array<() => void> = []
+    bindAdoptedNode(node, childScope, entryDisposers)
+    map.set(key, { node, itemSig, idxSig, disposers: entryDisposers })
+  }
+  installKeyedReconcile(instance, parent, expr, template, anchor, map, disposers)
+}
+
 function bindAttrs(el: HTMLElement, scope: Instance, disposers: Array<() => void>): void {
   for (const attr of Array.from(el.attributes)) {
     const name = attr.name