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

vaderjs 1.4.0 → 1.4.1-d560b9aa7f

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

package/@integrations/ssg.js ADDED Viewed

@@ -0,0 +1,178 @@
+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) => {
+  console
+  let { path, file, isParam, params,kind, isCatchAll, query, pathname } = routeData;
+  let baseFolder =  file.split('/').filter(f => f !== 'dist').join('/')
+  if (file.includes('./dist')) {
+    baseFolder = file.split('./dist')[1]
+  }
+  let html = `
+<!DOCTYPE html>
+  <html>
+   <head>
+<title>Vaderjs v1.3.3</title>
+<script id="v">
+   window.$SERVER = true
+   </script>
+</head>
+   <body>
+   <div id="app"></div>
+   <script id="router" type="module">
+    import Router from '/router.js'
+    const rt = new Router
+    ${Object.keys(params).length > 0 ? Object.keys(params).map((param, i) => {
+     let first = pathname.split('/')[1]
+     first = '/' + first
+     let ranName = `_${Math.random().toString(36).substr(2, 9)}`
+    return `
+    import ${ranName} from '${baseFolder}'
+    rt.get($SERVER  ? '/' : '${first}/:${param}', ${ranName})`
+    }): ''}
+    let c = await import('${baseFolder}')
+    if(Object.keys(c).includes('$prerender') && c.$prerender === false){
+      document.head.setAttribute('prerender', 'false')
+    }
+    ${
+      !isCatchAll && !pathname.includes('[')  ? `rt.get($SERVER  ? '/' : '${pathname}', c)` : isCatchAll &&  !pathname.includes('[')  ? `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;
+    if(!fs.existsSync(`${process.cwd()}/_dev/meta/routes.json`)){
+      process.exit()
+    }
+    let routes = JSON.parse(fs.readFileSync(`${process.cwd()}/_dev/meta/routes.json`).toString())
+    for (var i in routes) {
+      let route = routes[i];
+      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}`, { waitUntil: 'load' });
+      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();
+      if (output.includes('./dist')) {
+        output = output.split('./dist')[1]
+      }
+      if(routes[i].path.includes('[')){
+        routes[i].path = routes[i].path.split('[')[0]
+      }else if(routes[i].path.includes(':')){
+        routes[i].path = routes[i].path.split(':')[0]
+      }
+      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'],
+}
+// Path:integrations/ssg.js

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
@@ -37,7 +33,7 @@ Tip: Each folder can be deep nested up to 4 levels!
 /pages/index.jsx = /
 /pages/home/[page].jsx  = /home/:page
 /pages/path/index.jsx = /path/
-/pages/test/[...]/index.jsx = /path/test/*
+/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 `dist` folder
@@ -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
@@ -64,7 +80,7 @@ vader's compiler automatically handles routing so you wont need to! - it uses a
 /pages/index.jsx = /
 /pages/home/[page].jsx  = /home/:page
 /pages/path/index.jsx = /path/
-/pages/path/[...].jsx = /path/*
+/pages/path/[[...catchall]].jsx = /path/*
 ```
 For pages that have [params] you can derive it using this.request
@@ -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>
@@ -149,7 +163,7 @@ Vaderjs has two types of in javascript styling - css modules and inline jsx styl
 ```jsx
 // inline
-<button style={{color:'red'}}>Button</button>
+<button style={{color:'red', "@mobile":{color:'green'}}}>Button</button>
 // css module
@@ -189,12 +203,12 @@ export default class MyApp extends Component{
       console.log(ref.current) // p tag
     }, this)
     return  <>
-     <p ref={ref}>Count is {count}</p>
+     <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)
+      setCount(count() + 1)
      }}>Increment</button>
     </>
@@ -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;