benchmarks/giant.html

@@ -4749,11 +4749,11 @@ <h1 class="Subhead-heading ">Open a pull request</h1>
                                                             <code>
             <a title="Fix x layout (#2499)
 
-* rollback &amp; simplfy
+* rollback &amp; simplify
 
 * add tests" data-pjax="true" class="Link--secondary markdown-title" href="/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57">Fix x layout (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="808077696" data-permission-text="Title is private" data-url="https://github.com/livewire/livewire/issues/2499" data-hovercard-type="pull_request" data-hovercard-url="/livewire/livewire/pull/2499/hovercard" href="https://github.com/livewire/livewire/pull/2499">#2499</a><a title="Fix x layout (#2499)
 
-* rollback &amp; simplfy
+* rollback &amp; simplify
 
 * add tests" data-pjax="true" class="Link--secondary markdown-title" href="/livewire/livewire/commit/bec0a3e7a0857ac5915695df23d32c99f4955a57">)</a>
         </code>
@@ -4826,7 +4826,7 @@ <h1 class="Subhead-heading ">Open a pull request</h1>
                                                     </div>
                                                 </div>
                                                 <div class="Details-content--hidden mt-2">
-                                                    <pre class="color-text-secondary ws-pre-wrap">* rollback &amp; simplfy
+                                                    <pre class="color-text-secondary ws-pre-wrap">* rollback &amp; simplify
 
 * add tests</pre>
                                                 </div>

index.html

@@ -6,10 +6,17 @@
     <script src="./packages/mask/dist/cdn.js"></script>
     <script src="./packages/ui/dist/cdn.js" defer></script> -->
     <script src="./packages/anchor/dist/cdn.js" defer></script>
+    <script src="./packages/sort/dist/cdn.js" defer></script>
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
+    <div x-data x-sort>
+        <div x-sort:item >foo</div>
+        <div >foo</div>
+        <div x-sort:item >foo</div>
+    </div>
+
     <div x-data="{ val: true }"
     >
    <input type="text" x-model.boolean="val">

package.json

@@ -4,14 +4,15 @@
         "packages/*"
     ],
     "devDependencies": {
+        "@floating-ui/dom": "^1.5.3",
         "axios": "^0.21.1",
         "chalk": "^4.1.1",
         "cypress": "^7.0.0",
         "cypress-plugin-tab": "^1.0.5",
-        "@floating-ui/dom": "^1.5.3",
         "dot-json": "^1.2.2",
         "esbuild": "~0.16.17",
-        "jest": "^26.6.3"
+        "jest": "^26.6.3",
+        "sortablejs": "^1.15.2"
     },
     "scripts": {
         "build": "node ./scripts/build.js",

packages/alpinejs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs",
-    "version": "3.13.8",
+    "version": "3.13.9",
     "description": "The rugged, minimal JavaScript framework",
     "homepage": "https://alpinejs.dev",
     "repository": {

packages/alpinejs/src/directives.js

@@ -30,6 +30,10 @@ export function directive(name, callback) {
     }
 }
 
+export function directiveExists(name) {
+    return Object.keys(directiveHandlers).includes(name)
+}
+
 export function directives(el, attributes, originalAttributeOverride) {
     attributes = Array.from(attributes)
 

packages/alpinejs/src/lifecycle.js

@@ -1,5 +1,5 @@
 import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from "./mutation"
-import { deferHandlingDirectives, directives } from "./directives"
+import { deferHandlingDirectives, directiveExists, directives } from "./directives"
 import { dispatch } from './utils/dispatch'
 import { walk } from "./utils/walk"
 import { warn } from './utils/warn'
@@ -33,6 +33,10 @@ export function start() {
         })
 
     dispatch(document, 'alpine:initialized')
+
+    setTimeout(() => {
+        warnAboutMissingPlugins()
+    })
 }
 
 let rootSelectorCallbacks = []
@@ -98,3 +102,23 @@ export function destroyTree(root, walker = walk) {
         cleanupElement(el)
     })
 }
+
+function warnAboutMissingPlugins() {
+    let pluginDirectives = [
+        [ 'ui', 'dialog', ['[x-dialog], [x-popover]'] ],
+        [ 'anchor', 'anchor', ['[x-anchor]'] ],
+        [ 'sort', 'sort', ['[x-sort]'] ],
+    ]
+
+    pluginDirectives.forEach(([ plugin, directive, selectors ]) => {
+        if (directiveExists(directive)) return
+
+        selectors.some(selector => {
+            if (document.querySelector(selector)) {
+                warn(`found "${selector}", but missing ${plugin} plugin`)
+
+                return true
+            }
+        })
+    })
+}

packages/alpinejs/src/mutation.js

@@ -1,5 +1,3 @@
-import { destroyTree } from "./lifecycle"
-
 let onAttributeAddeds = []
 let onElRemoveds = []
 let onElAddeds = []
@@ -177,8 +175,6 @@ function onMutate(mutations) {
         if (addedNodes.has(node)) continue
 
         onElRemoveds.forEach(i => i(node))
-
-        destroyTree(node)
     }
 
     // Mutations are bundled together by the browser but sometimes

packages/alpinejs/src/utils/on.js

@@ -37,7 +37,14 @@ export default function on (el, event, modifiers, callback) {
 
     if (modifiers.includes('prevent')) handler = wrapHandler(handler, (next, e) => { e.preventDefault(); next(e) })
     if (modifiers.includes('stop')) handler = wrapHandler(handler, (next, e) => { e.stopPropagation(); next(e) })
-    if (modifiers.includes('self')) handler = wrapHandler(handler, (next, e) => { e.target === el && next(e) })
+
+    if (modifiers.includes("once")) {
+        handler = wrapHandler(handler, (next, e) => {
+            next(e);
+
+            listenerTarget.removeEventListener(event, handler, options);
+        });
+    }
 
     if (modifiers.includes('away') || modifiers.includes('outside')) {
         listenerTarget = document
@@ -57,13 +64,7 @@ export default function on (el, event, modifiers, callback) {
         })
     }
 
-    if (modifiers.includes('once')) {
-        handler = wrapHandler(handler, (next, e) => {
-            next(e)
-
-            listenerTarget.removeEventListener(event, handler, options)
-        })
-    }
+    if (modifiers.includes('self')) handler = wrapHandler(handler, (next, e) => { e.target === el && next(e) })
 
     // Handle :keydown and :keyup listeners.
     handler = wrapHandler(handler, (next, e) => {

packages/anchor/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/anchor",
-    "version": "3.13.8",
+    "version": "3.13.9",
     "description": "Anchor an element's position relative to another",
     "homepage": "https://alpinejs.dev/plugins/anchor",
     "repository": {

packages/collapse/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/collapse",
-    "version": "3.13.8",
+    "version": "3.13.9",
     "description": "Collapse and expand elements with robust animations",
     "homepage": "https://alpinejs.dev/plugins/collapse",
     "repository": {

packages/csp/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/csp",
-    "version": "3.13.8",
+    "version": "3.13.9",
     "description": "A CSP-friendly build of AlpineJS",
     "author": "Caleb Porzio",
     "license": "MIT",

packages/docs/package.json

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

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

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

@@ -66,7 +66,7 @@ Notice that, because of [event bubbling](https://en.wikipedia.org/wiki/Event_bub
 </div>
 ```
 
-> The first example won't work because when `custom-event` is dispatched, it'll propagate to its common ancestor, the `div`, not its sibling, the `<span>`. The second example will work because the sibling is listening for `notify` at the `window` level, which the custom event will eventually bubble up to.
+> The first example won't work because when `notify` is dispatched, it'll propagate to its common ancestor, the `div`, not its sibling, the `<span>`. The second example will work because the sibling is listening for `notify` at the `window` level, which the custom event will eventually bubble up to.
 
 <a name="dispatching-to-components"></a>
 ## Dispatching to other components

packages/docs/src/en/plugins/anchor.md

@@ -1,13 +1,13 @@
 ---
 order: 5
 title: Anchor
-description: Anchor an element's positioning to another element on the pageg
+description: Anchor an element's positioning to another element on the page
 graph_image: https://alpinejs.dev/social_anchor.jpg
 ---
 
 # Anchor Plugin
 
-Alpine's Anchor plugin allows you easily anchor an element's positioning to another element on the page.
+Alpine's Anchor plugin allows you to easily anchor an element's positioning to another element on the page.
 
 This functionality is useful when creating dropdown menus, popovers, dialogs, and tooltips with Alpine.
 
@@ -56,7 +56,7 @@ The primary API for using this plugin is the `x-anchor` directive.
 
 To use this plugin, add the `x-anchor` directive to any element and pass it a reference to the element you want to anchor it's position to (often a button on the page).
 
-By default, `x-anchor` will set the the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element.
+By default, `x-anchor` will set the element's CSS to `position: absolute` and the appropriate `top` and `left` values. If the anchored element is normally displayed below the reference element but doesn't have room on the page, it's styling will be adjusted to render above the element.
 
 For example, here's a simple dropdown anchored to the button that toggles it: