Merge branch 'master' into checkbox-values

onimy-apps · Mar 7, 2020 · 898adec · 898adec
2 parents 6f58523 + 98d26e1
commit 898adec
Show file tree

Hide file tree

Showing 12 changed files with 7,465 additions and 33 deletions.
diff --git a/README.ja.md b/README.ja.md
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
 
 > Note: This tool's syntax is almost entirely borrowed from [Vue](https://vuejs.org/) (and by extension [Angular](https://angularjs.org/)). I am forever grateful for the gift they are to the web.
 
+[**日本語ドキュメント**](./README.ja.md)
+
 ## Install
 
 **From CDN:** Add the following script to the end of your `<head>` section.

diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
diff --git a/dist/alpine-ie11.js.map b/dist/alpine-ie11.js.map
diff --git a/dist/alpine.js b/dist/alpine.js
@@ -109,17 +109,27 @@
     return new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`)(dataContext, ...Object.values(additionalHelperVariables));
   }
   function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
+    // For the cases when users pass only a function reference to the caller: `x-on:click="foo"`
+    // Where "foo" is a function. Also, we'll pass the function the event instance when we call it.
+    if (Object.keys(dataContext).includes(expression)) {
+      let methodReference = new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));
+
+      if (typeof methodReference === 'function') {
+        return methodReference.call(dataContext, additionalHelperVariables['$event']);
+      }
+    }
+
     return new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));
   }
+  const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/;
   function isXAttr(attr) {
     const name = replaceAtAndColonWithStandardSyntax(attr.name);
-    const xAttrRE = /x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/;
     return xAttrRE.test(name);
   }
   function getXAttrs(el, type) {
     return Array.from(el.attributes).filter(isXAttr).map(attr => {
       const name = replaceAtAndColonWithStandardSyntax(attr.name);
-      const typeMatch = name.match(/x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/);
+      const typeMatch = name.match(xAttrRE);
       const valueMatch = name.match(/:([a-zA-Z\-:]+)/);
       const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
       return {
@@ -1603,4 +1613,3 @@
   return Alpine;
 
 })));
-//# sourceMappingURL=alpine.js.map
diff --git a/dist/alpine.js.map b/dist/alpine.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/rollup-ie11.config.js b/rollup-ie11.config.js
@@ -1,29 +1,24 @@
 import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
-import { terser } from "rollup-plugin-terser";
-import resolve from "rollup-plugin-node-resolve"
-import commonjs from '@rollup/plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import multi from '@rollup/plugin-multi-entry';
+import replace from '@rollup/plugin-replace';
 
 export default {
     input: ['src/polyfills.js', 'src/index.js'],
     output: {
         name: 'Alpine',
         file: 'dist/alpine-ie11.js',
         format: 'umd',
-        sourcemap: true,
     },
     plugins: [
         multi(),
         commonjs(),
+        // 'observable-membrane' uses process.env. We don't have that...
+        replace({ "process.env.NODE_ENV": "'production'" }),
         resolve(),
         filesize(),
-        terser({
-            mangle: false,
-            compress: {
-                drop_debugger: false,
-            }
-        }),
         babel({
             babelrc: false,
             exclude: 'node_modules/**',

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,6 @@
 import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
-import resolve from "rollup-plugin-node-resolve"
+import resolve from 'rollup-plugin-node-resolve';
 import stripCode from 'rollup-plugin-strip-code';
 import replace from '@rollup/plugin-replace';
 
@@ -10,7 +10,6 @@ export default {
         name: 'Alpine',
         file: 'dist/alpine.js',
         format: 'umd',
-        sourcemap: true,
     },
     plugins: [
         // 'observable-membrane' uses process.env. We don't have that...

diff --git a/src/utils.js b/src/utils.js
@@ -64,16 +64,27 @@ export function saferEval(expression, dataContext, additionalHelperVariables = {
 }
 
 export function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
+    // For the cases when users pass only a function reference to the caller: `x-on:click="foo"`
+    // Where "foo" is a function. Also, we'll pass the function the event instance when we call it.
+    if (Object.keys(dataContext).includes(expression)) {
+        let methodReference = (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`))(
+            dataContext, ...Object.values(additionalHelperVariables)
+        )
+
+        if (typeof methodReference === 'function') {
+            return methodReference.call(dataContext, additionalHelperVariables['$event'])
+        }
+    }
+
     return (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))(
         dataContext, ...Object.values(additionalHelperVariables)
     )
 }
 
+const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/
+
 export function isXAttr(attr) {
     const name = replaceAtAndColonWithStandardSyntax(attr.name)
-
-    const xAttrRE = /x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/
-
     return xAttrRE.test(name)
 }
 
@@ -83,7 +94,7 @@ export function getXAttrs(el, type) {
         .map(attr => {
             const name = replaceAtAndColonWithStandardSyntax(attr.name)
 
-            const typeMatch = name.match(/x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/)
+            const typeMatch = name.match(xAttrRE)
             const valueMatch = name.match(/:([a-zA-Z\-:]+)/)
             const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 

diff --git a/test/constructor.spec.js b/test/constructor.spec.js
@@ -34,7 +34,7 @@ test('auto-detect new components at the top level', async () => {
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 })
 
-test('auto-detect newsted new components at the top level', async () => {
+test('auto-detect nested new components at the top level', async () => {
     var runObservers = []
 
     global.MutationObserver = class {
@@ -279,3 +279,19 @@ test('can clone an existing component to a new element', async () => {
 
     expect(document.querySelector('span').innerText).toEqual('bar')
 })
+
+test('x-attributes are matched exactly', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ showElement: false }">
+            <div id="el1" x-show="showElement" />
+            <div id="el2" xxx-show="showElement" />
+            <div id="el3" x-showabc="showElement" />
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.getElementById('el1').style.display).toEqual('none')
+    expect(document.getElementById('el2').style.display).not.toEqual('none')
+    await wait(() => { expect(document.getElementById('el3').style.display).not.toEqual('none') })
+})
diff --git a/test/on.spec.js b/test/on.spec.js
@@ -6,7 +6,7 @@ global.MutationObserver = class {
     observe() {}
 }
 
-test('data modified in event listener updates effected attribute bindings', async () => {
+test('data modified in event listener updates affected attribute bindings', async () => {
     document.body.innerHTML = `
         <div x-data="{ foo: 'bar' }">
             <button x-on:click="foo = 'baz'"></button>
@@ -24,7 +24,7 @@ test('data modified in event listener updates effected attribute bindings', asyn
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
-test('nested data modified in event listener updates effected attribute bindings', async () => {
+test('nested data modified in event listener updates affected attribute bindings', async () => {
     document.body.innerHTML = `
         <div x-data="{ nested: { foo: 'bar' } }">
             <button x-on:click="nested.foo = 'baz'"></button>
@@ -161,7 +161,7 @@ test('.once modifier', async () => {
     expect(document.querySelector('span').getAttribute('foo')).toEqual('1')
 })
 
-test('.once modifier doest remove listener if false is returned', async () => {
+test('.once modifier does not remove listener if false is returned', async () => {
     document.body.innerHTML = `
         <div x-data="{ count: 0 }">
             <button x-on:click.once="return ++count === 2"></button>
@@ -348,7 +348,6 @@ test('event with colon', async () => {
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
-
 test('prevent default action when an event returns false', async () => {
     window.confirm = jest.fn().mockImplementation(() => false)
 
@@ -372,3 +371,41 @@ test('prevent default action when an event returns false', async () => {
 
     expect(document.querySelector('input').checked).toEqual(true)
 })
+
+test('allow method reference to be passed to listeners', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar', changeFoo() { this.foo = 'baz' } }">
+            <button x-on:click="changeFoo"></button>
+            <span x-text="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+
+    document.querySelector('button').click()
+
+    await new Promise(resolve => setTimeout(resolve, 1))
+
+    expect(document.querySelector('span').innerText).toEqual('baz')
+})
+
+test('event instance is passed to method reference', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar', changeFoo(e) { this.foo = e.target.id } }">
+            <button x-on:click="changeFoo" id="baz"></button>
+            <span x-text="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+
+    document.querySelector('button').click()
+
+    await new Promise(resolve => setTimeout(resolve, 1))
+
+    expect(document.querySelector('span').innerText).toEqual('baz')
+})