Add init alias initializing

alpinejs · Jun 18, 2021 · 25715ee · 25715ee
1 parent f5807a1
commit 25715ee
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 31 deletions.
diff --git a/benchmarks/init.html b/benchmarks/init.html
@@ -22059,7 +22059,7 @@ <h1>Alpine-3-keyed</h1>
     </div>
 
     <script>
-        document.addEventListener('alpine:initializing', () => {
+        document.addEventListener('alpine:init', () => {
             let idCounter = 1;
             const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"],
             colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],

diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
@@ -8,6 +8,7 @@ import { warn } from './utils/warn'
 export function start() {
     if (! document.body) warn('Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine\'s `<script>` tag?')
 
+    dispatch(document, 'alpine:init')
     dispatch(document, 'alpine:initializing')
 
     startObservingMutations()

diff --git a/packages/docs/src/en/advanced/extending.md b/packages/docs/src/en/advanced/extending.md
@@ -18,7 +18,7 @@ There are two different techniques depending on if you are importing Alpine into
 <a name="via-script-tag"></a>
 ### Via a script tag
 
-If you are including Alpine via a script tag, you will need to register any custom extension code inside an `alpine:initializing` event listener.
+If you are including Alpine via a script tag, you will need to register any custom extension code inside an `alpine:init` event listener.
 
 Here's an example:
 
@@ -29,7 +29,7 @@ Here's an example:
     <div x-data x-foo></div>
 
     <script>
-        document.addEventListener('alpine:initializing', () => {
+        document.addEventListener('alpine:init', () => {
             Alpine.directive('foo', ...)
         })
     </script>
@@ -318,7 +318,7 @@ Notice how our script is included BEFORE Alpine itself. This is important, other
 Now let's look inside of `/js/foo.js`'s contents:
 
 ```js
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.directive('foo', ...)
 
     window.Alpine.magic('foo', ...)

diff --git a/packages/docs/src/en/directives/bind.md b/packages/docs/src/en/directives/bind.md
@@ -161,7 +161,7 @@ The object keys are the directives (can be any directive including modifiers), a
 </div>
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.data('dropdown', () => ({
             open: false,
 

diff --git a/packages/docs/src/en/directives/data.md b/packages/docs/src/en/directives/data.md
@@ -155,7 +155,7 @@ Here's a quick example:
 </div>
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.data('dropdown', () => ({
             open: false,
 

diff --git a/packages/docs/src/en/essentials/lifecycle.md b/packages/docs/src/en/essentials/lifecycle.md
@@ -76,10 +76,10 @@ Ensuring a bit of code executes after Alpine is loaded, but BEFORE it initialize
 
 This hook allows you to register custom data, directives, magics, etc. before Alpine does its thing on a page.
 
-You can hook into this point in the lifecycle by listening for an event that Alpine dispatches called: `alpine:initializing`
+You can hook into this point in the lifecycle by listening for an event that Alpine dispatches called: `alpine:init`
 
 ```js
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     Alpine.data(...)
 })
 ```

diff --git a/packages/docs/src/en/globals/alpine-data.md b/packages/docs/src/en/globals/alpine-data.md
@@ -17,7 +17,7 @@ Here's a contrived `dropdown` component for example:
 </div>
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.data('dropdown', () => ({
             open: false,
 

diff --git a/packages/docs/src/en/globals/alpine-store.md b/packages/docs/src/en/globals/alpine-store.md
@@ -10,12 +10,12 @@ Alpine offers global state management through the `Alpine.store()` API.
 <a name="registering-a-store"></a>
 ## Registering A Store
 
-You can either define an Alpine store inside of an `alpine:initializing` listener (in the case of including Alpine via a `<script>` tag), OR you can define it before manually calling `Alpine.start()` (in the case of importing Alpine into a build):
+You can either define an Alpine store inside of an `alpine:init` listener (in the case of including Alpine via a `<script>` tag), OR you can define it before manually calling `Alpine.start()` (in the case of importing Alpine into a build):
 
 **From a script tag:**
 ```html
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.store('darkMode', {
             on: false,
 
@@ -75,7 +75,7 @@ Here's the example from above but using it more simply as a boolean value:
 
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.store('darkMode', false)
     })
 </script>

diff --git a/packages/docs/src/en/magics/store.md b/packages/docs/src/en/magics/store.md
@@ -19,7 +19,7 @@ You can use `$store` to conveniently access global Alpine stores registered usin
 
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.store('darkMode', {
             on: false,
 
@@ -51,7 +51,7 @@ Here's the example from above but using it more simply as a boolean value:
 
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.store('darkMode', false)
     })
 </script>

diff --git a/packages/docs/src/en/upgrade-guide.md b/packages/docs/src/en/upgrade-guide.md
@@ -59,7 +59,7 @@ For a smoother upgrade experience, you can optionally replace all instances of `
 
 ```html
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.magic('root', el => {
             let closestRootEl = (node) => {
                 if (node.hasAttribute('x-data')) return node
@@ -285,7 +285,7 @@ One of Alpine's stories for re-using functionality is abstracting Alpine directi
 
 <!-- ✅ After -->
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         // Will be executed before initializing Alpine.
     })
 
@@ -318,7 +318,7 @@ However, using V3's new custom directive API, it's trivial to reintroduce this f
 <!-- ✅ After -->
 <!-- The above will now work with the following script added to the page: -->
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.directive('html', (el, { expression }, { evaluateLater, effect }) => {
             let getHtml = evaluateLater(expression)
 
@@ -374,7 +374,7 @@ The following 2 APIs will still work in V3, but are considered deprecated and ar
 </div>
 
 <script>
-    document.addEventListener('alpine:initializing', () => {
+    document.addEventListener('alpine:init', () => {
         Alpine.data('dropdown', () => ({
             ...
         }))

diff --git a/packages/history/builds/cdn.js b/packages/history/builds/cdn.js
@@ -1,5 +1,5 @@
 import history from '../src/index.js'
 
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(history)
 })
diff --git a/packages/intersect/builds/cdn.js b/packages/intersect/builds/cdn.js
@@ -1,5 +1,5 @@
 import intersect from '../src/index.js'
 
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(intersect)
 })
diff --git a/packages/morph/builds/cdn.js b/packages/morph/builds/cdn.js
@@ -1,5 +1,5 @@
 import morph from '../src/index.js'
 
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(morph)
 })
diff --git a/packages/persist/builds/cdn.js b/packages/persist/builds/cdn.js
@@ -1,5 +1,5 @@
 import persist from '../src/index.js'
 
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(persist)
 })
diff --git a/packages/trap/builds/cdn.js b/packages/trap/builds/cdn.js
@@ -1,5 +1,5 @@
 import trap from '../src/index.js'
 
-document.addEventListener('alpine:initializing', () => {
+document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(trap)
 })
diff --git a/tests/cypress/integration/custom-data.spec.js b/tests/cypress/integration/custom-data.spec.js
@@ -3,7 +3,7 @@ import { haveText, html, test } from '../utils'
 test('can register custom data providers',
     html`
         <script>
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.data('test', () => ({
                     foo: 'bar'
                 }))
@@ -20,7 +20,7 @@ test('can register custom data providers',
 test('init functions inside custom datas are called automatically',
     html`
         <script>
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.data('test', () => ({
                     init() {
                         this.foo = 'baz'
@@ -43,7 +43,7 @@ test('init functions inside custom datas are called automatically',
 test('init functions "this" context is reactive',
     html`
         <script>
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.data('test', () => ({
                     init() {
                         window.addEventListener('click', () => {

diff --git a/tests/cypress/integration/custom-magics.spec.js b/tests/cypress/integration/custom-magics.spec.js
@@ -3,7 +3,7 @@ import { haveText, html, test } from '../utils'
 test('can register custom magic properties',
     html`
         <script>
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.magic('foo', (el) => {
                     return { bar: 'baz' }
                 })
@@ -22,7 +22,7 @@ test('magics are lazily accessed',
         <script>
             window.hasBeenAccessed = false
 
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.magic('foo', (el) => {
                     window.hasBeenAccessed = true
                 })

diff --git a/tests/cypress/integration/custom-prefix.spec.js b/tests/cypress/integration/custom-prefix.spec.js
@@ -3,7 +3,7 @@ import { haveText, html, test } from '../utils'
 test('can set a custom x- prefix',
     html`
         <script>
-            document.addEventListener('alpine:initializing', () => {
+            document.addEventListener('alpine:init', () => {
                 Alpine.prefix('data-x-')
             })
         </script>

diff --git a/tests/cypress/spec-csp.html b/tests/cypress/spec-csp.html
@@ -19,7 +19,7 @@
             if (extraJavaScript) {
                 let script = document.createElement('script')
                 script.src = `data:text/javascript;base64,${btoa(`
-                    document.addEventListener('alpine:initializing', () => {
+                    document.addEventListener('alpine:init', () => {
                         ${extraJavaScript}
                     })
                 `)}`

diff --git a/tests/cypress/spec.html b/tests/cypress/spec.html
@@ -22,7 +22,7 @@
             if (extraJavaScript) {
                 let script = document.createElement('script')
                 script.src = `data:text/javascript;base64,${btoa(`
-                    document.addEventListener('alpine:initializing', () => {
+                    document.addEventListener('alpine:init', () => {
                         ${extraJavaScript}
                     })
                 `)}`