I update all.js and readme.md

README.md

@@ -1,4 +1,3 @@
-
 # XJSX: Expressed JavaScript XHTML
 
 
@@ -66,13 +65,13 @@ XJSX includes a range of powerful keywords that enable you to take your web deve
 - `fetch`, `then`, `catch`, and `end` – access and manipulate data using the Fetch API
 - `for-each` and `end` – loop through elements as in JavaScript's forEach() method
 - `on` and `end` - Bind event listeners to the XJSX document
+- `update` - This is triggered any time a variable value change.
 - `use-template` – easily import and use HTML templates
 - `console-log` - Output messages to the console for debugging and troubleshooting purposes
 - `parse-json` – quickly parse JSON data
 - `print` – render dynamic content to the page
 - `eval` - Evaluate a string of code at runtime and execute it within the current XJSX script
 - `data` - Rerender the XJSX document in response to a specified event
-
 <!--
 Additional keywords coming soon include:
 
@@ -99,6 +98,45 @@ Use the `print` keyword to output dynamic content in your HTML. For example:
   Hello World
 </h1>
 ```
+### **Update:** 
+
+Use the `update` keyword to update the variable value anything variable is changed by any event.
+```xml
+<script>
+  let variable = "Hello World";
+  let button = document.querySelector("button");
+  button.onclick = function (){
+  if(variable == "Hello World"){
+
+  variable = "Changed";
+  }else{
+  variable = "Hello World";
+
+  }
+  }
+</script>
+
+<?update: variable ?>
+
+<button>click me to change variable value</button>
+
+```
+or 
+
+```xml
+<script>
+  let variable = "Hello World";
+  function Function(e) {
+      let input =  e;    
+
+    variable = input.value;
+
+  }
+</script>
+
+<input onkeyup="Function(this)" value="Hello World"/>
+<?update: variable ?>
+```
 
 ### **Parse JSON:** 
 Use the `parse-json` keyword to parse a JSON string into an object that can be accessed in your HTML. For example:

modules/all.js

@@ -795,4 +795,50 @@
       type: METHOD,
     },
   ]);
-})()
+  /** update **/
+    __core__.createModule([
+      {
+        keyword: "update",
+        callback: function(e, node, exec) {
+          try {
+            const oldValue = {
+              myVariable: exec("[" + e + "][0]"),
+            };
+            node.putChild(oldValue.myVariable);
+
+            const handler = {
+              set(obj, prop, value) {
+                if (obj[prop] !== value) {
+
+
+                  node.putChild(value);
+                  obj[prop] = value;
+
+                } else {
+
+                }
+
+                return true;
+              },
+            };
+            const proxiedObject = new Proxy(oldValue, handler);
+
+            function update() {
+
+
+              proxiedObject.myVariable = exec("[" + e + "][0]");
+
+
+              return requestAnimationFrame(update);
+            }
+
+            update()
+          } catch (err) {
+            console.error("update:", e, err + "");
+            e = "";
+          }
+        },
+        type: METHOD,
+      },
+    ]);
+})()

modules/xjsx-router.js

@@ -0,0 +1,90 @@
+(function() {
+  var __core__ = XJSX.__XJSXCORE__();
+  var FUNCTION = 0xC;
+  let routeritem = [];
+    /** print √ **/
+    __core__.createModule([
+      {
+        keyword: "xjsx-router",
+        onload:function(arg,node){
+          let router;
+        [this.global.router = router = arg]
+
+        },
+        onprogress:function(arg,node){
+
+        },
+        callback: function(e, node, exec) {
+
+          try {
+            routeritem.push({routes:this.global.router.split("'").join('').trim(),dom: this.dom()})
+            var oldhash = location.hash === ''? '/': '/'+location.hash;
+            let self = this;
+
+
+          let oldrouter =   routeritem.filter((e)=>{
+
+                if(e.routes === oldhash ){
+                  return e;
+
+              }
+
+              })
+          let errorrouter =   routeritem.filter((e)=>{
+
+                if(e.routes === '' || e.routes === '*'){
+                  return e;
+
+              }
+
+              })
+              if(oldrouter.length === 0 && errorrouter.length === 0){
+                this.putChild('')
+              }else if(oldrouter.length === 0 && errorrouter.length > 0){
+                errorrouter.map((e)=>{
+                  self.putChild(e.dom[0])
+                })
+              }
+              else{
+
+                oldrouter.map((e)=>{
+                  self.putChild(e.dom[0])
+                })
+              }
+
+
+          window.onhashchange = function(s){
+            let newRout = '/'+s.newURL.split('').splice(s.newURL.split('').indexOf('#'),s.newURL.split('').length -1).join('')
+                    let newRouter = routeritem.filter((e)=>{
+                      if(e.routes === newRout){
+
+                        return e;
+                      }else{
+                      }
+                    })
+
+                    if(newRouter.length === 0 && errorrouter.length === 0){
+                      self.putChild('')
+                    }else if(newRouter.length === 0 && errorrouter.length > 0){
+                      errorrouter.map((e)=>{
+                        self.putChild(e.dom[0])
+                      })
+                    }
+                    else{
+
+                      newRouter.map((e)=>{
+                        self.putChild(e.dom[0])
+                      })
+                    }
+
+          }
+
+          } catch (err) {
+            console.error("router:", e, err + "");
+            e = "";
+          }
+        },
+        type: FUNCTION,
+      },
+    ]);
+  })()  

xjsx.js

@@ -582,7 +582,15 @@
             process.__proto__.isDeadProcess = true;
           })) ||
         (opt === "callback" &&
-          ((_this.appendAllTo = function (doc, cloned) {
+          ((_this.dom = function(){
+            let Elem = [];
+            process.nodes.forEach((node)=>{
+              if(node instanceof HTMLElement){
+                Elem.push(node);
+              }
+            })
+            return Elem;
+          }),(_this.appendAllTo = function (doc, cloned) {
             (cloned &&
               !process.nodes.forEach(function (node) {
                 doc.appendChild(node.cloneNode(true));
@@ -1565,4 +1573,4 @@
       eval("(" + arguments.callee + ")"),
     ]
   );
-});
+});