rask-ui 0.6.0 → 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:
@@ -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/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

@@ -2,10 +2,8 @@ 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";

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;AAGpC,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -2,10 +2,8 @@ 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";

package/package.json

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