rask-ui 0.8.0 → 0.9.0

package/README.md

@@ -684,12 +684,12 @@ function Child() {
 
 #### `createTask<T, P>(task)`
 
-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.
+A low-level reactive primitive for managing any async operation. `createTask` provides the foundation for building data fetching, mutations, polling, debouncing, and any other async pattern you need. It gives you full control without prescribing specific patterns.
 
 ```tsx
-import { createTask } from "rask-ui";
+import { createTask, createState } from "rask-ui";
 
-// Simple task without parameters - auto-runs on creation
+// Fetching data - auto-runs on creation
 function UserProfile() {
   const user = createTask(() => fetch("/api/user").then((r) => r.json()));
 
@@ -706,71 +706,116 @@ function UserProfile() {
   };
 }
 
-// Task with parameters - control when to run
+// Fetching with parameters
 function Posts() {
+  const state = createState({ page: 1 });
+
   const posts = createTask((page: number) =>
-    fetch(`/api/posts?page=${page}`).then((r) => r.json())
+    fetch(`/api/posts?page=${page}&limit=10`).then((r) => r.json())
   );
 
-  const renderPosts = () => {
-    if (posts.isRunning) {
-      return <p>Loading...</p>;
-    }
-
-    if (posts.error) {
-      return <p>Error: {posts.error}</p>;
-    }
-
-    if (!posts.result) {
-      return <p>No posts loaded</p>;
-    }
-
-    return posts.result.map((post) => (
-      <article key={post.id}>{post.title}</article>
-    ));
-  };
+  // Fetch when page changes
+  createEffect(() => {
+    posts.run(state.page);
+  });
 
   return () => (
     <div>
-      <button onClick={() => posts.run(1)}>Load Page 1</button>
-      <button onClick={() => posts.rerun(1)}>Reload Page 1</button>
-      {renderPosts()}
+      <h1>Posts - Page {state.page}</h1>
+      {posts.isRunning && <p>Loading...</p>}
+      {posts.result?.map((post) => (
+        <article key={post.id}>{post.title}</article>
+      ))}
+      <button onClick={() => state.page--}>Previous</button>
+      <button onClick={() => state.page++}>Next</button>
     </div>
   );
 }
 
-// Mutation-style usage
+// Mutation - creating data on server
 function CreatePost() {
   const state = createState({ title: "", body: "" });
 
-  const create = createTask((data: { title: string; body: string }) =>
+  const createPost = createTask((data: { title: string; body: string }) =>
     fetch("/api/posts", {
       method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(data),
     }).then((r) => r.json())
   );
 
-  const handleSubmit = () => {
-    create.run({ title: state.title, body: state.body });
+  const handleSubmit = async () => {
+    await createPost.run({ title: state.title, body: state.body });
+    // Clear form on success
+    state.title = "";
+    state.body = "";
   };
 
   return () => (
     <form onSubmit={handleSubmit}>
       <input
+        placeholder="Title"
         value={state.title}
         onInput={(e) => (state.title = e.target.value)}
       />
       <textarea
+        placeholder="Body"
         value={state.body}
         onInput={(e) => (state.body = e.target.value)}
       />
-      <button disabled={create.isRunning}>
-        {create.isRunning ? "Creating..." : "Create"}
+      <button disabled={createPost.isRunning}>
+        {createPost.isRunning ? "Creating..." : "Create Post"}
       </button>
-      {create.error && <p>Error: {create.error}</p>}
+      {createPost.error && <p>Error: {createPost.error}</p>}
+      {createPost.result && <p>Post created! ID: {createPost.result.id}</p>}
     </form>
   );
 }
+
+// Optimistic updates - instant UI updates with rollback on error
+function TodoList() {
+  const state = createState({
+    todos: [],
+    optimisticTodo: null,
+  });
+
+  const createTodo = createTask((text: string) =>
+    fetch("/api/todos", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text, done: false }),
+    }).then((r) => r.json())
+  );
+
+  const addTodo = async (text: string) => {
+    // Show optimistically
+    state.optimisticTodo = { id: Date.now(), text, done: false };
+
+    try {
+      const savedTodo = await createTodo.run(text);
+      state.todos.push(savedTodo);
+      state.optimisticTodo = null;
+    } catch {
+      // Rollback on error
+      state.optimisticTodo = null;
+    }
+  };
+
+  return () => (
+    <div>
+      <ul>
+        {[...state.todos, state.optimisticTodo]
+          .filter(Boolean)
+          .map((todo) => (
+            <li key={todo.id} style={{ opacity: todo === state.optimisticTodo ? 0.5 : 1 }}>
+              {todo.text}
+            </li>
+          ))}
+      </ul>
+      <button onClick={() => addTodo("New todo")}>Add Todo</button>
+    </div>
+  );
+}
 ```
 
 **Type Signatures:**
@@ -833,12 +878,208 @@ Error:
 
 **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
+`createTask` is a low-level primitive. Use it as a building block for any async pattern:
+- **Data fetching**: Fetch data on mount or based on dependencies
+- **Mutations**: Create, update, or delete data on the server
+- **Optimistic updates**: Update UI instantly with rollback on error
+- **Polling**: Periodically refetch data
+- **Debounced searches**: Wait for user input to settle
+- **Dependent queries**: Chain requests that depend on each other
+- **Parallel requests**: Run multiple requests simultaneously
+- **Custom patterns**: Build your own abstractions (queries, mutations, etc.)
+
+---
+
+### Developer Tools
+
+#### `inspect(root, callback)`
+
+Enables inspection of reactive state, computed values, and actions for building devtools. This API is **development-only** and has zero overhead in production builds.
+
+```tsx
+import { inspect } from "rask-ui";
+
+function DevToolsIntegration() {
+  const state = createState({ count: 0, name: "Example" });
+  const computed = createComputed({
+    double: () => state.count * 2,
+  });
+
+  const actions = {
+    increment: () => state.count++,
+    reset: () => state.count = 0,
+  };
+
+  const view = createView(state, computed, actions);
+
+  // Inspect all reactive events
+  inspect(view, (event) => {
+    console.log(event);
+    // Send to devtools panel, logging service, etc.
+  });
+
+  return () => (
+    <div>
+      <h1>{view.name}: {view.count}</h1>
+      <p>Double: {view.double}</p>
+      <button onClick={view.increment}>+</button>
+      <button onClick={view.reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+**Parameters:**
+
+- `root: any` - The reactive object to inspect (state, view, computed, etc.)
+- `callback: (event: InspectEvent) => void` - Callback receiving inspection events
+
+**Event Types:**
+
+```tsx
+type InspectEvent =
+  | {
+      type: "mutation";
+      path: string[];      // Property path, e.g., ["user", "name"]
+      value: any;          // New value
+    }
+  | {
+      type: "action";
+      path: string[];      // Function name path, e.g., ["increment"]
+      params: any[];       // Function parameters
+    }
+  | {
+      type: "computed";
+      path: string[];      // Computed property path
+      isDirty: boolean;    // true when invalidated, false when recomputed
+      value: any;          // Current or recomputed value
+    };
+```
+
+**Features:**
+
+- **Zero production overhead** - Completely eliminated in production builds via tree-shaking
+- **Deep tracking** - Tracks nested state mutations with full property paths
+- **Action tracking** - Captures function calls with parameters
+- **Computed lifecycle** - Observes when computed values become dirty and when they recompute
+- **Nested view support** - Compose deeply nested state trees and track full paths
+- **JSON serialization** - Use `JSON.stringify()` to extract state snapshots
+- **Flexible integration** - Build custom devtools, time-travel debugging, or logging systems
+
+**Use Cases:**
+
+- Building browser devtools extensions
+- Creating debugging panels for development
+- Implementing time-travel debugging
+- Logging state changes for debugging
+- Integrating with external monitoring tools
+- Building replay systems for bug reports
+
+**Production Builds:**
+
+The inspector is automatically stripped from production builds using Vite's `import.meta.env.DEV` constant. This means:
+
+- No runtime checks in production code
+- No function wrapping overhead
+- No symbol property lookups
+- Smaller bundle size
+- Zero performance impact
+
+```tsx
+// In development
+inspect(view, console.log); // ✅ Works, logs all events
+
+// In production build
+inspect(view, console.log); // No-op, zero overhead, removed by tree-shaking
+```
+
+**Nested State Trees:**
+
+The inspector automatically tracks nested property paths. Compose deeply nested views to create organized state trees:
+
+```tsx
+function App() {
+  // Create nested state structure
+  const userState = createState({
+    profile: { name: "Alice", email: "alice@example.com" },
+    preferences: { theme: "dark", notifications: true },
+  });
+
+  const cartState = createState({
+    items: [],
+    total: 0,
+  });
+
+  // Compose into a state tree
+  const appState = createView({
+    user: createView(userState),
+    cart: createView(cartState),
+  });
+
+  inspect(appState, (event) => {
+    console.log(event);
+  });
+
+  // When you do: appState.user.profile.name = "Bob"
+  // You receive: { type: "mutation", path: ["user", "profile", "name"], value: "Bob" }
+
+  return () => (
+    <div>
+      <h1>Welcome, {appState.user.profile.name}!</h1>
+      <p>Theme: {appState.user.preferences.theme}</p>
+      <p>Cart items: {appState.cart.items.length}</p>
+    </div>
+  );
+}
+```
+
+**JSON Serialization:**
+
+Use `JSON.stringify()` to extract state snapshots for devtools, persistence, or debugging:
+
+```tsx
+function App() {
+  const state = createState({
+    user: { id: 1, name: "Alice" },
+    todos: [
+      { id: 1, text: "Learn RASK", done: false },
+      { id: 2, text: "Build app", done: true },
+    ],
+  });
+
+  const computed = createComputed({
+    completedCount: () => state.todos.filter((t) => t.done).length,
+  });
+
+  const view = createView(state, computed);
+
+  // Serialize to JSON - includes computed values
+  const snapshot = JSON.stringify(view);
+  // {
+  //   "user": { "id": 1, "name": "Alice" },
+  //   "todos": [...],
+  //   "completedCount": 1
+  // }
+
+  // Send initial state and updates to devtools
+  if (import.meta.env.DEV) {
+    window.postMessage({
+      type: "RASK_DEVTOOLS_INIT",
+      initialState: JSON.parse(snapshot),
+    }, "*");
+
+    inspect(view, (event) => {
+      window.postMessage({
+        type: "RASK_DEVTOOLS_EVENT",
+        event,
+        snapshot: JSON.parse(JSON.stringify(view)),
+      }, "*");
+    });
+  }
+
+  return () => <div>{/* Your app */}</div>;
+}
+```
 
 ---
 

package/dist/component.d.ts

@@ -1,10 +1,18 @@
 import { VNode, Component, Props } from "inferno";
-export declare function getCurrentComponent(): RaskComponent<any>;
+import { Observer } from "./observation";
+export type RaskStatelessFunctionComponent<P extends Props<any>> = (() => VNode) | ((props: P) => VNode);
+export declare class RaskStatelessComponent extends Component {
+    renderFn: RaskStatelessFunctionComponent<any>;
+    observer: Observer;
+    shouldComponentUpdate(nextProps: Props<any>): boolean;
+    render(): VNode;
+}
+export declare function getCurrentComponent(): RaskStatefulComponent<any>;
 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>;
+export type RaskStatefulFunctionComponent<P extends Props<any>> = (() => () => VNode) | ((props: P) => () => VNode);
+export declare class RaskStatefulComponent<P extends Props<any>> extends Component<P> {
+    setup: RaskStatefulFunctionComponent<P>;
     private renderFn?;
     private reactiveProps?;
     private observer;

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,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"}
+{"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;AAEjB,OAAO,EAAsB,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGrE,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC3D,CAAC,MAAM,KAAK,CAAC,GACb,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC;AAE1B,qBAAa,sBAAuB,SAAQ,SAAS;IAC3C,QAAQ,EAAE,8BAA8B,CAAC,GAAG,CAAC,CAAC;IACtD,QAAQ,WAEL;IACH,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAUrD,MAAM;CAMP;AAID,wBAAgB,mBAAmB,+BAMlC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM/C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,IAAI,QAM3C;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAC1D,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,qBAAa,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,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;IAWrD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -1,6 +1,26 @@
 import { createComponentVNode, Component, } from "inferno";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 import { syncBatch } from "./batch";
+export class RaskStatelessComponent extends Component {
+    observer = new Observer(() => {
+        this.forceUpdate();
+    });
+    shouldComponentUpdate(nextProps) {
+        for (const prop in nextProps) {
+            // @ts-ignore
+            if (this.props[prop] !== nextProps[prop]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    render() {
+        const stopObserving = this.observer.observe();
+        const result = this.renderFn(this.props);
+        stopObserving();
+        return result;
+    }
+}
 let currentComponent;
 export function getCurrentComponent() {
     if (!currentComponent) {
@@ -20,7 +40,7 @@ export function createCleanup(cb) {
     }
     currentComponent.onCleanups.push(cb);
 }
-export class RaskComponent extends Component {
+export class RaskStatefulComponent extends Component {
     renderFn;
     reactiveProps;
     observer = new Observer(() => {
@@ -113,9 +133,6 @@ export class RaskComponent extends Component {
     shouldComponentUpdate(nextProps) {
         // Shallow comparison of props, excluding internal props
         for (const prop in nextProps) {
-            if (prop === "__component") {
-                continue;
-            }
             // @ts-ignore
             if (this.props[prop] !== nextProps[prop]) {
                 return true;
@@ -162,5 +179,5 @@ export class RaskComponent extends Component {
     }
 }
 export function createComponent(props, key) {
-    return createComponentVNode(4 /* VNodeFlags.ComponentClass */, RaskComponent, props, key);
+    return createComponentVNode(4 /* VNodeFlags.ComponentClass */, RaskStatefulComponent, props, key);
 }

package/dist/createComputed.d.ts.map

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

package/dist/createComputed.js

@@ -1,4 +1,5 @@
 import { getCurrentComponent, createCleanup } from "./component";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 import { getCurrentObserver, Observer, Signal } from "./observation";
 export function createComputed(computed) {
     let currentComponent;
@@ -9,6 +10,7 @@ export function createComputed(computed) {
         currentComponent = undefined;
     }
     const proxy = {};
+    let notifyInspectorRef = {};
     for (const prop in computed) {
         let isDirty = true;
         let value;
@@ -16,11 +18,21 @@ export function createComputed(computed) {
         const computedObserver = new Observer(() => {
             isDirty = true;
             signal.notify();
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "computed",
+                    path: notifyInspectorRef.current.path.concat(prop),
+                    isDirty: true,
+                    value,
+                });
+            }
         });
         if (currentComponent) {
             createCleanup(() => computedObserver.dispose());
         }
         Object.defineProperty(proxy, prop, {
+            enumerable: true,
+            configurable: true,
             get() {
                 const currentObserver = getCurrentObserver();
                 if (currentObserver) {
@@ -31,11 +43,35 @@ export function createComputed(computed) {
                     value = computed[prop]();
                     stopObserving();
                     isDirty = false;
+                    if (INSPECTOR_ENABLED) {
+                        notifyInspectorRef.current?.notify({
+                            type: "computed",
+                            path: notifyInspectorRef.current.path.concat(prop),
+                            isDirty: false,
+                            value,
+                        });
+                    }
                     return value;
                 }
                 return value;
             },
         });
     }
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(proxy, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
     return proxy;
 }

package/dist/createState.js

@@ -1,4 +1,4 @@
-import { INSPECT_MARKER } from "./inspect";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } from "./inspect";
 import { getCurrentObserver, Signal } from "./observation";
 /**
  * Creates a reactive state object that tracks property access and notifies observers on changes.
@@ -25,11 +25,11 @@ import { getCurrentObserver, Signal } from "./observation";
  * @returns A reactive proxy of the state object
  */
 export function createState(state) {
-    return getProxy(state);
+    return getProxy(state, {});
 }
 const proxyCache = new WeakMap();
 export const PROXY_MARKER = Symbol("isProxy");
-function getProxy(value, notifyInspector, path) {
+function getProxy(value, notifyInspectorRef) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {
         return value;
@@ -44,13 +44,19 @@ function getProxy(value, notifyInspector, path) {
             if (key === PROXY_MARKER) {
                 return true;
             }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return true;
+            }
             return Reflect.has(target, key);
         },
         get(target, key) {
             // Mark this as a proxy to prevent double-wrapping
-            if (key === PROXY_MARKER || key === INSPECT_MARKER) {
+            if (key === PROXY_MARKER) {
                 return true;
             }
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                return !notifyInspectorRef.current;
+            }
             const value = Reflect.get(target, key);
             if (typeof key === "symbol" || typeof value === "function") {
                 return value;
@@ -62,14 +68,24 @@ function getProxy(value, notifyInspector, path) {
             }
             if (Array.isArray(value) ||
                 (typeof value === "object" && value !== null)) {
-                return getProxy(value, notifyInspector, notifyInspector ? (path ? path.concat(key) : [key]) : undefined);
+                return getProxy(value, INSPECTOR_ENABLED && notifyInspectorRef.current
+                    ? {
+                        current: {
+                            notify: notifyInspectorRef.current.notify,
+                            path: notifyInspectorRef.current.path.concat(key),
+                        },
+                    }
+                    : notifyInspectorRef);
             }
             return value;
         },
         set(target, key, newValue) {
-            if (key === INSPECT_MARKER) {
-                notifyInspector = newValue.fn;
-                path = newValue.path;
+            if (INSPECTOR_ENABLED && key === INSPECT_MARKER) {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return newValue.current;
+                    },
+                });
                 return Reflect.set(target, key, newValue);
             }
             if (typeof key === "symbol") {
@@ -82,11 +98,13 @@ function getProxy(value, notifyInspector, path) {
                 const signal = signals[key];
                 signal?.notify();
             }
-            notifyInspector?.({
-                type: "mutation",
-                path: path ? path.concat(key) : [key],
-                value: newValue,
-            });
+            if (INSPECTOR_ENABLED) {
+                notifyInspectorRef.current?.notify({
+                    type: "mutation",
+                    path: notifyInspectorRef.current.path,
+                    value: newValue,
+                });
+            }
             return setResult;
         },
         deleteProperty(target, key) {

package/dist/createView.d.ts.map

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

package/dist/createView.js

@@ -1,4 +1,4 @@
-import { INSPECT_MARKER } from "./inspect";
+import { INSPECT_MARKER, INSPECTOR_ENABLED } 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.
@@ -45,9 +45,12 @@ import { INSPECT_MARKER } from "./inspect";
 export function createView(...args) {
     const result = {};
     const seen = new Set();
-    let notifyInspector;
+    let notifyInspectorRef = {};
     for (let i = args.length - 1; i >= 0; i--) {
         const src = args[i];
+        if (INSPECTOR_ENABLED && src[INSPECT_MARKER]) {
+            src[INSPECT_MARKER] = notifyInspectorRef;
+        }
         // mimic Object.assign: only enumerable own property keys
         for (const key of Reflect.ownKeys(src)) {
             if (seen.has(key))
@@ -61,20 +64,22 @@ export function createView(...args) {
                 configurable: true,
                 get: () => {
                     const value = src[key];
-                    if (!notifyInspector) {
+                    if (!INSPECTOR_ENABLED || !notifyInspectorRef.current) {
                         return value;
                     }
                     if (value?.[INSPECT_MARKER]) {
                         value[INSPECT_MARKER] = {
-                            fn: notifyInspector.fn,
-                            path: notifyInspector.path.concat(key),
+                            current: {
+                                notify: notifyInspectorRef.current.notify,
+                                path: notifyInspectorRef.current.path.concat(key),
+                            },
                         };
                     }
                     else if (typeof value === "function") {
                         return (...params) => {
-                            notifyInspector.fn({
+                            notifyInspectorRef.current.notify({
                                 type: "action",
-                                path: notifyInspector.path.concat(key),
+                                path: notifyInspectorRef.current.path.concat(key),
                                 params,
                             });
                             return value(...params);
@@ -86,15 +91,21 @@ export function createView(...args) {
             seen.add(key);
         }
     }
-    Object.defineProperty(result, INSPECT_MARKER, {
-        enumerable: false,
-        configurable: false,
-        get() {
-            return true;
-        },
-        set: (value) => {
-            notifyInspector = value;
-        },
-    });
+    if (INSPECTOR_ENABLED) {
+        Object.defineProperty(result, INSPECT_MARKER, {
+            enumerable: false,
+            configurable: false,
+            get() {
+                return !notifyInspectorRef.current;
+            },
+            set: (value) => {
+                Object.defineProperty(notifyInspectorRef, "current", {
+                    get() {
+                        return value.current;
+                    },
+                });
+            },
+        });
+    }
     return result;
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { render } from "./render";
-export { createCleanup, createMountEffect, RaskComponent } from "./component";
+export { createCleanup, createMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
 export { createTask } from "./createTask";

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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,aAAa,CAAC;AACrB,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

@@ -1,5 +1,5 @@
 export { render } from "./render";
-export { createCleanup, createMountEffect, RaskComponent } from "./component";
+export { createCleanup, createMountEffect, RaskStatefulComponent, RaskStatelessComponent, } from "./component";
 export { createContext } from "./createContext";
 export { createState } from "./createState";
 export { createTask } from "./createTask";

package/dist/inspect.d.ts

@@ -1,4 +1,5 @@
 export declare const INSPECT_MARKER: unique symbol;
+export declare const INSPECTOR_ENABLED: boolean;
 export type InspectEvent = {
     type: "mutation";
     path: string[];
@@ -7,7 +8,18 @@ export type InspectEvent = {
     type: "action";
     path: string[];
     params: any[];
+} | {
+    type: "computed";
+    path: string[];
+    isDirty: boolean;
+    value: any;
 };
 export type InspectorCallback = (event: InspectEvent) => void;
+export type InspectorRef = {
+    current?: {
+        notify: InspectorCallback;
+        path: string[];
+    };
+};
 export declare function inspect(root: any, cb: InspectorCallback): void;
 //# sourceMappingURL=inspect.d.ts.map

package/dist/inspect.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"inspect.d.ts","sourceRoot":"","sources":["../src/inspect.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,eAAoB,CAAC;AAGhD,eAAO,MAAM,iBAAiB,SAAsB,CAAC;AAErD,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,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAEN,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE;QAAE,MAAM,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACzD,CAAC;AAEF,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,iBAAiB,QAWvD"}

package/dist/inspect.js

@@ -1,7 +1,14 @@
 export const INSPECT_MARKER = Symbol("INSPECT");
+// Flag to check if inspector is enabled (only in development)
+export const INSPECTOR_ENABLED = import.meta.env.DEV;
 export function inspect(root, cb) {
+    if (!INSPECTOR_ENABLED) {
+        return;
+    }
     root[INSPECT_MARKER] = {
-        fn: cb,
-        path: [],
+        current: {
+            notify: cb,
+            path: [],
+        },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/swc-plugin/src/lib.rs

@@ -15,14 +15,16 @@ pub struct Config {
 
 pub struct RaskComponentTransform {
     config: Config,
-    import_rask_component: Option<Ident>,
+    import_rask_stateful_component: Option<Ident>,
+    import_rask_stateless_component: Option<Ident>,
 }
 
 impl RaskComponentTransform {
     fn new(config: Config) -> Self {
         RaskComponentTransform {
             config,
-            import_rask_component: None,
+            import_rask_stateful_component: None,
+            import_rask_stateless_component: None,
         }
     }
 
@@ -100,7 +102,27 @@ impl RaskComponentTransform {
         }
     }
 
-    /// Check if a function body returns an arrow function with VNode calls
+    /// Check if a function body directly returns VNode calls (stateless component)
+    fn is_stateless_component(&self, func: &Function) -> bool {
+        if let Some(body) = &func.body {
+            for stmt in &body.stmts {
+                if let Stmt::Return(ret_stmt) = stmt {
+                    if let Some(ret_arg) = &ret_stmt.arg {
+                        // Check if directly returning VNode (not arrow function)
+                        if self.has_vnode_call(ret_arg) {
+                            // Make sure it's NOT an arrow function
+                            if !matches!(&**ret_arg, Expr::Arrow(_)) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        false
+    }
+
+    /// Check if a function body returns an arrow function with VNode calls (stateful component)
     fn is_rask_component(&self, func: &Function) -> bool {
         if let Some(body) = &func.body {
             for stmt in &body.stmts {
@@ -135,14 +157,14 @@ impl RaskComponentTransform {
         false
     }
 
-    /// Transform a function declaration to a RaskComponent class
-    fn transform_to_class(&mut self, name: Ident, func: Function) -> Decl {
-        // Ensure we have the RaskComponent import
-        if self.import_rask_component.is_none() {
-            self.import_rask_component = Some(private_ident!("RaskComponent"));
+    /// Transform a function declaration to a RaskStatefulComponent class
+    fn transform_to_stateful_class(&mut self, name: Ident, func: Function) -> Decl {
+        // Ensure we have the RaskStatefulComponent import
+        if self.import_rask_stateful_component.is_none() {
+            self.import_rask_stateful_component = Some(private_ident!("RaskStatefulComponent"));
         }
 
-        let super_class_ident = self.import_rask_component.as_ref().unwrap().clone();
+        let super_class_ident = self.import_rask_stateful_component.as_ref().unwrap().clone();
 
         // Create the class property: setup = function name() { ... }
         let setup_prop = ClassMember::ClassProp(ClassProp {
@@ -181,6 +203,52 @@ impl RaskComponentTransform {
         })
     }
 
+    /// Transform a function declaration to a RaskStatelessComponent class
+    fn transform_to_stateless_class(&mut self, name: Ident, func: Function) -> Decl {
+        // Ensure we have the RaskStatelessComponent import
+        if self.import_rask_stateless_component.is_none() {
+            self.import_rask_stateless_component = Some(private_ident!("RaskStatelessComponent"));
+        }
+
+        let super_class_ident = self.import_rask_stateless_component.as_ref().unwrap().clone();
+
+        // Create the class property: renderFn = function name() { ... }
+        let render_prop = ClassMember::ClassProp(ClassProp {
+            span: Default::default(),
+            key: PropName::Ident(quote_ident!("renderFn").into()),
+            value: Some(Box::new(Expr::Fn(FnExpr {
+                ident: Some(name.clone()),
+                function: Box::new(func),
+            }))),
+            type_ann: None,
+            is_static: false,
+            decorators: vec![],
+            accessibility: None,
+            is_abstract: false,
+            is_optional: false,
+            is_override: false,
+            readonly: false,
+            declare: false,
+            definite: false,
+        });
+
+        Decl::Class(ClassDecl {
+            ident: name,
+            declare: false,
+            class: Box::new(Class {
+                span: Default::default(),
+                ctxt: Default::default(),
+                decorators: vec![],
+                body: vec![render_prop],
+                super_class: Some(Box::new(Expr::Ident(super_class_ident))),
+                is_abstract: false,
+                type_params: None,
+                super_type_params: None,
+                implements: vec![],
+            }),
+        })
+    }
+
     /// Rewrite imports from "inferno" to the configured import source
     fn rewrite_inferno_imports(&mut self, module: &mut Module) {
         let import_source = self
@@ -204,12 +272,8 @@ impl RaskComponentTransform {
         }
     }
 
-    /// Inject the RaskComponent import at the top of the module
+    /// Inject the RaskStatefulComponent and/or RaskStatelessComponent imports at the top of the module
     fn inject_runtime(&mut self, module: &mut Module) {
-        if self.import_rask_component.is_none() {
-            return;
-        }
-
         let import_source = self
             .config
             .import_source
@@ -217,47 +281,93 @@ impl RaskComponentTransform {
             .map(|s| s.as_str())
             .unwrap_or("rask-ui");
 
-        let rask_component_ident = self.import_rask_component.as_ref().unwrap();
+        let mut specifiers = vec![];
+
+        // Add RaskStatefulComponent if needed
+        if let Some(stateful_ident) = &self.import_rask_stateful_component {
+            // Check if import already exists
+            let mut exists = false;
+            for item in &module.body {
+                if let ModuleItem::ModuleDecl(ModuleDecl::Import(import)) = item {
+                    if &*import.src.value == import_source {
+                        for spec in &import.specifiers {
+                            if let ImportSpecifier::Named(named) = spec {
+                                if let Some(ModuleExportName::Ident(imported)) = &named.imported {
+                                    if &*imported.sym == "RaskStatefulComponent" {
+                                        exists = true;
+                                        break;
+                                    }
+                                } else if &*named.local.sym == "RaskStatefulComponent" {
+                                    exists = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
 
-        // Check if import already exists
-        for item in &module.body {
-            if let ModuleItem::ModuleDecl(ModuleDecl::Import(import)) = item {
-                if &*import.src.value == import_source {
-                    for spec in &import.specifiers {
-                        if let ImportSpecifier::Named(named) = spec {
-                            if let Some(ModuleExportName::Ident(imported)) = &named.imported {
-                                if &*imported.sym == "RaskComponent" {
-                                    return; // Import already exists
+            if !exists {
+                specifiers.push(ImportSpecifier::Named(ImportNamedSpecifier {
+                    span: Default::default(),
+                    local: stateful_ident.clone(),
+                    imported: Some(ModuleExportName::Ident(quote_ident!("RaskStatefulComponent").into())),
+                    is_type_only: false,
+                }));
+            }
+        }
+
+        // Add RaskStatelessComponent if needed
+        if let Some(stateless_ident) = &self.import_rask_stateless_component {
+            // Check if import already exists
+            let mut exists = false;
+            for item in &module.body {
+                if let ModuleItem::ModuleDecl(ModuleDecl::Import(import)) = item {
+                    if &*import.src.value == import_source {
+                        for spec in &import.specifiers {
+                            if let ImportSpecifier::Named(named) = spec {
+                                if let Some(ModuleExportName::Ident(imported)) = &named.imported {
+                                    if &*imported.sym == "RaskStatelessComponent" {
+                                        exists = true;
+                                        break;
+                                    }
+                                } else if &*named.local.sym == "RaskStatelessComponent" {
+                                    exists = true;
+                                    break;
                                 }
-                            } else if &*named.local.sym == "RaskComponent" {
-                                return; // Import already exists
                             }
                         }
                     }
                 }
             }
+
+            if !exists {
+                specifiers.push(ImportSpecifier::Named(ImportNamedSpecifier {
+                    span: Default::default(),
+                    local: stateless_ident.clone(),
+                    imported: Some(ModuleExportName::Ident(quote_ident!("RaskStatelessComponent").into())),
+                    is_type_only: false,
+                }));
+            }
         }
 
-        // Create new import
-        let import = ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
-            span: Default::default(),
-            specifiers: vec![ImportSpecifier::Named(ImportNamedSpecifier {
-                span: Default::default(),
-                local: rask_component_ident.clone(),
-                imported: Some(ModuleExportName::Ident(quote_ident!("RaskComponent").into())),
-                is_type_only: false,
-            })],
-            src: Box::new(Str {
+        // Only create import if we have specifiers to add
+        if !specifiers.is_empty() {
+            let import = ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
                 span: Default::default(),
-                value: Wtf8Atom::from(import_source),
-                raw: None,
-            }),
-            type_only: false,
-            with: None,
-            phase: Default::default(),
-        }));
-
-        module.body.insert(0, import);
+                specifiers,
+                src: Box::new(Str {
+                    span: Default::default(),
+                    value: Wtf8Atom::from(import_source),
+                    raw: None,
+                }),
+                type_only: false,
+                with: None,
+                phase: Default::default(),
+            }));
+
+            module.body.insert(0, import);
+        }
     }
 }
 
@@ -278,11 +388,19 @@ impl VisitMut for RaskComponentTransform {
     fn visit_mut_module_item(&mut self, item: &mut ModuleItem) {
         match item {
             ModuleItem::Stmt(Stmt::Decl(Decl::Fn(fn_decl))) => {
-                // Check if this function should be transformed
+                // Check for stateful component first (returns arrow function)
                 if self.is_rask_component(&fn_decl.function) {
                     let name = fn_decl.ident.clone();
                     let func = (*fn_decl.function).clone();
-                    let class_decl = self.transform_to_class(name, func);
+                    let class_decl = self.transform_to_stateful_class(name, func);
+                    *item = ModuleItem::Stmt(Stmt::Decl(class_decl));
+                    return;
+                }
+                // Then check for stateless component (directly returns VNode)
+                else if self.is_stateless_component(&fn_decl.function) {
+                    let name = fn_decl.ident.clone();
+                    let func = (*fn_decl.function).clone();
+                    let class_decl = self.transform_to_stateless_class(name, func);
                     *item = ModuleItem::Stmt(Stmt::Decl(class_decl));
                     return;
                 }
@@ -295,16 +413,27 @@ impl VisitMut for RaskComponentTransform {
                         // but transform the pattern internally if needed
                         // For now, we'll skip transforming default exports
                         // as they need special handling
+                    } else if self.is_stateless_component(&fn_expr.function) {
+                        // Same for stateless default exports
                     }
                 }
             }
             ModuleItem::ModuleDecl(ModuleDecl::ExportDecl(export)) => {
                 // Handle: export function MyComponent() { return () => <div /> }
                 if let Decl::Fn(fn_decl) = &mut export.decl {
+                    // Check for stateful component first
                     if self.is_rask_component(&fn_decl.function) {
                         let name = fn_decl.ident.clone();
                         let func = (*fn_decl.function).clone();
-                        let class_decl = self.transform_to_class(name, func);
+                        let class_decl = self.transform_to_stateful_class(name, func);
+                        export.decl = class_decl;
+                        return;
+                    }
+                    // Then check for stateless component
+                    else if self.is_stateless_component(&fn_decl.function) {
+                        let name = fn_decl.ident.clone();
+                        let func = (*fn_decl.function).clone();
+                        let class_decl = self.transform_to_stateless_class(name, func);
                         export.decl = class_decl;
                         return;
                     }