rask-ui 0.8.1 → 0.9.1

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/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/plugin.d.ts

@@ -1,23 +1,6 @@
-import type { Plugin } from 'vite';
-export interface RaskPluginOptions {
-    /**
-     * Enable transformation of function components to RaskComponent classes
-     * @default true
-     */
-    transformComponents?: boolean;
-    /**
-     * Import source for Inferno JSX runtime functions
-     * @default "rask-ui"
-     */
-    importSource?: string;
-    /**
-     * Whether to define all arguments for createVNode/createComponentVNode
-     * @default false
-     */
-    defineAllArguments?: boolean;
-}
+import type { Plugin } from "vite";
 /**
  * Vite plugin for transforming JSX to Inferno and function components to RaskComponent classes
  */
-export default function raskPlugin(options?: RaskPluginOptions): Plugin;
+export default function raskPlugin(): Plugin;
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

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

package/dist/plugin.js

@@ -1,29 +1,27 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { createRequire } from 'module';
+import path from "path";
+import { fileURLToPath } from "url";
+import { createRequire } from "module";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const require = createRequire(import.meta.url);
 /**
  * Vite plugin for transforming JSX to Inferno and function components to RaskComponent classes
  */
-export default function raskPlugin(options = {}) {
-    const { transformComponents = true, importSource = 'rask-ui', defineAllArguments = false, } = options;
+export default function raskPlugin() {
     // Resolve the path to swc-plugin-inferno WASM file
-    const infernoPluginPath = require.resolve('swc-plugin-inferno/swc_plugin_inferno.wasm');
+    const infernoPluginPath = require.resolve("swc-plugin-inferno/swc_plugin_inferno.wasm");
     // Resolve the path to our RaskComponent plugin
-    const componentPluginPath = path.resolve(__dirname, '../swc-plugin/target/wasm32-wasip1/release/swc_plugin_rask_component.wasm');
+    const componentPluginPath = path.resolve(__dirname, "../swc-plugin/target/wasm32-wasip1/release/swc_plugin_rask_component.wasm");
     return {
-        name: 'rask-plugin',
-        enforce: 'pre',
+        name: "rask-plugin",
+        enforce: "pre",
         config(config, { mode }) {
             return {
-                esbuild: false, // Disable esbuild to use SWC
                 resolve: {
                     alias: {
                         // In development mode, use Inferno's development build to avoid the warning
-                        ...(mode === 'development' && {
-                            inferno: 'inferno/dist/index.dev.mjs',
+                        ...(mode === "development" && {
+                            inferno: "inferno/dist/index.dev.mjs",
                         }),
                     },
                 },
@@ -35,35 +33,33 @@ export default function raskPlugin(options = {}) {
                 return null;
             }
             // Use SWC for transformation
-            const swc = await import('@swc/core');
+            const swc = await import("@swc/core");
             const plugins = [
                 // 1. FIRST: Inferno JSX transformation
                 [
                     infernoPluginPath,
                     {
-                        importSource,
-                        defineAllArguments,
+                        importSource: "rask-ui",
+                        defineAllArguments: false,
                     },
                 ],
             ];
             // 2. SECOND: RaskComponent transformation (if enabled)
-            if (transformComponents) {
-                plugins.push([
-                    componentPluginPath,
-                    {
-                        importSource,
-                    },
-                ]);
-            }
+            plugins.push([
+                componentPluginPath,
+                {
+                    importSource: "rask-ui",
+                },
+            ]);
             const result = await swc.transform(code, {
                 filename: id,
                 jsc: {
                     parser: {
-                        syntax: id.endsWith('.tsx') ? 'typescript' : 'ecmascript',
-                        tsx: id.endsWith('.tsx'),
-                        jsx: id.endsWith('.jsx'),
+                        syntax: id.endsWith(".tsx") ? "typescript" : "ecmascript",
+                        tsx: id.endsWith(".tsx"),
+                        jsx: id.endsWith(".jsx"),
                     },
-                    target: 'es2020',
+                    target: "es2020",
                     experimental: {
                         plugins,
                     },

package/package.json

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