rask-ui 0.5.1 → 0.7.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:
@@ -68,79 +91,24 @@ RASK gives you:
 
 ## Getting Started
 
-### Installation
+The fastest way to get started is using `create-rask-ui`:
 
 ```bash
-npm install rask-ui
+npm create rask-ui my-app
+cd my-app
+npm run dev
 ```
 
-### Vite Setup
-
-RASK uses a custom Vite plugin powered by SWC for optimal JSX transformation. This plugin transforms JSX to Inferno's highly optimized `createVNode` calls and automatically converts function components to RASK's reactive component pattern.
+This will scaffold a new Vite project with RASK UI pre-configured and ready to go. You'll be prompted to choose between TypeScript or JavaScript.
 
-#### 1. Configure Vite
-
-Create or update your `vite.config.ts`:
-
-```ts
-import { defineConfig } from 'vite';
-import { raskPlugin } from 'rask-ui/plugin';
-
-export default defineConfig({
-  plugins: [raskPlugin()],
-});
-```
-
-**Plugin Options:**
-
-```ts
-raskPlugin({
-  // Enable/disable function component transformation
-  // Default: true
-  transformComponents: true,
-
-  // Add imports for Inferno utilities (usually not needed)
-  // Default: false
-  imports: false,
-
-  // Package to import from when transformComponents is enabled
-  // Default: "rask-ui"
-  importSource: "rask-ui",
-
-  // Define all arguments for createVNode (for debugging)
-  // Default: false
-  defineAllArguments: false,
-})
-```
+### What's Included
 
-#### 2. Configure TypeScript
+The scaffolded project includes:
 
-Update your `tsconfig.json`:
-
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "rask-ui",
-    "moduleResolution": "bundler",
-    "target": "ES2022",
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"]
-  }
-}
-```
-
-**Key settings:**
-
-- `"jsx": "react-jsx"` - Tells TypeScript to use the new JSX transform for type checking
-- `"jsxImportSource": "rask-ui"` - Points to RASK's JSX runtime for type definitions
-- `"moduleResolution": "bundler"` - Required for Vite
-
-**How it works:**
-
-- **TypeScript**: Type-checks JSX using RASK's type definitions (imported from Inferno)
-- **SWC Plugin**: Transforms JSX to Inferno's `createVNode` calls at build time
-- The result: You get full type safety with zero runtime overhead
+- ✅ Vite configured with the RASK plugin
+- ✅ TypeScript or JavaScript with proper JSX configuration
+- ✅ Hot Module Replacement (HMR) working out of the box
+- ✅ Sample counter component to get you started
 
 ### Basic Example
 
@@ -173,7 +141,7 @@ function MyComponent(props) {
   // SETUP PHASE - Runs once when component is created
   const state = createState({ value: props.initial });
 
-  onMount(() => {
+  createMountEffect(() => {
     console.log("Component mounted!");
   });
 
@@ -250,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
@@ -296,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
 
@@ -614,15 +580,15 @@ function BatchingExample() {
 
 ### Lifecycle Hooks
 
-#### `onMount(callback)`
+#### `createMountEffect(callback)`
 
 Registers a callback to run after the component is mounted to the DOM.
 
 ```tsx
-import { onMount } from "rask-ui";
+import { createMountEffect } from "rask-ui";
 
 function Example() {
-  onMount(() => {
+  createMountEffect(() => {
     console.log("Component mounted!");
   });
 
@@ -641,12 +607,12 @@ function Example() {
 
 ---
 
-#### `onCleanup(callback)`
+#### `createCleanup(callback)`
 
 Registers a callback to run when the component is unmounted.
 
 ```tsx
-import { onCleanup } from "rask-ui";
+import { createCleanup } from "rask-ui";
 
 function Example() {
   const state = createState({ time: Date.now() });
@@ -655,7 +621,7 @@ function Example() {
     state.time = Date.now();
   }, 1000);
 
-  onCleanup(() => {
+  createCleanup(() => {
     clearInterval(interval);
   });
 
@@ -716,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>;
     }
 
@@ -775,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 () => (
@@ -842,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>
@@ -851,22 +773,72 @@ function CreatePost() {
 }
 ```
 
-**Parameters:**
+**Type Signatures:**
 
-- `mutator: (params: T) => Promise<T>` - Function that performs the mutation
+```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:
+
+**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)
+
+**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
+
+**State Transitions:**
+
+Initial state (no params):
+```tsx
+{ isRunning: false, params: null, result: null, error: null }
+```
 
-**Returns:** Mutation object with:
+While running:
+```tsx
+{ isRunning: true, result: T | null, params: P, error: null }
+```
 
-- `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
+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
 
 ---
 
@@ -1223,4 +1195,4 @@ MIT
 
 ## Why "RASK"?
 
-The name comes from Norwegian/Swedish meaning "fast" - which captures the essence of this library: fast to write, fast to understand, and fast to run.
+The name comes from Norwegian meaning "fast" - which captures the essence of this library: fast to write, fast to understand, and fast to run.

package/dist/component.d.ts

@@ -1,7 +1,7 @@
 import { VNode, Component, Props } from "inferno";
 export declare function getCurrentComponent(): RaskComponent<any>;
-export declare function onMount(cb: () => void): void;
-export declare function onCleanup(cb: () => void): void;
+export declare function createMountEffect(cb: () => void): void;
+export declare function createCleanup(cb: () => void): void;
 export type RaskFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
 export declare class RaskComponent<P extends Props<any>> extends Component<P> {
     setup: RaskFunctionComponent<P>;

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,EAEN,MAAM,SAAS,CAAC;AAQjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,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,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IA2D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;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,EAEN,MAAM,SAAS,CAAC;AAQjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,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,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAM;IAC3D,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IA2D3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B;;OAEG;IACH,mBAAmB,CAAC,SAAS,EAAE,GAAG;IAYlC,yBAAyB,IAAI,IAAI;IACjC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -8,15 +8,15 @@ export function getCurrentComponent() {
     }
     return currentComponent;
 }
-export function onMount(cb) {
+export function createMountEffect(cb) {
     if (!currentComponent) {
-        throw new Error("Only use onCleanup in component setup");
+        throw new Error("Only use createMountEffect in component setup");
     }
     currentComponent.onMounts.push(cb);
 }
-export function onCleanup(cb) {
+export function createCleanup(cb) {
     if (!currentComponent) {
-        throw new Error("Only use onCleanup in component setup");
+        throw new Error("Only use createCleanup in component setup");
     }
     currentComponent.onCleanups.push(cb);
 }

package/dist/createComputed.js

@@ -1,4 +1,4 @@
-import { getCurrentComponent, onCleanup } from "./component";
+import { getCurrentComponent, createCleanup } from "./component";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 export function createComputed(computed) {
     let currentComponent;
@@ -18,7 +18,7 @@ export function createComputed(computed) {
             signal.notify();
         });
         if (currentComponent) {
-            onCleanup(() => computedObserver.dispose());
+            createCleanup(() => computedObserver.dispose());
         }
         Object.defineProperty(proxy, prop, {
             get() {

package/dist/createEffect.js

@@ -1,4 +1,4 @@
-import { getCurrentComponent, onCleanup } from "./component";
+import { getCurrentComponent, createCleanup } from "./component";
 import { Observer } from "./observation";
 export function createEffect(cb) {
     let currentComponent;
@@ -19,7 +19,7 @@ export function createEffect(cb) {
         stopObserving();
     };
     if (currentComponent) {
-        onCleanup(() => observer.dispose());
+        createCleanup(() => observer.dispose());
     }
     runEffect();
 }

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,77 @@
+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;
+    };
+    fetch();
+    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/index.d.ts

@@ -1,14 +1,13 @@
 export { render } from "./render";
-export { onCleanup, onMount, RaskComponent } from "./component";
+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";
 //# 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,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAChE,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"}
+{"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;AAGpC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,13 +1,13 @@
 export { render } from "./render";
-export { onCleanup, onMount, RaskComponent } from "./component";
+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";
+// Re-export Inferno JSX runtime functions so users don't need to install Inferno directly
+export { createVNode, createComponentVNode, createFragment, createTextVNode, normalizeProps, } from "inferno";

package/dist/plugin.d.ts

@@ -7,7 +7,7 @@ export interface RaskPluginOptions {
     transformComponents?: boolean;
     /**
      * Import source for Inferno imports
-     * @default false (no imports added)
+     * @default true (imports from rask-ui)
      */
     imports?: boolean;
     /**

package/dist/plugin.js

@@ -8,7 +8,7 @@ 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 = false, importSource = 'rask-ui', defineAllArguments = false, } = options;
+    const { transformComponents = true, imports = 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.5.1",
+  "version": "0.7.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/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