vaderjs 1.3.3-alpha-144 → 1.3.3-alpha-146

package/client/index.js

@@ -7,6 +7,47 @@
 export const strictMount = (key, callback) => {
    
 };
+
+/**
+ * @method $metdata
+ * @description  This method allows you to set the metadata for the current page
+ * @param {string} title
+ * @param {string} styles
+ * @param {string} description
+ * @param {string} keywords
+ * @param {string} author
+ * @param {string} image
+ * @param {string} url
+ * @param {string} robot
+ * @param {string} manifest
+ * @param {Array} tags
+ * @returns {Object} - The rendered content.
+ * 
+ */
+
+export const $metdata = {
+  title:'',
+  styles,
+  description:'',
+  keywords:'',
+  author:'',
+  image:'',
+  url:'',
+  robot:'',
+  manifest:'',
+  tags: []
+
+}
+
+/**
+ * @method $prerender
+ * @description  This method disables the prerendering of the current page
+ */
+export const $prerender = {
+
+}
+
+
  
  
  
@@ -417,28 +458,248 @@ export const useRef = (initialState) => {
   };
 };
 
-/**
- * @method Link
- * @param {string} href
- * @param {string} children
- * @returns {string} - The rendered content.
- * @description  This method allows you to create passive links without reloading the page
+ /**
+ * @class Link
+ * @description Link component
+ * @extends Component
+ * @example
+ * <Link href="/some-path" class="custom-link" style="color: blue;">Click me!</Link>
+ */
+export class Link extends Component {
+  /**
+   * @constructor
+   * @param {object} props - Component props
+   * @param {string} props.href - URL for the link 
+   * @param {string} props.className - CSS class for the link
+   * @param {string} props.title - Title for the link
+   * @param {string} props.key - Unique identifier for the link
+   * @param {string} props.style - Inline CSS style for the link
+   * @param {string} props.children - Content to be displayed inside the link
+   */
+  constructor(props) {
+    super(props);
+
+    /**
+     * @type {object}
+     * @property {string} href - URL for the link
+     * @property {string} [class] - CSS class for the link
+     * @property {string} [style] - Inline CSS style for the link
+     * @property {string} [children] - Content to be displayed inside the link
+     */
+    this.props = props;
+
+    /**
+     * @type {HTMLAnchorElement}
+     */
+    this.link = document.createElement('a');
+
+    /**
+     * @type {string}
+     */
+    this.key = props.href + Math.random();
+  }
+
+  /**
+   * @function
+   * @returns {string} - Rendered HTML for the Link component
+   */
+  render() {
+    
+    return this.link.outerHTML;
+  }
+}
+
+
+
+ /**
+ * @class Image
+ * @description Image component
+ * @extends Component
+ * @example
+ * <Image src="https://via.placeholder.com/150"  alt="image" />
  */
-class Link extends Component{
-  constructor(props){
-    super(props)
-    this.props = props
+export class Image extends Component {
+  /**
+   * @constructor
+   * @param {object} props - Component props
+   * @param {string} props.src - Image source URL
+   * @param {string} props.class - CSS class for the image
+   * @param {string} props.style - Inline CSS style for the image
+   * @param {number} props.blur - Blur value for the image (optional)
+   * @param {number} props.width - Width of the image (optional)
+   * @param {number} props.height - Height of the image (optional)
+   * @param {boolean} props.optimize - Optimize the image (optional, default: true)
+   * @param {boolean} props.loader - Show a placeholder loader (optional, default: true)
+   * @param {string} props.alt - Alt text for the image (optional, default: 'image')
+   */
+  constructor(props) {
+    super(props);
+
+    /**
+     * @type {object}
+     * @property {string} src - Image source URL 
+     * @property {string} [class] - CSS class for the image
+     * @property {string} [style] - Inline CSS style for the image
+     * @property {number} [blur] - Blur value for the image (optional)
+     * @property {number} [width] - Width of the image (optional)
+     * @property {number} [height] - Height of the image (optional)
+     * @property {boolean} [optimize] - Optimize the image (optional, default: true)
+     * @property {boolean} [loader] - Show a placeholder loader (optional, default: true)
+     * @property {string} [alt] - Alt text for the image (optional, default: 'image')
+     * @property {string} [children] - Content to be displayed inside the image
+     * @property {string} [key] - Unique identifier for the image
+     * @property {string} [onLoad] - Function to be called when the image is loaded
+     */
+    this.props = {
+      src: props.src,
+      class: props.class,
+      style: props.style,
+      blur: props.blur,
+      width: props.width,
+      height: props.height,
+      optimize: props.optimize || true,
+      loader: props.loader || true,
+      alt: props.alt || 'image',
+    };
+
+    /**
+     * @type {string}
+     */
+    this.key = props.src + Math.random();
+
+    /**
+     * @type {HTMLImageElement}
+     * @private
+     */
+    this.img = document.createElement('img');
+
+    /**
+     * @type {HTMLDivElement}
+     * @private
+     */
+    this.placeholder = document.createElement('div');
+  }
+
+  /**
+   * @function
+   * @returns {string} - Rendered JSX for the Image component
+   */
+  render() {
+    // adjust width and height to the user's screen size
+   
+
+    return this.img.outerHTML;
+  }
+}
+
+export class Head extends Component {
+   /**
+   * @constructor
+   * @param {object} props - Component props
+   * @param {string} props.children - Content to be displayed inside the head
+   */
+  constructor(props) {
+    super(props);
+    this.props = {
+      children: props.children, 
+    }
+    this.key = 'head';
+    this.head = document.createElement('head');
+  }
+
+    
+
+  render() {
+    this.head.innerHTML = this.props.children;
+    return   this.head.outerHTML;
   }
-  render(){
-    return  
+
+  onMount() {
+    document.head.innerHTML = this.head.innerHTML;
+    document.body.querySelector(`[key="${this.key}"]`).remove();
   }
 }
 
+export class Script extends Component {
+    /**
+    * @constructor
+    * @param {object} props - Component props
+    * @param {string} props.children - Content to be displayed inside the script
+    */
+    constructor(props) {
+      super(props);
+      this.props = {
+        children: props.children, 
+      }
+      this.key = 'script';
+      this.script = document.createElement('script');
+    }
+  
+      
+  
+    render() {
+      this.script.innerHTML = this.props.children.split('\n').join(';\n');
+      return   this.script.outerHTML;
+    }
+  
+    onMount() {
+      document.head.appendChild(this.script);
+      document.body.querySelector(`[key="${this.key}"]`).remove();
+    }
+  
+}
+
+/**
+ * @class HTML
+ * @description HTML component 
+ * @extends Component
+ */
+export class Html extends Component {
+  /**
+   * @constructor
+   * @param {object} props - Component props
+   * @param {string} props.children - Content to be displayed inside the HTML
+   * @param {string} props.lang - Language for the HTML
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * @type {object}
+     * @property {string} children - Content to be displayed inside the HTML
+     * @property {string} lang - Language for the HTML
+     * @property {object} attributes - Attributes for the HTML
+     */
+    this.props = {
+      children: props.children,
+      lang: props.lang || 'en',
+      attributes: props.attributes || {},
+    }
+    this.key = 'html';
+    this.html = document.createElement('html');
+  }
+
+  render() {
+    this.html.innerHTML = this.props.children;
+    return this.html.outerHTML;
+  }
+
+  onMount() {
+    if (window.isServer) {
+      document.documentElement.innerHTML = this.html.outerHTML;
+    }
+    console.log('Document Has Been Mounted')
+  }
+
+}
 export default {
   Component,  
   useRef,
   useReducer,
   useState,
   strictMount, 
-  Link
+  Link,
+  Image,
+  Head,
+  Html,
+  
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-144",
+  "version": "1.3.3-alpha-146",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1 +1 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),window.onpopstate=async e=>{let t=window.location.pathname,n=`/${t.split("/")[1]}`;this.checkroute(t)||window.devMode||(t="/");let s=(new DOMParser).parseFromString(await fetch(n,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=s.querySelector("#root").innerHTML,document.title=s.querySelector("title").innerHTML,document.querySelector('script[id="router"]').remove();let r=document.createElement("script");r.id="router",r.innerHTML=s.querySelector('script[id="router"]').innerHTML,r.setAttribute("type","module"),document.body.appendChild(r)},this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.pathname):this.listeners.pop(),t&&t()}extractParams(e,t){const n=e.split("/").filter((e=>""!==e)),s=t.split("/").filter((e=>""!==e)),r={};return n.forEach(((e,t)=>{if(e.startsWith(":")){const n=e.slice(1);r[n]=s[t]}else if(e.startsWith("*")){s.slice(t).forEach(((e,t)=>{r[t]=e}))}})),r}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const n={};return t.split("&").forEach((e=>{const[t,s]=e.split("=");n[t]=s})),n}checkroute(e,t){return e=e.endsWith("/")?e.slice(0,-1):e,this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const n=t.path.split("/").filter((e=>""!==e)),s=e.split("/").filter((e=>""!==e));if(console.log("routeParts",n,"hashParts",s),n.length!==s.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<n.length;e++){const t=n[e],r=s[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==r)return!1}return!0}const n=this.extractParams(t.path,e);return Object.keys(n).length>0}))}handleRoute(e){let t=200,n=e,s=this.checkroute(e);if(!s)return!window.location.href.includes("/404")&&routes.find((e=>"/404"===e.url))?(console.error(`Route ${e} was not found`),window.history.pushState({},"","/404"),window.dispatchEvent(new Event("popstate"))):(window.history.pushState({},"","/"),window.dispatchEvent(new Event("popstate"))),void(t=s?200:404);const r=this.extractQueryParams(n),o=s&&s.path?this.extractParams(s.path,e):{};Object.keys(o).forEach((e=>{o[e]=o[e].split("?")?o[e].split("?")[0]:o[e]}));const i={headers:{},params:o,query:r,path:e,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:s?s.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":s.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.history.pushState({},"",e),window.dispatchEvent(new Event("popstate"))},render:async(e,t,n,s)=>{function isClass(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let s=new Component;if(isClass(e.default)){let t=new e.default;s.state=t.state,s=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');s.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i={key:s.key,render:()=>e.default.apply(s,[t,n]),request:t,response:n,params:o,queryParams:r,reset:s.reset.bind(s),onMount:s.onMount.bind(s),useState:null,router:{use:s.router.use.bind(s)},bindMount:s.bindMount.bind(s),memoize:s.memoize.bind(s),createComponent:s.createComponent.bind(s),isChild:!1,useState:s.useState.bind(s),parseStyle:s.parseStyle.bind(s),bind:s.bind.bind(s),useRef:s.useRef.bind(s),useReducer:s.useReducer.bind(s),onMount:s.onMount.bind(s),onUnmount:s.onUnmount.bind(s),hydrate:s.hydrate.bind(s)};s.render=i.render,s=i}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");s.reset(),s.components={},s.request=t,s.response=n,s.router.use&&!s.isChild?await new Promise((async r=>{if(isClass(e.default))if(isClass(e.default))switch(await s.router.use(t,n),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),r())}),1e3);break;case!1:r()}else r();else switch(await e.default.apply(s,[t,n]),await s.router.use(t,n),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),r())}),1e3);break;case!1:r()}})):s.router.use&&s.isChild&&console.warn("Router.use() is not supported in child components");const i=await s.render();document.querySelector("#root").innerHTML!==i&&(document.querySelector("#root").innerHTML=i),s.bindMount(),s.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((n,s)=>{t+=`${0===s?"?":"&"}${n}=${e[n]}`}));let n=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${n}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const n=document.createElement("pre");n.textContent=JSON.stringify(e,null,2),t.appendChild(n)}};middlewares.forEach((e=>{e(i,a)})),s&&s.handler&&s.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;
+import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),window.onpopstate=async e=>{let t=window.location.pathname,r=`/${t.split("/")[1]}`;console.log("route",t),this.checkroute(t)||window.devMode||(t="/404");let n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((e=>e.text())),"text/html").documentElement;document.querySelector("#root").innerHTML=n.querySelector("#root").innerHTML,document.title=n.querySelector("title")?n.querySelector("title").innerHTML:document.title,document.querySelector('script[id="router"]').remove();let o=document.createElement("script");o.id="router",o.innerHTML=n.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)},this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.pathname):this.listeners.pop(),t&&t()}extractParams(e,t){const r=e.split("/").filter((e=>""!==e)),n=t.split("/").filter((e=>""!==e)),o={};return r.forEach(((e,t)=>{if(e.startsWith(":")){const r=e.slice(1);o[r]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const r={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");r[t]=n})),r}checkroute(e){return this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const r=t.path.split("/").filter((e=>""!==e)),n=e.split("/").filter((e=>""!==e));if(r.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<r.length;e++){const t=r[e],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const r=this.extractParams(t.path,e);return Object.keys(r).length>0}))}handleRoute(e){let t=200,r=e,n=this.checkroute(e);n||(n=window.routes.find((e=>!e.url.includes("/404")||this.error||window.devMode?!(this.error||!e.url.includes("/404"))||void 0:(window.history.pushState({},"","/404"),window.dispatchEvent(new Event("popstate")),this.error=!0,!1))),t=n?200:404);const o=this.extractQueryParams(r),s=n&&n.path?this.extractParams(n.path,r):{};Object.keys(s).forEach((e=>{s[e]=s[e].split("?")?s[e].split("?")[0]:s[e]}));const i={headers:{},params:s,query:o,path:e,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:n?n.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":n.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.history.pushState({},"",e),window.dispatchEvent(new Event("popstate"))},render:async(e,t,r,n)=>{function i(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let n=new Component;if(i(e.default)){let t=new e.default;n.state=t.state,n=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');n.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let i={key:n.key,render:()=>e.default.apply(n,[t,r]),request:t,response:r,params:s,queryParams:o,reset:n.reset.bind(n),onMount:n.onMount.bind(n),useState:null,router:{use:n.router.use.bind(n)},bindMount:n.bindMount.bind(n),memoize:n.memoize.bind(n),createComponent:n.createComponent.bind(n),isChild:!1,useState:n.useState.bind(n),parseStyle:n.parseStyle.bind(n),bind:n.bind.bind(n),useRef:n.useRef.bind(n),useReducer:n.useReducer.bind(n),onMount:n.onMount.bind(n),onUnmount:n.onUnmount.bind(n),hydrate:n.hydrate.bind(n)};n.render=i.render,n=i}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");n.reset(),n.components={},n.request=t,n.response=r,n.router.use&&!n.isChild?await new Promise((async o=>{if(i(e.default))if(i(e.default))switch(await n.router.use(t,r),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),o())}),1e3);break;case!1:o()}else o();else switch(await e.default.apply(n,[t,r]),await n.router.use(t,r),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),o())}),1e3);break;case!1:o()}})):n.router.use&&n.isChild&&console.warn("Router.use() is not supported in child components");const a=await n.render();document.querySelector("#root").innerHTML!==a&&(document.querySelector("#root").innerHTML=a),n.bindMount(),n.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((r,n)=>{t+=`${0===n?"?":"&"}${r}=${e[r]}`}));let r=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${r}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(e,null,2),t.appendChild(r)}};middlewares.forEach((e=>{e(i,a)})),n&&n.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;

package/runtime/vader.js

@@ -1 +1 @@
-window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let n=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(n),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,n){function s(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let r=s(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let o=new Component(t);if(s(e))r.props=t,r.children=n,r.props.children=n.join(""),r.parentNode=this,r.request=this.request,r.response=this.response,r.key=t.key||null,o=r;else{e.toString();o.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let n={key:o.key,render:()=>e.apply(o,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:o.reset.bind(o),onMount:o.onMount.bind(o),useState:null,router:{use:o.router.use.bind(o)},bindMount:o.bindMount.bind(o),memoize:o.memoize.bind(o),createComponent:o.createComponent.bind(o),isChild:!1,useState:o.useState.bind(o),parseStyle:o.parseStyle.bind(o),bind:o.bind.bind(o),useRef:o.useRef.bind(o),request:this.request,response:this.response,useReducer:o.useReducer.bind(o),hydrate:o.hydrate.bind(o),onUnmount:o.onUnmount.bind(o),parentNoe:this};o.render=n.render,o=n}return this.components[t.key]||(this.components[t.key]=o),!this.children.includes(o)&&this.children.push(o),this.components[t.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response,t.onMount=e.onMount.bind(e),t.onUnmount=e.onUnmount.bind(e);let n=t.render();return n&&n.split(">,").length>1&&(n=n.replaceAll(">,",">")),`<span key="${e.key}" >${n}</span>`}parseStyle(e){let t="";return Object.keys(e).forEach((n=>{let s=e[n];n=n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${n}:${s};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let n=[];for(let s=0;s<e.length;s++){let r=e[s],o=t[s];r&&o&&!r.isEqualNode(o)&&n.push({type:"replace",old:r,new:o.cloneNode(!0)})}return n}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const n=this.domDifference(e,t);this.updateChangedElements(n)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,n,s,...r){n=n+this.key||2022;let o={},i=(s=s.replace(/,,/g,",")).replaceAll(",,",",");for(var u in r){let e=r[u];o[i.split(",")[u]]=e}s=s.replace(",,",",");let a=null;e=e.split("\n").join(";");try{a=new Function(`event, ${s}`,` \n        return (async (event, ${s}) => {    \n            ${e.toString()}\n        })(event, ${Object.keys(o).join(",")}) \n      `)}catch(e){let{message:t}=e;console.error(`Error in function ${n} ${t}`)}return a=a.bind(this),this.functions.find((e=>e.ref===n))||document.addEventListener(`$dispatch_#id=${n}`,(e=>{let{name:t,event:s}=e.detail;if(t===n){let e=this.functions.find((e=>e.ref===n)).params;Object.keys(e).forEach((t=>{e[t]instanceof CustomEvent&&delete e[t],void 0===e[t]?delete e[t]:e[t]})),a(s,...Object.values(e))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===n))&&this.functions.push({ref:n,params:o}),t?e:`((event)=>{event.target.ev = event; callFunction('${n}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let n=()=>this.state[e],s=n();return[s,(t,r)=>{this.state[e]=t,this.hydrate(r),s=n()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,n=null){this.state[e]||(this.state[e]=t);const s=()=>this.state[e];let r=s();return[s(),(t,o)=>{const i=n(r,t)??t;this.state[e]=i,this.hydrate(o),r=s()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,n)=>{states[e]=t,this.hydrate(n)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a")}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount,Link:Link};
+window.Vader={version:"1.3.3"},window.componentRegistry={};let errors={"SyntaxError: Unexpected token '<'":"You forgot to enclose tags in a fragment <></>"},mounts=[],hasRan=[];export const strictMount=(e,t)=>{let s=setInterval((()=>{document.querySelector(`[key="${e}"]`)&&!hasRan.includes(e)&&(clearInterval(s),t(),hasRan.push(e))}),120)};export class Component{constructor(){this.state={},this.key=null,this.components={},this.mounted=!1,this.checkIFMounted(),this.memoizes=[],this.functions=[],this.children=[],this.parentNode={},this.request={headers:{},method:"GET",params:{},path:"",query:{}},this.response={json:e=>{},send:e=>{},redirect:e=>{},render:async e=>{},log:e=>{},setQuery:e=>{}},this.router={use:e=>{}}}createComponent(e,t,s){function r(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}let n=r(e)?new e(t):null;if(!e)throw new Error("Component must be defined");let i=new Component(t);if(r(e))n.props=t||{},n.props.children=s.join("")||[],n.props.children=s.join(""),n.parentNode=this,n.request=this.request,n.response=this.response,n.key=n.props.key?n.props.key:Math.random(),i=n;else{e.toString();i.key=e.toString().split('key="')[1]?e.toString().split('key="')[1].split('"')[0]:null;let s={key:i.key?i.key:Math.random(),isUnique:!!i.key,render:()=>e.apply(i,[t]),request:this.request,isChild:!0,response:this.response,params:this.request.params,queryParams:this.request.query,reset:i.reset.bind(i),onMount:i.onMount.bind(i),useState:null,router:{use:i.router.use.bind(i)},bindMount:i.bindMount.bind(i),memoize:i.memoize.bind(i),createComponent:i.createComponent.bind(i),isChild:!1,useState:i.useState.bind(i),parseStyle:i.parseStyle.bind(i),bind:i.bind.bind(i),useRef:i.useRef.bind(i),request:this.request,response:this.response,useReducer:i.useReducer.bind(i),hydrate:i.hydrate.bind(i),onUnmount:i.onUnmount.bind(i),parentNoe:this};i.render=s.render,i=s}return this.components[i.key]||(this.components[i.key]=i),!this.children.includes(i)&&this.children.push(i),this.components[i.key]}reset(){Object.keys(this.components).forEach((e=>{this.components[e].onUnmount(),delete this.components[e]})),this.state={},this.children=[]}memoize(e){if(!0==!this.memoizes.includes(e.key))this.memoizes.push(e.key),this.components[e.key]=e;let t=this.components[e.key];t.bindMount(),t.parentNode=this,t.props=e.props,t.request=this.request,t.response=this.response,t.onMount=e.onMount.bind(e),t.onUnmount=e.onUnmount.bind(e);let s=t.render();return s&&s.split(">,").length>1&&(s=s.replaceAll(">,",">")),`<span key="${e.key}" >${s}</span>`}parseStyle(e){let t="";return Object.keys(e).forEach((s=>{let r=e[s];s=s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${s}:${r};`})),t}bindMount(){mounts.push(this)}domDifference(e,t){let s=[];for(let r=0;r<e.length;r++){let n=e[r],i=t[r];n&&i&&!n.isEqualNode(i)&&s.push({type:"replace",old:n,new:i.cloneNode(!0)})}return s}updateChangedElements(e){e.forEach((e=>{switch(e.type){case"replace":e.old.parentNode.replaceChild(e.new,e.old);break;case"remove":e.old.remove();break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}hydrate(e){if(e){(new DOMParser).parseFromString(this.render(),"text/html").body.querySelector(`[ref="${e}"]`),document.querySelector(`[ref="${e}"]`)}else{let e=this.key?document.querySelector(`[key="${this.key}"]`):null,t=(new DOMParser).parseFromString(this.render(),"text/html").body;if(t=document.createElement("div").appendChild(t),!e&&(e=document.querySelector(`[key="${t.attributes?.key?.value||null}"]`)),!e)return void console.error('Hydration failed, component not found got ensure you have set key="a value" on the component or this.key inside of function or render method body');t.querySelectorAll("*").forEach((e=>{e.hasAttribute("key")&&e.innerHTML!==document.querySelector(`[key="${e.attributes.key.value}"]`).innerHTML&&document.querySelector(`[key="${e.attributes.key.value}"]`).replaceWith(e)}))}}patch(e,t){const s=this.domDifference(e,t);this.updateChangedElements(s)}handleObject(obj){try{obj=JSON.parse(obj)}catch(e){}return eval(obj)}bind(e,t,s,r,...n){s=s+this.key||2022;let i={},o=(r=r.replace(/,,/g,",")).replaceAll(",,",",");for(var h in n){let e=n[h];i[o.split(",")[h]]=e}r=r.replace(",,",",");let u=null;e=e.split("\n").join(";");try{u=new Function(`event, ${r}`,` \n        return (async (event, ${r}) => {    \n            ${e.toString()}\n        })(event, ${Object.keys(i).join(",")}) \n      `)}catch(e){let{message:t}=e;console.error(`Error in function ${s} ${t}`)}return u=u.bind(this),this.functions.find((e=>e.ref===s))||document.addEventListener(`$dispatch_#id=${s}`,(e=>{let{name:t,event:r}=e.detail;if(t===s){let e=this.functions.find((e=>e.ref===s)).params;Object.keys(e).forEach((t=>{e[t]instanceof CustomEvent&&delete e[t],void 0===e[t]?delete e[t]:e[t]})),u(r,...Object.values(e))}})),window.callFunction=(e,t)=>{document.dispatchEvent(new CustomEvent(`$dispatch_#id=${e}`,{detail:{name:e,params:null,event:t}}))},!this.functions.find((e=>e.ref===s))&&this.functions.push({ref:s,params:i}),t?e:`((event)=>{event.target.ev = event; callFunction('${s}', event.target.ev)})(event)`}useState(e,t){this.state[e]||(this.state[e]=t);let s=()=>this.state[e],r=s();return[r,(t,n)=>{this.state[e]=t,this.hydrate(n),r=s()}]}useRef(e=null,t){this.state[e]||(this.state[e]=t);return{bind:e+this.key,current:(()=>document.querySelector(`[ref="${e+this.key}"]`)||t)()}}useReducer(e=null,t,s=null){this.state[e]||(this.state[e]=t);const r=()=>this.state[e];let n=r();return[r(),(t,i)=>{const o=s(n,t)??t;this.state[e]=o,this.hydrate(i),n=r()}]}render(){}checkIFMounted(){new MutationObserver((e=>{e.forEach((e=>{e.target.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.onMount(),this.mounted=!0),Array.from(e.removedNodes).find((e=>e.attributes&&e.attributes.key&&e.attributes.key.value===this.key))&&(this.onUnmount(),this.reset())}))})).observe(document.body,{childList:!0,subtree:!0})}onMount(){}onUnmount(){}}export const useState=(e,t)=>{states[e]||(states[e]=t);return[states[e],(t,s)=>{states[e]=t,this.hydrate(s)}]};export const useReducer=(e,t)=>[e,e=>{}];export const useRef=e=>({current:e,bind:""});export class Link extends Component{constructor(e){super(e),this.props=e,this.link=document.createElement("a"),this.key=e.href+Math.random()}render(){return this.link.innerHTML=this.props.children,this.link.setAttribute("id",this.props?.href),this.link.style=this.props?.style,this.link.setAttribute("class",this.props?.class),this.link.setAttribute("onclick",`window.history.pushState({}, '', '${this.props?.href}'); window.dispatchEvent(new Event('popstate'));`),this.link.outerHTML}}export class Image extends Component{constructor(e){super(e),this.props={src:e.src,class:e.class,style:e.style,blur:e.blur,width:e.width,height:e.height,optimize:e.optimize||!0,loader:e.loader||!0,alt:e.alt||"image",ref:e.ref||null},this.key=e.src+Math.random(),this.img=document.createElement("img"),this.placeholder=document.createElement("div")}render(){if(window.isServer)return"";let[e,t]=this.useState("loaded",!1),s=this.useRef("hookref",null),r=this.props.width?this.props.width:window.innerWidth/2,n=this.props.height?this.props.height:window.innerHeight/2;if(!this.props.src)throw new Error("Image src is required");return this.img.setAttribute("src",this.props.src),this.img.setAttribute("class",this.props.class),this.img.setAttribute("style",this.props.style?this.props.style:""),this.img.setAttribute("width",r),this.img.setAttribute("ref",s.bind),this.img.referrerPolicy="no-referrer",this.img.setAttribute("height",n),this.img.setAttribute("loading","lazy"),this.img.setAttribute("alt",this.props.alt),this.props.blur&&this.img.setAttribute("style",`filter: blur(${this.props.blur}px);`),this.props.optimize&&this.img.setAttribute("style",`image-rendering: -webkit-optimize-contrast; object-fit: cover; object-position: center; ${this.props.style?this.props.style:""}`),!this.props.loader||e||window.isServer||(this.placeholder.setAttribute("style",`width: ${r}px; height: ${n}px; background: #eee;`),this.placeholder.setAttribute("class","vader-image-placeholder"),this.placeholder.innerHTML=this.props.loader,window.isServer)?void 0:(this.img.onload=()=>{t(!0,s.bind)},`<span ref="${s.bind}">${e?this.img.outerHTML:this.placeholder.outerHTML}</span>`)}}export class Html extends Component{constructor(e){super(e),this.props={children:e.children,lang:e.lang||"en",attributes:e.attributes||{}},this.key="html",this.html=document.createElement("div")}render(){return window.isServer?(this.html.innerHTML=this.props.children,this.html.setAttribute("lang",this.props.lang?this.props.lang:"en"),this.props.attributes&&Object.keys(this.props.attributes).forEach((e=>{this.html.setAttribute(e,this.props.attributes[e])})),this.html.innerHTML):this.props.children}onMount(){console.log("Document Has Been Mounted")}}export class Head extends Component{constructor(e){super(e),this.props=e,this.key="head",this.head=document.createElement("head")}render(){return""}onMount(){if(!this.state.hasMounted&&window.isServer){document.head.innerHTML=this.props.children+document.head.innerHTML,document.querySelectorAll("script[eager]").forEach((async e=>{if(!e.getAttribute("src"))throw new Error("Eager scripts must be external");e.remove();let t=e.getAttribute("src"),s=document.createElement("script"),r=await fetch(t).then((e=>e.text()));s.innerHTML=r,s.setAttribute("srcid",t),document.querySelector(`[srcid="${t}"]`)||document.head.prepend(s)})),this.state.hasMounted=!0}}}export class Script extends Component{constructor(e){super(e),this.props={children:e.children},this.key="script",this.script=document.createElement("script")}render(){return this.script.innerHTML=this.props.children.split("\n").join(";\n"),this.script.outerHTML}onMount(){document.head.appendChild(this.script),document.body.querySelector(`[key="${this.key}"]`).remove()}}export default{Component:Component,useRef:useRef,useReducer:useReducer,useState:useState,strictMount:strictMount,Link:Link,Image:Image,Head:Head,Script:Script,Html:Html};

package/vader.js

@@ -7,7 +7,7 @@ import { WebSocketServer } from 'ws'
 import { watch } from "fs"; 
 import path from 'path'
 let config =  await import('file://' + process.cwd() + '/vader.config.js').then((e) => e.default || e)
-console.log(config)
+ 
 
 let start = Date.now()
 let bundleSize = 0;
@@ -99,7 +99,7 @@ function Compiler(func, file) {
       /\s*([a-zA-Z0-9_-]+)(\s*=\s*("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)'|\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*\}|(?:\([^)]*\)|\{[^}]*\}|()=>\s*(?:\{[^}]*\})?)|\[[^\]]*\]))?/gs;
 
     // only return elements with attribute {()=>{}} or if it also has parameters ex: onclick={(event)=>{console.log(event)}} also get muti line functions
-    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*=\s*{(.*?)}|\s*=\s*function\s*(.*?))(?=\s*[a-zA-Z0-9_-]+\s*=|\s*>)/gs;
+    const functionAttributeRegex = /\s*([a-zA-Z0-9_-]+)(\s*=\s*{((?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\})*)*\})*)*)})/gs;
 
     let attributesList = [];
 
@@ -143,7 +143,7 @@ function Compiler(func, file) {
               .split(" ")[0];
             isJSXComponent = elementTag.match(/^[A-Z]/) ? true : false;
           }
-        });
+        }); 
         // add ; after newlines  
 
 
@@ -194,15 +194,15 @@ function Compiler(func, file) {
         // remove comments
         paramnames = paramnames ? paramnames.map((e) => e.match(/\/\*.*\*\//gs) ? e.replace(e.match(/\/\*.*\*\//gs)[0], "") : e) : null
         newvalue = newvalue.replaceAll(/\s+/g, " ")
-
-        let bind = isJSXComponent ? `${attributeName}=function(${params}){${newvalue}}.bind(this)` : `${attributeName}="\$\{this.bind("${newvalue.replace(/\s+g/, " ")}", ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
+ 
+        let bind = isJSXComponent ? `${attributeName}='function(${params}){${newvalue}}'` : `${attributeName}="\$\{this.bind("${newvalue.replace(/\s+g/, " ")}", ${isJSXComponent}, "${ref}",   "${paramnames ? paramnames.map((e, index) => {
           if (e.length < 1) return ''
           if (e.length > 0) {
             index == 0 ? e : ',' + e
           }
           return e
         }) : ''}" ${params ? params.split(',').map((e) => e.trim()).filter(Boolean).map((e) => `,${e}`).join('') : ''})}"`
-
+ 
         string = string.replace(old, bind);
       }
     }
@@ -403,40 +403,80 @@ function Compiler(func, file) {
   string = string.replaceAll('../src', './src')
 
   function parseComponents(body, isChild) {
-    let componentRegex =
-      /<([A-Z][a-zA-Z0-9_-]+)([^>]*)\/>|<([A-Z][a-zA-Z0-9_-]+)([^>]*)>(.*?)<\/\3>/gs;
+    let componentRegex = /<([A-Z][A-Za-z0-9_-]+)([^>]*)>(.*?)<\/\1>|<([A-Z][A-Za-z0-9_-]+)([^]*?)\/>/gs;
 
     let componentMatch = body.match(componentRegex);
     let topComponent = "";
     componentMatch?.forEach(async (component) => {
+    
       let [, element, attributes] = component;
+      
 
       !isChild ? (topComponent = component) : null;
-      let before = component;
-      component = component.trim().replace(/\s+/g, " ");
+      let before = component; 
 
       let myChildrens = [];
 
       let name = component.split("<")[1].split(">")[0].split(" ")[0].replace("/", "");
-      let props = component.split(`<${name}`)[1].split(">")[0].trim()
-
+      // some components will have props that have html inside of them we need to only get the props ex: <Header title={<h1>hello</h1>}></Header> -> title={<h1>hello</h1>} also functions
+      let dynamicAttributesRegex = /(\w+)(?:="([^"]*)")?(?:='([^']*)')?(?:=\{([^}]*)\})?(?:=\{(.*?)\})?(?:={([^}]*)})?/gs;
+
+
+      let props = component.match(dynamicAttributesRegex)
+     
+  let filteredProps = [];
+  let isWithinComponent = false;
+  let componentName = name
+  
+  for (let prop of props) {
+    if (prop.includes(componentName)) {
+      // If the component is encountered, start collecting props
+      isWithinComponent = true;
+      filteredProps.push(prop);
+    } else if (isWithinComponent && prop.includes('=')) {
+      if(prop.includes('${')){
+        prop = prop.replace('${', '`')
+        prop = prop.replace('}', '`')
+        console.log(prop)
+      }
+      if(prop.startsWith('={')){
+        prop = prop.replace('={', ':`')
+        prop.replace('} ', '`')
+      }
+       if(prop.includes('function')){
+        // parse 'function' to function 
+        prop = prop.replace("'", '')
+        
+        if(prop.endsWith("}'")){
+          prop = prop.replace("}'", '}')
+          
+        }
+        
+        prop = prop.replace('=function', ':function') 
+       }
+
+      filteredProps.push(prop);
+  
+       
+    }else{
+      isWithinComponent = false;
+    }
+  }
 
+      // get inner content of <Component>inner content</Component>
+      let children = new RegExp(`<${name}[^>]*>(.*?)<\/${name}>`, "gs").exec(component) ? new RegExp(`<${name}[^>]*>(.*?)<\/${name}>`, "gs").exec(component)[1] : null;
+       
+      props = filteredProps.join(',')
       let savedname = name;
-      let children = props
-        ? component
-          .split(`<${name}`)[1]
-          .split(`${props}`)[1]
-          .split(`</${name}>`)[0]
-          .trim()
-          .replace(">", "")
-        : component.split(`<${name}`)[1].split(`</${name}>`)[0].trim().replace(">", "");
+      
+      
+
       name = name + Math.random().toString(36).substring(2);
       if (children && children.match(componentRegex)) {
         children = parseComponents(children, true);
         childs.push({ parent: name, children: children });
       } else {
-
-        children = `\`${children}\`,`;
+   
         children ? childs.push({ parent: name, children: children }) : null;
       }
 
@@ -458,49 +498,24 @@ function Compiler(func, file) {
 
 
 
-      /**
-       * @prop {string} props
-       * @description replace any given possible value in props and parse the string to a valid JSON object
-       */
-      props = props
-        .replaceAll('"', "'")
-
-
-        .replaceAll(",,", ',')
-        .replaceAll("className", "class")
-        .replaceAll("classname", "class")
-        .replaceAll("'${", "")
-        .replaceAll("}'", "")
-        .split("$:")
-        .join("")
-        // replace / with '' at the end of the string
-        .replace(/\/\s*$/, "")
-
-        .replace(/,\s*$/, "")
+ 
+       props  = props.replaceAll(`,${savedname}`, '').replaceAll(savedname, '')
+       if(props.startsWith(',')){
+          props = props.replace(',', '')
+       }
+       props = props .replaceAll("='", ":'")
+       .replaceAll('=`', ':`')
         .replaceAll('="', ':"')
-        .replaceAll("='", ":'")
-        .replaceAll('=`', ':`')
-        .replaceAll(`={\``, ':`')
-        .replaceAll('`}', '`')
-        .replaceAll(",,", ',')
-        .replaceAll(/=(?=(?:(?:[^"']*["'][^"']*['"])*[^"']*$))/g, ':');
-
-      props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');
-      // ANY VALUE NUMBER BOOLEAN OR STRING
-      props = props.replace(/=(\d+)/g, ':$1,');
-      props = props.replaceAll(',,', ',')
-
+       .replaceAll(`={\``, ':`')
+       .replaceAll('`}', '`')
+       .replaceAll('={', ":`") 
 
       /**
        * @memoize - memoize a component to be remembered on each render and replace the old jsx
        */
 
-      let replace = "";
-      replace = isChild
-        ? `this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, ${props}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
-        }])),`
-        : `\${this.memoize(this.createComponent(${savedname.replaceAll('/', '')}, {${props}}, [${myChildrens.length > 0 ? myChildrens.join(",") : ""
-        }]))}`;
+      let replace = ""; 
+      replace = `\${this.memoize(this.createComponent(${savedname}, {${props}}, [\`${myChildrens.join(" ")}\`]))}`;
 
       body = body.replace(before, replace);
     });
@@ -750,6 +765,9 @@ async function Build() {
           <script>
           window.routes = JSON.parse('${JSON.stringify(routes)}')
           </script>
+          <script id="isServer">
+          window.isServer = true
+          </script>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width,initial-scale=1.0">
           <script type="module" id="meta">
@@ -803,30 +821,34 @@ async function Build() {
            document.head.innerHTML += '<link rel="icon" href="' + metadata.icon + '">'
          }
          </script>
+         <script type="module" id="router">
+         import VaderRouter from '/router.js' 
+         const router = new VaderRouter('${route.url}', 3000)
+         router.get('${route.url}', async (req, res) => {
+           let module = await import('/${route.fileName.replace('.jsx', '.js')}')
+           if(Object.keys(module).includes('$prerender') && !module.$prerender){
+             document.head.setAttribute('prerender', 'false')
+           }
+           res.render(module, req, res, module.$metadata)
+         }) 
+         ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
+ 
+ 
+ 
+         return `router.get('${e.url}', async (req, res) => {
+            let module = await import('/${e.fileName.replace('.jsx', '.js')}')
+            res.render(module, req, res, module.$metadata)
+         })\n`
+       }) : ''}
+         router.listen(3000)
+          
+     </script> 
       </head>
       <body>
           <div id="root"></div>
       </body>  
       
-      <script type="module" id="router">
-        import VaderRouter from '/router.js' 
-        const router = new VaderRouter('${route.url}', 3000)
-        router.get('${route.url}', async (req, res) => {
-          let module = await import('/${route.fileName.replace('.jsx', '.js')}')
-          res.render(module, req, res, module.$metadata)
-        }) 
-        ${equalparamroute.length > 0 ? equalparamroute.map((e) => {
-
-
-
-        return `router.get('${e.url}', async (req, res) => {
-           let module = await import('/${e.fileName.replace('.jsx', '.js')}')
-           res.render(module, req, res, module.$metadata)
-        })\n`
-      }) : ''}
-        router.listen(3000)
-         
-    </script> 
+      
       </html>
     `;
 
@@ -870,6 +892,10 @@ async function Build() {
         await page.waitForSelector('#root');
         await page.evaluate(() => {
           document.getElementById('meta').remove()
+          document.querySelector('#isServer').innerHTML = 'window.isServer = false'
+          if(document.head.getAttribute('prerender') === 'false'){
+            document.querySelector('#root').innerHTML = ''
+          }
         })
         const html = await page.content();
         await page.close();