npm - vaderjs - Versions diffs - 1.4.0 → 1.4.1-hyguy47 - Mend

vaderjs 1.4.0 → 1.4.1-hyguy47

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 (13) hide show

package/@integrations/ssg.js ADDED Viewed

@@ -0,0 +1,189 @@
+import fs from 'fs';
+import playwright from 'playwright';
+globalThis.routeDocuments = {}
+let context = process.env.isVader === 'true' ? true : false
+/**
+ *
+ * @param {Object} config
+ * @param {string} config.pages - The directory where the pages are located
+ * @param {string} config.output - The directory where the pages are to be outputted
+ */
+import http from 'http';
+let hasGenerated = []
+let server = http.createServer((req, res) => {
+  if (!req.url.includes(".")) {
+    let params = new URLSearchParams(req.url.split("?")[1]);
+    let folder = params.get("folder");
+    let content = globalThis.routeDocuments[folder]
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(content);
+  } else {
+    if (req.url.includes('./')) {
+      req.url = req.url.replace('./', '/')
+    }
+    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);
+      }
+    });
+  }
+});
+const generateHTML = (routeData) => {
+  let { path, file, isParam, params, query, pathname } = routeData;
+  let baseFolder =  file.split('/').filter(f => f !== 'dist').join('/')
+  if (file.includes('./dist')) {
+    baseFolder = file.split('./dist')[1]
+  }
+  let isCatchAll = false;
+  let html = `
+<!DOCTYPE html>
+  <html>
+   <head>
+<title>Vaderjs v1.3.3</title>
+<meta name="description" content="Vader.js is a modern web framework for building web applications.">
+<link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/main/logo.png" type="image/x-icon">
+   </head>
+   <body>
+   <script id="v">
+   window.$SERVER = true
+   </script>
+   <div id="app"></div>
+   <script id="router" type="module">
+    import Router from '/router.js'
+    const rt = new Router
+    ${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 = path
+            .split("/")
+            .filter((f) => f !== "pages")
+            .join("/");
+         if(pd === '$catchall'){
+            isCatchAll = true;
+            console.log('catchall')
+            return `
+            import c${ranName} from '${param.jsFile}'
+            rt.get($SERVER ? '/' : '/${baseFolder}/*', c${ranName})
+            `
+         }
+          return `
+      import c${ranName} from '${param.jsFile}'
+      rt.get('/${baseFolder}/:${pd}', c${ranName})
+      `;
+        })
+        .join("")
+      : ""
+    }
+    let c = await import('${baseFolder}')
+    if(Object.keys(c).includes('$prerender') && c.$prerender === false){
+      document.head.setAttribute('prerender', 'false')
+    }
+    ${
+      !isCatchAll ? `rt.get($SERVER? '/' : '${pathname}', c)` : ``
+    }
+    rt.listen()
+   </script>
+   </body>
+  </html>`
+  return html;
+}
+/**
+ * @integration Server Side Generator
+ * @description Generate a static webapp from your Vader.js application
+ * @returns
+ */
+const ssg = async (config) => {
+  return new Promise(async (resolve, reject) => {
+    let { pages, output } = config;
+    let routes = JSON.parse(fs.readFileSync(`${process.cwd()}/_dev/meta/routes.json`).toString())
+    for (var i in routes) {
+      let route = routes[i];
+      if(route.path.includes('[')){
+         continue
+      }
+      let html = generateHTML(route);
+      globalThis.routeDocuments[routes[i].path] = html;
+      let browser = await playwright.chromium.launch({
+        headless: true,
+        executablePath: process.platform === 'win32' ? '' : '/usr/bin/chromium-browser'
+      });
+      globalThis.browser = browser;
+      let page = await browser.newPage();
+      await page.goto(`http://localhost:8700?folder=${routes[i].path}`);
+      await page.evaluate(() => {
+        document.querySelector('script#v').innerHTML = `window.$SERVER = false`
+        if(document.head.getAttribute('prerender') === 'false'){
+          document.querySelector("#app").innerHTML = "";
+        }
+      });
+      let content = await page.content();
+      console.log(`Writing ${routes[i].path} to ${output}/${routes[i].path}/index.html`)
+      if (output.includes('./dist')) {
+        output = output.split('./dist')[1]
+      }
+      let path = '/dist/' + output  + routes[i].path + '/index.html';
+      fs.writeFileSync(process.cwd() + path, content)
+      hasGenerated.push(routes[i].path)
+    }
+    if (hasGenerated.length === routes.length) {
+      console.log(`Static site generation complete`)
+      browser.close()
+      server.close()
+      resolve()
+      process.exit()
+    }
+  })
+}
+if(context){
+  server.listen(8700);
+  await ssg({ pages: './pages', output: './dist' })
+}
+export default {
+  name: 'Vaderjs Static Site Generator',
+  version: '1.0.0',
+  useRuntime: 'node',
+  entryPoint: process.cwd() + '/node_modules/vaderjs/@integrations/ssg.js',
+  on: ['build', 'dev:change'],
+}

package/LICENSE ADDED Viewed

@@ -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 CHANGED Viewed

@@ -17,14 +17,10 @@
 > 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 alot will not work due to path resolution use the experimental version :}
-([Install Bun](https://bun.sh/docs/installation))
-2. Install vaderjs
+1. Install vaderjs
  ```bash
-   bun add vaderjs@latest
+    npx vaderjs@latest
  ```
 4.  Create Proper Folders
@@ -50,9 +46,29 @@ public - used for anything
 ```
+Create a vader.config.js file
+```js
+import  {defineConfig} from 'vaderjs/config/index.js'
+import ssg from 'vaderjs/@integrations/ssg.js'
+export  default  defineConfig({
+    host:{
+        provider:'vercel',
+        prod: {
+            port: process.env.PRODUCTION
+        }
+    },
+    dev:{
+        port: 3000
+    },
+    integrations:[ssg]
+})
+```
-5. And your done - Run `bunx vaderjs` and the compiled output is visible inside of the `/dist/` folder!
+5. And your done - Run `npx vaderjs` and the compiled output is visible inside of the `/dist/` folder!
 ## Key Features & Examples
@@ -84,8 +100,8 @@ export default function(req, res){
    let [count, setCount] = useState(0)
    return <>
-    <h1>{count}</h1>
-    <button onClick={(event)=>{setCount(++count)}}>
+    <h1>{count()}</h1>
+    <button onClick={(event)=>{setCount(count() + 1)}
    </>
 }
@@ -95,7 +111,7 @@ export default function(req, res){
 # 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!
+Vader allows you to integrate ssg into your app via config file, it compiles all code to a static index.html page so your visitors will never have to wait for the page to load. Uppon rerender the page rehydrates reapplying functionality!
 you can always opt out of ssg using:
@@ -128,11 +144,9 @@ export function Layout({title, keywords, description, children}){
   )
 }
-// pages/index.jsx
-//$= is a ternary operator used for spread like nesting
-export default function (req, res){
+// pages/index.jsx
+export default function Index(_,req, res){
+  //_ is props which you wont need on base route componnets
   return (
        <Layout {...{title:'home', description:'home page', keywords:'vader.js', logo:''}}>
    <h1> Hello World</h1>
@@ -202,43 +216,6 @@ export default class MyApp extends Component{
 }
 ```
-### 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>
-```

package/binaries/IPC/index.js ADDED Viewed

@@ -0,0 +1,277 @@
+import { WebSocketServer } from "ws";
+import WebSocket from "ws";
+/**
+ * @class IPC
+ * @description Inter-Process Communication - allows you to communicate with vaderjs using Bun.js
+ */
+class IPC {
+  constructor(config = { port: 3434 }) {
+    this.server = {
+      port: config.port,
+      /**
+       * @property {IPC} instance - The instance of the IPC server
+       */
+      instance: null,
+      clients: [],
+      /**
+       *
+       * @private
+       */
+      sendMsg: (msg) => {
+        this.server.clients.forEach((client) => {
+          client.send(JSON.stringify({ IPC_TYPE: this.type, msg }));
+        });
+      },
+    };
+    /**
+     * @enum {Object} typeEnums - The type of process to spawn
+     */
+    this.typeEnums = {
+      /**
+       * @enum {Number} WATCHER - The file watching process
+       */
+      WATCHER: 1,
+      /**
+       * @enum {Number} PAGEGENERATOR - The page generator process
+       */
+      PAGEGENERATOR: 2,
+      /**
+       * @enum {Number} DFT - The default process
+       */
+      DFT: 3,
+    };
+    this.listeners = [];
+    this.type = this.typeEnums.DFT;
+  }
+  /**
+   * @property {Boolean} NOLISTEN - Whether to listen for incoming messages or not
+   */
+  NOLISTEN = false;
+  /**
+   * @Object Console
+   * @description The console object to use for logging - Bun.spawn has 0 way of reading logs from the spawned process so this is a workaround
+   */
+  Console = {
+    log: (msg, IPC_TYPE) => {
+      this.server.clients.forEach((client) => {
+        client.send(JSON.stringify({ IPC_TYPE: PROTOCOL, CONSOLE: true, LOG: true, msg }));
+      });
+    },
+    error: (msg, errorLevel, IPC_TYPE) => {
+      this.server.clients.forEach((client) => {
+        client.send(JSON.stringify({ IPC_TYPE: PROTOCOL, CONSOLE: true, ERROR: true, errorLevel, msg }));
+      });
+    },
+    warn: (msg, IPC_TYPE) => {
+      this.server.clients.forEach((client) => {
+        client.send(JSON.stringify({ IPC_TYPE: PROTOCOL, CONSOLE: true, WARN: true, msg }));
+      });
+    },
+    info: (msg, IPC_TYPE) => {
+      this.server.clients.forEach((client) => {
+        client.send(JSON.stringify({ IPC_TYPE: PROTOCOL, CONSOLE: true, INFO: true, msg }));
+      });
+    },
+    debug: (msg, IPC_TYPE) => {
+      this.server.clients.forEach((client) => {
+        client.send(JSON.stringify({ IPC_TYPE: PROTOCOl, CONSOLE: true, DEBUG: true, msg }));
+      });
+    },
+  };
+  spawnServer(type = this.typeEnums.DFT) {
+    this.isntSpawned = false;
+    if (!this.server.instance) {
+      // if used in achildProcess reconnect to the main running server
+      this.server.instance = new WebSocketServer({ port: this.server.port });
+    } else {
+      // switch type
+      this.server.instance.clients.forEach((client) => {
+        client.send(JSON.stringify({ PROTO_CHANGE: true, IPC_TYPE: type }));
+      });
+    }
+    this.server.instance.on("connection", (ws) => {
+      this.server.clients.push(ws);
+      this.server.instance.clients.forEach((client) => {
+        client.send(JSON.stringify({ ESTABLISHED: true, IPC_TYPE: type }));
+      });
+      ws.on("message", (msg) => {
+        msg = JSON.parse(msg);
+        if (msg.CLIENTINIT) {
+          let port = msg.port;
+          ws.send(JSON.stringify({ ESTABLISHED: true, IPC_TYPE: type }));
+          return;
+        } else if (msg.SERVERINIT) {
+          ws.send(JSON.stringify({ ESTABLISHED: true, IPC_TYPE: type }));
+          return;
+        }
+        this.server.clients.forEach((client) => {
+          client.send(JSON.stringify(msg));
+        });
+      });
+    });
+    this.server.instance.on("close", () => {
+      this.server.clients = [];
+    });
+    // spawn if nolisten is false
+    this.isntSpawned = true;
+  }
+  /**
+   * @method newServer
+   * @description Creates a new IPC server instance
+   * @param {IPC.typeEnums} proto
+   * @param {Object} config
+   * @returns
+   */
+  async newServer(proto = 0, config = { port: 3434 }) {
+    const client = new WebSocket(`ws://localhost:${config.port}`);
+    client.on("open", () => {
+      client.send(JSON.stringify({ SERVERINIT: true, IPC_TYPE: proto }));
+    });
+    client.on("message", (msg) => {
+      if (msg.ESTABLISHED && msg.IPC_TYPE === proto) {
+        config?.onMessage(msg);
+      }
+    });
+    let port = config.port;
+    const sendMsg = (msg) => {
+      if (!client.readyState) {
+        let i = setInterval(() => {
+          if (client.readyState) {
+            client.send(JSON.stringify({ IPC_TYPE: proto, msg, port, isServer: true }));
+            clearInterval(i);
+          }
+        }, 1000);
+        return;
+      }
+      client.send(JSON.stringify({ IPC_TYPE: proto, msg, port, isServer: true }));
+    };
+    sendMsg({ ESTABLISHED: true, IPC_TYPE: proto, port });
+    return {
+      sendMsg: (msg) => {
+        sendMsg(msg);
+      },
+      /**
+       * @method Console
+       * @description The console object to use for logging - Bun.spawn has 0 way of reading logs from the spawned process so this is a workaround
+       */
+      Console: {
+        log: (msg) => {
+          sendMsg({ CONSOLE: true, data: msg });
+        },
+        error: (msg, errorLevel) => {
+          sendMsg({ CONSOLE: true, ERROR: true, errorLevel, msg });
+        },
+        warn: (msg) => {
+          sendMsg({ CONSOLE: true, WARN: true, msg });
+        },
+        info: (msg) => {
+          sendMsg({ CONSOLE: true, INFO: true, msg });
+        },
+      },
+      listen: (callback) => {
+        client.on("message", (msg) => {
+          callback(msg);
+        });
+      },
+      onError: (callback) => {
+        client.on("error", (err) => {
+          callback(err);
+        });
+      },
+    };
+  }
+  listen(callback) {
+    this.server.instance.on("message", (msg) => {
+      callback(msg);
+    });
+  }
+  client(config = { use: this.typeEnums.DFT, port: 0, callback: () => {} }) {
+    if (!this.server.instance) {
+      this.spawnServer();
+    }
+    const ws = new WebSocket(`ws://localhost:${config.port}`);
+    ws.on("open", () => {
+      console.log(config);
+    });
+    ws.send(JSON.stringify({ CLIENTINIT: true, IPC_TYPE: config.use, port: config.port }));
+    function listen(callback) {
+      ws.on("message", (msg) => {
+        callback(msg);
+      });
+    }
+    return {
+      Console: {
+        read: (callback) => {
+          listen((msg) => {
+            msg = JSON.parse(msg.toString());
+            if (msg.isServer && msg.IPC_TYPE === config.use && msg.port === config.port && msg?.msg?.CONSOLE) {
+              callback(msg);
+            }
+          });
+        },
+        write: (msg) => {
+          ws.send(JSON.stringify({ CONSOLE_LOG: true, msg }));
+        },
+      },
+      sendMsg: (msg) => {
+        ws.send(JSON.stringify({ IPC_TYPE: config.use, msg }));
+      },
+      listen: (callback) => {
+        ws.on("message", (msg) => {
+          callback(msg);
+        });
+      },
+      close: () => {
+        ws.close();
+      },
+      onError: (callback) => {
+        ws.on("error", (err) => {
+          callback(err);
+        });
+      },
+    };
+  }
+  sendMsg(batch, callback) {
+    switch (true) {
+      case Array.isArray(batch):
+        console.log(`Using incremental sending`);
+        let timeBetween = 1000;
+        batch.forEach((msg, i) => {
+          setTimeout(() => {
+            this.server.sendMsg(msg);
+          }, i * timeBetween);
+        });
+        break;
+      case typeof batch === "string":
+        this.server.sendMsg(batch);
+        break;
+      default:
+        this.server.sendMsg(batch.toString());
+        break;
+    }
+  }
+}
+/**
+ * @module IPCServer
+ * @description The IPC server instance
+ */
+let IPCServer = new IPC({ port: 3434 });
+export default IPCServer;