@alpinejs/docs 3.15.1 → 3.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alpinejs/docs",
3
- "version": "3.15.1",
3
+ "version": "3.15.2",
4
4
  "description": "The documentation for Alpine",
5
5
  "author": "Caleb Porzio",
6
6
  "license": "MIT"
@@ -106,31 +106,23 @@ The CSP build supports most JavaScript expressions you'd want to use in Alpine:
106
106
  ### Method Calls
107
107
  ```alpine
108
108
  <!-- ✅ These work -->
109
- <div x-data="{ items: ['a', 'b'], getMessage: () => 'Hello' }">
110
- <span x-text="getMessage()"></span>
109
+ <div x-data="{ items: ['a', 'b'] }">
111
110
  <button x-on:click="items.push('c')">Add Item</button>
112
111
  </div>
113
112
  ```
114
113
 
115
- ### Global Variables and Functions
116
- ```alpine
117
- <!-- ✅ These work -->
118
- <div x-data="{ count: 42 }">
119
- <button x-on:click="console.log('Count is:', count)">Log Count</button>
120
- <span x-text="Math.max(count, 100)"></span>
121
- <span x-text="parseInt('123') + count"></span>
122
- <span x-text="JSON.stringify({ value: count })"></span>
123
- </div>
124
- ```
125
-
126
114
  <a name="whats-not-supported"></a>
127
115
  ## What's Not Supported
128
116
 
129
- Some advanced JavaScript features aren't supported:
117
+ Some advanced and potentially dangerous JavaScript features aren't supported:
130
118
 
119
+ ### Complex Expressions
131
120
  ```alpine
132
121
  <!-- ❌ These don't work -->
133
- <div x-data>
122
+ <div x-data="{ user: { name: '' } }">
123
+ <!-- Property assignments -->
124
+ <button x-on:click="user.name = 'John'">Bad</button>
125
+
134
126
  <!-- Arrow functions -->
135
127
  <button x-on:click="() => console.log('hi')">Bad</button>
136
128
 
@@ -145,6 +137,28 @@ Some advanced JavaScript features aren't supported:
145
137
  </div>
146
138
  ```
147
139
 
140
+ ### Global Variables and Functions
141
+ ```alpine
142
+ <!-- ❌ These don't work -->
143
+ <div x-data>
144
+ <button x-on:click="console.log('hi')"></button>
145
+ <span x-text="document.title"></span>
146
+ <span x-text="window.innerWidth"></span>
147
+ <span x-text="Math.max(count, 100)"></span>
148
+ <span x-text="parseInt('123') + count"></span>
149
+ <span x-text="JSON.stringify({ value: count })"></span>
150
+ </div>
151
+ ```
152
+
153
+ ### HTML Injection
154
+ ```alpine
155
+ <!-- ❌ These don't work -->
156
+ <div x-data="{ message: 'Hello <span>World</span>' }">
157
+ <span x-html="message"></span>
158
+ <span x-init="$el.insertAdjacentHTML('beforeend', message)"></span>
159
+ </div>
160
+ ```
161
+
148
162
  <a name="when-to-extract-logic"></a>
149
163
  ## When to Extract Logic
150
164
 
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
33
33
  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.
34
34
 
35
35
  ```alpine
36
- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.1/dist/cdn.min.js"></script>
36
+ <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.2/dist/cdn.min.js"></script>
37
37
  ```
38
38
 
39
39
  That's it! Alpine is now available for use inside your page.