vaderjs 1.3.7-alpha-3 → 1.4.0-169o234

package/README.md

@@ -1,167 +1,253 @@
-<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>
-
-# VaderJS: A Powerful Reactive Framework for SPAs inspired by react.js!
-
-[![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) 
-
- 
-
-## Get Started
-
-1. Install Bun.js 
-
-Need more help? [Bun guide](https://bun.sh/docs/installation)
-
-```sh
- curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
- ```
-
-> Skip if you are not using windows!
-[How to open folder in wsl](https://code.visualstudio.com/docs/remote/wsl)
-
-1. Open a WSL terminal window (using the start menu item or by typing wsl from a command prompt / PowerShell).
-
-2. Navigate to a folder you'd like to open in VS Code (including, but not limited to, Windows filesystem mounts like /mnt/c)
-
-3. Type code . in the terminal. When doing this for the first time, you should see VS Code fetching components needed to run in WSL. This should only take a short while, and is only needed once.
-
-Open folder in vsc - open terminal and type wsl then type `code .` and continue to the next step
-
-2. Installing vaderjs
-
- ```bash
-   npm i vaderjs
- ```
-
-3.  Create Proper Folders
-
-Create a pages folder - which allows you to have nextjs page like routing via buns file based router
-
-```bash
-/pages/index.jsx = /
-/pages/home/[page].jsx  = /home/:page
-/pages/path/index.jsx = /path/file
-```
-Keyword folders - all files are passed from these folders to the `dist` folder
-
-```bash
-
-pages - used for jsx route files
-src  - used for your jsx components / javascript files
-public - used for anything 
-
-```
-
- 
-
-4. And your done - Run `bun run vader --build` and the compiled output is visible inside of the `/dist/` folder!
-
-## Key Features & Examples
- 
-### File based routing
-vader's compiler automatically handles routing so you wont need to!
-below is valid paths for parsing per [Buns fileSystem Routing Api](https://bun.sh/docs/api/file-system-router)
-
-```bash
-/pages/index.jsx = /
-/pages/home/[page].jsx  = /home/:page
-/pages/path/index.jsx = /path/file
-
- 
-```
-You can grab the request object  from `this.request` and response object from `this.response!`
- 
-
-### Simplified Component Creation
-
-```jsx
-// pages/home.jsx
-let {Component, useState} = await import('./vader.js') // always use ./vader.js as files reference vaders main file
-let Mycomponent = await require('./pages/mycomponent')
-class Home extends Vader {
-  constructor() {
-    super();
-    this.key = '2'
-  }
-  render() {
-    return  <>
-      <div key={this.key}>
-        <p>Hello World</p>
-      </div>
-      <Mycomponent ..props />
-    </>
-  }
-}
-
-return {default:Home}
-```
-
- 
-
-### State Management
-
-```jsx
-let {Component, useState} = await import('./vader.js') 
-
-class MyApp extends Component{
-  contructor(){
-   super()
-   this.key = 'static key for state changes'
-  }
-  
-  render(){
-    let [count, setCount] = useState(0)
-    function increment(){
-        setCount(count()+ 1)
-    }
-    return  <>
-     <p>Count is ${count}</p>
-     <button onclick={()=>increment()}>Increment</button>
-    </>
-    
-  }
-}
-
-return {default:MyApp}
-```
-
-
-### Function Binding
-
-Vaderjs allows you to bind functions directly to html elements just like react
-
-```javascript
-// vader uses params[0] as the event target object and other parameters resolve after
-
-function click(event, otherparams){
-    console.log(event.target, otherparams)
-}
- 
-return <>
- <button onclick={()=>click()}>Click Me</button>
-</>
-```
- 
- 
- 
-
- 
-
- 
- 
-
-## License
-
-VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for details.
-
-## Join the Community
-
-Connect with the VaderJS community on [GitHub](https://github.com/Postr-Inc/Vader.js). Contribute, share feedback, and improve VaderJS for SPA development. 
+
+<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>
+
+# VaderJS: A Powerful Reactive Framework for SPAs inspired by react.js!
+
+[![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) 
+
+ 
+> Do not use any alpha versions as these where changed multiple times any version under latest is considered lts and are deemed to be stable
+## Get Started 
+
+1. Installing Bun.js - (Required)
+> Warning - do not use wsl version of bun with vader on windows it will not work due to path resolution use the experimental version :}
+
+([Install Bun](https://bun.sh/docs/installation))
+
+2. Install vaderjs
+
+ ```bash
+   bun add vaderjs@latest or npx vaderjs@latest
+ ```
+
+4.  Create Proper Folders
+
+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!
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/
+/pages/test/[...]/index.jsx = /path/test/*
+/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
+```
+Keyword folders - all files are passed from these folders to the `dist` folder
+
+```bash
+
+pages - used for jsx route files
+src  - used for your jsx components / javascript files
+public - used for anything 
+
+```
+
+ 
+
+5. And your done - Run `npx vaderjs` and the compiled output is visible inside of the `/dist/` folder!
+
+
+## Key Features & Examples
+ 
+### File based routing
+vader's compiler automatically handles routing so you wont need to! - it uses a similar page routing to nextjs
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/
+/pages/path/[...].jsx = /path/*
+ 
+```
+For pages that have [params] you can derive it using this.request
+ 
+
+# Usage
+
+ 
+```jsx
+// pages/home.jsx
+import  {Component, useState, useRef} = from 'vaderjs/client'
+import Mycomponent from './src/mycomponent.jsx' 
+
+ 
+export default function(req, res){
+   let counterRef = useRef(null)
+   let [count, setCount] = useState(0)
+
+   return <>
+    <h1>{count}</h1>
+    <button onClick={(event)=>{setCount(++count)}}>
+   </>
+}
+ 
+
+ 
+```
+
+# ServerSide Site Generation (SSG)
+
+Vader compiles all code to a static index.html page so your visitors will never have to wait for the page to load, it then rehydrates the page reapplying functionality!
+
+you can always opt out of ssg using:  
+
+```js
+export const $prerender = false;
+```
+We can define some metadata to be used at compile
+
+```jsx
+ // src/layout.tsx
+export function Layout({title, keywords, description, children}){
+  return  (
+   <Html lang="en-us">
+        <Head>
+            <title>{title}</title>
+            <meta charset="utf-8" />
+            <meta name="description" content={description} /> 
+            <meta name="robots" content="index, follow" />
+            <meta name="author" content="Malik Whitten" />
+            <meta name="keywords" content={keywords} />
+            <meta name="url" content="https://malikwhitten.com" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <link rel="icon" href={logo} /> 
+            <script src="/src/theme.js" eager> </script>
+            <link rel="stylesheet" href="/public/css/styles.css" />
+        </Head>
+
+         {children}
+    </Html>
+  )
+}
+
+// pages/index.jsx
+
+//$= is a ternary operator used for spread like nesting
+
+export default function (req, res){
+  return (
+       <Layout {...{title:'home', description:'home page', keywords:'vader.js', logo:''}}>
+   <h1> Hello World</h1>
+   </Layout>
+  )
+}
+
+```
+Vader will take the metadata and place it inside of the compiled html file.
+ 
+### Styling
+
+Vaderjs has two types of in javascript styling - css modules and inline jsx styling
+```jsx
+
+// inline
+<button style={{color:'red'}}>Button</button>
+
+// css module
+
+//public/app.module.css
+`
+ .container{
+  color:red;
+  font-size:20px
+ }
+`
+
+// import file
+import style from 'public/app.module.css' // this gets replaced with the compiled css output
+
+<button style={{...style.container}}>Button </button>
+
+```
+### State Management
+Vaderjs uses partial hydration & full reflection
+
+You can pass a reference to the dom target like an id for the element u want to change - or you can just swap the value and the entire component will rerender
+
+```jsx
+import  {Component, useState, useRef. Mounted} = from 'vaderjs/client'
+ 
+export default class MyApp extends Component{
+  contructor(){
+   super()
+   this.key = 'static key for state changes' 
+  }
+  
+  render(){
+    let [count, setCount] = useState(0)
+    let ref = useRef('')
+   
+    Mounted(()=>{
+      console.log(ref.current) // p tag
+    }, this)
+    return  <>
+     <p ref={ref}>Count is {count}</p>
+     {/**
+       pass anything used from the toplevel render to the lowerlevel function params to be able to invoke!
+      **/}
+     <button onclick={()=>{
+      setCount(++count)
+     }}>Increment</button>
+    </>
+    
+  }
+} 
+```
+
+
+### Function Binding
+
+Vaderjs allows you to bind functions directly to html elements just like react
+there are two ways - top level invokes like below
+
+```javascript
+// vader uses params[0] as the event target object and other parameters resolve after
+
+function click(event, otherparams){
+    console.log(event.target, otherparams)
+}
+
+const hello = function(event, otherparams){
+
+}
+ 
+return <>
+ <button onclick={()=>click()}>Click Me</button>
+</>
+```
+ 
+Low level invokes are considered top level and can access - any value above the scope !! 
+
+```jsx
+let car = {
+  model: 'tesla',
+  price: 'toomiuch'
+}
+return <>
+<button onclick={(event)=>{
+ console.log(car.model)
+}}>Log</button>
+```
+
+ 
+
+ 
+ 
+
+## License
+
+VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for details.
+
+## Join the Community
+
+Connect with the VaderJS community on [GitHub](https://github.com/Postr-Inc/Vader.js). Contribute, share feedback, and improve VaderJS for SPA development. 
+ 

package/binaries/generator.js

@@ -0,0 +1,202 @@
+import http from "http";
+import fs from "fs";
+import dotenv from "dotenv";
+dotenv.config();
+import puppeteer from "puppeteer";
+import { WebSocketServer } from "ws";
+const wss = new WebSocketServer({ port: 3436 });
+globalThis.wss = wss;
+process.cwd = () => {
+    return process.env.PWD;
+}
+globalThis.routeDocuments = {};
+function httpServer(){
+  let server = http.createServer((req, res) => {
+    if (!req.url.includes(".")) {
+      let folder = req.url.split("?")[1].split("=")[1];
+
+      let content  = globalThis.routeDocuments[folder]
+      globalThis.wss.clients.forEach((client) => {  
+        client.send(JSON.stringify({ type: "server", content }));
+      });
+       
+     
+      res.writeHead(200, { "Content-Type": "text/html" });
+      
+      res.end(content);
+    } else {
+      const filePath = process.cwd() + "/dist/" + req.url;
+
+      fs.readFile(filePath, (err, data) => {
+        if (err) {
+          res.writeHead(404, {
+            "Content-Type": filePath.includes("js")
+              ? "text/javascript"
+              : "text/html",
+          });
+          res.end("File not found");
+        } else {
+          res.writeHead(200, {
+            "Content-Type": filePath.includes("js")
+              ? "text/javascript"
+              : "text/html",
+          });
+          res.end(data);
+        }
+      });
+    }
+  });
+  
+  globalThis.server = server;
+  server.listen(8700, async () => {
+     
+    
+  });
+}
+httpServer()
+if(!globalThis.browser){
+  const browser = await puppeteer.launch({
+    headless: "new",
+    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    executablePath: process.platform === "win32" ? process.env.CHROME_PATH : '/usr/bin/chromium-browser',
+  });
+  globalThis.browser = browser;
+}
+wss.on("connection", async function connection(ws) {
+  ws.send(JSON.stringify({ type: "connected" }));
+  
+  ws.on("message", async function incoming(message) {
+    
+    let data = JSON.parse(message.toString());
+    if (data.type === "generate") { ;
+      globalThis.wss.clients.forEach((client) => {
+        client.send(JSON.stringify({ message: "Generating" }));
+      });
+      let PWD = data.PWD;
+      process.cwd = () => {
+        return PWD;
+      };
+      let params = JSON.parse(data.params);
+      let output = data.output;
+      let file = data.file;
+      
+      let folder = data.folder;
+      const page = await  browser.newPage();
+      let baseFolder = folder
+        .split("/")
+        .filter((f) => f !== "pages")
+        .join("/");
+      baseFolder = baseFolder.replace("//", "/");
+      globalThis.routeDocuments[folder] = `<!DOCTYPE html>
+       
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Document</title>
+          <script id="server">
+          window.$SERVER = true 
+          </script>
+      </head>
+      <body>
+          <div id="app"></div>
+          <script type="module" id="router" >
+            window.files = window.files || []
+            import Router from '/router.js'
+            import c from '${file}'
+            const rt = new Router
+            let module = await import('${file}') 
+           if(Object.keys(module).includes('$prerender') && !module.$prerender){
+              document.head.setAttribute('prerender', 'false')
+            }
+            rt.get($SERVER ? '/' : '${baseFolder}', c)
+            window.files.push('${file}')
+           
+            ${
+              Array.isArray(params)
+                ? params
+                    .map((param) => {
+                      if (!param.jsFile) return "";
+                      let ranName = Math.random()
+                        .toString(36)
+                        .substring(7)
+                        .replace(".", "");
+                      let pd = Object.keys(param.paramData)[0];
+                      let baseFolder = folder
+                        .split("/")
+                        .filter((f) => f !== "pages")
+                        .join("/");
+
+                      return `
+              import c${ranName} from '${param.jsFile}'
+              rt.get('${baseFolder}/:${pd}', c${ranName})
+              window.files.push('${param.jsFile}')
+              `;
+                    })
+                    .join("")
+                : ""
+            }
+            window.rt = rt
+            rt.listen()
+          </script>
+      </body>
+      </html>
+      
+      `;
+      
+      server.on("error", (err) => {
+        globalThis.wss.clients.forEach((client) => {
+          client.send(JSON.stringify({ type: "error", error: err }));
+        });
+      });
+      
+      page.on("error", (err) => {
+        globalThis.wss.clients.forEach((client) => {
+          client.send(JSON.stringify({ type: "error", error: err }));
+        });
+      });
+      page.on("pageerror", (err) => {
+        globalThis.wss.clients.forEach((client) => {
+          client.send(JSON.stringify({ type: "error", error: err }));
+        });
+      });
+      await page.goto(`http://localhost:8700/?folder=${folder}`, {
+        waitUntil: "networkidle2",
+      });
+      await page.evaluate(() => {
+        let server = document.getElementById("server");
+        server.innerHTML = "window.$SERVER = false";
+        let shouldPrerender = document.head.getAttribute("prerender");
+        if (shouldPrerender === "false") {
+          document.querySelector("#app").innerHTML = "";
+        }
+      });
+      let html = await page.content();
+      if (!fs.existsSync("./dist")) {
+        fs.mkdirSync("./dist");
+      }
+      if (!fs.existsSync("./dist/pages")) {
+        fs.mkdirSync("./dist/pages");
+      }
+
+      if (!fs.existsSync(folder)) {
+        fs.mkdirSync(folder);
+      }
+      globalThis.wss.clients.forEach((client) => {
+        client.send(JSON.stringify({ type: "done", file }));
+      });
+      fs.writeFileSync(output, html);
+      page.close();
+    
+ 
+    }else if(data.type === 'done'){
+   
+      globalThis.browser.close()
+      globalThis.server.close()
+      
+    }
+  });
+});
+
+