feat: evaluate :group attr on load

Author: jorenrui

index.html

@@ -1471,7 +1471,7 @@ <h3 class="font-bold font-mono">Multi Select:</h3>
           grid-template-rows: 0fr 1fr;
         }
       </style>
-      <div class="accordion" :group>
+      <div class="accordion" :group="activeSection = 'about'">
         <section
           class="grid transition-all border-gray-300 border border-b-0 rounded hover:bg-gray-100"
           :class="group.activeSection == 'about' ? 'active' : ''"

lib/entity.js

@@ -14,6 +14,7 @@ export class Entity {
     this.dynamicScripts = dynamicScripts
 
     this.variables = []
+    this.groupVariables = []
     this.id = this.generateEntityUUID()
 
     this.state = {}
@@ -23,10 +24,13 @@ export class Entity {
 
     if (this.base.debug) this.element.dataset.entityId = this.id
 
-    this.attributes.evaluateGroup()
+    this.setAsGroup()
   }
 
   setAsGroup() {
+    if (!this.element.hasAttribute(':group')) return
+    if (this.isGroup()) return
+
     this.uuid = this.id
     this.element.dataset['mini.uuid'] = this.uuid
   }
@@ -117,7 +121,8 @@ export class Entity {
         return !(variable in this.state)
       })
 
-      this.variables.push(...identifiers)
+      if (name === ':group') this.groupVariables.push(...identifiers)
+      else this.variables.push(...identifiers)
     })
   }
 

lib/entity/attributes.js

@@ -64,12 +64,15 @@ export class Attributes {
     const ids = {
       $: 'document-querySelector',
       el: `proxyWindow['${this.base.id}${State.DISABLE_RE_RENDER_KEY}']`,
+      group: this.base.group
+        ? `proxyWindow['${this.base.group.id}${
+            !options.isGroup ? State.DISABLE_RE_RENDER_KEY : ''
+          }']`
+        : undefined,
+      ...(options.ids || {}),
       // "this" is set under the interpreter as bind context
     }
 
-    if (this.base.group)
-      ids.group = `proxyWindow['${this.base.group.id}${State.DISABLE_RE_RENDER_KEY}']`
-
     engine.replace(ids)
 
     // window variables are used instead of proxy window
@@ -93,7 +96,7 @@ export class Attributes {
 
   async evaluateAttribute(attr) {
     if (!Attributes.isValidAttribute(attr, this.base.element)) return
-    if (attr === ':group') this.evaluateGroup()
+    if (attr === ':group') await this.evaluateGroup()
     else if (attr === ':class') await this.evaluateClass()
     else if (attr === ':text') await this.evaluateText()
     else if (attr === ':value') await this.evaluateValue()
@@ -131,10 +134,31 @@ export class Attributes {
     })
   }
 
-  evaluateGroup() {
-    if (!this.base.element.hasAttribute(':group')) return
-    if (this.base.isGroup()) return
-    this.base.setAsGroup()
+  /*
+    :group is a special attribute that acts as an :load event
+    when it has a given expr. Unlike other attributes, state updates
+    inside :group will trigger re-renders.
+
+    NOTE: This should NOT be used in this.evaluate() because it will
+    trigger an infinite loop.
+  */
+  async evaluateGroup() {
+    if (!this.base.isGroup()) return
+
+    const expr = this.base.element.getAttribute(':group')
+    if (!expr) return
+
+    const ids = {}
+
+    this.base.groupVariables.forEach((variable) => {
+      ids[variable] = `proxyWindow['${this.base.id}'].${variable}`
+    })
+
+    try {
+      await this._interpret(expr, { isGroup: true, ids })
+    } catch (error) {
+      this._handleError(':group', expr, error)
+    }
   }
 
   async evaluateClass() {

lib/state.js

@@ -196,6 +196,7 @@ export class State {
 
   evaluate() {
     Array.from(this.entities.values()).forEach((entity) => {
+      entity.attributes.evaluateAttribute(':group')
       entity.attributes.evaluate()
     })