Inicio Explorar Ayuda
Registro Iniciar sesión
oleg
/
alpine
espejo de https://github.com/alpinejs/alpine.git
1
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

Merge branch 'master' into allow-colons-in-event-name

Caleb Porzio hace 5 años
padre
29a39c4c18 43656d2203
commit
9efdf69285
Se han modificado 6 ficheros con 47 adiciones y 27 borrados
Dividir vista Mostrar estadísticas de diff
  1. 4 22
      README.md
  2. 0 0
      dist/alpine.js
  3. 0 0
      dist/alpine.js.map
  4. 1 1
      package.json
  5. 12 4
      src/component.js
  6. 30 0
      test/lifecycle.spec.js

+ 4 - 22
README.md
Ver fichero 

@@ -14,7 +14,7 @@ Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
 
 
 **From CDN:** Add the following script to the end of your `<head>` section.
 
 ```html
 
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.6.2/dist/alpine.js" defer></script>
 
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.7.0/dist/alpine.js" defer></script>
 
 ```
 
 
 That's it. It will initialize itself.
 
@@ -84,14 +84,12 @@ You can even use it for non-trivial things:
 
 
 ## Learn
 
 
-There are 14 directives available to you:
 
+There are 12 directives available to you:
 
 
 | Directive
 
 | --- |
 
 | [`x-data`](#x-data) |
 
 | [`x-init`](#x-init) |
 
-| [`x-created`](#x-created) |
 
-| [`x-mounted`](#x-mounted) |
 
 | [`x-show`](#x-show) |
 
 | [`x-bind`](#x-bind) |
 
 | [`x-on`](#x-on) |
 
@@ -158,8 +156,6 @@ You can also mix-in multiple data objects using object destructuring:
 
 
 ---
 
 
-> Warning: `x-init` is depricated, in favor of using `x-created` or `x-mounted`. It will be removed in 2.0
 
-
 
 ### `x-init`
 
 **Example:** `<div x-data"{ foo: 'bar' }" x-init="foo = 'baz"></div>`
 
 
@@ -167,23 +163,9 @@ You can also mix-in multiple data objects using object destructuring:
 
 
 `x-init` runs an expression when a component is initialized.
 
 
----
 
-
 
-### `x-created`
 
-**Example:** `<div x-data="{ foo: 'bar' }" x-created="foo = 'baz"></div>`
 
-
 
-**Structure:** `<div x-data="..." x-created="[expression]"></div>`
 
-
 
-`x-created` runs an expression when a component is initialized, but BEFORE the component initializes the DOM.
 
-
 
----
 
-
 
-### `x-mounted`
 
-**Example:** `<div x-data="{ foo: 'bar' }" x-mounted="foo = 'baz"></div>`
 
-
 
-**Structure:** `<div x-data="..." x-mounted="[expression]"></div>`
 
+If you wish to run code AFTER Alpine has made it's initial updates to the DOM (something like a `mounted()` hook in VueJS), you can return a callback from `x-init`, and it will be run after:
 
 
-`x-mounted` runs an expression when a component is initialized, and AFTER the component initializes the DOM.
 
+`x-init="return () => { // we have access to the post-dom-initialization state here // }"`
 
 
 ---

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
dist/alpine.js


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
dist/alpine.js.map


+ 1 - 1
package.json
Ver fichero 

@@ -1,7 +1,7 @@
 
 {
 
   "main": "dist/alpine.js",
 
   "name": "alpinejs",
 
-  "version": "1.6.2",
 
+  "version": "1.7.0",
 
   "repository": {
 
     "type": "git",
 
     "url": "git://github.com/alpinejs/alpine.git"

+ 12 - 4
src/component.js
Ver fichero 

@@ -35,16 +35,17 @@ export default class Component {
 
         this.tickStack = []
 
         this.collectingTickCallbacks = false
 
 
+        var initReturnedCallback
 
         if (initExpression) {
 
-            console.warn('AlpineJS Warning: "x-init" is depricated and will be removed in the next major version. Use "x-created" instead.')
 
+            // We want to allow data manipulation, but not trigger DOM updates just yet.
 
+            // We haven't even initialized the elements with their Alpine bindings. I mean c'mon.
 
             this.pauseReactivity = true
 
-            saferEvalNoReturn(this.$el.getAttribute('x-init'), this.$data)
 
+            initReturnedCallback = saferEval(this.$el.getAttribute('x-init'), this.$data)
 
             this.pauseReactivity = false
 
         }
 
 
         if (createdExpression) {
 
-            // We want to allow data manipulation, but not trigger DOM updates just yet.
 
-            // We haven't even initialized the elements with their Alpine bindings. I mean c'mon.
 
+            console.warn('AlpineJS Warning: "x-created" is deprecated and will be removed in the next major version. Use "x-init" instead.')
 
             this.pauseReactivity = true
 
             saferEvalNoReturn(this.$el.getAttribute('x-created'), this.$data)
 
             this.pauseReactivity = false
 
@@ -57,7 +58,14 @@ export default class Component {
 
         // Alpine's just so darn flexible amirite?
 
         this.listenForNewElementsToInitialize()
 
 
+        if (typeof initReturnedCallback === 'function') {
 
+            // Run the callback returned form the "x-init" hook to allow the user to do stuff after
 
+            // Alpine's got it's grubby little paws all over everything.
 
+            initReturnedCallback.call(this.$data)
 
+        }
 
+
 
         if (mountedExpression) {
 
+            console.warn('AlpineJS Warning: "x-mounted" is deprecated and will be removed in the next major version. Use "x-init" (with a callback return) for the same behavior.')
 
             // Run an "x-mounted" hook to allow the user to do stuff after
 
             // Alpine's got it's grubby little paws all over everything.
 
             saferEvalNoReturn(mountedExpression, this.$data)

+ 30 - 0
test/lifecycle.spec.js
Ver fichero 

@@ -22,6 +22,36 @@ test('x-init', async () => {
 
     expect(spanValue).toEqual('baz')
 
 })
 
 
+test('x-init from data function with callback return for "x-mounted" functionality', async () => {
 
+    var valueA
 
+    var valueB
 
+    window.setValueA = (el) => { valueA = el.innerHTML }
 
+    window.setValueB = (el) => { valueB = el.innerText }
 
+    window.data = function() {
 
+        return {
 
+            foo: 'bar',
 
+            init() {
 
+                window.setValueA(this.$refs.foo)
 
+
 
+                return () => {
 
+                    window.setValueB(this.$refs.foo)
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+    document.body.innerHTML = `
 
+        <div x-data="window.data()" x-init="init()">
 
+            <span x-text="foo" x-ref="foo">baz</span>
 
+        </div>
 
+    `
 
+
 
+    Alpine.start()
 
+
 
+    expect(valueA).toEqual('baz')
 
+    expect(valueB).toEqual('bar')
 
+})
 
+
 
 test('x-created', async () => {
 
     var spanValue
 
     window.setSpanValue = (el) => {

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio