rask-ui 0.11.0 → 0.12.1

package/README.md

@@ -522,9 +522,9 @@ function LiveData() {
 
 **Features:**
 
-- Runs immediately on creation
+- Runs immediately and synchronously on creation during setup
 - Automatically tracks reactive dependencies accessed during execution
-- Re-runs on microtask when dependencies change (prevents synchronous cascades)
+- Re-runs when dependencies change
 - Automatically cleaned up when component unmounts
 - Optional dispose function for cleaning up resources before re-execution
 - Can be used for side effects like logging, syncing to localStorage, managing subscriptions, or updating derived state
@@ -532,7 +532,7 @@ function LiveData() {
 **Notes:**
 
 - Only call during component setup phase (not in render function)
-- Effects are queued on microtask to avoid synchronous execution from prop changes
+- Effect runs synchronously during setup, making it predictable and easier to reason about
 - Be careful with effects that modify state - can cause infinite loops if not careful
 - Dispose functions run before the effect re-executes, not when the component unmounts
 - For component unmount cleanup, use `createCleanup()` instead
@@ -988,6 +988,223 @@ Error:
 
 ---
 
+### Routing
+
+#### `createRouter<T>(config, options?)`
+
+Creates a reactive router for client-side navigation. Built on [typed-client-router](https://github.com/christianalfoni/typed-client-router), it integrates seamlessly with RASK's reactive system for fully type-safe routing.
+
+```tsx
+import { createRouter } from "rask-ui";
+
+const routes = {
+  home: "/",
+  about: "/about",
+  user: "/users/:id",
+  post: "/posts/:id",
+} as const;
+
+function App() {
+  const router = createRouter(routes);
+
+  return () => {
+    // Match current route
+    if (router.route?.name === "home") {
+      return <Home />;
+    }
+
+    if (router.route?.name === "user") {
+      return <User id={router.route.params.id} />;
+    }
+
+    if (router.route?.name === "post") {
+      return <Post id={router.route.params.id} />;
+    }
+
+    return <NotFound />;
+  };
+}
+```
+
+**Parameters:**
+
+- `config: T` - Route configuration object mapping route names to path patterns
+- `options?: { base?: string }` - Optional base path for all routes
+
+**Returns:** Router object with reactive state and navigation methods:
+
+**Properties:**
+- `route?: Route` - Current active route with `name` and `params` properties (reactive)
+- `queries: Record<string, string>` - Current URL query parameters (reactive)
+
+**Methods:**
+- `push(name, params?, query?)` - Navigate to a route by name
+- `replace(name, params?, query?)` - Replace current route (no history entry)
+- `setQuery(query)` - Update query parameters
+- `url(name, params?, query?)` - Generate URL for a route
+
+**Route Configuration:**
+
+Define routes with path patterns. Use `:param` for dynamic segments:
+
+```tsx
+const routes = {
+  home: "/",
+  users: "/users",
+  user: "/users/:id",
+  userPosts: "/users/:userId/posts/:postId",
+} as const;
+```
+
+**Navigation:**
+
+Navigate programmatically using route names:
+
+```tsx
+function Navigation() {
+  const router = createRouter(routes);
+
+  return () => (
+    <nav>
+      <button onClick={() => router.push("home")}>Home</button>
+      <button onClick={() => router.push("user", { id: "123" })}>
+        User 123
+      </button>
+      <button onClick={() => router.push("home", {}, { tab: "recent" })}>
+        Home (Recent)
+      </button>
+    </nav>
+  );
+}
+```
+
+**Query Parameters:**
+
+Access and modify query parameters:
+
+```tsx
+function SearchPage() {
+  const router = createRouter(routes);
+
+  return () => (
+    <div>
+      <p>Search: {router.queries.q || "none"}</p>
+      <input
+        value={router.queries.q || ""}
+        onInput={(e) => router.setQuery({ q: e.target.value })}
+      />
+    </div>
+  );
+}
+```
+
+**Reactive Routing:**
+
+The router integrates with RASK's reactivity system. Accessing `router.route` or `router.queries` automatically tracks dependencies:
+
+```tsx
+function App() {
+  const router = createRouter(routes);
+  const state = createState({ posts: [] });
+
+  // Effect runs when route changes
+  createEffect(() => {
+    if (router.route?.name === "user") {
+      // Fetch user data when route changes
+      fetch(`/api/users/${router.route.params.id}`)
+        .then((r) => r.json())
+        .then((data) => (state.posts = data.posts));
+    }
+  });
+
+  return () => (
+    <div>
+      {router.route?.name === "user" && (
+        <div>
+          <h1>User {router.route.params.id}</h1>
+          <ul>
+            {state.posts.map((post) => (
+              <li key={post.id}>{post.title}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+**Type Safety:**
+
+Routes are fully type-safe. TypeScript will infer parameter types from route patterns:
+
+```tsx
+const routes = {
+  user: "/users/:id",
+  post: "/posts/:postId/:commentId",
+} as const;
+
+const router = createRouter(routes);
+
+// ✅ Type-safe - id is required
+router.push("user", { id: "123" });
+
+// ❌ Type error - missing required params
+router.push("post", { postId: "1" }); // Error: missing commentId
+
+// ✅ Type-safe params access
+if (router.route?.name === "post") {
+  const postId = router.route.params.postId; // string
+  const commentId = router.route.params.commentId; // string
+}
+```
+
+**Context Pattern:**
+
+Share router across components using context:
+
+```tsx
+import { createRouter, createContext } from "rask-ui";
+
+const routes = {
+  home: "/",
+  about: "/about",
+} as const;
+
+const RouterContext = createContext<Router<typeof routes>>();
+
+function App() {
+  const router = createRouter(routes);
+
+  RouterContext.inject(router);
+
+  return () => <Content />;
+}
+
+function Content() {
+  const router = RouterContext.get();
+
+  return () => (
+    <nav>
+      <button onClick={() => router.push("home")}>Home</button>
+      <button onClick={() => router.push("about")}>About</button>
+    </nav>
+  );
+}
+```
+
+**Features:**
+
+- **Type-safe** - Full TypeScript inference for routes and parameters
+- **Reactive** - Automatically tracks route changes
+- **Declarative** - Navigate using route names, not URLs
+- **Query parameters** - Built-in query string management
+- **No special components** - Use standard conditionals and component composition
+- **History API** - Built on the browser's History API
+- **Automatic cleanup** - Router listener cleaned up when component unmounts
+
+---
+
 ### Developer Tools
 
 #### `inspect(root, callback)`

package/dist/batch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAgElE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAevC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAgBvC"}
+{"version":3,"file":"batch.d.ts","sourceRoot":"","sources":["../src/batch.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AA8ClE,wBAAgB,KAAK,CAAC,EAAE,EAAE,cAAc,QAiBvC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAgBvC"}

package/dist/batch.js

@@ -1,11 +1,7 @@
 const asyncQueue = [];
-const syncQueue = [];
+const syncQueueStack = [];
 let inInteractive = 0;
 let asyncScheduled = false;
-let inSyncBatch = 0;
-// New: guards against re-entrant flushing
-let inAsyncFlush = false;
-let inSyncFlush = false;
 function scheduleAsyncFlush() {
     if (asyncScheduled)
         return;
@@ -13,77 +9,62 @@ function scheduleAsyncFlush() {
     queueMicrotask(flushAsyncQueue);
 }
 function flushAsyncQueue() {
-    if (inAsyncFlush)
-        return;
-    inAsyncFlush = true;
     asyncScheduled = false;
-    try {
-        if (!asyncQueue.length)
-            return;
-        // Note: we intentionally DO NOT snapshot.
-        // If callbacks queue more async work, it gets picked up
-        // in this same loop because length grows.
-        for (let i = 0; i < asyncQueue.length; i++) {
-            const cb = asyncQueue[i];
-            asyncQueue[i] = undefined;
-            cb();
-            cb.__queued = false;
-        }
-        asyncQueue.length = 0;
-    }
-    finally {
-        inAsyncFlush = false;
+    if (!asyncQueue.length)
+        return;
+    // Note: we intentionally DO NOT snapshot.
+    // If callbacks queue more async work, it gets picked up
+    // in this same loop because length grows.
+    for (let i = 0; i < asyncQueue.length; i++) {
+        const cb = asyncQueue[i];
+        asyncQueue[i] = undefined;
+        cb();
+        cb.__queued = false;
     }
+    asyncQueue.length = 0;
 }
-function flushSyncQueue() {
-    if (inSyncFlush)
+function flushSyncQueue(queue) {
+    if (!queue.length)
         return;
-    inSyncFlush = true;
-    try {
-        if (!syncQueue.length)
-            return;
-        // Same pattern as async: no snapshot, just iterate.
-        // New callbacks queued via syncBatch inside this flush
-        // will be pushed to syncQueue and picked up by this loop.
-        for (let i = 0; i < syncQueue.length; i++) {
-            const cb = syncQueue[i];
-            syncQueue[i] = undefined;
-            cb();
-            cb.__queued = false;
-        }
-        syncQueue.length = 0;
-    }
-    finally {
-        inSyncFlush = false;
+    // No snapshot, just iterate.
+    // New callbacks queued via nested syncBatch will create
+    // their own queue on the stack and flush independently.
+    for (let i = 0; i < queue.length; i++) {
+        const cb = queue[i];
+        queue[i] = undefined;
+        cb();
+        cb.__queued = false;
     }
+    queue.length = 0;
 }
 export function queue(cb) {
     // Optional: uncomment this if you want deduping:
     // if (cb.__queued) return;
     cb.__queued = true;
-    if (inSyncBatch) {
-        syncQueue.push(cb);
+    // If we're in a sync batch, push to the current sync queue
+    if (syncQueueStack.length) {
+        syncQueueStack[syncQueueStack.length - 1].push(cb);
         return;
     }
+    // Otherwise, push to async queue
     asyncQueue.push(cb);
     if (!inInteractive) {
         scheduleAsyncFlush();
     }
 }
 export function syncBatch(cb) {
-    inSyncBatch++;
+    // Create a new queue for this sync batch
+    const queue = [];
+    syncQueueStack.push(queue);
     try {
         cb();
     }
     catch (e) {
-        inSyncBatch--;
-        throw e; // no flush on error
-    }
-    inSyncBatch--;
-    if (!inSyncBatch) {
-        // Only the outermost syncBatch triggers a flush.
-        // If this happens *inside* an ongoing flushSyncQueue,
-        // inSyncFlush will be true and flushSyncQueue will no-op.
-        flushSyncQueue();
+        // Pop the queue even on error, but don't flush
+        syncQueueStack.pop();
+        throw e;
     }
+    // Pop the queue and flush it
+    syncQueueStack.pop();
+    flushSyncQueue(queue);
 }

package/dist/component.d.ts

@@ -17,6 +17,8 @@ export declare class RaskStatefulComponent<P extends Props<any>> extends Compone
     private reactiveProps?;
     private observer;
     private isRendering;
+    private willRender;
+    private nextProps;
     effects: Array<{
         isDirty: boolean;
         run: () => void;
@@ -32,7 +34,6 @@ export declare class RaskStatefulComponent<P extends Props<any>> extends Compone
      *
      */
     componentWillUpdate(nextProps: any): void;
-    componentWillReceiveProps(): void;
     shouldComponentUpdate(nextProps: Props<any>): boolean;
     render(): any;
 }

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAMP;AAID,wBAAgB,mBAAmB,+BAMlC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IA2D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAWrD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAExE,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAIrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAMP;AAID,wBAAgB,mBAAmB,+BAMlC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAKb;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAQ;IAG1B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IAyD3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAkBlC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAWrD,MAAM;CA0CP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -1,6 +1,7 @@
-import { createComponentVNode, Component, } from "inferno";
+import { createComponentVNode, Component } from "inferno";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 import { syncBatch } from "./batch";
+import { PROXY_MARKER } from "./createState";
 export class RaskStatelessComponent extends Component {
     observer = new Observer(() => {
         this.forceUpdate();
@@ -44,9 +45,18 @@ export class RaskStatefulComponent extends Component {
     renderFn;
     reactiveProps;
     observer = new Observer(() => {
+        if (this.willRender) {
+            return;
+        }
         this.forceUpdate();
     });
+    // Flag to prevent props from tracking in render scope (We use props reconciliation)
     isRendering = false;
+    // Flag to prevent observer notifications to cause render during reconciliation
+    willRender = true;
+    // Since reactive props updates before the reconciliation (without causing a new one), we
+    // need to return these from the reactive props
+    nextProps = this.props;
     effects = [];
     contexts = new Map();
     getChildContext() {
@@ -64,44 +74,42 @@ export class RaskStatefulComponent extends Component {
         const reactiveProps = {};
         const self = this;
         const signals = new Map();
-        for (const prop in this.props) {
-            const value = this.props[prop];
+        for (const prop in this.nextProps) {
+            const value = this.nextProps[prop];
             // Skip known non-reactive props
-            if (typeof value === "function" ||
-                prop === "children" ||
-                prop === "key" ||
-                prop === "ref") {
+            if (prop === "key" || prop === "ref") {
                 reactiveProps[prop] = value;
                 continue;
             }
             // Skip objects/arrays - they're already reactive if they're proxies
             // No need to wrap them in additional signals
-            if (typeof value === "object" && value !== null) {
+            if (typeof value === "object" &&
+                value !== null &&
+                PROXY_MARKER in value) {
                 reactiveProps[prop] = value;
                 continue;
             }
             // Only create reactive getters for primitives
             Object.defineProperty(reactiveProps, prop, {
+                enumerable: true,
                 get() {
-                    if (!self.isRendering) {
-                        const observer = getCurrentObserver();
-                        if (observer) {
-                            // Lazy create signal only when accessed in reactive context
-                            let signal = signals.get(prop);
-                            if (!signal) {
-                                signal = new Signal();
-                                signals.set(prop, signal);
-                            }
-                            observer.subscribeSignal(signal);
+                    const observer = getCurrentObserver();
+                    if (!self.isRendering && observer) {
+                        // Lazy create signal only when accessed in reactive context
+                        let signal = signals.get(prop);
+                        if (!signal) {
+                            signal = new Signal();
+                            signals.set(prop, signal);
                         }
+                        observer.subscribeSignal(signal);
                     }
                     // @ts-ignore
-                    return self.props[prop];
+                    return self.nextProps[prop];
                 },
                 set(value) {
                     // Only notify if signal was created (i.e., prop was accessed reactively)
                     const signal = signals.get(prop);
-                    if (signal && self.props[prop] !== value) {
+                    if (signal) {
                         signal.notify();
                     }
                 },
@@ -119,9 +127,12 @@ export class RaskStatefulComponent extends Component {
      *
      */
     componentWillUpdate(nextProps) {
+        this.willRender = true;
+        this.nextProps = nextProps;
         syncBatch(() => {
             for (const prop in nextProps) {
-                if (prop === "children") {
+                if (prop === "children" ||
+                    this.props[prop] === nextProps[prop]) {
                     continue;
                 }
                 // @ts-ignore
@@ -129,7 +140,6 @@ export class RaskStatefulComponent extends Component {
             }
         });
     }
-    componentWillReceiveProps() { }
     shouldComponentUpdate(nextProps) {
         // Shallow comparison of props, excluding internal props
         for (const prop in nextProps) {
@@ -165,6 +175,7 @@ export class RaskStatefulComponent extends Component {
             this.isRendering = true;
             result = this.renderFn();
             this.isRendering = false;
+            this.willRender = false;
         }
         catch (error) {
             if (typeof this.context.notifyError !== "function") {

package/dist/createContext.d.ts

@@ -25,5 +25,6 @@
 export declare function createContext<T>(): {
     inject(value: T): void;
     get(): T;
+    hasValue(): boolean;
 };
 //# sourceMappingURL=createContext.d.ts.map

package/dist/createContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,wBAAgB,aAAa,CAAC,CAAC;kBAEb,CAAC;WASR,CAAC;EA0BX"}
+{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,wBAAgB,aAAa,CAAC,CAAC;kBAEb,CAAC;WASR,CAAC;;EA2CX"}

package/dist/createContext.js

@@ -46,6 +46,17 @@ export function createContext() {
             }
             return contextValue;
         },
+        hasValue() {
+            let currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("You can not get context outside component setup");
+            }
+            if (typeof currentComponent.context.getContext !== "function") {
+                return false;
+            }
+            const contextValue = currentComponent.context.getContext(context);
+            return Boolean(contextValue);
+        },
     };
     return context;
 }

package/dist/createEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createEffect.d.ts","sourceRoot":"","sources":["../src/createEffect.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QA6BzD"}
+{"version":3,"file":"createEffect.d.ts","sourceRoot":"","sources":["../src/createEffect.ts"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,QA8BzD"}

package/dist/createEffect.js

@@ -1,3 +1,4 @@
+import { syncBatch } from "./batch";
 import { getCurrentComponent, createCleanup } from "./component";
 import { Observer } from "./observation";
 export function createEffect(cb) {
@@ -10,9 +11,7 @@ export function createEffect(cb) {
     }
     let disposer;
     const observer = new Observer(() => {
-        // We trigger effects on micro task as synchronous observer notifications
-        // (Like when components sets props) should not synchronously trigger effects
-        queueMicrotask(runEffect);
+        syncBatch(runEffect);
     });
     const runEffect = () => {
         try {
@@ -26,7 +25,10 @@ export function createEffect(cb) {
         stopObserving();
     };
     if (currentComponent) {
-        createCleanup(() => observer.dispose());
+        createCleanup(() => {
+            observer.dispose();
+            disposer?.();
+        });
     }
     runEffect();
 }

package/dist/createRouter.d.ts

@@ -0,0 +1,8 @@
+import { RoutesConfig, TRouter, TRoutes } from "typed-client-router";
+export type Router<T extends RoutesConfig> = Omit<TRouter<T>, "current" | "listen" | "pathname"> & {
+    route?: TRoutes<T>;
+};
+export declare function createRouter<const T extends RoutesConfig>(config: T, options?: {
+    base?: string;
+}): Router<T>;
+//# sourceMappingURL=createRouter.d.ts.map

package/dist/createRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRouter.d.ts","sourceRoot":"","sources":["../src/createRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,OAAO,EACR,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,YAAY,IAAI,IAAI,CAC/C,OAAO,CAAC,CAAC,CAAC,EACV,SAAS,GAAG,QAAQ,GAAG,UAAU,CAClC,GAAG;IACF,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,CAAC,CAAC,SAAS,YAAY,EACvD,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE;IACR,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACA,MAAM,CAAC,CAAC,CAAC,CAwBX"}

package/dist/createRouter.js

@@ -0,0 +1,24 @@
+import { createRouter as internalCreateRouter, } from "typed-client-router";
+import { getCurrentObserver, Signal } from "./observation";
+import { createCleanup } from "./component";
+export function createRouter(config, options) {
+    const router = internalCreateRouter(config, options);
+    const signal = new Signal();
+    createCleanup(router.listen(() => signal.notify()));
+    return {
+        get route() {
+            const observer = getCurrentObserver();
+            if (observer) {
+                observer.subscribeSignal(signal);
+            }
+            return router.current;
+        },
+        get queries() {
+            return router.queries;
+        },
+        setQuery: router.setQuery,
+        push: router.push,
+        replace: router.replace,
+        url: router.url,
+    };
+}

package/dist/index.d.ts

@@ -10,5 +10,6 @@ export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
+export { Router, createRouter } from "./createRouter";
 export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,SAAS,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,SAAS,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -10,5 +10,6 @@ export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
 export { inspect } from "./inspect";
+export { createRouter } from "./createRouter";
 // Re-export Inferno JSX runtime functions so users don't need to install Inferno directly
 export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";

package/dist/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
-import 'inferno';
-export { Fragment } from 'inferno';
+import "inferno";
+export { Fragment } from "inferno";
 export declare function jsx(type: any, props: any, key?: any): any;
 export declare function jsxs(type: any, props: any, key?: any): any;
 //# sourceMappingURL=jsx-runtime.d.ts.map

package/dist/jsx-runtime.js

@@ -2,6 +2,6 @@
 // The actual JSX transformation is done by SWC plugin at build time
 // This file only provides type declarations for TypeScript's "jsx": "react-jsx" mode
 // Import inferno to get the global JSX namespace
-import 'inferno';
+import "inferno";
 // Re-export Fragment for JSX fragment syntax
-export { Fragment } from 'inferno';
+export { Fragment } from "inferno";