vaderjs 1.4.9 → 1.5.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Pascal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+<p align="center">
+  <a href="https://vader-js.pages.dev">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
+      <img src="./logo.png" height="128">
+    </picture>
+    <h1 align="center">Vader.js</h1>
+  </a>
+</p>
+
+# Vader.js A reactive framework for building fast and scalable web applications
+
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs)
+
+
+# Installation
+
+```js
+npx vaderjs @latest
+```
+
+```ts
+import { useSate, e } from "vaderjs"
+export default function(){
+  let [count, setCount] = useState(0)
+  return (
+    <div>
+     <p>Count is {count} </p>
+     <button onClick={()=>setCount(count++)}>
+      Increment +1
+      </button>
+    </div>
+  )
+}
+```
+
+# Project Setup 
+Create a pages folder - which allows you to have nextjs page like routing via buns file based router
+
+Tip: Each folder can be deep nested up to 4 levels!
+
+```md
+
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/
+/pages/test/[[...catchall]]/index.jsx = /path/test/*
+/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
+
+```
+Keyword folders - all files are passed from these folders to the build folder
+
+```md
+1. pages - used for jsx route files
+2. src  - used for your jsx components / javascript -typescript files
+3. public - used for anything / css / json etc
+```
+
+
+# Define your config
+
+```ts
+import { defineConfig } from "vaderjs/config"; 
+import cloudflare from "vaderjs/plugins/cloudflare/functions"
+import tailwindcss from "vaderjs/plugins/tailwindcss"
+export default defineConfig({
+    target: "web",
+    host: {
+        hostname: "localhost",
+        provider:'cloudflare' // used for ssg or ssr
+    }, 
+    env: {
+        PORT: 3000,
+        SSR: true,
+        apiRoute: "https://api.example.com"
+    }, 
+     Router: {
+        tls: {
+            cert: "cert.pem",
+            key: "key.pem"
+        },
+        headers: {
+            "cache-control": "public, max-age=0, must-revalidate"
+        }
+    },
+    plugins: [cloudflare, tailwindcss],
+});
+
+```

package/bundler/index.js

@@ -10,6 +10,7 @@ import {
 import { document } from "vaderjs/document";
 import fs from "fs";
 import ansiColors from "ansi-colors";
+import path from "path";
 let path2 = require("path");
 globalThis.Fragment = Fragment;
 globalThis.window = {
@@ -34,12 +35,35 @@ globalThis.document = {
 };
 await Bun.build({
     entrypoints: [process.env.ENTRYPOINT],
-    minify: true,
+    minify: false,
     root: process.cwd() + "/dist/",
     outdir: process.cwd() + "/dist/",
     format: "esm",
     ...(process.env.DEV ? { sourcemap: "inline" } : {}),
+    external:['*.jsx', '*.js']
 });
+
+let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
+function handleReplacements(code) {
+    let lines = code.split("\n");
+    let newLines = [];
+    for (let line of lines) {
+        let hasImport = line.includes('import')
+        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) 
+            } catch (error) { 
+                continue;
+            }
+        }
+    }
+    return lines.join("\n");
+}
+builtCode = handleReplacements(builtCode) 
+fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
 let isClass = function (element) {
     return element.toString().startsWith("class");
 };
@@ -72,19 +96,23 @@ const generatePage = async (
     }
     let headHtml = "";
     if (head) {
-        headHtml = document(head());
+        headHtml = document(head()); 
     }
-    Bun.write(
+  
+    await Bun.write(
         process.cwd() + "/dist/" + route + "/index.html",
-        `<!DOCTYPE html><head>${headHtml}</head>${h}
-              <script type="module"> 
-              import c from '${process.env.filePath}'
-              import {render} from '/src/vader/index.js'
-              render(c, document.body.firstChild)
-              </script>
+        `<!DOCTYPE html>
+        <head>
+               ${headHtml}
+        </head>
+        ${h}
+        <script type="module"> 
+          import c from '${process.env.filePath}'
+          import {render} from '/src/vader/index.js'
+          render(c, document.body.firstChild)
+        </script>
               `
     );
-
     console.log(
         ansiColors.blue(
             `${process.env.filePath.replace(".js", ".jsx")} - ${parseInt(
@@ -94,4 +122,8 @@ const generatePage = async (
     );
     process.exit(0);
 };
-generatePage({ path: process.env.INPUT, route: process.env.OUT });
+ try {
+    process.env.isImport == undefined && generatePage({ path: process.env.INPUT, route: process.env.OUT });
+ } catch (error) {
+    console.log(ansiColors.red(error))
+ }

package/document/index.ts

@@ -13,11 +13,15 @@ export const document = (element: any) => {
          continue;
       }
       if (key === "style") {
-         let style = "";
-         for (let styleKey in attributes[key]) {
-            style += `${styleKey}:${attributes[key][styleKey]};`;
+         // 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="${style}"`;
+         el += ` style="${styleString}"`;
          continue;
       }
       //@ts-ignore