rask-ui 0.6.0 → 0.8.0

package/README.md

@@ -10,6 +10,29 @@ A lightweight reactive component library that combines the simplicity of observa
 npm install rask-ui
 ```
 
+---
+
+## 📢 Open For Feedback
+
+**RASK is feature-complete and ready for community feedback!**
+
+The core implementation is finished, including:
+- ✅ Inferno-based reconciler for powerful UI expression
+- ✅ JSX transformation plugin (Inferno JSX + stateful components)
+- ✅ Reactive primitives for simple state management
+
+**Before the official release, we need your input:**
+- Would a library like this be valuable for your projects?
+- Is the API clear and intuitive?
+- Is the documentation helpful and complete?
+- Does the approach resonate with you?
+
+**[Share your feedback by creating an issue →](https://github.com/christianalfoni/rask/issues/new)**
+
+Your feedback will directly shape the final release. All perspectives welcome!
+
+---
+
 ## The Itch with Modern UI Frameworks
 
 Modern UI frameworks present developers with a fundamental tradeoff between state management and UI expression:
@@ -195,7 +218,7 @@ When `state.count` changes in Parent, only Child re-renders because it accesses
 
 ### One Rule To Accept
 
-**RASK has observable primitives**: Never destructure reactive objects (state, props, context values, async, query, mutation). Destructuring extracts plain values and breaks reactivity.
+**RASK has observable primitives**: Never destructure reactive objects (state, props, context values, tasks). Destructuring extracts plain values and breaks reactivity.
 
 ```tsx
 // ❌ BAD - Destructuring breaks reactivity
@@ -241,9 +264,7 @@ Reactive objects are implemented using JavaScript Proxies. When you access a pro
 - `createState()` - Never destructure state objects
 - Props - Never destructure component props
 - `createContext().get()` - Never destructure context values
-- `createAsync()` - Never destructure async state
-- `createQuery()` - Never destructure query objects
-- `createMutation()` - Never destructure mutation objects
+- `createTask()` - Never destructure task objects
 - `createView()` - Never destructure view objects
 - `createComputed()` - Never destructure computed objects
 
@@ -661,58 +682,38 @@ function Child() {
 
 ### Async Data Management
 
-#### `createAsync<T>(promise)`
+#### `createTask<T, P>(task)`
 
-Creates reactive state for async operations with loading and error states.
+Creates a low-level reactive primitive for managing async operations with loading, error, and result states. This is a generic primitive that gives you full control over async state management without prescribing patterns.
 
 ```tsx
-import { createAsync } from "rask-ui";
+import { createTask } from "rask-ui";
 
+// Simple task without parameters - auto-runs on creation
 function UserProfile() {
-  const user = createAsync(fetch("/api/user").then((r) => r.json()));
+  const user = createTask(() => fetch("/api/user").then((r) => r.json()));
 
-  return () => }
-    if (user.isPending) {
-      return <p>Loading...</p>
+  return () => {
+    if (user.isRunning) {
+      return <p>Loading...</p>;
     }
 
     if (user.error) {
-      return <p>Error: {user.error}</p>
+      return <p>Error: {user.error}</p>;
     }
 
-    return <p>Hello, {user.value.name}!</p>
+    return <p>Hello, {user.result.name}!</p>;
+  };
 }
-```
-
-**Parameters:**
-
-- `promise: Promise<T>` - The promise to track
-
-**Returns:** Reactive object with:
-
-- `isPending: boolean` - True while promise is pending
-- `value: T | null` - Resolved value (null while pending or on error)
-- `error: string | null` - Error message (null while pending or on success)
-
-**States:**
-
-- `{ isPending: true, value: null, error: null }` - Loading
-- `{ isPending: false, value: T, error: null }` - Success
-- `{ isPending: false, value: null, error: string }` - Error
-
----
-
-#### `createQuery<T>(fetcher)`
-
-Creates a query with refetch capability and request cancellation.
-
-```tsx
-import { createQuery } from "rask-ui";
 
+// Task with parameters - control when to run
 function Posts() {
-  const posts = createQuery(() => fetch("/api/posts").then((r) => r.json()));
+  const posts = createTask((page: number) =>
+    fetch(`/api/posts?page=${page}`).then((r) => r.json())
+  );
+
   const renderPosts = () => {
-    if (posts.isPending) {
+    if (posts.isRunning) {
       return <p>Loading...</p>;
     }
 
@@ -720,61 +721,37 @@ function Posts() {
       return <p>Error: {posts.error}</p>;
     }
 
-    return posts.data.map((post) => (
+    if (!posts.result) {
+      return <p>No posts loaded</p>;
+    }
+
+    return posts.result.map((post) => (
       <article key={post.id}>{post.title}</article>
     ));
   };
 
   return () => (
     <div>
-      <button onClick={() => posts.fetch()}>Refresh</button>
-      <button onClick={() => posts.fetch(true)}>Force Refresh</button>
+      <button onClick={() => posts.run(1)}>Load Page 1</button>
+      <button onClick={() => posts.rerun(1)}>Reload Page 1</button>
       {renderPosts()}
     </div>
   );
 }
-```
-
-**Parameters:**
-
-- `fetcher: () => Promise<T>` - Function that returns a promise
-
-**Returns:** Query object with:
-
-- `isPending: boolean` - True while fetching
-- `data: T | null` - Fetched data
-- `error: string | null` - Error message
-- `fetch(force?: boolean)` - Refetch data
-  - `force: false` (default) - Keep existing data while refetching
-  - `force: true` - Clear data before refetching
-
-**Features:**
-
-- Automatic request cancellation on refetch
-- Keeps old data by default during refetch
-- Automatically fetches on creation
-
----
-
-#### `createMutation<T>(mutator)`
-
-Creates a mutation for data updates with pending and error states.
-
-```tsx
-import { createMutation } from "rask-ui";
 
+// Mutation-style usage
 function CreatePost() {
   const state = createState({ title: "", body: "" });
 
-  const create = createMutation((data) =>
+  const create = createTask((data: { title: string; body: string }) =>
     fetch("/api/posts", {
       method: "POST",
       body: JSON.stringify(data),
-    }))
+    }).then((r) => r.json())
   );
 
   const handleSubmit = () => {
-    create.mutate({ title: state.title, body: state.body });
+    create.run({ title: state.title, body: state.body });
   };
 
   return () => (
@@ -787,8 +764,8 @@ function CreatePost() {
         value={state.body}
         onInput={(e) => (state.body = e.target.value)}
       />
-      <button disabled={create.isPending}>
-        {create.isPending ? "Creating..." : "Create"}
+      <button disabled={create.isRunning}>
+        {create.isRunning ? "Creating..." : "Create"}
       </button>
       {create.error && <p>Error: {create.error}</p>}
     </form>
@@ -796,22 +773,72 @@ function CreatePost() {
 }
 ```
 
-**Parameters:**
+**Type Signatures:**
+
+```tsx
+// Task without parameters - auto-runs on creation
+createTask<T>(task: () => Promise<T>): Task<T, never> & {
+  run(): Promise<T>;
+  rerun(): Promise<T>;
+}
+
+// Task with parameters - manual control
+createTask<T, P>(task: (params: P) => Promise<T>): Task<T, P> & {
+  run(params: P): Promise<T>;
+  rerun(params: P): Promise<T>;
+}
+```
+
+**Returns:** Task object with reactive state and methods:
 
-- `mutator: (params: T) => Promise<T>` - Function that performs the mutation
+**State Properties:**
+- `isRunning: boolean` - True while task is executing
+- `result: T | null` - Result of successful execution (null if not yet run, running, or error)
+- `error: string | null` - Error message from failed execution (null if successful or running)
+- `params: P | null` - Current parameters while running (null when idle)
 
-**Returns:** Mutation object with:
+**Methods:**
+- `run(params?: P): Promise<T>` - Execute the task, clearing previous result
+- `rerun(params?: P): Promise<T>` - Re-execute the task, keeping previous result until new one arrives
 
-- `isPending: boolean` - True while mutation is in progress
-- `params: T | null` - Current mutation parameters
-- `error: string | null` - Error message
-- `mutate(params: T)` - Execute the mutation
+**State Transitions:**
+
+Initial state (no params):
+```tsx
+{ isRunning: false, params: null, result: null, error: null }
+```
+
+While running:
+```tsx
+{ isRunning: true, result: T | null, params: P, error: null }
+```
+
+Success:
+```tsx
+{ isRunning: false, params: null, result: T, error: null }
+```
+
+Error:
+```tsx
+{ isRunning: false, params: null, result: null, error: string }
+```
 
 **Features:**
 
-- Automatic request cancellation if mutation called again
-- Tracks mutation parameters
-- Resets state after successful completion
+- **Automatic cancellation** - Previous executions are cancelled when a new one starts
+- **Flexible control** - Use `run()` to clear old data or `rerun()` to keep it during loading
+- **Type-safe** - Full TypeScript inference for parameters and results
+- **Auto-run support** - Tasks without parameters run automatically on creation
+- **Generic primitive** - Build your own patterns on top (queries, mutations, etc.)
+
+**Usage Patterns:**
+
+Use `createTask` as a building block for various async patterns:
+- **Queries**: Tasks that fetch data and can be refetched
+- **Mutations**: Tasks that modify server state
+- **Polling**: Tasks that run periodically
+- **Debounced searches**: Tasks that run based on user input
+- **File uploads**: Tasks that track upload progress
 
 ---
 

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;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}
+{"version":3,"file":"createState.d.ts","sourceRoot":"","sources":["../src/createState.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAEzD;AAGD,eAAO,MAAM,YAAY,eAAoB,CAAC"}

package/dist/createState.js

@@ -1,3 +1,4 @@
+import { INSPECT_MARKER } from "./inspect";
 import { getCurrentObserver, Signal } from "./observation";
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
@@ -28,7 +29,7 @@ export function createState(state) {
 }
 const proxyCache = new WeakMap();
 export const PROXY_MARKER = Symbol("isProxy");
-function getProxy(value) {
+function getProxy(value, notifyInspector, path) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {
         return value;
@@ -47,7 +48,7 @@ function getProxy(value) {
         },
         get(target, key) {
             // Mark this as a proxy to prevent double-wrapping
-            if (key === PROXY_MARKER) {
+            if (key === PROXY_MARKER || key === INSPECT_MARKER) {
                 return true;
             }
             const value = Reflect.get(target, key);
@@ -61,11 +62,16 @@ function getProxy(value) {
             }
             if (Array.isArray(value) ||
                 (typeof value === "object" && value !== null)) {
-                return getProxy(value);
+                return getProxy(value, notifyInspector, notifyInspector ? (path ? path.concat(key) : [key]) : undefined);
             }
             return value;
         },
         set(target, key, newValue) {
+            if (key === INSPECT_MARKER) {
+                notifyInspector = newValue.fn;
+                path = newValue.path;
+                return Reflect.set(target, key, newValue);
+            }
             if (typeof key === "symbol") {
                 return Reflect.set(target, key, newValue);
             }
@@ -76,6 +82,11 @@ function getProxy(value) {
                 const signal = signals[key];
                 signal?.notify();
             }
+            notifyInspector?.({
+                type: "mutation",
+                path: path ? path.concat(key) : [key],
+                value: newValue,
+            });
             return setResult;
         },
         deleteProperty(target, key) {

package/dist/createTask.d.ts

@@ -0,0 +1,30 @@
+export type Task<T, P> = {
+    isRunning: false;
+    params: null;
+    result: null;
+    error: null;
+} | {
+    isRunning: true;
+    result: T | null;
+    params: P;
+    error: null;
+} | {
+    isRunning: false;
+    params: null;
+    result: T;
+    error: null;
+} | {
+    isRunning: false;
+    params: null;
+    result: null;
+    error: string;
+};
+export declare function createTask<T>(task: () => Promise<T>): Task<T, never> & {
+    run(): Promise<T>;
+    rerun(): Promise<T>;
+};
+export declare function createTask<T, P>(task: (params: P) => Promise<T>): Task<T, P> & {
+    run(params: P): Promise<T>;
+    rerun(params: P): Promise<T>;
+};
+//# sourceMappingURL=createTask.d.ts.map

package/dist/createTask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTask.d.ts","sourceRoot":"","sources":["../src/createTask.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC,IACjB;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,CAAC,CAAC;IACV,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IACtE,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IAClB,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AACF,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAC9B,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACd,GAAG,CAAC,MAAM,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC"}

package/dist/createTask.js

@@ -0,0 +1,76 @@
+import { createState } from "./createState";
+export function createTask(task) {
+    const state = createState({
+        isRunning: false,
+        result: null,
+        error: null,
+        params: null,
+    });
+    const assign = (newState) => {
+        Object.assign(state, newState);
+    };
+    let currentAbortController;
+    const fetch = (params) => {
+        currentAbortController?.abort();
+        const abortController = (currentAbortController = new AbortController());
+        const promise = task(params);
+        promise
+            .then((result) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assign({
+                isRunning: false,
+                result,
+                error: null,
+                params: null,
+            });
+        })
+            .catch((error) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            assign({
+                isRunning: false,
+                result: null,
+                error: String(error),
+                params: null,
+            });
+        });
+        return promise;
+    };
+    return {
+        get isRunning() {
+            return state.isRunning;
+        },
+        get result() {
+            return state.result;
+        },
+        get error() {
+            return state.error;
+        },
+        get params() {
+            return state.params;
+        },
+        run(params) {
+            const promise = fetch(params);
+            assign({
+                isRunning: true,
+                result: null,
+                error: null,
+                params: (params || null),
+            });
+            return promise;
+        },
+        rerun(params) {
+            const promise = fetch(params);
+            assign({
+                isRunning: true,
+                result: state.result,
+                error: null,
+                params: (params || null),
+            });
+            return promise;
+        },
+    };
+}

package/dist/createView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createView.d.ts","sourceRoot":"","sources":["../src/createView.ts"],"names":[],"mappings":"AAAA,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,CA0Bd"}
+{"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,CA4Dd"}

package/dist/createView.js

@@ -1,3 +1,4 @@
+import { INSPECT_MARKER } 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.
@@ -44,6 +45,7 @@
 export function createView(...args) {
     const result = {};
     const seen = new Set();
+    let notifyInspector;
     for (let i = args.length - 1; i >= 0; i--) {
         const src = args[i];
         // mimic Object.assign: only enumerable own property keys
@@ -57,12 +59,42 @@ export function createView(...args) {
             Object.defineProperty(result, key, {
                 enumerable: true,
                 configurable: true,
-                get: () => src[key],
-                // Optional write-through (commented out by default):
-                // set: (value) => { (src as any)[key as any] = value; },
+                get: () => {
+                    const value = src[key];
+                    if (!notifyInspector) {
+                        return value;
+                    }
+                    if (value?.[INSPECT_MARKER]) {
+                        value[INSPECT_MARKER] = {
+                            fn: notifyInspector.fn,
+                            path: notifyInspector.path.concat(key),
+                        };
+                    }
+                    else if (typeof value === "function") {
+                        return (...params) => {
+                            notifyInspector.fn({
+                                type: "action",
+                                path: notifyInspector.path.concat(key),
+                                params,
+                            });
+                            return value(...params);
+                        };
+                    }
+                    return value;
+                },
             });
             seen.add(key);
         }
     }
+    Object.defineProperty(result, INSPECT_MARKER, {
+        enumerable: false,
+        configurable: false,
+        get() {
+            return true;
+        },
+        set: (value) => {
+            notifyInspector = value;
+        },
+    });
     return result;
 }

package/dist/index.d.ts

@@ -2,14 +2,13 @@ export { render } from "./render";
 export { createCleanup, createMountEffect, RaskComponent } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
-export { createAsync } from "./createAsync";
+export { createTask } from "./createTask";
 export { ErrorBoundary } from "./error";
-export { createQuery } from "./createQuery";
-export { createMutation } from "./createMutation";
 export { createRef } from "inferno";
 export { createView } from "./createView";
 export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
-export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, } from "inferno";
+export { inspect } from "./inspect";
+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,EAAE,aAAa,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,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;AAGpC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,GACf,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,EAAE,aAAa,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,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"}

package/dist/index.js

@@ -2,14 +2,13 @@ export { render } from "./render";
 export { createCleanup, createMountEffect, RaskComponent } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
-export { createAsync } from "./createAsync";
+export { createTask } from "./createTask";
 export { ErrorBoundary } from "./error";
-export { createQuery } from "./createQuery";
-export { createMutation } from "./createMutation";
 export { createRef } from "inferno";
 export { createView } from "./createView";
 export { createEffect } from "./createEffect";
 export { createComputed } from "./createComputed";
 export { syncBatch } from "./batch";
+export { inspect } from "./inspect";
 // Re-export Inferno JSX runtime functions so users don't need to install Inferno directly
-export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, } from "inferno";
+export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, Component, } from "inferno";

package/dist/inspect.d.ts

@@ -0,0 +1,13 @@
+export declare const INSPECT_MARKER: unique symbol;
+export type InspectEvent = {
+    type: "mutation";
+    path: string[];
+    value: any;
+} | {
+    type: "action";
+    path: string[];
+    params: any[];
+};
+export type InspectorCallback = (event: InspectEvent) => void;
+export declare function inspect(root: any, cb: InspectorCallback): void;
+//# sourceMappingURL=inspect.d.ts.map

package/dist/inspect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspect.d.ts","sourceRoot":"","sources":["../src/inspect.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,eAAoB,CAAC;AAEhD,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,GAAG,EAAE,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAE9D,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,iBAAiB,QAKvD"}

package/dist/inspect.js

@@ -0,0 +1,7 @@
+export const INSPECT_MARKER = Symbol("INSPECT");
+export function inspect(root, cb) {
+    root[INSPECT_MARKER] = {
+        fn: cb,
+        path: [],
+    };
+}

package/dist/plugin.d.ts

@@ -6,12 +6,7 @@ export interface RaskPluginOptions {
      */
     transformComponents?: boolean;
     /**
-     * Import source for Inferno imports
-     * @default true (imports from rask-ui)
-     */
-    imports?: boolean;
-    /**
-     * Import source for RaskComponent
+     * Import source for Inferno JSX runtime functions
      * @default "rask-ui"
      */
     importSource?: string;
@@ -24,5 +19,5 @@ export interface RaskPluginOptions {
 /**
  * Vite plugin for transforming JSX to Inferno and function components to RaskComponent classes
  */
-export declare function raskPlugin(options?: RaskPluginOptions): Plugin;
+export default function raskPlugin(options?: RaskPluginOptions): Plugin;
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAMnC,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CA+ElE"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAMnC,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CAsF1E"}

package/dist/plugin.js

@@ -7,8 +7,8 @@ const require = createRequire(import.meta.url);
 /**
  * Vite plugin for transforming JSX to Inferno and function components to RaskComponent classes
  */
-export function raskPlugin(options = {}) {
-    const { transformComponents = true, imports = true, importSource = 'rask-ui', defineAllArguments = false, } = options;
+export default function raskPlugin(options = {}) {
+    const { transformComponents = true, importSource = 'rask-ui', defineAllArguments = false, } = options;
     // Resolve the path to swc-plugin-inferno WASM file
     const infernoPluginPath = require.resolve('swc-plugin-inferno/swc_plugin_inferno.wasm');
     // Resolve the path to our RaskComponent plugin
@@ -16,9 +16,17 @@ export function raskPlugin(options = {}) {
     return {
         name: 'rask-plugin',
         enforce: 'pre',
-        config() {
+        config(config, { mode }) {
             return {
                 esbuild: false, // Disable esbuild to use SWC
+                resolve: {
+                    alias: {
+                        // In development mode, use Inferno's development build to avoid the warning
+                        ...(mode === 'development' && {
+                            inferno: 'inferno/dist/index.dev.mjs',
+                        }),
+                    },
+                },
             };
         },
         async transform(code, id) {
@@ -33,7 +41,7 @@ export function raskPlugin(options = {}) {
                 [
                     infernoPluginPath,
                     {
-                        imports: imports ? importSource : false,
+                        importSource,
                         defineAllArguments,
                     },
                 ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,10 +25,11 @@
   "files": [
     "dist",
     "swc-plugin",
+    "logo.png",
     "README.md"
   ],
   "scripts": {
-    "build": "npm run build:plugin && tsc && cp ../../README.md .",
+    "build": "npm run build:plugin && tsc && cp ../../README.md . && cp ../../logo.png .",
     "build:plugin": "cd swc-plugin && cargo build --release --target wasm32-wasip1",
     "dev": "tsc --watch",
     "test": "vitest",

package/swc-plugin/src/lib.rs

@@ -181,6 +181,29 @@ impl RaskComponentTransform {
         })
     }
 
+    /// Rewrite imports from "inferno" to the configured import source
+    fn rewrite_inferno_imports(&mut self, module: &mut Module) {
+        let import_source = self
+            .config
+            .import_source
+            .as_ref()
+            .map(|s| s.as_str())
+            .unwrap_or("rask-ui");
+
+        for item in &mut module.body {
+            if let ModuleItem::ModuleDecl(ModuleDecl::Import(import)) = item {
+                if &*import.src.value == "inferno" {
+                    // Rewrite the import source from "inferno" to the configured source
+                    import.src = Box::new(Str {
+                        span: Default::default(),
+                        value: Wtf8Atom::from(import_source),
+                        raw: None,
+                    });
+                }
+            }
+        }
+    }
+
     /// Inject the RaskComponent import at the top of the module
     fn inject_runtime(&mut self, module: &mut Module) {
         if self.import_rask_component.is_none() {
@@ -245,6 +268,9 @@ impl VisitMut for RaskComponentTransform {
         // First visit all items to transform them
         module.visit_mut_children_with(self);
 
+        // Rewrite any "inferno" imports to use the configured import source
+        self.rewrite_inferno_imports(module);
+
         // Then inject imports if needed
         self.inject_runtime(module);
     }

package/swc-plugin/target/wasm32-wasip1/release/deps/swc_plugin_rask_component.d

@@ -1,7 +1,7 @@
-/Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/swc_plugin_rask_component.d: src/lib.rs
+/Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/swc_plugin_rask_component.d: src/lib.rs
 
-/Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/swc_plugin_rask_component.wasm: src/lib.rs
+/Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/swc_plugin_rask_component.wasm: src/lib.rs
 
-/Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/libswc_plugin_rask_component.rlib: src/lib.rs
+/Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/target/wasm32-wasip1/release/deps/libswc_plugin_rask_component.rlib: src/lib.rs
 
 src/lib.rs:

package/swc-plugin/target/wasm32-wasip1/release/libswc_plugin_rask_component.d

@@ -1 +1 @@
-/Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/target/wasm32-wasip1/release/libswc_plugin_rask_component.rlib: /Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/src/lib.rs
+/Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/target/wasm32-wasip1/release/libswc_plugin_rask_component.rlib: /Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/src/lib.rs

package/swc-plugin/target/wasm32-wasip1/release/swc_plugin_rask_component.d

@@ -1 +1 @@
-/Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/target/wasm32-wasip1/release/swc_plugin_rask_component.wasm: /Users/christianalfoni/Development/snabbdom-components/packages/core/swc-plugin/src/lib.rs
+/Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/target/wasm32-wasip1/release/swc_plugin_rask_component.wasm: /Users/christianalfoni/Development/rask-ui/packages/core/swc-plugin/src/lib.rs