rask-ui 0.1.0

package/README.md

@@ -0,0 +1,263 @@
+# RASK
+
+A lightweight reactive component library built on [Snabbdom](https://github.com/snabbdom/snabbdom) with MobX-inspired reactivity.
+
+## Component and Element Lifecycle
+
+### Overview
+
+RASK uses a **host-based architecture** where each component creates a host DOM element (`<component>` tag with `display: contents`) and manages its own virtual DOM independently. Components track their direct children for efficient cleanup detection.
+
+### Component Lifecycle Phases
+
+#### 1. Component Creation
+
+```tsx
+function MyComponent(props) {
+  // Setup Phase - runs ONCE per component instance
+  const state = createState({ count: 0 });
+  const ref = createRef();
+
+  onMount(() => console.log('Mounted!'));
+  onCleanup(() => console.log('Cleaning up!'));
+
+  // Return render function
+  return () => <div ref={ref}>{state.count}</div>;
+}
+```
+
+**What happens:**
+- `createComponentInstance()` creates a new component instance
+- Component function executes (setup phase)
+- `createState()` creates reactive state
+- `onMount()` and `onCleanup()` register lifecycle callbacks
+- Render function is stored on the instance
+- Instance is wrapped with an observer for reactivity
+
+#### 2. Initial Render
+
+```
+render(<MyComponent />, container)
+  ↓
+jsxToVNode() - Convert JSX to VNode
+  ↓
+renderComponent() - Create component instance
+  ↓
+observer(() => { /* render function */ })
+  ↓
+Initial render (hostElement = null)
+  ↓
+Store child VNodes for host element creation
+  ↓
+Create host <component> VNode with children
+  ↓
+patch() - Superfine creates DOM
+  ↓
+setupComponentInstances() - Walk VNode tree
+  ↓
+Set instance.hostElement from vnode.node
+  ↓
+Store instance on element.__componentInstance
+  ↓
+Find parent component via DOM traversal
+  ↓
+Add to parent.children Set
+  ↓
+Run onMount() callbacks
+```
+
+**Key steps:**
+1. **JSX to VNode**: JSX is converted to Superfine VNodes
+2. **Component Instance Creation**: Each component gets a unique instance
+3. **Observer Setup**: Render function is wrapped to track state dependencies
+4. **Initial Render**: Observer runs but hostElement is null, so child VNodes are stored
+5. **Host Element Creation**: A `<component>` VNode is created with the children
+6. **Superfine Patch**: Superfine creates actual DOM elements
+7. **Instance Setup**: VNode tree is walked to set `hostElement` from `vnode.node`
+8. **Parent-Child Tracking**: Each instance finds its parent and registers as a child
+9. **Mount Callbacks**: `onMount()` callbacks run after DOM is ready
+
+#### 3. State Changes and Re-renders
+
+```
+state.count++ (or props change)
+  ↓
+Observer notified (reactive dependency)
+  ↓
+observer() callback executes
+  ↓
+Render function executes
+  ↓
+jsx() - Convert new JSX to VNodes
+  ↓
+patch(hostNode, newVNode)
+  ↓
+Snabbdom updates DOM
+```
+
+**Key steps:**
+1. **State Change**: Setting a state property notifies observers
+2. **Observer Execution**: The component's observer callback runs
+3. **Re-render**: Render function executes, accessing state (tracks dependencies)
+4. **JSX to VNode**: New JSX is converted to VNodes
+5. **Patch**: Snabbdom updates the host element's children
+
+#### 4. Component Cleanup
+
+**Cleanup happens in two scenarios:**
+
+##### A. Parent Re-renders and Removes Child
+
+```
+Parent re-renders
+  ↓
+patch(parentHost, newVNode)
+  ↓
+Snabbdom removes child <component> from DOM
+  ↓
+Destroy hook called
+  ↓
+Run cleanupCallbacks
+```
+
+**Key steps:**
+1. **Detection**: Snabbdom's destroy hook is called when element is removed
+2. **Callbacks**: `onCleanup()` callbacks execute (clear timers, subscriptions, etc.)
+
+### Element Lifecycle (Regular DOM Elements)
+
+Regular DOM elements (div, span, etc.) follow Snabbdom's patching lifecycle:
+
+```
+JSX: <div>Hello</div>
+  ↓
+jsx() creates VNode
+  ↓
+patch() creates or updates DOM
+  ↓
+vnode.elm contains DOM element
+```
+
+**Key points:**
+- Regular elements don't create component instances
+- They're managed entirely by Snabbdom's patch algorithm
+- No special cleanup needed (browser handles DOM removal)
+
+### Parent-Child Relationship Tracking
+
+Components track their parent via the component stack during initialization:
+
+```
+componentStack.unshift(instance)
+const render = component(instance.reactiveProps)
+```
+
+**Key points:**
+- Parent-child relationships tracked through component stack
+- Used for context propagation
+- Cleanup handled by Snabbdom's destroy hooks
+
+### Complete Lifecycle Example
+
+```tsx
+function Counter() {
+  // SETUP PHASE (once)
+  const state = createState({ count: 0 });
+
+  onMount(() => {
+    console.log('Counter mounted');
+  });
+
+  onCleanup(() => {
+    console.log('Counter cleaning up');
+  });
+
+  // RENDER PHASE (every update)
+  return () => (
+    <div>
+      <p>Count: {state.count}</p>
+      <button onClick={() => state.count++}>+</button>
+    </div>
+  );
+}
+
+// Mount
+render(<Counter />, document.getElementById('app'));
+// Logs: "Counter mounted"
+
+// User clicks button
+// → state.count++ triggers observer
+// → Render function executes
+// → DOM updates via patch()
+
+// Component removed (parent re-renders without it)
+// → Snabbdom destroy hook called
+// → Logs: "Counter cleaning up"
+```
+
+## Key Architectural Decisions
+
+### 1. Host-Based Architecture
+- Each component has a host `<component>` element (display: contents)
+- Components render independently to their own host
+- No parent-child instance relationships for rendering
+- Isolation enables fine-grained updates
+
+### 2. Lifecycle Management
+- Snabbdom hooks manage component lifecycle
+- Insert hook runs onMount callbacks
+- Destroy hook runs onCleanup callbacks
+- Parent-child tracking for context propagation
+
+### 3. Observer Pattern for Reactivity
+- Render functions wrapped with observer
+- Automatically tracks state/props access
+- Re-renders only when observed properties change
+- No manual subscriptions needed
+
+### 4. Context Traversal
+- Context walks component tree via parent references
+- Set during component initialization
+- Natural hierarchical lookup
+- Works with host element architecture
+
+### 5. Hook-Based Cleanup
+- Cleanup callbacks run via Snabbdom destroy hooks
+- Synchronous and predictable
+- No manual tracking required
+- Integrated with virtual DOM lifecycle
+
+### 6. Thunk-Based Components
+
+Components use Snabbdom's thunk feature for optimization:
+
+```tsx
+const thunkNode = thunk("component", props.key, component, [props, children]);
+```
+
+**How it works:**
+- Components wrapped as thunks with custom hooks
+- Init hook: Creates component instance and runs setup
+- Prepatch hook: Updates reactive props before render
+- Postpatch hook: Syncs props after patch
+- Insert hook: Runs onMount callbacks
+- Destroy hook: Runs onCleanup callbacks
+
+**Benefits:**
+- Leverages Snabbdom's thunk optimization
+- Props changes trigger reactive updates
+- Lifecycle hooks integrated with virtual DOM
+- Efficient component reconciliation
+
+## API Reference
+
+See main [README](../../README.md) for full API details:
+- `createState(initialState)` - Create reactive state
+- `onMount(callback)` - Register mount callback
+- `onCleanup(callback)` - Register cleanup callback
+- `createContext()` - Create context for data sharing
+- `createAsync(promise)` - Handle async operations
+- `createQuery(fetcher)` - Create query with refetch
+- `createMutation(mutator)` - Create mutation handler
+- `ErrorBoundary` - Error boundary component
+- `render(jsx, container)` - Mount component to DOM

package/dist/component.d.ts

@@ -0,0 +1,21 @@
+import { type VNode } from "snabbdom";
+import { Observer } from "./observation";
+import { ChildNode } from "./render";
+export type Component<P> = ((props: P) => () => VNode) | (() => () => VNode);
+export type ComponentInstance = {
+    parent: ComponentInstance | null;
+    component: Component<any>;
+    contexts: Map<object, object> | null;
+    onMounts: Array<() => void>;
+    onCleanups: Array<() => void>;
+    hostNode?: VNode;
+    observer: Observer;
+    reactiveProps: object;
+    error: unknown;
+    notifyError(error: unknown): void;
+};
+export declare function getCurrentComponent(): ComponentInstance;
+export declare function onMount(cb: () => void): void;
+export declare function onCleanup(cb: () => void): void;
+export declare function createComponent(component: Component<any>, props: Record<string, unknown>, children: ChildNode[] | ChildNode): import("snabbdom").Thunk;
+//# sourceMappingURL=component.d.ts.map

package/dist/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,KAAK,EAAkB,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AACrE,OAAO,EAAc,SAAS,EAAE,MAAM,UAAU,CAAC;AAGjD,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,GAAG,CAAC,MAAM,MAAM,KAAK,CAAC,CAAC;AAE7E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAIF,wBAAgB,mBAAmB,sBAElC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAQrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAQvC;AAwGD,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,4BAOlC"}

package/dist/component.js

@@ -0,0 +1,128 @@
+import { thunk } from "snabbdom";
+import { getCurrentObserver, Observer, Signal } from "./observation";
+import { jsx, patch } from "./render";
+import { createState } from "./createState";
+const componentStack = [];
+export function getCurrentComponent() {
+    return componentStack[0] || null;
+}
+export function onMount(cb) {
+    const current = componentStack[0];
+    if (!current) {
+        throw new Error("Only use onMount in component setup");
+    }
+    current.onMounts.push(cb);
+}
+export function onCleanup(cb) {
+    const current = componentStack[0];
+    if (!current) {
+        throw new Error("Only use onCleanup in component setup");
+    }
+    current.onCleanups.push(cb);
+}
+const hook = {
+    insert(vnode) {
+        componentStack.shift();
+        vnode.data.componentInstance.onMounts.forEach((cb) => cb());
+    },
+    destroy(vnode) {
+        componentStack.shift();
+        vnode.data.componentInstance.onCleanups.forEach((cb) => cb());
+    },
+    prepatch(oldVnode, thunk) {
+        copyToThunk(oldVnode, thunk);
+        componentStack.unshift(thunk.data.componentInstance);
+    },
+    postpatch(_, newNode) {
+        const componentInstance = newNode.data.componentInstance;
+        componentStack.shift();
+        const props = newNode.data.args[0];
+        const children = newNode.data.args[1];
+        for (const key in props) {
+            componentInstance.reactiveProps[key] = props[key];
+        }
+        componentInstance.reactiveProps.children = children;
+    },
+    init(thunk) {
+        const component = thunk.data.fn;
+        const args = thunk.data.args;
+        let errorSignal;
+        let error;
+        const executeRender = () => {
+            const stopObserving = instance.observer.observe();
+            let renderResult = null;
+            try {
+                renderResult = render();
+            }
+            catch (error) {
+                instance.notifyError(error);
+            }
+            finally {
+                stopObserving();
+            }
+            return jsx("component", {
+                hook: {
+                    insert: hook.insert,
+                    destroy: hook.destroy,
+                },
+                "data-name": component.name,
+            }, Array.isArray(renderResult) ? renderResult : [renderResult]);
+        };
+        const instance = {
+            parent: getCurrentComponent(),
+            component,
+            contexts: null,
+            onMounts: [],
+            onCleanups: [],
+            observer: new Observer(() => {
+                const renderResult = executeRender();
+                instance.hostNode = patch(instance.hostNode, renderResult);
+            }),
+            reactiveProps: createState({
+                ...args[0],
+                children: args[1],
+            }),
+            get error() {
+                if (!errorSignal) {
+                    errorSignal = new Signal();
+                }
+                const observer = getCurrentObserver();
+                if (observer) {
+                    observer.subscribeSignal(errorSignal);
+                }
+                return error;
+            },
+            notifyError(childError) {
+                if (errorSignal) {
+                    error = childError;
+                    errorSignal.notify();
+                }
+                else if (instance.parent) {
+                    instance.parent.notifyError(childError);
+                }
+                else {
+                    throw childError;
+                }
+            },
+        };
+        componentStack.unshift(instance);
+        const render = component(instance.reactiveProps);
+        const renderResult = executeRender();
+        renderResult.data.componentInstance = instance;
+        copyToThunk(renderResult, thunk);
+        instance.hostNode = thunk;
+    },
+};
+export function createComponent(component, props, children) {
+    const thunkNode = thunk("component", props.key, component, [props, children]);
+    Object.assign(thunkNode.data.hook, hook);
+    return thunkNode;
+}
+function copyToThunk(vnode, thunk) {
+    vnode.data.fn = thunk.data.fn;
+    vnode.data.args = thunk.data.args;
+    thunk.data = vnode.data;
+    thunk.children = vnode.children;
+    thunk.text = vnode.text;
+    thunk.elm = vnode.elm;
+}

package/dist/context.d.ts

@@ -0,0 +1,5 @@
+export declare function createContext<T extends object>(): {
+    set(value: T): void;
+    get(): T;
+};
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM;eAE/B,CAAC;WAaL,CAAC;EAmBX"}

package/dist/context.js

@@ -0,0 +1,29 @@
+import { getCurrentComponent } from "./component";
+export function createContext() {
+    const context = {
+        set(value) {
+            const currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("You can not set context out component setup");
+            }
+            if (!currentComponent.contexts) {
+                currentComponent.contexts = new Map();
+            }
+            currentComponent.contexts.set(context, value);
+        },
+        get() {
+            let currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("You can not set context out component setup");
+            }
+            while (currentComponent) {
+                if (currentComponent.contexts?.has(context)) {
+                    return currentComponent.contexts.get(context);
+                }
+                currentComponent = currentComponent.parent;
+            }
+            throw new Error("Could not find context in parent components");
+        },
+    };
+    return context;
+}

package/dist/createAsync.d.ts

@@ -0,0 +1,16 @@
+type AsyncState<T> = {
+    isPending: true;
+    value: null;
+    error: null;
+} | {
+    isPending: false;
+    value: T;
+    error: null;
+} | {
+    isPending: false;
+    value: null;
+    error: string;
+};
+export declare function createAsync<T>(promise: Promise<T>): AsyncState<T>;
+export {};
+//# sourceMappingURL=createAsync.d.ts.map

package/dist/createAsync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAsync.d.ts","sourceRoot":"","sources":["../src/createAsync.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,CAAC,CAAC,IACb;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,iBAwBjD"}

package/dist/createAsync.js

@@ -0,0 +1,24 @@
+import { createState } from "./createState";
+export function createAsync(promise) {
+    const state = createState({
+        isPending: true,
+        error: null,
+        value: null,
+    });
+    promise
+        .then((value) => {
+        Object.assign(state, {
+            value,
+            error: null,
+            isPending: false,
+        });
+    })
+        .catch((error) => {
+        Object.assign(state, {
+            value: null,
+            error: String(error),
+            isPending: false,
+        });
+    });
+    return state;
+}

package/dist/createAsyncState.d.ts

@@ -0,0 +1,16 @@
+type AsyncState<T> = {
+    isPending: true;
+    value: null;
+    error: null;
+} | {
+    isPending: false;
+    value: T;
+    error: null;
+} | {
+    isPending: false;
+    value: null;
+    error: string;
+};
+export declare function createAsyncState<T>(promise: Promise<T>): AsyncState<T>;
+export {};
+//# sourceMappingURL=createAsyncState.d.ts.map

package/dist/createAsyncState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAsyncState.d.ts","sourceRoot":"","sources":["../src/createAsyncState.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,CAAC,CAAC,IACb;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,iBAwBtD"}

package/dist/createAsyncState.js

@@ -0,0 +1,24 @@
+import { createState } from "./createState";
+export function createAsyncState(promise) {
+    const state = createState({
+        isPending: true,
+        error: null,
+        value: null,
+    });
+    promise
+        .then((value) => {
+        Object.assign(state, {
+            value,
+            error: null,
+            isPending: false,
+        });
+    })
+        .catch((error) => {
+        Object.assign(state, {
+            value: null,
+            error: String(error),
+            isPending: false,
+        });
+    });
+    return state;
+}

package/dist/createContext.d.ts

@@ -0,0 +1,5 @@
+export declare function createContext<T extends object>(): {
+    set(value: T): void;
+    get(): T;
+};
+//# sourceMappingURL=createContext.d.ts.map

package/dist/createContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../src/createContext.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM;eAE/B,CAAC;WAaL,CAAC;EAmBX"}

package/dist/createContext.js

@@ -0,0 +1,29 @@
+import { getCurrentComponent } from "./component";
+export function createContext() {
+    const context = {
+        set(value) {
+            const currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("You can not set context out component setup");
+            }
+            if (!currentComponent.contexts) {
+                currentComponent.contexts = new Map();
+            }
+            currentComponent.contexts.set(context, value);
+        },
+        get() {
+            let currentComponent = getCurrentComponent();
+            if (!currentComponent) {
+                throw new Error("You can not set context out component setup");
+            }
+            while (currentComponent) {
+                if (currentComponent.contexts?.has(context)) {
+                    return currentComponent.contexts.get(context);
+                }
+                currentComponent = currentComponent.parent;
+            }
+            throw new Error("Could not find context in parent components");
+        },
+    };
+    return context;
+}

package/dist/createMutation.d.ts

@@ -0,0 +1,20 @@
+type MutationState<T> = {
+    isPending: true;
+    params: T;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    error: null;
+} | {
+    isPending: false;
+    params: null;
+    error: string;
+};
+export type Mutation<T> = MutationState<T> & {
+    mutate(): void;
+    mutate(params: T): void;
+};
+export declare function createMutation<T>(mutator: (params: T) => Promise<T>): Mutation<T>;
+export {};
+//# sourceMappingURL=createMutation.d.ts.map

package/dist/createMutation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMutation.d.ts","sourceRoot":"","sources":["../src/createMutation.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,CAAC,CAAC,IAChB;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IAC3C,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,CAAC,EAC9B,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GACjC,QAAQ,CAAC,CAAC,CAAC,CA0Db"}

package/dist/createMutation.js

@@ -0,0 +1,53 @@
+import { createState } from "./createState";
+export function createMutation(mutator) {
+    const state = createState({
+        isPending: false,
+        params: null,
+        error: null,
+    });
+    const assign = (newState) => {
+        Object.assign(state, newState);
+    };
+    let currentAbortController;
+    return {
+        get isPending() {
+            return state.isPending;
+        },
+        get params() {
+            return state.params;
+        },
+        get error() {
+            return state.error;
+        },
+        mutate(params) {
+            currentAbortController?.abort();
+            const abortController = (currentAbortController = new AbortController());
+            assign({
+                isPending: true,
+                params,
+                error: null,
+            });
+            mutator(params)
+                .then(() => {
+                if (abortController.signal.aborted) {
+                    return;
+                }
+                assign({
+                    isPending: false,
+                    params: null,
+                    error: null,
+                });
+            })
+                .catch((error) => {
+                if (abortController.signal.aborted) {
+                    return;
+                }
+                assign({
+                    isPending: false,
+                    params: null,
+                    error: String(error),
+                });
+            });
+        },
+    };
+}

package/dist/createQuery.d.ts

@@ -0,0 +1,19 @@
+type QueryState<T> = {
+    isPending: true;
+    data: T | null;
+    error: null;
+} | {
+    isPending: false;
+    data: T;
+    error: null;
+} | {
+    isPending: false;
+    data: null;
+    error: string;
+};
+export type Query<T> = QueryState<T> & {
+    fetch(force?: boolean): void;
+};
+export declare function createQuery<T>(fetcher: () => Promise<T>): Query<T>;
+export {};
+//# sourceMappingURL=createQuery.d.ts.map