sibujs 1.0.0-beta.4 → 1.0.0-beta.5

package/README.md

@@ -671,7 +671,7 @@ function App() {
       ${RouterLink({ to: "/", nodes: "Home" })}
       ${RouterLink({ to: "/about", nodes: "About" })}
     </nav>
-    ${route()}
+    ${Route()}
   </div>`;
 }
 
@@ -751,22 +751,20 @@ can("RETRY");       // false (not in error state)
 ```ts
 import { form, required, email, minLength } from "sibujs/ui";
 
-const form = form({
-  fields: {
-    username: { initial: "", validators: [required(), minLength(3)] },
-    email: { initial: "", validators: [required(), email()] },
-  },
-  onSubmit: (values) => api.register(values),
+const myForm = form({
+  username: { initial: "", validators: [required(), minLength(3)] },
+  email: { initial: "", validators: [required(), email()] },
 });
 
 // Reactive getters
-form.fields.username.value();
-form.errors.username();
-form.isValid();
-form.isDirty();
+myForm.fields.username.value();
+myForm.fields.username.error();
+myForm.isValid();
+myForm.isDirty();
 
-// Handle submission
-form.handleSubmit();
+// Handle submission (pass callback to handleSubmit)
+const onSubmit = myForm.handleSubmit((values) => api.register(values));
+// Attach to form: on: { submit: onSubmit }
 ```
 
 ### Global Store
@@ -780,7 +778,7 @@ const store = globalStore({
     increment: (state) => ({ ...state, count: state.count + 1 }),
     setUser: (state, user) => ({ ...state, user }),
   },
-  middleware: [(action, state) => console.log(action, state)],
+  middleware: [(state, action, payload, next) => { console.log(action, state); next(); }],
 });
 
 store.dispatch("increment");
@@ -1418,7 +1416,7 @@ import {
   startTransition,
   deferredValue,
   transitionState,
-  id,
+  uniqueId,
   scheduleUpdate,
   yieldToMain,
   processInChunks,
@@ -1437,7 +1435,7 @@ const deferredQuery = deferredValue(() => query());
 const [isPending, startTransition] = transitionState();
 
 // Unique IDs (SSR-safe)
-const id = id();       // "sibu-0"
+const myId = uniqueId();       // "sibu-0"
 const labelId = uniqueId("label"); // "sibu-1-label"
 
 // Priority-based scheduling
@@ -1461,7 +1459,7 @@ await processInChunks(bigArray, (item) => processItem(item), 50);
 import {
   enableDebug,
   debugLog,
-  performance,
+  perfTracker,
   measureRender,
   getPerformanceReport,
   checkLeaks,
@@ -1474,7 +1472,7 @@ debugLog("Counter", "increment", { value: 5 });
 const MeasuredList = measureRender("ItemList", ItemList);
 
 // Manual performance tracking
-const perf = performance("search");
+const perf = perfTracker("search");
 perf.startMeasure();
 // ... expensive operation
 perf.endMeasure();
@@ -1557,7 +1555,7 @@ const theme = createTheme({ colors: { primary: "#007bff" } });
 
 ---
 
-## Build (`sibu/build`)
+## Build (`sibujs/build`)
 
 Bundler plugins and deployment utilities.
 
@@ -1575,7 +1573,7 @@ Additional build utilities: CDN deployment, type declaration generation, bundle
 
 ---
 
-## Testing (`sibu/testing`)
+## Testing (`sibujs/testing`)
 
 Component testing utilities, accessibility testing, E2E helpers, snapshot testing, and visual regression support. Works with Vitest, Jest, and Playwright.
 

package/dist/browser.cjs

@@ -58,9 +58,12 @@ function track(effectFn, subscriber) {
   }
   subscriberStack[stackTop] = subscriber;
   currentSubscriber = subscriber;
-  effectFn();
-  stackTop--;
-  currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+  try {
+    effectFn();
+  } finally {
+    stackTop--;
+    currentSubscriber = stackTop >= 0 ? subscriberStack[stackTop] : null;
+  }
   return () => cleanup(subscriber);
 }
 function suspendTracking() {

package/dist/browser.js

@@ -1,445 +1,22 @@
 import {
-  effect
-} from "./chunk-G4AX3DQ4.js";
-import {
-  batch,
-  signal
-} from "./chunk-ONOO74UN.js";
+  battery,
+  clipboard,
+  colorScheme,
+  draggable,
+  dropZone,
+  geo,
+  idle,
+  media,
+  online,
+  permissions,
+  resize,
+  scroll,
+  title
+} from "./chunk-E6BNBVMK.js";
+import "./chunk-6DJQF4Z7.js";
+import "./chunk-CHJ27IGK.js";
+import "./chunk-K7JUDY3C.js";
 import "./chunk-MLKGABMK.js";
-
-// src/browser/media.ts
-function media(query) {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    const [matches2] = signal(false);
-    return { matches: matches2, dispose: () => {
-    } };
-  }
-  const mql = window.matchMedia(query);
-  const [matches, setMatches] = signal(mql.matches);
-  const handler = (event) => {
-    setMatches(event.matches);
-  };
-  mql.addEventListener("change", handler);
-  function dispose() {
-    mql.removeEventListener("change", handler);
-  }
-  return { matches, dispose };
-}
-
-// src/browser/resize.ts
-function resize(target) {
-  const [width, setWidth] = signal(0);
-  const [height, setHeight] = signal(0);
-  let observer = null;
-  if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
-    return { width, height, dispose: () => {
-    } };
-  }
-  const cleanup = effect(() => {
-    const el = target();
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
-    if (!el) return;
-    observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        batch(() => {
-          setWidth(entry.contentRect.width);
-          setHeight(entry.contentRect.height);
-        });
-      }
-    });
-    observer.observe(el);
-  });
-  function dispose() {
-    cleanup();
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
-  }
-  return { width, height, dispose };
-}
-
-// src/browser/scroll.ts
-function scroll(target) {
-  const [x, setX] = signal(0);
-  const [y, setY] = signal(0);
-  const [isScrolling, setIsScrolling] = signal(false);
-  let scrollTimer = null;
-  if (typeof window === "undefined") {
-    return { x, y, isScrolling, dispose: () => {
-    } };
-  }
-  const handler = () => {
-    const el = target ? target() : null;
-    batch(() => {
-      if (el) {
-        setX(el.scrollLeft);
-        setY(el.scrollTop);
-      } else {
-        setX(window.scrollX ?? window.pageXOffset ?? 0);
-        setY(window.scrollY ?? window.pageYOffset ?? 0);
-      }
-      setIsScrolling(true);
-    });
-    if (scrollTimer !== null) clearTimeout(scrollTimer);
-    scrollTimer = setTimeout(() => {
-      setIsScrolling(false);
-      scrollTimer = null;
-    }, 150);
-  };
-  const scrollTarget = target ? target() : null;
-  const eventTarget = scrollTarget || window;
-  eventTarget.addEventListener("scroll", handler, { passive: true });
-  function dispose() {
-    eventTarget.removeEventListener("scroll", handler);
-    if (scrollTimer !== null) {
-      clearTimeout(scrollTimer);
-      scrollTimer = null;
-    }
-  }
-  return { x, y, isScrolling, dispose };
-}
-
-// src/browser/online.ts
-function online() {
-  if (typeof window === "undefined" || typeof navigator === "undefined") {
-    const [online3] = signal(true);
-    return { online: online3, dispose: () => {
-    } };
-  }
-  const [online2, setOnline] = signal(navigator.onLine);
-  const onOnline = () => setOnline(true);
-  const onOffline = () => setOnline(false);
-  window.addEventListener("online", onOnline);
-  window.addEventListener("offline", onOffline);
-  function dispose() {
-    window.removeEventListener("online", onOnline);
-    window.removeEventListener("offline", onOffline);
-  }
-  return { online: online2, dispose };
-}
-
-// src/browser/geo.ts
-function geo(options) {
-  const [latitude, setLatitude] = signal(null);
-  const [longitude, setLongitude] = signal(null);
-  const [accuracy, setAccuracy] = signal(null);
-  const [error, setError] = signal(null);
-  let watchId = null;
-  if (typeof navigator !== "undefined" && navigator.geolocation) {
-    watchId = navigator.geolocation.watchPosition(
-      (position) => {
-        batch(() => {
-          setLatitude(position.coords.latitude);
-          setLongitude(position.coords.longitude);
-          setAccuracy(position.coords.accuracy);
-          setError(null);
-        });
-      },
-      (err) => {
-        setError(err);
-      },
-      options
-    );
-  }
-  function dispose() {
-    if (watchId !== null && typeof navigator !== "undefined" && navigator.geolocation) {
-      navigator.geolocation.clearWatch(watchId);
-      watchId = null;
-    }
-  }
-  return { latitude, longitude, accuracy, error, dispose };
-}
-
-// src/browser/battery.ts
-function battery() {
-  const [level, setLevel] = signal(null);
-  const [charging, setCharging] = signal(null);
-  const [chargingTime, setChargingTime] = signal(null);
-  const [dischargingTime, setDischargingTime] = signal(null);
-  const [supported, setSupported] = signal(false);
-  let battery2 = null;
-  let onLevelChange = null;
-  let onChargingChange = null;
-  let onChargingTimeChange = null;
-  let onDischargingTimeChange = null;
-  let disposed = false;
-  if (typeof navigator !== "undefined" && "getBattery" in navigator) {
-    setSupported(true);
-    navigator.getBattery().then((bm) => {
-      if (disposed) return;
-      battery2 = bm;
-      batch(() => {
-        setLevel(bm.level);
-        setCharging(bm.charging);
-        setChargingTime(bm.chargingTime);
-        setDischargingTime(bm.dischargingTime);
-      });
-      onLevelChange = () => setLevel(bm.level);
-      onChargingChange = () => setCharging(bm.charging);
-      onChargingTimeChange = () => setChargingTime(bm.chargingTime);
-      onDischargingTimeChange = () => setDischargingTime(bm.dischargingTime);
-      bm.addEventListener("levelchange", onLevelChange);
-      bm.addEventListener("chargingchange", onChargingChange);
-      bm.addEventListener("chargingtimechange", onChargingTimeChange);
-      bm.addEventListener("dischargingtimechange", onDischargingTimeChange);
-    });
-  }
-  function dispose() {
-    disposed = true;
-    if (battery2) {
-      if (onLevelChange) battery2.removeEventListener("levelchange", onLevelChange);
-      if (onChargingChange) battery2.removeEventListener("chargingchange", onChargingChange);
-      if (onChargingTimeChange) battery2.removeEventListener("chargingtimechange", onChargingTimeChange);
-      if (onDischargingTimeChange) battery2.removeEventListener("dischargingtimechange", onDischargingTimeChange);
-      battery2 = null;
-    }
-  }
-  return { level, charging, chargingTime, dischargingTime, supported, dispose };
-}
-
-// src/browser/idle.ts
-var ACTIVITY_EVENTS = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"];
-function idle(timeout = 6e4) {
-  const [idle2, setIdle] = signal(false);
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return { idle: idle2, dispose: () => {
-    } };
-  }
-  let timer = null;
-  function resetTimer() {
-    setIdle(false);
-    if (timer !== null) clearTimeout(timer);
-    timer = setTimeout(() => {
-      setIdle(true);
-    }, timeout);
-  }
-  for (const event of ACTIVITY_EVENTS) {
-    document.addEventListener(event, resetTimer, { passive: true });
-  }
-  resetTimer();
-  function dispose() {
-    if (timer !== null) {
-      clearTimeout(timer);
-      timer = null;
-    }
-    for (const event of ACTIVITY_EVENTS) {
-      document.removeEventListener(event, resetTimer);
-    }
-  }
-  return { idle: idle2, dispose };
-}
-
-// src/browser/permissions.ts
-function permissions(name) {
-  const [state, setState] = signal("prompt");
-  let permissionStatus = null;
-  let onChange = null;
-  let disposed = false;
-  if (typeof navigator === "undefined" || !navigator.permissions) {
-    setState("unsupported");
-    return { state, dispose: () => {
-    } };
-  }
-  navigator.permissions.query({ name }).then((status) => {
-    if (disposed) return;
-    permissionStatus = status;
-    setState(status.state);
-    onChange = () => {
-      setState(status.state);
-    };
-    status.addEventListener("change", onChange);
-  }).catch(() => {
-    setState("unsupported");
-  });
-  function dispose() {
-    disposed = true;
-    if (permissionStatus && onChange) {
-      permissionStatus.removeEventListener("change", onChange);
-      permissionStatus = null;
-      onChange = null;
-    }
-  }
-  return { state, dispose };
-}
-
-// src/browser/clipboard.ts
-function clipboard() {
-  const [text, setText] = signal("");
-  const [copied, setCopied] = signal(false);
-  let copiedTimer = null;
-  async function copy(value) {
-    if (typeof navigator === "undefined" || !navigator.clipboard) {
-      return;
-    }
-    await navigator.clipboard.writeText(value);
-    setText(value);
-    setCopied(true);
-    if (copiedTimer !== null) clearTimeout(copiedTimer);
-    copiedTimer = setTimeout(() => {
-      setCopied(false);
-      copiedTimer = null;
-    }, 2e3);
-  }
-  function dispose() {
-    if (copiedTimer !== null) {
-      clearTimeout(copiedTimer);
-      copiedTimer = null;
-    }
-  }
-  return { text, copy, copied, dispose };
-}
-
-// src/browser/dragDrop.ts
-function draggable(element, data) {
-  const [isDragging, setIsDragging] = signal(false);
-  if (typeof window === "undefined") {
-    return { isDragging, dispose: () => {
-    } };
-  }
-  let currentEl = null;
-  let onDragStart = null;
-  let onDragEnd = null;
-  const cleanup = effect(() => {
-    if (currentEl && onDragStart && onDragEnd) {
-      currentEl.removeEventListener("dragstart", onDragStart);
-      currentEl.removeEventListener("dragend", onDragEnd);
-    }
-    const el = element();
-    currentEl = el;
-    if (!el) return;
-    el.draggable = true;
-    onDragStart = (e) => {
-      setIsDragging(true);
-      if (e.dataTransfer && data !== void 0) {
-        e.dataTransfer.setData("application/json", JSON.stringify(data));
-      }
-    };
-    onDragEnd = () => {
-      setIsDragging(false);
-    };
-    el.addEventListener("dragstart", onDragStart);
-    el.addEventListener("dragend", onDragEnd);
-  });
-  function dispose() {
-    cleanup();
-    if (currentEl && onDragStart && onDragEnd) {
-      currentEl.removeEventListener("dragstart", onDragStart);
-      currentEl.removeEventListener("dragend", onDragEnd);
-      currentEl = null;
-    }
-  }
-  return { isDragging, dispose };
-}
-function dropZone(element, options) {
-  const [isOver, setIsOver] = signal(false);
-  if (typeof window === "undefined") {
-    return { isOver, dispose: () => {
-    } };
-  }
-  let currentEl = null;
-  let onDragOver = null;
-  let onDragEnter = null;
-  let onDragLeave = null;
-  let onDrop = null;
-  const cleanup = effect(() => {
-    if (currentEl && onDragOver && onDragEnter && onDragLeave && onDrop) {
-      currentEl.removeEventListener("dragover", onDragOver);
-      currentEl.removeEventListener("dragenter", onDragEnter);
-      currentEl.removeEventListener("dragleave", onDragLeave);
-      currentEl.removeEventListener("drop", onDrop);
-    }
-    const el = element();
-    currentEl = el;
-    if (!el) return;
-    onDragOver = (e) => {
-      e.preventDefault();
-    };
-    onDragEnter = (e) => {
-      e.preventDefault();
-      setIsOver(true);
-    };
-    onDragLeave = () => {
-      setIsOver(false);
-    };
-    onDrop = (e) => {
-      e.preventDefault();
-      setIsOver(false);
-      let transferData = null;
-      if (e.dataTransfer) {
-        const raw = e.dataTransfer.getData("application/json");
-        if (raw) {
-          try {
-            transferData = JSON.parse(raw);
-          } catch {
-            transferData = raw;
-          }
-        }
-      }
-      options.onDrop(transferData, e);
-    };
-    el.addEventListener("dragover", onDragOver);
-    el.addEventListener("dragenter", onDragEnter);
-    el.addEventListener("dragleave", onDragLeave);
-    el.addEventListener("drop", onDrop);
-  });
-  function dispose() {
-    cleanup();
-    if (currentEl && onDragOver && onDragEnter && onDragLeave && onDrop) {
-      currentEl.removeEventListener("dragover", onDragOver);
-      currentEl.removeEventListener("dragenter", onDragEnter);
-      currentEl.removeEventListener("dragleave", onDragLeave);
-      currentEl.removeEventListener("drop", onDrop);
-      currentEl = null;
-    }
-  }
-  return { isOver, dispose };
-}
-
-// src/browser/title.ts
-function title(value) {
-  if (typeof document === "undefined") {
-    return () => {
-    };
-  }
-  const previousTitle = document.title;
-  if (typeof value === "function") {
-    const cleanup = effect(() => {
-      document.title = value();
-    });
-    return () => {
-      cleanup();
-      document.title = previousTitle;
-    };
-  }
-  document.title = value;
-  return () => {
-    document.title = previousTitle;
-  };
-}
-
-// src/browser/colorScheme.ts
-function colorScheme() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    const [scheme2] = signal("light");
-    return { scheme: scheme2, dispose: () => {
-    } };
-  }
-  const mql = window.matchMedia("(prefers-color-scheme: dark)");
-  const [scheme, setScheme] = signal(mql.matches ? "dark" : "light");
-  const handler = (event) => {
-    setScheme(event.matches ? "dark" : "light");
-  };
-  mql.addEventListener("change", handler);
-  function dispose() {
-    mql.removeEventListener("change", handler);
-  }
-  return { scheme, dispose };
-}
 export {
   battery,
   clipboard,