Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
oleg
/
alpine
-ын хуулбар https://github.com/alpinejs/alpine.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Add x-text

Caleb Porzio 5 жил өмнө
parent
abd7701bf4
commit
db2f4c7331
6 өөрчлөгдсөн 65 нэмэгдсэн , 44 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 10 8
      dist/minimal.js
  2. 1 1
      dist/mix-manifest.json
  3. 4 17
      index.html
  4. 18 16
      src/component.js
  5. 2 2
      src/utils.js
  6. 30 0
      test/test.spec.js

+ 10 - 8
dist/minimal.js
Файл харах 

@@ -217,7 +217,7 @@ function () {
 
     value: function updateBoundAttributes() {
 
     value: function updateBoundAttributes() {
 
       var self = this;
 
       var self = this;
 
       Object(_utils__WEBPACK_IMPORTED_MODULE_0__["debounce"])(_utils__WEBPACK_IMPORTED_MODULE_0__["walk"], 5)(this.el, function (el) {
 
       Object(_utils__WEBPACK_IMPORTED_MODULE_0__["debounce"])(_utils__WEBPACK_IMPORTED_MODULE_0__["walk"], 5)(this.el, function (el) {
 
-        Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'bind').forEach(function (_ref2) {
 
+        Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'bind').concat(Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'text')).forEach(function (_ref2) {
 
           var type = _ref2.type,
 
           var type = _ref2.type,
 
               value = _ref2.value,
 
               value = _ref2.value,
 
               modifiers = _ref2.modifiers,
 
               modifiers = _ref2.modifiers,
 
@@ -234,7 +234,7 @@ function () {
 
           if (self.concernedData.filter(function (i) {
 
           if (self.concernedData.filter(function (i) {
 
             return isConscernedWith.includes(i);
 
             return isConscernedWith.includes(i);
 
           }).length > 0) {
 
           }).length > 0) {
 
-            self.updateBoundAttributeValue(el, value, result);
 
+            self.updateBoundAttributeValue(el, type, value, result);
 
           }
 
           }
 
         });
 
         });
 
       });
 
       });
 
@@ -245,7 +245,7 @@ function () {
 
       var _this2 = this;
 
       var _this2 = this;
 
 
 
       Object(_utils__WEBPACK_IMPORTED_MODULE_0__["walk"])(this.el, function (el) {
 
       Object(_utils__WEBPACK_IMPORTED_MODULE_0__["walk"])(this.el, function (el) {
 
-        Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'bind').forEach(function (_ref3) {
 
+        Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'bind').concat(Object(_utils__WEBPACK_IMPORTED_MODULE_0__["getXAttrs"])(el, 'text')).forEach(function (_ref3) {
 
           var type = _ref3.type,
 
           var type = _ref3.type,
 
               value = _ref3.value,
 
               value = _ref3.value,
 
               modifiers = _ref3.modifiers,
 
               modifiers = _ref3.modifiers,
 
@@ -259,14 +259,16 @@ function () {
 
           });
 
           });
 
           var result = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["saferEval"])(expression, proxiedData);
 
           var result = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["saferEval"])(expression, proxiedData);
 
 
 
-          _this2.updateBoundAttributeValue(el, value, result);
 
+          _this2.updateBoundAttributeValue(el, type, value, result);
 
         });
 
         });
 
       });
 
       });
 
     }
 
     }
 
   }, {
 
   }, {
 
     key: "updateBoundAttributeValue",
 
     key: "updateBoundAttributeValue",
 
-    value: function updateBoundAttributeValue(el, attrName, value) {
 
-      if (attrName === 'class') {
 
+    value: function updateBoundAttributeValue(el, type, attrName, value) {
 
+      if (type === 'text') {
 
+        el.innerText = value;
 
+      } else if (attrName === 'class') {
 
         // Use the class object syntax that vue uses to toggle them.
 
         // Use the class object syntax that vue uses to toggle them.
 
         Object.keys(value).forEach(function (className) {
 
         Object.keys(value).forEach(function (className) {
 
           if (value[className]) {
 
           if (value[className]) {
 
@@ -387,12 +389,12 @@ function saferEvalNoReturn(expression, dataContext) {
 
   return new Function(['$data'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with($data) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
 
   return new Function(['$data'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with($data) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
 
 }
 
 }
 
 function isXAttr(attr) {
 
 function isXAttr(attr) {
 
-  var xAttrRE = /x-(on|bind|data):/;
 
+  var xAttrRE = /x-(on|bind|data|text)/;
 
   return xAttrRE.test(attr.name);
 
   return xAttrRE.test(attr.name);
 
 }
 
 }
 
 function getXAttrs(el, name) {
 
 function getXAttrs(el, name) {
 
   return Array.from(el.attributes).filter(isXAttr).map(function (attr) {
 
   return Array.from(el.attributes).filter(isXAttr).map(function (attr) {
 
-    var typeMatch = attr.name.match(/x-(on|bind|data):/);
 
+    var typeMatch = attr.name.match(/x-(on|bind|data|text)/);
 
     var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/);
 
     var valueMatch = attr.name.match(/:([a-zA-Z\-]+)/);
 
     var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
 
     var modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
 
     return {
 
     return {

+ 1 - 1
dist/mix-manifest.json
Файл харах 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
     "/rename-me.js": "/rename-me.js?id=bbf39d4a044a5ded45f2",
 
     "/rename-me.js": "/rename-me.js?id=bbf39d4a044a5ded45f2",
 
     "/rename-me.min.js": "/rename-me.min.js?id=727c8cae5cc9ff82a386",
 
     "/rename-me.min.js": "/rename-me.min.js?id=727c8cae5cc9ff82a386",
 
-    "/minimal.js": "/minimal.js?id=9d75625d65a35b1f6a1b",
 
+    "/minimal.js": "/minimal.js?id=e5ea12f8b965950d4cc7",
 
     "/minimal.min.js": "/minimal.min.js?id=5456a8b662edbed0ae52"
 
     "/minimal.min.js": "/minimal.min.js?id=5456a8b662edbed0ae52"
 
 }
 
 }

+ 4 - 17
index.html
Файл харах 

@@ -5,28 +5,15 @@
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div id="outer">
 
-            outer
 
-            <div x-data="{ isOpen: true }">
 
-                <button x-on:click="$data.isOpen = true"></button>
 
+        <div x-data="{ name: 'bar' }">
 
+            <input type="text" x-on:input="name = $event.target.value">
 
 
 
-                <ul x-bind:value="$data.isOpen" x-on:click.away="$data.isOpen = false">
 
-                    <li>...</li>
 
-                </ul>
 
-            </div>
 
-        </div>
 
-
 
-        <div x-data='{ isOpen: false, name: ""}'>
 
-            <button x-on:click="isOpen = ! isOpen">toggle</button>
 
-
 
-            <div x-bind:class="{ 'hidden' : ! isOpen }" x-on:click.away="isOpen = false">
 
-                <p>hey, I'm a dropdown<p>
 
-            </div>
 
+            <span x-text="name"></span>
 
         </div>
 
         </div>
 
 
 
         <script src="/dist/minimal.js"></script>
 
         <script src="/dist/minimal.js"></script>
 
         <script>
 
         <script>
 
-            window.minimal.start('hey')
 
+            window.minimal.start()
 
         </script>
 
         </script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 18 - 16
src/component.js
Файл харах 

@@ -84,7 +84,7 @@ export default class Component {
 
     updateBoundAttributes() {
 
     updateBoundAttributes() {
 
         var self = this
 
         var self = this
 
         debounce(walk, 5)(this.el, function (el) {
 
         debounce(walk, 5)(this.el, function (el) {
 
-            getXAttrs(el, 'bind').forEach(({ type, value, modifiers, expression }) => {
 
+            getXAttrs(el, 'bind').concat(getXAttrs(el, 'text')).forEach(({ type, value, modifiers, expression }) => {
 
                 var isConscernedWith = []
 
                 var isConscernedWith = []
 
 
 
                 const proxiedData = new Proxy(self.data, {
 
                 const proxiedData = new Proxy(self.data, {
 
@@ -98,34 +98,36 @@ export default class Component {
 
                 const result = saferEval(expression, proxiedData)
 
                 const result = saferEval(expression, proxiedData)
 
 
 
                 if (self.concernedData.filter(i => isConscernedWith.includes(i)).length > 0) {
 
                 if (self.concernedData.filter(i => isConscernedWith.includes(i)).length > 0) {
 
-                    self.updateBoundAttributeValue(el, value, result)
 
+                    self.updateBoundAttributeValue(el, type, value, result)
 
                 }
 
                 }
 
             })
 
             })
 
         })
 
         })
 
     }
 
     }
 
 
 
     updateAllBoundAttributes() {
 
     updateAllBoundAttributes() {
 
-            walk(this.el, el => {
 
-                getXAttrs(el, 'bind').forEach(({ type, value, modifiers, expression }) => {
 
-                    var isConscernedWith = []
 
+        walk(this.el, el => {
 
+            getXAttrs(el, 'bind').concat(getXAttrs(el, 'text')).forEach(({ type, value, modifiers, expression }) => {
 
+                var isConscernedWith = []
 
 
 
-                    const proxiedData = new Proxy(this.data, {
 
-                        get(object, prop) {
 
-                            isConscernedWith.push(prop)
 
+                const proxiedData = new Proxy(this.data, {
 
+                    get(object, prop) {
 
+                        isConscernedWith.push(prop)
 
 
 
-                            return object[prop]
 
-                        }
 
-                    })
 
+                        return object[prop]
 
+                    }
 
+                })
 
 
 
-                    const result = saferEval(expression, proxiedData)
 
+                const result = saferEval(expression, proxiedData)
 
 
 
-                    this.updateBoundAttributeValue(el, value, result)
 
-                })
 
+                this.updateBoundAttributeValue(el, type, value, result)
 
             })
 
             })
 
+        })
 
     }
 
     }
 
 
 
-    updateBoundAttributeValue(el, attrName, value) {
 
-        if (attrName === 'class') {
 
+    updateBoundAttributeValue(el, type, attrName, value) {
 
+        if (type === 'text') {
 
+            el.innerText = value
 
+        } else if (attrName === 'class') {
 
             // Use the class object syntax that vue uses to toggle them.
 
             // Use the class object syntax that vue uses to toggle them.
 
             Object.keys(value).forEach(className => {
 
             Object.keys(value).forEach(className => {
 
                 if (value[className]) {
 
                 if (value[className]) {

+ 2 - 2
src/utils.js
Файл харах 

@@ -42,7 +42,7 @@ export function saferEvalNoReturn(expression, dataContext, additionalHelperVaria
 
 }
 
 }
 
 
 
 export function isXAttr(attr) {
 
 export function isXAttr(attr) {
 
-    const xAttrRE = /x-(on|bind|data):/
 
+    const xAttrRE = /x-(on|bind|data|text)/
 
 
 
     return xAttrRE.test(attr.name)
 
     return xAttrRE.test(attr.name)
 
 }
 
 }
 
@@ -51,7 +51,7 @@ export function getXAttrs(el, name) {
 
     return Array.from(el.attributes)
 
     return Array.from(el.attributes)
 
         .filter(isXAttr)
 
         .filter(isXAttr)
 
         .map(attr => {
 
         .map(attr => {
 
-            const typeMatch = attr.name.match(/x-(on|bind|data):/)
 
+            const typeMatch = attr.name.match(/x-(on|bind|data|text)/)
 
             const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
 
             const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
 
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

+ 30 - 0
test/test.spec.js
Файл харах 

@@ -13,6 +13,36 @@ test('attribute bindings are set on initialize', async () => {
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 
 })
 
 })
 
 
 
+test('x-text on init', async () => {
 
+    document.body.innerHTML = `
 
+        <div x-data="{ foo: 'bar' }">
 
+            <span x-text="foo"></span>
 
+        </div>
 
+    `
 
+
 
+    minimal.start()
 
+
 
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 
+})
 
+
 
+test('x-text on triggered update', async () => {
 
+    document.body.innerHTML = `
 
+        <div x-data="{ foo: '' }">
 
+            <button x-on:click="foo = 'bar'"></button>
 
+
 
+            <span x-text="foo"></span>
 
+        </div>
 
+    `
 
+
 
+    minimal.start()
 
+
 
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('') })
 
+
 
+    document.querySelector('button').click()
 
+
 
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 
+})
 
+
 
 test('class attribute bindings are removed by object syntax', async () => {
 
 test('class attribute bindings are removed by object syntax', async () => {
 
     document.body.innerHTML = `
 
     document.body.innerHTML = `
 
         <div x-data="{ isOn: false }">
 
         <div x-data="{ isOn: false }">