rask-ui 0.10.4 → 0.11.0

package/README.md

@@ -484,9 +484,41 @@ function Timer() {
 }
 ```
 
+**Effect with Disposal:**
+
+The callback can optionally return a dispose function that runs before the effect executes again:
+
+```tsx
+import { createEffect, createState } from "rask-ui";
+
+function LiveData() {
+  const state = createState({ url: "/api/data", data: null });
+
+  createEffect(() => {
+    const eventSource = new EventSource(state.url);
+
+    eventSource.onmessage = (event) => {
+      state.data = JSON.parse(event.data);
+    };
+
+    // Dispose function runs before effect re-executes
+    return () => {
+      eventSource.close();
+    };
+  });
+
+  return () => (
+    <div>
+      <input value={state.url} onInput={(e) => state.url = e.target.value} />
+      <pre>{JSON.stringify(state.data, null, 2)}</pre>
+    </div>
+  );
+}
+```
+
 **Parameters:**
 
-- `callback: () => void` - Function to run when dependencies change
+- `callback: () => void | (() => void)` - Function to run when dependencies change. Can optionally return a dispose function that runs before the effect executes again.
 
 **Features:**
 
@@ -494,13 +526,16 @@ function Timer() {
 - Automatically tracks reactive dependencies accessed during execution
 - Re-runs on microtask when dependencies change (prevents synchronous cascades)
 - Automatically cleaned up when component unmounts
-- Can be used for side effects like logging, syncing to localStorage, or updating derived state
+- 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
 
 **Notes:**
 
 - Only call during component setup phase (not in render function)
 - Effects are queued on microtask to avoid synchronous execution from prop changes
 - 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
 
 ---
 

package/dist/createEffect.d.ts

@@ -1,2 +1,2 @@
-export declare function createEffect(cb: () => void): void;
+export declare function createEffect(cb: () => void | (() => void)): void;
 //# sourceMappingURL=createEffect.d.ts.map

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,QAwB1C"}
+{"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"}

package/dist/createEffect.js

@@ -8,14 +8,21 @@ export function createEffect(cb) {
     catch {
         currentComponent = undefined;
     }
+    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);
     });
     const runEffect = () => {
+        try {
+            disposer?.();
+        }
+        catch (error) {
+            console.error("Error in effect dispose function:", error);
+        }
         const stopObserving = observer.observe();
-        cb();
+        disposer = cb();
         stopObserving();
     };
     if (currentComponent) {

package/dist/createView.d.ts

@@ -1,54 +1,32 @@
-type Simplify<T> = {
+/**
+ * Utility type that preserves unions while "flattening" object types.
+ */
+type Simplify<T> = T extends any ? {
     [K in keyof T]: T[K];
-} & {};
-type MergeTwo<A extends object, B extends object> = Simplify<Omit<A, keyof B> & B>;
+} : never;
+/**
+ * Merge two object types where properties from B override properties from A.
+ * Distributes over unions in A.
+ */
+type MergeTwo<A extends object, B extends object> = A extends any ? Simplify<Omit<A, keyof B> & B> : never;
+/**
+ * Merge a readonly tuple of objects left-to-right, with later entries
+ * overriding earlier ones. Distributes over unions in the head element.
+ */
 type MergeMany<T extends readonly object[]> = T extends [
     infer H extends object,
     ...infer R extends object[]
 ] ? MergeTwo<H, MergeMany<R>> : {};
 /**
- * Creates a view that merges multiple objects (reactive or not) into a single object while
- * maintaining reactivity through getters. Properties from later arguments override earlier ones.
- *
- * @warning **Do not destructure the returned view object!** Destructuring breaks reactivity
- * because it extracts plain values instead of maintaining getter access. This is the same rule
- * as other reactive primitives.
- *
- * @example
- * // ❌ Bad - destructuring loses reactivity
- * function Component() {
- *   const state = createState({ count: 0 });
- *   const helpers = { increment: () => state.count++ };
- *   const view = createView(state, helpers);
- *   const { count, increment } = view; // Don't do this!
- *   return () => <button onClick={increment}>{count}</button>; // Won't update!
- * }
- *
- * // ✅ Good - access properties directly in render
- * function Component() {
- *   const state = createState({ count: 0 });
- *   const helpers = { increment: () => state.count++ };
- *   const view = createView(state, helpers);
- *   return () => <button onClick={view.increment}>{view.count}</button>; // Reactive!
- * }
- *
- * @example
- * // Merge multiple reactive objects
- * const state = createState({ count: 0 });
- * const user = createState({ name: "Alice" });
- * const view = createView(state, user);
- * // view has both count and name properties, maintaining reactivity
- *
- * @example
- * // Later arguments override earlier ones
- * const a = { x: 1, y: 2 };
- * const b = { y: 3, z: 4 };
- * const view = createView(a, b);
- * // view.x === 1, view.y === 3, view.z === 4
+ * Creates a view that merges multiple objects (reactive or not) into a single
+ * object while maintaining reactivity through getters. Properties from later
+ * arguments override earlier ones.
  *
- * @param args - Objects to merge (reactive or plain objects)
- * @returns A view object with getters for all properties, maintaining reactivity
+ * ⚠️ Do not destructure the returned view object; always read properties
+ * directly from the view to preserve reactivity.
  */
+export declare function createView<A extends object>(a: A): A;
+export declare function createView<A extends object, B extends object>(a: A, b: B): MergeTwo<A, B>;
 export declare function createView<T extends readonly object[]>(...args: T): MergeMany<T>;
 export {};
 //# sourceMappingURL=createView.d.ts.map

package/dist/createView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createView.d.ts","sourceRoot":"","sources":["../src/createView.ts"],"names":[],"mappings":"AAGA,KAAK,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,EAAE,CAAC;AAEjD,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,QAAQ,CAC1D,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CACrB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,GACzB,EAAE,CAAC;AAEP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACpD,GAAG,IAAI,EAAE,CAAC,GACT,SAAS,CAAC,CAAC,CAAC,CAyEd"}
+{"version":3,"file":"createView.d.ts","sourceRoot":"","sources":["../src/createView.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,KAAK,CAAC;AAEpE;;;GAGG;AACH,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,GAC7D,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAC9B,KAAK,CAAC;AAEV;;;GAGG;AACH,KAAK,SAAS,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS,MAAM;IACtB,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE;CAC5B,GACG,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,GACzB,EAAE,CAAC;AAEP;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACtD,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GACH,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAClB,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACpD,GAAG,IAAI,EAAE,CAAC,GACT,SAAS,CAAC,CAAC,CAAC,CAAC"}

package/dist/createView.js

@@ -1,64 +1,22 @@
 import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
-/**
- * Creates a view that merges multiple objects (reactive or not) into a single object while
- * maintaining reactivity through getters. Properties from later arguments override earlier ones.
- *
- * @warning **Do not destructure the returned view object!** Destructuring breaks reactivity
- * because it extracts plain values instead of maintaining getter access. This is the same rule
- * as other reactive primitives.
- *
- * @example
- * // ❌ Bad - destructuring loses reactivity
- * function Component() {
- *   const state = createState({ count: 0 });
- *   const helpers = { increment: () => state.count++ };
- *   const view = createView(state, helpers);
- *   const { count, increment } = view; // Don't do this!
- *   return () => <button onClick={increment}>{count}</button>; // Won't update!
- * }
- *
- * // ✅ Good - access properties directly in render
- * function Component() {
- *   const state = createState({ count: 0 });
- *   const helpers = { increment: () => state.count++ };
- *   const view = createView(state, helpers);
- *   return () => <button onClick={view.increment}>{view.count}</button>; // Reactive!
- * }
- *
- * @example
- * // Merge multiple reactive objects
- * const state = createState({ count: 0 });
- * const user = createState({ name: "Alice" });
- * const view = createView(state, user);
- * // view has both count and name properties, maintaining reactivity
- *
- * @example
- * // Later arguments override earlier ones
- * const a = { x: 1, y: 2 };
- * const b = { y: 3, z: 4 };
- * const view = createView(a, b);
- * // view.x === 1, view.y === 3, view.z === 4
- *
- * @param args - Objects to merge (reactive or plain objects)
- * @returns A view object with getters for all properties, maintaining reactivity
- */
 export function createView(...args) {
     const result = {};
     const seen = new Set();
     let notifyInspectorRef = {};
     for (let i = args.length - 1; i >= 0; i--) {
         const src = args[i];
+        if (!src)
+            continue;
         if (INSPECTOR_ENABLED && src[INSPECT_MARKER]) {
             src[INSPECT_MARKER] = notifyInspectorRef;
         }
-        // mimic Object.assign: only enumerable own property keys
+        // Mimic Object.assign: only enumerable own property keys
         for (const key of Reflect.ownKeys(src)) {
             if (seen.has(key))
                 continue;
             const desc = Object.getOwnPropertyDescriptor(src, key);
             if (!desc || !desc.enumerable)
                 continue;
-            // Capture the current source for this key (last write wins).
             Object.defineProperty(result, key, {
                 enumerable: true,
                 configurable: true,
@@ -67,6 +25,7 @@ export function createView(...args) {
                     if (!INSPECTOR_ENABLED || !notifyInspectorRef.current) {
                         return value;
                     }
+                    // Propagate inspector marker into nested observables
                     if (value?.[INSPECT_MARKER]) {
                         value[INSPECT_MARKER] = {
                             current: {
@@ -76,6 +35,7 @@ export function createView(...args) {
                         };
                     }
                     else if (typeof value === "function") {
+                        // Wrap actions to notify inspector
                         return (...params) => {
                             notifyInspectorRef.current.notify({
                                 type: "action",
@@ -100,6 +60,7 @@ export function createView(...args) {
             },
             set: (value) => {
                 Object.defineProperty(notifyInspectorRef, "current", {
+                    configurable: true,
                     get() {
                         return value.current;
                     },
@@ -107,5 +68,6 @@ export function createView(...args) {
             },
         });
     }
+    // The overload signatures expose a precise type; this is the shared impl.
     return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",