5 năm trước cách đây · 3b4fd9a4b1
--- a/README.md
+++ b/README.md
@@ -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.1/dist/alpine.js" defer></script>
			
 
				+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.6.2/dist/alpine.js" defer></script>
			
 
				 ```
			
 
				 
			
 
				 That's it. It will initialize itself.
			
@@ -84,11 +84,12 @@ You can even use it for non-trivial things:
 
				 
			
 
				 ## Learn
			
 
				 
			
 
				-There are 13 directives available to you:
			
 
				+There are 14 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) |
			
@@ -126,7 +127,7 @@ Think of it like the `data` property of a Vue component.
 
				 
			
 
				 **Extract Component Logic**
			
 
				 
			
 
				-You can extract data (and behavior) into reusable functions:
			
 
				+You can extract data (and behavior) into reusable s:
			
 
				 
			
 
				 ```html
			
 
				 <div x-data="dropdown()">
			
@@ -157,6 +158,17 @@ 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>`
			
 
				+
			
 
				+**Structure:** `<div x-data="..." x-init="[expression]"></div>`
			
 
				+
			
 
				+`x-init` runs an expression when a component is initialized.
			
 
				+
			
 
				+---
			
 
				+
			
 
				 ### `x-created`
			
 
				 **Example:** `<div x-data"{ foo: 'bar' }" x-created="foo = 'baz"></div>`
			
 
				 
			
--- a/dist/alpine.js
+++ b/dist/alpine.js
--- a/dist/alpine.js.map
+++ b/dist/alpine.js.map
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 
				 {
			
 
				   "main": "dist/alpine.js",
			
 
				   "name": "alpinejs",
			
 
				-  "version": "1.6.1",
			
 
				+  "version": "1.6.2",
			
 
				   "repository": {
			
 
				     "type": "git",
			
 
				     "url": "git://github.com/alpinejs/alpine.git"
			
--- a/src/component.js
+++ b/src/component.js
@@ -6,6 +6,7 @@ export default class Component {
 
				 
			
 
				         const dataAttr = this.$el.getAttribute('x-data')
			
 
				         const dataExpression = dataAttr === '' ? '{}' : dataAttr
			
 
				+        const initExpression = this.$el.getAttribute('x-init')
			
 
				         const createdExpression = this.$el.getAttribute('x-created')
			
 
				         const mountedExpression = this.$el.getAttribute('x-mounted')
			
 
				 
			
@@ -34,6 +35,13 @@ export default class Component {
 
				         this.tickStack = []
			
 
				         this.collectingTickCallbacks = false
			
 
				 
			
 
				+        if (initExpression) {
			
 
				+            console.warn('AlpineJS Warning: "x-init" is depcricated and will be removed in the next major version. Use "x-created" instead.')
			
 
				+            this.pauseReactivity = true
			
 
				+            saferEvalNoReturn(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.
			
--- a/test/lifecycle.spec.js
+++ b/test/lifecycle.spec.js
@@ -5,6 +5,23 @@ global.MutationObserver = class {
 
				     observe() {}
			
 
				 }
			
 
				 
			
 
				+test('x-init', async () => {
			
 
				+    var spanValue
			
 
				+    window.setSpanValue = (el) => {
			
 
				+        spanValue = el.innerHTML
			
 
				+    }
			
 
				+
			
 
				+    document.body.innerHTML = `
			
 
				+        <div x-data="{ foo: 'bar' }" x-init="window.setSpanValue($refs.foo)">
			
 
				+            <span x-text="foo" x-ref="foo">baz</span>
			
 
				+        </div>
			
 
				+    `
			
 
				+
			
 
				+    Alpine.start()
			
 
				+
			
 
				+    expect(spanValue).toEqual('baz')
			
 
				+})
			
 
				+
			
 
				 test('x-created', async () => {
			
 
				     var spanValue
			
 
				     window.setSpanValue = (el) => {