From 412d3791a4a0e07d5e896c5570b9376f646caf4f Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:06:05 +0800
Subject: [PATCH 01/29] refactor: relocate state related logic to state.js

---
 lib/main.js  | 77 ++++++++--------------------------------------------
 lib/state.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 65 deletions(-)
 create mode 100644 lib/state.js

diff --git a/lib/main.js b/lib/main.js
index 508f769..9377453 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -1,39 +1,15 @@
 import Entity from './entity'
-import MiniArray from './helpers/array'
 import { Lexer } from './generators/lexer'
 import { observeDOM } from './generators/observer'
+import { State } from './state'
 import { Events } from './entity/events'
 
 let nativeProps = Object.getOwnPropertyNames(window)
 
 const MiniJS = (() => {
-  window.proxyWindow = null
-
   let _debug = false
   let _elements = []
-  let _variables = []
-
-  const watchHandler = {
-    set: function (target, property, value) {
-      // Set variable to new value
-      target[property] = value
-
-      // Store to localstorage
-      if (property[0] === '$') {
-        localStorage.setItem(property, JSON.stringify(value))
-      }
-
-      if (_variables.includes(property)) {
-        updateStates(property)
-        _addMethodsToVariables([property])
-      }
-
-      return true
-    },
-    get: function (target, property) {
-      return target[property]
-    },
-  }
+  const state = new State()
 
   async function init() {
     // Automatically initialize when the script is loaded
@@ -41,13 +17,13 @@ const MiniJS = (() => {
 
     let startTime = performance.now()
     _setDebugMode()
-    _setProxyWindow()
+    state.setProxyWindow()
     Events.initValidEvents()
     _findElements()
     _initializeGlobalVariables()
-    _addMethodsToVariables()
+    state.attachVariableHelpers()
     Events.applyEvents(_elements)
-    updateStates()
+    state.triggerDOMUpdate()
     _listenToDOMChanges()
     // Temporarily commented out - to be reviewed
     // _evaluateLoadEvents();
@@ -85,26 +61,10 @@ const MiniJS = (() => {
     })
   }
 
-  function _addMethodsToVariables(variables = _variables) {
-    variables.forEach((variable) => {
-      if (
-        Array.isArray(proxyWindow[variable]) &&
-        !(proxyWindow[variable] instanceof MiniArray)
-      ) {
-        proxyWindow[variable] = new MiniArray(...proxyWindow[variable])
-      }
-    })
-  }
-
-  function _setProxyWindow() {
-    proxyWindow = new Proxy(window, watchHandler)
-  }
-
   function _setDebugMode() {
-    if (_debug) {
-      console.log('MiniJS Debug Mode Enabled')
-      Lexer.debug = true
-    }
+    if (!_debug) return
+    console.log('MiniJS Debug Mode Enabled')
+    Lexer.debug = true
   }
 
   function _initializeGlobalVariables() {
@@ -134,19 +94,6 @@ const MiniJS = (() => {
     })
   }
 
-  async function updateStates(property = null) {
-    for (const entity of _elements) {
-      if (
-        entity.variables.includes(property) ||
-        property == null ||
-        entity.uuid == property ||
-        entity.parent?.uuid == property
-      ) {
-        await entity.attributes.evaluate()
-      }
-    }
-  }
-
   function _findElements() {
     const elems = document.body.getElementsByTagName('*')
 
@@ -188,13 +135,13 @@ const MiniJS = (() => {
       _elements = newElements
     },
     get variables() {
-      return _variables
+      return state.variables
     },
-    set variables(newVarList) {
-      _variables = newVarList
+    set variables(variables) {
+      state.variables = variables
     },
     get window() {
-      return proxyWindow
+      return state.window
     },
     tryFromLocal,
   }
diff --git a/lib/state.js b/lib/state.js
new file mode 100644
index 0000000..4fcc0bb
--- /dev/null
+++ b/lib/state.js
@@ -0,0 +1,69 @@
+import MiniArray from './helpers/array'
+
+export class State {
+  static isLocalState(variable) {
+    return variable[0] === '$'
+  }
+
+  constructor() {
+    this.window = null
+    this.variables = []
+  }
+
+  setProxyWindow() {
+    this.window = this.create(window)
+  }
+
+  create(object) {
+    const ctx = this
+
+    return new Proxy(object, {
+      set: function (target, property, value) {
+        if (State.isLocalState(property))
+          ctx.setLocalState(target, property, value)
+        else ctx.setState(target, property, value)
+
+        return true
+      },
+      get: function (target, property) {
+        return target[property]
+      },
+    })
+  }
+
+  setLocalState(target, property, value) {
+    localStorage.setItem(property, JSON.stringify(value))
+    this.setState(target, property, value)
+  }
+
+  setState(target, property, value) {
+    target[property] = value
+
+    if (!this.variables.includes(property)) return
+    this.triggerDOMUpdate(property)
+    this.attachVariableHelpers()
+  }
+
+  triggerDOMUpdate(state) {
+    for (const entity of MiniJS.elements) {
+      const shouldUpdate =
+        entity.variables.includes(state) ||
+        state == null ||
+        entity.uuid == state ||
+        entity.parent?.uuid == state
+
+      if (shouldUpdate) entity.attributes.evaluate()
+    }
+  }
+
+  attachVariableHelpers(variables = this.variables) {
+    variables.forEach((variable) => {
+      if (
+        Array.isArray(this.window[variable]) &&
+        !(this.window[variable] instanceof MiniArray)
+      ) {
+        this.window[variable] = new MiniArray(...this.window[variable])
+      }
+    })
+  }
+}

From 666430810fc82a5ab1982af46c5a076eb632c049 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:55:58 +0800
Subject: [PATCH 02/29] chore: add note to update states

---
 lib/state.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/state.js b/lib/state.js
index 4fcc0bb..c546e32 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -52,6 +52,7 @@ export class State {
         entity.uuid == state ||
         entity.parent?.uuid == state
 
+      // TODO: Only update relevant attributes that uses those variables
       if (shouldUpdate) entity.attributes.evaluate()
     }
   }

From fcf16e5d651797a35745902a0e1116c5b9d0ab6d Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:56:09 +0800
Subject: [PATCH 03/29] refactor: update initial text of stored valeu

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ebe09e5..fdff595 100644
--- a/index.html
+++ b/index.html
@@ -1304,7 +1304,7 @@ <h3 class="font-bold font-mono">Storing to Local Storage:</h3>
               class="ml-3 mt-2 text-lg font-medium font-mono"
               :text="$storedValue"
             >
-              Update and Reload
+              Loading...
             </h2>
           </div>
 

From a996de7ed68c13a0452418c808b88bc285d76ce6 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:05:46 +0800
Subject: [PATCH 04/29] fix: exclude object properties in tracked variables

---
 lib/entity.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index ff82aaa..00cdb73 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -86,33 +86,31 @@ export default class Entity {
 
   _initVariables() {
     this.variables = [...new Set(this.variables)]
-    MiniJS.variables = [...new Set(MiniJS.variables.concat(this.variables))]
+
+    const trackedVariables = []
 
     this.variables.forEach((variable) => {
-      if (variable.startsWith('el.')) {
+      if (variable.startsWith('el.') || variable === 'el') {
         this.setAsParent()
 
         if (!this.parent) this.parent = this.getParent()
 
-        const varName = variable.replace('el.', '')
-
         if (!window[this.uuid]) window[this.uuid] = {}
-
-        // ! FIXME: Any changes to el.varName isn't being watched
-        window[this.uuid][varName] = MiniJS.tryFromLocal(
-          variable.replace('el.', this.uuid + '.')
-        )
-
-        if (!this.variables.includes(this.uuid)) this.variables.push(this.uuid)
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
         MiniJS.variables.splice(MiniJS.variables.indexOf(variable), 1)
       } else {
-        window[variable] = variable.startsWith('$')
-          ? MiniJS.tryFromLocal(variable)
-          : window[variable]
+        const [identifier] = variable.split('.')
+
+        window[identifier] = variable.startsWith('$')
+          ? MiniJS.tryFromLocal(identifier)
+          : window[identifier]
+
+        trackedVariables.push(identifier)
       }
     })
+
+    MiniJS.variables = [...new Set(MiniJS.variables.concat(trackedVariables))]
   }
 
   async _interpret(expr, options = {}) {

From a4e4cd70f14cb6e61ac04a8e70989e5dadf3edff Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:12:58 +0800
Subject: [PATCH 05/29] feat: setup proxy object for el variables

---
 lib/entity.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index 00cdb73..3cfb76b 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -91,11 +91,15 @@ export default class Entity {
 
     this.variables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
-        this.setAsParent()
+        if (this.uuid == null) {
+          this.setAsParent()
 
-        if (!this.parent) this.parent = this.getParent()
+          if (!this.parent) this.parent = this.getParent()
 
-        if (!window[this.uuid]) window[this.uuid] = {}
+          window[this.uuid] = MiniJS.state.create({}, this.uuid)
+        }
+
+        trackedVariables.push(this.uuid)
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
         MiniJS.variables.splice(MiniJS.variables.indexOf(variable), 1)

From 53e65aa5fb5cc82764f47d18d379bd351ea38115 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:13:23 +0800
Subject: [PATCH 06/29] refactor: use local variables instead of el variables
 for modal

---
 index.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index fdff595..8e87b61 100644
--- a/index.html
+++ b/index.html
@@ -1996,11 +1996,11 @@ <h3 class="font-bold font-mono">Tonic Dialog:</h3>
           <a
             class="bg-indigo-600 hover:bg-indigo-800 transition-all text-white rounded px-3 py-2 cursor-pointer"
             :click="isModalOpen = true;
-                  el.loader = document.createElement('div');
-                  el.loader.className = 'shimmer h-32 w-full';
-                  el.loader.style.minWidth = '300px';
-                  el.modalContent = $('#modal-container-content');
-                  el.modalContent.innerHTML = el.loader.outerHTML;"
+                  const loader = document.createElement('div');
+                  loader.className = 'shimmer h-32 w-full';
+                  loader.style.minWidth = '300px';
+                  const modalContent = $('#modal-container-content');
+                  modalContent.innerHTML = loader.outerHTML;"
           >
             Open Modal
           </a>

From c926d9b1500dddf3e16e48d84ed0f5d9442e8320 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:20:44 +0800
Subject: [PATCH 07/29] feat: add dependency-based state update and add
 reactive entity variables

---
 demo/observer.html |  33 +++++++------
 lib/entity.js      |  30 +++++++-----
 lib/main.js        |  11 ++---
 lib/state.js       | 118 +++++++++++++++++++++++++++++++++++++++------
 4 files changed, 146 insertions(+), 46 deletions(-)

diff --git a/demo/observer.html b/demo/observer.html
index 69254ae..d7bc15a 100644
--- a/demo/observer.html
+++ b/demo/observer.html
@@ -13,51 +13,56 @@
     <ol class="mt-8 list-decimal ml-4">
       <li>
         <button
-          :mouseenter="isHovered = true"
-          :mouseleave="isHovered = false"
-          :class="isHovered ? 'bg-red-200' : ''"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         >
           list item (click to delete)
         </button>
         <button
           class="px-2 py-1 bg-gray-200 rounded-md text-base"
-          :click="this.previousElementSibling.setAttribute(':class', 'isHovered ? \'bg-red-200\' : \'bg-gray-200\'')"
+          :click="this.previousElementSibling.setAttribute(':class', 'el.isHovered ? \'bg-red-200\' : \'bg-gray-200\'')"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         >
           Change :class Attribute
         </button>
       </li>
       <li>
         <button
-          :mouseenter="isHovered2 = true"
-          :mouseleave="isHovered2 = false"
-          :class="isHovered2 ? 'bg-red-200' : ''"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
           :text="`my id is ${this.getAttribute('id')} (hover me to change) list item (click to delete)`"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         ></button>
         <button
-          class="px-2 py-1 bg-gray-200 rounded-md text-base"
           :click="this.previousElementSibling.setAttribute(':id', '`list2${Math.random()}`')"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         >
           Change :id Attribute
         </button>
       </li>
       <li>
         <button
-          :mouseenter="isHovered3 = true"
-          :mouseleave="isHovered3 = false"
-          :class="isHovered3 ? 'bg-red-200' : ''"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         >
           list item (click to delete)
         </button>
       </li>
       <li>
         <button
-          :mouseenter="isHovered4 = true"
-          :mouseleave="isHovered4 = false"
-          :class="isHovered4 ? 'bg-red-200' : ''"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
+          :mouseenter="el.isHovered = true"
+          :mouseleave="el.isHovered = false"
+          :class="el.isHovered ? 'bg-red-200' : ''"
         >
           list item (click to delete)
         </button>
diff --git a/lib/entity.js b/lib/entity.js
index 3cfb76b..24411c0 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -12,6 +12,7 @@ export default class Entity {
 
     this.events = new Events(this)
     this.attributes = new Attributes(this)
+    MiniJS.state.addEntity(this)
 
     if (MiniJS.debug) this.element.dataset.entityId = this.id
   }
@@ -86,7 +87,6 @@ export default class Entity {
 
   _initVariables() {
     this.variables = [...new Set(this.variables)]
-
     const trackedVariables = []
 
     this.variables.forEach((variable) => {
@@ -96,13 +96,17 @@ export default class Entity {
 
           if (!this.parent) this.parent = this.getParent()
 
-          window[this.uuid] = MiniJS.state.create({}, this.uuid)
+          window[this.id] = MiniJS.state.create({}, this.id)
         }
 
-        trackedVariables.push(this.uuid)
+        MiniJS.state.addDependency(this.id, this.id)
+
+        if (variable !== 'el') {
+          const [_, varName] = variable.split('.')
+          MiniJS.state.addEntityDependency(this.id, varName, this.id)
+        }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
-        MiniJS.variables.splice(MiniJS.variables.indexOf(variable), 1)
       } else {
         const [identifier] = variable.split('.')
 
@@ -110,11 +114,14 @@ export default class Entity {
           ? MiniJS.tryFromLocal(identifier)
           : window[identifier]
 
+        MiniJS.state.addDependency(identifier, this.id)
         trackedVariables.push(identifier)
       }
     })
 
-    MiniJS.variables = [...new Set(MiniJS.variables.concat(trackedVariables))]
+    MiniJS.state.variables = [
+      ...new Set(MiniJS.state.variables.concat(trackedVariables)),
+    ]
   }
 
   async _interpret(expr, options = {}) {
@@ -135,8 +142,6 @@ export default class Entity {
     return await engine.interpret(this)
   }
 
-  /* Note: I don't this getParent() is needed,
-    since el. variables should use the current element's uuid instead. */
   getParent() {
     if (this.isParent()) {
       return this
@@ -155,7 +160,6 @@ export default class Entity {
   }
 
   generateEntityUUID() {
-    // Suggestion: we can use crypto.randomUUID(). Tho crypto only works in secure contexts
     return 'Entity' + Date.now() + Math.floor(Math.random() * 10000)
   }
 
@@ -197,6 +201,7 @@ export default class Entity {
       if (!entity) continue
 
       variables.push(...entity.variables)
+      MiniJS.state.removeEntity(entity)
       entity.events.dispose()
     }
 
@@ -215,16 +220,19 @@ export default class Entity {
       (variable) => !usedVariables.includes(variable)
     )
 
-    MiniJS.variables = MiniJS.variables.filter(
+    MiniJS.state.variables = MiniJS.state.variables.filter(
       (variable) => !unusedVariables.includes(variable)
     )
 
     unusedVariables.forEach((variable) => {
-      if (variable.startsWith('el.')) {
+      if (variable.startsWith('el.') || variable === 'el') {
+        delete window[this.id]
         const varName = variable.replace('el.', '')
-        if (window[this.uuid]?.[varName]) delete window[this.uuid]
+        MiniJS.state.disposeDependency(this.id)
+        MiniJS.state.disposeEntityDependency(this.id, varName)
       } else {
         delete window[variable]
+        MiniJS.state.disposeDependency(variable)
       }
     })
   }
diff --git a/lib/main.js b/lib/main.js
index 9377453..30de2ab 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -23,7 +23,7 @@ const MiniJS = (() => {
     _initializeGlobalVariables()
     state.attachVariableHelpers()
     Events.applyEvents(_elements)
-    state.triggerDOMUpdate()
+    state.evaluate()
     _listenToDOMChanges()
     // Temporarily commented out - to be reviewed
     // _evaluateLoadEvents();
@@ -134,15 +134,12 @@ const MiniJS = (() => {
     set elements(newElements) {
       _elements = newElements
     },
-    get variables() {
-      return state.variables
-    },
-    set variables(variables) {
-      state.variables = variables
-    },
     get window() {
       return state.window
     },
+    get state() {
+      return state
+    },
     tryFromLocal,
   }
 })()
diff --git a/lib/state.js b/lib/state.js
index c546e32..736b3a0 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -8,18 +8,83 @@ export class State {
   constructor() {
     this.window = null
     this.variables = []
+
+    this.entities = new Map() // key: entityID, value: entity
+    this.dependencies = new Map() // key: variable, value: entityID
+    this.entityDependencies = new Map() // key: entityID.variable, value: entityID
   }
 
   setProxyWindow() {
     this.window = this.create(window)
   }
 
-  create(object) {
+  addEntity(entity) {
+    this.entities.set(entity.id, entity)
+  }
+
+  removeEntity(entity) {
+    this.entities.delete(entity.id)
+
+    this.dependencies.forEach((_, entityID) => {
+      if (entityID === entity.id) this.dependencies.delete(entity.id)
+    })
+
+    this.entityDependencies.forEach((_, variable) => {
+      const [entityID] = variable.split('.')
+      if (entityID === entity.id) this.entityDependencies.delete(variable)
+    })
+  }
+
+  hasDependency(variable) {
+    return (
+      this.dependencies.has(variable) || this.entityDependencies.has(variable)
+    )
+  }
+
+  addDependency(variable, entityID) {
+    const dependencies = this.dependencies.get(variable) || []
+    this.dependencies.set(variable, [...new Set(dependencies), entityID])
+  }
+
+  removeDependency(variable, entityID) {
+    const dependencies = (this.dependencies.get(variable) || []).filter(
+      (dep) => dep === entityID
+    )
+
+    this.dependencies.set(variable, dependencies)
+  }
+
+  disposeDependency(variable) {
+    this.dependencies.delete(variable)
+  }
+
+  addEntityDependency(parentEntityID, variable, entityID) {
+    const key = `${parentEntityID}.${variable}`
+    const dependencies = this.entityDependencies.get(key) || []
+    this.entityDependencies.set(key, [...new Set(dependencies), entityID])
+  }
+
+  removeEntityDependency(parentEntityID, variable, entityID = null) {
+    const key = `${parentEntityID}.${variable}`
+    const dependencies = (this.entityDependencies.get(key) || []).filter(
+      (dep) => dep === entityID
+    )
+
+    this.entityDependencies.set(key, dependencies)
+  }
+
+  disposeEntityDependency(parentEntityID, variable) {
+    const key = `${parentEntityID}.${variable}`
+    this.entityDependencies.delete(key)
+  }
+
+  create(object, entityID = null) {
     const ctx = this
 
     return new Proxy(object, {
       set: function (target, property, value) {
-        if (State.isLocalState(property))
+        if (entityID) ctx.setEntityState(target, property, value, entityID)
+        else if (State.isLocalState(property))
           ctx.setLocalState(target, property, value)
         else ctx.setState(target, property, value)
 
@@ -39,22 +104,47 @@ export class State {
   setState(target, property, value) {
     target[property] = value
 
-    if (!this.variables.includes(property)) return
-    this.triggerDOMUpdate(property)
-    this.attachVariableHelpers()
+    if (!this.hasDependency(property)) return
+    this.evaluateDependencies(property)
+    this.attachVariableHelpers([property])
+  }
+
+  setEntityState(target, property, value, entityID) {
+    target[property] = value
+
+    if (!this.hasDependency(entityID)) return
+
+    const variable = `${entityID}.${property}`
+    this.evaluateDependencies(variable)
+    this.attachVariableHelpers([entityID])
   }
 
-  triggerDOMUpdate(state) {
-    for (const entity of MiniJS.elements) {
-      const shouldUpdate =
-        entity.variables.includes(state) ||
-        state == null ||
-        entity.uuid == state ||
-        entity.parent?.uuid == state
+  evaluate() {
+    Array.from(this.entities.values()).forEach((entity) => {
+      entity.attributes.evaluate()
+    })
+
+    this.attachVariableHelpers(Array.from(this.dependencies.keys()))
+  }
+
+  evaluateDependencies(variable) {
+    const dependencies = this.dependencies.get(variable) || []
+
+    dependencies.forEach((entityID) => {
+      const entity = this.entities.get(entityID)
+      // TODO: Only update relevant attributes that uses those variables
+      entity?.attributes.evaluate()
+    })
+
+    const entityDependencies = this.entityDependencies.get(variable) || []
 
+    entityDependencies.forEach((entityID) => {
+      const entity = this.entities.get(entityID)
       // TODO: Only update relevant attributes that uses those variables
-      if (shouldUpdate) entity.attributes.evaluate()
-    }
+      entity?.attributes.evaluate()
+    })
+
+    this.attachVariableHelpers([variable])
   }
 
   attachVariableHelpers(variables = this.variables) {

From d2a02d108b47582b5129e44e4ef2c7b109d7b28b Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:23:02 +0800
Subject: [PATCH 08/29] fix: catch eval error for non-existing elements

---
 index.html               |  9 +++--
 lib/entity.js            | 29 ++++++++-------
 lib/entity/attributes.js | 78 +++++++++++++++++++++++++---------------
 3 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index 8e87b61..85e6775 100644
--- a/index.html
+++ b/index.html
@@ -1400,9 +1400,12 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
                   :click="selectedTags = selectedTags.add(tag);
                         filteredTags = filteredTags.remove(selectedTag);
                         selectedTag = filteredTags.first"
-                  :mouseover="selectedTag = tag"
-                  :class="selectedTag == tag ? 'bg-blue-100 text-blue-700' : 'text-gray-700'"
-                  class="font-mono font-semibold py-2 px-3 rounded cursor-pointer hover:bg-blue-100 hover:text-blue-700"
+                  :mouseover="el.isHovering = true"
+                  :mouseout="el.isHovering = false"
+                  :class="(selectedTag == tag ? 'text-blue-700' : 'text-gray-700')
+                    (selectedTag == tag ? 'bg-blue-100' : '')
+                    (el.isHovering && selectedTag != tag ? 'bg-gray-50' : '')"
+                  class="font-mono font-semibold py-2 px-3 rounded cursor-pointer"
                   :text="tag"
                 ></li>
               </ul>
diff --git a/lib/entity.js b/lib/entity.js
index 24411c0..849651c 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -26,6 +26,10 @@ export default class Entity {
     return !!this.uuid
   }
 
+  isExists() {
+    return document.documentElement.contains(this.element)
+  }
+
   getVariables() {
     this._getVariablesFromAttributes()
     this._getVariablesFromEvents()
@@ -91,19 +95,19 @@ export default class Entity {
 
     this.variables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
-        if (this.uuid == null) {
-          this.setAsParent()
+        this.setAsParent()
 
-          if (!this.parent) this.parent = this.getParent()
+        if (!this.parent) this.parent = this.getParent()
 
-          window[this.id] = MiniJS.state.create({}, this.id)
+        if (window[this.uuid] == null) {
+          window[this.uuid] = MiniJS.state.create({}, this.id)
         }
 
-        MiniJS.state.addDependency(this.id, this.id)
+        MiniJS.state.addDependency(this.uuid, this.id)
 
         if (variable !== 'el') {
           const [_, varName] = variable.split('.')
-          MiniJS.state.addEntityDependency(this.id, varName, this.id)
+          MiniJS.state.addEntityDependency(this.uuid, varName, this.id)
         }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
@@ -127,9 +131,10 @@ export default class Entity {
   async _interpret(expr, options = {}) {
     const Engine = options.isClass ? ClassInterpreter : Interpreter
     const engine = new Engine(expr, options)
-    const ids = { $: 'document.querySelector' }
-
-    if (this.parent?.uuid) ids.el = `proxyWindow['${this.parent.uuid}']`
+    const ids = {
+      $: 'document.querySelector',
+      el: `proxyWindow['${this.uuid}']`,
+    }
 
     this.variables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') return
@@ -226,10 +231,10 @@ export default class Entity {
 
     unusedVariables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
-        delete window[this.id]
+        delete window[this.uuid]
         const varName = variable.replace('el.', '')
-        MiniJS.state.disposeDependency(this.id)
-        MiniJS.state.disposeEntityDependency(this.id, varName)
+        MiniJS.state.disposeDependency(this.uuid)
+        MiniJS.state.disposeEntityDependency(this.uuid, varName)
       } else {
         delete window[variable]
         MiniJS.state.disposeDependency(variable)
diff --git a/lib/entity/attributes.js b/lib/entity/attributes.js
index 6c8ead4..3d4c426 100644
--- a/lib/entity/attributes.js
+++ b/lib/entity/attributes.js
@@ -65,54 +65,74 @@ export class Attributes {
     const expr = this.base.element.getAttribute(':class')
     if (!expr) return
 
-    const updatedClassNames = await this.base._interpret(expr, {
-      base: this.initialState.classList,
-      isClass: true,
-    })
-
-    this.base.element.setAttribute('class', updatedClassNames)
+    try {
+      const updatedClassNames = await this.base._interpret(expr, {
+        base: this.initialState.classList,
+        isClass: true,
+      })
+
+      this.base.element.setAttribute('class', updatedClassNames)
+    } catch (error) {
+      if (!this.base.isExists()) return
+      throw error
+    }
   }
 
   async evaluateText() {
     const textExpr = this.base.element.getAttribute(':text')
     if (!textExpr) return
 
-    const newText = await this.base._interpret(textExpr)
+    try {
+      const newText = await this.base._interpret(textExpr)
 
-    if (newText || newText == '') this.base.element.innerText = newText
+      if (newText || newText == '') this.base.element.innerText = newText
+    } catch (error) {
+      if (!this.base.isExists()) return
+      throw error
+    }
   }
 
   async evaluateValue() {
-    const valueExpr = this.base.element.getAttribute(':value')
+    try {
+      const valueExpr = this.base.element.getAttribute(':value')
 
-    if (valueExpr) {
-      const newValue = await this.base._interpret(valueExpr)
+      if (valueExpr) {
+        const newValue = await this.base._interpret(valueExpr)
 
-      if (this.base.element.value !== newValue && newValue != null)
-        this.base.element.value = newValue
-    }
+        if (this.base.element.value !== newValue && newValue != null)
+          this.base.element.value = newValue
+      }
 
-    const checkedExpr = this.base.element.getAttribute(':checked')
+      const checkedExpr = this.base.element.getAttribute(':checked')
 
-    if (checkedExpr) {
-      const newValue = await this.base._interpret(checkedExpr)
+      if (checkedExpr) {
+        const newValue = await this.base._interpret(checkedExpr)
 
-      if (newValue) this.base.element.checked = newValue
+        if (newValue) this.base.element.checked = newValue
+      }
+    } catch (error) {
+      if (!this.base.isExists()) return
+      throw error
     }
   }
 
   async evaluateOtherAttributes() {
-    for (const attr of this.dynamicAttributes) {
-      if (Attributes.CUSTOM_ATTRIBUTES.includes(attr)) continue
-
-      const expr = this.base.element.getAttribute(attr)
-      if (!expr) return
-
-      const newValue = await this.base._interpret(expr)
-      const nativeAttr = attr.slice(1)
-
-      if (this.base.element[nativeAttr] !== newValue && newValue != null)
-        this.base.element[nativeAttr] = newValue
+    try {
+      for (const attr of this.dynamicAttributes) {
+        if (Attributes.CUSTOM_ATTRIBUTES.includes(attr)) continue
+
+        const expr = this.base.element.getAttribute(attr)
+        if (!expr) return
+
+        const newValue = await this.base._interpret(expr)
+        const nativeAttr = attr.slice(1)
+
+        if (this.base.element[nativeAttr] !== newValue && newValue != null)
+          this.base.element[nativeAttr] = newValue
+      }
+    } catch (error) {
+      if (!this.base.isExists()) return
+      throw error
     }
   }
 

From 5c5a6b0fb6af1a2f470ad498e98c9f95a38f0975 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:02:29 +0800
Subject: [PATCH 09/29] refactor: prevent usage of :innerHTML and :innerText

---
 lib/entity/attributes.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/entity/attributes.js b/lib/entity/attributes.js
index 3d4c426..9ec104a 100644
--- a/lib/entity/attributes.js
+++ b/lib/entity/attributes.js
@@ -3,9 +3,11 @@ import { escapeHTML } from '../helpers/sanitize'
 
 export class Attributes {
   static CUSTOM_ATTRIBUTES = [':class', ':text', ':value', ':checked', ':each']
+  static FORBIDDEN_ATTRIBUTES = [':innerHTML', ':innerText']
 
   static isValidAttribute(attribute, element) {
     if (!attribute.startsWith(':')) return false
+    if (Attributes.FORBIDDEN_ATTRIBUTES.includes(attribute)) return false
     if (Events.isValidEvent(attribute)) return false
     if (Attributes.CUSTOM_ATTRIBUTES.includes(attribute)) return true
 

From bd5df017ddd33c28201877ae0786bc9c7ebe305c Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:04:19 +0800
Subject: [PATCH 10/29] style: missing button class

---
 demo/observer.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/observer.html b/demo/observer.html
index d7bc15a..e324950 100644
--- a/demo/observer.html
+++ b/demo/observer.html
@@ -39,6 +39,7 @@
           :class="el.isHovered ? 'bg-red-200' : ''"
         ></button>
         <button
+          class="px-2 py-1 bg-gray-200 rounded-md text-base"
           :click="this.previousElementSibling.setAttribute(':id', '`list2${Math.random()}`')"
           :mouseenter="el.isHovered = true"
           :mouseleave="el.isHovered = false"

From cedeb0135012abaab296b5b625e442c4f2260833 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:04:29 +0800
Subject: [PATCH 11/29] fix: native dynamic attr not working

---
 lib/entity/attributes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/entity/attributes.js b/lib/entity/attributes.js
index 9ec104a..f42931f 100644
--- a/lib/entity/attributes.js
+++ b/lib/entity/attributes.js
@@ -12,7 +12,7 @@ export class Attributes {
     if (Attributes.CUSTOM_ATTRIBUTES.includes(attribute)) return true
 
     const [nativeAttr] = attribute.replace(':', '').split('.')
-    if (element[nativeAttr] !== undefined) return false
+    if (element[nativeAttr] === undefined) return false
 
     return true
   }

From 28da3328bcf93deb6de1a02bb29420259512486e Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:06:27 +0800
Subject: [PATCH 12/29] chore: add todo for dynamically inserted events

---
 lib/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/main.js b/lib/main.js
index 30de2ab..77151b1 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -42,6 +42,8 @@ const MiniJS = (() => {
           const entity = _elements.find(
             (entity) => entity.element === record.target
           )
+
+          // TODO: Add support for dynamically inserted events like :click
           entity?.attributes.evaluateAttribute(record.attributeName)
         }
 

From daa3b93dc00ff2c32d32b38f348b046f514fdaa0 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:10:22 +0800
Subject: [PATCH 13/29] refactor: remove usage of variables

---
 lib/entity.js | 10 ----------
 lib/main.js   |  1 -
 lib/state.js  |  3 +--
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index 849651c..1db3454 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -91,7 +91,6 @@ export default class Entity {
 
   _initVariables() {
     this.variables = [...new Set(this.variables)]
-    const trackedVariables = []
 
     this.variables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
@@ -119,13 +118,8 @@ export default class Entity {
           : window[identifier]
 
         MiniJS.state.addDependency(identifier, this.id)
-        trackedVariables.push(identifier)
       }
     })
-
-    MiniJS.state.variables = [
-      ...new Set(MiniJS.state.variables.concat(trackedVariables)),
-    ]
   }
 
   async _interpret(expr, options = {}) {
@@ -225,10 +219,6 @@ export default class Entity {
       (variable) => !usedVariables.includes(variable)
     )
 
-    MiniJS.state.variables = MiniJS.state.variables.filter(
-      (variable) => !unusedVariables.includes(variable)
-    )
-
     unusedVariables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
         delete window[this.uuid]
diff --git a/lib/main.js b/lib/main.js
index 77151b1..158bd44 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -21,7 +21,6 @@ const MiniJS = (() => {
     Events.initValidEvents()
     _findElements()
     _initializeGlobalVariables()
-    state.attachVariableHelpers()
     Events.applyEvents(_elements)
     state.evaluate()
     _listenToDOMChanges()
diff --git a/lib/state.js b/lib/state.js
index 736b3a0..21bcf46 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -7,7 +7,6 @@ export class State {
 
   constructor() {
     this.window = null
-    this.variables = []
 
     this.entities = new Map() // key: entityID, value: entity
     this.dependencies = new Map() // key: variable, value: entityID
@@ -147,7 +146,7 @@ export class State {
     this.attachVariableHelpers([variable])
   }
 
-  attachVariableHelpers(variables = this.variables) {
+  attachVariableHelpers(variables) {
     variables.forEach((variable) => {
       if (
         Array.isArray(this.window[variable]) &&

From a8ce4fc5152114e0186440ec93f6776a9b078be6 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:23:21 +0800
Subject: [PATCH 14/29] fix: error in disposal of el variables

---
 lib/entity.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index 1db3454..ec63163 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -98,15 +98,15 @@ export default class Entity {
 
         if (!this.parent) this.parent = this.getParent()
 
-        if (window[this.uuid] == null) {
-          window[this.uuid] = MiniJS.state.create({}, this.id)
+        if (window[this.id] == null) {
+          window[this.id] = MiniJS.state.create({}, this.id)
         }
 
-        MiniJS.state.addDependency(this.uuid, this.id)
+        MiniJS.state.addDependency(this.id, this.id)
 
         if (variable !== 'el') {
           const [_, varName] = variable.split('.')
-          MiniJS.state.addEntityDependency(this.uuid, varName, this.id)
+          MiniJS.state.addEntityDependency(this.id, varName, this.id)
         }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
@@ -127,7 +127,7 @@ export default class Entity {
     const engine = new Engine(expr, options)
     const ids = {
       $: 'document.querySelector',
-      el: `proxyWindow['${this.uuid}']`,
+      el: `proxyWindow['${this.id}']`,
     }
 
     this.variables.forEach((variable) => {
@@ -221,10 +221,10 @@ export default class Entity {
 
     unusedVariables.forEach((variable) => {
       if (variable.startsWith('el.') || variable === 'el') {
-        delete window[this.uuid]
+        delete window[this.id]
         const varName = variable.replace('el.', '')
-        MiniJS.state.disposeDependency(this.uuid)
-        MiniJS.state.disposeEntityDependency(this.uuid, varName)
+        MiniJS.state.disposeDependency(this.id)
+        MiniJS.state.disposeEntityDependency(this.id, varName)
       } else {
         delete window[variable]
         MiniJS.state.disposeDependency(variable)

From a470e3000718ee4e843a38af31136347ae378cba Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:23:42 +0800
Subject: [PATCH 15/29] fix: update cleanup of entity dependencies on disposal

---
 lib/state.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/lib/state.js b/lib/state.js
index 21bcf46..897fc6f 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -24,13 +24,25 @@ export class State {
   removeEntity(entity) {
     this.entities.delete(entity.id)
 
-    this.dependencies.forEach((_, entityID) => {
-      if (entityID === entity.id) this.dependencies.delete(entity.id)
+    const dependencies = [...this.dependencies.entries()]
+    dependencies.forEach(([key, value]) => {
+      if (key === entity.id) this.dependencies.delete(key)
+      else if (value.includes(entity.id))
+        this.dependencies.set(
+          key,
+          value.filter((id) => id !== entity.id)
+        )
     })
 
-    this.entityDependencies.forEach((_, variable) => {
-      const [entityID] = variable.split('.')
-      if (entityID === entity.id) this.entityDependencies.delete(variable)
+    const entityDependencies = [...this.entityDependencies.entries()]
+    entityDependencies.forEach(([key, value]) => {
+      const [entityID] = key.split('.')
+      if (entityID === entity.id) this.entityDependencies.delete(key)
+      else if (value.includes(entity.id))
+        this.entityDependencies.set(
+          key,
+          value.filter((id) => id !== entity.id)
+        )
     })
   }
 

From d647fafe3a14530274a32c7b340e94399521b6a6 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:32:43 +0800
Subject: [PATCH 16/29] refactor: relocate disposal of variables logic to state

---
 lib/entity.js | 14 ++------------
 lib/state.js  | 41 ++++++++++++++++++++++++++++++++---------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index ec63163..7aa7404 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -200,8 +200,8 @@ export default class Entity {
       if (!entity) continue
 
       variables.push(...entity.variables)
-      MiniJS.state.removeEntity(entity)
       entity.events.dispose()
+      MiniJS.state.removeEntity(entity)
     }
 
     // Remove disposed elements
@@ -219,16 +219,6 @@ export default class Entity {
       (variable) => !usedVariables.includes(variable)
     )
 
-    unusedVariables.forEach((variable) => {
-      if (variable.startsWith('el.') || variable === 'el') {
-        delete window[this.id]
-        const varName = variable.replace('el.', '')
-        MiniJS.state.disposeDependency(this.id)
-        MiniJS.state.disposeEntityDependency(this.id, varName)
-      } else {
-        delete window[variable]
-        MiniJS.state.disposeDependency(variable)
-      }
-    })
+    MiniJS.state.disposeVariables(this.id, unusedVariables)
   }
 }
diff --git a/lib/state.js b/lib/state.js
index 897fc6f..9553444 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -5,6 +5,10 @@ export class State {
     return variable[0] === '$'
   }
 
+  static isElState(variable) {
+    return variable.startsWith('el.') || variable === 'el'
+  }
+
   constructor() {
     this.window = null
 
@@ -65,10 +69,6 @@ export class State {
     this.dependencies.set(variable, dependencies)
   }
 
-  disposeDependency(variable) {
-    this.dependencies.delete(variable)
-  }
-
   addEntityDependency(parentEntityID, variable, entityID) {
     const key = `${parentEntityID}.${variable}`
     const dependencies = this.entityDependencies.get(key) || []
@@ -84,11 +84,6 @@ export class State {
     this.entityDependencies.set(key, dependencies)
   }
 
-  disposeEntityDependency(parentEntityID, variable) {
-    const key = `${parentEntityID}.${variable}`
-    this.entityDependencies.delete(key)
-  }
-
   create(object, entityID = null) {
     const ctx = this
 
@@ -168,4 +163,32 @@ export class State {
       }
     })
   }
+
+  disposeVariables(entityID, variables) {
+    variables.forEach((variable) => {
+      if (State.isElState(variable)) {
+        delete window[entityID]
+        MiniJS.state.disposeDependency(entityID)
+
+        if (variable !== 'el') {
+          const varName = variable.replace('el.', '')
+          MiniJS.state.disposeEntityDependency(entityID, varName)
+        }
+      } else {
+        delete window[variable]
+        MiniJS.state.disposeDependency(variable)
+
+        if (State.isLocalState(variable)) localStorage.removeItem(variable)
+      }
+    })
+  }
+
+  disposeDependency(variable) {
+    this.dependencies.delete(variable)
+  }
+
+  disposeEntityDependency(parentEntityID, variable) {
+    const key = `${parentEntityID}.${variable}`
+    this.entityDependencies.delete(key)
+  }
 }

From ebe61f1e0910d742123e38cb4bfd33004c6f44ea Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:46:33 +0800
Subject: [PATCH 17/29] refactor: relocate add/remove of MiniJS.elements

---
 lib/entity.js | 2 --
 lib/state.js  | 3 +++
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index 7aa7404..a7df4b8 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -166,8 +166,6 @@ export default class Entity {
     this.getVariables()
     this.events.apply()
     await this.attributes.evaluate()
-
-    MiniJS.elements.push(this)
   }
 
   initChildren() {
diff --git a/lib/state.js b/lib/state.js
index 9553444..0f62578 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -23,6 +23,7 @@ export class State {
 
   addEntity(entity) {
     this.entities.set(entity.id, entity)
+    MiniJS.elements.push(entity)
   }
 
   removeEntity(entity) {
@@ -48,6 +49,8 @@ export class State {
           value.filter((id) => id !== entity.id)
         )
     })
+
+    MiniJS.elements = MiniJS.elements.filter((el) => el.id !== entity.id)
   }
 
   hasDependency(variable) {

From a18284efcaba9495858c1d1531c81d96b7b6a06e Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:54:04 +0800
Subject: [PATCH 18/29] refactor: rename dependencies to variables

---
 lib/entity.js |  6 ++--
 lib/state.js  | 77 +++++++++++++++++++--------------------------------
 2 files changed, 32 insertions(+), 51 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index a7df4b8..a00c32c 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -102,11 +102,11 @@ export default class Entity {
           window[this.id] = MiniJS.state.create({}, this.id)
         }
 
-        MiniJS.state.addDependency(this.id, this.id)
+        MiniJS.state.addVariable(this.id, this.id)
 
         if (variable !== 'el') {
           const [_, varName] = variable.split('.')
-          MiniJS.state.addEntityDependency(this.id, varName, this.id)
+          MiniJS.state.addEntityVariable(this.id, varName, this.id)
         }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
@@ -117,7 +117,7 @@ export default class Entity {
           ? MiniJS.tryFromLocal(identifier)
           : window[identifier]
 
-        MiniJS.state.addDependency(identifier, this.id)
+        MiniJS.state.addVariable(identifier, this.id)
       }
     })
   }
diff --git a/lib/state.js b/lib/state.js
index 0f62578..9e1a9d7 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -13,8 +13,8 @@ export class State {
     this.window = null
 
     this.entities = new Map() // key: entityID, value: entity
-    this.dependencies = new Map() // key: variable, value: entityID
-    this.entityDependencies = new Map() // key: entityID.variable, value: entityID
+    this.variables = new Map() // key: variable, value: entityID
+    this.entityVariables = new Map() // key: entityID.variable, value: entityID
   }
 
   setProxyWindow() {
@@ -29,22 +29,22 @@ export class State {
   removeEntity(entity) {
     this.entities.delete(entity.id)
 
-    const dependencies = [...this.dependencies.entries()]
-    dependencies.forEach(([key, value]) => {
-      if (key === entity.id) this.dependencies.delete(key)
+    const variables = [...this.variables.entries()]
+    variables.forEach(([key, value]) => {
+      if (key === entity.id) this.variables.delete(key)
       else if (value.includes(entity.id))
-        this.dependencies.set(
+        this.variables.set(
           key,
           value.filter((id) => id !== entity.id)
         )
     })
 
-    const entityDependencies = [...this.entityDependencies.entries()]
-    entityDependencies.forEach(([key, value]) => {
+    const entityVariables = [...this.entityVariables.entries()]
+    entityVariables.forEach(([key, value]) => {
       const [entityID] = key.split('.')
-      if (entityID === entity.id) this.entityDependencies.delete(key)
+      if (entityID === entity.id) this.entityVariables.delete(key)
       else if (value.includes(entity.id))
-        this.entityDependencies.set(
+        this.entityVariables.set(
           key,
           value.filter((id) => id !== entity.id)
         )
@@ -54,37 +54,18 @@ export class State {
   }
 
   hasDependency(variable) {
-    return (
-      this.dependencies.has(variable) || this.entityDependencies.has(variable)
-    )
+    return this.variables.has(variable) || this.entityVariables.has(variable)
   }
 
-  addDependency(variable, entityID) {
-    const dependencies = this.dependencies.get(variable) || []
-    this.dependencies.set(variable, [...new Set(dependencies), entityID])
+  addVariable(variable, entityID) {
+    const variables = this.variables.get(variable) || []
+    this.variables.set(variable, [...new Set(variables), entityID])
   }
 
-  removeDependency(variable, entityID) {
-    const dependencies = (this.dependencies.get(variable) || []).filter(
-      (dep) => dep === entityID
-    )
-
-    this.dependencies.set(variable, dependencies)
-  }
-
-  addEntityDependency(parentEntityID, variable, entityID) {
+  addEntityVariable(parentEntityID, variable, entityID) {
     const key = `${parentEntityID}.${variable}`
-    const dependencies = this.entityDependencies.get(key) || []
-    this.entityDependencies.set(key, [...new Set(dependencies), entityID])
-  }
-
-  removeEntityDependency(parentEntityID, variable, entityID = null) {
-    const key = `${parentEntityID}.${variable}`
-    const dependencies = (this.entityDependencies.get(key) || []).filter(
-      (dep) => dep === entityID
-    )
-
-    this.entityDependencies.set(key, dependencies)
+    const variables = this.entityVariables.get(key) || []
+    this.entityVariables.set(key, [...new Set(variables), entityID])
   }
 
   create(object, entityID = null) {
@@ -133,21 +114,21 @@ export class State {
       entity.attributes.evaluate()
     })
 
-    this.attachVariableHelpers(Array.from(this.dependencies.keys()))
+    this.attachVariableHelpers(Array.from(this.variables.keys()))
   }
 
   evaluateDependencies(variable) {
-    const dependencies = this.dependencies.get(variable) || []
+    const variables = this.variables.get(variable) || []
 
-    dependencies.forEach((entityID) => {
+    variables.forEach((entityID) => {
       const entity = this.entities.get(entityID)
       // TODO: Only update relevant attributes that uses those variables
       entity?.attributes.evaluate()
     })
 
-    const entityDependencies = this.entityDependencies.get(variable) || []
+    const entityVariables = this.entityVariables.get(variable) || []
 
-    entityDependencies.forEach((entityID) => {
+    entityVariables.forEach((entityID) => {
       const entity = this.entities.get(entityID)
       // TODO: Only update relevant attributes that uses those variables
       entity?.attributes.evaluate()
@@ -171,27 +152,27 @@ export class State {
     variables.forEach((variable) => {
       if (State.isElState(variable)) {
         delete window[entityID]
-        MiniJS.state.disposeDependency(entityID)
+        MiniJS.state.disposeVariable(entityID)
 
         if (variable !== 'el') {
           const varName = variable.replace('el.', '')
-          MiniJS.state.disposeEntityDependency(entityID, varName)
+          MiniJS.state.disposeEntityVariable(entityID, varName)
         }
       } else {
         delete window[variable]
-        MiniJS.state.disposeDependency(variable)
+        MiniJS.state.disposeVariable(variable)
 
         if (State.isLocalState(variable)) localStorage.removeItem(variable)
       }
     })
   }
 
-  disposeDependency(variable) {
-    this.dependencies.delete(variable)
+  disposeVariable(variable) {
+    this.variables.delete(variable)
   }
 
-  disposeEntityDependency(parentEntityID, variable) {
+  disposeEntityVariable(parentEntityID, variable) {
     const key = `${parentEntityID}.${variable}`
-    this.entityDependencies.delete(key)
+    this.entityVariables.delete(key)
   }
 }

From cb646002659c83708d1745fb7dfaa07c9ed1ac4b Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:13:56 +0800
Subject: [PATCH 19/29] refactor: remove MiniJS.elements

---
 lib/entity.js        | 23 ++++++++---------------
 lib/entity/events.js |  3 ++-
 lib/main.js          | 25 ++++++++-----------------
 lib/state.js         |  7 ++++---
 4 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index a00c32c..e72b48b 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -151,9 +151,8 @@ export default class Entity {
         currentElement = parentNode
         parentNode = currentElement.parentNode
       }
-      const entity = MiniJS.elements.find(
-        (e) => e.uuid == parentNode.dataset.uuid
-      )
+      const entities = Array.from(MiniJS.state.entities.values())
+      const entity = entities.find((e) => e.uuid == parentNode.dataset.uuid)
       return entity
     }
   }
@@ -186,15 +185,15 @@ export default class Entity {
 
   dispose() {
     const elements = [this.element, ...this.element.querySelectorAll('*')]
+    const entities = Array.from(MiniJS.state.entities.values())
     const variables = []
 
     // Remove event bindings
     for (const element of elements) {
       if (element.nodeType !== 1) continue
 
-      const entity = MiniJS.elements.find(
-        (entity) => entity.element === element
-      )
+      const entity = MiniJS.state.getEntityByElement(element, entities)
+
       if (!entity) continue
 
       variables.push(...entity.variables)
@@ -202,16 +201,10 @@ export default class Entity {
       MiniJS.state.removeEntity(entity)
     }
 
-    // Remove disposed elements
-    MiniJS.elements = MiniJS.elements.filter(
-      (entity) => !elements.includes(entity.element)
-    )
-
     // Clean up unused variables
-    const usedVariables = MiniJS.elements.reduce(
-      (acc, entity) => acc.concat(entity.variables),
-      []
-    )
+    const usedVariables = entities
+      .filter((entity) => !elements.includes(entity.element))
+      .reduce((acc, entity) => acc.concat(entity.variables), [])
 
     const unusedVariables = variables.filter(
       (variable) => !usedVariables.includes(variable)
diff --git a/lib/entity/events.js b/lib/entity/events.js
index d5b6c73..f8e4a87 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -36,7 +36,8 @@ export class Events {
     Events.validEvents = [...events, ...Events.CUSTOM_EVENTS]
   }
 
-  static applyEvents(entities) {
+  static applyEvents() {
+    const entities = Array.from(MiniJS.state.entities.values())
     entities.forEach((entity) => {
       entity.events.apply()
     })
diff --git a/lib/main.js b/lib/main.js
index 158bd44..ae5212f 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -8,7 +8,6 @@ let nativeProps = Object.getOwnPropertyNames(window)
 
 const MiniJS = (() => {
   let _debug = false
-  let _elements = []
   const state = new State()
 
   async function init() {
@@ -21,7 +20,7 @@ const MiniJS = (() => {
     Events.initValidEvents()
     _findElements()
     _initializeGlobalVariables()
-    Events.applyEvents(_elements)
+    Events.applyEvents()
     state.evaluate()
     _listenToDOMChanges()
     // Temporarily commented out - to be reviewed
@@ -38,17 +37,14 @@ const MiniJS = (() => {
           record.type === 'attributes' &&
           record.attributeName.startsWith(':')
         ) {
-          const entity = _elements.find(
-            (entity) => entity.element === record.target
-          )
-
+          const entity = state.getEntityByElement(record.target)
           // TODO: Add support for dynamically inserted events like :click
           entity?.attributes.evaluateAttribute(record.attributeName)
         }
 
         record.removedNodes.forEach((node) => {
           if (node.nodeType !== 1) return
-          const entity = _elements.find((entity) => entity.element === node)
+          const entity = state.getEntityByElement(node)
           entity?.dispose()
         })
 
@@ -69,7 +65,8 @@ const MiniJS = (() => {
   }
 
   function _initializeGlobalVariables() {
-    _elements.forEach((entity, index) => {
+    const entities = Array.from(state.entities.values())
+    entities.forEach((entity, index) => {
       entity.getVariables()
     })
   }
@@ -90,7 +87,8 @@ const MiniJS = (() => {
   }
 
   function _evaluateLoadEvents() {
-    _elements.forEach((entity) => {
+    const entities = Array.from(state.entities.values())
+    entities.forEach((entity) => {
       entity.events.evaluate(':load')
     })
   }
@@ -102,8 +100,7 @@ const MiniJS = (() => {
       const elem = elems[i]
       if (elem.nodeType !== 1) continue
 
-      const entity = new Entity(elem)
-      _elements.push(entity)
+      new Entity(elem)
     }
   }
 
@@ -129,12 +126,6 @@ const MiniJS = (() => {
     set debug(value) {
       _debug = !!value
     },
-    get elements() {
-      return _elements
-    },
-    set elements(newElements) {
-      _elements = newElements
-    },
     get window() {
       return state.window
     },
diff --git a/lib/state.js b/lib/state.js
index 9e1a9d7..61b9b81 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -21,9 +21,12 @@ export class State {
     this.window = this.create(window)
   }
 
+  getEntityByElement(el, entities = Array.from(this.entities.values())) {
+    return entities.find((entity) => entity.element === el)
+  }
+
   addEntity(entity) {
     this.entities.set(entity.id, entity)
-    MiniJS.elements.push(entity)
   }
 
   removeEntity(entity) {
@@ -49,8 +52,6 @@ export class State {
           value.filter((id) => id !== entity.id)
         )
     })
-
-    MiniJS.elements = MiniJS.elements.filter((el) => el.id !== entity.id)
   }
 
   hasDependency(variable) {

From fb955541c96ba0247bffba31d05c42c5e5d37621 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:19:41 +0800
Subject: [PATCH 20/29] feat: add :load event for setting el variable default
 values

---
 demo/observer.html   | 1 +
 lib/entity.js        | 1 +
 lib/entity/events.js | 1 +
 lib/main.js          | 3 +--
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/demo/observer.html b/demo/observer.html
index e324950..b0a8d9d 100644
--- a/demo/observer.html
+++ b/demo/observer.html
@@ -13,6 +13,7 @@
     <ol class="mt-8 list-decimal ml-4">
       <li>
         <button
+          :load="el.isHovered = true"
           :click="this.parentNode.parentNode.removeChild(this.parentNode)"
           :mouseenter="el.isHovered = true"
           :mouseleave="el.isHovered = false"
diff --git a/lib/entity.js b/lib/entity.js
index e72b48b..1e2366f 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -165,6 +165,7 @@ export default class Entity {
     this.getVariables()
     this.events.apply()
     await this.attributes.evaluate()
+    this.events.evaluate(':load')
   }
 
   initChildren() {
diff --git a/lib/entity/events.js b/lib/entity/events.js
index f8e4a87..552f7b6 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -80,6 +80,7 @@ export class Events {
 
     // Other Event Bindings
     Array.from(el.attributes).forEach((attr) => {
+      if (attr.name === ':load') return
       if (!Events.isValidEvent(attr.name)) return
 
       const isKeyEvent = Events.CUSTOM_KEY_EVENTS.some((keyType) =>
diff --git a/lib/main.js b/lib/main.js
index ae5212f..8f43d56 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -23,8 +23,7 @@ const MiniJS = (() => {
     Events.applyEvents()
     state.evaluate()
     _listenToDOMChanges()
-    // Temporarily commented out - to be reviewed
-    // _evaluateLoadEvents();
+    _evaluateLoadEvents()
     const endTime = performance.now()
     const executionTime = endTime - startTime
     console.log(`MiniJS took ${executionTime}ms to run.`)

From 8bec0b12726f15fb1c69a62beaf7cca040a4759f Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:24:11 +0800
Subject: [PATCH 21/29] refactor: relocate evaluate load events

---
 lib/entity.js        | 1 -
 lib/entity/events.js | 1 +
 lib/main.js          | 8 --------
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index 1e2366f..e72b48b 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -165,7 +165,6 @@ export default class Entity {
     this.getVariables()
     this.events.apply()
     await this.attributes.evaluate()
-    this.events.evaluate(':load')
   }
 
   initChildren() {
diff --git a/lib/entity/events.js b/lib/entity/events.js
index 552f7b6..5859dba 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -71,6 +71,7 @@ export class Events {
 
   apply() {
     this.dispose()
+    this.evaluate(':load')
 
     this.setChangeEvent()
     this.setClickoutEvent()
diff --git a/lib/main.js b/lib/main.js
index 8f43d56..e415396 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -23,7 +23,6 @@ const MiniJS = (() => {
     Events.applyEvents()
     state.evaluate()
     _listenToDOMChanges()
-    _evaluateLoadEvents()
     const endTime = performance.now()
     const executionTime = endTime - startTime
     console.log(`MiniJS took ${executionTime}ms to run.`)
@@ -85,13 +84,6 @@ const MiniJS = (() => {
     }
   }
 
-  function _evaluateLoadEvents() {
-    const entities = Array.from(state.entities.values())
-    entities.forEach((entity) => {
-      entity.events.evaluate(':load')
-    })
-  }
-
   function _findElements() {
     const elems = document.body.getElementsByTagName('*')
 

From 14c0392aff15a3c5fdb81bb985212835bdcd1253 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:45:50 +0800
Subject: [PATCH 22/29] fix: make helpers work with load events

---
 lib/entity/events.js | 11 +++++++++++
 lib/state.js         | 17 +++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/lib/entity/events.js b/lib/entity/events.js
index 5859dba..5f4bc02 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -228,6 +228,17 @@ export class Events {
   async evaluate(attr) {
     const value = this.base.element.getAttribute(attr)
     if (!value) return
+
+    if (attr === ':load') {
+      const elVariables = this.base.variables
+        .filter((v) => v.startsWith('el.') && v !== 'el')
+        .map((v) => v.replace('el.', ''))
+      const variables = this.base.variables.filter((v) => !v.startsWith('el.'))
+
+      MiniJS.state.attachVariableHelpers(variables)
+      MiniJS.state.attachVariableHelpers(elVariables, this.base.id)
+    }
+
     await this.base._interpret(value)
   }
 
diff --git a/lib/state.js b/lib/state.js
index 61b9b81..87ed511 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -108,6 +108,7 @@ export class State {
     const variable = `${entityID}.${property}`
     this.evaluateDependencies(variable)
     this.attachVariableHelpers([entityID])
+    this.attachVariableHelpers([property], entityID)
   }
 
   evaluate() {
@@ -138,13 +139,17 @@ export class State {
     this.attachVariableHelpers([variable])
   }
 
-  attachVariableHelpers(variables) {
+  attachVariableHelpers(variables, entityID = null) {
     variables.forEach((variable) => {
-      if (
-        Array.isArray(this.window[variable]) &&
-        !(this.window[variable] instanceof MiniArray)
-      ) {
-        this.window[variable] = new MiniArray(...this.window[variable])
+      const value =
+        entityID != null
+          ? this.window[entityID][variable]
+          : this.window[variable]
+
+      if (Array.isArray(value) && !(value instanceof MiniArray)) {
+        if (entityID != null)
+          this.window[entityID][variable] = new MiniArray(...value)
+        else this.window[variable] = new MiniArray(...value)
       }
     })
   }

From aa1edd7a0f2240006aba531f015bfd30c640d5ba Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:51:32 +0800
Subject: [PATCH 23/29] chore: add todo list in lexer

---
 lib/generators/lexer.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/lib/generators/lexer.js b/lib/generators/lexer.js
index a651ab4..a7582b6 100644
--- a/lib/generators/lexer.js
+++ b/lib/generators/lexer.js
@@ -31,6 +31,14 @@ function setMemberIdentifier(node, members = []) {
   }
 }
 
+/*
+ TODO
+ - being read as undefined.toLocalTimeString()
+  :click="const time = new Date().toLocaleTimeString())"
+- add support for:
+  :click="const [a, b] = [1, 2]"
+*/
+
 export class Lexer {
   static debug = false
   static ID_TYPE = {

From fd84d4e4b0778a07b8bad022c68820a4747d8366 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:51:41 +0800
Subject: [PATCH 24/29] docs: update info for variables

---
 readme.md | 47 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/readme.md b/readme.md
index 23f8ef8..40511e0 100644
--- a/readme.md
+++ b/readme.md
@@ -23,6 +23,8 @@ To setup MiniJS in your local machine, you can do the following:
 
 `State` are variables that changes the UI or the DOM that uses it when they get updated.
 
+Note: Only non-nested objects are supported for reactive state.
+
 ### Setting Initial State
 
 You can set the initial state of the variables using vanilla JS:
@@ -178,12 +180,29 @@ These are the events added in by MiniJS:
 
 ## Statements
 
-- `:each` - loop through an array and render a template for each item
+- `:each` (experimental!) - loop through an array and render a template for each item
+  - do not use in production
+
+## Variables
+
+### Variables saved in Local Storage
 
-## Variable
+Appending `$` to the variable name will save the variable in the local storage:
+
+```html
+<script type="text/javascript">
+  $firstName = 'Tony'
+</script>
+
+<input type="text" :change="$firstName = this.value" />
+```
+
+Note: Currently, this is only available for globally declared variables.
 
 ### Variable Scoping
 
+#### Global Variables
+
 Whenever you create a variable, it will automatically be added to the global scope. This means that you can access it anywhere in your code.
 
 ```html
@@ -194,23 +213,37 @@ Whenever you create a variable, it will automatically be added to the global sco
 <button :click="console.log(firstName)">Click Me</button>
 ```
 
-If you want to create a local variable, instead of using `const`, `var`, and `let` variable declarations, you need use `el.`:
+#### Local Variables
+
+To use variables only in a current event, you can create a local variable using `const`, and `let`:
+
+```html
+<button
+  :click="const time = new Date();
+          window.alert(time.toLocaleTimeString())"
+>
+  Click Me
+</button>
+```
+
+If you want to use the variable across the element's attributes and events, you can use `el.`:
 
 ```html
 <script>
   items = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
-  selectedItem = null
 </script>
 
 <button
-  :click="el.lastItem = items.pop();
-                selectedItem = `Last Item: ${el.lastItem}`"
-  :text="selectedItem"
+  :load="el.selectedItem = items.pop()"
+  :click="el.selectedItem = items.pop()"
+  :text="`Last Item: ${el.selectedItem}`"
 >
   Click Me
 </button>
 ```
 
+Like the example above, `:load` can be used to set the initial value of the variable.
+
 ### Variable Methods
 
 MiniJS added some commonly-used custom methods to variables.

From e35f0cfbcc6623910adccdf7e0e7e914936b5c2d Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Tue, 13 Feb 2024 02:18:44 +0800
Subject: [PATCH 25/29] feat: add :parent directive

---
 index.html    | 17 +++++++-----
 lib/entity.js | 24 ++++++++++++++---
 lib/state.js  |  4 +++
 readme.md     | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 108 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 85e6775..4bac795 100644
--- a/index.html
+++ b/index.html
@@ -1505,13 +1505,13 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
           grid-template-rows: 0fr 1fr;
         }
       </style>
-      <div class="accordion">
+      <div class="accordion" :parent>
         <section
           class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
-          :class="activeSection =='about' ? 'active' : ''"
+          :class="parent.activeSection =='about' ? 'active' : ''"
         >
           <a
-            :click="activeSection='about'"
+            :click="parent.activeSection='about'"
             class="cursor-pointer font-bold p-4"
           >
             About Us
@@ -1526,10 +1526,10 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
 
         <section
           class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
-          :class="activeSection =='contact' ? 'active' : ''"
+          :class="parent.activeSection =='contact' ? 'active' : ''"
         >
           <a
-            :click="activeSection='contact'"
+            :click="parent.activeSection='contact'"
             class="cursor-pointer font-bold p-4"
           >
             Contact Us
@@ -1544,9 +1544,12 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
 
         <section
           class="grid transition-all border-gray-300 border rounded hover:bg-gray-100"
-          :class="activeSection =='team' ? 'active' : ''"
+          :class="parent.activeSection =='team' ? 'active' : ''"
         >
-          <a :click="activeSection='team'" class="cursor-pointer font-bold p-4">
+          <a
+            :click="parent.activeSection='team'"
+            class="cursor-pointer font-bold p-4"
+          >
             Team 3
           </a>
           <div class="overflow-hidden">
diff --git a/lib/entity.js b/lib/entity.js
index e72b48b..b9d0f4b 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -2,6 +2,7 @@ import { Interpreter, ClassInterpreter } from './generators/interpreter'
 import { Lexer } from './generators/lexer'
 import { Events } from './entity/events'
 import { Attributes } from './entity/attributes'
+import { State } from './state'
 
 export default class Entity {
   constructor(el) {
@@ -15,6 +16,8 @@ export default class Entity {
     MiniJS.state.addEntity(this)
 
     if (MiniJS.debug) this.element.dataset.entityId = this.id
+
+    if (this.element.hasAttribute(':parent')) this.setAsParent()
   }
 
   setAsParent() {
@@ -93,11 +96,9 @@ export default class Entity {
     this.variables = [...new Set(this.variables)]
 
     this.variables.forEach((variable) => {
-      if (variable.startsWith('el.') || variable === 'el') {
+      if (State.isElState(variable)) {
         this.setAsParent()
 
-        if (!this.parent) this.parent = this.getParent()
-
         if (window[this.id] == null) {
           window[this.id] = MiniJS.state.create({}, this.id)
         }
@@ -108,6 +109,19 @@ export default class Entity {
           const [_, varName] = variable.split('.')
           MiniJS.state.addEntityVariable(this.id, varName, this.id)
         }
+      } else if (State.isParentState(variable)) {
+        if (!this.parent) this.parent = this.getParent()
+
+        if (window[this.parent.id] == null) {
+          window[this.parent.id] = MiniJS.state.create({}, this.parent.id)
+        }
+
+        MiniJS.state.addVariable(this.parent.id, this.id)
+
+        if (variable !== 'parent') {
+          const [_, varName] = variable.split('.')
+          MiniJS.state.addEntityVariable(this.parent.id, varName, this.id)
+        }
       } else if (typeof window[variable] === 'function') {
         this.variables.splice(this.variables.indexOf(variable), 1)
       } else {
@@ -130,8 +144,10 @@ export default class Entity {
       el: `proxyWindow['${this.id}']`,
     }
 
+    if (this.parent) ids.parent = `proxyWindow['${this.parent.id}']`
+
     this.variables.forEach((variable) => {
-      if (variable.startsWith('el.') || variable === 'el') return
+      if (State.isElState(variable) || State.isParentState(variable)) return
 
       ids[variable] = `proxyWindow-${variable}`
     })
diff --git a/lib/state.js b/lib/state.js
index 87ed511..e671d75 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -9,6 +9,10 @@ export class State {
     return variable.startsWith('el.') || variable === 'el'
   }
 
+  static isParentState(variable) {
+    return variable.startsWith('parent.') || variable === 'parent'
+  }
+
   constructor() {
     this.window = null
 
diff --git a/readme.md b/readme.md
index 40511e0..84bfaf3 100644
--- a/readme.md
+++ b/readme.md
@@ -226,7 +226,9 @@ To use variables only in a current event, you can create a local variable using
 </button>
 ```
 
-If you want to use the variable across the element's attributes and events, you can use `el.`:
+### Element Variables
+
+If you want to use the variable across an element's attributes and events, you can use `el.`:
 
 ```html
 <script>
@@ -244,6 +246,77 @@ If you want to use the variable across the element's attributes and events, you
 
 Like the example above, `:load` can be used to set the initial value of the variable.
 
+### Parent Element Variables
+
+Adding a `:parent` attribute to an element will allow you to access its variables from its children using `parent.` variables.
+
+A children's `parent.` variable is the same as the parent's `el.` variable.
+
+```html
+<div id="accordion" class="accordion" :parent>
+  <!-- Parent Element -->
+
+  <!-- Children Elements -->
+  <!-- parent.variable == #accordion's el.variable -->
+  <section
+    class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
+  >
+    <button
+      :click="parent.activeSection = 'about'"
+      class="cursor-pointer font-bold p-4"
+    >
+      About Us
+    </button>
+    <div
+      class="p-4 pt-2 overflow-hidden hidden"
+      :class="parent.activeSection =='about' ? 'block' : 'hidden'"
+    >
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod.
+    </div>
+  </section>
+
+  <section
+    class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
+  >
+    <button
+      :click="parent.activeSection = 'contact'"
+      class="cursor-pointer font-bold p-4"
+    >
+      Contact Us
+    </button>
+    <div
+      class="p-4 pt-2 overflow-hidden"
+      :class="parent.activeSection =='contact' ? 'block' : 'hidden'"
+    >
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod.
+    </div>
+  </section>
+
+  <section
+    class="grid transition-all border-gray-300 border rounded hover:bg-gray-100"
+    :class="parent.activeSection =='team' ? 'active' : ''"
+  >
+    <button
+      :click="parent.activeSection = 'team'"
+      class="cursor-pointer font-bold p-4"
+    >
+      Team 3
+    </button>
+    <div
+      class="p-4 pt-2 overflow-hidden"
+      :class="parent.activeSection =='team' ? 'block' : 'hidden'"
+    >
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod.
+    </div>
+  </section>
+</div>
+```
+
+You
+
 ### Variable Methods
 
 MiniJS added some commonly-used custom methods to variables.

From 789f5c1d1a86b80f42952bd6b80c88ca41a29f87 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Wed, 14 Feb 2024 11:34:34 +0800
Subject: [PATCH 26/29] fix: cleanup entity variable

---
 lib/state.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/state.js b/lib/state.js
index e671d75..ff88777 100644
--- a/lib/state.js
+++ b/lib/state.js
@@ -56,6 +56,8 @@ export class State {
           value.filter((id) => id !== entity.id)
         )
     })
+
+    delete window[entity.id]
   }
 
   hasDependency(variable) {

From d4ee57553d50dd448736b8afbbefc5baccdc5cc0 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:04:19 +0800
Subject: [PATCH 27/29] fix: prevent re-evaluate of :load events

---
 lib/entity/events.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/entity/events.js b/lib/entity/events.js
index 5f4bc02..10b4244 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -20,6 +20,7 @@ export class Events {
     ':change',
     ':clickout',
     ':press',
+    ':load',
     ...Events.CUSTOM_KEY_EVENTS,
   ]
 

From b216062113ab92a60ea02661f1b397b82d412484 Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:05:00 +0800
Subject: [PATCH 28/29] docs: remove hanging text

---
 readme.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/readme.md b/readme.md
index 84bfaf3..edfe422 100644
--- a/readme.md
+++ b/readme.md
@@ -315,8 +315,6 @@ A children's `parent.` variable is the same as the parent's `el.` variable.
 </div>
 ```
 
-You
-
 ### Variable Methods
 
 MiniJS added some commonly-used custom methods to variables.

From 0008af8a653d8ca8cf9bf1b75f02a98233fe6b6b Mon Sep 17 00:00:00 2001
From: Joeylene <23741509+jorenrui@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:13:21 +0800
Subject: [PATCH 29/29] feat: add evaluate :parent attribute

---
 lib/entity.js            |  2 +-
 lib/entity/attributes.js | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/lib/entity.js b/lib/entity.js
index b9d0f4b..48f05d8 100644
--- a/lib/entity.js
+++ b/lib/entity.js
@@ -17,7 +17,7 @@ export default class Entity {
 
     if (MiniJS.debug) this.element.dataset.entityId = this.id
 
-    if (this.element.hasAttribute(':parent')) this.setAsParent()
+    this.attributes.evaluateParent()
   }
 
   setAsParent() {
diff --git a/lib/entity/attributes.js b/lib/entity/attributes.js
index f42931f..6ef9d13 100644
--- a/lib/entity/attributes.js
+++ b/lib/entity/attributes.js
@@ -2,7 +2,14 @@ import { Events } from './events'
 import { escapeHTML } from '../helpers/sanitize'
 
 export class Attributes {
-  static CUSTOM_ATTRIBUTES = [':class', ':text', ':value', ':checked', ':each']
+  static CUSTOM_ATTRIBUTES = [
+    ':class',
+    ':text',
+    ':value',
+    ':checked',
+    ':each',
+    ':parent',
+  ]
   static FORBIDDEN_ATTRIBUTES = [':innerHTML', ':innerText']
 
   static isValidAttribute(attribute, element) {
@@ -52,7 +59,8 @@ export class Attributes {
 
   async evaluateAttribute(attr) {
     if (!Attributes.isValidAttribute(attr, this.base.element)) return
-    if (attr === ':class') await this.evaluateClass()
+    if (attr === ':parent') this.evaluateParent()
+    else if (attr === ':class') await this.evaluateClass()
     else if (attr === ':text') await this.evaluateText()
     else if ([':value', ':checked'].includes(attr)) await this.evaluateValue()
     else if (attr === ':each') await this.evaluateEach()
@@ -63,6 +71,12 @@ export class Attributes {
     }
   }
 
+  evaluateParent() {
+    if (!this.base.element.hasAttribute(':parent')) return
+    if (this.base.isParent()) return
+    this.base.setAsParent()
+  }
+
   async evaluateClass() {
     const expr = this.base.element.getAttribute(':class')
     if (!expr) return