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

wip

Caleb Porzio 5 years ago
parent
66ce2da45a
commit
f537f27153
6 changed files with 57 additions and 13 deletions
Split View Show Diff Stats
  1. 1 1
      dist/mix-manifest.json
  2. 18 5
      dist/project-x.js
  3. 8 1
      index.html
  4. 7 0
      src/component.js
  5. 16 0
      test/model.spec.js
  6. 7 6
      test/on.spec.js

+ 1 - 1
dist/mix-manifest.json
View File 

@@ -1,4 +1,4 @@
 
 {
 
-    "/project-x.js": "/project-x.js?id=956c347a4c443cc9eabd",
 
+    "/project-x.js": "/project-x.js?id=b1f0f893df2af0b6f35c",
 
     "/project-x.min.js": "/project-x.min.js?id=594fb2ceb5a9311a8dfb"
 
 }

+ 18 - 5
dist/project-x.js
View File 

@@ -958,9 +958,7 @@ function () {
 
               expression = _ref2.expression;
 
 
           switch (type) {
 
-            case 'bind':
 
-              var attrName = value;
 
-
 
+            case 'model':
 
               var _self$evaluateReturnE = self.evaluateReturnExpression(expression),
 
                   output = _self$evaluateReturnE.output,
 
                   deps = _self$evaluateReturnE.deps;
 
@@ -968,16 +966,31 @@ function () {
 
               if (self.concernedData.filter(function (i) {
 
                 return deps.includes(i);
 
               }).length > 0) {
 
-                self.updateAttributeValue(el, attrName, output);
 
+                self.updateAttributeValue(el, 'value', output);
 
               }
 
 
               break;
 
 
-            case 'text':
 
+            case 'bind':
 
+              var attrName = value;
 
+
 
               var _self$evaluateReturnE2 = self.evaluateReturnExpression(expression),
 
                   output = _self$evaluateReturnE2.output,
 
                   deps = _self$evaluateReturnE2.deps;
 
 
+              if (self.concernedData.filter(function (i) {
 
+                return deps.includes(i);
 
+              }).length > 0) {
 
+                self.updateAttributeValue(el, attrName, output);
 
+              }
 
+
 
+              break;
 
+
 
+            case 'text':
 
+              var _self$evaluateReturnE3 = self.evaluateReturnExpression(expression),
 
+                  output = _self$evaluateReturnE3.output,
 
+                  deps = _self$evaluateReturnE3.deps;
 
+
 
               if (self.concernedData.filter(function (i) {
 
                 return deps.includes(i);
 
               }).length > 0) {

+ 8 - 1
index.html
View File 

@@ -5,11 +5,18 @@
 
         </style>
 
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 
-        <script src="/dist/project-x.min.js"></script>
 
+        <script src="/dist/project-x.js"></script>
 
     </head>
 
     <body>
 
         <a href="/link-target">turbo-page</a>
 
 
+
 
+        <div x-data="{ foo: 'bar' }">
 
+            <input x-model="foo"></input>
 
+
 
+            <button x-on:click="foo = 'baz'"></button>
 
+        </div>
 
+
 
         <div x-data="{ open: false }">
 
             <button x-on:click="open = true">Open Dropdown</button>

+ 7 - 0
src/component.js
View File 

@@ -60,6 +60,13 @@ export default class Component {
 
         debounce(walk, 5)(this.el, function (el) {
 
             getXAttrs(el).forEach(({ type, value, modifiers, expression }) => {
 
                 switch (type) {
 
+                    case 'model':
 
+                        var { output, deps } = self.evaluateReturnExpression(expression)
 
+
 
+                        if (self.concernedData.filter(i => deps.includes(i)).length > 0) {
 
+                            self.updateAttributeValue(el, 'value', output)
 
+                        }
 
+                        break;
 
                     case 'bind':
 
                         const attrName = value
 
                         var { output, deps } = self.evaluateReturnExpression(expression)

+ 16 - 0
test/model.spec.js
View File 

@@ -31,6 +31,22 @@ test('x-model updates value when updated via input event', async () => {
 
     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 
 })
 
 
+test('x-model reflects data changed elsewhere', async () => {
 
+    document.body.innerHTML = `
 
+        <div x-data="{ foo: 'bar' }">
 
+            <input x-model="foo"></input>
 
+
 
+            <button x-on:click="foo = 'baz'"></button>
 
+        </div>
 
+    `
 
+
 
+    projectX.start()
 
+
 
+    document.querySelector('button').click()
 
+
 
+    await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 
+})
 
+
 
 test('x-model casts value to number if number modifier is present', async () => {
 
     document.body.innerHTML = `
 
         <div x-data="{ foo: null }">

+ 7 - 6
test/on.spec.js
View File 

@@ -56,11 +56,12 @@ test('data modified in event listener doesnt update uneffected attribute binding
 
 
 test('click away', async () => {
 
     document.body.innerHTML = `
 
+        <style>.hidden { display: none; }</style>
 
         <div id="outer">
 
             <div x-data="{ isOpen: true }">
 
                 <button x-on:click="isOpen = true"></button>
 
 
-                <ul x-bind:value="isOpen" x-on:click.away="isOpen = false">
 
+                <ul x-bind:class="{ 'hidden': ! isOpen }" x-on:click.away="isOpen = false">
 
                     <li>...</li>
 
                 </ul>
 
             </div>
 
@@ -69,21 +70,21 @@ test('click away', async () => {
 
 
     projectX.start()
 
 
-    expect(document.querySelector('ul').getAttribute('value')).toEqual('true')
 
+    expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false)
 
 
     document.querySelector('li').click()
 
 
-    await wait(() => { expect(document.querySelector('ul').getAttribute('value')).toEqual('true') })
 
+    await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
 
 
     document.querySelector('ul').click()
 
 
-    await wait(() => { expect(document.querySelector('ul').getAttribute('value')).toEqual('true') })
 
+    await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
 
 
     document.querySelector('#outer').click()
 
 
-    await wait(() => { expect(document.querySelector('ul').getAttribute('value')).toEqual('false') })
 
+    await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(true) })
 
 
     document.querySelector('button').click()
 
 
-    await wait(() => { expect(document.querySelector('ul').getAttribute('value')).toEqual('true') })
 
+    await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
 
 })