Home Explore Help
Register Sign In
oleg
/
alpine
mirror of https://github.com/alpinejs/alpine.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add init alias initializing

Caleb Porzio 3 years ago
parent
f5807a1414
commit
25715eeb6a
20 changed files with 32 additions and 31 deletions
Split View Show Diff Stats
  1. 1 1
      benchmarks/init.html
  2. 1 0
      packages/alpinejs/src/lifecycle.js
  3. 3 3
      packages/docs/src/en/advanced/extending.md
  4. 1 1
      packages/docs/src/en/directives/bind.md
  5. 1 1
      packages/docs/src/en/directives/data.md
  6. 2 2
      packages/docs/src/en/essentials/lifecycle.md
  7. 1 1
      packages/docs/src/en/globals/alpine-data.md
  8. 3 3
      packages/docs/src/en/globals/alpine-store.md
  9. 2 2
      packages/docs/src/en/magics/store.md
  10. 4 4
      packages/docs/src/en/upgrade-guide.md
  11. 1 1
      packages/history/builds/cdn.js
  12. 1 1
      packages/intersect/builds/cdn.js
  13. 1 1
      packages/morph/builds/cdn.js
  14. 1 1
      packages/persist/builds/cdn.js
  15. 1 1
      packages/trap/builds/cdn.js
  16. 3 3
      tests/cypress/integration/custom-data.spec.js
  17. 2 2
      tests/cypress/integration/custom-magics.spec.js
  18. 1 1
      tests/cypress/integration/custom-prefix.spec.js
  19. 1 1
      tests/cypress/spec-csp.html
  20. 1 1
      tests/cypress/spec.html

+ 1 - 1
benchmarks/init.html
View File 

@@ -22059,7 +22059,7 @@
 
     </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"],

+ 1 - 0
packages/alpinejs/src/lifecycle.js
View File 

@@ -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()

+ 3 - 3
packages/docs/src/en/advanced/extending.md
View File 

@@ -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', ...)

+ 1 - 1
packages/docs/src/en/directives/bind.md
View File 

@@ -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,

+ 1 - 1
packages/docs/src/en/directives/data.md
View File 

@@ -155,7 +155,7 @@ Here's a quick example:
 
 </div>
 
 
 <script>
 
-    document.addEventListener('alpine:initializing', () => {
 
+    document.addEventListener('alpine:init', () => {
 
         Alpine.data('dropdown', () => ({
 
             open: false,

+ 2 - 2
packages/docs/src/en/essentials/lifecycle.md
View File 

@@ -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(...)
 
 })
 
 ```

+ 1 - 1
packages/docs/src/en/globals/alpine-data.md
View File 

@@ -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,

+ 3 - 3
packages/docs/src/en/globals/alpine-store.md
View File 

@@ -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>

+ 2 - 2
packages/docs/src/en/magics/store.md
View File 

@@ -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>

+ 4 - 4
packages/docs/src/en/upgrade-guide.md
View File 

@@ -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', () => ({
 
             ...
 
         }))

+ 1 - 1
packages/history/builds/cdn.js
View File 

@@ -1,5 +1,5 @@
 
 import history from '../src/index.js'
 
 
-document.addEventListener('alpine:initializing', () => {
 
+document.addEventListener('alpine:init', () => {
 
     window.Alpine.plugin(history)
 
 })

+ 1 - 1
packages/intersect/builds/cdn.js
View File 

@@ -1,5 +1,5 @@
 
 import intersect from '../src/index.js'
 
 
-document.addEventListener('alpine:initializing', () => {
 
+document.addEventListener('alpine:init', () => {
 
     window.Alpine.plugin(intersect)
 
 })

+ 1 - 1
packages/morph/builds/cdn.js
View File 

@@ -1,5 +1,5 @@
 
 import morph from '../src/index.js'
 
 
-document.addEventListener('alpine:initializing', () => {
 
+document.addEventListener('alpine:init', () => {
 
     window.Alpine.plugin(morph)
 
 })

+ 1 - 1
packages/persist/builds/cdn.js
View File 

@@ -1,5 +1,5 @@
 
 import persist from '../src/index.js'
 
 
-document.addEventListener('alpine:initializing', () => {
 
+document.addEventListener('alpine:init', () => {
 
     window.Alpine.plugin(persist)
 
 })

+ 1 - 1
packages/trap/builds/cdn.js
View File 

@@ -1,5 +1,5 @@
 
 import trap from '../src/index.js'
 
 
-document.addEventListener('alpine:initializing', () => {
 
+document.addEventListener('alpine:init', () => {
 
     window.Alpine.plugin(trap)
 
 })

+ 3 - 3
tests/cypress/integration/custom-data.spec.js
View File 

@@ -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', () => {

+ 2 - 2
tests/cypress/integration/custom-magics.spec.js
View File 

@@ -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
 
                 })

+ 1 - 1
tests/cypress/integration/custom-prefix.spec.js
View File 

@@ -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>

+ 1 - 1
tests/cypress/spec-csp.html
View File 

@@ -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}
 
                     })
 
                 `)}`

+ 1 - 1
tests/cypress/spec.html
View File 

@@ -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}
 
                     })
 
                 `)}`