rask-ui 0.14.1 → 0.17.0

package/dist/useAsync.js

@@ -3,7 +3,7 @@ import { assignState, useState } from "./useState";
 export function useAsync(...args) {
     const currentComponent = getCurrentComponent();
     if (!currentComponent || currentComponent.isRendering) {
-        throw new Error("Only use createTask in component setup");
+        throw new Error("Only use useTask in component setup");
     }
     const value = args.length === 2 ? args[0] : null;
     const fn = args.length === 2 ? args[1] : args[0];

package/dist/useDerived.d.ts

@@ -0,0 +1,5 @@
+export type Derived<T extends Record<string, () => any>> = {
+    [K in keyof T]: ReturnType<T[K]>;
+};
+export declare function useDerived<T extends Record<string, () => any>>(computed: T): Derived<T>;
+//# sourceMappingURL=useDerived.d.ts.map

package/dist/useDerived.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDerived.d.ts","sourceRoot":"","sources":["../src/useDerived.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI;KACxD,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,GACV,OAAO,CAAC,CAAC,CAAC,CAgFZ"}

package/dist/useDerived.js

@@ -0,0 +1,72 @@
+import { getCurrentComponent, useCleanup } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+import { getCurrentObserver, Observer, Signal } from "./observation";
+export function useDerived(computed) {
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use useDerived in component setup");
+    }
+    const proxy = {};
+    let notifyInspectorRef = {};
+    for (const prop in computed) {
+        let isDirty = true;
+        let value;
+        const signal = new Signal();
+        const computedObserver = new Observer(() => {
+            isDirty = true;
+            signal.notify();
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "computed",
+                    path: notifyInspectorRef.current.path.concat(prop),
+                    isDirty: true,
+                    value,
+                });
+            }
+        });
+        useCleanup(() => computedObserver.dispose());
+        Object.defineProperty(proxy, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                const currentObserver = getCurrentObserver();
+                if (currentObserver) {
+                    currentObserver.subscribeSignal(signal);
+                }
+                if (isDirty) {
+                    const stopObserving = computedObserver.observe();
+                    value = computed[prop]();
+                    stopObserving();
+                    isDirty = false;
+                    if (INSPECTOR_ENABLED) {
+                        notifyInspectorRef.current?.notify({
+                            type: "computed",
+                            path: notifyInspectorRef.current.path.concat(prop),
+                            isDirty: false,
+                            value,
+                        });
+                    }
+                    return value;
+                }
+                return value;
+            },
+        });
+    }
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(proxy, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
+    return proxy;
+}

package/dist/useEffect.js

@@ -4,7 +4,7 @@ import { Observer } from "./observation";
 export function useEffect(cb) {
     const component = getCurrentComponent();
     if (!component || component.isRendering) {
-        throw new Error("Only use createEffect in component setup");
+        throw new Error("Only use useEffect in component setup");
     }
     let disposer;
     const observer = new Observer(() => {

package/dist/useRef.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "inferno";
+export declare function useRef<T>(): RefObject<T>;
+//# sourceMappingURL=useRef.d.ts.map

package/dist/useRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRef.d.ts","sourceRoot":"","sources":["../src/useRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,wBAAgB,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAoBxC"}

package/dist/useRef.js

@@ -0,0 +1,21 @@
+import { getCurrentObserver, Signal } from "./observation";
+import { getCurrentComponent } from "./component";
+export function useRef() {
+    let value = null;
+    const currentComponent = getCurrentComponent();
+    if (!currentComponent || currentComponent.isRendering) {
+        throw new Error("Only use useRef in component setup");
+    }
+    const signal = new Signal();
+    return {
+        get current() {
+            const currentObserver = getCurrentObserver();
+            currentObserver?.subscribeSignal(signal);
+            return value;
+        },
+        set current(newValue) {
+            signal.notify();
+            value = newValue;
+        },
+    };
+}

package/dist/useRouter.js

@@ -3,7 +3,7 @@ import { getCurrentObserver, Signal } from "./observation";
 import { useCleanup, getCurrentComponent } from "./component";
 export function useRouter(config, options) {
     if (!getCurrentComponent()) {
-        throw new Error("Only use createRouter in component setup");
+        throw new Error("Only use useRouter in component setup");
     }
     const router = internalCreateRouter(config, options);
     const signal = new Signal();

package/dist/useState.d.ts

@@ -9,14 +9,14 @@ export declare function assignState<T extends object>(state: T, newState: T): T;
  * @example
  * // ❌ Bad - destructuring loses reactivity
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   const { count, name } = state; // Don't do this!
  *   return () => <div>{count} {name}</div>; // Won't update!
  * }
  *
  * // ✅ Good - access properties directly in render
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   return () => <div>{state.count} {state.name}</div>; // Reactive!
  * }
  *

package/dist/useState.js

@@ -14,14 +14,14 @@ export function assignState(state, newState) {
  * @example
  * // ❌ Bad - destructuring loses reactivity
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   const { count, name } = state; // Don't do this!
  *   return () => <div>{count} {name}</div>; // Won't update!
  * }
  *
  * // ✅ Good - access properties directly in render
  * function Component(props) {
- *   const state = createState({ count: 0, name: "foo" });
+ *   const state = useState({ count: 0, name: "foo" });
  *   return () => <div>{state.count} {state.name}</div>; // Reactive!
  * }
  *
@@ -30,7 +30,7 @@ export function assignState(state, newState) {
  */
 export function useState(state) {
     if (getCurrentComponent()?.isRendering) {
-        throw new Error("createState cannot be called during render. Call it in component setup or globally.");
+        throw new Error("useState cannot be called during render. Call it in component setup or globally.");
     }
     return getProxy(state, {});
 }

package/dist/useView.js

@@ -2,7 +2,7 @@ import { getCurrentComponent } from "./component";
 import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 export function useView(...args) {
     if (!getCurrentComponent()) {
-        throw new Error("Only use createView in component setup");
+        throw new Error("Only use useView in component setup");
     }
     const result = {};
     const seen = new Set();

package/package.json

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