vaderjs 1.3.2 → 1.3.3-5b5a772ebe58

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "liveServer.settings.port": 5501,
-    "js/ts.implicitProjectConfig.checkJs": true,
-    "js/ts.implicitProjectConfig.experimentalDecorators": true
-}

package/.vscode/vaderjs.autosense.json

@@ -1,5 +0,0 @@
-{
-      "className":{
-         "name":"className"
-      }
-}

package/index.js

@@ -1,12 +0,0 @@
-/**
- * @file index.js
- * @description This is the entry point for the library. This file exports all the necessary classes and functions.
- * @version 1.1.5
- *
- */
-import Vader, { include} from './vader.js';
-// @ts-ignore
-import VaderRouter from './vaderRouter.js';
-
-export { include, VaderRouter };
-export default Vader;

package/jsconfig.json

@@ -1,17 +0,0 @@
-{
-    "compilerOptions": {
-      "allowJs": true,
-      "checkJs": true,
-      "target": "es6",
-      "module": "commonjs",
-      "alwaysStrict": true
- 
-    },
-    "exclude": [
-      "node_modules",
-      "dist"
-    ],
-    "include": [
-      "**/*.js"
-    ]
-}

package/readme.md

@@ -1,262 +0,0 @@
-<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 Reactive Framework for SPAs
-
-[![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) 
-
-VaderJS is powerful component based reactive library for spa inspired by react.js
-
-
-## Get Started
-
-1. Install VaderJS:
-
-```sh
-  npm install vaderjs
- ```
-
-or
-
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/vaderjs@latest/index.js" ></script>
-<script type="module" src="https://unpkg.com/vaderjs@latest/index.js">
- ```
-
-2. Import components and utilities into your project.
-
- - Heres an example import map
-
- ```html
-   <script type="importmap">
-        {
-            "imports":{
-                "vaderjs":"./dist/vader/index.js",
-            }
-        }
-    </script>
- ```
-
- - Then you can import like this
-
- ```js
-  import Vader, { VaderRouter, include } from 'vaderjs'
-  ```
-
-3. Use VaderJS features for routing, state management, auth, and more.
-
-4. Create dynamic SPAs with enhanced user experiences.
-
-5. Type checking / testing
-   - Vader has jsdoc annotations built in but also allows ts using the tsconfig
-     
-  ```bash
-   npm run test // validate your code
-  ```
-## Key Features
-
-### Client Fly Rendering
-
-Vaderjs allows you to render your components & manipulate worker side vs main thread. This allows for faster page speeds and better user experience. 
-
-```javascript
-import Vader from "vaderjs";
-class Home extends Vader.Component {
-  constructor() {
-    super();
-    this.cfr = true; // enable client fly rendering -  this is optionals
-  }
-  render() {
-    return this.html(`<div>Hello World</div>`);
-  }
-}
-```
-
-### Declarative Routing
-
-```javascript
-import VaderRouter from "../dist/vader/vaderRouter.js";
-import { Mycomponent} from "../src/pages/Home.js";
- 
-const app = new VaderRouter('/');
-
-app.get("/", async (req, res)=>{
-    res.send('#root', await new Home().render())
-})
-app.get('/docs/:page/*', async (req, res)=>{
-     // page and asterisk route use req.params for params and req.params[0] to get the asterisk
-     // you can get queries from the url using req.query!
-})
-const middleware = (req, res)=>{
-    req.time = Date.now()
-}
-app.use(middleware) // use middlewares
-
-app.listen(3000, ()=>{
-    console.log('listening on port 3000')
-})
- 
-```
- 
-
-### State Management
-
-```javascript
-import Vader from "vaderjs"
-
-class MyApp extends Vader.Component{
-  contructor(){
-   super()
-   
-  }
-  
-  render(){
-    const [state, setState] = this.useState('state', 0, ()=>{
-     // this is a  callback that is ran on state change!
-    })
-    
-    let myfunc = this.$Function(function fn(){
-      setState(state + 1)
-    })
-
-    this.useEffect(()=>{
-      // this is a callback that is ran on component mount
-    }, [])
-    
-    return this.html(`
-     <p>count ${state} </p>
-     <button onclick="${myfunc}">Change State by 1</button>
-    `)
-    
-  }
-}
-```
-
-### Signals
-
-Signals are a way to communicate between components. Signals are similar to events in React.js. Signals are useful for global state management and component communication.
-
-- This is new as of v1.1.2
-
-```javascript
-
-let count = this.signal('count', 0)
-
-let increment = this.$Function(function increment(){
-  count.set(count.get() + 1)
-})
-
-count.subscribe( (detail)=>{
-   console.log(detail)
-}, true) // true means it will run on once
-
-// call the signal
-count.call()
-
-count.cleanup()  // cleans up the signal
-
-count.get() // returns the signal detail
- 
-
-
-```
-- Signals also allow you to share state between scopes
-
-```javascript
-window.addEventListener('signalDispatch', (e)=>{
-  console.log(e.detail)
-})
-````
-
-### Function Binding
-
-```javascript
-
-const fn = this.$Function(function fn() {
-    console.log("Hello World");
-});
- 
-return html(`<button onclick="${fn}">Click Me</button>`)
-```
-
-### Authentication & Authorization
-
-```javascript
-const auth = this.useAuth({
-    rulesets: rules,
-    user: currentUser
-});
-if (auth.can('edit')) {
-    // Display edit button
-}
-```
-
- 
-### Simplified Component Creation
-
-```javascript
-import Vader from 'vaderjs';
-
-export class App extends Vader.Component{
-  constructor(){
-    super('App')
-  }
-  render(){
-    return html`<div>Hello World</div>`
-  }
-}
-```
-
-## Include views
-
-As of v1.1.0 - Vader allows you to include html files as templates 
-
-```html
-// views/app.vjs
-<body>
-  <div>Hello World</div>
-  <h1>{{title}}</h1>
-  <slot id="app" />
-</body>
-```
-```html
-// pages/app.html
-<include src="views/app.vjs"/>
-<body>
-<app tittle="this is a component">
-  <div> this is apps children! </div>
-</app>
-
-```
-
-```js
-// home.js
-import Vader from "vaderjs";
-
-class Home extends Vader.Component {
-  constructor() {
-    super();
-  }
-  render() {
-    return this.html(include("pages/app.html"));
-  }
-}
-
- 
-```
- 
-
-## 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/tsconfig.json

@@ -1,18 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES2016",
-        "module": "commonjs",
-        "allowJs": true,
-        "checkJs": true 
-  
-    },
-    "include": [
-        "**/*.js"
-    ],
-    "exclude": [
-        "node_modules",
-        "dist",
-        "website"
-    ],
-    "compileOnSave": true,
-}

package/vader-min.js

@@ -1 +0,0 @@
-let dom=[],states={},worker=new Worker(new URL("./worker.js",import.meta.url));function markdown(t){let e=t.match(/(#+)(.*)/g);return e&&e.forEach((e=>{if(e.includes("/")||e.includes("<")||e.includes(">"))return;let s=e.split("#").length;t=t.replace(e,`<h${s} class="markdown_heading">${e.replace(/#/g,"")}</h${s}>`)})),t=(t=(t=(t=(t=(t=(t=t.replace(/\*\*(.*?)\*\*/g,((t,e)=>`<b class="markdown_bold">${e}</b>`))).replace(/\*(.*?)\*/g,((t,e)=>`<i class="markdown_italic">${e}</i>`))).replace(/`(.*?)`/g,((t,e)=>`<code>${e}</code>`))).replace(/\[([^\]]+)\]\(([^)]+)\)/g,((t,e,s)=>`<a class="markdown_link" href="${s}">${e}</a>`))).replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((t,e,s)=>`<img class="markdown_image" src="${s}" alt="${e}" />`))).split("\n").map(((t,e,s)=>t.match(/^\s*-\s+(.*?)$/gm)?0!==e&&s[e-1].match(/^\s*-\s+(.*?)$/gm)?e!==s.length-1&&s[e+1].match(/^\s*-\s+(.*?)$/gm)?`<li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:`<li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`:`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${t.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`:t)).join("\n")).split("\n").map(((t,e,s)=>t.match(/^\s*\d+\.\s+(.*?)$/gm)?0!==e&&s[e-1].match(/^\s*\d+\.\s+(.*?)$/gm)?e!==s.length-1&&s[e+1].match(/^\s*\d+\.\s+(.*?)$/gm)?`<li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:`<li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`:`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${t.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`:t)).join("\n")}export const useRef=t=>{const e=document.querySelector(`[ref="${t}"]`);return{current:e,update:t=>{const s=(new DOMParser).parseFromString(t,"text/html").body.firstChild;if(e){!s.isEqualNode(e)&&e.parentNode.replaceChild(s,e)}}}};let components=[];export class Component{constructor(){this.states={},this.name=this.constructor.name,this.executedEffects={},this.storedProps={},this.componentMounted=!1,this.hasMounted=!1,this.$_signal_subscribers=[],this.$_signal_subscribers_ran=[],this.effects={},this.$_useStore_subscribers=[],this.init(),this.Componentcontent=null,this.$_signal_dispatch_event=new CustomEvent("SignalDispatch",{detail:{hasUpdated:!1,state:null}}),this.$_signal_dispatch_cleanup_event=new CustomEvent("Signal_Cleanup_Dispatch",{detail:{state:null,lastState:null}}),this.snapshots=[],this.dom=[],this.cfr=!1}adapter(t){}init(){this.registerComponent()}registerComponent(){components.push(this)}setState(t,e){this.states[t]=e,this.updateComponent()}unmount(){this.componentMounted=!1,this.componentWillUnmount(),document.querySelector(`[data-component="${this.name}"]`).remove(),document.querySelector(`[data-component="${this.name}"]`)||(components=components.filter((t=>t.name!==this.name)))}componentUpdate(t,e,s){}componentDidMount(){}componentWillUnmount(){}signal=(t,e)=>{let s=!1,[n,r]=this.useState(t,e,(()=>{if(this.$_signal_subscribers.length>0){for(var t=0;t<this.$_signal_subscribers.length;t++)if(!s){if(this.$_signal_subscribers[t].runonce&&this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]))break;return this.$_signal_subscribers[t].function(n),void this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t])}}else this.$_signal_dispatch_event.detail.hasUpdated=!0,this.$_signal_dispatch_event.detail.state=n,window.dispatchEvent(this.$_signal_dispatch_event)}));return this.$_signal_subscribe=(t,e)=>(this.$_signal_subscribers.push({function:t,runonce:e}),t),this.$_signal_cleanup=t=>{this.lastState=n,this.$_signal_subscribers=this.$_signal_subscribers.filter((e=>e.function!==t)),this.$_signal_dispatch_cleanup_event.detail.state=this.states,this.$_signal_dispatch_cleanup_event.detail.lastState=this.lastState,window.dispatchEvent(this.$_signal_dispatch_event)},this.$_signal_dispatch=()=>{for(var t=0;t<this.$_signal_subscribers.length&&(!this.$_signal_subscribers[t].runonce||!this.$_signal_subscribers_ran.includes(this.$_signal_subscribers[t]));t++)this.$_signal_subscribers[t].function(n),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t])},this.$_signal_get=()=>n,this.$_signal_call=()=>{s=!0,this.$_signal_dispatch()},this.$_signal_set=t=>{r(t)},{subscribe:this.$_signal_subscribe,cleanup:this.$_signal_cleanup,dispatch:this.$_signal_dispatch,call:this.$_signal_call,set:this.$_signal_set,get:this.$_signal_get}};useAuth(t){let e=t.rulesets;if(!e)throw new Error("No rulesets provided");let s=t.user,n={can:t=>{let n=!1;return e.forEach((e=>{e.action===t&&e.condition(s)&&(n=!0)})),n},hasRole:t=>s.role&&s.role.includes(t),canWithRole:(t,e)=>n.can(t)&&n.hasRole(e),assignRule:t=>{e.some((e=>e.action===t.action))||e.push(t)},revokeRule:t=>{e=e.filter((e=>e.action!==t))},canAnyOf:t=>t.some((t=>n.can(t))),canAllOf:t=>t.every((t=>n.can(t))),canGroup:(t,e="any")=>"any"===e?n.canAnyOf(t):n.canAllOf(t)};return n}useReducer(t,e,s){return this.states[t]||(this.states[t]=s),[this.states[t],s=>{this.states[t]=e(this.states[t],s),this.updateComponent()}]}runEffects(){Object.keys(this.effects).forEach((t=>{this.effects[t].forEach((t=>{this.executedEffects[t]||(t(),this.executedEffects[t]=!0)}))}))}useSyncStore(t,e){let[s,n]=this.useState(t,e||localStorage.getItem(`$_vader_${t}`,(e=>{localStorage.setItem(`$_vader_${t}`,JSON.stringify(e)),this.$_useStore_subscribers.forEach((t=>{t(e)}))}))||{});return{getField:t=>s[t],setField:(t,e)=>{const r={...s,[t]:e};n(r)},subscribe:t=>this.$_useStore_subscribers.push(t),clear:t=>{let e=s;delete e[t],n(e)}}}useState(t,e,s=null){return this.states[t]||(this.states[t]=e),[this.states[t],e=>{this.states[t]=e,this.updateComponent(),"function"==typeof s&&s()}]}useRef(t){const e=this.dom[t];return{current:()=>e,update:t=>{const s=(new DOMParser).parseFromString(t,"text/html").body.firstChild;if(e){!s.isEqualNode(e)&&e.parentNode.replaceChild(s,e)}}}}useEffect(t,e){return this.effects[this.name]||(this.effects[this.name]=[]),this.effects[this.name].push(t),e.length>0?e.forEach((t=>{if(t.set)throw new Error("signal found, do not use effect and signals at the same time - signals are more efficient")})):this.hasMounted||(t(),this.hasMounted=!0),{cleanup:()=>{this.effects[this.name]=this.effects[this.name].filter((e=>e!==t))}}}$Function(t){let e=t.name;return e||(e="anonymous"+Math.floor(1e17*Math.random())),window[e]=t,`window.${e}()`}updateComponent(){const t=document.createDocumentFragment();Object.keys(components).forEach((async e=>{const{name:s}=components[e];let n=document.querySelector(`[data-component="${s}"]`),r={name:s,time:(new Date).getTime(),prev_state:this.states,prev_props:this.storedProps,content:n.innerHTML};if(!n)return;const i=await new Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","rf","props","render","return `"+await this.render()+"`;")(this.useState,this.useEffect,this.useAuth,this.useReducer,this.useSyncStore,this.signal,this.render);if(i!==n.innerHTML){if(this.snapshots.length>0){this.snapshots[this.snapshots.length-1]!==r&&this.snapshots.push(r)}else this.snapshots.push(r);this.componentUpdate(r.prev_state,r.prev_props,r.content),t.appendChild(document.createRange().createContextualFragment(i)),n.innerHTML="",n.appendChild(t),this.runEffects()}}))}validateClassName(t){return/^[a-zA-Z0-9-_]+$/.test(t)}parseHTML(t){const e=(new DOMParser).parseFromString(t,"text/html");return e.documentElement.querySelectorAll("*").forEach((t=>{if("IMG"===t.nodeName){if(!t.hasAttribute("alt")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${t.outerHTML} missing alt attribute`);if(t.hasAttribute("alt")&&t.getAttribute("alt").length<1&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new SyntaxError(`Image: ${t.outerHTML} alt attribute cannot be empty`);if(t.hasAttribute("src")&&!t.getAttribute("src")?.includes("http")||!t.getAttribute("src")?.includes("https")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_accessibility --\x3e")){let e=t.getAttribute("src");t.setAttribute("aria-hidden","true"),t.setAttribute("hidden","true");let s=window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/"+t.getAttribute("src"),n=new Image;n.src=s,n.onerror=()=>{throw t.setAttribute("src",e),new Error(`Image: ${t.outerHTML} not found`)},t.setAttribute("src",s),n.onload=()=>{document.querySelectorAll(`img[src="${s}"]`).forEach((t=>{t.setAttribute("src",s),t.removeAttribute("aria-hidden"),t.removeAttribute("hidden")}))}}}else{if(t.hasAttribute("ref")&&(e[t.getAttribute("ref")]=t),"MARKDOWN"===t.nodeName&&(t.innerHTML=markdown(t.innerHTML.replace(/\\n/g,"\n").trim())),t.hasAttribute("class")){if(!document.documentElement.outerHTML.includes("\x3c!-- #vader-allow_class --\x3e"))throw console.warn("you can disable class errors using, \x3c!-- #vader-allow_class --\x3e"),new Error("class attribute is not allowed, please use className instead")}else t.hasAttribute("className")&&(t.setAttribute("class",t.getAttribute("className")),t.removeAttribute("className"));t.hasAttribute("href")&&t.getAttribute("href").startsWith("/")&&!document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")&&t.setAttribute("href",`#/${t.getAttribute("href").replace("/","")}`),!t.hasAttribute("src")||t.getAttribute("src").includes("http")||t.getAttribute("src").includes("https")||document.documentElement.outerHTML.includes("\x3c!-- #vader-disable_relative-paths --\x3e")||t.setAttribute("src",`./public/${t.getAttribute("src")}`)}})),t=e.body.innerHTML,this.Componentcontent=t,t.includes("<div data-component")||(t=`<div data-component="${this.name}">${t}</div>`),markdown(t.replace(/\\n/g,"\n").trim())}html(t,...e){let s=setInterval((()=>{document.querySelector(`[data-component="${this.name}"]`)&&(clearInterval(s),this.componentMounted=!0,document.querySelector(`[data-component="${this.name}"]`)?.querySelectorAll("*").forEach((t=>{t.hasAttribute("ref")&&(this.dom[t.getAttribute("ref")]=t)})),this.componentDidMount())}),100),n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("data-component-script",this.name);this.dom;if(this.cfr){worker.postMessage({strings:t,args:e,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name});let s=new Promise(((t,e)=>{worker.onmessage=e=>{if(e.data.error)throw new Error(e.data.error);this.dom;let s=e.data.js,n=e.data.template;const r=this.useState.bind(this),i=this.useEffect.bind(this),a=this.useReducer.bind(this),o=this.useAuth.bind(this),c=this.useSyncStore.bind(this),l=this.signal.bind(this),u=this.$Function.bind(this);let h=this.states;const d=this.useRef.bind(this);new Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","rf","dom","render","states","useRef",s)(r,i,o,a,c,l,u,this.dom,this.render,this.states,d),t(new Function("useRef","states","return`"+n+"`")(d,h))},worker.onerror=t=>{e(t)}}));return s}{let s="";for(let n=0;n<t.length;n++)s+=t[n],n<e.length&&(s+=e[n]);return s=new Function("useRef",`return \`${s}\``)(useRef),s.trim().startsWith("<body>")||console.warn("You should wrap your html in a body tag, vader may not grab all html!"),this.parseHTML(s)}}async render(t){}}const Vader={Component:Component,useRef:useRef};export const component=()=>new Component;export const rf=(t,e)=>{window[t]=e};let cache={};async function handletemplate(t){let e=(new DOMParser).parseFromString(t,"text/html"),s=e.documentElement.querySelectorAll("*");if(s.length>0)for(var n=0;n<s.length;n++)if("INCLUDE"===s[n].nodeName){if(!s[n].getAttribute("src")||""===s[n].getAttribute("src"))throw new Error("Include tag must have src attribute");let t=s[n].getAttribute("src")?.split("/").pop()?.split(".")[0],r=await include(s[n].getAttribute("src"));r=r.replace(/`/g,"\\`"),cache[s[n].getAttribute("src")]=r,r=new Function(`return \`${r}\`;`)();let i=(new DOMParser).parseFromString(r,"text/html");i.querySelectorAll("include").forEach((t=>{t.remove()})),e.querySelectorAll(t).forEach((t=>{if(t.attributes.length>0)for(var s=0;s<t.attributes.length;s++)i.body.outerHTML=i.body.outerHTML.replaceAll(`{{${t.attributes[s].name}}}`,t.attributes[s].value);if(t.children.length>0&&i.body.querySelector("slot"))for(s=0;s<t.children.length;s++){i.body.querySelectorAll("slot").forEach((e=>{let s=e.getAttribute("id");console.log(s),(t.hasAttribute("key")&&t.getAttribute("key")===s||!t.hasAttribute("key")&&t.nodeName===s)&&(e.outerHTML=`<div>${t.innerHTML}</div>`)}))}e.body.querySelectorAll("include").forEach((t=>{t.remove()})),e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),e.body.outerHTML=e.body.outerHTML.replace(t.outerHTML,new Function(`return \`${i.body.outerHTML}\`;`)())}))}return e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),t=new Function(`return \`${e.body.outerHTML}\`;`)()}export const include=async t=>(!t.startsWith("/")||t.includes("/src/")||document.documentElement.outerHTML.trim().includes("\x3c!-- #vader-disable_relative-paths --\x3e")||(t="/src/"+t),cache[t]?await handletemplate(new Function(`return \`${cache[t]}\`;`)()):fetch(`./${t}`).then((e=>{if(404===e.status)throw new Error(`No file found at ${t}`);return e.text()})).then((async e=>(cache[t]=e,e=await handletemplate(new Function(`return \`${e}\`;`)())))));export default Vader;

package/vaderRouter.js

@@ -1,231 +0,0 @@
-
-/**
- * @class VaderRouter
- * @description  - creates an instance of Vader Express Router
- *  
- * @param {String} path
- * @param {Function} handler
- * @param {object} req  request object
- * @param {object} res  response object
- * @returns {Object} Express
- *  
- */
-class VaderRouter{
-  /**
-   * @constructor
-   * @param {*} basePath 
-   *  
-   */
-  constructor(basePath) {
-    this.routes = [];
-    this.middlewares = [];
-    this.errorMiddlewares = [];
-    this.listeners = [];
-     
-    this.basePath = basePath;
-  }
-
-  /**
-   * @method get
-   * @param {String} path
-   * @param {Function} handler
-   * @description This method is used to register a get route
-   * @returns {void}
-   * @memberof Express
-   */
-  get(path, handler) {
-   
-    this.routes.push({
-      path,
-      handler,
-      method: 'get',
-    });
-  }
-  /**
-   * @method use
-   * @description This method allows you to use middlewares
-   * @param {Function} middleware 
-   */
-
-  use(/* path, */ middleware) {
-    this.middlewares.push(middleware);
-  }
-
-  /**
-   * @method listen
-   * @param {*} port - unique id for the listener
-   * @param {Function} callback - callback function
-   * @description This method is used to start listening to the routes
-   * @returns {void}
-   * 
-   */
-
-  listen(port, callback) {
-    if(!port){
-     port = Math.random().toString(36).substring(7);
-    }
-    this.listeners.push(port);
-    callback();
-    if (this.listeners.length === 1) {
-      this.handleRoute(window.location.hash);
-    }else{
-      this.listeners.pop();
-    }
-    if (callback) {
-      callback();
-    }
-    window.onhashchange = () => {
-      this.handleRoute(window.location.hash);
-    }
-  }
-  /**
-   * @method extractParams
-   * @description This method is used to extract parameters from the route path
-   * @param {*} routePath
-   * @param {*} hash 
-   * @returns  {Object} params
-   * @memberof Express
-   */
-
-  extractParams(routePath, hash) {
-    const routeParts = routePath.split('/');
-    const hashParts = hash.split('/');
-    const params = {};
-    routeParts.forEach((part, index) => {
-      if (part.startsWith(':')) {
-        const paramName = part.slice(1);
-        params[paramName] = hashParts[index];
-      }else if(part.startsWith('*')){
-        // remove queries from this par
-        params[0] = hashParts.slice(index).join('/').split('?')[0];
-      }
-    });
-    return params;
-  }
-  extractQueryParams(hash){
-    
-    const queryParams = hash.split('?')[1];
-    if(!queryParams){
-      return {};
-    }
-    const params = {};
-    queryParams.split('&').forEach((param)=>{
-      const [key, value] = param.split('=');
-      params[key] = value;
-    })
-    return params;
-  }
-
-  /**
-   * @method handleRoute
-   * @param {String} hash
-   * @description This method is used to handle the route
-   */
-
-  handleRoute(hash) {
-    hash = hash.slice(1);
-    let status = 200;
-    let route = this.routes.find((route) => {
-     
-      if (route.path === hash) {
-        return true;
-      }
-      const routePathParts = route.path.split('/');
-      const hashParts = hash.split('/');
-      if (routePathParts.length !== hashParts.length) {
-        return false;
-      }else if(routePathParts[routePathParts.length-1].startsWith('*')){
-        return true;
-      }
-      const params = this.extractParams( route.path, hash);
-      return Object.keys(params).length > 0;
-    });
-  
-    if (!route) {
-      route = this.routes.find((route) => {
-         
-         if(route.path === '/404'){
-          return  true;
-         }else{
-           window.location.hash = this.basePath  
-         }
-      });
-
-      route ? status = 200 :
-
-      status = 404;
-    }
-
-     
-    const queryParams = this.extractQueryParams(hash);
-    const params =  route && route.path ? this.extractParams(route.path, hash) : {};
-    const req = {
-      headers: {},
-      params: params,
-      query: queryParams,
-      path: hash,
-      method: route ? route.method : 'get',
-    };
-  
-    // @ts-ignore
-    window.$CURRENT_URL = req.path
-   
-    // @ts-ignore
-    window.$FULL_URL = window.location.href.replace('#', '')
-   
-    const res = {
-      status: status,
-      /**
-       * @method log
-       * @param {String} type 
-       * @description This method is used to log the request and response
-       */
-      log: (type) => {
-        if(type === undefined){
-          console.log(`${req.path} ${req.method} ${res.status} ${req.timestamp}`);
-        }else{
-          console.table({
-            'Request Path': req.path,
-            'Request Method': route.method,
-            'Response Status': res.status,
-            'Request Timestamp': req.timestamp,
-          });
-        }
-      },
-      send: (selector, data) => {
-        if(typeof selector === 'string'){
-          // @ts-ignore
-          document.querySelector(selector).innerHTML = data;
-        }else if(typeof selector === 'number'){
-          res.status = selector;
-        }else if(typeof selector === 'object'){
-          res.status = selector.status;
-        }
-      },
-      json: (selector, data) => {
-        
-        if(typeof selector === 'string'){
-          // @ts-ignore
-          let obj = document.createElement('object');
-           // data url
-          obj.data =  URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}));
-          // @ts-ignore
-          document.querySelector(selector).appendChild(obj);
-        }else{
-          throw new Error('Selector must be a string');
-        }
-      },
-    };
-    this.middlewares.forEach((middleware) => {
-      middleware(req, res);
-    });
-  
-    route ? route.handler(req, res) : null;
-     
-  }
-  
-}
-
-export default VaderRouter;
- 
- 

package/worker-min.js

@@ -1 +0,0 @@
-onmessage=e=>{let a=Date.now(),l=e.data.strings,s=e.data.args,t="",r=e.data.location.split("/").slice(0,-1).join("/"),c="";for(let e=0;e<l.length;e++)c+=l[e],e<s.length&&(c+=s[e]);let o=c.match(/--([^>]*)--/gs);if(o)for(;o.length;){let e=o.pop();console.log(e),c=c.replace(e,"")}if(c=c.replace(/(#+)(.*)/g,((e,a,l)=>{if(console.log(e),e.includes("<")&&e.includes(">"))return e;{let e=a.length;return`<h ${e} class="markdown_heading">${l}</h${e}>`}})),c=c.replace(/\*\*(.*?)\*\*/g,((e,a)=>`<b class="markdown_bold">${a}</b>`)),c=c.replace(/\*(.*?)\*/g,((e,a)=>`<i class="markdown_italic">${a}</i>`)),c=c.replace(/`(.*?)`/g,((e,a)=>`<code>${a}</code>`)),c=c.replace(/\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<a  class="markdown_link" href="${l}">${a}</a>`)),c=c.replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<img  class="markdown_image" src="${l}" alt="${a}" />`)),c.split("\n").forEach(((e,a,l)=>{e.match(/^\s*-\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*-\s+(.*?)$/gm)?a!==l.length-1&&l[a+1].match(/^\s*-\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`):c.replace(e,`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`))})),c.split("\n").forEach(((e,a,l)=>{e.match(/^\s*\d+\.\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*\d+\.\s+(.*?)$/gm)?a!==l.length-1&&l[a+1].match(/^\s*\d+\.\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`):c.replace(e,`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`))})),c=c.replace(/^\s*-\s+(.*?)$/gm,((e,a)=>`<li class="markdown_list_item">${a}</li>`)),c=c.replace(/^\s*---\s*$/gm,'<hr class="markdown_horizontal" />'),c=c.replace(/^\s*> (.*)$/gm,((e,a)=>`<blockquote class="markdown_blockquote">${a}</blockquote>`)),c=c.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,((e,a,l)=>{const s=a.split("|").slice(1,-1),t=l.split("|").slice(1,-1);let r='<table class="markdown_table">';return r+='<thead class="markdown_table_head"><tr class="markdown_table_row">',s.forEach((e=>{r+=`<th class="markdown_table_header_cell">${e}</th>`})),r+='</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">',t.forEach((e=>{r+=`<td class="markdown_table_body_cell">${e}</td>`})),r+="</tr></tbody></table>",r})),!c.includes("<body>"))throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${c}`);c=c.replace(/classname/g,"class");let i=c.match(/<img([^>]*)>/g);if(i)for(let a=0;a<i.length;a++){let l=i[a],s=l.match(/src="([^"]*)"/),t=l.match(/alt="([^"]*)"/);if(s)if(s[1].includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!s[1].includes("http")&&s[1].startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${s[1]}`)}else c=c.replace(s[1],`${r}/${s[1]}`);if(!t&&!c.includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new Error(`Vader Error: You must include an alt attribute in the image tag  \n\n${l} of class ${e.data.name}. `);caches.match(`${r}/${s[1]}`)?console.log("already cached",caches.match(`${r}/${s[1]}`)):caches.open("vader").then((e=>{e.add(`${r}/${s[1]}`),console.log("cached",`${r}/${s[1]}`)})).catch((e=>{console.log(e)}))}let n=c.match(/href="([^"]*)"/g);if(n)for(;n.length;){let a=n.pop();if(a=a.replace('href="',"").replace('"',""),a.includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!a.includes("http")&&a.startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${a}`)}else c=c.replace(`href="${a}"`,`href="#${a}"`)}let d=Date.now()-a,h=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!h)&&(h=!0,c+=`\${console.log('%c${e.data.name} component rendered in ${d}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""}`);const p=c.split("<script>");p&&p.forEach(((e,a)=>{if(0===a)c=e;else{if(e.includes("// <![CDATA[  <-- For SVG support"))return;let a=e.split("<\/script>")[0];t+=a}}));let $=c.match(/(\$\(.*?\))/gs);if($)for(;$.length;){let e=$.pop();c=c.replace(e,`\${${e.replace("$(","").replace(")","")}}`)}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:t||""})};