fix(handle-undefined-datastack) (#299)

* fix(avoid-crash-on-undefined-datastack)

* add example + log warning in devmode, can't reproduce

Author: HugoDF

packages/shell-chrome/src/backend.js

@@ -70,13 +70,19 @@ function init() {
 
         getAlpineDataInstance(node) {
             if (this.isV3) {
-                return node._x_dataStack[0]
+                return node._x_dataStack?.[0]
             }
             return node.__x
         }
 
         getReadOnlyAlpineData(node) {
             const alpineDataInstance = this.getAlpineDataInstance(node)
+            if (!alpineDataInstance) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn('element has no dataStack', node)
+                }
+                return
+            }
             if (this.isV3) {
                 // in v3 magics are registered on the data stack
                 return Object.fromEntries(Object.entries(alpineDataInstance).filter(([key]) => !key.startsWith('$')))
@@ -276,11 +282,15 @@ function init() {
 
         sendComponentData(componentId, componentRoot) {
             const componentData = this.getReadOnlyAlpineData(componentRoot)
+
+            if (!componentData) return
+
             const data = Object.entries(componentData).reduce((acc, [key, value]) => {
                 acc[key] = serializeDataProperty(value)
 
                 return acc
             }, {})
+
             this._postMessage({
                 type: BACKEND_TO_PANEL_MESSAGES.SET_DATA,
                 componentId,

packages/simulator/v3.html

@@ -121,5 +121,17 @@
         <div>
             <a data-testid="navigation-target" href="/navigation-target.html">Go to next page</a>
         </div>
+
+        <h3>Manual test</h3>
+        <p>
+            Can't reproduce
+            <a href="https://github.com/alpinejs/alpine/discussions/1952"
+                >https://github.com/alpinejs/alpine/discussions/1952</a
+            >
+        </p>
+        <div x-data @focus-input.window="$refs.searchInput.focus()">
+            <input x-ref="searchInput" />
+        </div>
+        <button onclick="document.dispatchEvent(new CustomEvent('focus-input'))">Click</button>
     </body>
 </html>