wip

packages/docs/package.json

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

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

@@ -20,7 +20,7 @@ function getLabel() {
 
 Because `getLabel` is synchronous, everything works as expected.
 
-Now let's pretend that `getLabel` makes a network request to retrieve the label and can't return one instantaniously (asynchronous). By making `getLabel` an async function, you can call it from Alpine using JavaScript's `await` syntax.
+Now let's pretend that `getLabel` makes a network request to retrieve the label and can't return one instantaneously (asynchronous). By making `getLabel` an async function, you can call it from Alpine using JavaScript's `await` syntax.
 
 ```js
 async function getLabel() {

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

@@ -9,7 +9,7 @@ In for Alpine to be able to execute plain strings from HTML attributes as JavaSc
 
 > 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".
 
-In order to accomodate environments where this CSP is necessary, Alpine offers an alternate build that doesn't violate "unsafe-eval", but has a more restrictive syntax.
+In order to accommodate environments where this CSP is necessary, Alpine offers an alternate build that doesn't violate "unsafe-eval", but has a more restrictive syntax.
 
 <a name="installation"></a>
 ## Installation

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

@@ -11,7 +11,7 @@ Alpine has a very open codebase that allows for extension in a number of ways. I
 ## Lifecycle concerns
 Before we dive into each individual API, let's first talk about where in your codebase you should consume these APIs.
 
-Because these APIs have an impact on how Alpine intiailizes the page, they must be registered AFTER Alpine is downloaded and available on the page, but BEFORE it has initialized the page itself.
+Because these APIs have an impact on how Alpine initializes the page, they must be registered AFTER Alpine is downloaded and available on the page, but BEFORE it has initialized the page itself.
 
 There are two different techniques depending on if you are importing Alpine into a bundle, or including it directly via a `<script>` tag. Let's look at them both:
 

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

@@ -5,7 +5,7 @@ title: Reactivity
 
 # Reactivity
 
-Alpine is "reactive" in the sense that when you change a peice of data, everything that depends on that data "reacts" automatically to that change.
+Alpine is "reactive" in the sense that when you change a piece of data, everything that depends on that data "reacts" automatically to that change.
 
 Every bit of reactivity that takes place in Alpine, happens because of two very important reactive functions in Alpine's core: `Alpine.reactive()`, and `Alpine.effect()`.
 
@@ -62,7 +62,7 @@ Alpine.effect(() => {
 })
 ```
 
-When this code is firt run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.
+When this code is first run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.
 
 This is the mechanism that unlocks all of the reactivity at the core of Alpine.
 
@@ -98,4 +98,4 @@ button.addEventListener('click', () => {
 
 As you can see, you can make any data reactive, and you can also wrap any functionality in `Alpine.effect`.
 
-This combination unlocks an incredibly powerful programming paradaigm for web development. Run wild and free.
+This combination unlocks an incredibly powerful programming paradigm for web development. Run wild and free.

packages/docs/src/en/alpine-101.md

@@ -22,7 +22,7 @@ Using a text editor, fill the file with these contents:
 
 Open your file in a web browser, if you see `I ❤️ Alpine`, you're ready to rumble!
 
-Now that you're all set up to play around, let's look at three practical examples as a foundation for teaching you the basics of Alpine. By the end of this excercise, you should be more than equipped to start building stuff on your own. Let's goooooo.
+Now that you're all set up to play around, let's look at three practical examples as a foundation for teaching you the basics of Alpine. By the end of this exercise, you should be more than equipped to start building stuff on your own. Let's goooooo.
 
 <!-- START_VERBATIM -->
 <ul class="flex flex-col space-y-2 list-inside !list-decimal">
@@ -153,7 +153,7 @@ The `x-data` and `x-on` directives should be familiar to you from the previous e
 <div ... @click.outside="open = false">Contents...</div>
 ```
 
-You'll notice something new in this example: `.outside`. Many directives in Alpine accept "modifiers" that are chained onto the end of the directive and are seperated by periods.
+You'll notice something new in this example: `.outside`. Many directives in Alpine accept "modifiers" that are chained onto the end of the directive and are separated by periods.
 
 In this case, `.outside` tells Alpine to instead of listening for a click INSIDE the `<div>`, to listen for the click only if it happens OUTSIDE the `<div>`.
 
@@ -262,7 +262,7 @@ The next bit I'd like to draw your attention to is the `items` and `filteredItem
 }
 ```
 
-The `items` property should be self-explanitory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).
+The `items` property should be self-explanatory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).
 
 The interesting part of this snippet is the `filteredItems` property.
 

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

@@ -50,7 +50,7 @@ In cases like these, if you prefer a less verbose syntax you can use JavaScript'
 
 ```html
 <div :class="show ? '' : 'hidden'">
-<!-- Is equivelant to: -->
+<!-- Is equivalant to: -->
 <div :class="show || 'hidden'">
 ```
 
@@ -58,7 +58,7 @@ The inverse is also available to you. Suppose instead of `open`, we use a variab
 
 ```html
 <div :class="closed ? 'hidden' : ''">
-<!-- Is equivelant to: -->
+<!-- Is equivalant to: -->
 <div :class="closed && 'hidden'">
 ```
 

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

@@ -23,7 +23,7 @@ Now, the following example will hide the `<span>` tag until Alpine has set its t
 
 When Alpine loads on the page, it removes all `x-cloak` property from the element, which also removes the `display: none;` applied by CSS, therefore showing the element.
 
-If you'd like to achieve this same behavior, but avoid having to include a global style, you can use the following cool, but admittadly odd trick:
+If you'd like to achieve this same behavior, but avoid having to include a global style, you can use the following cool, but admittedly odd trick:
 
 ```html
 <template x-if="true">

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

@@ -5,7 +5,7 @@ title: effect
 
 # `x-effect`
 
-`x-effect` is a useful directive for re-evaluating an expression when one of its dependancies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
+`x-effect` is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
 
 If this definition is confusing for you, that's ok. It's better explained through an example:
 
@@ -17,4 +17,4 @@ If this definition is confusing for you, that's ok. It's better explained throug
 
 When this component is loaded, the `x-effect` expression will be run and "Hello" will be logged into the console.
 
-Because Alpine knows about any property references contained within `x-effect`, when the button is clicked and `label` is changed", the effect will be retriggered and "Hello World!" will be logged to the console.
+Because Alpine knows about any property references contained within `x-effect`, when the button is clicked and `label` is changed", the effect will be re-triggered and "Hello World!" will be logged to the console.

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

@@ -15,4 +15,4 @@ Because of this difference in behavior, `x-if` should not be applied directly to
 </template>
 ```
 
-> Unlike `x-show`, `x-if`, does NOT support tansitioning toggles with `x-transition`.
+> Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.

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

@@ -55,7 +55,7 @@ We can use the same example as above but this time, we'll add a button to change
 
 Now when the `<button>` is clicked, the input element's value will instantly be updated to "changed".
 
-`x-model` works with the following inputy elements:
+`x-model` works with the following input elements:
 
 * `<input type="text">`
 * `<textarea>`

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

@@ -121,7 +121,7 @@ Alpine offers a number of directive modifiers to customize the behavior of your
 <a name="prevent"></a>
 ### .prevent
 
-`.prevent` is the equivelant of calling `.preventDefault()` inside a listener on the browser event object.
+`.prevent` is the equivalant of calling `.preventDefault()` inside a listener on the browser event object.
 
 ```html
 <form @submit.prevent="console.log('submitted')" action="/foo">
@@ -134,7 +134,7 @@ In the above example, with the `.prevent`, clicking the button will NOT submit t
 <a name="stop"></a>
 ### .stop
 
-Similar to `.prevent`, `.stop` is the equivelant of calling `.stopPropagation()` inside a listener on the browser event object.
+Similar to `.prevent`, `.stop` is the equivalant of calling `.stopPropagation()` inside a listener on the browser event object.
 
 ```html
 <div @click="console.log('I will not get logged')">

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

@@ -52,7 +52,7 @@ For example, if you want to listen for a form submission but prevent the browser
 <form @submit.prevent="...">...</form>
 ```
 
-You can also apply `.stop` to achieve the equivelant of `event.stopPropagation()`.
+You can also apply `.stop` to achieve the equivalant of `event.stopPropagation()`.
 
 <a name="accessing-the-event-object"></a>
 ## Accessing the event object
@@ -60,7 +60,7 @@ You can also apply `.stop` to achieve the equivelant of `event.stopPropagation()
 Sometimes you may want to access the native browser event object inside your own code. To make this easy, Alpine automatically injects an `$event` magic variable:
 
 ```html
-<button @click="$event.target.delete()">Remove Me</button>
+<button @click="$event.target.remove()">Remove Me</button>
 ```
 
 <a name="dispatching-custom-events"></a>

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

@@ -31,7 +31,7 @@ Alpine.data('dropdown', () => ({
 <a name="after-a-state-change"></a>
 ## After a state change
 
-Alpine allows you to execute code when a peice of data (state) changes. It offers two different APIs for such a task: `$watch` and `x-effect`.
+Alpine allows you to execute code when a piece of data (state) changes. It offers two different APIs for such a task: `$watch` and `x-effect`.
 
 <a name="watch"></a>
 ### `$watch`
@@ -40,7 +40,7 @@ Alpine allows you to execute code when a peice of data (state) changes. It offer
 <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
 ```
 
-As you can see above, `$watch` allows you to hook into data changes using a dot-notation key. When that peice of data changes, Alpine will call the passed callback and pass it the new value. along with the old value before the change.
+As you can see above, `$watch` allows you to hook into data changes using a dot-notation key. When that piece of data changes, Alpine will call the passed callback and pass it the new value. along with the old value before the change.
 
 [→ Read more about $watch](/magics/watch)
 
@@ -49,7 +49,7 @@ As you can see above, `$watch` allows you to hook into data changes using a dot-
 
 `x-effect` uses the same mechanism under the hood as `x-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 peices of data changes, the `x-effect` expression will be re-run.
+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.
 
 Here's the same bit of code from the `$watch` example rewritten using `x-effect`: