fix(internal): temp fix for array management

@mizu/internal/engine/renderer.ts

@@ -439,15 +439,15 @@ export class Renderer {
   }
 
   /** Watched {@linkcode Context}s. */
-  readonly #watched = new WeakMap<Context, WeakMap<HTMLElement | Comment, { properties: Set<string>; _get: Nullable<callback>; _set: Nullable<callback> }>>()
+  readonly #watched = new WeakMap<Context, WeakMap<HTMLElement | Comment, { properties: Set<string>; _get: Nullable<callback>; _set: Nullable<callback>, _call: Nullable<callback> }>>()
 
   /** Start watching a {@linkcode Context} for properties read operations. */
   #watch(context: Context, element: HTMLElement | Comment) {
     if (!this.#watched.has(context)) {
       this.#watched.set(context, new WeakMap())
     }
     if (!this.#watched.get(context)!.has(element)) {
-      this.#watched.get(context)!.set(element, { properties: new Set(), _get: null, _set: null })
+      this.#watched.get(context)!.set(element, { properties: new Set(), _get: null, _set: null, _call:null })
     }
     const watched = this.#watched.get(context)!.get(element)!
     if (!watched._get) {
@@ -482,8 +482,21 @@ export class Renderer {
           this.#queueReactiveRender(element, { context, state, root })
         }
       }
+      context.addEventListener("set", watched._set as EventListener)
+    }
+    // TODO(@lowlighter): should find a better way to handle built-in mutations
+    if (!watched._call) {
+      watched._call = ({ detail: { target, path, property } }: CustomEvent) => {
+        if ((Array.isArray(target))&&(["push", "pop", "shift", "unshift", "splice", "sort"].includes(property))) {
+          const key = path.slice(0, -1).join(".")
+          if (watched.properties.has(key)) {
+            this.debug(`"${key}.${property}()" has been called, queuing reactive render request`, element)
+            this.#queueReactiveRender(element, { context, state, root })
+          }
+        }
+      }
+      context.addEventListener("call", watched._call as EventListener)
     }
-    context.addEventListener("set", watched._set as EventListener)
   }
 
   /**

www/html/mizu/examples/playground/example.html

@@ -3,7 +3,7 @@
     You have {{ coins }} 🪙<br />
     Last refresh: <time class="muted" *refresh="1" *text="new Date().toISOString().slice(11, 19)" *eval="$refresh && (coins += income)"></time>
   </div>
-  <form *set="{ buildings: ['🏪 Store', '🏬 Mall', '🏟️ Bank', '🏯 Castle'] }">
+  <form *set="{ buildings: ['Choose a building', '🏪 Store', '🏬 Mall', '🏟️ Bank', '🏯 Castle'] }">
     <label>
       ⛏️ Mine
       <small>Click on the button to get coins.</small>
@@ -12,9 +12,8 @@
     <label>
       🛠️ Build
       <small>Create buildings to generate passive income.</small>
-      <select ::.number="build.selected" :disabled="build.progress" @change="build.time = 5 + build.selected ** 2">
-        <option value="0">Choose a building</option>
-        <option *for="buildings" :value="$I" :id="$value">{{ $value }}</option>
+      <select ::.number="build.selected" :disabled="build.progress" @change="build.time = 1 + (build.selected ** 2)">
+        <option *for="buildings" :value="$i">{{ $value }}</option>
       </select>
     </label>
     <section *if="build.selected">
@@ -37,6 +36,6 @@
     <br>
     <sub>+ {{ income }} 🪙/s</sub>
     <br>
-    <span *for="built">{{ [...$value][0] }}</span>
+    {{ built.map(building => [...building][0]).join(' ') }}
   </div>
 </main>