@alpinejs/docs 3.15.1 → 3.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.15.1",
+    "version": "3.15.3",
     "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/directives/on.md

@@ -113,8 +113,9 @@ Here's an example of a button that changes behaviour when the `Shift` key is hel
 
 ```alpine
 <button type="button"
+    x-data="{ message: 'select' }"
     @click="message = 'selected'"
-    @click.shift="message = 'added to selection'">
+    @click.shift="message = 'added to selection'"
     @mousemove.shift="message = 'add to selection'"
     @mouseout="message = 'select'"
     x-text="message"></button>
@@ -124,6 +125,7 @@ Here's an example of a button that changes behaviour when the `Shift` key is hel
 <div class="demo">
     <div x-data="{ message: '' }">
         <button type="button"
+            x-data="{ message: 'select' }"
             @click="message = 'selected'"
             @click.shift="message = 'added to selection'"
             @mousemove.shift="message = 'add to selection'"

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.1/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.3/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.