vaderjs 2.3.5 → 2.3.7

package/config/index.ts

@@ -1,6 +1,9 @@
-type Config = {
+export type Config = {
   port: number,
   host?: string, 
+  plugin_config?:  {
+    [key: string]: any
+  },
   plugins?: any[],
   generateTypes?: boolean,
   host_provider?: 'vercel' | 'netlify' | 'aws' | 'gcp' | 'azure' | 'heroku' | 'custom' | 'apache' | 'none',

package/index.ts

@@ -104,9 +104,16 @@ function createDom(fiber: Fiber): Node {
   }
 
   updateDom(dom, {}, fiber.props);
+  
+  // Assign ref if this fiber has a ref prop
+  if (fiber.props && fiber.props.ref) {
+    fiber.props.ref.current = dom;
+  }
+  
   return dom;
 }
 
+
 function isSvgElement(fiber: Fiber): boolean {
   // Check if the fiber is an <svg> itself or inside an <svg>
   let parent = fiber.parent; 
@@ -126,11 +133,19 @@ function isSvgElement(fiber: Fiber): boolean {
  * @param {object} nextProps - The new properties.
  */
 function updateDom(dom: Node, prevProps: any, nextProps: any): void {
-  prevProps = prevProps || {};
+   prevProps = prevProps || {};
   nextProps = nextProps || {};
 
   const isSvg = dom instanceof SVGElement;
 
+  // Handle ref updates
+  if (prevProps.ref && prevProps.ref !== nextProps.ref) {
+    prevProps.ref.current = null;
+  }
+  if (nextProps.ref && nextProps.ref !== prevProps.ref) {
+    nextProps.ref.current = dom;
+  } 
+
   // Remove old or changed event listeners
   Object.keys(prevProps)
     .filter(isEvent)
@@ -231,18 +246,31 @@ function commitRoot(): void {
  * @param {Fiber} fiber - The fiber to commit.
  */
 function commitWork(fiber: Fiber | null): void {
-  if (!fiber) {
-    return;
-  }
+  if (!fiber) return;
 
   let domParentFiber = fiber.parent;
   while (domParentFiber && !domParentFiber.dom) {
     domParentFiber = domParentFiber.parent;
   }
-  const domParent = domParentFiber ? domParentFiber.dom : null;
+  const domParent = domParentFiber?.dom ?? null;
 
   if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
     if (domParent) domParent.appendChild(fiber.dom);
+    
+    // ⚡ Assign refs immediately when DOM is placed
+    if (fiber.props && fiber.props.ref) {
+      fiber.props.ref.current = fiber.dom;
+    }
+    
+    // Also check for useRef hooks in this fiber
+    if (fiber.hooks) {
+      for (const hook of fiber.hooks) {
+        if ("current" in hook && !hook._isRef && fiber.dom) {
+          // This is likely a DOM ref hook
+          hook.current = fiber.dom;
+        }
+      }
+    }
   } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
     updateDom(fiber.dom, fiber.alternate?.props ?? {}, fiber.props);
   } else if (fiber.effectTag === "DELETION") {
@@ -253,14 +281,21 @@ function commitWork(fiber: Fiber | null): void {
   commitWork(fiber.sibling);
 }
 
+
 /**
  * Recursively removes a fiber and its children from the DOM.
  * @param {Fiber} fiber - The fiber to remove.
  */
-function commitDeletion(fiber: Fiber | null): void {
+ function commitDeletion(fiber: Fiber | null): void {
   if (!fiber) {
     return;
   }
+  
+  // Clear refs when element is removed
+  if (fiber.props && fiber.props.ref) {
+    fiber.props.ref.current = null;
+  }
+  
   if (fiber.dom) {
     if (fiber.dom.parentNode) {
       fiber.dom.parentNode.removeChild(fiber.dom);
@@ -346,29 +381,38 @@ function performUnitOfWork(fiber: Fiber): Fiber | null {
  * Updates a function component fiber.
  * @param {Fiber} fiber - The function component fiber to update.
  */
- function updateFunctionComponent(fiber: Fiber) {
+function updateFunctionComponent(fiber: Fiber) {
   wipFiber = fiber;
   hookIndex = 0;
   fiber.hooks = fiber.alternate?.hooks || [];
 
-  // 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));
+  const rawChildren = (fiber.type as Function)(fiber.props);
+  const children = normalizeChildren(rawChildren, fiber);
 
   reconcileChildren(fiber, children);
 }
+function normalizeChildren(children: any, parentFiber: Fiber): VNode[] {
+  if (!children) return [];
+  let arr = Array.isArray(children) ? children : [children];
+
+  return arr.flatMap((child, index) => {
+    if (child == null || typeof child === "boolean") return [];
+    if (typeof child === "string" || typeof child === "number") return [createTextElement(String(child))];
+
+    // Ensure every child has a stable key
+    const key = child.key ?? child.props?.id ?? `${parentFiber.key ?? "root"}-${index}`;
+    return [{ ...child, key }];
+  });
+}
 /**
  * Updates a host component fiber (DOM element).
  * @param {Fiber} fiber - The host component fiber to update.
  */
 function updateHostComponent(fiber: Fiber): void {
-  if (!fiber.dom) {
-    fiber.dom = createDom(fiber);
-  }
-  reconcileChildren(fiber, fiber.props.children);
+  if (!fiber.dom) fiber.dom = createDom(fiber);
+
+  const children = normalizeChildren(fiber.props.children, fiber);
+  reconcileChildren(fiber, children);
 }
 
 /**
@@ -376,12 +420,11 @@ 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[]) {
+function reconcileChildren(wipFiber: Fiber, elements: VNode[]) {
   let index = 0;
   let oldFiber = wipFiber.alternate?.child;
   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 ?? index;
@@ -393,23 +436,21 @@ function updateHostComponent(fiber: Fiber): void {
   index = 0;
   for (; index < elements.length; index++) {
     const element = elements[index];
-    const key = element?.key ?? index;
+    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
+      // Reuse old fiber for same type + key
       newFiber = {
-        type: oldFiber.type,
+        ...oldFiber,
         props: element.props,
-        dom: oldFiber.dom,
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: "UPDATE",
-        hooks: oldFiber.hooks,
-        key
+        _needsUpdate: false,
       };
       existingFibers.delete(key);
     } else if (element) {
@@ -421,7 +462,8 @@ function updateHostComponent(fiber: Fiber): void {
         parent: wipFiber,
         alternate: null,
         effectTag: "PLACEMENT",
-        key
+        key,
+        _needsUpdate: true,
       };
     }
 
@@ -436,9 +478,7 @@ function updateHostComponent(fiber: Fiber): void {
       prevSibling.sibling = newFiber;
     }
 
-    if (newFiber) {
-      prevSibling = newFiber;
-    }
+    if (newFiber) prevSibling = newFiber;
   }
 
   // Mark remaining old fibers for deletion
@@ -455,23 +495,17 @@ function updateHostComponent(fiber: Fiber): void {
  * @param {...any} children - The element's children.
  * @returns {VNode} The created virtual DOM element.
  */
-export function createElement(
-  type: string | Function,
-  props?: object,
-  ...children: any[]
-): VNode {
+ export function createElement(type: string | Function, props?: any, ...children: any[]): VNode {
+  const rawChildren = children.flat().filter(c => c != null && typeof c !== "boolean");
+  const normalizedChildren = rawChildren.map((child, i) => {
+    if (typeof child === "object") return child;
+    return createTextElement(String(child));
+  });
+
   return {
     type,
-    props: {
-      ...props,
-      children: children
-        .flat()
-        .filter(child => child != null && typeof child !== "boolean")
-        .map(child =>
-          typeof child === "object" ? child : createTextElement(child)
-        ),
-    },
-    key: props?.key ?? null,
+    props: { ...props, children: normalizedChildren },
+    key: props?.key ?? props?.id ?? null,
   };
 }
 
@@ -598,10 +632,36 @@ export function Switch({ children }: { children: VNode[] }): VNode | null {
 export function Match({ when, children }: { when: boolean, children: VNode[] }): VNode | null {
   return when ? children : null;
 }
-
+/**
+ * Wraps a functional component into a VNode for Vader.js rendering.
+ * @param {Function} fn - The function component to wrap.
+ * @returns {Function} A function that creates a VNode when called with props.
+ */
+export function component<P extends object>(
+  fn: (props: P) => VNode | VNode[]
+): (props: P & { key?: string | number }) => VNode {
+  return (props: P & { key?: string | number }) => {
+    return createElement(fn, props);
+  };
+}
 export function  Show({ when, children }: { when: boolean, children: VNode[] }): VNode | null {
   return when ? children : null;
 }
+ 
+/**
+ * For TypeScript to recognize your JSX factory, 
+ * you often need the global namespace declaration as well:
+ */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+    interface Element {
+      [key: string]: any;
+    }
+  }
+}
 
 /**
  * A React-like useRef hook for mutable references.
@@ -616,7 +676,7 @@ export function useRef<T>(initial: T): { current: T } {
 
   let hook = wipFiber.hooks[hookIndex];
   if (!hook) {
-    hook = { current: initial };
+    hook = { current: initial, _isRef: true };
     wipFiber.hooks[hookIndex] = hook;
   }
 

package/main.js

@@ -75,7 +75,13 @@ const vaderAPI = {
     await p.exited;
   },
   injectHTML: (content) => htmlInjections.push(content),
-  log: (msg) => logger.info(`[Plugin] ${msg}`),
+  log: {
+    warn: (msg) => logger.warn(msg),
+    info: (msg) => logger.info(msg),
+    error: (msg) => logger.error(msg),
+    success: (msg) => logger.success(msg),
+    step: (msg) => logger.step(msg)
+  },
   getProjectRoot: () => PROJECT_ROOT,
   getDistDir: () => DIST_DIR,
   getPublicDir: () => PUBLIC_DIR,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "vaderjs",
-    "version": "2.3.5",
-    "description": "A simple and powerful JavaScript library for building modern web applications.", 
+    "version": "2.3.7",
+    "description": "A simple and powerful JavaScript library for building modern web applications.",
     "bin": {
         "vaderjs": "./main.js"
     },
@@ -9,7 +9,7 @@
         "type": "git",
         "url": "https://github.com/Postr-Inc/Vader.js"
     },
-    "license":"MIT",
+    "license": "MIT",
     "dependencies": {
         "ansi-colors": "latest"
     }

package/plugins/index.ts

@@ -9,7 +9,13 @@ export interface VaderAPI {
   injectHTML(content: string): void;
 
   /** Log a message prefixed with [Vader Plugin] */
-  log(msg: string): void;
+  log : { 
+    warn: (msg: any) => void,
+    info: (msg: any) => void,
+    error: (msg: any) => void,
+    success: (msg: any) => void,
+    step: (msg: any) => void 
+  }
 
   /** Get absolute path to the project root */
   getProjectRoot(): string;
@@ -33,6 +39,9 @@ export type PluginHookName =
 
 /** Interface for a single plugin */
 export interface VaderPlugin {
+  name: string;
+  description: string;
+  version: string;
   /** Called before build starts */
   onBuildStart?(api: VaderAPI): Promise<void> | void;