feat: add :parent directive

Author: jorenrui

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">

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}`
     })

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
 

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.