rask-ui 0.22.0 → 0.24.0

package/dist/compiler.d.ts

@@ -1,2 +1,4 @@
-export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
+export { createVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
+import { VNode } from "inferno";
+export declare function createComponentVNode(_: any, component: any, props: any | undefined, key: any, ref: any): VNode;
 //# sourceMappingURL=compiler.d.ts.map

package/dist/compiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC"}
+{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,GACV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAGL,KAAK,EACN,MAAM,SAAS,CAAC;AAIjB,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,GAAG,EACN,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,GAAG,YAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACP,KAAK,CASP"}

package/dist/compiler.js

@@ -1 +1,7 @@
-export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
+export { createVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";
+import { createComponentVNode as infernoCreateComponentVnode, } from "inferno";
+import { RaskComponent } from "./component";
+export function createComponentVNode(_, component, props = {}, key, ref) {
+    props.__component = component;
+    return infernoCreateComponentVnode(4 /* VNodeFlags.ComponentClass */, RaskComponent, props, key, ref);
+}

package/dist/component.d.ts

@@ -1,25 +1,12 @@
 import { VNode, Component, Props, InfernoNode } from "inferno";
 import { Observer, Signal } from "./observation";
-export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode) | ((props: P) => VNode);
-export declare class RaskStatelessComponent extends Component {
-    renderFn: RaskStatelessFunctionComponent<any>;
-    private isNotified;
-    private isReconciling;
-    observer: Observer;
-    propsSignals: Record<string, Signal>;
-    private reactiveProps;
-    shouldComponentUpdate(): boolean;
-    componentWillMount(): void;
-    componentWillReceiveProps(nextProps: any): void;
-    render(): any;
-}
-export declare function getCurrentComponent(): RaskStatefulComponent<any> | undefined;
+export declare function getCurrentComponent(): RaskComponent<any> | undefined;
 export declare function useMountEffect(cb: () => void): void;
 export declare function useCleanup(cb: () => void): void;
+export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode) | ((props: P) => VNode);
 export type RaskStatefulFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
-export declare class RaskStatefulComponent<P extends Props<any>> extends Component<P> {
-    setup: RaskStatefulFunctionComponent<P>;
-    private renderFn?;
+export declare class RaskComponent<P extends Props<any>> extends Component<P> {
+    renderFn: RaskStatelessFunctionComponent<P>;
     propsSignals: Record<string, Signal>;
     private reactiveProps;
     private isNotified;
@@ -42,5 +29,4 @@ export declare class RaskStatefulComponent<P extends Props<any>> extends Compone
     shouldComponentUpdate(): boolean;
     render(): any;
 }
-export declare function createComponent(props: Props<any>, key?: string): VNode;
 //# sourceMappingURL=component.d.ts.map

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,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAE,MAAM,EAAE,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,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAC9B,QAAQ,WAML;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAC1C,OAAO,CAAC,aAAa,CAAc;IAEnC,qBAAqB,IAAI,OAAO;IAMhC,kBAAkB,IAAI,IAAI;IAG1B,yBAAyB,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI;IAe/C,MAAM;CAoBP;AAID,wBAAgB,mBAAmB,2CAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;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,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAC1C,OAAO,CAAC,aAAa,CAAc;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAE9B,QAAQ,WAOL;IAEH,WAAW,UAAS;IACpB,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAcf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IAEnC,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAI5B,yBAAyB,CACvB,SAAS,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,CAAC,CAAC,GAClD,IAAI;IAcP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CA6CP;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,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAsB,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAMrE,wBAAgB,mBAAmB,mCAElC;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAAI,QAM5C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,QAMxC;AAED,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,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,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,8BAA8B,CAAC,CAAC,CAAC,CAAC;IACpD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAC1C,OAAO,CAAC,aAAa,CAAc;IAwBnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAS;IAE9B,QAAQ,WAOL;IAEH,WAAW,UAAS;IACpB,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAcf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IAEnC,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAI5B,yBAAyB,CACvB,SAAS,EAAE,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,CAAC,CAAC,GAClD,IAAI;IAcP,qBAAqB,IAAI,OAAO;IAMhC,MAAM;CAkDP"}

package/dist/component.js

@@ -1,61 +1,7 @@
-import { createComponentVNode, Component, } from "inferno";
+import { Component, } from "inferno";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 import { syncBatch } from "./batch";
 import { CatchErrorContext } from "./useCatchError";
-export class RaskStatelessComponent extends Component {
-    isNotified = false;
-    isReconciling = false;
-    observer = new Observer(() => {
-        if (this.isReconciling) {
-            this.isNotified = true;
-            return;
-        }
-        this.forceUpdate();
-    });
-    propsSignals = {};
-    reactiveProps;
-    shouldComponentUpdate() {
-        const shouldRender = this.isNotified;
-        this.isNotified = false;
-        this.isReconciling = false;
-        return shouldRender;
-    }
-    componentWillMount() {
-        this.reactiveProps = createReactiveProps(this);
-    }
-    componentWillReceiveProps(nextProps) {
-        this.isReconciling = true;
-        const prevProps = this.props;
-        this.props = nextProps;
-        syncBatch(() => {
-            for (const prop in this.propsSignals) {
-                if (prevProps[prop] === nextProps[prop]) {
-                    continue;
-                }
-                // This just triggers the signal
-                this.propsSignals[prop].notify();
-            }
-        });
-    }
-    render() {
-        const stopObserving = this.observer.observe();
-        let result = null;
-        try {
-            result = this.renderFn(this.reactiveProps);
-        }
-        catch (error) {
-            const notifyError = this.context.getContext?.(CatchErrorContext);
-            if (typeof notifyError !== "function") {
-                throw error;
-            }
-            notifyError(error);
-        }
-        finally {
-            stopObserving();
-        }
-        return result;
-    }
-}
 let currentComponent;
 export function getCurrentComponent() {
     return currentComponent;
@@ -72,8 +18,7 @@ export function useCleanup(cb) {
     }
     currentComponent.onCleanups.push(cb);
 }
-export class RaskStatefulComponent extends Component {
-    renderFn;
+export class RaskComponent extends Component {
     propsSignals = {};
     reactiveProps;
     // RECONCILIATION FLAGS
@@ -152,12 +97,19 @@ export class RaskStatefulComponent extends Component {
     }
     render() {
         currentComponent = this;
+        const stopObserving = this.observer.observe();
         if (!this.renderFn) {
             this.reactiveProps = createReactiveProps(this);
             try {
-                this.renderFn = this.setup(this.reactiveProps);
-                if (typeof this.renderFn !== "function") {
-                    throw new Error("Component must return a render function");
+                const component = this.props.__component;
+                const renderFn = component(this.reactiveProps);
+                if (typeof renderFn === "function") {
+                    this.renderFn = renderFn;
+                }
+                else {
+                    this.renderFn = component;
+                    // Since we ran a setup function we need to clear any signals accessed
+                    this.observer.clearSignals();
                 }
             }
             catch (error) {
@@ -168,16 +120,14 @@ export class RaskStatefulComponent extends Component {
                 return null;
             }
         }
-        const stopObserving = this.observer.observe();
         let result = null;
         try {
             this.isRendering = true;
-            result = this.renderFn();
+            result = this.renderFn(this.reactiveProps);
             this.isRendering = false;
         }
         catch (error) {
-            const notifyError = this.contexts.get(CatchErrorContext) ||
-                this.context.getContext?.(CatchErrorContext);
+            const notifyError = CatchErrorContext.use();
             if (typeof notifyError !== "function") {
                 throw error;
             }
@@ -190,9 +140,6 @@ export class RaskStatefulComponent extends Component {
         return result;
     }
 }
-export function createComponent(props, key) {
-    return createComponentVNode(4 /* VNodeFlags.ComponentClass */, RaskStatefulComponent, props, key);
-}
 function createReactiveProps(comp) {
     const props = new Proxy({}, {
         ownKeys() {

package/dist/createComputed.d.ts

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

package/dist/createComputed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComputed.d.ts","sourceRoot":"","sources":["../src/createComputed.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAChE,QAAQ,EAAE,CAAC,GACV;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACjC,CA0EA"}

package/dist/createComputed.js

@@ -0,0 +1,69 @@
+import { getCurrentComponent, createCleanup } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
+import { getCurrentObserver, Observer, Signal } from "./observation";
+export function createComputed(computed) {
+    const currentComponent = getCurrentComponent();
+    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,
+                });
+            }
+        });
+        createCleanup(() => 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/createContext.d.ts

@@ -1,32 +1,49 @@
 /**
- * Creates a context by wrapping a hook function that will be used as a context identifier.
+ * Creates a context that provides two methods: `use()` to consume context values and
+ * `inject()` to provide context values to child components.
  *
  * @warning **Do not destructure context values!** The returned value may be a reactive
  * object, and destructuring breaks reactivity.
  *
  * @example
- * // Create a context hook
- * const useTheme = createContext(() => {
+ * // Create a context
+ * const ThemeContext = createContext(() => {
  *   return useState({ color: "blue" });
  * });
  *
  * // Provider component
  * function App() {
- *   const theme = useInjectContext(useTheme);
+ *   const theme = ThemeContext.inject();
  *   // theme is now available to all children
  *   return () => <Child />;
  * }
  *
  * // Consumer component
  * function Child() {
- *   const theme = useContext(useTheme);
+ *   const theme = ThemeContext.use();
  *   return () => <div style={{ color: theme.color }}>Text</div>;
  * }
  *
  * @param hook - A function that will be used as the context identifier
- * @returns The same hook function, to be used with useContext() and useInjectContext()
+ * @returns An object with `use()` and `inject()` methods
  */
-export declare function createContext<T, P extends any[]>(hook: (...params: P) => T): (...params: P) => T;
-export declare function useContext<T, P extends any[]>(hook: (...params: P) => T): T;
-export declare function useInjectContext<T, P extends any[]>(hook: (...params: P) => T, ...params: P): T;
+export declare function createContext<T, P extends any[]>(hook: (...params: P) => T): {
+    /**
+     * Consumes the context value from the nearest parent component that called `inject()`.
+     * Must be called during component setup.
+     *
+     * @returns The context value provided by the nearest parent
+     * @throws Error if called outside component setup, if no parent context exists, or if the specific context was not provided
+     */
+    use(): any;
+    /**
+     * Injects a context value by calling the hook function and making it available to all child components.
+     * Must be called during component setup.
+     *
+     * @param params - Parameters to pass to the hook function
+     * @returns The context value created by the hook
+     * @throws Error if called outside component setup
+     */
+    inject(...params: P): T;
+};
 //# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC,eAAP,CAAC,KAAK,CAAC,CAE1E;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAkB3E;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,EACjD,IAAI,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC,EACzB,GAAG,MAAM,EAAE,CAAC,KAab"}
+{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAIH,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC;IAEvE;;;;;;OAMG;;IAsBH;;;;;;;OAOG;sBACe,CAAC;EActB"}

package/dist/createContext.js

@@ -1,55 +1,72 @@
 /**
- * Creates a context by wrapping a hook function that will be used as a context identifier.
+ * Creates a context that provides two methods: `use()` to consume context values and
+ * `inject()` to provide context values to child components.
  *
  * @warning **Do not destructure context values!** The returned value may be a reactive
  * object, and destructuring breaks reactivity.
  *
  * @example
- * // Create a context hook
- * const useTheme = createContext(() => {
+ * // Create a context
+ * const ThemeContext = createContext(() => {
  *   return useState({ color: "blue" });
  * });
  *
  * // Provider component
  * function App() {
- *   const theme = useInjectContext(useTheme);
+ *   const theme = ThemeContext.inject();
  *   // theme is now available to all children
  *   return () => <Child />;
  * }
  *
  * // Consumer component
  * function Child() {
- *   const theme = useContext(useTheme);
+ *   const theme = ThemeContext.use();
  *   return () => <div style={{ color: theme.color }}>Text</div>;
  * }
  *
  * @param hook - A function that will be used as the context identifier
- * @returns The same hook function, to be used with useContext() and useInjectContext()
+ * @returns An object with `use()` and `inject()` methods
  */
 import { getCurrentComponent } from "./component";
 export function createContext(hook) {
-    return hook;
-}
-export function useContext(hook) {
-    let currentComponent = getCurrentComponent();
-    if (!currentComponent) {
-        throw new Error("Only use useContext in component setup");
-    }
-    if (typeof currentComponent.context.getContext !== "function") {
-        throw new Error("There is no parent context");
-    }
-    const contextValue = currentComponent.context.getContext(hook);
-    if (!contextValue) {
-        throw new Error("There is a parent context, but not the one you are using");
-    }
-    return contextValue;
-}
-export function useInjectContext(hook, ...params) {
-    const currentComponent = getCurrentComponent();
-    if (!currentComponent) {
-        throw new Error("Only use useInjectContext in component setup");
-    }
-    const value = hook(...params);
-    currentComponent.contexts.set(hook, value);
-    return value;
+    return {
+        /**
+         * Consumes the context value from the nearest parent component that called `inject()`.
+         * Must be called during component setup.
+         *
+         * @returns The context value provided by the nearest parent
+         * @throws Error if called outside component setup, if no parent context exists, or if the specific context was not provided
+         */
+        use() {
+            let currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("Only use useContext in component setup");
+            }
+            if (typeof currentComponent.context.getContext !== "function") {
+                throw new Error("There is no parent context");
+            }
+            const contextValue = currentComponent.context.getContext(hook);
+            if (!contextValue) {
+                throw new Error("There is a parent context, but not the one you are using");
+            }
+            return contextValue;
+        },
+        /**
+         * Injects a context value by calling the hook function and making it available to all child components.
+         * Must be called during component setup.
+         *
+         * @param params - Parameters to pass to the hook function
+         * @returns The context value created by the hook
+         * @throws Error if called outside component setup
+         */
+        inject(...params) {
+            const currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("Only use useInjectContext in component setup");
+            }
+            const value = hook(...params);
+            currentComponent.contexts.set(hook, value);
+            return value;
+        },
+    };
 }

package/dist/createEffect.d.ts

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

package/dist/createEffect.d.ts.map

@@ -0,0 +1 @@
+{"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,QA2BzD"}

package/dist/createEffect.js

@@ -0,0 +1,29 @@
+import { syncBatch } from "./batch";
+import { createCleanup, getCurrentComponent } from "./component";
+import { Observer } from "./observation";
+export function createEffect(cb) {
+    const component = getCurrentComponent();
+    if (!component || component.isRendering) {
+        throw new Error("Only use createEffect in component setup");
+    }
+    let disposer;
+    const observer = new Observer(() => {
+        syncBatch(runEffect);
+    });
+    const runEffect = () => {
+        try {
+            disposer?.();
+        }
+        catch (error) {
+            console.error("Error in effect dispose function:", error);
+        }
+        const stopObserving = observer.observe();
+        disposer = cb();
+        stopObserving();
+    };
+    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,CA4BX"}

package/dist/createRouter.js

@@ -0,0 +1,27 @@
+import { createRouter as internalCreateRouter, } from "typed-client-router";
+import { getCurrentObserver, Signal } from "./observation";
+import { createCleanup, getCurrentComponent } from "./component";
+export function createRouter(config, options) {
+    if (!getCurrentComponent()) {
+        throw new Error("Only use createRouter in component setup");
+    }
+    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/createState.d.ts

@@ -1,3 +1,4 @@
+export declare function assignState<T extends object>(state: T, newState: T): T;
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
  *
@@ -23,4 +24,5 @@
  * @returns A reactive proxy of the state object
  */
 export declare function createState<T extends object>(state: T): T;
+export declare const PROXY_MARKER: unique symbol;
 //# sourceMappingURL=createState.d.ts.map

package/dist/createState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createState.d.ts","sourceRoot":"","sources":["../src/createState.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEzD"}
+{"version":3,"file":"createState.d.ts","sourceRoot":"","sources":["../src/createState.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,KAElE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAOzD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}

package/dist/createState.js

@@ -1,4 +1,9 @@
+import { getCurrentComponent } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 import { getCurrentObserver, Signal } from "./observation";
+export function assignState(state, newState) {
+    return Object.assign(state, newState);
+}
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
  *
@@ -24,11 +29,14 @@ import { getCurrentObserver, Signal } from "./observation";
  * @returns A reactive proxy of the state object
  */
 export function createState(state) {
-    return getProxy(state);
+    if (getCurrentComponent()?.isRendering) {
+        throw new Error("createState cannot be called during render. Call it in component setup or globally.");
+    }
+    return getProxy(state, {});
 }
 const proxyCache = new WeakMap();
-const PROXY_MARKER = Symbol("isProxy");
-function getProxy(value) {
+export const PROXY_MARKER = Symbol("isProxy");
+function getProxy(value, notifyInspectorRef) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {
         return value;
@@ -43,6 +51,9 @@ function getProxy(value) {
             if (key === PROXY_MARKER) {
                 return true;
             }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return true;
+            }
             return Reflect.has(target, key);
         },
         get(target, key) {
@@ -50,6 +61,9 @@ function getProxy(value) {
             if (key === PROXY_MARKER) {
                 return true;
             }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return !notifyInspectorRef.current;
+            }
             const value = Reflect.get(target, key);
             if (typeof key === "symbol" || typeof value === "function") {
                 return value;
@@ -61,11 +75,26 @@ function getProxy(value) {
             }
             if (Array.isArray(value) ||
                 (typeof value === "object" && value !== null)) {
-                return getProxy(value);
+                return getProxy(value, INSPECTOR_ENABLED && notifyInspectorRef.current
+                    ? {
+                        current: {
+                            notify: notifyInspectorRef.current.notify,
+                            path: notifyInspectorRef.current.path.concat(key),
+                        },
+                    }
+                    : notifyInspectorRef);
             }
             return value;
         },
         set(target, key, newValue) {
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return newValue.current;
+                    },
+                });
+                return Reflect.set(target, key, newValue);
+            }
             if (typeof key === "symbol") {
                 return Reflect.set(target, key, newValue);
             }
@@ -73,10 +102,16 @@ function getProxy(value) {
             const setResult = Reflect.set(target, key, newValue);
             // We only notify if actual change, though array length actually updates under the hood
             if (newValue !== oldValue || (Array.isArray(value) && key === "length")) {
-                console.log("WTF", key, newValue);
                 const signal = signals[key];
                 signal?.notify();
             }
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "mutation",
+                    path: notifyInspectorRef.current.path,
+                    value: newValue,
+                });
+            }
             return setResult;
         },
         deleteProperty(target, key) {