vaderjs 2.3.2 → 2.3.4

package/cli.ts

@@ -2,77 +2,77 @@
 
 import fs from "fs/promises";
 import fsSync from "fs";
-import path from "path"; 
+import path from "path";
 import readline from "readline";
 
 function ask(question) {
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-  return new Promise((resolve) =>
-    rl.question(question + " ", (answer) => {
-      rl.close();
-      resolve(answer.trim());
-    })
-  );
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+    });
+    return new Promise((resolve) =>
+        rl.question(question + " ", (answer) => {
+            rl.close();
+            resolve(answer.trim());
+        })
+    );
 }
 
 async function run(cmd: string, args: string[] = []) {
-  try {
-    const proc = Bun.spawn([cmd, ...args], {
-      stdout: "inherit",
-      stderr: "inherit",
-    });
-    
-    const status = await proc.exited;
-    if (status !== 0) {
-      console.error(`Command failed: ${cmd} ${args.join(" ")}`);
-      process.exit(1);
+    try {
+        const proc = Bun.spawn([cmd, ...args], {
+            stdout: "inherit",
+            stderr: "inherit",
+        });
+
+        const status = await proc.exited;
+        if (status !== 0) {
+            console.error(`Command failed: ${cmd} ${args.join(" ")}`);
+            process.exit(1);
+        }
+    } catch (error) {
+        console.error(`Error executing command: ${error}`);
+        process.exit(1);
     }
-  } catch (error) {
-    console.error(`Error executing command: ${error}`);
-    process.exit(1);
-  }
 }
 
 export async function init() {
-  console.log("🚀 Welcome to Vader.js project initializer!");
-
-  const cwd = process.cwd();
-  let projectDir = await ask(
-    `Enter the directory to initialize the project (default: current dir):`
-  );
-  if (!projectDir) projectDir = ".";
-
-  projectDir = path.resolve(cwd, projectDir);
-  if (!fsSync.existsSync(projectDir)) {
-    await fs.mkdir(projectDir, { recursive: true });
-    console.log(`Created directory: ${projectDir}`);
-  }
-
-  // Confirm Tailwind usage
-  let useTailwind = await ask("Include TailwindCSS v4 support? (y/n):");
-  while (!["y", "n", "yes", "no"].includes(useTailwind)) {
-    useTailwind = await ask("Please answer 'y' or 'n':");
-  }
-  const wantsTailwind = useTailwind === "y" || useTailwind === "yes";
-
-  // Create folders: app, src, public
-  const appDir = path.join(projectDir, "app");
-  const srcDir = path.join(projectDir, "src");
-  const publicDir = path.join(projectDir, "public");
+    console.log("🚀 Welcome to Vader.js project initializer!");
+
+    const cwd = process.cwd();
+    let projectDir = await ask(
+        `Enter the directory to initialize the project (default: current dir):`
+    );
+    if (!projectDir) projectDir = ".";
+
+    projectDir = path.resolve(cwd, projectDir);
+    if (!fsSync.existsSync(projectDir)) {
+        await fs.mkdir(projectDir, { recursive: true });
+        console.log(`Created directory: ${projectDir}`);
+    }
 
-  for (const dir of [appDir, srcDir, publicDir]) {
-    if (!fsSync.existsSync(dir)) {
-      await fs.mkdir(dir, { recursive: true });
-      console.log(`Created folder: ${dir}`);
+    // Confirm Tailwind usage
+    let useTailwind = await ask("Include TailwindCSS v4 support? (y/n):");
+    while (!["y", "n", "yes", "no"].includes(useTailwind)) {
+        useTailwind = await ask("Please answer 'y' or 'n':");
+    }
+    const wantsTailwind = useTailwind === "y" || useTailwind === "yes";
+
+    // Create folders: app, src, public
+    const appDir = path.join(projectDir, "app");
+    const srcDir = path.join(projectDir, "src");
+    const publicDir = path.join(projectDir, "public");
+
+    for (const dir of [appDir, srcDir, publicDir]) {
+        if (!fsSync.existsSync(dir)) {
+            await fs.mkdir(dir, { recursive: true });
+            console.log(`Created folder: ${dir}`);
+        }
     }
-  }
 
-  // Create example app/index.jsx with counter
-  const counterCode = wantsTailwind
-    ? `import { useState } from "vaderjs";
+    // Create example app/index.jsx with counter
+    const counterCode = wantsTailwind
+        ? `import { useState } from "vaderjs";
 
 export default function Counter() {
   let [count, setCount] = useState(0);
@@ -90,7 +90,7 @@ export default function Counter() {
   );
 }
 `
-    : `import { useState } from "vaderjs";
+        : `import { useState } from "vaderjs";
 
 export default function Counter() {
   let [count, setCount] = useState(0);
@@ -104,69 +104,53 @@ export default function Counter() {
 }
 `;
 
-  await fs.writeFile(path.join(appDir, "index.jsx"), counterCode);
-  console.log(`Created example route: ${path.join("app", "index.jsx")}`);
+    await fs.writeFile(path.join(appDir, "index.jsx"), counterCode);
+    console.log(`Created example route: ${path.join("app", "index.jsx")}`);
 
-  // Create public/styles.css
-  if (wantsTailwind) {
-    await fs.writeFile(path.join(publicDir, "styles.css"), `@import 'tailwindcss';\n`);
-  } else {
-    await fs.writeFile(path.join(publicDir, "styles.css"), `/* Add your styles here */\n`);
-  }
-  console.log(`Created public/styles.css`);
-
-  // Create minimal package.json if not exist
-  const pkgJsonPath = path.join(projectDir, "package.json");
-  if (!fsSync.existsSync(pkgJsonPath)) {
-    const pkg = {
-      name: path.basename(projectDir),
-      version: "1.0.0",
-      scripts: {
-        start: "bun run vaderjs build && bun run vaderjs serve",
-        build: "bun run vaderjs build",
-        dev: "bun run vaderjs dev",
-      },
-      dependencies: {
-        vaderjs: "latest",
-      },
-    };
-    await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
-    console.log(`Created package.json`);
-  }
+    // Create public/styles.css
+    if (wantsTailwind) {
+        await fs.writeFile(path.join(publicDir, "styles.css"), `@import 'tailwindcss';\n`);
+    } else {
+        await fs.writeFile(path.join(publicDir, "styles.css"), `/* Add your styles here */\n`);
+    }
+    console.log(`Created public/styles.css`);
 
-  // Install dependencies: vaderjs + optionally tailwindcss, postcss plugins, autoprefixer
-  console.log("Installing dependencies with Bun...");
-  const deps = ["vaderjs", "autoprefixer"];
-  if (wantsTailwind) {
-    deps.push("tailwindcss@4", "@tailwindcss/postcss", "postcss-cli");
-  }
-  await run("bun", ["install", ...deps]);
-  console.log("✅ Dependencies installed.");
+    // Create minimal package.json if not exist
+
+
+    // Install dependencies: vaderjs + optionally tailwindcss, postcss plugins, autoprefixer
+    console.log("Installing dependencies with Bun...");
+    const deps = ["vaderjs", "autoprefixer"];
+    if (wantsTailwind) {
+        deps.push("tailwindcss@4", "@tailwindcss/postcss", "postcss-cli");
+    }
+    await run("bun", ["install", ...deps]);
+    console.log("✅ Dependencies installed.");
 
-  // If Tailwind requested, create minimal tailwind.config.cjs and postcss.config.cjs
-  if (wantsTailwind) {
-    const tailwindConfig = `module.exports = {
+    // If Tailwind requested, create minimal tailwind.config.cjs and postcss.config.cjs
+    if (wantsTailwind) {
+        const tailwindConfig = `module.exports = {
   content: ["./app/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
 };`;
-    await fs.writeFile(path.join(projectDir, "tailwind.config.cjs"), tailwindConfig);
-    console.log("Created tailwind.config.cjs");
+        await fs.writeFile(path.join(projectDir, "tailwind.config.cjs"), tailwindConfig);
+        console.log("Created tailwind.config.cjs");
 
-    const postcssConfig = `export default {
+        const postcssConfig = `export default {
   plugins: {
     "@tailwindcss/postcss": {},
     autoprefixer: {},
   }
 };`;
-    await fs.writeFile(path.join(projectDir, "postcss.config.cjs"), postcssConfig);
-    console.log("Created postcss.config.cjs");
-  }
+        await fs.writeFile(path.join(projectDir, "postcss.config.cjs"), postcssConfig);
+        console.log("Created postcss.config.cjs");
+    }
 
-  // Create vaderjs.config.ts regardless, add Tailwind plugin if needed
-  const vaderConfig = `import defineConfig from "vaderjs/config";
+    // Create vaderjs.config.ts regardless, add Tailwind plugin if needed
+    const vaderConfig = `import defineConfig from "vaderjs/config";
 ${wantsTailwind ? 'import tailwind from "vaderjs/plugins/tailwind";' : ''}
   
 export default defineConfig({
@@ -174,22 +158,71 @@ export default defineConfig({
   plugins: [${wantsTailwind ? "tailwind" : ""}],
 });`;
 
-  await fs.writeFile(path.join(projectDir, "vaderjs.config.ts"), vaderConfig);
-  console.log("Created vaderjs.config.ts");
-
-  // Create jsconfig.json for VSCode/IDE support
-  const jsConfig = {
-    compilerOptions: {
-      jsx: "react",
-      jsxFactory: "Vader.createElement",
-      jsxFragmentFactory: "Fragment",
-    },
-  };
-  await fs.writeFile(path.join(projectDir, "jsconfig.json"), JSON.stringify(jsConfig, null, 2));
-  console.log("Created jsconfig.json");
-
-  // Final instructions
-  console.log(`\n🎉 Vader.js project initialized at:\n${projectDir}`);
-  console.log(`Run cd ${projectDir} to navigate into the project folder`);
-  console.log("Run `bun run dev` or your build script to get started.");
+    await fs.writeFile(path.join(projectDir, "vaderjs.config.ts"), vaderConfig);
+    console.log("Created vaderjs.config.ts");
+
+    // Create jsconfig.json for VSCode/IDE support
+    const jsConfig = {
+        compilerOptions: {
+            jsx: "react",
+            jsxFactory: "Vader.createElement",
+            jsxFragmentFactory: "Fragment",
+        },
+    };
+    await fs.writeFile(path.join(projectDir, "jsconfig.json"), JSON.stringify(jsConfig, null, 2));
+    console.log("Created jsconfig.json");
+
+    // Final instructions
+    const pkgJsonPath = path.join(projectDir, "package.json");
+
+    if (!fsSync.existsSync(pkgJsonPath)) {
+        // If package.json doesn't exist, create it with basic content
+        const pkg = {
+            name: path.basename(projectDir),
+            version: "1.0.0",
+            scripts: {
+                start: "bun run vaderjs build && bun run vaderjs serve",
+                build: "bun run vaderjs build",
+                dev: "bun run vaderjs dev",
+            },
+            dependencies: {
+                vaderjs: "latest",
+            },
+        };
+
+        // If Tailwind is requested, add it to the dependencies
+        if (wantsTailwind) {
+            pkg.dependencies.tailwindcss = "latest";
+            pkg.dependencies["@tailwindcss/postcss"] = "latest";
+            pkg.dependencies.postcss = "latest";
+            pkg.dependencies.autoprefixer = "latest";
+        }
+
+        await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
+        console.log(`Created package.json`);
+    } else {
+        // If package.json exists, update it by adding Tailwind if it's not there
+        const pkgJson = JSON.parse(await fs.readFile(pkgJsonPath, "utf8"));
+
+        // Only update the dependencies and scripts if Tailwind is enabled
+        if (wantsTailwind && !pkgJson.dependencies.tailwindcss) {
+            pkgJson.dependencies.tailwindcss = "latest";
+            pkgJson.dependencies["@tailwindcss/postcss"] = "latest";
+            pkgJson.dependencies.postcss = "latest";
+            pkgJson.dependencies.autoprefixer = "latest";
+        }
+
+        // Ensure the scripts are in place (if they're not there already)
+        if (!pkgJson.scripts) pkgJson.scripts = {};
+        pkgJson.scripts.start = pkgJson.scripts.start || "bun run vaderjs build && bun run vaderjs serve";
+        pkgJson.scripts.build = pkgJson.scripts.build || "bun run vaderjs build";
+        pkgJson.scripts.dev = pkgJson.scripts.dev || "bun run vaderjs dev";
+
+        await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
+        console.log(`Updated package.json`);
+    }
+
+    console.log(`\n🎉 Vader.js project initialized at:\n${projectDir}`);
+    console.log(`Run cd ${projectDir} to navigate into the project folder`);
+    console.log("Run `bun run dev` or your build script to get started.");
 }

package/index.ts

@@ -13,7 +13,9 @@ let deletions: Fiber[] | null = null;
 let wipFiber: Fiber | null = null;
 let hookIndex = 0;
 let isRenderScheduled = false;
-
+// Add to the top of your Vader.js file
+ 
+ 
 interface Fiber {
   type?: string | Function;
   dom?: Node;
@@ -28,9 +30,13 @@ interface Fiber {
   effectTag?: "PLACEMENT" | "UPDATE" | "DELETION";
   hooks?: Hook[];
   key?: string | number | null;
+    propsCache?: Record<string, any>;
+  __compareProps?: (prev: any, next: any) => boolean;
+  __skipMemo?: boolean;
+  _needsUpdate?: boolean; 
 }
 
-interface VNode {
+export interface VNode {
   type: string | Function;
   props: {
     children: VNode[];
@@ -84,33 +90,55 @@ const isGone = (prev: object, next: object) => (key: string) => !(key in next);
  * @returns {Node} The created DOM node.
  */
 function createDom(fiber: Fiber): Node {
-  const dom =
-    fiber.type == "TEXT_ELEMENT"
-      ? document.createTextNode("")
-      : document.createElement(fiber.type as string);
+  let dom: Node;
+
+  if (fiber.type === "TEXT_ELEMENT") {
+    dom = document.createTextNode("");
+  } else {
+    const isSvg = isSvgElement(fiber); 
+    if (isSvg) {
+      dom = document.createElementNS("http://www.w3.org/2000/svg", fiber.type as string);
+    } else {
+      dom = document.createElement(fiber.type as string);
+    }
+  }
 
   updateDom(dom, {}, fiber.props);
   return dom;
 }
 
+function isSvgElement(fiber: Fiber): boolean {
+  // Check if the fiber is an <svg> itself or inside an <svg>
+  let parent = fiber.parent; 
+  if (fiber.type === "svg") return true;
+  while (parent) {
+    if (parent.type === "svg") return true;
+    parent = parent.parent;
+  }
+  return false;
+}
+
+
 /**
  * Applies updated props to a DOM node.
  * @param {Node} dom - The DOM node to update.
  * @param {object} prevProps - The previous properties.
  * @param {object} nextProps - The new properties.
  */
- function updateDom(dom: Node, prevProps: object, nextProps: object): void {
+function updateDom(dom: Node, prevProps: any, nextProps: any): void {
   prevProps = prevProps || {};
   nextProps = nextProps || {};
 
+  const isSvg = dom instanceof SVGElement;
+
   // Remove old or changed event listeners
   Object.keys(prevProps)
     .filter(isEvent)
-    .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))
-    .forEach((name) => {
+    .filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key))
+    .forEach(name => {
       const eventType = name.toLowerCase().substring(2);
       if (typeof prevProps[name] === 'function') {
-        dom.removeEventListener(eventType, prevProps[name]);
+        (dom as Element).removeEventListener(eventType, prevProps[name]);
       }
     });
 
@@ -118,12 +146,17 @@ function createDom(fiber: Fiber): Node {
   Object.keys(prevProps)
     .filter(isProperty)
     .filter(isGone(prevProps, nextProps))
-    .forEach((name) => {
-      // FIX: Handle both `class` and `className`
+    .forEach(name => {
       if (name === 'className' || name === 'class') {
-        (dom as HTMLElement).removeAttribute("class");
+        (dom as Element).removeAttribute('class');
+      } else if (name === 'style') {
+        (dom as HTMLElement).style.cssText = '';
       } else {
-        dom[name] = "";
+        if (isSvg) {
+          (dom as Element).removeAttribute(name);
+        } else {
+          (dom as any)[name] = '';
+        }
       }
     });
 
@@ -131,14 +164,24 @@ function createDom(fiber: Fiber): Node {
   Object.keys(nextProps)
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
-    .forEach((name) => {
-      if (name === 'style' && typeof nextProps[name] === 'string') {
-        (dom as HTMLElement).style.cssText = nextProps[name];
+    .forEach(name => {
+      if (name === 'style') {
+        const style = nextProps[name];
+        if (typeof style === 'string') {
+          (dom as HTMLElement).style.cssText = style;
+        } else if (typeof style === 'object' && style !== null) {
+          for (const [key, value] of Object.entries(style)) {
+            (dom as HTMLElement).style[key] = value;
+          }
+        }
       } else if (name === 'className' || name === 'class') {
-        // FIX: Handle both `class` and `className`
-        (dom as HTMLElement).className = nextProps[name];
+        (dom as Element).setAttribute('class', nextProps[name]);
       } else {
-        dom[name] = nextProps[name];
+        if (isSvg) {
+          (dom as Element).setAttribute(name, nextProps[name]);
+        } else {
+          (dom as any)[name] = nextProps[name];
+        }
       }
     });
 
@@ -146,15 +189,32 @@ function createDom(fiber: Fiber): Node {
   Object.keys(nextProps)
     .filter(isEvent)
     .filter(isNew(prevProps, nextProps))
-    .forEach((name) => {
+    .forEach(name => {
       const eventType = name.toLowerCase().substring(2);
       const handler = nextProps[name];
       if (typeof handler === 'function') {
-        dom.addEventListener(eventType, handler);
+        (dom as Element).addEventListener(eventType, handler);
+      }
+    });
+
+    Object.keys(nextProps)
+    .filter(isEvent)
+    .filter(isNew(prevProps, nextProps))
+    .forEach(name => {
+      const eventType = name.toLowerCase().substring(2);
+      const handler = nextProps[name];
+      if (typeof handler === 'function') {
+        // Remove old listener first if it exists
+        if (prevProps[name]) {
+          dom.removeEventListener(eventType, prevProps[name]);
+        }
+        // Add new listener with passive: true for better performance
+        dom.addEventListener(eventType, handler, { passive: true });
       }
     });
 }
 
+
 /**
  * Commits the entire work-in-progress tree to the DOM.
  */
@@ -227,11 +287,7 @@ export function render(element: VNode, container: Node): void {
   };
   deletions = [];
   nextUnitOfWork = wipRoot;
-  
-  if (!isRenderScheduled) {
-    isRenderScheduled = true;
-    requestAnimationFrame(workLoop);
-  }
+ requestAnimationFrame(workLoop);
 }
 
 /**
@@ -247,7 +303,7 @@ function workLoop(): void {
     deletions = [];
     nextUnitOfWork = wipRoot;
   }
-
+ 
   while (nextUnitOfWork) {
     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
   }
@@ -257,6 +313,7 @@ function workLoop(): void {
   }
 }
 
+ 
 /**
  * Performs work on a single fiber unit.
  * @param {Fiber} fiber - The fiber to perform work on.
@@ -264,7 +321,7 @@ function workLoop(): void {
  */
 function performUnitOfWork(fiber: Fiber): Fiber | null {
   const isFunctionComponent = fiber.type instanceof Function;
-
+ 
   if (isFunctionComponent) {
     updateFunctionComponent(fiber);
   } else {
@@ -289,19 +346,20 @@ function performUnitOfWork(fiber: Fiber): Fiber | null {
  * Updates a function component fiber.
  * @param {Fiber} fiber - The function component fiber to update.
  */
-function updateFunctionComponent(fiber: Fiber): void {
+ function updateFunctionComponent(fiber: Fiber) {
   wipFiber = fiber;
   hookIndex = 0;
-  wipFiber.hooks = fiber.alternate ? fiber.alternate.hooks : [];
+  fiber.hooks = fiber.alternate?.hooks || [];
 
-  const children = [fiber.type(fiber.props)]
+  // Directly call the component function without memoization
+  // The 'createComponent' call is removed.
+  const children = [(fiber.type as Function)(fiber.props)]
     .flat()
     .filter(child => child != null && typeof child !== 'boolean')
-    .map(child => typeof child === "object" ? child : createTextElement(child));
+    .map(child => typeof child === 'object' ? child : createTextElement(child));
 
   reconcileChildren(fiber, children);
 }
-
 /**
  * Updates a host component fiber (DOM element).
  * @param {Fiber} fiber - The host component fiber to update.
@@ -318,32 +376,31 @@ function updateHostComponent(fiber: Fiber): void {
  * @param {Fiber} wipFiber - The work-in-progress fiber.
  * @param {VNode[]} elements - The new child elements.
  */
-function reconcileChildren(wipFiber: Fiber, elements: VNode[]): void {
+ function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
   let index = 0;
   let oldFiber = wipFiber.alternate?.child;
-  let prevSibling = null;
-
-  const oldFibersByKey = new Map<string | number, Fiber>();
-
+  let prevSibling: Fiber | null = null;
+  
+  // Create map of existing fibers by key
+  const existingFibers = new Map<string | number | null, Fiber>();
   while (oldFiber) {
-    const key = oldFiber.key != null ? oldFiber.key : index;
-    oldFibersByKey.set(key, oldFiber);
+    const key = oldFiber.key ?? index;
+    existingFibers.set(key, oldFiber);
     oldFiber = oldFiber.sibling;
     index++;
   }
 
   index = 0;
-  prevSibling = null;
-
   for (; index < elements.length; index++) {
     const element = elements[index];
-    const key = element.key != null ? element.key : index;
-    const oldFiber = oldFibersByKey.get(key);
-    const sameType = oldFiber && element.type === oldFiber.type;
-
+    const key = element?.key ?? index;
+    const oldFiber = existingFibers.get(key);
+    
+    const sameType = oldFiber && element && element.type === oldFiber.type;
     let newFiber: Fiber | null = null;
 
     if (sameType) {
+      // Reuse the fiber
       newFiber = {
         type: oldFiber.type,
         props: element.props,
@@ -351,37 +408,44 @@ function reconcileChildren(wipFiber: Fiber, elements: VNode[]): void {
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: "UPDATE",
-        key,
+        hooks: oldFiber.hooks,
+        key
       };
-      oldFibersByKey.delete(key);
-    } else {
-      if (element) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: null,
-          parent: wipFiber,
-          alternate: null,
-          effectTag: "PLACEMENT",
-          key,
-        };
-      }
+      existingFibers.delete(key);
+    } else if (element) {
+      // Create new fiber
+      newFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: "PLACEMENT",
+        key
+      };
+    }
+
+    if (oldFiber && !sameType) {
+      oldFiber.effectTag = "DELETION";
+      deletions.push(oldFiber);
     }
 
-    if (prevSibling == null) {
+    if (index === 0) {
       wipFiber.child = newFiber;
-    } else {
+    } else if (prevSibling && newFiber) {
       prevSibling.sibling = newFiber;
     }
-    prevSibling = newFiber;
+
+    if (newFiber) {
+      prevSibling = newFiber;
+    }
   }
 
-  oldFibersByKey.forEach(fiber => {
+  // Mark remaining old fibers for deletion
+  existingFibers.forEach(fiber => {
     fiber.effectTag = "DELETION";
     deletions.push(fiber);
   });
-
-  if (prevSibling) prevSibling.sibling = null;
 }
 
 /**
@@ -432,39 +496,45 @@ function createTextElement(text: string): VNode {
  * @param {T|(() => T)} initial - The initial state value or initializer function.
  * @returns {[T, (action: T | ((prevState: T) => T)) => void]} A stateful value and a function to update it.
  */
-export function useState<T>(
-  initial: T | (() => T)
-): [T, (action: T | ((prevState: T) => T)) => void] {
+
+ 
+
+ export function useState<T>(initial: T | (() => T)): [T, (action: T | ((prevState: T) => T)) => void] {
   if (!wipFiber) {
     throw new Error("Hooks can only be called inside a Vader.js function component.");
   }
 
-  let hook = wipFiber.hooks[hookIndex];
+  let hook = wipFiber.hooks[hookIndex]; 
   if (!hook) {
     hook = { 
-      state: typeof initial === "function" ? (initial as () => T)() : initial, 
-      queue: [] 
+      state: typeof initial === "function" ? (initial as () => T)() : initial,
+      queue: [],
+      _needsUpdate: false
     };
     wipFiber.hooks[hookIndex] = hook;
   }
 
-  hook.queue.forEach((action) => {
-    hook.state = typeof action === "function" ? action(hook.state) : action;
-  });
-  hook.queue = [];
-
   const setState = (action: T | ((prevState: T) => T)) => {
-    hook.queue.push(action);
-    if (!isRenderScheduled) {
-      isRenderScheduled = true;
+    // Calculate new state based on current state 
+    const newState = typeof action === "function" 
+      ? (action as (prevState: T) => T)(hook.state)
+      : action;
+    
+      hook.state = newState;  
+      
+      // Reset work-in-progress root to trigger re-r 
+      
+      deletions = [];
+      nextUnitOfWork = wipRoot;
+      
+      // Start the render process
       requestAnimationFrame(workLoop);
-    }
   };
 
   hookIndex++;
   return [hook.state, setState];
 }
-
+ 
 /**
  * A React-like useEffect hook for side effects.
  * @param {Function} callback - The effect callback.
@@ -529,6 +599,10 @@ export function Match({ when, children }: { when: boolean, children: VNode[] }):
   return when ? children : null;
 }
 
+export function  Show({ when, children }: { when: boolean, children: VNode[] }): VNode | null {
+  return when ? children : null;
+}
+
 /**
  * A React-like useRef hook for mutable references.
  * @template T
@@ -923,3 +997,4 @@ export function useOnClickOutside(ref: { current: HTMLElement | null }, handler:
     };
   }, [ref, handler]);
 }
+ 

package/main.js

@@ -29,6 +29,17 @@ const colors = {
   cyan: "\x1b[36m",
 };
 
+function safeWatch(dir, cb) {
+  try {
+    const watcher = fsSync.watch(dir, { recursive: true }, cb);
+    watcher.on("error", (err) => logger.warn(`Watcher error on ${dir}:`, err));
+    return watcher;
+  } catch (err) {
+    logger.warn(`Failed to watch ${dir}:`, err);
+  }
+}
+
+
 const logger = {
   _log: (color, ...args) => console.log(color, ...args, colors.reset),
   info: (...args) => logger._log(colors.cyan, "ℹ", ...args),
@@ -46,8 +57,8 @@ async function timedStep(name, fn) {
     const duration = (performance.now() - start).toFixed(2);
     logger.success(`Finished '${name}' in ${duration}ms`);
   } catch (e) {
-    logger.error(`Error during '${name}':`, e.message);
-    process.exit(1);
+    logger.error(`Error during '${name}':`, e);
+    if (!isDev) process.exit(1);
   }
 }
 
@@ -101,13 +112,14 @@ async function runPluginHook(hookName) {
       try {
         await plugin[hookName](vaderAPI);
       } catch (e) {
-        logger.error(`Plugin hook error (${hookName} in ${plugin.name || 'anonymous plugin'}):`, e);
+        logger.error(`Plugin hook error (${hookName} in ${plugin.name || 'anonymous'}):`, e);
       }
     }
   }
 }
 
 
+
 // --- BUILD LOGIC ---
 
 /**
@@ -272,7 +284,7 @@ async function copyPublicAssets() {
 <body>
   <div id="app"></div>
   <script type="module">
-    import App from '${name !== 'index' ? name : ''}/index.js'; 
+    import App from '${name !== 'index' ? "/" + name : ''}/index.js'; 
     import * as Vader from '/src/vader/index.js';
     window.Vader = Vader
     Vader.render(Vader.createElement(App, null), document.getElementById("app"));
@@ -379,7 +391,7 @@ async function runDevServer() {
 
   const watchDirs = [APP_DIR, SRC_DIR, PUBLIC_DIR].filter(fsSync.existsSync);
   for (const dir of watchDirs) {
-    fsSync.watch(dir, { recursive: true }, debouncedBuild);
+    safeWatch(dir, debouncedBuild);
   }
 }
 
@@ -454,3 +466,9 @@ main().catch(err => {
   logger.error("An unexpected error occurred:", err);
   process.exit(1);
 });
+process.on("unhandledRejection", (err) => {
+  logger.error("Unhandled Promise rejection:", err);
+});
+process.on("uncaughtException", (err) => {
+  logger.error("Uncaught Exception:", err);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "2.3.2",
+    "version": "2.3.4",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"