vaderjs 2.3.4 → 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

@@ -1,15 +1,5 @@
 #!/usr/bin/env bun
-/**
- * VaderJS Build & Development Script
- *
- * This script handles building the VaderJS framework, your application code,
- * and serving it in a local development environment with live reloading.
- *
- * Commands:
- * bun run vaderjs build   -  Builds the project for production.
- * bun run vaderjs dev     -  Starts the dev server with HMR and file watching.
- * bun run vaderjs serve   -  Builds and serves the production output.
- */
+ 
 
 import { build, serve } from "bun";
 import fs from "fs/promises";
@@ -85,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,
@@ -93,9 +89,10 @@ const vaderAPI = {
 
 async function loadConfig() {
   try {
-    const configModule = await import(path.join(PROJECT_ROOT, "vaderjs.config.js"));
+    const configModule = await import(path.join(PROJECT_ROOT, "vaderjs.config.js")); 
     return configModule.default || configModule;
   } catch {
+    console.log(path.join(PROJECT_ROOT, "vaderjs.config.js"))
     logger.warn("No 'vader.config.js' found, using defaults.");
     return {};
   }
@@ -149,10 +146,43 @@ async function buildVaderCore() {
 function patchHooksUsage(code) {
   return code.replace(/import\s+{[^}]*use(State|Effect|Memo|Navigation)[^}]*}\s+from\s+['"]vaderjs['"];?\n?/g, "");
 }
+function publicAssetPlugin() {
+  return {
+    name: "public-asset-replacer",
+    setup(build) {
+      build.onLoad({ filter: /\.(js|ts|jsx|tsx|html)$/ }, async (args) => {
+        let code = await fs.readFile(args.path, "utf8");
+
+        code = code.replace(/\{\{public:(.+?)\}\}/g, (_, relPath) => {
+          const absPath = path.join(PUBLIC_DIR, relPath.trim());
+          if (fsSync.existsSync(absPath)) {
+            return "/" + relPath.trim().replace(/\\/g, "/");
+          }
+          logger.warn(`Public asset not found: ${relPath}`);
+          return relPath;
+        });
+
+        return {
+          contents: code,
+          loader: args.path.endsWith(".html")
+            ? "text"
+            : args.path.endsWith(".tsx")
+            ? "tsx"
+            : args.path.endsWith(".jsx")
+            ? "jsx"
+            : args.path.endsWith(".ts")
+            ? "ts"
+            : "js",
+        };
+      });
+    },
+  };
+}
 
 /**
  * Step 3: Pre-processes all files in `/src` into a temporary directory.
  */
+ 
 async function preprocessSources(srcDir, tempDir) {
   await fs.mkdir(tempDir, { recursive: true });
   for (const entry of await fs.readdir(srcDir, { withFileTypes: true })) {
@@ -163,7 +193,7 @@ async function preprocessSources(srcDir, tempDir) {
       await preprocessSources(srcPath, destPath);
     } else if (/\.(tsx|jsx|ts|js)$/.test(entry.name)) {
       let content = await fs.readFile(srcPath, "utf8");
-      content = patchHooksUsage(content);
+      content = patchHooksUsage(content); 
       await fs.writeFile(destPath, content);
     } else {
       await fs.copyFile(srcPath, destPath);
@@ -201,6 +231,9 @@ async function buildSrc() {
     jsxImportSource: "vaderjs",
     target: "browser",
     minify: false,
+    plugins: [
+      publicAssetPlugin(),
+    ],
     external: ["vaderjs"],
   });
 }
@@ -222,57 +255,61 @@ async function copyPublicAssets() {
     return;
   }
 
-  // Ensure the dist directory exists
   if (!fsSync.existsSync(DIST_DIR)) {
     await fs.mkdir(DIST_DIR, { recursive: true });
   }
 
-  const devClientScript = isDev ? ` 
-  <script>
-    new WebSocket("ws://" + location.host + "/__hmr").onmessage = (msg) => {
-      if (msg.data === "reload") location.reload();
-    };
-  </script>` : "";
+  const devClientScript = isDev
+    ? `<script>
+        new WebSocket("ws://" + location.host + "/__hmr").onmessage = (msg) => {
+          if (msg.data === "reload") location.reload();
+        };
+      </script>`
+    : "";
 
   const entries = fsSync.readdirSync(APP_DIR, { recursive: true })
     .filter(file => /index\.(jsx|tsx)$/.test(file))
     .map(file => ({
-        name: path.dirname(file) === '.' ? 'index' : path.dirname(file).replace(/\\/g, '/'),
-        path: path.join(APP_DIR, file)
+      name: path.dirname(file) === '.' ? 'index' : path.dirname(file).replace(/\\/g, '/'),
+      path: path.join(APP_DIR, file)
     }));
 
+  // Helper to resolve any asset path from /public
+  function resolvePublicPath(p) {
+    const assetPath = p.replace(/^(\.\/|\/)/, ""); // strip leading ./ or /
+    const absPath = path.join(PUBLIC_DIR, assetPath);
+    if (fsSync.existsSync(absPath)) {
+      return "/" + assetPath.replace(/\\/g, "/");
+    }
+    return p; // leave unchanged if not in public
+  }
+
   for (const { name, path: entryPath } of entries) {
-    // Check for the specific case where 'name' could be 'index.js' and prevent duplication
     const outDir = path.join(DIST_DIR, name === 'index' ? '' : name);
-    const outJsPath = path.join(outDir, 'index.js');  // Output JavaScript file path
-
-    // Ensure the output directory exists
+    const outJsPath = path.join(outDir, 'index.js');
     await fs.mkdir(outDir, { recursive: true });
 
-    // **FIXED CSS HANDLING**: Find, copy, and correctly link CSS files
+    // --- CSS HANDLING ---
     const cssLinks = [];
-    const cssContent = await fs.readFile(entryPath, "utf8");
-    const cssImports = [...cssContent.matchAll(/import\s+['"](.*\.css)['"]/g)];
-
+    let content = await fs.readFile(entryPath, "utf8");
+    const cssImports = [...content.matchAll(/import\s+['"](.*\.css)['"]/g)];
     for (const match of cssImports) {
-        const cssImportPath = match[1]; // e.g., './styles.css'
-        const sourceCssPath = path.resolve(path.dirname(entryPath), cssImportPath);
-        if (fsSync.existsSync(sourceCssPath)) {
-            const relativeCssPath = path.relative(APP_DIR, sourceCssPath);
-            const destCssPath = path.join(DIST_DIR, relativeCssPath);
-
-            await fs.mkdir(path.dirname(destCssPath), { recursive: true });
-            await fs.copyFile(sourceCssPath, destCssPath);
-
-            const htmlRelativePath = path.relative(outDir, destCssPath).replace(/\\/g, '/');
-            cssLinks.push(`<link rel="stylesheet" href="${htmlRelativePath}">`);
-        } else {
-            logger.warn(`CSS file not found: ${sourceCssPath}`);
-        }
+      const cssImportPath = match[1];
+      const sourceCssPath = path.resolve(path.dirname(entryPath), cssImportPath);
+      if (fsSync.existsSync(sourceCssPath)) {
+        const relativeCssPath = path.relative(APP_DIR, sourceCssPath);
+        const destCssPath = path.join(DIST_DIR, relativeCssPath);
+        await fs.mkdir(path.dirname(destCssPath), { recursive: true });
+        await fs.copyFile(sourceCssPath, destCssPath);
+        const htmlRelativePath = path.relative(outDir, destCssPath).replace(/\\/g, '/');
+        cssLinks.push(`<link rel="stylesheet" href="${htmlRelativePath}">`);
+      } else {
+        logger.warn(`CSS file not found: ${sourceCssPath}`);
+      }
     }
 
-    // Update the script tag to use relative paths for index.js
-    const htmlContent = `<!DOCTYPE html>
+    // --- HTML GENERATION ---
+    let htmlContent = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
@@ -286,37 +323,54 @@ async function copyPublicAssets() {
   <script type="module">
     import App from '${name !== 'index' ? "/" + name : ''}/index.js'; 
     import * as Vader from '/src/vader/index.js';
-    window.Vader = Vader
+    window.Vader = Vader;
     Vader.render(Vader.createElement(App, null), document.getElementById("app"));
   </script>
   ${devClientScript}
 </body>
 </html>`;
 
-    await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
+    // --- FIX ASSET PATHS IN HTML ---
+    htmlContent = htmlContent.replace(
+      /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
+      (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
+    );
 
-    // Log for debugging 
+    await fs.writeFile(path.join(outDir, "index.html"), htmlContent);
 
-    // Build the JavaScript file and ensure it uses the correct paths
+    // --- JS BUILD ---
     await build({
       entrypoints: [entryPath],
-      outdir: outDir,  // Pass the directory path to outdir 
+      outdir: outDir,
       target: "browser",
       minify: false,
       sourcemap: "external",
       external: ["vaderjs"],
       jsxFactory: "e",
       jsxFragment: "Fragment",
+       plugins: [
+      publicAssetPlugin(),
+    ],
       jsxImportSource: "vaderjs",
     });
 
-    // After build, replace the 'vaderjs' import to the correct path
+    // --- FIX IMPORT PATHS IN JS ---
     let jsContent = await fs.readFile(outJsPath, "utf8");
+
+    // Vader import fix
     jsContent = jsContent.replace(/from\s+['"]vaderjs['"]/g, `from '/src/vader/index.js'`);
+
+    // Asset path fix for JS
+    jsContent = jsContent.replace(
+      /(["'(])([^"'()]+?\.(png|jpe?g|gif|svg|webp|ico))(["')])/gi,
+      (match, p1, assetPath, ext, p4) => p1 + resolvePublicPath(assetPath) + p4
+    );
+
     await fs.writeFile(outJsPath, jsContent);
   }
 }
 
+
  
 
  async function buildAll(isDev = false) {
@@ -442,6 +496,7 @@ console.log(banner);
   const command = process.argv[2];
 
   if (command === "dev") {
+    globalThis.isDev = true
     await runDevServer();
   } else if (command === "build") {
     await buildAll(false);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "2.3.4",
+    "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;