@alpinejs/docs 3.14.1-revision.2 → 3.14.2-revision.1

package/package.json

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

package/src/en/directives/bind.md

@@ -24,6 +24,8 @@ If `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For
 <input type="text" :placeholder="placeholder">
 ```
 
+> Despite not being included in the above snippet, `x-bind` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
 <a name="binding-classes"></a>
 ## Binding classes
 
@@ -162,7 +164,7 @@ And like most expressions in Alpine, you can always use the result of a JavaScri
 The object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directives, callbacks to be evaluated by Alpine.
 
 ```alpine
-<div x-data="dropdown()">
+<div x-data="dropdown">
     <button x-bind="trigger">Open Dropdown</button>
 
     <span x-bind="dialogue">Dropdown Contents</span>

package/src/en/directives/for.md

@@ -51,7 +51,7 @@ You may also pass objects to `x-for`.
 
 There are two rules worth noting about `x-for`:
 
->`x-for` MUST be declared on a `<template>` element.
+> `x-for` MUST be declared on a `<template>` element.
 > That `<template>` element MUST contain only one root element
 
 <a name="keys"></a>
@@ -110,6 +110,8 @@ If you need to simply loop `n` number of times, rather than iterate through an a
 
 `i` in this case can be named anything you like.
 
+> Despite not being included in the above snippet, `x-for` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
 <a name="contents-of-a-template"></a>
 ## Contents of a `<template>`
 

package/src/en/directives/id.md

@@ -4,6 +4,7 @@ title: id
 ---
 
 # x-id
+
 `x-id` allows you to declare a new "scope" for any new IDs generated using `$id()`. It accepts an array of strings (ID names) and adds a suffix to each `$id('...')` generated within it that is unique to other IDs on the page.
 
 `x-id` is meant to be used in conjunction with the `$id(...)` magic.
@@ -30,4 +31,4 @@ Here's a brief example of this directive in use:
 </div>
 ```
 
-
+> Despite not being included in the above snippet, `x-id` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)

package/src/en/directives/if.md

@@ -15,6 +15,10 @@ Because of this difference in behavior, `x-if` should not be applied directly to
 </template>
 ```
 
-> Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.
+> Despite not being included in the above snippet, `x-if` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
 
-> Remember: `<template>` tags can only contain one root level element.
+## Caveats
+
+Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.
+
+`<template>` tags can only contain one root element.

package/src/en/directives/model.md

@@ -83,6 +83,8 @@ Now when the `<button>` is clicked, the input element's value will instantly be
 </div>
 <!-- END_VERBATIM -->
 
+> Despite not being included in the above snippet, `x-model` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
 <a name="textarea-inputs"></a>
 ## Textarea inputs
 

package/src/en/directives/on.md

@@ -26,6 +26,8 @@ Here's the same component as above, but using the shorthand syntax instead:
 <button @click="alert('Hello World!')">Say Hi</button>
 ```
 
+> Despite not being included in the above snippet, `x-on` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
 <a name="the-event-object"></a>
 ## The event object
 

package/src/en/directives/ref.md

@@ -22,3 +22,5 @@ title: ref
     </div>
 </div>
 <!-- END_VERBATIM -->
+
+> Despite not being included in the above snippet, `x-ref` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)

package/src/en/directives/transition.md

@@ -65,6 +65,8 @@ If you wish to customize the durations specifically for entering and leaving, yo
 >
 ```
 
+> Despite not being included in the above snippet, `x-transition` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
 <a name="customizing-delay"></a>
 ### Customizing delay
 

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

package/src/en/plugins/resize.md

@@ -52,7 +52,7 @@ Alpine.plugin(resize)
 
 The primary API for using this plugin is `x-resize`. You can add `x-resize` to any element within an Alpine component, and when that element is resized for any reason, the provided expression will execute with two magic properties: `$width` and `$height`.
 
-For example, here's a simple example of using `x-resize` do display the width and height of an element as it changes size.
+For example, here's a simple example of using `x-resize` to display the width and height of an element as it changes size.
 
 ```alpine
 <div
@@ -81,7 +81,7 @@ For example, here's a simple example of using `x-resize` do display the width an
 <a name="document"></a>
 ### .document
 
-It's often useful to observer the entire document's size, rather than a specific element. To do this, you can add the `.document` modifier to `x-resize`:
+It's often useful to observe the entire document's size, rather than a specific element. To do this, you can add the `.document` modifier to `x-resize`:
 
 ```alpine
 <div x-resize.document="...">

package/src/en/plugins/sort.md

@@ -95,7 +95,7 @@ You can react to sorting changes by passing a handler function to `x-sort` and a
 </div>
 <!-- END_VERBATIM -->
 
-The `x-sort` handler will be called every time the sort order of the items change. The `$item` magic will contain the key of the sorted element (derived from `x-sort:item`), and `$position` will contain the new position of the item (staring at index `0`).
+The `x-sort` handler will be called every time the sort order of the items change. The `$item` magic will contain the key of the sorted element (derived from `x-sort:item`), and `$position` will contain the new position of the item (starting at index `0`).
 
 You can also pass a handler function to `x-sort` and that function will receive the `item` and `position` as the first and second parameter:
 

package/src/en/start-here.md

@@ -71,6 +71,8 @@ Everything in Alpine starts with an `x-data` directive. Inside of `x-data`, in p
 
 Every property inside this object will be made available to other directives inside this HTML element. In addition, when one of these properties changes, everything that relies on it will change as well.
 
+> `x-data` is required on a parent element for most Alpine directives to work.
+
 [→ Read more about `x-data`](/directives/data)
 
 Let's look at `x-on` and see how it can access and modify the `count` property from above: