Merge branch 'main' of github.com:alpinejs/alpine into main

packages/docs/src/en/advanced/csp.md

@@ -5,7 +5,7 @@ title: CSP
 
 # CSP (Content-Security Policy)
 
-In for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions, for example `x-on:click="console.log()"`, it needs to rely on utilities that violate the "unsafe-eval" content security policy.
+In order for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions, for example `x-on:click="console.log()"`, it needs to rely on utilities that violate the "unsafe-eval" content security policy.
 
 > Under the hood, Alpine doesn't actually use eval() itself because it's slow and problematic. Instead it uses Function declarations, which are much better, but still violate "unsafe-eval".
 
@@ -14,7 +14,7 @@ In order to accommodate environments where this CSP is necessary, Alpine offers
 <a name="installation"></a>
 ## Installation
 
-Like all Alpine extensions, you can use this include this either via `<script>` tag or module import:
+Like all Alpine extensions, you can include this either via `<script>` tag or module import:
 
 <a name="script-tag"></a>
 ### Script tag
@@ -38,9 +38,9 @@ window.Alpine.start()
 <a name="restrictions"></a>
 ## Restrictions
 
-Because Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually.
+Since Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually.
 
-Because of this limitation, you must `Alpine.data` to register your `x-data` objects, and must reference properties and methods from it by key only.
+Due to this limitation, you must use `Alpine.data` to register your `x-data` objects, and must reference properties and methods from it by key only.
 
 For example, an inline component like this will not work.
 

packages/docs/src/en/advanced/extending.md

@@ -168,7 +168,7 @@ Let's walk through the above code, line by line.
 let getThingToLog = evaluateLater(expression)
 ```
 
-Here, instead of immediately evaluating `message` and retreiving the result, we will convert the string expression ("message") into an actual JavaScript function that we can run at any time. If you're going to evaluate a JavaScript expression more than once, it is highly recommended to first generate a JavaScript function and use that rather than calling `evaluate()` directly. The reason being that the process to interpret a plain string as a JavaScript function is expensive and should be avoided when unnecessary.
+Here, instead of immediately evaluating `message` and retrieving the result, we will convert the string expression ("message") into an actual JavaScript function that we can run at any time. If you're going to evaluate a JavaScript expression more than once, it is highly recommended to first generate a JavaScript function and use that rather than calling `evaluate()` directly. The reason being that the process to interpret a plain string as a JavaScript function is expensive and should be avoided when unnecessary.
 
 ```js
 effect(() => {

packages/docs/src/en/advanced/reactivity.md

@@ -45,7 +45,7 @@ console.log(reactiveData.count) // 2
 
 What you see here is that because `reactiveData` is a thin wrapper around `data`, any attempts to get or set a property will behave exactly as if you had interacted with `data` directly.
 
-The main difference here is that any time you modify or retreive (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.
+The main difference here is that any time you modify or retrieve (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.
 
 `Alpine.reactive` is only the first half of the story. `Alpine.effect` is the other half, let's dig in.
 

packages/docs/src/en/directives/for.md

@@ -33,7 +33,7 @@ There are two rules worth noting about `x-for`:
 <a name="keys"></a>
 ## Keys
 
-It is important to specificy keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
+It is important to specify keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
 
 ```html
 <ul x-data="{ colors: [

packages/docs/src/en/directives/model.md

@@ -238,7 +238,7 @@ Color: <span x-text="color"></span>
     <option>Yellow</option>
 </select>
 
-Colors: <span x-text="colors"></span>
+Colors: <span x-text="color"></span>
 ```
 
 <!-- START_VERBATIM -->
@@ -268,6 +268,20 @@ Colors: <span x-text="colors"></span>
 Color: <span x-text="color"></span>
 ```
 
+<!-- START_VERBATIM -->
+<div class="demo">
+    <div x-data="{ color: '' }">
+        <select x-model="color">
+            <template x-for="color in ['Red', 'Orange', 'Yellow']">
+                <option x-text="color"></option>
+            </template>
+        </select>
+
+        <div class="pt-4">Color: <span x-text="color"></span></div>
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
 <a name="modifiers"></a>
 ## Modifiers
 

packages/docs/src/en/essentials/lifecycle.md

@@ -47,7 +47,7 @@ As you can see above, `$watch` allows you to hook into data changes using a dot-
 <a name="x-effect"></a>
 ### `x-effect`
 
-`x-effect` uses the same mechanism under the hood as `x-watch` but has very different usage.
+`x-effect` uses the same mechanism under the hood as `$watch` but has very different usage.
 
 Instead of specifying which data key you wish to watch, `x-effect` will call the provided code and intelligently look for any Alpine data used within it. Now when one of those pieces of data changes, the `x-effect` expression will be re-run.
 

packages/docs/src/en/magics/dispatch.md

@@ -86,7 +86,7 @@ You can also take advantage of the previous technique to make your components ta
 <div x-data>
     <button @click="$dispatch('set-title', 'Hello World!')">...</button>
 </div>
-<!-- When clicked, will console.log "Hello World!". -->
+<!-- When clicked, the content of the h1 will set to "Hello World!". -->
 ```
 
 <a name="dispatching-to-x-model"></a>

packages/docs/src/en/magics/el.md

@@ -9,7 +9,7 @@ title: el
 `$el` is a magic property that can be used to retrieve the current DOM node.
 
 ```html
-<button @click="$el.innerHTML = 'foo'">Replace me with "foo"</button>
+<button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>
 ```
 
 <!-- START_VERBATIM -->