2.7.4 fix: bugs due to nested getter evaluation

Closes #462 #463

Author: HugoDF

packages/browser-extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Alpine.js devtools - Early Access",
   "description": "DevTools extension for debugging Alpine.js applications.",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "manifest_version": 3,
   "icons": {
     "16": "icons/16.png",

packages/browser-extension/nested-getters.html

@@ -26,6 +26,13 @@ <h2 x-text="title"></h2>
       <p><button @click="onClick" data-testid="click-target">Click me</button></p>
     </div>
 
+    <section x-data="page">
+      <h1 x-text="titleDisplay"></h1>
+      <div x-data="myData">
+        <p x-text="textDisplay"></p>
+      </div>
+    </section>
+
     <script>
       document.addEventListener('alpine:initializing', () => {
         Alpine.data('parent', () => ({
@@ -47,6 +54,22 @@ <h2 x-text="title"></h2>
             return this.messages.join(', ');
           },
         }));
+
+        Alpine.data('page', () => ({
+          title: 'test',
+
+          get titleDisplay() {
+            return this.title.toUpperCase();
+          },
+        }));
+
+        Alpine.data('myData', () => ({
+          text: 'hello world',
+
+          get textDisplay() {
+            return this.text + '!';
+          },
+        }));
       });
     </script>
   </body>

packages/browser-extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browser-extension",
   "private": true,
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "Alpine.js devtools with Chrome manifest v3 compatibility",
   "type": "module",
   "scripts": {

packages/browser-extension/src/scripts/backend.js

@@ -120,7 +120,7 @@ export function init(forceStart = false) {
      */
     getAlpineDataInstance(node, config = { getRawInstance: true }) {
       if (this.isV3) {
-        if (config.getRawInstance || node._x_dataStack.length === 1) {
+        if (config.getRawInstance || node._x_dataStack?.length === 1) {
           return node._x_dataStack?.[0];
         }
         // For accessing the data contents, we need to inherit scoped data.
@@ -338,6 +338,9 @@ export function init(forceStart = false) {
                     // But ensure Alpine recomputes this effect if any of
                     // the parents change as they could be used in the getter
                     Object.keys(stack).forEach((k) => {
+                      if (recursionDepth >= 10) {
+                        return;
+                      }
                       visit(stack, k);
                     });
                   }