Remove redundant x-init from docs & tests

docs/_includes/sample.njk

@@ -1 +1 @@
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">x-init</span> <span class="token bg-almond-700 text-white">x-target</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>songs<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/songs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token bg-almond-700 text-white">@input.debounce</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$el.form.requestSubmit()<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token bg-almond-700 text-white">id</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>songs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token bg-almond-700 text-white">x-target</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>songs<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/songs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token bg-almond-700 text-white">@input.debounce</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$el.form.requestSubmit()<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token bg-almond-700 text-white">id</span><span class="token bg-almond-700 text-white"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>songs<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span></code></pre>

docs/examples/bulk-update.md

@@ -27,7 +27,7 @@ accomplished by putting an AJAX form below a table, with associated checkboxes i
     ...
   </tbody>
 </table>
-<form x-init x-target="contacts" id="contacts_form" method="put" action="/contacts">
+<form x-target="contacts" id="contacts_form" method="put" action="/contacts">
   <button name="status" value="Active">Activate</button>
   <button name="status" value="Inactive">Deactivate</button>
 </form>
@@ -82,7 +82,7 @@ updated rows.
     ${rows}
   </tbody>
 </table>
-<form x-init x-target="contacts" id="contacts_form" method="put" action="/contacts">
+<form x-target="contacts" id="contacts_form" method="put" action="/contacts">
   <button name="status" value="Active">Activate</button>
   <button name="status" value="Inactive">Deactivate</button>
 </form>`

docs/examples/dialog-form.md

@@ -50,7 +50,7 @@ In each table row we have an "Edit" link targeting the empty `#contact` `<div>`
 Clicking the "Edit" link issues a `GET` request to `/contacts/1/edit` which returns the corresponding `<form>` for the contact inside the `<dialog>`:
 
 ```html
-<form id="contact" x-init x-target method="put" action="/contacts/1" aria-label="Contact Information">
+<form id="contact" x-target method="put" action="/contacts/1" aria-label="Contact Information">
   <div>
     <label for="name">Name</label>
     <input id="name" name="name" value="Finn">
@@ -128,7 +128,7 @@ Finally, the `contact:updated` event causes the `<tbody>` to refresh with the up
   }
 
   function edit(contact) {
-    return `<form id="contact" x-init x-target @ajax:success="$dispatch('contact:updated')" method="put" action="/contacts/${contact.id}" aria-label="Contact Information">
+    return `<form id="contact" x-target @ajax:success="$dispatch('contact:updated')" method="put" action="/contacts/${contact.id}" aria-label="Contact Information">
     <div>
       <label for="name">Name</label>
       <input id="name" name="name" value="${contact.name}">

docs/examples/edit-row.md

@@ -17,7 +17,7 @@ This example shows how to implement editable table rows. First let's look at the
       <th scope="col">Actions</th>
     </tr>
   </thead>
-  <tbody x-init>
+  <tbody>
     ...
   </tbody>
 </table>
@@ -147,7 +147,7 @@ Try using the keyboard in the following demo and notice how keyboard focus is ma
       <th scope="col" width="130">Action</th>
     </tr>
   </thead>
-  <tbody x-init>
+  <tbody>
     ${rows}
   </tbody>
 </table>`

docs/examples/filterable-content.md

@@ -14,7 +14,7 @@ We start with some filter buttons and a table inside a container with `id="conta
 
 ```html
 <div id="contacts" x-merge="morph">
-  <form action="/contacts" aria-label="Filter contacts" x-init x-target="contacts">
+  <form action="/contacts" aria-label="Filter contacts" x-target="contacts">
     <button name="status" value="Active" aria-pressed="false">Active</button>
     <button name="status" value="Inactive" aria-pressed="false">Inactive</button>
   </form>
@@ -56,7 +56,7 @@ Clicking a filter button issues a `GET` request to `/contacts?status=` which ret
 First, the response should include the modified state of the filter form:
 
 ```html
-<form action="/contacts" aria-label="Filter contacts" x-init x-target="contacts">
+<form action="/contacts" aria-label="Filter contacts" x-target="contacts">
   <button name="status" value="Active" aria-pressed="true">Active</button>
   <button name="status" value="Inactive" aria-pressed="false">Inactive</button>
   <button name="status" value="" aria-pressed="false">Reset</button>
@@ -116,7 +116,7 @@ Let's see our filterable table in action. Try activating a filter button using t
     let reset = filter ? `<button name="status" value="">Reset</button>` : ``
 
     return `<div x-merge="morph" id="contacts">
-<form action="/contacts" aria-label="Filter contacts" x-init x-target="contacts">
+<form action="/contacts" aria-label="Filter contacts" x-target="contacts">
   <button name="status" value="Active" aria-pressed="${String(filter === 'Active')}">Active</button>
   <button name="status" value="Inactive" aria-pressed="${String(filter === 'Inactive')}">Inactive</button>
   ${reset}

docs/examples/inline-edit.md

@@ -15,14 +15,14 @@ This pattern starts with a "view mode" showing the details of a contact inside a
   <p><strong>First Name</strong>: Finn</p>
   <p><strong>Last Name</strong>: Mertens</p>
   <p><strong>Email</strong>: fmertens@candykingdom.gov</p>
-  <a href="/contacts/1/edit" x-init x-target="contact_1">Edit</a>
+  <a href="/contacts/1/edit" x-target="contact_1">Edit</a>
 </div>
 ```
 
 This returns a form that can be used to edit the contact:
 
 ```html
-<form id="contact_1" x-init x-target method="put" action="/contacts/1" aria-label="Contact Information">
+<form id="contact_1" x-target method="put" action="/contacts/1" aria-label="Contact Information">
   <div>
     <label for="first_name">First Name</label>
     <input id="first_name" name="first_name" value="Finn">
@@ -112,7 +112,7 @@ form {
   window.example('/contacts/1')
 
   function edit(contact) {
-    return `<form id="contact_1" x-init x-target x-merge.transition method="put" action="/contacts/1" aria-label="Contact Information">
+    return `<form id="contact_1" x-target x-merge.transition method="put" action="/contacts/1" aria-label="Contact Information">
   <div>
     <label for="first_name">First Name</label>
     <input id="first_name" name="first_name" x-autofocus value="${contact.first_name}" style="width:18ch">
@@ -135,7 +135,7 @@ form {
   <p><strong>First Name</strong>: ${contact.first_name}</p>
   <p><strong>Last Name</strong>: ${contact.last_name}</p>
   <p><strong>Email</strong>: ${contact.email}</p>
-  <a href="/contacts/1/edit" x-init x-target="contact_1" x-autofocus>Edit</a>
+  <a href="/contacts/1/edit" x-target="contact_1" x-autofocus>Edit</a>
 </div>`
   }
 </script>

docs/examples/instant-search.md

@@ -11,7 +11,7 @@ This example actively searches a contacts database as the user enters text.
 We start with a search form and a table:
 
 ```html
-<form x-init x-target="contacts" action="/contacts" role="search" aria-label="Contacts" autocomplete="off">
+<form x-target="contacts" action="/contacts" role="search" aria-label="Contacts" autocomplete="off">
   <input type="search" name="search" aria-label="Search Term" placeholder="Type to filter contacts..." @input.debounce="$el.form.requestSubmit()" @search="$el.form.requestSubmit()">
   <button x-show="false">Search</button>
 </form>
@@ -82,7 +82,7 @@ We use `x-show="false"` on the form's submit button so that it is hidden when Ja
   <td>${contact.status}</td>
 </tr>`).join('\n')
 
-    return `<form x-init x-target="contacts" action="/contacts" role="search" aria-label="Contacts" autocomplete="off">
+    return `<form x-target="contacts" action="/contacts" role="search" aria-label="Contacts" autocomplete="off">
   <input type="search" name="search" placeholder="Type to filter contacts..."
       @input.debounce="$el.form.requestSubmit()" @search="$el.form.requestSubmit()">
       <button x-show="false">Search</button>

docs/examples/loading.md

@@ -13,7 +13,7 @@ We start with a card that contains a link. When the link is clicked, a `GET` req
 ```html
 <div id="card">
   <div id="table">
-    <a href="/contacts" x-init x-target="table">Load Contacts</a>
+    <a href="/contacts" x-target="table">Load Contacts</a>
   </div>
 </div>
 ```
@@ -95,7 +95,7 @@ Fortunately, Alpine AJAX adds `aria-busy="true"` to targets while a request is p
   function dashboard() {
     return `<div id="card">
   <div id="table">
-    <a href="/contacts" x-init x-target="table">Load Contacts</a>
+    <a href="/contacts" x-target="table">Load Contacts</a>
   </div>
 </div>`
   }

docs/examples/notifications.md

@@ -18,7 +18,7 @@ This pattern starts with an empty list for our notifications, the list needs an
 We'll also add an AJAX form to this demo so that we can issue requests to the server that will trigger new notifications.
 
 ```html
-<form id="action" x-init x-target method="post" action="/action">
+<form id="action" x-target method="post" action="/action">
   <button>Click Me</button>
 </form>
 ```
@@ -134,7 +134,7 @@ And finally, we can make our notifications automatically dismiss after 6 seconds
   window.example('/action')
 
   function view() {
-    return `<form id="action" x-init x-target method="post" action="/action">
+    return `<form id="action" x-target method="post" action="/action">
   <button>Click Me</button>
 </form>
 <ul x-sync id="notification_list" x-merge="prepend" role="status">

docs/examples/progress-bar.md

@@ -11,7 +11,7 @@ This example shows how to implement a smoothly scrolling progress bar.
 We start with an AJAX form that issues a `POST` request to `/jobs` to begin a job process:
 
 ```html
-<form id="jobs" x-init x-target method="post" action="/jobs">
+<form id="jobs" x-target method="post" action="/jobs">
   <h3>New Job</h3>
   <button>Start New Job</button>
 </form>
@@ -35,7 +35,7 @@ On each reload the `aria-valuenow` attribute should change to indicate the serve
 Finally, when the job is complete, the `x-init` directive is removed and a `<form>` to restart the job is added to the UI:
 
 ```html
-<div id="jobs" x-init>
+<div id="jobs">
   <h3 id="progress_label">Job Progress</h3>
   <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-labelledby="progress_label">
     <svg style="width:100%; transition: width .3s " width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
@@ -64,7 +64,7 @@ Finally, when the job is complete, the `x-init` directive is removed and a `<for
   window.example('/jobs/create')
 
   function create() {
-    return `<form id="jobs" x-init x-target method="post" action="/jobs">
+    return `<form id="jobs" x-target method="post" action="/jobs">
     <h3>New Job</h3>
   <button>Start New Job</button>
 </form>`

docs/examples/server-events.md

@@ -15,7 +15,7 @@ This example demonstrates how you can configure components to respond to events
 
 <div x-sync id="server_events"></div>
 
-<form id="comment_form" x-init x-target method="post" action="/comments">
+<form id="comment_form" x-target method="post" action="/comments">
   <label for="comment_body">
   <textarea id="comment_body" name="comment_body"></textarea>
   <button>Submit</button>
@@ -35,7 +35,7 @@ Next, when our comment form is submitted the server will respond with a new serv
   <div x-init="$dispatch('comment:created')"></div>
 </div>
 
-<form id="comment_form" x-init x-target method="post" action="/comments">
+<form id="comment_form" x-target method="post" action="/comments">
   <label for="comment_body">
   <textarea id="comment_body" name="comment_body"></textarea>
   <button>Submit</button>
@@ -117,7 +117,7 @@ ${serverEvent()}
   }
   function create(event) {
     return `${serverEvent(event)}
-<form id="comment_form" x-init x-target method="post" action="/comments">
+<form id="comment_form" x-target method="post" action="/comments">
   <label for="comment_body">Comment</label>
   <textarea id="comment_body" name="comment_body" x-autofocus></textarea>
   <button>Submit</button>

docs/examples/toggle-button.md

@@ -11,15 +11,15 @@ This demo shows how to implement a toggle button that alters server state.
 This pattern starts with an AJAX form assigned `id="like"`:
 
 ```html
-<form id="like" x-init x-target method="post" action="/comments/1/like">
+<form id="like" x-target method="post" action="/comments/1/like">
   <button name="user_id" value="1">Like</button>
 </form>
 ```
 
 When the form is submitted, a `POST` request is issued to the server, and the server will return a new form state:
 
 ```html
-<form id="like" x-init x-target method="delete" action="/comments/1/like">
+<form id="like" x-target method="delete" action="/comments/1/like">
   <button name="user_id" value="1" x-autofocus>Unlike</button>
 </form>
 ```
@@ -34,7 +34,7 @@ window.route('DELETE', '/comments/1/like', () => view(false))
 window.example('/comments')
 
 function view(liked) {
-  return `<form id="like" x-init x-target method="${liked ? 'delete' : 'post'}" action="/comments/1/like">
+  return `<form id="like" x-target method="${liked ? 'delete' : 'post'}" action="/comments/1/like">
 <button name="user_id" value="1" x-autofocus>${liked ? 'Unlike' : 'Like'}</button>
 </form>`
 }

docs/index.njk

@@ -223,7 +223,7 @@ description: Radio-controlled HTML elements!
             {% include 'jukebox.svg' %}
           </div>
           <div class="absolute top-[40%] bottom-[12%] left-[25%] right-[25%] flex flex-col space-y-1">
-            <form x-init x-target="songs" action="/songs" role="search" aria-label="Search jukebox music" class="relative" autocomplete="off">
+            <form x-target="songs" action="/songs" role="search" aria-label="Search jukebox music" class="relative" autocomplete="off">
               <label for="search" class="sr-only">Search</label>
               <input type="search" name="search" id="search" aria-describedby="info" placeholder="Search songs..." @input.debounce="$el.form.requestSubmit()" class="animate-glow relative font-sans w-full rounded-md border-blue-800 placeholder:text-almond-700 bg-almond-200 text-blue-800 focus:border-red-600">
               <button x-show="false" class="sr-only">Submit</button>

docs/reference/creating-demos.md

@@ -25,7 +25,7 @@ route('POST', '/update-quantity', (request) => {
 
 <label for="current_quantity">Current quantity</label>
 <output id="current_quantity">0</output>
-<form x-init x-target="current_quantity" method="POST" action="/update-quantity">
+<form x-target="current_quantity" method="POST" action="/update-quantity">
   <label form="quantity">New quantity</label>
   <input type="number" id="quantity" name="quantity">
   <button>Update</button>

docs/reference/events.md

@@ -63,7 +63,7 @@ You can listen for events to perform additional actions during the lifecycle of
 Here's an example of aborting a form request when the user cancels a dialog prompt:
 
 ```html
-<form id="delete_user" x-init x-target @ajax:before="confirm('Are you sure?') || $event.preventDefault()">
+<form id="delete_user" x-target @ajax:before="confirm('Are you sure?') || $event.preventDefault()">
   <button>Delete User</button>
 </form>
 ```