npm - vaderjs - Versions diffs - 1.5.4 → 1.5.6 - Mend

vaderjs 1.5.4 → 1.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/bundler/index.js CHANGED Viewed

@@ -38,9 +38,10 @@ await Bun.build({
     minify: false,
     root: process.cwd() + "/dist/",
     outdir: process.cwd() + "/dist/",
     format: "esm",
     ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-    external:['*.jsx', '*.js']
+    external:['*.jsx', '*.js', '*.ts']
 });
 let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
@@ -52,18 +53,25 @@ function handleReplacements(code) {
         if(hasImport && line.includes('from')){
             try {
                 let url = line.includes("'") ? line.split("'")[1] : line.split('"')[1]
-                let exactFile = path.resolve(url)
-                // replace url with exact file path
-                line = line.replace(url, exactFile)
+                line = line.replace(url, url.replace('.jsx', '.js'))
+                line  = line.replace(url, url.replace('.ts', '.js'))
+                newLines.push(line)
             } catch (error) {
                 continue;
             }
+        }else{
+            newLines.push(line)
         }
     }
-    return lines.join("\n");
+    return  newLines.join('\n')
 }
+if(!process.env.isTs){
 builtCode = handleReplacements(builtCode)
 fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
+}
 let isClass = function (element) {
     return element.toString().startsWith("class");
 };
@@ -104,11 +112,15 @@ const generatePage = async (
         `<!DOCTYPE html>
         <head>
                ${headHtml}
+               ${process.env.bindes}
+               <meta charset="UTF-8">
+               <meta name="viewport" content="width=device-width, initial-scale=1.0">
         </head>
         ${h}
         <script type="module">
           import c from '${process.env.filePath}'
-          import {render} from '/src/vader/index.js'
+          import {render, e} from '/src/vader/index.js'
+          window.e = e
           render(c, document.body.firstChild)
         </script>
               `
@@ -123,7 +135,11 @@ const generatePage = async (
     process.exit(0);
 };
  try {
-    process.env.isImport == undefined && generatePage({ path: process.env.INPUT, route: process.env.OUT });
+    if(process.env.isTs == undefined &&  process.env.isImport) {
+        generatePage({ path: process.env.INPUT, route: process.env.OUT })
+    }else if(process.env.isTs == undefined){
+        generatePage({ path: process.env.INPUT, route: process.env.OUT })
+    }
  } catch (error) {
     console.log(ansiColors.red(error))
  }

package/document/index.ts CHANGED Viewed

@@ -1,39 +1,43 @@
-export const document = (element: any) => {
+export const document = (element: any) => {
    let type = element.type;
-   let el = `<${type}`;
+   let el =  type ===  null ? `` : `<${type}`
+   console.log(el)
    let attributes = element.props;
    let children = element.children;
-    for (let key in attributes) {
-      if(key === "key"){
-         el += ` key="${attributes[key]}"`;
-         continue;
-      }
-      if (key === "className") {
-         el += ` class="${attributes[key]}"`;
-         continue;
-      }
-      if (key === "style") {
-         // convert style object to string
-         let styles = attributes[key];
-         let styleString = "";
-        // convert camelCase to kebab-case
-         for (let style in styles) {
-            let kebabStyle = style.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-            styleString += `${kebabStyle}:${styles[style]};`;
+     if(type != null){
+      for (let key in attributes) {
+         if(key === "key"){
+            el += ` key="${attributes[key]}"`;
+            continue;
          }
-         el += ` style="${styleString}"`;
-         continue;
-      }
-      //@ts-ignore
-      if (key.startsWith("on")){
-         continue;
-      }
-      el += ` ${key}="${attributes[key]}"`;
-    }
-    el += ">";
+         if (key === "className") {
+            el += ` class="${attributes[key]}"`;
+            continue;
+         }
+         if (key === "style") {
+            // convert style object to string
+            let styles = attributes[key];
+            let styleString = "";
+           // convert camelCase to kebab-case
+            for (let style in styles) {
+               let kebabStyle = style.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+               styleString += `${kebabStyle}:${styles[style]};`;
+            }
+            el += ` style="${styleString}"`;
+            continue;
+         }
+         //@ts-ignore
+         if (key.startsWith("on")){
+            continue;
+         }
+         el += ` ${key}="${attributes[key]}"`;
+       }
+     }
+    el += type === null ? `` : `>`
     for (let i = 0;i < children.length; i++) {
       let child = children[i];
+      console.log(child)
       if (Array.isArray(child)) {
          child.forEach((c) => {
             el += document(c);
@@ -48,6 +52,6 @@ export const document = (element: any) => {
          el += child;
       }
     }
-    el += `</${type}>`;
+    el += type ===  null ? `` : `</${type}>`
     return el;
 }

package/index.ts CHANGED Viewed

@@ -74,10 +74,10 @@ export const useEffect = (callback:any, dependencies: any[]) => {
-export const Fragment = (props: any, children: any) => {
+export const Fragment = (props: any, children: any) => {
   return  {
-    type: "div",
-    props: props || {},
+    type: isServer ? null : "div",
+    props:{},
     children: children || [],
   }
 }
@@ -91,7 +91,7 @@ globalThis.Fragment = Fragment;
  * @param children
  * @returns
  */
-export const e = (element, props, ...children) => {
+export const e = (element, props, ...children) => {
   let instance;
   switch (true) {
     case isClassComponent(element):
@@ -102,10 +102,10 @@ export const e = (element, props, ...children) => {
     case typeof element === "function":
       instance = new Component;
       instance.render = element;
-      let firstEl = instance.render({key: instance.key, children: children, ...props});
+      let firstEl = instance.render({key: instance.key, children: children, ...props}, children);
       instance.children = children;
-      if (!firstEl) firstEl = {type: "div", props: {key: instance.key, children: [], ...props}, children: []};
-      firstEl.props = {key: instance.key, children: children, ...props};
+      if (!firstEl) firstEl = {type: "div", props: {key: instance.key,  ...props}, children: children};
+      firstEl.props = { key: instance.key,  ...firstEl.props, ...props };
       return firstEl;
     default:
       return { type: element, props: props || {}, children: children || [] };
@@ -127,7 +127,7 @@ export function Switch({ children }) {
       return child;
     }
   }
-  return null;
+  return  { type: "div", props: {}, children: [] };
 }
 /**
@@ -136,7 +136,7 @@ export function Switch({ children }) {
  * @returns
  */
 export function Match({ when, children }) {
-  return when ? children : null;
+  return when ? children : { type: "div", props: {}, children: [] };
 }
 /**
  * @description -  Manage state and forceupdate specific affected elements
@@ -148,7 +148,11 @@ export const useState = <T>(initialState: T) => {
   const setState = (newState: T) => {
     initialState = newState;
   }
-  return [initialState, setState];
+  const getVal = () => {
+    return initialState;
+  }
+  return [getVal, setState];
 }
 /**
@@ -201,7 +205,8 @@ export class Component {
     if (typeof window === "undefined")
       return [defaultValue, () => {
       }];
-    let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+     let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
     if (typeof value === "string") {
       try {
         value = JSON.parse(value);
@@ -215,11 +220,14 @@ export class Component {
       });
     }
     const setValue = (newValue) => {
-      value = newValue;
-      sessionStorage.setItem("state_" + key, JSON.stringify({ type: typeof newValue, value: newValue }));
+      console.log("setting value", newValue);
+      sessionStorage.setItem("state_" + key, JSON.stringify({ value: newValue }));
       this.forceUpdate(this.key);
     };
-    return [value, setValue];
+    const getVal = () => {
+      return sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+    }
+    return [getVal, setValue];
   }
   useFetch(url, options) {
     const loadingKey = "loading_" + url;
@@ -247,19 +255,18 @@ export class Component {
     let newl = this.toElement();
     if (newl.key !== key) {
       newl = Array.from(newl.children).filter((el2) => el2.key === key)[0];
-    }
+    }
     this.Reconciler.update(el, newl);
   }
   Reconciler = {
     update: (oldElement, newElement) => {
-      if (!oldElement || !newElement)
-        return;
-      if (this.Reconciler.shouldUpdate(oldElement, newElement) && oldElement.tagName == newElement.tagName) {
+      if (this.Reconciler.shouldUpdate(oldElement, newElement)) {
+        console.log("should update");
         oldElement.replaceWith(newElement);
       } else {
-        let children = oldElement.childNodes;
-        for (let i = 0;i < children.length; i++) {
-          this.Reconciler.update(children[i], newElement.childNodes[i]);
+        for (let i = 0; i < newElement.childNodes.length; i++) {
+          this.Reconciler.update(oldElement.childNodes[i], newElement.childNodes[i]);
         }
       }
     },
@@ -273,6 +280,9 @@ export class Component {
       if (oldElement.nodeName !== newElement.nodeName) {
         return true;
       }
+      if (oldElement.innerHTML !== newElement.innerHTML) {
+        return true;
+      }
       if (oldElement.childNodes.length !== newElement.childNodes.length) {
         return true;
       }
@@ -280,18 +290,19 @@ export class Component {
     }
   };
   parseToElement = (element) => {
-    if (!element)
-      return document.createElement("div");
-    let el = document.createElement(element.type);
+    if (!element) return document.createElement("div");
+    // create either a element or svg element
+    let svg = ["svg", "path", "circle", "rect", "line", "polyline", "polygon", "ellipse", "g"];
+    let el =  svg.includes(element.type) ? document.createElementNS("http://www.w3.org/2000/svg", element.type) : document.createElement(element.type);
     let isText = typeof element === "string" || typeof element === "number" || typeof element === "boolean";
     if (isText) {
-      el.textContent = element;
+      el.innerHTML = element;
     } else {
       let attributes = element.props;
       let children = element.children;
       for (let key in attributes) {
-        if (key === "key") {
-           el.key = attributes[key];
+        if (key === "key") {
+          el.key = attributes[key];
           continue;
         }
         if (key === "className") {
@@ -299,8 +310,12 @@ export class Component {
           continue;
         }
         if (key === "style") {
-          for (let styleKey in attributes[key]) {
-            el.style[styleKey] = attributes[key][styleKey];
+          try {
+            for (let styleKey in attributes[key]) {
+              el.style[styleKey] = attributes[key][styleKey];
+            }
+          } catch (error) {
           }
           continue;
         }
@@ -309,22 +324,23 @@ export class Component {
           continue;
         }
         el.setAttribute(key, attributes[key]);
-      }
-       if(children === undefined) return el;
-       for (let i = 0;i < children.length; i++) {
+      }
+      if (children === undefined)
+        return el;
+      for (let i = 0;i < children.length; i++) {
         let child = children[i];
         if (Array.isArray(child)) {
           child.forEach((c) => {
             el.appendChild(this.parseToElement(c));
           });
         }
-        if (typeof child === "function") {
+        if (typeof child === "function") {
           console.log("child is function");
           let comp = memoizeClassComponent(Component);
           comp.Mounted = true;
           comp.render = child;
           let el2 = comp.toElement();
-          el2.setAttribute("key", comp.key);
+          el2.key = comp.key;
           el.appendChild(el2);
         } else if (typeof child === "object") {
           el.appendChild(this.parseToElement(child));
@@ -345,9 +361,7 @@ export class Component {
   }
   toElement() {
     let children = this.render();
-    if (children.props["key"]) {
-      this.key = children.props["key"];
-    }
     let el = this.parseToElement(children);
     el.key = this.key;
     return el;

package/main.js CHANGED Viewed

@@ -12,6 +12,18 @@ if (!fs.existsSync(process.cwd() + '/app')) {
 if (!fs.existsSync(process.cwd() + '/public')) {
     fs.mkdirSync(process.cwd() + '/public')
 }
+if(!fs.existsSync(process.cwd() + '/src')){
+    fs.mkdirSync(process.cwd() + '/src')
+}
+if(!fs.existsSync(process.cwd() + '/vader.config.ts')){
+    fs.writeFileSync(process.cwd() + '/vader.config.ts',
+`
+import defineConfig from 'vaderjs/config'
+export default  defineConfig({
+    port: 8080,
+    host_provider: 'apache'
+})`)
+}
 const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : null
 if (!mode) {
     console.log(`
@@ -47,9 +59,9 @@ if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
     await Bun.write(process.cwd() + '/jsconfig.json', JSON.stringify(json, null, 4))
 }
-const bindes = []
+var bindes = []
-const handleReplacements = (code, file) => {
+const handleReplacements = (code ) => {
     let lines = code.split('\n')
     let newLines = []
     for (let line of lines) {
@@ -57,14 +69,23 @@ const handleReplacements = (code, file) => {
         if (hasImport && line.includes('.css')) {
             try {
-                let url = path.join('/' + line.split("'")[1])
-                let css = fs.readFileSync(process.cwd() + url, 'utf-8')
-                line = '';
-                if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
-                    bindes.push(`<link rel="stylesheet" href="${url}">`)
-                }
-                fs.mkdirSync(process.cwd() + '/dist' + path.dirname(url), { recursive: true })
-                fs.writeFileSync(process.cwd() + '/dist' + url, css)
+                 let isSmallColon = line.includes("'")
+                 let url = isSmallColon ? line.split("'")[1] : line.split('"')[1]
+                 // start from "/" not "/app"
+                 // remvoe all ./ and ../
+                  url = url.replaceAll('./', '/').replaceAll('../', '/')
+                 let p = path.join(process.cwd() , '/', url)
+                 line = '';
+                 url = url.replace(process.cwd() + '/app', '')
+                 url = url.replace(/\\/g, '/')
+                 if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
+                     bindes.push(`
+                    <style>
+                      ${fs.readFileSync(p, 'utf-8')}
+                    </style>
+                    `)
+                 }
             } catch (error) {
                 console.error(error)
             }
@@ -114,7 +135,7 @@ async function generateApp() {
     }
     return new Promise(async (resolve, reject) => {
         let routes = new Bun.FileSystemRouter({
-            dir: process.cwd() + '/app',
+            dir: path.join(process.cwd(), '/app'),
             style: 'nextjs'
         })
         routes.reload()
@@ -132,7 +153,7 @@ async function generateApp() {
         let route = window.location.pathname.split('/').filter(v => v !== '')
         let params = {
             ${Object.keys(routes.match(route).params || {}).length > 0 ? Object.keys(routes.match(route).params || {}).map(p => {
-                return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p)}]`
+                return `${p}: route[${Object.keys(routes.match(route).params).indexOf(p) +  Object.keys(routes.match(route).params).length}]`
             }).join(',') : ""}
         }
         \n${code}
@@ -160,11 +181,13 @@ async function generateApp() {
                     file: process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r),
                     DEV: mode === 'development',
                     size,
+                    bindes: bindes.join('\n'),
                     filePath: r,
                     INPUT: `../app/${r.replace('.js', '.jsx')}`,
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
+                        bindes = []
                         console.log(`Built ${r} in ${Date.now() - start}ms`)
                         resolve()
                     } else {
@@ -222,7 +245,7 @@ function handleFiles() {
             }
             let glob2 = new Glob('src/**/*')
             for await (var i of glob2.scan()) {
-              var file = i
+              var file = i
                 fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
                  // turn jsx to js
                 if (file.includes('.jsx')) {
@@ -253,6 +276,34 @@ function handleFiles() {
                             }
                         }
                     })
+                }else if(file.includes('.ts')){
+                    let code = await Bun.file(file).text()
+                    code = handleReplacements(code)
+                    file = file.replace('.ts', '.js')
+                    fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.ts', '.js')), code)
+                    await Bun.spawn({
+                        cmd: ['bun', 'run', './dev/bundler.js'],
+                        cwd: process.cwd(),
+                        stdout: 'inherit',
+                        env: {
+                            ENTRYPOINT: path.join(process.cwd() + '/dist/' + file.replace('.ts', '.js')),
+                            ROOT: process.cwd() + '/app/',
+                            OUT: path.dirname(file),
+                            file: process.cwd() + '/dist/' + file.replace('.ts', '.js'),
+                            DEV: mode === 'development',
+                            isTS: true,
+                            size: code.length / 1024,
+                            filePath: file.replace('.ts', '.js'),
+                            INPUT:  path.join(process.cwd() , file.replace('.js', '.jsx')),
+                        },
+                        onExit({ exitCode: code }) {
+                            if (code === 0) {
+                                resolve()
+                            } else {
+                                reject()
+                            }
+                        }
+                    })
                 }
             }
@@ -275,7 +326,8 @@ if (mode === 'development') {
     // Function to handle file changes with debounce
     const handleFileChangeDebounced = async (change, file) => {
-        if(file.endsWith('.tsx') || file.endsWith('.jsx')){
+        if(file.endsWith('.tsx') || file.endsWith('.jsx') || file.endsWith('.css') || file.endsWith('.ts') ) {
+            if(file.includes('dist')) return
             clearTimeout(debounceTimeout);
         debounceTimeout = setTimeout(async () => {
             if (!isBuilding) { // Check if not already building
@@ -283,9 +335,12 @@ if (mode === 'development') {
                 try {
                     await generateApp();
                     await handleFiles();
-                    clients.forEach(c => {
-                        c.send('reload');
-                    });
+                    let t = setTimeout(() => {
+                        clients.forEach(c => {
+                            c.send('reload');
+                        });
+                        clearTimeout(t)
+                    }, 1000)
                 } catch (error) {
                     console.error(error);
                 } finally {
@@ -322,10 +377,12 @@ if (mode === 'development') {
                 let p = url.pathname.replaceAll("%5B", "[").replaceAll("%5D", "]")
                 let file = await Bun.file(path.join(process.cwd() + '/dist' + p))
                 if (!await file.exists()) return new Response('Not found', { status: 404 })
-                return new Response(await file.text(), {
+                let imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp', 'image/tiff', 'image/bmp', 'image/ico', 'image/cur', 'image/jxr', 'image/jpg']
+                return new Response(imageTypes.includes(file.type) ? await file.arrayBuffer() : await file.text(), {
                     headers: {
                         'Content-Type': file.type,
-                        'Cache-Control': 'no-cache',
+                        'Cache-Control': imageTypes.includes(file.type) ? 'max-age=31536000' : 'no-cache',
                         'Access-Control-Allow-Origin': '*'
                     }
                 })

package/package.json CHANGED Viewed

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