vaderjs 1.3.6 → 1.3.7-alpha-1

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/ts.config.json

@@ -1 +0,0 @@
- 

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));export const useRef=t=>{let e=document.querySelector(`[ref="${t}"]`),s=t=>{let s=new DOMParser().parseFromString(t,"text/html"),n=s.body.firstChild;if(e){let i=!n.isEqualNode(e);i&&e.parentNode.replaceChild(n,e)}};return{current:e,update:s}};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,i]=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;this.$_signal_subscribers[t].function(n),this.$_signal_subscribers_ran.push(this.$_signal_subscribers[t]);return}}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=>{i(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 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(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)})})||{}),i=t=>s[t],r=(t,e)=>{let i={...s,[t]:e};n(i)},a=t=>this.$_useStore_subscribers.push(t),o=t=>{let e=s;delete e[t],n(e)};return{getField:i,setField:r,subscribe:a,clear:o}}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){let e=this.dom[t],s=t=>{let s=new DOMParser().parseFromString(t,"text/html"),n=s.body.firstChild;if(e){let i=!n.isEqualNode(e);i&&e.parentNode.replaceChild(n,e)}};return{current:e,update:s}}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 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(){let t=document.createDocumentFragment();Object.keys(components).forEach(async e=>{let{name:s}=components[e],n=document.querySelector(`[data-component="${s}"]`),i=new Date().getTime(),r={name:s,time:i,prev_state:this.states,prev_props:this.storedProps,content:n.innerHTML};if(!n)return;let a=this.useState.bind(this),o=this.useEffect.bind(this),h=this.useReducer.bind(this),l=this.useAuth.bind(this),u=this.useSyncStore.bind(this),c=this.signal.bind(this),d=this.$Function.bind(this),p=this.useRef.bind(this),f=Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","$Function","dom","render","state","useRef","return`"+await this.render()+"`")(a,o,l,h,u,c,d,dom,this.render,this.states,p);new DOMParser().parseFromString(f,"text/html").body.innerHTML!==n.innerHTML&&(this.snapshots.length>0?this.snapshots[this.snapshots.length-1]!==r&&this.snapshots.push(r):this.snapshots.push(r),this.componentUpdate(r.prev_state,r.prev_props,r.content),t.appendChild(document.createRange().createContextualFragment(f)),n.innerHTML="",n.replaceWith(t),this.runEffects())})}validateClassName(t){return/^[a-zA-Z0-9-_]+$/.test(t)}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");return n.setAttribute("type","text/javascript"),n.setAttribute("data-component-script",this.name),worker.postMessage({strings:t,args:e,location:window.location.origin+window.location.pathname.replace(/\/[^\/]*$/,"")+"/public/",name:this.name}),new Promise((t,e)=>{worker.onmessage=e=>{if(e.data.error)throw Error(e.data.error);let s=this.dom,n=e.data.js,i=e.data.template,r=this.useState.bind(this),a=this.useEffect.bind(this),o=this.useReducer.bind(this),h=this.useAuth.bind(this),l=this.useSyncStore.bind(this),u=this.signal.bind(this),c=this.$Function.bind(this),d=this.states,p=this.useRef.bind(this),f=setInterval(()=>{this.componentMounted&&(clearInterval(f),Function("useState","useEffect","useAuth","useReducer","useSyncStore","signal","$Function","dom","render","state","useRef",n)(r,a,h,o,l,u,c,s,this.render,this.states,p))},100);t(handletemplate(Function("useRef","state","signal","useState","useReducer","useAuth","useSyncStore","useRef","$Function","return`"+i+"`")(p,d,u,r,o,h,l,p,c)))},worker.onerror=t=>{e(t)}})}async render(t){}}let 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 Error("Include tag must have src attribute");let i=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=Function(`return \`${r}\`;`)();let a=new DOMParser().parseFromString(r,"text/html");a.querySelectorAll("include").forEach(t=>{t.remove()});e.querySelectorAll(i).forEach(t=>{if(t.attributes.length>0)for(var s=0;s<t.attributes.length;s++){let n="{{"+t.attributes[s].name+"}}";a.body.innerHTML.includes(n)&&(a.body.innerHTML=a.body.innerHTML.replaceAll(n,t.attributes[s].value))}if(t.children.length>0&&a.body.querySelector("slot"))for(var s=0;s<t.children.length;s++)a.body.querySelectorAll("slot").forEach(e=>{let n=e.getAttribute("id");(t.hasAttribute("key")&&t.getAttribute("key")===n||!t.hasAttribute("key")&&t.nodeName===n)&&t.children[s].innerHTML.length>0&&(e.outerHTML=t.children[s].innerHTML)});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,Function(`return \`${a.body.outerHTML}\`;`)())})}}return e.body.outerHTML=e.body.outerHTML.replace(/`/g,"\\`"),t=Function(`return \`${e.body.outerHTML}\`;`)()}export const include=async t=>(!t.startsWith("/")||t.includes("/src/")||document.documentElement.outerHTML.trim().includes("<!-- #vader-disable_relative-paths -->")||(t="/src/"+t),cache[t])?cache[t]:fetch(`./${t}`).then(e=>{if(404===e.status)throw Error(`No file found at ${t}`);return e.text()}).then(async e=>(cache[t]=e,e));export default Vader;