@alpinejs/docs 3.15.0 → 3.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.15.0",
+    "version": "3.15.2",
     "description": "The documentation for Alpine",
     "author": "Caleb Porzio",
     "license": "MIT"

package/src/en/advanced/csp.md

@@ -106,31 +106,23 @@ The CSP build supports most JavaScript expressions you'd want to use in Alpine:
 ### Method Calls
 ```alpine
 <!-- ✅ These work -->
-<div x-data="{ items: ['a', 'b'], getMessage: () => 'Hello' }">
-    <span x-text="getMessage()"></span>
+<div x-data="{ items: ['a', 'b'] }">
     <button x-on:click="items.push('c')">Add Item</button>
 </div>
 ```
 
-### Global Variables and Functions
-```alpine
-<!-- ✅ These work -->
-<div x-data="{ count: 42 }">
-    <button x-on:click="console.log('Count is:', count)">Log Count</button>
-    <span x-text="Math.max(count, 100)"></span>
-    <span x-text="parseInt('123') + count"></span>
-    <span x-text="JSON.stringify({ value: count })"></span>
-</div>
-```
-
 <a name="whats-not-supported"></a>
 ## What's Not Supported
 
-Some advanced JavaScript features aren't supported:
+Some advanced and potentially dangerous JavaScript features aren't supported:
 
+### Complex Expressions
 ```alpine
 <!-- ❌ These don't work -->
-<div x-data>
+<div x-data="{ user: { name: '' } }">
+    <!-- Property assignments -->
+    <button x-on:click="user.name = 'John'">Bad</button>
+
     <!-- Arrow functions -->
     <button x-on:click="() => console.log('hi')">Bad</button>
 
@@ -145,6 +137,28 @@ Some advanced JavaScript features aren't supported:
 </div>
 ```
 
+### Global Variables and Functions
+```alpine
+<!-- ❌ These don't work -->
+<div x-data>
+    <button x-on:click="console.log('hi')"></button>
+    <span x-text="document.title"></span>
+    <span x-text="window.innerWidth"></span>
+    <span x-text="Math.max(count, 100)"></span>
+    <span x-text="parseInt('123') + count"></span>
+    <span x-text="JSON.stringify({ value: count })"></span>
+</div>
+```
+
+### HTML Injection
+```alpine
+<!-- ❌ These don't work -->
+<div x-data="{ message: 'Hello <span>World</span>' }">
+    <span x-html="message"></span>
+    <span x-init="$el.insertAdjacentHTML('beforeend', message)"></span>
+</div>
+```
+
 <a name="when-to-extract-logic"></a>
 ## When to Extract Logic
 

package/src/en/essentials/installation.md

@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
 Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
 
 ```alpine
-<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.0/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.2/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/plugins/sort.md

@@ -175,6 +175,39 @@ By default, each `x-sort:item` element is draggable by clicking and dragging any
 
 As you can see in the above example, the hyphen "-" is draggable, but the item text ("foo") is not.
 
+<a name="ignoring-elements"></a>
+## Ignoring elements
+
+Sometimes you want to prevent certain elements within a sortable item from initiating a drag operation. This is especially useful when you have interactive elements like buttons, dropdowns, or links that users should be able to click without accidentally dragging the sortable item.
+
+You can use the `x-sort:ignore` directive to mark elements that should not trigger dragging:
+
+```alpine
+<ul x-sort>
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+
+    <li x-sort:item>
+        <!-- ... -->
+
+        <button x-sort:ignore>Edit</button>
+    </li>
+</ul>
+```
+
+In the above example, users can click and drag the item itself, but clicking on the "Edit" button will not initiate a drag operation.
+
+> **Note:** Elements with `x-sort:ignore` will still function normally (buttons can be clicked, inputs can be focused, etc.) - they are only excluded from drag operations.
+
 <a name="ghost-elements"></a>
 ## Ghost elements