vaderjs 2.3.5 → 2.3.6

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

@@ -346,29 +346,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 +385,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 +401,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 +427,8 @@ function updateHostComponent(fiber: Fiber): void {
         parent: wipFiber,
         alternate: null,
         effectTag: "PLACEMENT",
-        key
+        key,
+        _needsUpdate: true,
       };
     }
 
@@ -436,9 +443,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 +460,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 +597,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.

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,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "2.3.5",
+    "version": "2.3.6",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"

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;