├── .gitignore
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── run-tests.yml
├── src
    ├── directives
    │   ├── html.js
    │   ├── text.js
    │   ├── if.js
    │   ├── show.js
    │   ├── model.js
    │   ├── bind.js
    │   ├── on.js
    │   └── for.js
    ├── polyfills.js
    ├── observable.js
    ├── index.js
    ├── utils.js
    └── component.js
├── test
    ├── version.spec.js
    ├── utils.spec.js
    ├── cloak.spec.js
    ├── mutations.spec.js
    ├── dispatch.spec.js
    ├── strict-mode.spec.js
    ├── readonly.spec.js
    ├── text.spec.js
    ├── el.spec.js
    ├── html.spec.js
    ├── ref.spec.js
    ├── nesting.spec.js
    ├── next-tick.spec.js
    ├── watch.spec.js
    ├── if.spec.js
    ├── lifecycle.spec.js
    ├── show.spec.js
    ├── data.spec.js
    ├── debounce.spec.js
    ├── constructor.spec.js
    ├── model.spec.js
    ├── on.spec.js
    ├── for.spec.js
    └── bind.spec.js
├── .editorconfig
├── babel.config.js
├── turbolinks-manual-test
    ├── navigated-away
    │   └── index.html
    └── index.html
├── rollup.config.js
├── LICENSE.md
├── package.json
├── rollup-ie11.config.js
├── examples
    ├── tags.html
    └── index.html
├── jest.config.js
└── README.ja.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | SCRATCH.md
3 | COMMIT_MSG.aim.txt
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: [calebporzio]
4 | 


--------------------------------------------------------------------------------
/src/directives/html.js:
--------------------------------------------------------------------------------
1 | export function handleHtmlDirective(component, el, expression, extraVars) {
2 |     el.innerHTML = component.evaluateReturnExpression(el, expression, extraVars)
3 | }
4 | 


--------------------------------------------------------------------------------
/test/version.spec.js:
--------------------------------------------------------------------------------
1 | import { version } from 'alpinejs'
2 | import pkg from '../package.json'
3 | 
4 | test('Alpine.version matches package.json version field', () => {
5 |     expect(version).toEqual(String(pkg.version))
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 4
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/test/utils.spec.js:
--------------------------------------------------------------------------------
1 | import { arrayUnique } from '../src/utils'
2 | 
3 | test('utils/arrayUnique', () => {
4 |     const arrayMock = [1, 1, 2, 3, 1, 'a', 'b', 'c', 'b']
5 |     const expected = arrayUnique(arrayMock)
6 |     expect(expected).toEqual([1, 2, 3, 'a', 'b', 'c'])
7 | })
8 | 


--------------------------------------------------------------------------------
/src/polyfills.js:
--------------------------------------------------------------------------------
1 | // For the IE11 build.
2 | import "shim-selected-options"
3 | import "proxy-polyfill/proxy.min.js"
4 | import "element-closest/browser.js"
5 | import "element-remove"
6 | import "classlist-polyfill"
7 | import "@webcomponents/template"
8 | import "custom-event-polyfill"
9 | 


--------------------------------------------------------------------------------
/src/directives/text.js:
--------------------------------------------------------------------------------
1 | export function handleTextDirective(el, output, expression) {
2 |     // If nested model key is undefined, set the default value to empty string.
3 |     if (output === undefined && expression.match(/\./).length) {
4 |         output = ''
5 |     }
6 | 
7 |     el.innerText = output
8 | }
9 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     presets: [
 3 |         [
 4 |             '@babel/preset-env',
 5 |             {
 6 |                 targets: {
 7 |                     node: 'current',
 8 |                     edge: '18'
 9 |                 },
10 |             },
11 |         ],
12 |     ],
13 | };
14 | 


--------------------------------------------------------------------------------
/test/cloak.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('x-cloak is removed', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ hidden: true }">
11 |             <span x-cloak></span>
12 |         </div>
13 |     `
14 | 
15 |     expect(document.querySelector('span').getAttribute('x-cloak')).not.toBeNull()
16 | 
17 |     Alpine.start()
18 | 
19 |     await wait(() => { expect(document.querySelector('span').getAttribute('x-cloak')).toBeNull() })
20 | })
21 | 


--------------------------------------------------------------------------------
/turbolinks-manual-test/navigated-away/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 4 |         <script src="/dist/alpine.js" defer></script>
 5 |     </head>
 6 |     <body>
 7 |         <h1>Second Page</h1>
 8 | 
 9 |         <div x-data="{ foo: 'bar' }" id="foo" data-turbolinks-permanent>
10 |             <input x-model="foo"></input>
11 | 
12 |             <button x-on:click="foo = 'baz'"></button>
13 |         </div>
14 |     </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/.github/workflows/run-tests.yml:
--------------------------------------------------------------------------------
 1 | name: Run Jest Tests
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     strategy:
11 |       matrix:
12 |         node-version: [12.x]
13 | 
14 |     steps:
15 |     - uses: actions/checkout@v1
16 |     - name: Use Node.js ${{ matrix.node-version }}
17 |       uses: actions/setup-node@v1
18 |       with:
19 |         node-version: ${{ matrix.node-version }}
20 |     - name: npm install, build, and test
21 |       run: |
22 |         npm ci
23 |         npm run build --if-present
24 |         npm test
25 |       env:
26 |         CI: true
27 | 


--------------------------------------------------------------------------------
/turbolinks-manual-test/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 4 |         <script src="/dist/alpine.js" defer></script>
 5 |     </head>
 6 |     <body>
 7 |         <h1>First Page</h1>
 8 |         <a href="turbolinks-manual-test/navigated-away">Second Page</a>
 9 | 
10 |         <div x-data="{ foo: 'bar' }" id="foo" data-turbolinks-permanent>
11 |             <input x-model="foo"></input>
12 | 
13 |             <button x-on:click="foo = 'baz'"></button>
14 |         </div>
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/test/mutations.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | 
 3 | test('catch disconnected nodes that were used as targets for any mutations', async () => {
 4 |     const runObservers = []
 5 | 
 6 |     global.MutationObserver = class {
 7 |         constructor(callback) { runObservers.push(callback) }
 8 |         observe() {}
 9 |     }
10 | 
11 |     document.body.innerHTML = `
12 |         <div x-data="{}">
13 |         </div>
14 |     `
15 | 
16 |     Alpine.start()
17 | 
18 |     runObservers.forEach(cb => cb([
19 |         {
20 |             target: document.createElement('div'),
21 |             type: 'childList',
22 |             addedNodes: [ document.createElement('div') ],
23 |         }
24 |     ]))
25 | })
26 | 


--------------------------------------------------------------------------------
/test/dispatch.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('$dispatch', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ foo: 'bar' }" x-on:custom-event="foo = $event.detail.newValue">
11 |             <span x-text="foo"></span>
12 | 
13 |             <button x-on:click="$dispatch('custom-event', {newValue: 'baz'})"></button>
14 |         </div>
15 |     `
16 | 
17 |     Alpine.start()
18 | 
19 |     expect(document.querySelector('span').innerText).toEqual('bar')
20 | 
21 |     document.querySelector('button').click()
22 | 
23 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
24 | })
25 | 


--------------------------------------------------------------------------------
/test/strict-mode.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('Proxy does not error in strict mode when reactivity is suspended', async () => {
 9 |     "use strict"
10 | 
11 |     global.statCounter = function () {
12 |         return {
13 |             count: 0,
14 |             init() {
15 |                 this.count = 1200;
16 |             }
17 |         }
18 |     }
19 |     document.body.innerHTML = `
20 |         <div class="my-48">
21 |             <div x-data="statCounter()" x-init="init()">
22 |                 <span x-text="count"></span>
23 |             </div>
24 |         </div>
25 |     `
26 | 
27 |     Alpine.start()
28 | 
29 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1200) })
30 | })
31 | 


--------------------------------------------------------------------------------
/test/readonly.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('read-only properties do not break the proxy', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ files: [] }">
11 |             <input type="file"
12 |                 multiple
13 |                 x-ref="files"
14 |                 x-on:change="files = [...$refs.files.files].filter(Boolean)">
15 |             <span x-text="files.length"></span>
16 |         </div>
17 |     `
18 | 
19 |     Alpine.start()
20 | 
21 |     expect(document.querySelector('span').innerText).toEqual(0)
22 | 
23 |     const input = document.querySelector('input')
24 |     Object.defineProperty(input, 'files', {
25 |         get: () => [new File(["foo"], "foo.txt", {type: "text/plain"})]
26 |     })
27 | 
28 |     input.dispatchEvent(new Event('change'));
29 | 
30 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
31 | })
32 | 


--------------------------------------------------------------------------------
/test/text.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('x-text on init', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ foo: 'bar' }">
11 |             <span x-text="foo"></span>
12 |         </div>
13 |     `
14 | 
15 |     Alpine.start()
16 | 
17 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
18 | })
19 | 
20 | test('x-text on triggered update', async () => {
21 |     document.body.innerHTML = `
22 |         <div x-data="{ foo: '' }">
23 |             <button x-on:click="foo = 'bar'"></button>
24 | 
25 |             <span x-text="foo"></span>
26 |         </div>
27 |     `
28 | 
29 |     Alpine.start()
30 | 
31 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('') })
32 | 
33 |     document.querySelector('button').click()
34 | 
35 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
36 | })
37 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import filesize from 'rollup-plugin-filesize';
 3 | import resolve from 'rollup-plugin-node-resolve';
 4 | import stripCode from 'rollup-plugin-strip-code';
 5 | import replace from '@rollup/plugin-replace';
 6 | import pkg from './package.json';
 7 | 
 8 | export default {
 9 |     input: 'src/index.js',
10 |     output: {
11 |         name: 'Alpine',
12 |         file: 'dist/alpine.js',
13 |         format: 'umd',
14 |     },
15 |     plugins: [
16 |         replace({
17 |             // 'observable-membrane' uses process.env. We don't have that...
18 |             "process.env.NODE_ENV": "'production'",
19 |             // inject Alpine.js package version number
20 |             "process.env.PKG_VERSION": `"${pkg.version}"`
21 |         }),
22 |         resolve(),
23 |         filesize(),
24 |         babel({
25 |             exclude: 'node_modules/**'
26 |         }),
27 |         stripCode({
28 |             start_comment: 'IE11-ONLY:START',
29 |             end_comment: 'IE11-ONLY:END'
30 |         })
31 |     ]
32 | }
33 | 


--------------------------------------------------------------------------------
/test/el.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('$el', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data>
11 |             <button @click="$el.innerHTML = 'foo'"></button>
12 |         </div>
13 |     `
14 | 
15 |     Alpine.start()
16 | 
17 |     expect(document.querySelector('div').innerHTML).not.toEqual('foo')
18 | 
19 |     document.querySelector('button').click()
20 | 
21 |     await wait(() => { expect(document.querySelector('div').innerHTML).toEqual('foo') })
22 | })
23 | 
24 | test('$el doesnt return a proxy', async () => {
25 |     var isProxy
26 |     window.setIsProxy = function (el) {
27 |         isProxy = !! el.isProxy
28 |     }
29 | 
30 |     document.body.innerHTML = `
31 |         <div x-data>
32 |             <button @click="setIsProxy($el)"></button>
33 |         </div>
34 |     `
35 | 
36 |     Alpine.start()
37 | 
38 |     document.querySelector('button').click()
39 | 
40 |     expect(isProxy).toEqual(false)
41 | })
42 | 


--------------------------------------------------------------------------------
/test/html.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('x-html on init', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ foo: '<h1>bar</h1>' }">
11 |             <span x-html="foo"></span>
12 |         </div>
13 |     `
14 | 
15 |     Alpine.start()
16 | 
17 |     await wait(() => { expect(document.querySelector('span').innerHTML).toEqual('<h1>bar</h1>') })
18 | })
19 | 
20 | test('x-html on triggered update', async () => {
21 |     document.body.innerHTML = `
22 |         <div x-data="{ foo: '' }">
23 |             <button x-on:click="foo = '<h1>bar</h1>'"></button>
24 | 
25 |             <span x-html="foo"></span>
26 |         </div>
27 |     `
28 | 
29 |     Alpine.start()
30 | 
31 |     await wait(() => { expect(document.querySelector('span').innerHTML).toEqual('') })
32 | 
33 |     document.querySelector('button').click()
34 | 
35 |     await wait(() => { expect(document.querySelector('span').innerHTML).toEqual('<h1>bar</h1>') })
36 | })
37 | 


--------------------------------------------------------------------------------
/src/directives/if.js:
--------------------------------------------------------------------------------
 1 | import { transitionIn, transitionOut } from '../utils'
 2 | 
 3 | export function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
 4 |     if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if`)
 5 | 
 6 |     const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true
 7 | 
 8 |     if (expressionResult && ! elementHasAlreadyBeenAdded) {
 9 |         const clone = document.importNode(el.content, true);
10 | 
11 |         el.parentElement.insertBefore(clone, el.nextElementSibling)
12 | 
13 |         transitionIn(el.nextElementSibling, () => {}, initialUpdate)
14 | 
15 |         component.initializeElements(el.nextElementSibling, extraVars)
16 | 
17 |         el.nextElementSibling.__x_inserted_me = true
18 |     } else if (! expressionResult && elementHasAlreadyBeenAdded) {
19 |         transitionOut(el.nextElementSibling, () => {
20 |             el.nextElementSibling.remove()
21 |         }, initialUpdate)
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # MIT License
 2 | 
 3 | Copyright © 2019-2020 Caleb Porzio and contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test/ref.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('can reference elements from event listeners', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{}">
11 |             <span x-ref="bob"></span>
12 | 
13 |             <button x-on:click="$refs['bob'].innerText = 'lob'"></button>
14 |         </div>
15 |     `
16 | 
17 |     Alpine.start()
18 | 
19 |     expect(document.querySelector('span').innerText).toEqual(undefined)
20 | 
21 |     document.querySelector('button').click()
22 | 
23 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
24 | })
25 | 
26 | test('can reference elements from data object methods', async () => {
27 |     document.body.innerHTML = `
28 |         <div x-data="{ foo() { this.$refs.bob.innerText = 'lob' } }">
29 |             <span x-ref="bob"></span>
30 | 
31 |             <button x-on:click="foo()"></button>
32 |         </div>
33 |     `
34 | 
35 |     Alpine.start()
36 | 
37 |     expect(document.querySelector('span').innerText).toEqual(undefined)
38 | 
39 |     document.querySelector('button').click()
40 | 
41 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
42 | })
43 | 


--------------------------------------------------------------------------------
/test/nesting.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
 4 | 
 5 | global.MutationObserver = class {
 6 |     observe() {}
 7 | }
 8 | 
 9 | test('can nest components', async () => {
10 |     document.body.innerHTML = `
11 |         <div x-data="{ foo: 'bar' }">
12 |             <span x-text="foo"></span>
13 | 
14 |             <div x-data="{ foo: 'bob' }">
15 |                 <button x-on:click="foo = 'baz'">Something</button>
16 |             </div>
17 |         </div>
18 |     `
19 | 
20 |     Alpine.start()
21 | 
22 |     expect(document.querySelector('span').innerText).toEqual('bar')
23 | 
24 |     document.querySelector('button').click()
25 | 
26 |     await timeout(20)
27 | 
28 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
29 | })
30 | 
31 | test('can access parent properties after nested components', async () => {
32 |     document.body.innerHTML = `
33 |         <div x-data="{ foo: 'bar' }">
34 |             <div x-data="{ foo: 'bob' }">
35 |                 <button x-on:click="foo = 'baz'">Something</button>
36 |             </div>
37 | 
38 |             <span x-text="foo"></span>
39 |         </div>
40 |     `
41 | 
42 |     Alpine.start()
43 | 
44 |     expect(document.querySelector('span').innerText).toEqual('bar')
45 | })
46 | 


--------------------------------------------------------------------------------
/test/next-tick.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('$nextTick', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{foo: 'bar'}">
11 |             <span x-text="foo" x-ref="span"></span>
12 | 
13 |             <button x-on:click="foo = 'baz'; $nextTick(() => {$refs.span.innerText = 'bob'})"></button>
14 |         </div>
15 |     `
16 | 
17 |     Alpine.start()
18 | 
19 |     expect(document.querySelector('span').innerText).toEqual('bar')
20 | 
21 |     document.querySelector('button').click()
22 | 
23 |     await wait(() => expect(document.querySelector('span').innerText).toEqual('bob'))
24 | })
25 | 
26 | test('nextTick wait for x-for to finish rendering', async () => {
27 |     document.body.innerHTML = `
28 |         <div x-data="{list: ['one', 'two'], check: 2}">
29 |             <template x-for="item in list">
30 |                 <span x-text="item"></span>
31 |             </template>
32 | 
33 |             <p x-text="check"></p>
34 | 
35 |             <button x-on:click="list = ['one', 'two', 'three']; $nextTick(() => {check = document.querySelectorAll('span').length})"></button>
36 |         </div>
37 |     `
38 | 
39 |     Alpine.start()
40 | 
41 |     expect(document.querySelector('p').innerText).toEqual(2)
42 | 
43 |     document.querySelector('button').click()
44 | 
45 |     await wait(() => { expect(document.querySelector('p').innerText).toEqual(3) })
46 | })
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "main": "dist/alpine.js",
 3 |     "name": "alpinejs",
 4 |     "version": "2.3.1",
 5 |     "repository": {
 6 |         "type": "git",
 7 |         "url": "git://github.com/alpinejs/alpine.git"
 8 |     },
 9 |     "scripts": {
10 |         "watch": "rollup -c -w",
11 |         "build": "concurrently \"rollup -c\" \"npx rollup -c rollup-ie11.config.js\"",
12 |         "test": "npx jest",
13 |         "test:debug": "node --inspect node_modules/.bin/jest --runInBand"
14 |     },
15 |     "author": "Caleb Porzio",
16 |     "license": "MIT",
17 |     "devDependencies": {
18 |         "@babel/core": "^7.8.7",
19 |         "@babel/preset-env": "^7.8.7",
20 |         "@rollup/plugin-commonjs": "^11.0.2",
21 |         "@rollup/plugin-multi-entry": "^3.0.0",
22 |         "@rollup/plugin-replace": "^2.3.1",
23 |         "@testing-library/dom": "^6.16.0",
24 |         "@testing-library/jest-dom": "^4.2.4",
25 |         "@webcomponents/template": "^1.4.1",
26 |         "babel-jest": "^25.1.0",
27 |         "classlist-polyfill": "^1.2.0",
28 |         "concurrently": "^5.1.0",
29 |         "core-js": "^3.6.4",
30 |         "custom-event-polyfill": "^1.0.7",
31 |         "element-closest": "^3.0.2",
32 |         "element-remove": "^1.0.4",
33 |         "jest": "^25.1.0",
34 |         "jsdom-simulant": "^1.1.2",
35 |         "observable-membrane": "^0.26.1",
36 |         "proxy-polyfill": "^0.3.1",
37 |         "rollup": "^1.32.1",
38 |         "rollup-plugin-babel": "^4.4.0",
39 |         "rollup-plugin-filesize": "^6.2.1",
40 |         "rollup-plugin-node-resolve": "^5.2.0",
41 |         "rollup-plugin-strip-code": "^0.2.7",
42 |         "rollup-plugin-terser": "^5.3.0",
43 |         "shim-selected-options": "^1.0.1"
44 |     },
45 |     "dependencies": {}
46 | }
47 | 


--------------------------------------------------------------------------------
/rollup-ie11.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import filesize from 'rollup-plugin-filesize';
 3 | import resolve from 'rollup-plugin-node-resolve';
 4 | import commonjs from '@rollup/plugin-commonjs';
 5 | import multi from '@rollup/plugin-multi-entry';
 6 | import replace from '@rollup/plugin-replace';
 7 | import pkg from './package.json';
 8 | 
 9 | export default {
10 |     input: ['src/polyfills.js', 'src/index.js'],
11 |     output: {
12 |         name: 'Alpine',
13 |         file: 'dist/alpine-ie11.js',
14 |         format: 'umd',
15 |     },
16 |     plugins: [
17 |         multi(),
18 |         commonjs(),
19 |         replace({
20 |             // 'observable-membrane' uses process.env. We don't have that...
21 |             "process.env.NODE_ENV": "'production'",
22 |             // inject Alpine.js package version number
23 |             "process.env.PKG_VERSION": `"${pkg.version}"`
24 |         }),
25 |         resolve(),
26 |         filesize(),
27 |         babel({
28 |             babelrc: false,
29 |             exclude: 'node_modules/**',
30 |             presets: [
31 |                 [
32 |                     "@babel/preset-env",
33 |                     {
34 |                         targets: {
35 |                             browsers: "> 0.5%, ie >= 11"
36 |                         },
37 |                         modules: false,
38 |                         spec: true,
39 |                         useBuiltIns: "usage",
40 |                         forceAllTransforms: true,
41 |                         corejs: {
42 |                             version: 3,
43 |                             proposals: false
44 |                         }
45 |                     }
46 |                 ]
47 |             ]
48 |         })
49 |     ]
50 | }
51 | 


--------------------------------------------------------------------------------
/test/watch.spec.js:
--------------------------------------------------------------------------------
 1 | import Alpine from 'alpinejs'
 2 | import { wait } from '@testing-library/dom'
 3 | 
 4 | global.MutationObserver = class {
 5 |     observe() {}
 6 | }
 7 | 
 8 | test('$watch', async () => {
 9 |     document.body.innerHTML = `
10 |         <div x-data="{ foo: 'bar', bob: 'lob' }" x-init="$watch('foo', value => { bob = value })">
11 |             <h1 x-text="foo"></h1>
12 |             <h2 x-text="bob"></h2>
13 | 
14 |             <button x-on:click="foo = 'baz'"></button>
15 |         </div>
16 |     `
17 | 
18 |     Alpine.start()
19 | 
20 |     expect(document.querySelector('h1').innerText).toEqual('bar')
21 |     expect(document.querySelector('h2').innerText).toEqual('lob')
22 | 
23 |     document.querySelector('button').click()
24 | 
25 |     await wait(() => {
26 |         expect(document.querySelector('h1').innerText).toEqual('baz')
27 |         expect(document.querySelector('h2').innerText).toEqual('baz')
28 |     })
29 | })
30 | 
31 | test('$watch nested properties', async () => {
32 |     document.body.innerHTML = `
33 |         <div x-data="{ foo: { bar: 'baz', bob: 'lob' } }" x-init="
34 |             $watch('foo.bar', value => { foo.bob = value });
35 |         ">
36 |             <h1 x-text="foo.bar"></h1>
37 |             <h2 x-text="foo.bob"></h2>
38 | 
39 |             <button x-on:click="foo.bar = 'law'"></button>
40 |         </div>
41 |     `
42 | 
43 |     Alpine.start()
44 | 
45 |     expect(document.querySelector('h1').innerText).toEqual('baz')
46 |     expect(document.querySelector('h2').innerText).toEqual('lob')
47 | 
48 |     document.querySelector('button').click()
49 | 
50 |     await wait(() => {
51 |         expect(document.querySelector('h1').innerText).toEqual('law')
52 |         expect(document.querySelector('h2').innerText).toEqual('law')
53 |     })
54 | })
55 | 


--------------------------------------------------------------------------------
/src/directives/show.js:
--------------------------------------------------------------------------------
 1 | import { transitionIn, transitionOut } from '../utils'
 2 | 
 3 | export function handleShowDirective(component, el, value, modifiers, initialUpdate = false) {
 4 |     const hide = () => {
 5 |         el.style.display = 'none'
 6 |     }
 7 | 
 8 |     const show = () => {
 9 |         if (el.style.length === 1 && el.style.display === 'none') {
10 |             el.removeAttribute('style')
11 |         } else {
12 |             el.style.removeProperty('display')
13 |         }
14 |     }
15 | 
16 |     if (initialUpdate === true) {
17 |         if (value) {
18 |             show()
19 |         } else {
20 |             hide()
21 |         }
22 |         return
23 |     }
24 | 
25 |     const handle = (resolve) => {
26 |         if (! value) {
27 |             if ( el.style.display !== 'none' ) {
28 |                 transitionOut(el, () => {
29 |                     resolve(() => {
30 |                         hide()
31 |                     })
32 |                 })
33 |             } else {
34 |                 resolve(() => {})
35 |             }
36 |         } else {
37 |             if ( el.style.display !== '' ) {
38 |                 transitionIn(el, () => {
39 |                     show()
40 |                 })
41 |             }
42 | 
43 |             // Resolve immediately, only hold up parent `x-show`s for hidin.
44 |             resolve(() => {})
45 |         }
46 |     }
47 | 
48 |     // The working of x-show is a bit complex because we need to
49 |     // wait for any child transitions to finish before hiding
50 |     // some element. Also, this has to be done recursively.
51 | 
52 |     // If x-show.immediate, foregoe the waiting.
53 |     if (modifiers.includes('immediate')) {
54 |         handle(finish => finish())
55 |         return
56 |     }
57 | 
58 |     // x-show is encountered during a DOM tree walk. If an element
59 |     // we encounter is NOT a child of another x-show element we
60 |     // can execute the previous x-show stack (if one exists).
61 |     if (component.showDirectiveLastElement && ! component.showDirectiveLastElement.contains(el)) {
62 |         component.executeAndClearRemainingShowDirectiveStack()
63 |     }
64 | 
65 |     // We'll push the handler onto a stack to be handled later.
66 |     component.showDirectiveStack.push(handle)
67 | 
68 |     component.showDirectiveLastElement = el
69 | }
70 | 


--------------------------------------------------------------------------------
/src/observable.js:
--------------------------------------------------------------------------------
 1 | import ObservableMembrane from 'observable-membrane'
 2 | 
 3 | export function wrap(data, mutationCallback) {
 4 |     /* IE11-ONLY:START */
 5 |     return wrapForIe11(data, mutationCallback)
 6 |     /* IE11-ONLY:END */
 7 | 
 8 | 
 9 |     let membrane = new ObservableMembrane({
10 |         valueMutated(target, key) {
11 |             mutationCallback(target, key)
12 |         },
13 |     })
14 | 
15 |     return {
16 |         data: membrane.getProxy(data),
17 |         membrane: membrane,
18 |     }
19 | }
20 | 
21 | export function unwrap(membrane, observable) {
22 |     let unwrappedData = membrane.unwrapProxy(observable)
23 |     let copy = {}
24 | 
25 |     Object.keys(unwrappedData).forEach(key => {
26 |         if (['$el', '$refs', '$nextTick', '$watch'].includes(key)) return
27 | 
28 |         copy[key] = unwrappedData[key]
29 |     })
30 | 
31 |     return copy
32 | }
33 | 
34 | function wrapForIe11(data, mutationCallback) {
35 |     const proxyHandler = {
36 |         set(target, key, value) {
37 |             // Set the value converting it to a "Deep Proxy" when required
38 |             // Note that if a project is not a valid object, it won't be converted to a proxy
39 |             const setWasSuccessful = Reflect.set(target, key, deepProxy(value, proxyHandler))
40 | 
41 |             mutationCallback(target, key)
42 | 
43 |             return setWasSuccessful
44 |         },
45 |         get(target, key) {
46 |             // Provide a way to determine if this object is an Alpine proxy or not.
47 |             if (key === "$isAlpineProxy") return true
48 | 
49 |             // Just return the flippin' value. Gawsh.
50 |             return target[key]
51 |         }
52 |     }
53 | 
54 |     return {
55 |         data: deepProxy(data, proxyHandler),
56 |         membrane: {
57 |             unwrapProxy(proxy) {
58 |                 return proxy
59 |             }
60 |         },
61 |     }
62 | }
63 | 
64 | function deepProxy(target, proxyHandler) {
65 |     // If target is null, return it.
66 |     if (target === null) return target;
67 | 
68 |     // If target is not an object, return it.
69 |     if (typeof target !== 'object') return target;
70 | 
71 |     // If target is a DOM node (like in the case of this.$el), return it.
72 |     if (target instanceof Node) return target
73 | 
74 |     // If target is already an Alpine proxy, return it.
75 |     if (target['$isAlpineProxy']) return target;
76 | 
77 |     // Otherwise proxy the properties recursively.
78 |     // This enables reactivity on setting nested data.
79 |     // Note that if a project is not a valid object, it won't be converted to a proxy
80 |     for (let property in target) {
81 |         target[property] = deepProxy(target[property], proxyHandler)
82 |     }
83 | 
84 |     return new Proxy(target, proxyHandler)
85 | }
86 | 


--------------------------------------------------------------------------------
/src/directives/model.js:
--------------------------------------------------------------------------------
 1 | import { registerListener } from './on'
 2 | 
 3 | export function registerModelListener(component, el, modifiers, expression, extraVars) {
 4 |     // If the element we are binding to is a select, a radio, or checkbox
 5 |     // we'll listen for the change event instead of the "input" event.
 6 |     var event = (el.tagName.toLowerCase() === 'select')
 7 |         || ['checkbox', 'radio'].includes(el.type)
 8 |         || modifiers.includes('lazy')
 9 |         ? 'change' : 'input'
10 | 
11 |     const listenerExpression = `${expression} = rightSideOfExpression($event, ${expression})`
12 | 
13 |     registerListener(component, el, event, modifiers, listenerExpression, () => {
14 |         return {
15 |             ...extraVars(),
16 |             rightSideOfExpression: generateModelAssignmentFunction(el, modifiers, expression),
17 |         }
18 |     })
19 | }
20 | 
21 | function generateModelAssignmentFunction(el, modifiers, expression) {
22 |     if (el.type === 'radio') {
23 |         // Radio buttons only work properly when they share a name attribute.
24 |         // People might assume we take care of that for them, because
25 |         // they already set a shared "x-model" attribute.
26 |         if (! el.hasAttribute('name')) el.setAttribute('name', expression)
27 |     }
28 | 
29 |     return (event, currentValue) => {
30 |         // Check for event.detail due to an issue where IE11 handles other events as a CustomEvent.
31 |         if (event instanceof CustomEvent && event.detail) {
32 |             return event.detail
33 |         } else if (el.type === 'checkbox') {
34 |             // If the data we are binding to is an array, toggle it's value inside the array.
35 |             if (Array.isArray(currentValue)) {
36 |                 return event.target.checked ? currentValue.concat([event.target.value]) : currentValue.filter(i => i !== event.target.value)
37 |             } else {
38 |                 return event.target.checked
39 |             }
40 |         } else if (el.tagName.toLowerCase() === 'select' && el.multiple) {
41 |             return modifiers.includes('number')
42 |                 ? Array.from(event.target.selectedOptions).map(option => {
43 |                     const rawValue = option.value || option.text
44 |                     const number = rawValue ? parseFloat(rawValue) : null
45 |                     return isNaN(number) ? rawValue : number
46 |                 })
47 |                 : Array.from(event.target.selectedOptions).map(option => {
48 |                     return option.value || option.text
49 |                 })
50 |         } else {
51 |             const rawValue = event.target.value
52 |             const number = rawValue ? parseFloat(rawValue) : null
53 |             return modifiers.includes('number')
54 |                 ? (isNaN(number) ? rawValue : number)
55 |                 : (modifiers.includes('trim') ? rawValue.trim() : rawValue)
56 |         }
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/examples/tags.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <style>
 4 |         .tags-input {
 5 |         display: flex;
 6 |         flex-wrap: wrap;
 7 |         background-color: #fff;
 8 |         border-width: 1px;
 9 |         border-radius: .25rem;
10 |         padding-left: .5rem;
11 |         padding-right: 1rem;
12 |         padding-top: .5rem;
13 |         padding-bottom: .25rem;
14 |         }
15 | 
16 |         .tags-input-tag {
17 |         display: inline-flex;
18 |         line-height: 1;
19 |         align-items: center;
20 |         font-size: .875rem;
21 |         background-color: #bcdefa;
22 |         color: #1c3d5a;
23 |         border-radius: .25rem;
24 |         user-select: none;
25 |         padding: .25rem;
26 |         margin-right: .5rem;
27 |         margin-bottom: .25rem;
28 |         }
29 | 
30 |         .tags-input-tag:last-of-type {
31 |         margin-right: 0;
32 |         }
33 | 
34 |         .tags-input-remove {
35 |         color: #2779bd;
36 |         font-size: 1.125rem;
37 |         line-height: 1;
38 |         }
39 | 
40 |         .tags-input-remove:first-child {
41 |         margin-right: .25rem;
42 |         }
43 | 
44 |         .tags-input-remove:last-child {
45 |         margin-left: .25rem;
46 |         }
47 | 
48 |         .tags-input-remove:focus {
49 |         outline: 0;
50 |         }
51 | 
52 |         .tags-input-text {
53 |         flex: 1;
54 |         outline: 0;
55 |         padding-top: .25rem;
56 |         padding-bottom: .25rem;
57 |         margin-left: .5rem;
58 |         margin-bottom: .25rem;
59 |         min-width: 10rem;
60 |         }
61 | 
62 |         .py-16 {
63 |         padding-top: 4rem;
64 |         padding-bottom: 4rem;
65 |     }
66 |     </style>
67 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.5.1/tailwind.css">
68 |         <script src="/dist/alpine.js" defer></script>
69 |     </head>
70 |     <body>
71 | <div x-data="{tags: ['hey'], newTag: '' }" class="bg-grey-lighter px-8 py-16 min-h-screen">
72 |     <template x-for="tag in tags">
73 |         <input type="hidden" name="tags[]" :value="tag">
74 |     </template>
75 | 
76 |     <div class="max-w-sm w-full mx-auto">
77 |         <div class="tags-input">
78 |             <template x-for="tag in tags" :key="tag">
79 |                 <span class="tags-input-tag">
80 |                     <span x-text="tag"></span>
81 |                     <button type="button" class="tags-input-remove" @click="tags = tags.filter(i => i !== tag)">
82 |                         &times;
83 |                     </button>
84 |                 </span>
85 |             </template>
86 | 
87 |             <input class="tags-input-text" placeholder="Add tag..."
88 |                 @keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
89 |                 @keydown.backspace="if (newTag.trim() === '') tags.pop()"
90 |                 x-model="newTag"
91 |             >
92 |         </div>
93 |     </div>
94 | </div>
95 |     </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/test/if.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('x-if', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ show: false }">
 11 |             <button x-on:click="show = ! show"></button>
 12 | 
 13 |             <template x-if="show">
 14 |                 <p></p>
 15 |             </template>
 16 |         </div>
 17 |     `
 18 | 
 19 |     Alpine.start()
 20 | 
 21 |     expect(document.querySelector('p')).toBeFalsy()
 22 | 
 23 |     document.querySelector('button').click()
 24 | 
 25 |     await wait(() => { expect(document.querySelector('p')).toBeTruthy() })
 26 | })
 27 | 
 28 | test('elements inside x-if are still reactive', async () => {
 29 |     document.body.innerHTML = `
 30 |         <div x-data="{ show: false, foo: 'bar' }">
 31 |             <h1 x-on:click="show = ! show"></h1>
 32 | 
 33 |             <template x-if="show">
 34 |                 <h2 @click="foo = 'baz'"></h2>
 35 |             </template>
 36 | 
 37 |             <span x-text="foo"></span>
 38 |         </div>
 39 |     `
 40 | 
 41 |     Alpine.start()
 42 | 
 43 |     expect(document.querySelector('h2')).toBeFalsy()
 44 |     expect(document.querySelector('span').innerText).toEqual('bar')
 45 | 
 46 |     document.querySelector('h1').click()
 47 | 
 48 |     await wait(() => {
 49 |         expect(document.querySelector('h2')).toBeTruthy()
 50 |     })
 51 | 
 52 |     document.querySelector('h2').click()
 53 | 
 54 |     await wait(() => {
 55 |         expect(document.querySelector('span').innerText).toEqual('baz')
 56 |     })
 57 | })
 58 | 
 59 | test('x-if works inside a loop', async () => {
 60 |     document.body.innerHTML = `
 61 |         <div x-data="{ foos: [{bar: 'baz'}, {bar: 'bop'}]}">
 62 |             <template x-for="foo in foos">
 63 |                 <div>
 64 |                     <template x-if="foo.bar === 'baz'">
 65 |                         <div>
 66 |                             <span x-text="foo.bar"></span>
 67 |                         </div>
 68 |                     </template>
 69 |                 </div>
 70 |             </template>
 71 |         </div>
 72 |     `
 73 | 
 74 |     Alpine.start()
 75 | 
 76 |     expect(document.querySelectorAll('span').length).toEqual(1)
 77 |     expect(document.querySelector('span').innerText).toEqual('baz')
 78 | })
 79 | 
 80 | test('event listeners are attached once', async () => {
 81 |     document.body.innerHTML = `
 82 |         <div x-data="{ count: 0 }">
 83 |             <span x-text="count"></span>
 84 |             <template x-if="true">
 85 |                 <button @click="count += 1">Click me</button>
 86 |             </template>
 87 |         </div>
 88 |     `
 89 | 
 90 |     Alpine.start()
 91 | 
 92 |     expect(document.querySelector('span').innerText).toEqual(0)
 93 | 
 94 |     document.querySelector('button').click()
 95 | 
 96 |     await wait(() => {
 97 |         expect(document.querySelector('span').innerText).toEqual(1)
 98 |     })
 99 | })
100 | 


--------------------------------------------------------------------------------
/test/lifecycle.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('x-init', async () => {
  9 |     var spanValue
 10 |     window.setSpanValue = (el) => {
 11 |         spanValue = el.innerHTML
 12 |     }
 13 | 
 14 |     document.body.innerHTML = `
 15 |         <div x-data="{ foo: 'bar' }" x-init="window.setSpanValue($refs.foo)">
 16 |             <span x-text="foo" x-ref="foo">baz</span>
 17 |         </div>
 18 |     `
 19 | 
 20 |     Alpine.start()
 21 | 
 22 |     expect(spanValue).toEqual('baz')
 23 | })
 24 | 
 25 | test('x-init from data function with callback return for "x-mounted" functionality', async () => {
 26 |     var valueA
 27 |     var valueB
 28 |     window.setValueA = (el) => { valueA = el.innerHTML }
 29 |     window.setValueB = (el) => { valueB = el.innerText }
 30 |     window.data = function() {
 31 |         return {
 32 |             foo: 'bar',
 33 |             init() {
 34 |                 window.setValueA(this.$refs.foo)
 35 | 
 36 |                 return () => {
 37 |                     window.setValueB(this.$refs.foo)
 38 |                 }
 39 |             }
 40 |         }
 41 |     }
 42 | 
 43 |     document.body.innerHTML = `
 44 |         <div x-data="window.data()" x-init="init()">
 45 |             <span x-text="foo" x-ref="foo">baz</span>
 46 |         </div>
 47 |     `
 48 | 
 49 |     Alpine.start()
 50 | 
 51 |     expect(valueA).toEqual('baz')
 52 |     expect(valueB).toEqual('bar')
 53 | })
 54 | 
 55 | test('callbacks registered within x-init can affect reactive data changes', async () => {
 56 |     document.body.innerHTML = `
 57 |         <div x-data="{ bar: 'baz', foo() { this.$refs.foo.addEventListener('click', () => { this.bar = 'bob' }) } }" x-init="foo()">
 58 |             <button x-ref="foo"></button>
 59 | 
 60 |             <span x-text="bar"></span>
 61 |         </div>
 62 |     `
 63 | 
 64 |     Alpine.start()
 65 | 
 66 |     expect(document.querySelector('span').innerText).toEqual('baz')
 67 | 
 68 |     document.querySelector('button').click()
 69 | 
 70 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
 71 | })
 72 | 
 73 | test('callbacks registered within x-init callback can affect reactive data changes', async () => {
 74 |     document.body.innerHTML = `
 75 |         <div x-data="{ bar: 'baz', foo() { this.$refs.foo.addEventListener('click', () => { this.bar = 'bob' }) } }" x-init="() => { foo() }">
 76 |             <button x-ref="foo"></button>
 77 | 
 78 |             <span x-text="bar"></span>
 79 |         </div>
 80 |     `
 81 | 
 82 |     Alpine.start()
 83 | 
 84 |     expect(document.querySelector('span').innerText).toEqual('baz')
 85 | 
 86 |     document.querySelector('button').click()
 87 | 
 88 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
 89 | })
 90 | 
 91 | test('x-init is capable of dispatching an event', async () => {
 92 |     document.body.innerHTML = `
 93 |         <div x-data="{ foo: 'bar' }" @update-foo="foo = $event.detail.foo">
 94 |             <div x-data x-init="$dispatch('update-foo', { foo: 'baz' })"></div>
 95 | 
 96 |             <span x-text="foo"></span>
 97 |         </div>
 98 |     `
 99 | 
100 |     Alpine.start()
101 | 
102 |     await wait(() => {
103 |         expect(document.querySelector('span').innerText).toEqual('baz')
104 |     })
105 | })
106 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import Component from './component'
  2 | import { domReady, isTesting } from './utils'
  3 | 
  4 | const Alpine = {
  5 |     version: process.env.PKG_VERSION,
  6 |     start: async function () {
  7 |         if (! isTesting()) {
  8 |             await domReady()
  9 |         }
 10 | 
 11 |         this.discoverComponents(el => {
 12 |             this.initializeComponent(el)
 13 |         })
 14 | 
 15 |         // It's easier and more performant to just support Turbolinks than listen
 16 |         // to MutationObserver mutations at the document level.
 17 |         document.addEventListener("turbolinks:load", () => {
 18 |             this.discoverUninitializedComponents(el => {
 19 |                 this.initializeComponent(el)
 20 |             })
 21 |         })
 22 | 
 23 |         this.listenForNewUninitializedComponentsAtRunTime(el => {
 24 |             this.initializeComponent(el)
 25 |         })
 26 |     },
 27 | 
 28 |     discoverComponents: function (callback) {
 29 |         const rootEls = document.querySelectorAll('[x-data]');
 30 | 
 31 |         rootEls.forEach(rootEl => {
 32 |             callback(rootEl)
 33 |         })
 34 |     },
 35 | 
 36 |     discoverUninitializedComponents: function (callback, el = null) {
 37 |         const rootEls = (el || document).querySelectorAll('[x-data]');
 38 | 
 39 |         Array.from(rootEls)
 40 |             .filter(el => el.__x === undefined)
 41 |             .forEach(rootEl => {
 42 |                 callback(rootEl)
 43 |             })
 44 |     },
 45 | 
 46 |     listenForNewUninitializedComponentsAtRunTime: function (callback) {
 47 |         const targetNode = document.querySelector('body');
 48 | 
 49 |         const observerOptions = {
 50 |             childList: true,
 51 |             attributes: true,
 52 |             subtree: true,
 53 |         }
 54 | 
 55 |         const observer = new MutationObserver((mutations) => {
 56 |             for (let i=0; i < mutations.length; i++){
 57 |                 if (mutations[i].addedNodes.length > 0) {
 58 |                     mutations[i].addedNodes.forEach(node => {
 59 |                         // Discard non-element nodes (like line-breaks)
 60 |                         if (node.nodeType !== 1) return
 61 | 
 62 |                         // Discard any changes happening within an existing component.
 63 |                         // They will take care of themselves.
 64 |                         if (node.parentElement && node.parentElement.closest('[x-data]')) return
 65 | 
 66 |                         this.discoverUninitializedComponents((el) => {
 67 |                             this.initializeComponent(el)
 68 |                         }, node.parentElement)
 69 |                     })
 70 |                 }
 71 |               }
 72 |         })
 73 | 
 74 |         observer.observe(targetNode, observerOptions)
 75 |     },
 76 | 
 77 |     initializeComponent: function (el) {
 78 |         if (! el.__x) {
 79 |             el.__x = new Component(el)
 80 |         }
 81 |     },
 82 | 
 83 |     clone: function (component, newEl) {
 84 |         if (! newEl.__x) {
 85 |             newEl.__x = new Component(newEl, component.getUnobservedData())
 86 |         }
 87 |     }
 88 | }
 89 | 
 90 | if (! isTesting()) {
 91 |     window.Alpine = Alpine
 92 | 
 93 |     if (window.deferLoadingAlpine) {
 94 |         window.deferLoadingAlpine(function () {
 95 |             window.Alpine.start()
 96 |         })
 97 |    } else {
 98 |         window.Alpine.start()
 99 |    }
100 | }
101 | 
102 | export default Alpine
103 | 


--------------------------------------------------------------------------------
/src/directives/bind.js:
--------------------------------------------------------------------------------
 1 | import { arrayUnique , isBooleanAttr } from '../utils'
 2 | 
 3 | export function handleAttributeBindingDirective(component, el, attrName, expression, extraVars, attrType) {
 4 |     var value = component.evaluateReturnExpression(el, expression, extraVars)
 5 | 
 6 |     if (attrName === 'value') {
 7 |         // If nested model key is undefined, set the default value to empty string.
 8 |         if (value === undefined && expression.match(/\./).length) {
 9 |             value = ''
10 |         }
11 | 
12 |         if (el.type === 'radio') {
13 |             // Set radio value from x-bind:value, if no "value" attribute exists.
14 |             // If there are any initial state values, radio will have a correct
15 |             // "checked" value since x-bind:value is processed before x-model.
16 |             if (el.attributes.value === undefined && attrType === 'bind') {
17 |                 el.value = value
18 |             } else if (attrType !== 'bind') {
19 |                 el.checked = el.value == value
20 |             }
21 |         } else if (el.type === 'checkbox') {
22 |             if (Array.isArray(value)) {
23 |                 // I'm purposely not using Array.includes here because it's
24 |                 // strict, and because of Numeric/String mis-casting, I
25 |                 // want the "includes" to be "fuzzy".
26 |                 let valueFound = false
27 |                 value.forEach(val => {
28 |                     if (val == el.value) {
29 |                         valueFound = true
30 |                     }
31 |                 })
32 | 
33 |                 el.checked = valueFound
34 |             } else {
35 |                 el.checked = !! value
36 |             }
37 |             // If we are explicitly binding a string to the :value, set the string,
38 |             // If the value is a boolean, leave it alone, it will be set to "on"
39 |             // automatically.
40 |             if (typeof value === 'string') {
41 |                 el.value = value
42 |             }
43 |         } else if (el.tagName === 'SELECT') {
44 |             updateSelect(el, value)
45 |         } else {
46 |             // Cursor position should be restored back to origin due to a safari bug
47 |             const selectionStart = el.selectionStart
48 |             const selectionEnd = el.selectionEnd
49 |             const selectionDirection = el.selectionDirection
50 | 
51 |             el.value = value
52 | 
53 |             if (el === document.activeElement && selectionStart !== null) {
54 |                 el.setSelectionRange(selectionStart, selectionEnd, selectionDirection)
55 |             }
56 |         }
57 |     } else if (attrName === 'class') {
58 |         if (Array.isArray(value)) {
59 |             const originalClasses = el.__x_original_classes || []
60 |             el.setAttribute('class', arrayUnique(originalClasses.concat(value)).join(' '))
61 |         } else if (typeof value === 'object') {
62 |             // Sorting the keys / class names by their boolean value will ensure that
63 |             // anything that evaluates to `false` and needs to remove classes is run first.
64 |             const keysSortedByBooleanValue = Object.keys(value).sort((a, b) => value[a] - value[b]);
65 | 
66 |             keysSortedByBooleanValue.forEach(classNames => {
67 |                 if (value[classNames]) {
68 |                     classNames.split(' ').forEach(className => el.classList.add(className))
69 |                 } else {
70 |                     classNames.split(' ').forEach(className => el.classList.remove(className))
71 |                 }
72 |             })
73 |         } else {
74 |             const originalClasses = el.__x_original_classes || []
75 |             const newClasses = value.split(' ')
76 |             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
77 |         }
78 |     } else if (isBooleanAttr(attrName)) {
79 |         // Boolean attributes have to be explicitly added and removed, not just set.
80 |         if (!! value) {
81 |             el.setAttribute(attrName, '')
82 |         } else {
83 |             el.removeAttribute(attrName)
84 |         }
85 |     } else {
86 |         el.setAttribute(attrName, value)
87 |     }
88 | }
89 | 
90 | function updateSelect(el, value) {
91 |     const arrayWrappedValue = [].concat(value).map(value => { return value + '' })
92 | 
93 |     Array.from(el.options).forEach(option => {
94 |         option.selected = arrayWrappedValue.includes(option.value || option.text)
95 |     })
96 | }
97 | 


--------------------------------------------------------------------------------
/test/show.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('x-show toggles display: none; with no other style attributes', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ show: true }">
 11 |             <span x-show="show"></span>
 12 | 
 13 |             <button x-on:click="show = false"></button>
 14 |         </div>
 15 |     `
 16 | 
 17 |     Alpine.start()
 18 | 
 19 |     expect(document.querySelector('span').getAttribute('style')).toEqual(null)
 20 | 
 21 |     document.querySelector('button').click()
 22 | 
 23 |     await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
 24 | })
 25 | 
 26 | test('x-show toggles display: none; with other style attributes', async () => {
 27 |     document.body.innerHTML = `
 28 |         <div x-data="{ show: true }">
 29 |             <span x-show="show" style="color: blue;"></span>
 30 | 
 31 |             <button x-on:click="show = false"></button>
 32 |         </div>
 33 |     `
 34 | 
 35 |     Alpine.start()
 36 | 
 37 |     expect(document.querySelector('span').getAttribute('style')).toEqual('color: blue;')
 38 | 
 39 |     document.querySelector('button').click()
 40 | 
 41 |     await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('color: blue; display: none;') })
 42 | })
 43 | 
 44 | test('x-show waits for transitions within it to finish before hiding an elements', async () => {
 45 |     document.body.innerHTML = `
 46 |         <style>
 47 |             .transition { transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform; }
 48 |             .duration-75 {
 49 |                 transition-duration: 75ms;
 50 |             }
 51 |         </style>
 52 |         <div x-data="{ show: true }">
 53 |             <span x-show="show">
 54 |                 <h1 x-show="show" x-transition:leave="transition duration-75"></h1>
 55 |             </span>
 56 | 
 57 |             <button x-on:click="show = false"></button>
 58 |         </div>
 59 |     `
 60 | 
 61 |     Alpine.start()
 62 | 
 63 |     expect(document.querySelector('span').getAttribute('style')).toEqual(null)
 64 | 
 65 |     document.querySelector('button').click()
 66 | 
 67 |     await new Promise((resolve) => setTimeout(() => { resolve(); }, 50))
 68 | 
 69 |     await wait(() => {
 70 |         expect(document.querySelector('span').getAttribute('style')).toEqual(null)
 71 |         expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
 72 |     })
 73 | })
 74 | 
 75 | test('x-show does NOT wait for transitions to finish if .immediate is present', async () => {
 76 |     document.body.innerHTML = `
 77 |         <style>
 78 |             .transition { transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform; }
 79 |             .duration-75 {
 80 |                 transition-duration: 75ms;
 81 |             }
 82 |         </style>
 83 |         <div x-data="{ show: true }">
 84 |             <span x-show.immediate="show">
 85 |                 <h1 x-show="show" x-transition:leave="transition duration-75"></h1>
 86 |             </span>
 87 | 
 88 |             <button x-on:click="show = false"></button>
 89 |         </div>
 90 |     `
 91 | 
 92 |     Alpine.start()
 93 | 
 94 |     expect(document.querySelector('span').getAttribute('style')).toEqual(null)
 95 | 
 96 |     document.querySelector('button').click()
 97 | 
 98 |     await new Promise(resolve => setTimeout(resolve, 1))
 99 | 
100 |     expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
101 |     expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
102 | })
103 | 
104 | test('x-show works with nested x-shows of different functions (hiding vs showing)', async () => {
105 |     document.body.innerHTML = `
106 |         <div x-data="{ show1: true, show2: true }">
107 |             <span x-show="show1">
108 |                 <h1 x-show="show2"></h1>
109 |             </span>
110 | 
111 |             <button x-on:click="show1 = false"></button>
112 |         </div>
113 |     `
114 | 
115 |     Alpine.start()
116 | 
117 |     expect(document.querySelector('span').getAttribute('style')).toEqual(null)
118 |     expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
119 | 
120 |     document.querySelector('button').click()
121 | 
122 |     await new Promise((resolve) => setTimeout(() => { resolve(); }, 50))
123 | 
124 |     await wait(() => {
125 |         expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
126 |         expect(document.querySelector('h1').getAttribute('style')).toEqual(null)
127 |     })
128 | })
129 | 


--------------------------------------------------------------------------------
/test/data.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('data manipulated on component object is reactive', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ foo: 'bar' }">
 11 |             <span x-text="foo"></span>
 12 |         </div>
 13 |     `
 14 | 
 15 |     Alpine.start()
 16 | 
 17 |     document.querySelector('div').__x.$data.foo = 'baz'
 18 | 
 19 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
 20 | })
 21 | 
 22 | test('x-data attribute value is optional', async () => {
 23 |     document.body.innerHTML = `
 24 |         <div x-data>
 25 |             <span x-text="'foo'"></span>
 26 |         </div>
 27 |     `
 28 | 
 29 |     Alpine.start()
 30 | 
 31 |     expect(document.querySelector('span').innerText).toEqual('foo')
 32 | })
 33 | 
 34 | test('x-data can use attributes from a reusable function', async () => {
 35 |     document.body.innerHTML = `
 36 |         <div x-data="test()">
 37 |             <span x-text="foo"></span>
 38 |         </div>
 39 |     `
 40 |         test = function() {
 41 |             return {
 42 |                 foo: 'bar',
 43 |             }
 44 |         }
 45 | 
 46 |     Alpine.start()
 47 | 
 48 |     expect(document.querySelector('span').innerText).toEqual('bar')
 49 | })
 50 | 
 51 | test('functions in x-data are reactive', async () => {
 52 |     document.body.innerHTML = `
 53 |         <div x-data="{ foo: 'bar', getFoo() {return this.foo}}">
 54 |             <span x-text="getFoo()"></span>
 55 |             <button x-on:click="foo = 'baz'"></button>
 56 |         </div>
 57 |     `
 58 |     Alpine.start()
 59 | 
 60 |     expect(document.querySelector('span').innerText).toEqual('bar')
 61 | 
 62 |     document.querySelector('button').click()
 63 | 
 64 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
 65 | })
 66 | 
 67 | test('Proxies are not nested and duplicated when manipulating an array', async () => {
 68 |     document.body.innerHTML = `
 69 |         <div x-data="{ list: [ {name: 'foo'}, {name: 'bar'} ] }">
 70 |             <span x-text="list[0].name"></span>
 71 |             <button x-on:click="list.sort((a, b) => (a.name > b.name) ? 1 : -1)"></button>
 72 |             <h1 x-on:click="list.sort((a, b) => (a.name < b.name) ? 1 : -1)"></h1>
 73 |         </div>
 74 |     `
 75 | 
 76 |     Alpine.start()
 77 | 
 78 |     // Before this fix: https://github.com/alpinejs/alpine/pull/141
 79 |     // This test would create exponentially slower performance and eventually stall out.
 80 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 81 |     document.querySelector('button').click()
 82 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 83 |     document.querySelector('h1').click()
 84 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 85 |     document.querySelector('button').click()
 86 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 87 |     document.querySelector('h1').click()
 88 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 89 |     document.querySelector('button').click()
 90 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 91 |     document.querySelector('h1').click()
 92 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 93 |     document.querySelector('button').click()
 94 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 95 |     document.querySelector('h1').click()
 96 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 97 |     document.querySelector('button').click()
 98 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 99 |     document.querySelector('h1').click()
100 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
101 |     document.querySelector('button').click()
102 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
103 |     document.querySelector('h1').click()
104 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
105 |     document.querySelector('button').click()
106 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
107 | })
108 | 
109 | test('component refresh one time per update whatever the number of mutations in the update', async () => {
110 |     window.refreshCount = 0
111 | 
112 |     document.body.innerHTML = `
113 |         <div x-data="{ items: ['foo', 'bar'], qux: 'quux', test() {return ++refreshCount} }">
114 |             <span x-text="test()"></span>
115 |             <button x-on:click="items.push('baz'); qux = 'corge';"></button>
116 |         </div>
117 |     `
118 | 
119 |     Alpine.start()
120 | 
121 |     expect(refreshCount).toEqual(1)
122 | 
123 |     document.querySelector('button').click()
124 | 
125 |     await wait(() => { expect(refreshCount).toEqual(2) })
126 | })
127 | 


--------------------------------------------------------------------------------
/src/directives/on.js:
--------------------------------------------------------------------------------
  1 | import { kebabCase, debounce, isNumeric } from '../utils'
  2 | 
  3 | export function registerListener(component, el, event, modifiers, expression, extraVars = {}) {
  4 |     if (modifiers.includes('away')) {
  5 |         let handler = e => {
  6 |             // Don't do anything if the click came form the element or within it.
  7 |             if (el.contains(e.target)) return
  8 | 
  9 |             // Don't do anything if this element isn't currently visible.
 10 |             if (el.offsetWidth < 1 && el.offsetHeight < 1) return
 11 | 
 12 |             // Now that we are sure the element is visible, AND the click
 13 |             // is from outside it, let's run the expression.
 14 |             runListenerHandler(component, expression, e, extraVars)
 15 | 
 16 |             if (modifiers.includes('once')) {
 17 |                 document.removeEventListener(event, handler)
 18 |             }
 19 |         }
 20 | 
 21 |         // Listen for this event at the root level.
 22 |         document.addEventListener(event, handler)
 23 |     } else {
 24 |         let listenerTarget = modifiers.includes('window')
 25 |             ? window : (modifiers.includes('document') ? document : el)
 26 | 
 27 |         let handler = e => {
 28 |             // Remove this global event handler if the element that declared it
 29 |             // has been removed. It's now stale.
 30 |             if (listenerTarget === window || listenerTarget === document) {
 31 |                 if (! document.body.contains(el)) {
 32 |                     listenerTarget.removeEventListener(event, handler)
 33 |                     return
 34 |                 }
 35 |             }
 36 | 
 37 |             if (isKeyEvent(event)) {
 38 |                 if (isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers)) {
 39 |                     return
 40 |                 }
 41 |             }
 42 | 
 43 |             if (modifiers.includes('prevent')) e.preventDefault()
 44 |             if (modifiers.includes('stop')) e.stopPropagation()
 45 | 
 46 |             // If the .self modifier isn't present, or if it is present and
 47 |             // the target element matches the element we are registering the
 48 |             // event on, run the handler
 49 |             if (! modifiers.includes('self') || e.target === el) {
 50 |                 const returnValue = runListenerHandler(component, expression, e, extraVars)
 51 | 
 52 |                 if (returnValue === false) {
 53 |                     e.preventDefault()
 54 |                 } else {
 55 |                     if (modifiers.includes('once')) {
 56 |                         listenerTarget.removeEventListener(event, handler)
 57 |                     }
 58 |                 }
 59 |             }
 60 |         }
 61 | 
 62 |         if (modifiers.includes('debounce')) {
 63 |             let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
 64 |             let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
 65 |             handler = debounce(handler, wait, this)
 66 |         }
 67 | 
 68 |         listenerTarget.addEventListener(event, handler)
 69 |     }
 70 | }
 71 | 
 72 | function runListenerHandler(component, expression, e, extraVars) {
 73 |     return component.evaluateCommandExpression(e.target, expression, () => {
 74 |         return {...extraVars(), '$event': e}
 75 |     })
 76 | }
 77 | 
 78 | function isKeyEvent(event) {
 79 |     return ['keydown', 'keyup'].includes(event)
 80 | }
 81 | 
 82 | function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {
 83 |     let keyModifiers = modifiers.filter(i => {
 84 |         return ! ['window', 'document', 'prevent', 'stop'].includes(i)
 85 |     })
 86 | 
 87 |     if (keyModifiers.includes('debounce')) {
 88 |         let debounceIndex = keyModifiers.indexOf('debounce')
 89 |         keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex+1] || 'invalid-wait').split('ms')[0]) ? 2 : 1)
 90 |     }
 91 | 
 92 |     // If no modifier is specified, we'll call it a press.
 93 |     if (keyModifiers.length === 0) return false
 94 | 
 95 |     // If one is passed, AND it matches the key pressed, we'll call it a press.
 96 |     if (keyModifiers.length === 1 && keyModifiers[0] === keyToModifier(e.key)) return false
 97 | 
 98 |     // The user is listening for key combinations.
 99 |     const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta', 'cmd', 'super']
100 |     const selectedSystemKeyModifiers = systemKeyModifiers.filter(modifier => keyModifiers.includes(modifier))
101 | 
102 |     keyModifiers = keyModifiers.filter(i => ! selectedSystemKeyModifiers.includes(i))
103 | 
104 |     if (selectedSystemKeyModifiers.length > 0) {
105 |         const activelyPressedKeyModifiers = selectedSystemKeyModifiers.filter(modifier => {
106 |             // Alias "cmd" and "super" to "meta"
107 |             if (modifier === 'cmd' || modifier === 'super') modifier = 'meta'
108 | 
109 |             return e[`${modifier}Key`]
110 |         })
111 | 
112 |         // If all the modifiers selected are pressed, ...
113 |         if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {
114 |             // AND the remaining key is pressed as well. It's a press.
115 |             if (keyModifiers[0] === keyToModifier(e.key)) return false
116 |         }
117 |     }
118 | 
119 |     // We'll call it NOT a valid keypress.
120 |     return true
121 | }
122 | 
123 | function keyToModifier(key) {
124 |     switch (key) {
125 |         case '/':
126 |             return 'slash'
127 |         case ' ':
128 |         case 'Spacebar':
129 |             return 'space'
130 |         default:
131 |             return key && kebabCase(key)
132 |     }
133 | }
134 | 


--------------------------------------------------------------------------------
/test/debounce.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { fireEvent } from '@testing-library/dom'
  3 | const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
  4 | 
  5 | global.MutationObserver = class {
  6 |     observe() {}
  7 | }
  8 | 
  9 | test('x-on with debounce modifier', async () => {
 10 |     document.body.innerHTML = `
 11 |         <div x-data="{foo: 0}">
 12 |           <input x-on:input.debounce="foo++" />
 13 |           <span x-text="foo"></span>
 14 |         </div>
 15 |     `
 16 | 
 17 |     Alpine.start()
 18 | 
 19 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 20 | 
 21 |     await timeout(10)
 22 | 
 23 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 24 |     expect(document.querySelector('span').innerText).toEqual(0)
 25 | 
 26 |     await timeout(10)
 27 | 
 28 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 29 |     expect(document.querySelector('span').innerText).toEqual(0)
 30 | 
 31 |     await timeout(249)
 32 | 
 33 |     expect(document.querySelector('span').innerText).toEqual(0)
 34 | 
 35 |     await timeout(20)
 36 | 
 37 |     expect(document.querySelector('span').innerText).toEqual(1)
 38 | })
 39 | 
 40 | test('x-on with debounce modifier and specified wait', async () => {
 41 |     document.body.innerHTML = `
 42 |         <div x-data="{foo: 0}">
 43 |           <input x-on:input.debounce.100="foo++" />
 44 |           <span x-text="foo"></span>
 45 |         </div>
 46 |     `
 47 | 
 48 |     Alpine.start()
 49 | 
 50 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 51 | 
 52 |     await timeout(10)
 53 | 
 54 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 55 |     expect(document.querySelector('span').innerText).toEqual(0)
 56 | 
 57 |     await timeout(10)
 58 | 
 59 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
 60 |     expect(document.querySelector('span').innerText).toEqual(0)
 61 | 
 62 |     await timeout(99)
 63 | 
 64 |     expect(document.querySelector('span').innerText).toEqual(0)
 65 | 
 66 |     await timeout(20)
 67 | 
 68 |     expect(document.querySelector('span').innerText).toEqual(1)
 69 | })
 70 | 
 71 | test('x-model with debounce modifier', async () => {
 72 |     document.body.innerHTML = `
 73 |         <div x-data="{ search: '' }">
 74 |           <input x-model.debounce="search" />
 75 |           <span x-text="search"></span>
 76 |         </div>
 77 |     `
 78 | 
 79 |     Alpine.start()
 80 | 
 81 |     fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
 82 | 
 83 |     await timeout(10)
 84 | 
 85 |     fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
 86 |     expect(document.querySelector('span').innerText).toEqual('')
 87 | 
 88 |     await timeout(10)
 89 | 
 90 |     fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
 91 |     expect(document.querySelector('span').innerText).toEqual('')
 92 | 
 93 |     await timeout(249)
 94 | 
 95 |     expect(document.querySelector('span').innerText).toEqual('')
 96 | 
 97 |     await timeout(20)
 98 | 
 99 |     expect(document.querySelector('span').innerText).toEqual('foo')
100 | })
101 | 
102 | test('x-on with debounce modifier (with "ms" suffix)', async () => {
103 |     document.body.innerHTML = `
104 |         <div x-data="{foo: 0}">
105 |           <input x-on:input.debounce.100ms="foo++" />
106 |           <span x-text="foo"></span>
107 |         </div>
108 |     `
109 | 
110 |     Alpine.start()
111 | 
112 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
113 | 
114 |     await timeout(10)
115 | 
116 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
117 |     expect(document.querySelector('span').innerText).toEqual(0)
118 | 
119 |     await timeout(10)
120 | 
121 |     fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
122 |     expect(document.querySelector('span').innerText).toEqual(0)
123 | 
124 |     await timeout(99)
125 | 
126 |     expect(document.querySelector('span').innerText).toEqual(0)
127 | 
128 |     await timeout(20)
129 | 
130 |     expect(document.querySelector('span').innerText).toEqual(1)
131 | })
132 | 
133 | test('keydown with key modifier and debounce with 10ms wait', async () => {
134 |     document.body.innerHTML = `
135 |         <div x-data="{foo: 0}">
136 |           <input x-on:keydown.a.debounce.10ms="foo++" />
137 |           <span x-text="foo"></span>
138 |         </div>
139 |     `
140 | 
141 |     Alpine.start()
142 | 
143 |     fireEvent.keyDown(document.querySelector('input'), { key: 'b' })
144 | 
145 |     await timeout(10)
146 | 
147 |     expect(document.querySelector('span').innerText).toEqual(0)
148 | 
149 |     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
150 |     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
151 | 
152 |     await timeout(20)
153 | 
154 |     expect(document.querySelector('span').innerText).toEqual(1)
155 | })
156 | 
157 | test('keydown with debounce modifier and no specified wait', async () => {
158 |     document.body.innerHTML = `
159 |         <div x-data="{foo: 0}">
160 |           <input x-on:keydown.a.debounce="foo++" />
161 |           <span x-text="foo"></span>
162 |         </div>
163 |     `
164 | 
165 |     Alpine.start()
166 | 
167 |     expect(document.querySelector('span').innerText).toEqual(0)
168 | 
169 |     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
170 |     fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
171 | 
172 |     await timeout(270)
173 | 
174 |     expect(document.querySelector('span').innerText).toEqual(1)
175 | })
176 | 


--------------------------------------------------------------------------------
/src/directives/for.js:
--------------------------------------------------------------------------------
  1 | import { transitionIn, transitionOut, getXAttrs } from '../utils'
  2 | 
  3 | export function handleForDirective(component, templateEl, expression, initialUpdate, extraVars) {
  4 |     warnIfNotTemplateTag(templateEl)
  5 | 
  6 |     let iteratorNames = parseForExpression(expression)
  7 | 
  8 |     let items = evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, templateEl, iteratorNames, extraVars)
  9 | 
 10 |     // As we walk the array, we'll also walk the DOM (updating/creating as we go).
 11 |     let currentEl = templateEl
 12 |     items.forEach((item, index) => {
 13 |         let iterationScopeVariables = getIterationScopeVariables(iteratorNames, item, index, items, extraVars())
 14 |         let currentKey = generateKeyForIteration(component, templateEl, index, iterationScopeVariables)
 15 |         let nextEl = currentEl.nextElementSibling
 16 | 
 17 |         // If there's no previously x-for processed element ahead, add one.
 18 |         if (! nextEl || nextEl.__x_for_key === undefined) {
 19 |             nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl)
 20 | 
 21 |             // And transition it in if it's not the first page load.
 22 |             transitionIn(nextEl, () => {}, initialUpdate)
 23 | 
 24 |             nextEl.__x_for = iterationScopeVariables
 25 |             component.initializeElements(nextEl, () => nextEl.__x_for)
 26 |         } else {
 27 |             nextEl = lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey)
 28 | 
 29 |             // If we haven't found a matching key, just insert the element at the current position
 30 |             if (! nextEl) {
 31 |                 nextEl = addElementInLoopAfterCurrentEl(templateEl, currentEl)
 32 |             }
 33 | 
 34 |             // Temporarily remove the key indicator to allow the normal "updateElements" to work
 35 |             delete nextEl.__x_for_key
 36 | 
 37 |             nextEl.__x_for = iterationScopeVariables
 38 |             component.updateElements(nextEl, () => nextEl.__x_for)
 39 |         }
 40 | 
 41 |         currentEl = nextEl
 42 |         currentEl.__x_for_key = currentKey
 43 |     })
 44 | 
 45 |     removeAnyLeftOverElementsFromPreviousUpdate(currentEl)
 46 | }
 47 | 
 48 | // This was taken from VueJS 2.* core. Thanks Vue!
 49 | function parseForExpression(expression) {
 50 |     let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 51 |     let stripParensRE = /^\(|\)$/g
 52 |     let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 53 |     let inMatch = expression.match(forAliasRE)
 54 |     if (! inMatch) return
 55 |     let res = {}
 56 |     res.items = inMatch[2].trim()
 57 |     let item = inMatch[1].trim().replace(stripParensRE, '')
 58 |     let iteratorMatch = item.match(forIteratorRE)
 59 | 
 60 |     if (iteratorMatch) {
 61 |         res.item = item.replace(forIteratorRE, '').trim()
 62 |         res.index = iteratorMatch[1].trim()
 63 | 
 64 |         if (iteratorMatch[2]) {
 65 |             res.collection = iteratorMatch[2].trim()
 66 |         }
 67 |     } else {
 68 |         res.item = item
 69 |     }
 70 |     return res
 71 | }
 72 | 
 73 | function getIterationScopeVariables(iteratorNames, item, index, items, extraVars) {
 74 |     // We must create a new object, so each iteration has a new scope
 75 |     let scopeVariables = extraVars ? {...extraVars} : {}
 76 |     scopeVariables[iteratorNames.item] = item
 77 |     if (iteratorNames.index) scopeVariables[iteratorNames.index] = index
 78 |     if (iteratorNames.collection) scopeVariables[iteratorNames.collection] = items
 79 | 
 80 |     return scopeVariables
 81 | }
 82 | 
 83 | function generateKeyForIteration(component, el, index, iterationScopeVariables) {
 84 |     let bindKeyAttribute = getXAttrs(el, 'bind').filter(attr => attr.value === 'key')[0]
 85 | 
 86 |     // If the dev hasn't specified a key, just return the index of the iteration.
 87 |     if (! bindKeyAttribute) return index
 88 | 
 89 |     return component.evaluateReturnExpression(el, bindKeyAttribute.expression, () => iterationScopeVariables)
 90 | }
 91 | 
 92 | function warnIfNotTemplateTag(el) {
 93 |     if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to <template> tags.')
 94 | }
 95 | 
 96 | function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, el, iteratorNames, extraVars) {
 97 |     let ifAttribute = getXAttrs(el, 'if')[0]
 98 | 
 99 |     if (ifAttribute && ! component.evaluateReturnExpression(el, ifAttribute.expression)) {
100 |         return []
101 |     }
102 | 
103 |     return component.evaluateReturnExpression(el, iteratorNames.items, extraVars)
104 | }
105 | 
106 | function addElementInLoopAfterCurrentEl(templateEl, currentEl) {
107 |     let clone = document.importNode(templateEl.content, true  )
108 | 
109 |     if (clone.childElementCount !== 1) console.warn('Alpine: <template> tag with [x-for] encountered with multiple element roots. Make sure <template> only has a single child node.')
110 | 
111 |     currentEl.parentElement.insertBefore(clone, currentEl.nextElementSibling)
112 | 
113 |     return currentEl.nextElementSibling
114 | }
115 | 
116 | function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {
117 |     // If the the key's DO match, no need to look ahead.
118 |     if (nextEl.__x_for_key === currentKey) return nextEl
119 | 
120 |     // If they don't, we'll look ahead for a match.
121 |     // If we find it, we'll move it to the current position in the loop.
122 |     let tmpNextEl = nextEl
123 | 
124 |     while(tmpNextEl) {
125 |         if (tmpNextEl.__x_for_key === currentKey) {
126 |             return tmpNextEl.parentElement.insertBefore(tmpNextEl, nextEl)
127 |         }
128 | 
129 |         tmpNextEl = (tmpNextEl.nextElementSibling && tmpNextEl.nextElementSibling.__x_for_key !== undefined) ? tmpNextEl.nextElementSibling : false
130 |     }
131 | }
132 | 
133 | function removeAnyLeftOverElementsFromPreviousUpdate(currentEl) {
134 |     var nextElementFromOldLoop = (currentEl.nextElementSibling && currentEl.nextElementSibling.__x_for_key !== undefined) ? currentEl.nextElementSibling : false
135 | 
136 |     while (nextElementFromOldLoop) {
137 |         let nextElementFromOldLoopImmutable = nextElementFromOldLoop
138 |         let nextSibling = nextElementFromOldLoop.nextElementSibling
139 |         transitionOut(nextElementFromOldLoop, () => {
140 |             nextElementFromOldLoopImmutable.remove()
141 |         })
142 |         nextElementFromOldLoop = (nextSibling && nextSibling.__x_for_key !== undefined) ? nextSibling : false
143 |     }
144 | }
145 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
  1 | // For a detailed explanation regarding each configuration property, visit:
  2 | // https://jestjs.io/docs/en/configuration.html
  3 | 
  4 | module.exports = {
  5 |     // All imported modules in your tests should be mocked automatically
  6 |     // automock: false,
  7 | 
  8 |     // Stop running tests after `n` failures
  9 |     // bail: 0,
 10 | 
 11 |     // Respect "browser" field in package.json when resolving modules
 12 |     // browser: false,
 13 | 
 14 |     // The directory where Jest should store its cached dependency information
 15 |     // cacheDirectory: "/private/var/folders/p8/t_s1ktjx6qqczfcrb5jpn30c0000gn/T/jest_dx",
 16 | 
 17 |     // Automatically clear mock calls and instances between every test
 18 |     clearMocks: true,
 19 | 
 20 |     // Indicates whether the coverage information should be collected while executing the test
 21 |     // collectCoverage: false,
 22 | 
 23 |     // An array of glob patterns indicating a set of files for which coverage information should be collected
 24 |     // collectCoverageFrom: null,
 25 | 
 26 |     // The directory where Jest should output its coverage files
 27 |     // coverageDirectory: null,
 28 | 
 29 |     // An array of regexp pattern strings used to skip coverage collection
 30 |     // coveragePathIgnorePatterns: [
 31 |     //   "/node_modules/"
 32 |     // ],
 33 | 
 34 |     // A list of reporter names that Jest uses when writing coverage reports
 35 |     // coverageReporters: [
 36 |     //   "json",
 37 |     //   "text",
 38 |     //   "lcov",
 39 |     //   "clover"
 40 |     // ],
 41 | 
 42 |     // An object that configures minimum threshold enforcement for coverage results
 43 |     // coverageThreshold: null,
 44 | 
 45 |     // A path to a custom dependency extractor
 46 |     // dependencyExtractor: null,
 47 | 
 48 |     // Make calling deprecated APIs throw helpful error messages
 49 |     // errorOnDeprecated: false,
 50 | 
 51 |     // Force coverage collection from ignored files usin a array of glob patterns
 52 |     // forceCoverageMatch: [],
 53 | 
 54 |     // A path to a module which exports an async function that is triggered once before all test suites
 55 |     // globalSetup: null,
 56 | 
 57 |     // A path to a module which exports an async function that is triggered once after all test suites
 58 |     // globalTeardown: null,
 59 | 
 60 |     // A set of global variables that need to be available in all test environments
 61 |     // globals: {},
 62 | 
 63 |     // An array of directory names to be searched recursively up from the requiring module's location
 64 |     moduleDirectories: [
 65 |       "node_modules",
 66 |       "src/js"
 67 |     ],
 68 | 
 69 |     // An array of file extensions your modules use
 70 |     // moduleFileExtensions: [
 71 |     //   "js",
 72 |     //   "json",
 73 |     //   "jsx",
 74 |     //   "ts",
 75 |     //   "tsx",
 76 |     //   "node"
 77 |     // ],
 78 | 
 79 |     // A map from regular expressions to module names that allow to stub out resources with a single module
 80 |     // moduleNameMapper: {},
 81 | 
 82 |     // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
 83 |     // modulePathIgnorePatterns: [],
 84 | 
 85 |     // Activates notifications for test results
 86 |     notify: true,
 87 | 
 88 |     // An enum that specifies notification mode. Requires { notify: true }
 89 |     // notifyMode: "failure-change",
 90 | 
 91 |     // A preset that is used as a base for Jest's configuration
 92 |     // preset: null,
 93 | 
 94 |     // Run tests from one or more projects
 95 |     // projects: null,
 96 | 
 97 |     // Use this configuration option to add custom reporters to Jest
 98 |     // reporters: undefined,
 99 | 
100 |     // Automatically reset mock state between every test
101 |     // resetMocks: false,
102 | 
103 |     // Reset the module registry before running each individual test
104 |     // resetModules: false,
105 | 
106 |     // A path to a custom resolver
107 |     // resolver: null,
108 | 
109 |     // Automatically restore mock state between every test
110 |     // restoreMocks: false,
111 | 
112 |     // The root directory that Jest should scan for tests and modules within
113 |     // rootDir: null,
114 | 
115 |     // A list of paths to directories that Jest should use to search for files in
116 |     // roots: [
117 |     //   "<rootDir>"
118 |     // ],
119 | 
120 |     // Allows you to use a custom runner instead of Jest's default test runner
121 |     // runner: "jest-runner",
122 | 
123 |     // The paths to modules that run some code to configure or set up the testing environment before each test
124 |     // setupFiles: [],
125 | 
126 |     // A list of paths to modules that run some code to configure or set up the testing framework before each test
127 |     // setupFilesAfterEnv: [],
128 | 
129 |     // A list of paths to snapshot serializer modules Jest should use for snapshot testing
130 |     // snapshotSerializers: [],
131 | 
132 |     // The test environment that will be used for testing
133 |     // testEnvironment: "jest-environment-jsdom",
134 | 
135 |     // Options that will be passed to the testEnvironment
136 |     // testEnvironmentOptions: {},
137 | 
138 |     // Adds a location field to test results
139 |     // testLocationInResults: false,
140 | 
141 |     // The glob patterns Jest uses to detect test files
142 |     // testMatch: [
143 |     //   "**/__tests__/**/*.[jt]s?(x)",
144 |     //   "**/?(*.)+(spec|test).[tj]s?(x)"
145 |     // ],
146 | 
147 |     // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
148 |     // testPathIgnorePatterns: [
149 |     //   "/node_modules/"
150 |     // ],
151 | 
152 |     // The regexp pattern or array of patterns that Jest uses to detect test files
153 |     // testRegex: [],
154 | 
155 |     // This option allows the use of a custom results processor
156 |     // testResultsProcessor: null,
157 | 
158 |     // This option allows use of a custom test runner
159 |     // testRunner: "jasmine2",
160 | 
161 |     // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
162 |     // testURL: "http://localhost",
163 | 
164 |     // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
165 |     // timers: "real",
166 | 
167 |     // A map from regular expressions to paths to transformers
168 |     // transform: null,
169 | 
170 |     // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
171 |     // transformIgnorePatterns: [
172 |     //   "/node_modules/"
173 |     // ],
174 | 
175 |     // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
176 |     // unmockedModulePathPatterns: undefined,
177 | 
178 |     // Indicates whether each individual test should be reported during the run
179 |     // verbose: null,
180 | 
181 |     // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
182 |     // watchPathIgnorePatterns: [],
183 | 
184 |     // Whether to use watchman for file crawling
185 |     // watchman: true,
186 |   };
187 | 


--------------------------------------------------------------------------------
/test/constructor.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { fireEvent, wait } from '@testing-library/dom'
  3 | 
  4 | test('auto-detect new components at the top level', async () => {
  5 |     var runObservers = []
  6 | 
  7 |     global.MutationObserver = class {
  8 |         constructor(callback) { runObservers.push(callback) }
  9 |         observe() {}
 10 |     }
 11 | 
 12 |     document.body.innerHTML = `
 13 |         <section></section>
 14 |     `
 15 | 
 16 |     Alpine.start()
 17 | 
 18 |     document.querySelector('section').innerHTML = `
 19 |         <div x-data="{ foo: '' }">
 20 |             <input x-model="foo">
 21 |             <span x-text="foo"></span>
 22 |         </div>
 23 |     `
 24 |     runObservers[0]([
 25 |         {
 26 |             target: document.querySelector('section'),
 27 |             type: 'childList',
 28 |             addedNodes: [ document.querySelector('div') ],
 29 |         }
 30 |     ])
 31 | 
 32 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 33 | 
 34 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 35 | })
 36 | 
 37 | test('auto-detect nested new components at the top level', async () => {
 38 |     var runObservers = []
 39 | 
 40 |     global.MutationObserver = class {
 41 |         constructor(callback) { runObservers.push(callback) }
 42 |         observe() {}
 43 |     }
 44 | 
 45 |     document.body.innerHTML = `
 46 |         <section></section>
 47 |     `
 48 | 
 49 |     Alpine.start()
 50 | 
 51 |     document.querySelector('section').innerHTML = `
 52 |         <article>
 53 |             <div x-data="{ foo: '' }">
 54 |                 <input x-model="foo">
 55 |                 <span x-text="foo"></span>
 56 |             </div>
 57 |         </article>
 58 |     `
 59 |     runObservers[0]([
 60 |         {
 61 |             target: document.querySelector('section'),
 62 |             type: 'childList',
 63 |             addedNodes: [ document.querySelector('article') ],
 64 |         }
 65 |     ])
 66 | 
 67 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 68 | 
 69 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 70 | })
 71 | 
 72 | test('auto-detect new components and dont lose state of existing ones', async () => {
 73 |     var runObservers = []
 74 | 
 75 |     global.MutationObserver = class {
 76 |         constructor(callback) { runObservers.push(callback) }
 77 |         observe() {}
 78 |     }
 79 | 
 80 |     document.body.innerHTML = `
 81 |         <div id="A" x-data="{ foo: '' }">
 82 |             <input x-model="foo">
 83 |             <span x-text="foo"></span>
 84 | 
 85 |             <div id="B"></div>
 86 |         </div>
 87 |     `
 88 | 
 89 |     Alpine.start()
 90 | 
 91 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
 92 | 
 93 |     await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
 94 | 
 95 |     document.querySelector('#B').innerHTML = `
 96 |         <div x-data="{foo: 'baz'}">
 97 |             <input x-model="foo">
 98 |             <span x-text="foo"></span>
 99 |         </div>
100 |     `
101 | 
102 |     runObservers[0]([
103 |         {
104 |             target: document.querySelector('#A'),
105 |             type: 'childList',
106 |             addedNodes: [ document.querySelector('#B div') ],
107 |         }
108 |     ])
109 | 
110 |     await wait(() => {
111 |         expect(document.querySelector('#A span').innerText).toEqual('bar')
112 |         expect(document.querySelector('#B span').innerText).toEqual('baz')
113 |     })
114 | })
115 | 
116 | test('auto-detect new components that are wrapped in non-new component tags', async () => {
117 |     var runObservers = []
118 | 
119 |     global.MutationObserver = class {
120 |         constructor(callback) { runObservers.push(callback) }
121 |         observe() {}
122 |     }
123 | 
124 |     document.body.innerHTML = `
125 |         <div id="A" x-data="{ foo: '' }">
126 |             <input x-model="foo">
127 |             <span x-text="foo"></span>
128 | 
129 |             <div id="B"></div>
130 |         </div>
131 |     `
132 | 
133 |     Alpine.start()
134 | 
135 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
136 | 
137 |     await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
138 | 
139 |     document.querySelector('#B').innerHTML = `
140 |         <section>
141 |             <div x-data="{foo: 'baz'}">
142 |                 <input x-model="foo">
143 |                 <span x-text="foo"></span>
144 |             </div>
145 |         </section>
146 |     `
147 | 
148 |     runObservers[0]([
149 |         {
150 |             target: document.querySelector('#A'),
151 |             type: 'childList',
152 |             addedNodes: [ document.querySelector('#B section') ],
153 |         }
154 |     ])
155 | 
156 |     await wait(() => {
157 |         expect(document.querySelector('#A span').innerText).toEqual('bar')
158 |         expect(document.querySelector('#B span').innerText).toEqual('baz')
159 |     })
160 | })
161 | 
162 | test('auto-initialize new elements added to a component', async () => {
163 |     var runObservers = []
164 | 
165 |     global.MutationObserver = class {
166 |         constructor(callback) { runObservers.push(callback) }
167 |         observe() {}
168 |     }
169 | 
170 |     document.body.innerHTML = `
171 |         <div x-data="{ count: 0 }">
172 |             <span x-text="count"></span>
173 | 
174 |             <div id="target">
175 |             </div>
176 |         </div>
177 |     `
178 | 
179 |     Alpine.start()
180 | 
181 |     expect(document.querySelector('span').innerText).toEqual(0)
182 | 
183 |     document.querySelector('#target').innerHTML = `
184 |         <span x-text="count"></span>
185 | 
186 |         <button x-on:click="count++"></button>
187 |     `
188 | 
189 |     runObservers[0]([
190 |         { target: document.querySelector('#target'), addedNodes: [
191 |             document.querySelector('#target span'),
192 |             document.querySelector('#target button'),
193 |         ] }
194 |     ])
195 | 
196 |     await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(0) })
197 | 
198 |     document.querySelector('button').click()
199 | 
200 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
201 |     await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(1) })
202 | })
203 | 
204 | test('Alpine mutations don\'t trigger (like x-if and x-for) MutationObserver', async () => {
205 |     var runObservers = []
206 |     var evaluations = 0
207 | 
208 |     global.MutationObserver = class {
209 |         constructor(callback) { runObservers.push(callback) }
210 |         observe() {}
211 |     }
212 |     window.bob = () => {
213 |         evaluations++
214 |         return 'lob'
215 |     }
216 | 
217 |     document.body.innerHTML = `
218 |         <div x-data="{ foo: 'bar' }" id="component">
219 |             <template x-if="foo === 'baz'">
220 |                 <span x-text="bob()"></span>
221 |             </template>
222 | 
223 |             <button @click="foo = 'baz'"></button>
224 |         </div>
225 |     `
226 | 
227 |     Alpine.start()
228 | 
229 |     document.querySelector('button').click()
230 | 
231 |     // Wait out the rendering tick.
232 |     await new Promise(resolve => setTimeout(resolve, 1))
233 | 
234 |     // Run both queud mutations.
235 |     runObservers[0]([
236 |         { target: document.querySelector('#component'), addedNodes: [
237 |             document.querySelector('#component span'),
238 |         ] }
239 |     ])
240 |     runObservers[1]([
241 |         { target: document.querySelector('#component'), addedNodes: [
242 |             document.querySelector('#component span'),
243 |         ] }
244 |     ])
245 | 
246 |     expect(evaluations).toEqual(2)
247 | })
248 | 
249 | test('auto-detect x-data property changes at run-time', async () => {
250 |     var runObservers = []
251 | 
252 |     global.MutationObserver = class {
253 |         constructor(callback) { runObservers.push(callback) }
254 |         observe() {}
255 |     }
256 | 
257 |     document.body.innerHTML = `
258 |         <div x-data="{ count: 0 }">
259 |             <span x-text="count"></span>
260 |         </div>
261 |     `
262 | 
263 |     Alpine.start()
264 | 
265 |     expect(document.querySelector('span').innerText).toEqual(0)
266 | 
267 |     document.querySelector('div').setAttribute('x-data', '{ count: 1 }')
268 | 
269 |     runObservers[0]([
270 |         {
271 |             addedNodes: [],
272 |             type: 'attributes',
273 |             attributeName: 'x-data',
274 |             target: document.querySelector('div')
275 |         }
276 |     ])
277 | 
278 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
279 | })
280 | 
281 | test('nested components only get registered once on initialization', async () => {
282 |     global.MutationObserver = class {
283 |         constructor(callback) {}
284 |         observe() {}
285 |     }
286 | 
287 |     var initCount = 0
288 |     window.registerInit = function () {
289 |         initCount = initCount + 1
290 |     }
291 | 
292 |     document.body.innerHTML = `
293 |         <div x-data x-init="registerInit()">
294 |             <div x-data x-init="registerInit()"></div>
295 |         </div>
296 |     `
297 | 
298 |     Alpine.start()
299 | 
300 |     expect(initCount).toEqual(2)
301 | })
302 | 
303 | test('can clone an existing component to a new element', async () => {
304 |     global.MutationObserver = class {
305 |         constructor(callback) {}
306 |         observe() {}
307 |     }
308 | 
309 |     document.body.innerHTML = `
310 |         <h1 x-data="{ foo: 'bar' }"></h1>
311 | 
312 |         <div id="insert-component-here"></div>
313 |     `
314 | 
315 |     Alpine.start()
316 | 
317 |     document.querySelector('#insert-component-here').innerHTML = `
318 |         <h2 x-data="{ foo: 'baz' }">
319 |             <span x-text="foo"></span>
320 |         </h2>
321 |     `
322 | 
323 |     Alpine.clone(document.querySelector('h1').__x, document.querySelector('h2'))
324 | 
325 |     expect(document.querySelector('span').innerText).toEqual('bar')
326 | })
327 | 
328 | test('x-attributes are matched exactly', async () => {
329 |     document.body.innerHTML = `
330 |         <div x-data="{ showElement: false }">
331 |             <div id="el1" x-show="showElement" />
332 |             <div id="el2" xxx-show="showElement" />
333 |             <div id="el3" x-showabc="showElement" />
334 |         </div>
335 |     `
336 | 
337 |     Alpine.start()
338 | 
339 |     expect(document.getElementById('el1').style.display).toEqual('none')
340 |     expect(document.getElementById('el2').style.display).not.toEqual('none')
341 |     await wait(() => { expect(document.getElementById('el3').style.display).not.toEqual('none') })
342 | })
343 | 


--------------------------------------------------------------------------------
/test/model.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait, fireEvent } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('x-model has value binding when initialized', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ foo: 'bar' }">
 11 |             <input x-model="foo"></input>
 12 |         </div>
 13 |     `
 14 | 
 15 |     Alpine.start()
 16 | 
 17 |     expect(document.querySelector('input').value).toEqual('bar')
 18 | })
 19 | 
 20 | test('x-model updates value when updated via input event', async () => {
 21 |     document.body.innerHTML = `
 22 |         <div x-data="{ foo: 'bar' }">
 23 |             <input x-model="foo"></input>
 24 |         </div>
 25 |     `
 26 | 
 27 |     Alpine.start()
 28 | 
 29 |     fireEvent.input(document.querySelector('input'), { target: { value: 'baz' }})
 30 | 
 31 |     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 32 | })
 33 | 
 34 | test('x-model reflects data changed elsewhere', async () => {
 35 |     document.body.innerHTML = `
 36 |         <div x-data="{ foo: 'bar' }">
 37 |             <input x-model="foo"></input>
 38 | 
 39 |             <button x-on:click="foo = 'baz'"></button>
 40 |         </div>
 41 |     `
 42 | 
 43 |     Alpine.start()
 44 | 
 45 |     document.querySelector('button').click()
 46 | 
 47 |     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 48 | })
 49 | 
 50 | test('x-model casts value to number if number modifier is present', async () => {
 51 |     document.body.innerHTML = `
 52 |         <div x-data="{ foo: null }">
 53 |             <input type="number" x-model.number="foo"></input>
 54 |         </div>
 55 |     `
 56 | 
 57 |     Alpine.start()
 58 | 
 59 |     fireEvent.input(document.querySelector('input'), { target: { value: '123' }})
 60 | 
 61 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(123) })
 62 | })
 63 | 
 64 | test('x-model with number modifier returns: null if empty, original value if casting fails, numeric value if casting passes', async () => {
 65 |     document.body.innerHTML = `
 66 |         <div x-data="{ foo: 0, bar: '' }">
 67 |             <input type="number" x-model.number="foo"></input>
 68 |             <input x-model.number="bar"></input>
 69 |         </div>
 70 |     `
 71 | 
 72 |     Alpine.start()
 73 | 
 74 |     fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '' }})
 75 | 
 76 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 77 | 
 78 |     fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-' }})
 79 | 
 80 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 81 | 
 82 |     fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-123' }})
 83 | 
 84 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(-123) })
 85 | 
 86 |     fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '' }})
 87 | 
 88 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(null) })
 89 | 
 90 |     fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-' }})
 91 | 
 92 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual('-') })
 93 | 
 94 |     fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-123' }})
 95 | 
 96 |     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(-123) })
 97 | })
 98 | 
 99 | test('x-model trims value if trim modifier is present', async () => {
100 |     document.body.innerHTML = `
101 |         <div x-data="{ foo: '' }">
102 |             <input x-model.trim="foo"></input>
103 | 
104 |             <span x-text="foo"></span>
105 |         </div>
106 |     `
107 | 
108 |     Alpine.start()
109 | 
110 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' }})
111 | 
112 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
113 | })
114 | 
115 | test('x-model updates value when updated via changed event when lazy modifier is present', async () => {
116 |     document.body.innerHTML = `
117 |         <div x-data="{ foo: 'bar' }">
118 |             <input x-model.lazy="foo"></input>
119 |         </div>
120 |     `
121 | 
122 |     Alpine.start()
123 | 
124 |     fireEvent.change(document.querySelector('input'), { target: { value: 'baz' }})
125 | 
126 |     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
127 | })
128 | 
129 | test('x-model binds checkbox value', async () => {
130 |     document.body.innerHTML = `
131 |         <div x-data="{ foo: true }">
132 |             <input type="checkbox" x-model="foo"></input>
133 | 
134 |             <span x-bind:bar="foo"></span>
135 |         </div>
136 |     `
137 | 
138 |     Alpine.start()
139 | 
140 |     expect(document.querySelector('input').checked).toEqual(true)
141 |     expect(document.querySelector('span').getAttribute('bar')).toEqual("true")
142 | 
143 |     fireEvent.change(document.querySelector('input'), { target: { checked: false }})
144 | 
145 |     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("false") })
146 | })
147 | 
148 | test('x-model binds checkbox value to array', async () => {
149 |     document.body.innerHTML = `
150 |         <div x-data="{ foo: ['bar'] }">
151 |             <input type="checkbox" x-model="foo" value="bar"></input>
152 |             <input type="checkbox" x-model="foo" value="baz"></input>
153 | 
154 |             <span x-bind:bar="foo"></span>
155 |         </div>
156 |     `
157 | 
158 |     Alpine.start()
159 | 
160 |     expect(document.querySelectorAll('input')[0].checked).toEqual(true)
161 |     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
162 |     expect(document.querySelector('span').getAttribute('bar')).toEqual("bar")
163 | 
164 |     fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true }})
165 | 
166 |     await wait(() => {
167 |         expect(document.querySelectorAll('input')[0].checked).toEqual(true)
168 |         expect(document.querySelectorAll('input')[1].checked).toEqual(true)
169 |         expect(document.querySelector('span').getAttribute('bar')).toEqual("bar,baz")
170 |     })
171 | })
172 | 
173 | test('x-model binds radio value', async () => {
174 |     document.body.innerHTML = `
175 |         <div x-data="{ foo: 'bar' }">
176 |             <input type="radio" x-model="foo" value="bar"></input>
177 |             <input type="radio" x-model="foo" value="baz"></input>
178 | 
179 |             <span x-bind:bar="foo"></span>
180 |         </div>
181 |     `
182 | 
183 |     Alpine.start()
184 | 
185 |     expect(document.querySelectorAll('input')[0].checked).toEqual(true)
186 |     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
187 |     expect(document.querySelector('span').getAttribute('bar')).toEqual('bar')
188 | 
189 |     fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true }})
190 | 
191 |     await wait(() => {
192 |         expect(document.querySelectorAll('input')[0].checked).toEqual(false)
193 |         expect(document.querySelectorAll('input')[1].checked).toEqual(true)
194 |         expect(document.querySelector('span').getAttribute('bar')).toEqual('baz')
195 |     })
196 | })
197 | 
198 | test('x-model binds select dropdown', async () => {
199 |     document.body.innerHTML = `
200 |         <div x-data="{ foo: 'bar' }">
201 |             <select x-model="foo">
202 |                 <option disabled value="">Please select one</option>
203 |                 <option>bar</option>
204 |                 <option>baz</option>
205 |             </select>
206 | 
207 |             <span x-text="foo"></span>
208 |         </div>
209 |     `
210 | 
211 |     Alpine.start()
212 | 
213 |     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
214 |     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
215 |     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
216 |     expect(document.querySelector('span').innerText).toEqual('bar')
217 | 
218 |     fireEvent.change(document.querySelector('select'), { target: { value: 'baz' }});
219 | 
220 |     await wait(() => {
221 |         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
222 |         expect(document.querySelectorAll('option')[1].selected).toEqual(false)
223 |         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
224 |         expect(document.querySelector('span').innerText).toEqual('baz')
225 |     })
226 | })
227 | 
228 | test('x-model binds multiple select dropdown', async () => {
229 |     document.body.innerHTML = `
230 |         <div x-data="{ foo: ['bar'] }">
231 |             <select x-model="foo" multiple>
232 |                 <option disabled value="">Please select one</option>
233 |                 <option>bar</option>
234 |                 <option>baz</option>
235 |             </select>
236 | 
237 |             <span x-text="foo"></span>
238 |         </div>
239 |     `
240 | 
241 |     Alpine.start()
242 | 
243 |     expect(document.querySelectorAll('option')[0].selected).toEqual(false)
244 |     expect(document.querySelectorAll('option')[1].selected).toEqual(true)
245 |     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
246 |     expect(document.querySelector('span').innerText).toEqual(['bar'])
247 | 
248 |     document.querySelectorAll('option')[2].selected = true
249 |     fireEvent.change(document.querySelector('select'));
250 | 
251 |     await wait(() => {
252 |         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
253 |         expect(document.querySelectorAll('option')[1].selected).toEqual(true)
254 |         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
255 |         expect(document.querySelector('span').innerText).toEqual(['bar', 'baz'])
256 |     })
257 | })
258 | 
259 | test('x-model binds nested keys', async () => {
260 |     document.body.innerHTML = `
261 |         <div x-data="{ some: { nested: { key: 'foo' } } }">
262 |             <input type="text" x-model="some.nested.key">
263 |             <span x-text="some.nested.key"></span>
264 |         </div>
265 |     `
266 | 
267 |     Alpine.start()
268 | 
269 |     expect(document.querySelector('input').value).toEqual('foo')
270 |     expect(document.querySelector('span').innerText).toEqual('foo')
271 | 
272 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
273 | 
274 |     await wait(() => {
275 |         expect(document.querySelector('input').value).toEqual('bar')
276 |         expect(document.querySelector('span').innerText).toEqual('bar')
277 |     })
278 | })
279 | 
280 | test('x-model undefined nested model key defaults to empty string', async () => {
281 |     document.body.innerHTML = `
282 |         <div x-data="{ some: { nested: {} } }">
283 |             <input type="text" x-model="some.nested.key">
284 |             <span x-text="some.nested.key"></span>
285 |         </div>
286 |     `
287 | 
288 |     Alpine.start()
289 | 
290 |     expect(document.querySelector('input').value).toEqual('')
291 |     expect(document.querySelector('span').innerText).toEqual('')
292 | 
293 |     fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
294 | 
295 |     await wait(() => {
296 |         expect(document.querySelector('input').value).toEqual('bar')
297 |         expect(document.querySelector('span').innerText).toEqual('bar')
298 |     })
299 | })
300 | 
301 | test('x-model can listen for custom input event dispatches', async () => {
302 |     document.body.innerHTML = `
303 |         <div x-data="{ foo: 'bar' }" x-model="foo">
304 |             <button @click="$dispatch('input', 'baz')"></button>
305 | 
306 |             <span x-text="foo"></span>
307 |         </div>
308 |     `
309 | 
310 |     Alpine.start()
311 | 
312 |     expect(document.querySelector('span').innerText).toEqual('bar')
313 | 
314 |     document.querySelector('button').click()
315 | 
316 |     await wait(() => {
317 |         expect(document.querySelector('span').innerText).toEqual('baz')
318 |     })
319 | })
320 | 


--------------------------------------------------------------------------------
/README.ja.md:
--------------------------------------------------------------------------------
  1 | # Alpine.js
  2 | 
  3 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/alpinejs)
  4 | 
  5 | Alpine.js は、Vue や React などの大きなフレームワークのリアクティブで宣言的な性質をはるかに低いコストで提供します。
  6 | 
  7 | DOM を保持し、適切な動作を施すことができます。
  8 | 
  9 | [Tailwind](https://tailwindcss.com/) の JavaScript 版のようなものです。
 10 | 
 11 | > 注意: このツールのシンタックスは、ほぼ完全に [Vue](https://vuejs.org/)（それと、[Angular](https://angularjs.org/) による拡張）から借用しています。ウェブからの賜り物に感謝しています。
 12 | 
 13 | ## Install
 14 | 
 15 | **CDNより:** `<head>` セクションの最後に次のスクリプトを追加します。
 16 | ```html
 17 | <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>
 18 | ```
 19 | 
 20 | それだけです。初期は自身で行われます。
 21 | 
 22 | **NPMより:** NPM からパッケージをインストールします。
 23 | ```js
 24 | npm i alpinejs
 25 | ```
 26 | 
 27 | 各自スクリプトでインクルードします。
 28 | ```js
 29 | import 'alpinejs'
 30 | ```
 31 | 
 32 | IE11 では、ポリフィルを提供する必要があります。次のスクリプトを上記の Alpine スクリプトの前にロードしてください。
 33 | ```html
 34 | <script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set"></script>
 35 | 
 36 | <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
 37 | ```
 38 | 
 39 | ## 使う
 40 | 
 41 | *ドロップダウン/モーダル*
 42 | ```html
 43 | <div x-data="{ open: false }">
 44 |     <button @click="open = true">Open Dropdown</button>
 45 | 
 46 |     <ul
 47 |         x-show="open"
 48 |         @click.away="open = false"
 49 |     >
 50 |         Dropdown Body
 51 |     </ul>
 52 | </div>
 53 | ```
 54 | 
 55 | *タブ*
 56 | ```html
 57 | <div x-data="{ tab: 'foo' }">
 58 |     <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
 59 |     <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
 60 | 
 61 |     <div x-show="tab === 'foo'">Tab Foo</div>
 62 |     <div x-show="tab === 'bar'">Tab Bar</div>
 63 | </div>
 64 | ```
 65 | 
 66 | 自明ではないことにも使用できます:
 67 | *ホバー時にドロップダウンの HTML コンテンツをプリフェッチする*
 68 | ```html
 69 | <div x-data="{ open: false }">
 70 |     <button
 71 |         @mouseenter.once="
 72 |             fetch('/dropdown-partial.html')
 73 |                 .then(response => response.text())
 74 |                 .then(html => { $refs.dropdown.innerHTML = html })
 75 |         "
 76 |         @click="open = true"
 77 |     >Show Dropdown</button>
 78 | 
 79 |     <div x-ref="dropdown" x-show="open" @click.away="open = false">
 80 |         Loading Spinner...
 81 |     </div>
 82 | </div>
 83 | ```
 84 | 
 85 | ## Learn
 86 | 
 87 | 次の13のディレクティブを使用できます。
 88 | 
 89 | | ディレクティブ
 90 | | --- |
 91 | | [`x-data`](#x-data) |
 92 | | [`x-init`](#x-init) |
 93 | | [`x-show`](#x-show) |
 94 | | [`x-bind`](#x-bind) |
 95 | | [`x-on`](#x-on) |
 96 | | [`x-model`](#x-model) |
 97 | | [`x-text`](#x-text) |
 98 | | [`x-html`](#x-html) |
 99 | | [`x-ref`](#x-ref) |
100 | | [`x-if`](#x-if) |
101 | | [`x-for`](#x-for) |
102 | | [`x-transition`](#x-transition) |
103 | | [`x-cloak`](#x-cloak) |
104 | 
105 | それと5つのマジックプロパティ：
106 | 
107 | | マジックプロパティ
108 | | --- |
109 | | [`$el`](#el) |
110 | | [`$refs`](#refs) |
111 | | [`$event`](#event) |
112 | | [`$dispatch`](#dispatch) |
113 | | [`$nextTick`](#nexttick) |
114 | 
115 | 
116 | ### ディレクティブ
117 | 
118 | ---
119 | 
120 | ### `x-data`
121 | 
122 | **例:** `<div x-data="{ foo: 'bar' }">...</div>`
123 | 
124 | **構造:** `<div x-data="[JSON data object]">...</div>`
125 | 
126 | `x-data` は新しいコンポーネントスコープを宣言します。フレームワークに、データオブジェクトを使用して新しいコンポーネントを初期化するよう指示します。
127 | 
128 | Vue コンポーネントの `data` プロパティのように考えてください。
129 | 
130 | **コンポーネントロジックの抽出**
131 | 
132 | データ（と動作）を再利用可能な関数に抽出できます:
133 | 
134 | ```html
135 | <div x-data="dropdown()">
136 |     <button x-on:click="open()">オープン</button>
137 | 
138 |     <div x-show="isOpen()" x-on:click.away="close()">
139 |         // ドロップダウン
140 |     </div>
141 | </div>
142 | 
143 | <script>
144 |     function dropdown() {
145 |         return {
146 |             show: false,
147 |             open() { this.show = true },
148 |             close() { this.show = false },
149 |             isOpen() { return this.show === true },
150 |         }
151 |     }
152 | </script>
153 | ```
154 | 
155 | オブジェクトの構造化を使用して、複数のデータオブジェクトを混在も出来ます:
156 | 
157 | ```html
158 | <div x-data="{...dropdown(), ...tabs()}">
159 | ```
160 | 
161 | ---
162 | 
163 | ### `x-init`
164 | **例:** `<div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>`
165 | 
166 | **構造:** `<div x-data="..." x-init="[式]"></div>`
167 | 
168 | `x-init` はコンポーネントが初期化されると式を実行します。
169 | 
170 | Alpine が DOM（VueJS の `mounted()` フックのようなもの）に最初の更新を行った後にコードを実行したい場合、`x-init` からコールバックを返すことができ、その後実行されます：
171 | 
172 | `x-init="return () => { // ここで初期化後の DOM ステートにアクセスできます // }"`
173 | 
174 | ---
175 | 
176 | ### `x-show`
177 | **例:** `<div x-show="open"></div>`
178 | 
179 | **構造:** `<div x-show="[式]]"></div>`
180 | 
181 | `x-show` は、式が `true` または `false` のどちらかの結果によって、要素の `display: none;` スタイルを切り替えます。
182 | 
183 | ---
184 | 
185 | ### `x-bind`
186 | 
187 | > 注意: 短い「:」シンタックスを使えます: `:type="..."`
188 | 
189 | **例:** `<input x-bind:type="inputType">`
190 | 
191 | **構造:** `<input x-bind:[属性]="[式]">`
192 | 
193 | `x-bind` は、属性の値を JavaScript 式の結果を設定します。この式は、コンポーネントのデータオブジェクトのすべてのキーにアクセスでき、データが更新されるたびに反映されます。
194 | 
195 | > 注意: 属性バインディングは、依存関係が更新されたときにのみ更新されます。このフレームワークは、データの変化を観察し、どのバインディングがそれらを検出するのか最適化されています。
196 | 
197 | **`x-bind` for class attributes**
198 | 
199 | `x-bind` は、`class` 属性にバインドするときの動作が少し異なります。
200 | 
201 | クラスの場合、キーがクラス名であり、値がそれらのクラス名が適用されるかどうかを決定するブール式であるオブジェクトを渡します。
202 | 
203 | 例:
204 | `<div x-bind:class="{ 'hidden': foo }"></div>`
205 | 
206 | この例では、「hidden」クラスは、`foo` データ属性値が `true` の場合にのみ適用されます。
207 | 
208 | **ブール属性の `x-bind`**
209 | 
210 | `x-bind` は、値属性と同じ方法でブール値属性をサポートします。条件として変数を使用するか、`true` または `false` に解決される JavaScript 式を使用します。
211 | 
212 | 例:
213 | `<button x-bind:disabled="myVar">Click me</button>`
214 | 
215 | `myVar` が true または false の場合に `disabled` 属性を追加または削除します。
216 | 
217 | `readonly`, `required` など、最も一般的なブール属性がサポートされています。
218 | 
219 | ---
220 | 
221 | ### `x-on`
222 | 
223 | > 注意： より短い「@」シンタックスを自由に使用できます: `@click="..."`
224 | 
225 | **例:** `<button x-on:click="foo = 'bar'"></button>`
226 | 
227 | **構造:** `<button x-on:[event]="[expression]"></button>`
228 | 
229 | `x-on` は、イベントリスナを宣言された要素にアタッチします。そのイベントが発行されると、その値として設定された JavaScript 式が実行されます。
230 | 
231 | 式でデータが変更されると、このデータに「バインドされた」他の要素属性が更新されます。
232 | 
233 | **`keydown` 修飾子**
234 | 
235 | **例:** `<input type="text" x-on:keydown.escape="open = false">`
236 | 
237 | `x-on：keydown` ディレクティブに追加された keydown 修飾子を使用し、待ち受けする特定のキーを指定できます。修飾子は `Event.key` 値のケバブケースであることに注意してください。
238 | 
239 | 例: `enter`, `escape`, `arrow-up`, `arrow-down`
240 | 
241 | > 注意: 次のようなシステム修飾子キーの組み合わせを待ち受けもできます: `x-on：keydown.cmd.enter="foo"`
242 | 
243 | **`.away` 修飾子**
244 | 
245 | **例:** `<div x-on:click.away="showModal = false"></div>`
246 | 
247 | `.away` 修飾子を付与すると、イベントがそれ自体またはその子以外のソースから発生した場合にのみイベントハンドラは実行されます。
248 | 
249 | ユーザがクリックしたときにドロップダウンやモーダルを非表示にするのに便利です。
250 | 
251 | **`.prevent` 修飾子**
252 | **例:** `<input type="checkbox" x-on:click.prevent>`
253 | 
254 | イベントリスナに `.prevent` を追加すると、トリガされたイベントで `preventDefault` が呼び出されます。上記の例では、ユーザがクリックしたときにチェックボックスが実際にチェックされないことを意味します。
255 | 
256 | **`.stop` 修飾子**
257 | **例:** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`
258 | 
259 | イベントリスナに `.stop` を追加すると、トリガされたイベントで `stopPropagation` が呼び出されます。上記の例では、ボタンから外側の `<div>` に「click」イベントが浮上しないことを意味します。言い換えると、ユーザがボタンをクリックしても、`foo` は `'bar'` に設定されません。
260 | 
261 | **`.window` 修飾子**
262 | **例:** `<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>`
263 | 
264 | イベントリスナに `.window` を付与すると、それが宣言されている DOM ノードではなく、グローバル window オブジェクトにリスナがインストールされます。これは、resize イベントなど window で何かが変更されたときにコンポーネントの状態を変更する場合に役立ちます。この例では、ウィンドウの幅が768ピクセルを超えた場合、モーダル/ドロップダウンを閉じます。それ以外の場合は同じ状態を維持します。
265 | 
266 | > 注意: `.document` 修飾子を使用して、リスナを `window` の代わりに `document` にアタッチすることもできます。
267 | 
268 | **`.once` 修飾子**
269 | **例:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
270 | 
271 | イベントリスナに `.once` 修飾子を付与すると、リスナが1回だけ処理されることが保証されます。HTML パーシャルの取得など、1度だけ実行したい場合に便利です。
272 | 
273 | ---
274 | 
275 | ### `x-model`
276 | **例:** `<input type="text" x-model="foo">`
277 | 
278 | **構造:** `<input type="text" x-model="[data item]">`
279 | 
280 | `x-model` は要素に「双方向データバインディング」を追加します。つまり、入力要素の値はコンポーネントの項目データの値と同期します。
281 | 
282 | > 注意: `x-model` は、テキストインプット、チェックボックス、ラジオボタン、テキストエリア、セレクト、およびマルチセレクトの変更を検出するのに最適です。これらのシナリオで [Vue がどのように](https://vuejs.org/v2/guide/forms.html)動作するのか確認してください。
283 | 
284 | ---
285 | 
286 | ### `x-text`
287 | **例:** `<span x-text="foo"></span>`
288 | 
289 | **構造:** `<span x-text="[expression]"`
290 | 
291 | `x-text` は `x-bind` と同様に機能しますが、属性値を更新する代わりに要素の `innerText` を更新します。
292 | 
293 | ---
294 | 
295 | ### `x-html`
296 | **例:** `<span x-html="foo"></span>`
297 | 
298 | **構造:** `<span x-html="[expression]"`
299 | 
300 | `x-html` は `x-bind` と同様に機能しますが、属性の値を更新する代わりに要素の `innerHTML` を更新します。
301 | 
302 | ---
303 | 
304 | ### `x-ref`
305 | **例:** `<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>`
306 | 
307 | **構造:** `<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>`
308 | 
309 | `x-ref` は、コンポーネントから生 DOM 要素を取得する便利な方法を提供します。要素に `x-ref` 属性を設定することで、すべてのイベントハンドラで `$refs` というオブジェクト内から利用できるようになります。
310 | 
311 | これは、ID を設定し、あらゆる場所で `document.querySelector` を使用する代替手段に役立ちます。
312 | 
313 | ---
314 | 
315 | ### `x-if`
316 | **例:** `<template x-if="true"><div>Some Element</div></template>`
317 | 
318 | **構造:** `<template x-if="[expression]"><div>Some Element</div></template>`
319 | 
320 | `x-show` では不十分な場合（`x-show` が false の場合、要素を `display： none` に設定します）、`x-if` を使用して DOM から要素を完全に削除できます。
321 | 
322 | Alpine は仮想 DOM を使用しないため、`<template></template>` タグで `x-if` を使用することが重要です。この実装により、Alpine は堅牢性を保ち、実際の DOM を使用してその仕様を働かせることができます。
323 | 
324 | > 注意: `x-if` には、`<template></template>` タグ内に単一要素のルートが必要です。
325 | 
326 | ---
327 | 
328 | ### `x-for`
329 | **例:**
330 | ```html
331 | <template x-for="item in items" :key="item">
332 |     <div x-text="item"></div>
333 | </template>
334 | ```
335 | 
336 | `x-for` は、配列の各アイテム毎に新しい DOM ノードを作成する場合に使用します。これは、Vue の `v-for` に似ています。ただし、通常の DOM 要素ではなく、`template` タグに存在する必要があります。
337 | 
338 | > 注意: `：key` バインディングはオプションですが、強く推奨しています。
339 | 
340 | ---
341 | 
342 | ### `x-transition`
343 | **例:**
344 | ```html
345 | <div
346 |     x-show="open"
347 |     x-transition:enter="transition ease-out duration-300"
348 |     x-transition:enter-start="opacity-0 transform scale-90"
349 |     x-transition:enter-end="opacity-100 transform scale-100"
350 |     x-transition:leave="transition ease-in duration-300"
351 |     x-transition:leave-start="opacity-100 transform scale-100"
352 |     x-transition:leave-end="opacity-0 transform scale-90"
353 | >...</div>
354 | ```
355 | 
356 | ```html
357 | <template x-if="open">
358 |     <div
359 |         x-transition:enter="transition ease-out duration-300"
360 |         x-transition:enter-start="opacity-0 transform scale-90"
361 |         x-transition:enter-end="opacity-100 transform scale-100"
362 |         x-transition:leave="transition ease-in duration-300"
363 |         x-transition:leave-start="opacity-100 transform scale-100"
364 |         x-transition:leave-end="opacity-0 transform scale-90"
365 |     >...</div>
366 | </template>
367 | ```
368 | 
369 | Alpine は、「非表示」と「表示」の遷移間のさまざまな段階にクラスを要素に適用するための6つの異なるトランジションディレクティブを提供します。これらのディレクティブは、`x-show` と `x-if` の両方で機能します。
370 | 
371 | これらは、VueJs のトランジションディレクティブとまったく同じように動作しますが、より理にかなった異なる名前を持っています。
372 | 
373 | | ディレクティブ | 説明 |
374 | | --- | --- |
375 | | `:enter` | エンターフェーズ全体に適用されます。 |
376 | | `:enter-start` | 要素が挿入される前に追加され、要素が挿入の1フレーム後に削除されます。 |
377 | | `:enter-end` | 要素が挿入後（`enter-start` が削除されると同時）の1フレームに追加され、トランジション/アニメーションが終了すると削除されます。
378 | | `:leave` | リーブフェーズ全体に適用されます。 |
379 | | `:leave-start` | リーブ遷移がトリガされるとすぐに追加され、1フレーム後に削除されます。 |
380 | | `:leave-end` | リーブ遷移がトリガされた後（同時に `leave-start` が削除される）の1フレームに追加され、トランジション/アニメーションが終了すると削除されます。
381 | 
382 | ---
383 | 
384 | ### `x-cloak`
385 | **例:** `<div x-data="{}" x-cloak></div>`
386 | 
387 | Alpine の初期化時に、要素から `x-cloak` 属性が削除されます。これは、事前に初期化された DOM を隠すのに役立ちます。これが機能するためには、通常、次のグローバルスタイルを追加します。:
388 | 
389 | ```html
390 | <style>
391 |     [x-cloak] { display: none; }
392 | </style>
393 | ```
394 | 
395 | ### マジックプロパティ
396 | 
397 | ---
398 | 
399 | ### `$el`
400 | **例:**
401 | ```html
402 | <div x-data>
403 |     <button @click="$el.innerHTML = 'foo'">"foo"に置換します</button>
404 | </div>
405 | ```
406 | 
407 | `$el` は、ルートコンポーネントの DOM ノードを取得するために使用できるマジックプロパティです。
408 | 
409 | ### `$refs`
410 | **例:**
411 | ```html
412 | <span x-ref="foo"></span>
413 | 
414 | <button x-on:click="$refs.foo.innerText = 'bar'"></button>
415 | ```
416 | 
417 | `$refs` は、コンポーネント内で `x-ref` でマークされた DOM 要素を取得するために使用できるマジックプロパティです。これは、DOM 要素を手動で操作する必要がある場合に便利です。
418 | 
419 | ---
420 | 
421 | ### `$event`
422 | **例:**
423 | ```html
424 | <input x-on:input="alert($event.target.value)">
425 | ```
426 | 
427 | `$event` は、ネイティブブラウザの「Event」オブジェクトを取得するためにイベントリスナ内で使用できるマジックプロパティです。
428 | 
429 | ---
430 | 
431 | ### `$dispatch`
432 | **例:**
433 | ```html
434 | <div @custom-event="console.log($event.detail.foo)">
435 |     <button @click="$dispatch('custom-event', { foo: 'bar' })">
436 |     <!-- クリックされると、 console.log が「bar」を出力します -->
437 | </div>
438 | ```
439 | 
440 | `$dispatch` は、`CustomEvent` を作成し、内部で `.dispatchEvent()` を使用してディスパッチするためのショートカットです。カスタムイベントを使用してコンポーネント間およびコンポーネント間でデータを渡すには、多くの適切なユースケースがあります。基礎となるブラウザの `CustomEvent` システムの詳細については、[こちらをご覧ください。](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)
441 | 
442 | `$dispatch('some-event', { some: 'data' })` の2番目のパラメータとして渡されるデータは、新しいイベントの「detail」プロパティ: `$event.detail.some` です。カスタムイベントデータを `.detail` プロパティにアタッチすることは、ブラウザの `CustomEvent` の標準的な方法です。詳細は[こちらをご覧ください。](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)
443 | 
444 | また、`$dispatch()` を使用して、`x-model` バインディングのデータ更新をトリガすることもできます。 例えば:
445 | 
446 | ```html
447 | <div x-data="{ foo: 'bar' }">
448 |     <span x-model="foo">
449 |         <button @click="$dispatch('input', 'baz')">
450 |         <!-- ボタンがクリックされると、`x-model` は浮上する「input」イベントをキャッチし、foo を「baz」に更新します。 -->
451 |     </span>
452 | </div>
453 | ```
454 | 
455 | ---
456 | 
457 | ### `$nextTick`
458 | **例:**
459 | ```html
460 | <div x-data="{ fruit: 'apple' }">
461 |     <button
462 |         x-on:click="
463 |             fruit = 'pear';
464 |             $nextTick(() => { console.log($event.target.innerText) });
465 |         "
466 |         x-text="fruit"
467 |     ></button>
468 | </div>
469 | ```
470 | 
471 | `$nextTick` は、Alpine がリアクティブな DOM 更新を行った後、指定された式のみを実行できるマジックプロパティです。これは、データ更新が反映された後に DOM ステートとやり取りしたい場合に便利です。
472 | 
473 | ## ライセンス
474 | 
475 | Copyright © 2019-2020 Caleb Porzio and contributors
476 | 
477 | MIT ライセンスの下でライセンスされています。詳細については、[LICENSE.md](LICENSE.md) を参照してください。
478 | 


--------------------------------------------------------------------------------
/test/on.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait, fireEvent } from '@testing-library/dom'
  3 | const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
  4 | 
  5 | global.MutationObserver = class {
  6 |     observe() {}
  7 | }
  8 | 
  9 | test('data modified in event listener updates affected attribute bindings', async () => {
 10 |     document.body.innerHTML = `
 11 |         <div x-data="{ foo: 'bar' }">
 12 |             <button x-on:click="foo = 'baz'"></button>
 13 | 
 14 |             <span x-bind:foo="foo"></span>
 15 |         </div>
 16 |     `
 17 | 
 18 |     Alpine.start()
 19 | 
 20 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 21 | 
 22 |     document.querySelector('button').click()
 23 | 
 24 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 25 | })
 26 | 
 27 | test('nested data modified in event listener updates affected attribute bindings', async () => {
 28 |     document.body.innerHTML = `
 29 |         <div x-data="{ nested: { foo: 'bar' } }">
 30 |             <button x-on:click="nested.foo = 'baz'"></button>
 31 | 
 32 |             <span x-bind:foo="nested.foo"></span>
 33 |         </div>
 34 |     `
 35 | 
 36 |     Alpine.start()
 37 | 
 38 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 39 | 
 40 |     document.querySelector('button').click()
 41 | 
 42 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 43 | })
 44 | 
 45 | 
 46 | test('.stop modifier', async () => {
 47 |     document.body.innerHTML = `
 48 |         <div x-data="{ foo: 'bar' }">
 49 |             <button x-on:click="foo = 'baz'">
 50 |                 <span></span>
 51 |             </button>
 52 |         </div>
 53 |     `
 54 | 
 55 |     Alpine.start()
 56 | 
 57 |     expect(document.querySelector('div').__x.$data.foo).toEqual('bar')
 58 | 
 59 |     document.querySelector('span').click()
 60 | 
 61 |     await wait(() => {
 62 |         expect(document.querySelector('div').__x.$data.foo).toEqual('baz')
 63 |     })
 64 | })
 65 | 
 66 | test('.self modifier', async () => {
 67 |     document.body.innerHTML = `
 68 |         <div x-data="{ foo: 'bar' }">
 69 |             <div x-on:click.self="foo = 'baz'" id="selfTarget">
 70 |                 <button></button>
 71 |             </div>
 72 |             <span x-text="foo"></span>
 73 |         </div>
 74 |     `
 75 | 
 76 |     Alpine.start()
 77 | 
 78 |     expect(document.querySelector('span').innerText).toEqual('bar')
 79 | 
 80 |     document.querySelector('button').click()
 81 | 
 82 |     await wait(() => {
 83 |         expect(document.querySelector('span').innerText).toEqual('bar')
 84 |     })
 85 | 
 86 |     document.querySelector('#selfTarget').click()
 87 | 
 88 |     await wait(() => {
 89 |         expect(document.querySelector('span').innerText).toEqual('baz')
 90 |     })
 91 | })
 92 | 
 93 | test('.prevent modifier', async () => {
 94 |     document.body.innerHTML = `
 95 |         <div x-data="{}">
 96 |             <input type="checkbox" x-on:click.prevent>
 97 |         </div>
 98 |     `
 99 | 
100 |     Alpine.start()
101 | 
102 |     expect(document.querySelector('input').checked).toEqual(false)
103 | 
104 |     document.querySelector('input').click()
105 | 
106 |     expect(document.querySelector('input').checked).toEqual(false)
107 | })
108 | 
109 | test('.window modifier', async () => {
110 |     document.body.innerHTML = `
111 |         <div x-data="{ foo: 'bar' }">
112 |             <div x-on:click.window="foo = 'baz'"></div>
113 | 
114 |             <span x-bind:foo="foo"></span>
115 |         </div>
116 |     `
117 | 
118 |     Alpine.start()
119 | 
120 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
121 | 
122 |     document.body.click()
123 | 
124 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
125 | })
126 | 
127 | test('unbind global event handler when element is removed', async () => {
128 |     document._callCount = 0
129 | 
130 |     document.body.innerHTML = `
131 |         <div x-data="{}">
132 |             <div x-on:click.window="document._callCount += 1"></div>
133 |         </div>
134 |     `
135 | 
136 |     Alpine.start()
137 | 
138 |     document.body.click()
139 | 
140 |     document.body.innerHTML = ''
141 | 
142 |     document.body.click()
143 | 
144 |     await new Promise(resolve => setTimeout(resolve, 1))
145 | 
146 |     expect(document._callCount).toEqual(1)
147 | })
148 | 
149 | test('.document modifier', async () => {
150 |     document.body.innerHTML = `
151 |         <div x-data="{ foo: 'bar' }">
152 |             <div x-on:click.document="foo = 'baz'"></div>
153 | 
154 |             <span x-bind:foo="foo"></span>
155 |         </div>
156 |     `
157 | 
158 |     Alpine.start()
159 | 
160 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
161 | 
162 |     document.body.click()
163 | 
164 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
165 | })
166 | 
167 | test('.once modifier', async () => {
168 |     document.body.innerHTML = `
169 |         <div x-data="{ count: 0 }">
170 |             <button x-on:click.once="count = count+1"></button>
171 | 
172 |             <span x-bind:foo="count"></span>
173 |         </div>
174 |     `
175 | 
176 |     Alpine.start()
177 | 
178 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('0')
179 | 
180 |     document.querySelector('button').click()
181 | 
182 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('1') })
183 | 
184 |     document.querySelector('button').click()
185 | 
186 |     await timeout(25)
187 | 
188 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('1')
189 | })
190 | 
191 | test('.once modifier does not remove listener if false is returned', async () => {
192 |     document.body.innerHTML = `
193 |         <div x-data="{ count: 0 }">
194 |             <button x-on:click.once="return ++count === 2"></button>
195 | 
196 |             <span x-bind:foo="count"></span>
197 |         </div>
198 |     `
199 | 
200 |     Alpine.start()
201 | 
202 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('0')
203 | 
204 |     document.querySelector('button').click()
205 | 
206 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('1') })
207 | 
208 |     document.querySelector('button').click()
209 | 
210 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('2') })
211 | 
212 |     await timeout(25)
213 | 
214 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('2')
215 | })
216 | 
217 | test('keydown modifiers', async () => {
218 |     document.body.innerHTML = `
219 |         <div x-data="{ count: 0 }">
220 |             <input type="text" x-on:keydown="count++" x-on:keydown.enter="count++" x-on:keydown.space="count++">
221 | 
222 |             <span x-text="count"></span>
223 |         </div>
224 |     `
225 | 
226 |     Alpine.start()
227 | 
228 |     expect(document.querySelector('span').innerText).toEqual(0)
229 | 
230 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
231 | 
232 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(2) })
233 | 
234 |     fireEvent.keyDown(document.querySelector('input'), { key: ' ' })
235 | 
236 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(4) })
237 | 
238 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Spacebar' })
239 | 
240 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(6) })
241 | 
242 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
243 | 
244 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(7) })
245 | })
246 | 
247 | test('keydown combo modifiers', async () => {
248 |     document.body.innerHTML = `
249 |         <div x-data="{ count: 0 }">
250 |             <input type="text" x-on:keydown.cmd.enter="count++">
251 | 
252 |             <span x-text="count"></span>
253 |         </div>
254 |     `
255 | 
256 |     Alpine.start()
257 | 
258 |     expect(document.querySelector('span').innerText).toEqual(0)
259 | 
260 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
261 | 
262 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
263 | 
264 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter', metaKey: true })
265 | 
266 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
267 | })
268 | 
269 | test('keydown with specified key and stop modifier only stops for specified key', async () => {
270 |     document.body.innerHTML = `
271 |         <div x-data="{ count: 0 }">
272 |             <article x-on:keydown="count++">
273 |                 <input type="text" x-on:keydown.enter.stop>
274 |             </article>
275 | 
276 |             <span x-text="count"></span>
277 |         </div>
278 |     `
279 | 
280 |     Alpine.start()
281 | 
282 |     expect(document.querySelector('span').innerText).toEqual(0)
283 | 
284 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
285 | 
286 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
287 | 
288 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
289 | 
290 |     await timeout(25)
291 |     expect(document.querySelector('span').innerText).toEqual(1)
292 | })
293 | 
294 | test('click away', async () => {
295 |     // Because jsDom doesn't support .offsetHeight and offsetWidth, we have to
296 |     // make our own implementation using a specific class added to the class. Ugh.
297 |     Object.defineProperties(window.HTMLElement.prototype, {
298 |         offsetHeight: {
299 |           get: function() { return this.classList.contains('hidden') ? 0 : 1 }
300 |         },
301 |         offsetWidth: {
302 |           get: function() { return this.classList.contains('hidden') ? 0 : 1 }
303 |         }
304 |     });
305 | 
306 |     document.body.innerHTML = `
307 |         <div id="outer">
308 |             <div x-data="{ isOpen: true }">
309 |                 <button x-on:click="isOpen = true"></button>
310 | 
311 |                 <ul x-bind:class="{ 'hidden': ! isOpen }" x-on:click.away="isOpen = false">
312 |                     <li>...</li>
313 |                 </ul>
314 |             </div>
315 |         </div>
316 |     `
317 | 
318 |     Alpine.start()
319 | 
320 |     expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false)
321 | 
322 |     document.querySelector('li').click()
323 | 
324 |     await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
325 | 
326 |     document.querySelector('ul').click()
327 | 
328 |     await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
329 | 
330 |     document.querySelector('#outer').click()
331 | 
332 |     await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(true) })
333 | 
334 |     document.querySelector('button').click()
335 | 
336 |     await wait(() => { expect(document.querySelector('ul').classList.contains('hidden')).toEqual(false) })
337 | })
338 | 
339 | test('supports short syntax', async () => {
340 |     document.body.innerHTML = `
341 |         <div x-data="{ foo: 'bar' }">
342 |             <button @click="foo = 'baz'"></button>
343 |             <span x-bind:foo="foo"></span>
344 |         </div>
345 |     `
346 | 
347 |     Alpine.start()
348 | 
349 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
350 | 
351 |     document.querySelector('button').click()
352 | 
353 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
354 | })
355 | 
356 | 
357 | test('event with colon', async () => {
358 |     document.body.innerHTML = `
359 |         <div x-data="{ foo: 'bar' }">
360 |             <div x-on:my:event.document="foo = 'baz'"></div>
361 | 
362 |             <span x-bind:foo="foo"></span>
363 |         </div>
364 |     `
365 | 
366 |     Alpine.start()
367 | 
368 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
369 | 
370 |     var event = new CustomEvent('my:event');
371 | 
372 |     document.dispatchEvent(event);
373 | 
374 |     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
375 | })
376 | 
377 | test('prevent default action when an event returns false', async () => {
378 |     window.confirm = jest.fn().mockImplementation(() => false)
379 | 
380 |     document.body.innerHTML = `
381 |         <div x-data="{}">
382 |             <input type="checkbox" x-on:click="return confirm('are you sure?')">
383 |         </div>
384 |     `
385 | 
386 |     Alpine.start()
387 | 
388 |     expect(document.querySelector('input').checked).toEqual(false)
389 | 
390 |     document.querySelector('input').click()
391 | 
392 |     expect(document.querySelector('input').checked).toEqual(false)
393 | 
394 |     window.confirm = jest.fn().mockImplementation(() => true)
395 | 
396 |     document.querySelector('input').click()
397 | 
398 |     expect(document.querySelector('input').checked).toEqual(true)
399 | })
400 | 
401 | test('allow method reference to be passed to listeners', async () => {
402 |     document.body.innerHTML = `
403 |         <div x-data="{ foo: 'bar', changeFoo() { this.foo = 'baz' } }">
404 |             <button x-on:click="changeFoo"></button>
405 |             <span x-text="foo"></span>
406 |         </div>
407 |     `
408 | 
409 |     Alpine.start()
410 | 
411 |     expect(document.querySelector('span').innerText).toEqual('bar')
412 | 
413 |     document.querySelector('button').click()
414 | 
415 |     await new Promise(resolve => setTimeout(resolve, 1))
416 | 
417 |     expect(document.querySelector('span').innerText).toEqual('baz')
418 | })
419 | 
420 | test('event instance is passed to method reference', async () => {
421 |     document.body.innerHTML = `
422 |         <div x-data="{ foo: 'bar', changeFoo(e) { this.foo = e.target.id } }">
423 |             <button x-on:click="changeFoo" id="baz"></button>
424 |             <span x-text="foo"></span>
425 |         </div>
426 |     `
427 | 
428 |     Alpine.start()
429 | 
430 |     expect(document.querySelector('span').innerText).toEqual('bar')
431 | 
432 |     document.querySelector('button').click()
433 | 
434 |     await new Promise(resolve => setTimeout(resolve, 1))
435 | 
436 |     expect(document.querySelector('span').innerText).toEqual('baz')
437 | })
438 | 
439 | test('autocomplete event does not trigger keydown with modifier callback', async () => {
440 |     document.body.innerHTML = `
441 |         <div x-data="{ count: 0 }">
442 |             <input type="text" x-on:keydown.?="count++">
443 | 
444 |             <span x-text="count"></span>
445 |         </div>
446 |     `
447 | 
448 |     Alpine.start()
449 | 
450 |     expect(document.querySelector('span').innerText).toEqual(0)
451 | 
452 |     const autocompleteEvent = new Event('keydown')
453 | 
454 |     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
455 | 
456 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
457 | 
458 |     fireEvent.keyDown(document.querySelector('input'), { key: '?' })
459 | 
460 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
461 | 
462 |     fireEvent(document.querySelector('input'), autocompleteEvent)
463 | 
464 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
465 | })
466 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // Thanks @stimulus:
  3 | // https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/src/application.ts
  4 | export function domReady() {
  5 |     return new Promise(resolve => {
  6 |         if (document.readyState == "loading") {
  7 |             document.addEventListener("DOMContentLoaded", resolve)
  8 |         } else {
  9 |             resolve()
 10 |         }
 11 |     })
 12 | }
 13 | 
 14 | export function arrayUnique(array) {
 15 |     return Array.from(new Set(array))
 16 | }
 17 | 
 18 | export function isTesting() {
 19 |     return navigator.userAgent, navigator.userAgent.includes("Node.js")
 20 |         || navigator.userAgent.includes("jsdom")
 21 | }
 22 | 
 23 | export function kebabCase(subject) {
 24 |     return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase()
 25 | }
 26 | 
 27 | export function walk(el, callback) {
 28 |     if (callback(el) === false) return
 29 | 
 30 |     let node = el.firstElementChild
 31 | 
 32 |     while (node) {
 33 |         walk(node, callback)
 34 | 
 35 |         node = node.nextElementSibling
 36 |     }
 37 | }
 38 | 
 39 | export function debounce(func, wait) {
 40 |     var timeout
 41 |     return function () {
 42 |         var context = this, args = arguments
 43 |         var later = function () {
 44 |             timeout = null
 45 |             func.apply(context, args)
 46 |         }
 47 |         clearTimeout(timeout)
 48 |         timeout = setTimeout(later, wait)
 49 |     }
 50 | }
 51 | 
 52 | export function saferEval(expression, dataContext, additionalHelperVariables = {}) {
 53 |     return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`))(
 54 |         dataContext, ...Object.values(additionalHelperVariables)
 55 |     )
 56 | }
 57 | 
 58 | export function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
 59 |     // For the cases when users pass only a function reference to the caller: `x-on:click="foo"`
 60 |     // Where "foo" is a function. Also, we'll pass the function the event instance when we call it.
 61 |     if (Object.keys(dataContext).includes(expression)) {
 62 |         let methodReference = (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`))(
 63 |             dataContext, ...Object.values(additionalHelperVariables)
 64 |         )
 65 | 
 66 |         if (typeof methodReference === 'function') {
 67 |             return methodReference.call(dataContext, additionalHelperVariables['$event'])
 68 |         }
 69 |     }
 70 | 
 71 |     return (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))(
 72 |         dataContext, ...Object.values(additionalHelperVariables)
 73 |     )
 74 | }
 75 | 
 76 | const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/
 77 | 
 78 | export function isXAttr(attr) {
 79 |     const name = replaceAtAndColonWithStandardSyntax(attr.name)
 80 |     return xAttrRE.test(name)
 81 | }
 82 | 
 83 | export function getXAttrs(el, type) {
 84 |     return Array.from(el.attributes)
 85 |         .filter(isXAttr)
 86 |         .map(attr => {
 87 |             const name = replaceAtAndColonWithStandardSyntax(attr.name)
 88 | 
 89 |             const typeMatch = name.match(xAttrRE)
 90 |             const valueMatch = name.match(/:([a-zA-Z\-:]+)/)
 91 |             const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 92 | 
 93 |             return {
 94 |                 type: typeMatch ? typeMatch[1] : null,
 95 |                 value: valueMatch ? valueMatch[1] : null,
 96 |                 modifiers: modifiers.map(i => i.replace('.', '')),
 97 |                 expression: attr.value,
 98 |             }
 99 |         })
100 |         .filter(i => {
101 |             // If no type is passed in for filtering, bypass filter
102 |             if (! type) return true
103 | 
104 |             return i.type === type
105 |         })
106 | }
107 | 
108 | export function isBooleanAttr(attrName) {
109 |     // As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute
110 |     // Array roughly ordered by estimated usage
111 |     const booleanAttributes = [
112 |         'disabled','checked','required','readonly','hidden','open', 'selected',
113 |         'autofocus', 'itemscope', 'multiple', 'novalidate','allowfullscreen',
114 |         'allowpaymentrequest', 'formnovalidate', 'autoplay', 'controls', 'loop',
115 |         'muted', 'playsinline', 'default', 'ismap', 'reversed', 'async', 'defer',
116 |         'nomodule'
117 |     ]
118 | 
119 |     return booleanAttributes.includes(attrName)
120 | }
121 | 
122 | export function replaceAtAndColonWithStandardSyntax(name) {
123 |     if (name.startsWith('@')) {
124 |         return name.replace('@', 'x-on:')
125 |     } else if (name.startsWith(':')) {
126 |         return name.replace(':', 'x-bind:')
127 |     }
128 | 
129 |     return name
130 | }
131 | 
132 | export function transitionIn(el, show, forceSkip = false) {
133 |     // We don't want to transition on the initial page load.
134 |     if (forceSkip) return show()
135 | 
136 |     const attrs = getXAttrs(el, 'transition')
137 |     const showAttr = getXAttrs(el, 'show')[0]
138 | 
139 |     // If this is triggered by a x-show.transition.
140 |     if (showAttr && showAttr.modifiers.includes('transition')) {
141 |         let modifiers = showAttr.modifiers
142 | 
143 |         // If x-show.transition.out, we'll skip the "in" transition.
144 |         if (modifiers.includes('out') && ! modifiers.includes('in')) return show()
145 | 
146 |         const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out')
147 | 
148 |         // If x-show.transition.in...out... only use "in" related modifiers for this transition.
149 |         modifiers = settingBothSidesOfTransition
150 |             ? modifiers.filter((i, index) => index < modifiers.indexOf('out')) : modifiers
151 | 
152 |         transitionHelperIn(el, modifiers, show)
153 |     // Otherwise, we can assume x-transition:enter.
154 |     } else if (attrs.length > 0) {
155 |         transitionClassesIn(el, attrs, show)
156 |     } else {
157 |     // If neither, just show that damn thing.
158 |         show()
159 |     }
160 | }
161 | 
162 | export function transitionOut(el, hide, forceSkip = false) {
163 |     if (forceSkip) return hide()
164 | 
165 |     const attrs = getXAttrs(el, 'transition')
166 |     const showAttr = getXAttrs(el, 'show')[0]
167 | 
168 |     if (showAttr && showAttr.modifiers.includes('transition')) {
169 |         let modifiers = showAttr.modifiers
170 | 
171 |         if (modifiers.includes('in') && ! modifiers.includes('out')) return hide()
172 | 
173 |         const settingBothSidesOfTransition = modifiers.includes('in') && modifiers.includes('out')
174 | 
175 |         modifiers = settingBothSidesOfTransition
176 |             ? modifiers.filter((i, index) => index > modifiers.indexOf('out')) : modifiers
177 | 
178 |         transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hide)
179 |     } else if (attrs.length > 0) {
180 |         transitionClassesOut(el, attrs, hide)
181 |     } else {
182 |         hide()
183 |     }
184 | }
185 | 
186 | export function transitionHelperIn(el, modifiers, showCallback) {
187 |     // Default values inspired by: https://material.io/design/motion/speed.html#duration
188 |     const styleValues = {
189 |         duration: modifierValue(modifiers, 'duration', 150),
190 |         origin: modifierValue(modifiers, 'origin', 'center'),
191 |         first: {
192 |             opacity: 0,
193 |             scale: modifierValue(modifiers, 'scale', 95),
194 |         },
195 |         second: {
196 |             opacity: 1,
197 |             scale: 100,
198 |         },
199 |     }
200 | 
201 |     transitionHelper(el, modifiers, showCallback, () => {}, styleValues)
202 | }
203 | 
204 | export function transitionHelperOut(el, modifiers, settingBothSidesOfTransition, hideCallback) {
205 |     // Make the "out" transition .5x slower than the "in". (Visually better)
206 |     // HOWEVER, if they explicitly set a duration for the "out" transition,
207 |     // use that.
208 |     const duration = settingBothSidesOfTransition
209 |         ? modifierValue(modifiers, 'duration', 150)
210 |         : modifierValue(modifiers, 'duration', 150) / 2
211 | 
212 |     const styleValues = {
213 |         duration: duration,
214 |         origin: modifierValue(modifiers, 'origin', 'center'),
215 |         first: {
216 |             opacity: 1,
217 |             scale: 100,
218 |         },
219 |         second: {
220 |             opacity: 0,
221 |             scale: modifierValue(modifiers, 'scale', 95),
222 |         },
223 |     }
224 | 
225 |     transitionHelper(el, modifiers, () => {}, hideCallback, styleValues)
226 | }
227 | 
228 | function modifierValue(modifiers, key, fallback) {
229 |     // If the modifier isn't present, use the default.
230 |     if (modifiers.indexOf(key) === -1) return fallback
231 | 
232 |     // If it IS present, grab the value after it: x-show.transition.duration.500ms
233 |     const rawValue = modifiers[modifiers.indexOf(key) + 1]
234 | 
235 |     if (! rawValue) return fallback
236 | 
237 |     if (key === 'scale') {
238 |         // Check if the very next value is NOT a number and return the fallback.
239 |         // If x-show.transition.scale, we'll use the default scale value.
240 |         // That is how a user opts out of the opacity transition.
241 |         if (! isNumeric(rawValue)) return fallback
242 |     }
243 | 
244 |     if (key === 'duration') {
245 |         // Support x-show.transition.duration.500ms && duration.500
246 |         let match = rawValue.match(/([0-9]+)ms/)
247 |         if (match) return match[1]
248 |     }
249 | 
250 |     if (key === 'origin') {
251 |         // Support chaining origin directions: x-show.transition.top.right
252 |         if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) {
253 |             return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' ')
254 |         }
255 |     }
256 | 
257 |     return rawValue
258 | }
259 | 
260 | export function transitionHelper(el, modifiers, hook1, hook2, styleValues) {
261 |     // If the user set these style values, we'll put them back when we're done with them.
262 |     const opacityCache = el.style.opacity
263 |     const transformCache = el.style.transform
264 |     const transformOriginCache = el.style.transformOrigin
265 | 
266 |     // If no modifiers are present: x-show.transition, we'll default to both opacity and scale.
267 |     const noModifiers = ! modifiers.includes('opacity') && ! modifiers.includes('scale')
268 |     const transitionOpacity = noModifiers || modifiers.includes('opacity')
269 |     const transitionScale = noModifiers || modifiers.includes('scale')
270 | 
271 |     // These are the explicit stages of a transition (same stages for in and for out).
272 |     // This way you can get a birds eye view of the hooks, and the differences
273 |     // between them.
274 |     const stages = {
275 |         start() {
276 |             if (transitionOpacity) el.style.opacity = styleValues.first.opacity
277 |             if (transitionScale) el.style.transform = `scale(${styleValues.first.scale / 100})`
278 |         },
279 |         during() {
280 |             if (transitionScale) el.style.transformOrigin = styleValues.origin
281 |             el.style.transitionProperty = [(transitionOpacity ? `opacity` : ``), (transitionScale ? `transform` : ``)].join(' ').trim()
282 |             el.style.transitionDuration = `${styleValues.duration / 1000}s`
283 |             el.style.transitionTimingFunction = `cubic-bezier(0.4, 0.0, 0.2, 1)`
284 |         },
285 |         show() {
286 |             hook1()
287 |         },
288 |         end() {
289 |             if (transitionOpacity) el.style.opacity = styleValues.second.opacity
290 |             if (transitionScale) el.style.transform = `scale(${styleValues.second.scale / 100})`
291 |         },
292 |         hide() {
293 |             hook2()
294 |         },
295 |         cleanup() {
296 |             if (transitionOpacity) el.style.opacity = opacityCache
297 |             if (transitionScale) el.style.transform = transformCache
298 |             if (transitionScale) el.style.transformOrigin = transformOriginCache
299 |             el.style.transitionProperty = null
300 |             el.style.transitionDuration = null
301 |             el.style.transitionTimingFunction = null
302 |         },
303 |     }
304 | 
305 |     transition(el, stages)
306 | }
307 | 
308 | export function transitionClassesIn(el, directives, showCallback) {
309 |     const enter = (directives.find(i => i.value === 'enter') || { expression: '' }).expression.split(' ').filter(i => i !== '')
310 |     const enterStart = (directives.find(i => i.value === 'enter-start') || { expression: '' }).expression.split(' ').filter(i => i !== '')
311 |     const enterEnd = (directives.find(i => i.value === 'enter-end') || { expression: '' }).expression.split(' ').filter(i => i !== '')
312 | 
313 |     transitionClasses(el, enter, enterStart, enterEnd, showCallback, () => {})
314 | }
315 | 
316 | export function transitionClassesOut(el, directives, hideCallback) {
317 |     const leave = (directives.find(i => i.value === 'leave') || { expression: '' }).expression.split(' ').filter(i => i !== '')
318 |     const leaveStart = (directives.find(i => i.value === 'leave-start') || { expression: '' }).expression.split(' ').filter(i => i !== '')
319 |     const leaveEnd = (directives.find(i => i.value === 'leave-end') || { expression: '' }).expression.split(' ').filter(i => i !== '')
320 | 
321 |     transitionClasses(el, leave, leaveStart, leaveEnd, () => {}, hideCallback)
322 | }
323 | 
324 | export function transitionClasses(el, classesDuring, classesStart, classesEnd, hook1, hook2) {
325 |     const originalClasses = el.__x_original_classes || []
326 | 
327 |     const stages = {
328 |         start() {
329 |             el.classList.add(...classesStart)
330 |         },
331 |         during() {
332 |             el.classList.add(...classesDuring)
333 |         },
334 |         show() {
335 |             hook1()
336 |         },
337 |         end() {
338 |             // Don't remove classes that were in the original class attribute.
339 |             el.classList.remove(...classesStart.filter(i => !originalClasses.includes(i)))
340 |             el.classList.add(...classesEnd)
341 |         },
342 |         hide() {
343 |             hook2()
344 |         },
345 |         cleanup() {
346 |             el.classList.remove(...classesDuring.filter(i => !originalClasses.includes(i)))
347 |             el.classList.remove(...classesEnd.filter(i => !originalClasses.includes(i)))
348 |         },
349 |     }
350 | 
351 |     transition(el, stages)
352 | }
353 | 
354 | export function transition(el, stages) {
355 |     stages.start()
356 |     stages.during()
357 | 
358 |     requestAnimationFrame(() => {
359 |         // Note: Safari's transitionDuration property will list out comma separated transition durations
360 |         // for every single transition property. Let's grab the first one and call it a day.
361 |         let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000
362 | 
363 |         stages.show()
364 | 
365 |         requestAnimationFrame(() => {
366 |             stages.end()
367 | 
368 |             setTimeout(() => {
369 |                 stages.hide()
370 | 
371 |                 // Adding an "isConnected" check, in case the callback
372 |                 // removed the element from the DOM.
373 |                 if (el.isConnected) {
374 |                     stages.cleanup()
375 |                 }
376 |             }, duration);
377 |         })
378 |     });
379 | }
380 | 
381 | export function isNumeric(subject){
382 |     return ! isNaN(subject)
383 | }
384 | 


--------------------------------------------------------------------------------
/src/component.js:
--------------------------------------------------------------------------------
  1 | import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'
  2 | import { handleForDirective } from './directives/for'
  3 | import { handleAttributeBindingDirective } from './directives/bind'
  4 | import { handleTextDirective } from './directives/text'
  5 | import { handleHtmlDirective } from './directives/html'
  6 | import { handleShowDirective } from './directives/show'
  7 | import { handleIfDirective } from './directives/if'
  8 | import { registerModelListener } from './directives/model'
  9 | import { registerListener } from './directives/on'
 10 | import { unwrap, wrap } from './observable'
 11 | 
 12 | export default class Component {
 13 |     constructor(el, seedDataForCloning = null) {
 14 |         this.$el = el
 15 | 
 16 |         const dataAttr = this.$el.getAttribute('x-data')
 17 |         const dataExpression = dataAttr === '' ? '{}' : dataAttr
 18 |         const initExpression = this.$el.getAttribute('x-init')
 19 | 
 20 |         this.unobservedData = seedDataForCloning ? seedDataForCloning : saferEval(dataExpression, {})
 21 | 
 22 |         /* IE11-ONLY:START */
 23 |             // For IE11, add our magic properties to the original data for access.
 24 |             // The Proxy polyfill does not allow properties to be added after creation.
 25 |             this.unobservedData.$el = null
 26 |             this.unobservedData.$refs = null
 27 |             this.unobservedData.$nextTick = null
 28 |             this.unobservedData.$watch = null
 29 |         /* IE11-ONLY:END */
 30 | 
 31 |         // Construct a Proxy-based observable. This will be used to handle reactivity.
 32 |         let { membrane, data } = this.wrapDataInObservable(this.unobservedData)
 33 |         this.$data = data
 34 |         this.membrane = membrane
 35 | 
 36 |         // After making user-supplied data methods reactive, we can now add
 37 |         // our magic properties to the original data for access.
 38 |         this.unobservedData.$el = this.$el
 39 |         this.unobservedData.$refs = this.getRefsProxy()
 40 | 
 41 |         this.nextTickStack = []
 42 |         this.unobservedData.$nextTick = (callback) => {
 43 |             this.nextTickStack.push(callback)
 44 |         }
 45 | 
 46 |         this.watchers = {}
 47 |         this.unobservedData.$watch = (property, callback) => {
 48 |             if (! this.watchers[property]) this.watchers[property] = []
 49 | 
 50 |             this.watchers[property].push(callback)
 51 |         }
 52 | 
 53 |         this.showDirectiveStack = []
 54 |         this.showDirectiveLastElement
 55 | 
 56 |         var initReturnedCallback
 57 |         // If x-init is present AND we aren't cloning (skip x-init on clone)
 58 |         if (initExpression && ! seedDataForCloning) {
 59 |             // We want to allow data manipulation, but not trigger DOM updates just yet.
 60 |             // We haven't even initialized the elements with their Alpine bindings. I mean c'mon.
 61 |             this.pauseReactivity = true
 62 |             initReturnedCallback = this.evaluateReturnExpression(this.$el, initExpression)
 63 |             this.pauseReactivity = false
 64 |         }
 65 | 
 66 |         // Register all our listeners and set all our attribute bindings.
 67 |         this.initializeElements(this.$el)
 68 | 
 69 |         // Use mutation observer to detect new elements being added within this component at run-time.
 70 |         // Alpine's just so darn flexible amirite?
 71 |         this.listenForNewElementsToInitialize()
 72 | 
 73 |         if (typeof initReturnedCallback === 'function') {
 74 |             // Run the callback returned from the "x-init" hook to allow the user to do stuff after
 75 |             // Alpine's got it's grubby little paws all over everything.
 76 |             initReturnedCallback.call(this.$data)
 77 |         }
 78 |     }
 79 | 
 80 |     getUnobservedData() {
 81 |         return unwrap(this.membrane, this.$data)
 82 |     }
 83 | 
 84 |     wrapDataInObservable(data) {
 85 |         var self = this
 86 | 
 87 |         let updateDom = debounce(function () {
 88 |             self.updateElements(self.$el)
 89 |         }, 0)
 90 | 
 91 |         return wrap(data, (target, key) => {
 92 |             if (self.watchers[key]) {
 93 |                 // If there's a watcher for this specific key, run it.
 94 |                 self.watchers[key].forEach(callback => callback(target[key]))
 95 |             } else {
 96 |                 // Let's walk through the watchers with "dot-notation" (foo.bar) and see
 97 |                 // if this mutation fits any of them.
 98 |                 Object.keys(self.watchers)
 99 |                     .filter(i => i.includes('.'))
100 |                     .forEach(fullDotNotationKey => {
101 |                         let dotNotationParts = fullDotNotationKey.split('.')
102 | 
103 |                         // If this dot-notation watcher's last "part" doesn't match the current
104 |                         // key, then skip it early for performance reasons.
105 |                         if (key !== dotNotationParts[dotNotationParts.length - 1]) return
106 | 
107 |                         // Now, walk through the dot-notation "parts" recursively to find
108 |                         // a match, and call the watcher if one's found.
109 |                         dotNotationParts.reduce((comparisonData, part) => {
110 |                             if (Object.is(target, comparisonData)) {
111 |                                 // Run the watchers.
112 |                                 self.watchers[fullDotNotationKey].forEach(callback => callback(target[key]))
113 |                             }
114 |                             return comparisonData[part]
115 |                         }, self.getUnobservedData())
116 |                     })
117 |             }
118 | 
119 |             // Don't react to data changes for cases like the `x-created` hook.
120 |             if (self.pauseReactivity) return
121 | 
122 |             updateDom()
123 |         })
124 |     }
125 | 
126 |     walkAndSkipNestedComponents(el, callback, initializeComponentCallback = () => {}) {
127 |         walk(el, el => {
128 |             // We've hit a component.
129 |             if (el.hasAttribute('x-data')) {
130 |                 // If it's not the current one.
131 |                 if (! el.isSameNode(this.$el)) {
132 |                     // Initialize it if it's not.
133 |                     if (! el.__x) initializeComponentCallback(el)
134 | 
135 |                     // Now we'll let that sub-component deal with itself.
136 |                     return false
137 |                 }
138 |             }
139 | 
140 |             return callback(el)
141 |         })
142 |     }
143 | 
144 |     initializeElements(rootEl, extraVars = () => {}) {
145 |         this.walkAndSkipNestedComponents(rootEl, el => {
146 |             // Don't touch spawns from for loop
147 |             if (el.__x_for_key !== undefined) return false
148 | 
149 |             // Don't touch spawns from if directives
150 |             if (el.__x_inserted_me !== undefined) return false
151 | 
152 |             this.initializeElement(el, extraVars)
153 |         }, el => {
154 |             el.__x = new Component(el)
155 |         })
156 | 
157 |         this.executeAndClearRemainingShowDirectiveStack()
158 | 
159 |         this.executeAndClearNextTickStack(rootEl)
160 |     }
161 | 
162 |     initializeElement(el, extraVars) {
163 |         // To support class attribute merging, we have to know what the element's
164 |         // original class attribute looked like for reference.
165 |         if (el.hasAttribute('class') && getXAttrs(el).length > 0) {
166 |             el.__x_original_classes = el.getAttribute('class').split(' ')
167 |         }
168 | 
169 |         this.registerListeners(el, extraVars)
170 |         this.resolveBoundAttributes(el, true, extraVars)
171 |     }
172 | 
173 |     updateElements(rootEl, extraVars = () => {}) {
174 |         this.walkAndSkipNestedComponents(rootEl, el => {
175 |             // Don't touch spawns from for loop (and check if the root is actually a for loop in a parent, don't skip it.)
176 |             if (el.__x_for_key !== undefined && ! el.isSameNode(this.$el)) return false
177 | 
178 |             this.updateElement(el, extraVars)
179 |         }, el => {
180 |             el.__x = new Component(el)
181 |         })
182 | 
183 |         this.executeAndClearRemainingShowDirectiveStack()
184 | 
185 |         this.executeAndClearNextTickStack(rootEl)
186 |     }
187 | 
188 |     executeAndClearNextTickStack(el) {
189 |         // Skip spawns from alpine directives
190 |         if (el === this.$el) {
191 |             // Walk through the $nextTick stack and clear it as we go.
192 |             while (this.nextTickStack.length > 0) {
193 |                 this.nextTickStack.shift()()
194 |             }
195 |         }
196 |     }
197 | 
198 |     executeAndClearRemainingShowDirectiveStack() {
199 |         // The goal here is to start all the x-show transitions
200 |         // and build a nested promise chain so that elements
201 |         // only hide when the children are finished hiding.
202 |         this.showDirectiveStack.reverse().map(thing => {
203 |             return new Promise(resolve => {
204 |                 thing(finish => {
205 |                     resolve(finish)
206 |                 })
207 |             })
208 |         }).reduce((nestedPromise, promise) => {
209 |             return nestedPromise.then(() => {
210 |                 return promise.then(finish => finish())
211 |             })
212 |         }, Promise.resolve(() => {}))
213 | 
214 |         // We've processed the handler stack. let's clear it.
215 |         this.showDirectiveStack = []
216 |         this.showDirectiveLastElement = undefined
217 |     }
218 | 
219 |     updateElement(el, extraVars) {
220 |         this.resolveBoundAttributes(el, false, extraVars)
221 |     }
222 | 
223 |     registerListeners(el, extraVars) {
224 |         getXAttrs(el).forEach(({ type, value, modifiers, expression }) => {
225 |             switch (type) {
226 |                 case 'on':
227 |                     registerListener(this, el, value, modifiers, expression, extraVars)
228 |                     break;
229 | 
230 |                 case 'model':
231 |                     registerModelListener(this, el, modifiers, expression, extraVars)
232 |                     break;
233 |                 default:
234 |                     break;
235 |             }
236 |         })
237 |     }
238 | 
239 |     resolveBoundAttributes(el, initialUpdate = false, extraVars) {
240 |         let attrs = getXAttrs(el)
241 |         if (el.type !== undefined && el.type === 'radio') {
242 |             // If there's an x-model on a radio input, move it to end of attribute list
243 |             // to ensure that x-bind:value (if present) is processed first.
244 |             const modelIdx = attrs.findIndex((attr) => attr.type === 'model')
245 |             if (modelIdx > -1) {
246 |                 attrs.push(attrs.splice(modelIdx, 1)[0])
247 |             }
248 |         }
249 | 
250 |         attrs.forEach(({ type, value, modifiers, expression }) => {
251 |             switch (type) {
252 |                 case 'model':
253 |                     handleAttributeBindingDirective(this, el, 'value', expression, extraVars, type)
254 |                     break;
255 | 
256 |                 case 'bind':
257 |                     // The :key binding on an x-for is special, ignore it.
258 |                     if (el.tagName.toLowerCase() === 'template' && value === 'key') return
259 | 
260 |                     handleAttributeBindingDirective(this, el, value, expression, extraVars, type)
261 |                     break;
262 | 
263 |                 case 'text':
264 |                     var output = this.evaluateReturnExpression(el, expression, extraVars);
265 | 
266 |                     handleTextDirective(el, output, expression)
267 |                     break;
268 | 
269 |                 case 'html':
270 |                     handleHtmlDirective(this, el, expression, extraVars)
271 |                     break;
272 | 
273 |                 case 'show':
274 |                     var output = this.evaluateReturnExpression(el, expression, extraVars)
275 | 
276 |                     handleShowDirective(this, el, output, modifiers, initialUpdate)
277 |                     break;
278 | 
279 |                 case 'if':
280 |                     // If this element also has x-for on it, don't process x-if.
281 |                     // We will let the "x-for" directive handle the "if"ing.
282 |                     if (attrs.filter(i => i.type === 'for').length > 0) return
283 | 
284 |                     var output = this.evaluateReturnExpression(el, expression, extraVars)
285 | 
286 |                     handleIfDirective(this, el, output, initialUpdate, extraVars)
287 |                     break;
288 | 
289 |                 case 'for':
290 |                     handleForDirective(this, el, expression, initialUpdate, extraVars)
291 |                     break;
292 | 
293 |                 case 'cloak':
294 |                     el.removeAttribute('x-cloak')
295 |                     break;
296 | 
297 |                 default:
298 |                     break;
299 |             }
300 |         })
301 |     }
302 | 
303 |     evaluateReturnExpression(el, expression, extraVars = () => {}) {
304 |         return saferEval(expression, this.$data, {
305 |             ...extraVars(),
306 |             $dispatch: this.getDispatchFunction(el),
307 |         })
308 |     }
309 | 
310 |     evaluateCommandExpression(el, expression, extraVars = () => {}) {
311 |         return saferEvalNoReturn(expression, this.$data, {
312 |             ...extraVars(),
313 |             $dispatch: this.getDispatchFunction(el),
314 |         })
315 |     }
316 | 
317 |     getDispatchFunction (el) {
318 |         return (event, detail = {}) => {
319 |             el.dispatchEvent(new CustomEvent(event, {
320 |                 detail,
321 |                 bubbles: true,
322 |             }))
323 |         }
324 |     }
325 | 
326 |     listenForNewElementsToInitialize() {
327 |         const targetNode = this.$el
328 | 
329 |         const observerOptions = {
330 |             childList: true,
331 |             attributes: true,
332 |             subtree: true,
333 |         }
334 | 
335 |         const observer = new MutationObserver((mutations) => {
336 |             for (let i=0; i < mutations.length; i++){
337 |                 // Filter out mutations triggered from child components.
338 |                 const closestParentComponent = mutations[i].target.closest('[x-data]')
339 |                 if (! (closestParentComponent && closestParentComponent.isSameNode(this.$el))) return
340 | 
341 |                 if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') {
342 |                     const rawData = saferEval(mutations[i].target.getAttribute('x-data'), {})
343 | 
344 |                     Object.keys(rawData).forEach(key => {
345 |                         if (this.$data[key] !== rawData[key]) {
346 |                             this.$data[key] = rawData[key]
347 |                         }
348 |                     })
349 |                 }
350 | 
351 |                 if (mutations[i].addedNodes.length > 0) {
352 |                     mutations[i].addedNodes.forEach(node => {
353 |                         if (node.nodeType !== 1 || node.__x_inserted_me) return
354 | 
355 |                         if (node.matches('[x-data]')) {
356 |                             node.__x = new Component(node)
357 |                             return
358 |                         }
359 | 
360 |                         this.initializeElements(node)
361 |                     })
362 |                 }
363 |               }
364 |         })
365 | 
366 |         observer.observe(targetNode, observerOptions);
367 |     }
368 | 
369 |     getRefsProxy() {
370 |         var self = this
371 | 
372 |         var refObj = {}
373 | 
374 |         /* IE11-ONLY:START */
375 |             // Add any properties up-front that might be necessary for the Proxy polyfill.
376 |             refObj.$isRefsProxy = false;
377 |             refObj.$isAlpineProxy = false;
378 | 
379 |             // If we are in IE, since the polyfill needs all properties to be defined before building the proxy,
380 |             // we just loop on the element, look for any x-ref and create a tmp property on a fake object.
381 |             this.walkAndSkipNestedComponents(self.$el, el => {
382 |                 if (el.hasAttribute('x-ref')) {
383 |                     refObj[el.getAttribute('x-ref')] = true
384 |                 }
385 |             })
386 |         /* IE11-ONLY:END */
387 | 
388 |         // One of the goals of this is to not hold elements in memory, but rather re-evaluate
389 |         // the DOM when the system needs something from it. This way, the framework is flexible and
390 |         // friendly to outside DOM changes from libraries like Vue/Livewire.
391 |         // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
392 |         return new Proxy(refObj, {
393 |             get(object, property) {
394 |                 if (property === '$isAlpineProxy') return true
395 | 
396 |                 var ref
397 | 
398 |                 // We can't just query the DOM because it's hard to filter out refs in
399 |                 // nested components.
400 |                 self.walkAndSkipNestedComponents(self.$el, el => {
401 |                     if (el.hasAttribute('x-ref') && el.getAttribute('x-ref') === property) {
402 |                         ref = el
403 |                     }
404 |                 })
405 | 
406 |                 return ref
407 |             }
408 |         })
409 |     }
410 | }
411 | 


--------------------------------------------------------------------------------
/test/for.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('x-for', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ items: ['foo'] }">
 11 |             <button x-on:click="items = ['foo', 'bar']"></button>
 12 | 
 13 |             <template x-for="item in items">
 14 |                 <span x-text="item"></span>
 15 |             </template>
 16 |         </div>
 17 |     `
 18 | 
 19 |     Alpine.start()
 20 | 
 21 |     expect(document.querySelectorAll('span').length).toEqual(1)
 22 |     expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
 23 | 
 24 |     document.querySelector('button').click()
 25 | 
 26 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(2) })
 27 | 
 28 |     expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
 29 |     expect(document.querySelectorAll('span')[1].innerText).toEqual('bar')
 30 | })
 31 | 
 32 | test('removes all elements when array is empty and previously had one item', async () => {
 33 |     document.body.innerHTML = `
 34 |         <div x-data="{ items: ['foo'] }">
 35 |             <button x-on:click="items = []"></button>
 36 | 
 37 |             <template x-for="item in items">
 38 |                 <span x-text="item"></span>
 39 |             </template>
 40 |         </div>
 41 |     `
 42 | 
 43 |     Alpine.start()
 44 | 
 45 |     expect(document.querySelectorAll('span').length).toEqual(1)
 46 | 
 47 |     document.querySelector('button').click()
 48 | 
 49 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(0) })
 50 | })
 51 | 
 52 | test('removes all elements when array is empty and previously had multiple items', async () => {
 53 |     document.body.innerHTML = `
 54 |         <div x-data="{ items: ['foo', 'bar', 'world'] }">
 55 |             <button x-on:click="items = []"></button>
 56 | 
 57 |             <template x-for="item in items">
 58 |                 <span x-text="item"></span>
 59 |             </template>
 60 |         </div>
 61 |     `
 62 | 
 63 |     Alpine.start()
 64 | 
 65 |     expect(document.querySelectorAll('span').length).toEqual(3)
 66 | 
 67 |     document.querySelector('button').click()
 68 | 
 69 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(0) })
 70 | })
 71 | 
 72 | test('elements inside of loop are reactive', async () => {
 73 |     document.body.innerHTML = `
 74 |         <div x-data="{ items: ['first'], foo: 'bar' }">
 75 |             <button x-on:click="foo = 'baz'"></button>
 76 | 
 77 |             <template x-for="item in items">
 78 |                 <span>
 79 |                     <h1 x-text="item"></h1>
 80 |                     <h2 x-text="foo"></h2>
 81 |                 </span>
 82 |             </template>
 83 |         </div>
 84 |     `
 85 | 
 86 |     Alpine.start()
 87 | 
 88 |     expect(document.querySelectorAll('span').length).toEqual(1)
 89 |     expect(document.querySelector('h1').innerText).toEqual('first')
 90 |     expect(document.querySelector('h2').innerText).toEqual('bar')
 91 | 
 92 |     document.querySelector('button').click()
 93 | 
 94 |     await wait(() => {
 95 |         expect(document.querySelector('h1').innerText).toEqual('first')
 96 |         expect(document.querySelector('h2').innerText).toEqual('baz')
 97 |     })
 98 | })
 99 | 
100 | test('components inside of loop are reactive', async () => {
101 |     document.body.innerHTML = `
102 |         <div x-data="{ items: ['first'] }">
103 |             <template x-for="item in items">
104 |                 <div x-data="{foo: 'bar'}" class="child">
105 |                     <span x-text="foo"></span>
106 |                     <button x-on:click="foo = 'bob'"></button>
107 |                 </div>
108 |             </template>
109 |         </div>
110 |     `
111 | 
112 |     Alpine.start()
113 | 
114 |     expect(document.querySelectorAll('div.child').length).toEqual(1)
115 |     expect(document.querySelector('span').innerText).toEqual('bar')
116 | 
117 |     document.querySelector('button').click()
118 | 
119 |     await wait(() => {
120 |         expect(document.querySelector('span').innerText).toEqual('bob')
121 |     })
122 | })
123 | 
124 | test('components inside a plain element of loop are reactive', async () => {
125 |     document.body.innerHTML = `
126 |         <div x-data="{ items: ['first'] }">
127 |             <template x-for="item in items">
128 |                 <ul>
129 |                     <div x-data="{foo: 'bar'}" class="child">
130 |                         <span x-text="foo"></span>
131 |                         <button x-on:click="foo = 'bob'"></button>
132 |                     </div>
133 |                 </ul>
134 |             </template>
135 |         </div>
136 |     `
137 | 
138 |     Alpine.start()
139 | 
140 |     expect(document.querySelectorAll('ul').length).toEqual(1)
141 |     expect(document.querySelector('span').innerText).toEqual('bar')
142 | 
143 |     document.querySelector('button').click()
144 | 
145 |     await wait(() => {
146 |         expect(document.querySelector('span').innerText).toEqual('bob')
147 |     })
148 | })
149 | 
150 | test('adding key attribute moves dom nodes properly', async () => {
151 |     document.body.innerHTML = `
152 |         <div x-data="{ items: ['foo', 'bar'] }">
153 |             <button x-on:click="items = ['bar', 'foo', 'baz']"></button>
154 | 
155 |             <template x-for="item in items" :key="item">
156 |                 <span x-text="item"></span>
157 |             </template>
158 |         </div>
159 |     `
160 | 
161 |     Alpine.start()
162 | 
163 |     expect(document.querySelectorAll('span').length).toEqual(2)
164 |     const itemA = document.querySelectorAll('span')[0]
165 |     itemA.setAttribute('order', 'first')
166 |     const itemB = document.querySelectorAll('span')[1]
167 |     itemB.setAttribute('order', 'second')
168 | 
169 |     document.querySelector('button').click()
170 | 
171 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(3) })
172 | 
173 |     expect(document.querySelectorAll('span')[0].getAttribute('order')).toEqual('second')
174 |     expect(document.querySelectorAll('span')[1].getAttribute('order')).toEqual('first')
175 |     expect(document.querySelectorAll('span')[2].getAttribute('order')).toEqual(null)
176 | })
177 | 
178 | test('can key by index', async () => {
179 |     document.body.innerHTML = `
180 |         <div x-data="{ items: ['foo', 'bar'] }">
181 |             <button x-on:click="items = ['bar', 'foo', 'baz']"></button>
182 | 
183 |             <template x-for="(item, index) in items" :key="index">
184 |                 <span x-text="item"></span>
185 |             </template>
186 |         </div>
187 |     `
188 | 
189 |     Alpine.start()
190 | 
191 |     expect(document.querySelectorAll('span').length).toEqual(2)
192 | 
193 |     document.querySelector('button').click()
194 | 
195 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(3) })
196 | })
197 | 
198 | test('can use index inside of loop', async () => {
199 |     document.body.innerHTML = `
200 |         <div x-data="{ items: ['foo'] }">
201 |             <template x-for="(item, index) in items">
202 |                 <div>
203 |                     <h1 x-text="items.indexOf(item)"></h1>
204 |                     <h2 x-text="index"></h2>
205 |                 </div>
206 |             </template>
207 |         </div>
208 |     `
209 | 
210 |     Alpine.start()
211 | 
212 |     expect(document.querySelector('h1').innerText).toEqual(0)
213 |     expect(document.querySelector('h2').innerText).toEqual(0)
214 | })
215 | 
216 | test('can use third iterator param (collection) inside of loop', async () => {
217 |     document.body.innerHTML = `
218 |         <div x-data="{ items: ['foo'] }">
219 |             <template x-for="(item, index, things) in items">
220 |                 <div>
221 |                     <h1 x-text="items"></h1>
222 |                     <h2 x-text="things"></h2>
223 |                 </div>
224 |             </template>
225 |         </div>
226 |     `
227 | 
228 |     Alpine.start()
229 | 
230 |     expect(document.querySelector('h1').innerText).toEqual(["foo"])
231 |     expect(document.querySelector('h2').innerText).toEqual(["foo"])
232 | })
233 | 
234 | test('can use x-if in conjunction with x-for', async () => {
235 |     document.body.innerHTML = `
236 |         <div x-data="{ items: ['foo', 'bar'], show: false }">
237 |             <button @click="show = ! show"></button>
238 | 
239 |             <template x-if="show" x-for="item in items">
240 |                 <span x-text="item"></span>
241 |             </template>
242 |         </div>
243 |     `
244 | 
245 |     Alpine.start()
246 | 
247 |     expect(document.querySelectorAll('span').length).toEqual(0)
248 | 
249 |     document.querySelector('button').click()
250 | 
251 |     await new Promise(resolve => setTimeout(resolve, 1))
252 | 
253 |     expect(document.querySelectorAll('span').length).toEqual(2)
254 | 
255 |     document.querySelector('button').click()
256 | 
257 |     await new Promise(resolve => setTimeout(resolve, 1))
258 | 
259 |     expect(document.querySelectorAll('span').length).toEqual(0)
260 | })
261 | 
262 | test('listeners in loop get fresh iteration data even though they are only registered initially', async () => {
263 |     document.body.innerHTML = `
264 |         <div x-data="{ items: ['foo'], output: '' }">
265 |             <button x-on:click="items = ['bar']"></button>
266 | 
267 |             <template x-for="(item, index) in items">
268 |                 <span x-text="item" x-on:click="output = item"></span>
269 |             </template>
270 | 
271 |             <h1 x-text="output"></h1>
272 |         </div>
273 |     `
274 | 
275 |     Alpine.start()
276 | 
277 |     expect(document.querySelectorAll('span').length).toEqual(1)
278 | 
279 |     document.querySelector('span').click()
280 | 
281 |     await wait(() => { expect(document.querySelector('h1').innerText).toEqual('foo') })
282 | 
283 |     document.querySelector('button').click()
284 | 
285 |     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
286 | 
287 |     document.querySelector('span').click()
288 | 
289 |     await wait(() => { expect(document.querySelector('h1').innerText).toEqual('bar') })
290 | })
291 | 
292 | test('nested x-for', async () => {
293 |     document.body.innerHTML = `
294 |         <div x-data="{ foos: [ {bars: ['bob', 'lob']} ] }">
295 |             <button x-on:click="foos = [ {bars: ['bob', 'lob']}, {bars: ['law']} ]"></button>
296 |             <template x-for="foo in foos">
297 |                 <h1>
298 |                     <template x-for="bar in foo.bars">
299 |                         <h2 x-text="bar"></h2>
300 |                     </template>
301 |                 </h1>
302 |             </template>
303 |         </div>
304 |     `
305 | 
306 |     Alpine.start()
307 | 
308 |     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(1) })
309 |     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(2) })
310 | 
311 |     expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
312 |     expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
313 | 
314 |     document.querySelector('button').click()
315 | 
316 |     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(3) })
317 | 
318 |     expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
319 |     expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
320 |     expect(document.querySelectorAll('h2')[2].innerText).toEqual('law')
321 | })
322 | 
323 | test('x-for updates the right elements when new item are inserted at the beginning of the list', async () => {
324 |     document.body.innerHTML = `
325 |         <div x-data="{ items: [{name: 'one', key: '1'}, {name: 'two', key: '2'}] }">
326 |             <button x-on:click="items = [{name: 'zero', key: '0'}, {name: 'one', key: '1'}, {name: 'two', key: '2'}]"></button>
327 | 
328 |             <template x-for="item in items" :key="item.key">
329 |                 <span x-text="item.name"></span>
330 |             </template>
331 |         </div>
332 |     `
333 | 
334 |     Alpine.start()
335 | 
336 |     expect(document.querySelectorAll('span').length).toEqual(2)
337 |     const itemA = document.querySelectorAll('span')[0]
338 |     itemA.setAttribute('order', 'first')
339 |     const itemB = document.querySelectorAll('span')[1]
340 |     itemB.setAttribute('order', 'second')
341 | 
342 |     document.querySelector('button').click()
343 | 
344 |     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(3) })
345 | 
346 |     expect(document.querySelectorAll('span')[0].innerText).toEqual('zero')
347 |     expect(document.querySelectorAll('span')[1].innerText).toEqual('one')
348 |     expect(document.querySelectorAll('span')[2].innerText).toEqual('two')
349 | 
350 |     // Make sure states are preserved
351 |     expect(document.querySelectorAll('span')[0].getAttribute('order')).toEqual(null)
352 |     expect(document.querySelectorAll('span')[1].getAttribute('order')).toEqual('first')
353 |     expect(document.querySelectorAll('span')[2].getAttribute('order')).toEqual('second')
354 | })
355 | 
356 | test('nested x-for access outer loop variable', async () => {
357 |     document.body.innerHTML = `
358 |         <div x-data="{ foos: [ {name: 'foo', bars: ['bob', 'lob']}, {name: 'baz', bars: ['bab', 'lab']} ] }">
359 |             <template x-for="foo in foos">
360 |                 <h1>
361 |                     <template x-for="bar in foo.bars">
362 |                         <h2 x-text="foo.name+': '+bar"></h2>
363 |                     </template>
364 |                 </h1>
365 |             </template>
366 |         </div>
367 |     `
368 | 
369 |     Alpine.start()
370 | 
371 |     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) })
372 |     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) })
373 | 
374 |     expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob')
375 |     expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob')
376 |     expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab')
377 |     expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab')
378 | })
379 | 
380 | test('nested x-for event listeners', async () => {
381 |     document._alerts = []
382 | 
383 |     document.body.innerHTML = `
384 |         <div x-data="{ foos: [
385 |             {name: 'foo', bars: [{name: 'bob', count: 0}, {name: 'lob', count: 0}]},
386 |             {name: 'baz', bars: [{name: 'bab', count: 0}, {name: 'lab', count: 0}]}
387 |         ], fnText: function(foo, bar) { return foo.name+': '+bar.name+' = '+bar.count; } }">
388 |             <template x-for="foo in foos">
389 |                 <h1>
390 |                     <template x-for="bar in foo.bars">
391 |                         <h2 x-text="fnText(foo, bar)"
392 |                             x-on:click="bar.count += 1; document._alerts.push(fnText(foo, bar))"
393 |                         ></h2>
394 |                     </template>
395 |                 </h1>
396 |             </template>
397 |         </div>
398 |     `
399 | 
400 |     Alpine.start()
401 | 
402 |     await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) })
403 |     await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(4) })
404 | 
405 |     expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 0')
406 |     expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
407 |     expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
408 |     expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
409 | 
410 |     expect(document._alerts.length).toEqual(0)
411 | 
412 |     document.querySelectorAll('h2')[0].click()
413 | 
414 |     await wait(() => {
415 |         expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
416 |         expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
417 |         expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
418 |         expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
419 | 
420 |         expect(document._alerts.length).toEqual(1)
421 |         expect(document._alerts[0]).toEqual('foo: bob = 1')
422 |     })
423 | 
424 |     document.querySelectorAll('h2')[2].click()
425 | 
426 |     await wait(() => {
427 |         expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
428 |         expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
429 |         expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
430 |         expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
431 | 
432 |         expect(document._alerts.length).toEqual(2)
433 |         expect(document._alerts[0]).toEqual('foo: bob = 1')
434 |         expect(document._alerts[1]).toEqual('baz: bab = 1')
435 |     })
436 | 
437 |     document.querySelectorAll('h2')[0].click()
438 | 
439 |     await wait(() => {
440 |         expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 2')
441 |         expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
442 |         expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
443 |         expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
444 | 
445 |         expect(document._alerts.length).toEqual(3)
446 |         expect(document._alerts[0]).toEqual('foo: bob = 1')
447 |         expect(document._alerts[1]).toEqual('baz: bab = 1')
448 |         expect(document._alerts[2]).toEqual('foo: bob = 2')
449 |     })
450 | })
451 | 


--------------------------------------------------------------------------------
/test/bind.spec.js:
--------------------------------------------------------------------------------
  1 | import Alpine from 'alpinejs'
  2 | import { fireEvent, wait } from '@testing-library/dom'
  3 | 
  4 | global.MutationObserver = class {
  5 |     observe() {}
  6 | }
  7 | 
  8 | test('attribute bindings are set on initialize', async () => {
  9 |     document.body.innerHTML = `
 10 |         <div x-data="{ foo: 'bar' }">
 11 |             <span x-bind:foo="foo"></span>
 12 |         </div>
 13 |     `
 14 | 
 15 |     Alpine.start()
 16 | 
 17 |     expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
 18 | })
 19 | 
 20 | test('class attribute bindings are merged by string syntax', async () => {
 21 |     document.body.innerHTML = `
 22 |         <div x-data="{ isOn: false }">
 23 |             <span class="foo" x-bind:class="isOn ? 'bar': ''"></span>
 24 | 
 25 |             <button @click="isOn = ! isOn"></button>
 26 |         </div>
 27 |     `
 28 |     Alpine.start()
 29 | 
 30 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 31 |     expect(document.querySelector('span').classList.contains('bar')).toBeFalsy()
 32 | 
 33 |     document.querySelector('button').click()
 34 | 
 35 |     await wait(() => {
 36 |         expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 37 |         expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 38 |     })
 39 | 
 40 |     document.querySelector('button').click()
 41 | 
 42 |     await wait(() => {
 43 |         expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 44 |         expect(document.querySelector('span').classList.contains('bar')).toBeFalsy()
 45 |     })
 46 | })
 47 | 
 48 | test('class attribute bindings are merged by array syntax', async () => {
 49 |     document.body.innerHTML = `
 50 |         <div x-data="{ isOn: false }">
 51 |             <span class="foo" x-bind:class="isOn ? ['bar', 'baz']: ['bar']"></span>
 52 | 
 53 |             <button @click="isOn = ! isOn"></button>
 54 |         </div>
 55 |     `
 56 |     Alpine.start()
 57 | 
 58 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 59 |     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 60 |     expect(document.querySelector('span').classList.contains('baz')).toBeFalsy()
 61 | 
 62 |     document.querySelector('button').click()
 63 | 
 64 |     await wait(() => {
 65 |         expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 66 |         expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 67 |         expect(document.querySelector('span').classList.contains('baz')).toBeTruthy()
 68 |     })
 69 | 
 70 |     document.querySelector('button').click()
 71 | 
 72 |     await wait(() => {
 73 |         expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
 74 |         expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 75 |         expect(document.querySelector('span').classList.contains('baz')).toBeFalsy()
 76 |     })
 77 | })
 78 | 
 79 | test('class attribute bindings are removed by object syntax', async () => {
 80 |     document.body.innerHTML = `
 81 |         <div x-data="{ isOn: false }">
 82 |             <span class="foo" x-bind:class="{ 'foo': isOn }"></span>
 83 |         </div>
 84 |     `
 85 | 
 86 |     Alpine.start()
 87 | 
 88 |     expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
 89 | })
 90 | 
 91 | test('class attribute bindings are added by string syntax', async () => {
 92 |     document.body.innerHTML = `
 93 |         <div x-data="{ initialClass: 'foo' }">
 94 |             <span x-bind:class="initialClass"></span>
 95 |         </div>
 96 |     `
 97 | 
 98 |     Alpine.start()
 99 | 
100 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
101 | })
102 | 
103 | test('class attribute bindings are added by object syntax', async () => {
104 |     document.body.innerHTML = `
105 |         <div x-data="{ isOn: true }">
106 |             <span x-bind:class="{ 'foo': isOn }"></span>
107 |         </div>
108 |     `
109 | 
110 |     Alpine.start()
111 | 
112 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
113 | })
114 | 
115 | test('multiple classes are added by object syntax', async () => {
116 |     document.body.innerHTML = `
117 |         <div x-data="{ isOn: false }">
118 |             <span class="foo bar" x-bind:class="{ 'foo bar': isOn }"></span>
119 |         </div>
120 |     `
121 | 
122 |     Alpine.start()
123 | 
124 |     expect(document.querySelector('span').classList.contains('foo')).toBeFalsy()
125 |     expect(document.querySelector('span').classList.contains('bar')).toBeFalsy()
126 | })
127 | 
128 | test('multiple classes are removed by object syntax', async () => {
129 |     document.body.innerHTML = `
130 |         <div x-data="{ isOn: true }">
131 |             <span x-bind:class="{ 'foo bar': isOn }"></span>
132 |         </div>
133 |     `
134 | 
135 |     Alpine.start()
136 | 
137 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
138 |     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
139 | })
140 | 
141 | test('class attribute bindings are added by nested object syntax', async () => {
142 |     document.body.innerHTML = `
143 |         <div x-data="{ nested: { isOn: true } }">
144 |             <span x-bind:class="{ 'foo': nested.isOn }"></span>
145 |         </div>
146 |     `
147 | 
148 |     Alpine.start()
149 | 
150 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
151 | })
152 | 
153 | test('class attribute bindings are added by array syntax', async () => {
154 |     document.body.innerHTML = `
155 |         <div x-data="{}">
156 |             <span class="" x-bind:class="['foo']"></span>
157 |         </div>
158 |     `
159 | 
160 |     Alpine.start()
161 | 
162 |     expect(document.querySelector('span').classList.contains('foo')).toBeTruthy()
163 | })
164 | 
165 | test('class attribute bindings are synced by string syntax', async () => {
166 |     document.body.innerHTML = `
167 |         <div x-data="{foo: 'bar baz'}">
168 |             <span class="" x-bind:class="foo"></span>
169 |         </div>
170 |     `
171 | 
172 |     Alpine.start()
173 | 
174 |     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
175 |     expect(document.querySelector('span').classList.contains('baz')).toBeTruthy()
176 | })
177 | 
178 | test('boolean attributes set to false are removed from element', async () => {
179 |     document.body.innerHTML = `
180 |         <div x-data="{ isSet: false }">
181 |             <input x-bind:disabled="isSet"></input>
182 |             <input x-bind:checked="isSet"></input>
183 |             <input x-bind:required="isSet"></input>
184 |             <input x-bind:readonly="isSet"></input>
185 |             <input x-bind:hidden="isSet"></input>
186 |             <details x-bind:open="isSet"></details>
187 |             <select x-bind:multiple="isSet"></select>
188 |             <option x-bind:selected="isSet"></option>
189 |             <textarea x-bind:autofocus="isSet"></textarea>
190 |             <dl x-bind:itemscope="isSet"></dl>
191 |             <form x-bind:novalidate="isSet"></form>
192 |             <iframe
193 |                 x-bind:allowfullscreen="isSet"
194 |                 x-bind:allowpaymentrequest="isSet"
195 |             ></iframe>
196 |             <button x-bind:formnovalidate="isSet"></button>
197 |             <audio
198 |                 x-bind:autoplay="isSet"
199 |                 x-bind:controls="isSet"
200 |                 x-bind:loop="isSet"
201 |                 x-bind:muted="isSet"
202 |             ></audio>
203 |             <video x-bind:playsinline="isSet"></video>
204 |             <track x-bind:default="isSet" />
205 |             <img x-bind:ismap="isSet" />
206 |             <ol x-bind:reversed="isSet"></ol>
207 |             <script
208 |                 x-bind:async="isSet"
209 |                 x-bind:defer="isSet"
210 |                 x-bind:nomodule="isSet"
211 |             ></script>
212 |         </div>
213 |     `
214 |     Alpine.start()
215 | 
216 |     expect(document.querySelectorAll('input')[0].disabled).toBeFalsy()
217 |     expect(document.querySelectorAll('input')[1].checked).toBeFalsy()
218 |     expect(document.querySelectorAll('input')[2].required).toBeFalsy()
219 |     expect(document.querySelectorAll('input')[3].readOnly).toBeFalsy()
220 |     expect(document.querySelectorAll('input')[4].hidden).toBeFalsy()
221 |     expect(document.querySelectorAll('details')[0].open).toBeFalsy()
222 |     expect(document.querySelectorAll('option')[0].selected).toBeFalsy()
223 |     expect(document.querySelectorAll('select')[0].multiple).toBeFalsy()
224 |     expect(document.querySelectorAll('textarea')[0].autofocus).toBeFalsy()
225 |     expect(document.querySelectorAll('dl')[0].attributes.itemscope).toBeFalsy()
226 |     expect(document.querySelectorAll('form')[0].attributes.novalidate).toBeFalsy()
227 |     expect(document.querySelectorAll('iframe')[0].attributes.allowfullscreen).toBeFalsy()
228 |     expect(document.querySelectorAll('iframe')[0].attributes.allowpaymentrequest).toBeFalsy()
229 |     expect(document.querySelectorAll('button')[0].attributes.formnovalidate).toBeFalsy()
230 |     expect(document.querySelectorAll('audio')[0].attributes.autoplay).toBeFalsy()
231 |     expect(document.querySelectorAll('audio')[0].attributes.controls).toBeFalsy()
232 |     expect(document.querySelectorAll('audio')[0].attributes.loop).toBeFalsy()
233 |     expect(document.querySelectorAll('audio')[0].attributes.muted).toBeFalsy()
234 |     expect(document.querySelectorAll('video')[0].attributes.playsinline).toBeFalsy()
235 |     expect(document.querySelectorAll('track')[0].attributes.default).toBeFalsy()
236 |     expect(document.querySelectorAll('img')[0].attributes.ismap).toBeFalsy()
237 |     expect(document.querySelectorAll('ol')[0].attributes.reversed).toBeFalsy()
238 |     expect(document.querySelectorAll('script')[0].attributes.async).toBeFalsy()
239 |     expect(document.querySelectorAll('script')[0].attributes.defer).toBeFalsy()
240 |     expect(document.querySelectorAll('script')[0].attributes.nomodule).toBeFalsy()
241 | })
242 | 
243 | test('boolean attributes set to true are added to element', async () => {
244 |     document.body.innerHTML = `
245 |         <div x-data="{ isSet: true }">
246 |             <input x-bind:disabled="isSet"></input>
247 |             <input x-bind:checked="isSet"></input>
248 |             <input x-bind:required="isSet"></input>
249 |             <input x-bind:readonly="isSet"></input>
250 |             <details x-bind:open="isSet"></details>
251 |             <select x-bind:multiple="isSet"></select>
252 |             <option x-bind:selected="isSet"></option>
253 |             <textarea x-bind:autofocus="isSet"></textarea>
254 |             <dl x-bind:itemscope="isSet"></dl>
255 |             <form x-bind:novalidate="isSet"></form>
256 |             <iframe
257 |                 x-bind:allowfullscreen="isSet"
258 |                 x-bind:allowpaymentrequest="isSet"
259 |             ></iframe>
260 |             <button x-bind:formnovalidate="isSet"></button>
261 |             <audio
262 |                 x-bind:autoplay="isSet"
263 |                 x-bind:controls="isSet"
264 |                 x-bind:loop="isSet"
265 |                 x-bind:muted="isSet"
266 |             ></audio>
267 |             <video x-bind:playsinline="isSet"></video>
268 |             <track x-bind:default="isSet" />
269 |             <img x-bind:ismap="isSet" />
270 |             <ol x-bind:reversed="isSet"></ol>
271 |             <script
272 |                 x-bind:async="isSet"
273 |                 x-bind:defer="isSet"
274 |                 x-bind:nomodule="isSet"
275 |             ></script>
276 |         </div>
277 |     `
278 | 
279 |     Alpine.start()
280 | 
281 |     expect(document.querySelectorAll('input')[0].disabled).toBeTruthy()
282 |     expect(document.querySelectorAll('input')[1].checked).toBeTruthy()
283 |     expect(document.querySelectorAll('input')[2].required).toBeTruthy()
284 |     expect(document.querySelectorAll('input')[3].readOnly).toBeTruthy()
285 |     expect(document.querySelectorAll('details')[0].open).toBeTruthy()
286 |     expect(document.querySelectorAll('option')[0].selected).toBeTruthy()
287 |     expect(document.querySelectorAll('select')[0].multiple).toBeTruthy()
288 |     expect(document.querySelectorAll('textarea')[0].autofocus).toBeTruthy()
289 |     expect(document.querySelectorAll('dl')[0].attributes.itemscope).toBeTruthy()
290 |     expect(document.querySelectorAll('form')[0].attributes.novalidate).toBeTruthy()
291 |     expect(document.querySelectorAll('iframe')[0].attributes.allowfullscreen).toBeTruthy()
292 |     expect(document.querySelectorAll('iframe')[0].attributes.allowpaymentrequest).toBeTruthy()
293 |     expect(document.querySelectorAll('button')[0].attributes.formnovalidate).toBeTruthy()
294 |     expect(document.querySelectorAll('audio')[0].attributes.autoplay).toBeTruthy()
295 |     expect(document.querySelectorAll('audio')[0].attributes.controls).toBeTruthy()
296 |     expect(document.querySelectorAll('audio')[0].attributes.loop).toBeTruthy()
297 |     expect(document.querySelectorAll('audio')[0].attributes.muted).toBeTruthy()
298 |     expect(document.querySelectorAll('video')[0].attributes.playsinline).toBeTruthy()
299 |     expect(document.querySelectorAll('track')[0].attributes.default).toBeTruthy()
300 |     expect(document.querySelectorAll('img')[0].attributes.ismap).toBeTruthy()
301 |     expect(document.querySelectorAll('ol')[0].attributes.reversed).toBeTruthy()
302 |     expect(document.querySelectorAll('script')[0].attributes.async).toBeTruthy()
303 |     expect(document.querySelectorAll('script')[0].attributes.defer).toBeTruthy()
304 |     expect(document.querySelectorAll('script')[0].attributes.nomodule).toBeTruthy()
305 | })
306 | 
307 | test('binding supports short syntax', async () => {
308 |     document.body.innerHTML = `
309 |         <div x-data="{ foo: 'bar' }">
310 |             <span :class="foo"></span>
311 |         </div>
312 |     `
313 | 
314 |     Alpine.start()
315 | 
316 |     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
317 | })
318 | 
319 | test('checkbox values are set correctly', async () => {
320 |     document.body.innerHTML = `
321 |         <div x-data="{ stringValue: 'foo', trueValue: true, falseValue: false }">
322 |             <input type="checkbox" name="stringCheckbox" :value="stringValue" />
323 |             <input type="checkbox" name="trueCheckbox" :value="trueValue" />
324 |             <input type="checkbox" name="falseCheckbox" :value="falseValue" />
325 |         </div>
326 |     `
327 | 
328 |     Alpine.start()
329 | 
330 |     expect(document.querySelector('input[name="trueCheckbox"]').value).toEqual('on')
331 |     expect(document.querySelector('input[name="falseCheckbox"]').value).toEqual('on')
332 |     expect(document.querySelector('input[name="stringCheckbox"]').value).toEqual('foo')
333 | });
334 | 
335 | test('radio values are set correctly', async () => {
336 |     document.body.innerHTML = `
337 |         <div x-data="{lists: [{id: 1}, {id: 8}], selectedListID: '8'}">
338 |             <template x-for="list in lists" :key="list.id">
339 |                 <input x-model="selectedListID" type="radio" :value="list.id.toString()" :id="'list-' + list.id">
340 |             </template>
341 |             <input type="radio" id="list-test" value="test" x-model="selectedListID">
342 |         </div>
343 |     `
344 | 
345 |     Alpine.start()
346 | 
347 |     expect(document.querySelector('#list-1').value).toEqual('1')
348 |     expect(document.querySelector('#list-1').checked).toBeFalsy()
349 |     expect(document.querySelector('#list-8').value).toEqual('8')
350 |     expect(document.querySelector('#list-8').checked).toBeTruthy()
351 |     expect(document.querySelector('#list-test').value).toEqual('test')
352 |     expect(document.querySelector('#list-test').checked).toBeFalsy()
353 | });
354 | 
355 | test('classes are removed before being added', async () => {
356 |     document.body.innerHTML = `
357 |         <div x-data="{ isOpen: true }">
358 |             <span :class="{ 'text-red block': isOpen, 'text-red hidden': !isOpen }">
359 |                 Span
360 |             </span>
361 |             <button @click="isOpen = !isOpen"></button>
362 |         </div>
363 |     `
364 | 
365 |     Alpine.start()
366 | 
367 |     expect(document.querySelector('span').classList.contains('block')).toBeTruthy()
368 |     expect(document.querySelector('span').classList.contains('text-red')).toBeTruthy()
369 | 
370 |     document.querySelector('button').click()
371 | 
372 |     await wait(() => {
373 |         expect(document.querySelector('span').classList.contains('block')).toBeFalsy()
374 |         expect(document.querySelector('span').classList.contains('hidden')).toBeTruthy()
375 |         expect(document.querySelector('span').classList.contains('text-red')).toBeTruthy()
376 |     })
377 | });
378 | 
379 | test('cursor position is preserved on selectable text input', async () => {
380 |     document.body.innerHTML = `
381 |         <div x-data="{ foo: 'bar' }">
382 |             <input type="text" x-model="foo" @select="foo = 'baz'">
383 |         </div>
384 |     `
385 | 
386 |     Alpine.start()
387 | 
388 |     document.querySelector('input').focus()
389 | 
390 |     expect(document.querySelector('input').value).toEqual('bar')
391 |     expect(document.querySelector('input').selectionStart).toEqual(0)
392 |     expect(document.querySelector('input').selectionEnd).toEqual(0)
393 |     expect(document.querySelector('input').selectionDirection).toEqual('none')
394 | 
395 |     document.querySelector('input').setSelectionRange(0, 3, 'backward')
396 | 
397 |     await wait(() => {
398 |         expect(document.querySelector('input').value).toEqual('baz')
399 |         expect(document.querySelector('input').selectionStart).toEqual(0)
400 |         expect(document.querySelector('input').selectionEnd).toEqual(3)
401 |         expect(document.querySelector('input').selectionDirection).toEqual('backward')
402 |     })
403 | })
404 | 
405 | // input elements that are not 'text', 'search', 'url', 'password' types
406 | // will throw an exception when calling their setSelectionRange() method
407 | // see issues #401 #404 #405
408 | test('setSelectionRange is not called for inapplicable input types', async () => {
409 |     document.body.innerHTML = `
410 |         <div x-data="{ foo: 'bar' }">
411 |             <input type="hidden" x-model="foo">
412 |         </div>
413 |     `
414 | 
415 |     Alpine.start()
416 | 
417 |     fireEvent.input(document.querySelector('input'), { target: { value: 'baz' } })
418 | 
419 |     await wait(() => {
420 |         expect(document.querySelector('input').value).toEqual('baz')
421 |     })
422 | })
423 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <style>
  4 |             .hidden { display: none; }
  5 |             [x-cloak] { display: none; }
  6 |             .opacity-0 { opacity: 0; }
  7 |             .opacity-100 { opacity: 1; }
  8 |             .transition-slow { transition-duration: 300ms; }
  9 |             .transition-medium { transition-duration: 200ms; }
 10 |             .transition-faster { transition-duration: 100ms; }
 11 |             .scale-90 { transform: scale(0.9); }
 12 |             .scale-100 { transform: scale(1); }
 13 |             .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
 14 |             .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 15 |         </style>
 16 | 
 17 |         <script src="/dist/alpine.js" defer></script>
 18 |     </head>
 19 |     <body>
 20 |         <table>
 21 |             <thead>
 22 |                 <tr>
 23 |                     <th>Feature</th>
 24 |                     <th>Demo</th>
 25 |                 </tr>
 26 |             </thead>
 27 |             <tbody>
 28 |                 <tr>
 29 |                     <td>Simple x-if</td>
 30 |                     <td>
 31 |                         <div x-data="{ show: false }">
 32 |                             <template x-if="show">
 33 |                                 <span>hey</span>
 34 |                             </template>
 35 | 
 36 |                             <button @click="show = ! show">Show</button>
 37 |                         </div>
 38 |                     </td>
 39 |                 </tr>
 40 | 
 41 |                 <tr>
 42 |                     <td>Dropdown</td>
 43 |                     <td>
 44 |                         <div x-data="{ open: false }">
 45 |                             <button x-on:click="open= true">Open Dropdown</button>
 46 |                             <ul
 47 |                                 x-bind:class="{ 'hidden': ! open }"
 48 |                                 x-on:click.away="open= false"
 49 |                                 x-cloak>
 50 |                                 Dropdown Body
 51 |                             </ul>
 52 |                         </div>
 53 |                     </td>
 54 |                 </tr>
 55 | 
 56 |                 <tr>
 57 |                     <td>Tabs</td>
 58 |                     <td>
 59 |                         <div x-data="{ currentTab: 'tab1' }">
 60 |                             <button x-bind:class="{ 'active': currentTab ===
 61 |                                 'tab1' }" x-on:click="currentTab= 'tab1'">Foo</button>
 62 |                             <button x-bind:class="{ 'active': currentTab ===
 63 |                                 'tab2' }" x-on:click="currentTab= 'tab2'">Bar</button>
 64 |                             <div x-bind:class="{ 'hidden': currentTab !== 'tab1'
 65 |                                 }">Tab Foo</div>
 66 |                             <div class="hidden" x-bind:class="{ 'hidden':
 67 |                                 currentTab !== 'tab2' }">Tab Bar</div>
 68 |                         </div>
 69 |                     </td>
 70 |                 </tr>
 71 | 
 72 |                 <tr>
 73 |                     <td>Data Binding</td>
 74 |                     <td>
 75 |                         <div x-data="{ text: 'foo', checkbox: ['foo'], radio:
 76 |                             'foo', select: 'foo', 'multiselect': ['foo'] }">
 77 |                             Text:
 78 |                             <span x-text="JSON.stringify(text)"></span>
 79 |                             <input type="text" x-model="text">
 80 |                             Checkbox:
 81 |                             <span x-text="JSON.stringify(checkbox)"></span>
 82 |                             <input type="checkbox" x-model="checkbox"
 83 |                                 value="foo">
 84 |                             <input type="checkbox" x-model="checkbox"
 85 |                                 value="bar">
 86 |                             Radio:
 87 |                             <span x-text="JSON.stringify(radio)"></span>
 88 |                             <input type="radio" x-model="radio" value="foo">
 89 |                             <input type="radio" x-model="radio" value="bar">
 90 |                             Select:
 91 |                             <span x-text="JSON.stringify(select)"></span>
 92 |                             <select x-model="select">
 93 |                                 <option>foo</option>
 94 |                                 <option>bar</option>
 95 |                             </select>
 96 |                             Multiple Select:
 97 |                             <span x-text="JSON.stringify(multiselect)"></span>
 98 |                             <select x-model="multiselect" multiple>
 99 |                                 <option>foo</option>
100 |                                 <option>bar</option>
101 |                             </select>
102 |                         </div>
103 |                     </td>
104 |                 </tr>
105 | 
106 |                 <tr>
107 |                     <td>Cast to number</td>
108 |                     <td>
109 |                         <div x-data="{ number: 1 }">
110 |                             <div x-text="JSON.stringify($data.number)"></div>
111 |                             <input type="text" x-model.number="number">
112 |                         </div>
113 |                     </td>
114 |                 </tr>
115 | 
116 |                 <tr>
117 |                     <td>Nested Binding</td>
118 |                     <td>
119 |                         <div x-data="{ foo: { bar: 'baz' } }">
120 |                             <div x-text="foo.bar"></div>
121 |                             <input type="text" x-model="foo.bar">
122 |                         </div>
123 |                     </td>
124 |                 </tr>
125 | 
126 |                 <tr>
127 |                     <td>On Click</td>
128 |                     <td>
129 |                         <div x-data="{ show: false }">
130 |                             <div x-show="show">Hi There!</div>
131 | 
132 |                             <button x-on:click="show= ! show">Show/Hide</button>
133 |                         </div>
134 |                     </td>
135 |                 </tr>
136 | 
137 |                 <tr>
138 |                     <td>Refs</td>
139 |                     <td>
140 |                         <div x-data="{ someText: 'bar' }">
141 |                             <div x-ref="remove-target">Remove Me</div>
142 | 
143 |                             <button
144 |                                 x-on:click="$refs['remove-target'].remove()">Remove</button>
145 |                         </div>
146 |                     </td>
147 |                 </tr>
148 | 
149 |                 <tr>
150 |                     <td>x-on:click.stop</td>
151 |                     <td>
152 |                         <div x-data="{ someText: 'bar' }">
153 |                             <span x-text="someText"></span>
154 | 
155 |                             <div x-on:click="someText= 'baz'">
156 |                                 <button x-on:click.stop>Shouldn't change to baz</button>
157 |                             </div>
158 | 
159 |                         </div>
160 |                     </td>
161 |                 </tr>
162 | 
163 |                 <tr>
164 |                     <td>x-on:click.prevent</td>
165 |                     <td>
166 |                         <div x-data="{}">
167 |                             <a href="https://google.com" x-on:click.prevent>Shouldn't
168 |                                 go to Google</a>
169 |                         </div>
170 |                     </td>
171 |                 </tr>
172 | 
173 |                 <tr>
174 |                     <td>x-on:click.once</td>
175 |                     <td>
176 |                         <div x-data="{ count: 0 }">
177 |                             <button x-on:click.once="count++">I've been clicked:
178 |                                 <span x-text="count"></span></button>
179 |                         </div>
180 |                     </td>
181 |                 </tr>
182 | 
183 |                 <tr>
184 |                     <td>Append DOM</td>
185 |                     <td>
186 |                         <div id="goHere">Click me.</div>
187 |                         <script>
188 |                             const thing = document.querySelector('#goHere')
189 |                             const handler = (e) => {
190 |                                 thing.removeEventListener('click', handler)
191 | 
192 |                                 const div = document.createElement('div')
193 |                                 div.setAttribute('x-data', '{hey: "there"}')
194 |                                 div.innerHTML = '<input type="text" x-model="hey"><h1 x-text="hey"></h1>'
195 |                                 e.target.appendChild(div)
196 |                             }
197 | 
198 |                             var listener = thing.addEventListener('click', handler)
199 |                         </script>
200 |                     </td>
201 |                 </tr>
202 | 
203 |                 <tr>
204 |                     <td>Append Nested DOM</td>
205 |                     <td>
206 |                         <div id="goHere2">Click me.</div>
207 |                         <script>
208 |                             const thing2 = document.querySelector('#goHere2')
209 |                             const handler2 = (e) => {
210 |                                 thing2.removeEventListener('click', handler2)
211 | 
212 |                                 e.target.innerHTML = `
213 |                                     <article>
214 |                                         <div x-data="{hey: 'there'}">
215 |                                             <input type="text" x-model="hey"><h1 x-text="hey"></h1>
216 |                                         </div>
217 |                                     </article>
218 |                                 `
219 |                             }
220 | 
221 |                             var listener = thing2.addEventListener('click', handler2)
222 |                         </script>
223 |                     </td>
224 |                 </tr>
225 | 
226 |                 <tr>
227 |                     <td>x-for</td>
228 |                     <td>
229 |                         <div x-data="{ items: ['foo', 'bar'], foo: 'bar' }">
230 |                             <input type="checkbox" x-model="items" value="foo">
231 |                             <input type="checkbox" x-model="items" value="bar">
232 |                             <input type="checkbox" x-model="items" value="baz">
233 | 
234 |                             <button @click="items = ['bar', 'bob']">hey</button>
235 | 
236 |                             <template x-for="item in items" :key="item">
237 |                                 <div x-text="item" x-transition:enter-start="opacity-0 scale-90"
238 |                                     x-transition:enter="ease-out transition-medium"
239 |                                     x-transition:enter-end="opacity-100 scale-100"
240 |                                     x-transition:leave-start="opacity-100 scale-100"
241 |                                     x-transition:leave="ease-in transition-faster"
242 |                                     x-transition:leave-end="opacity-0 scale-90"
243 |                                 ></div>
244 |                             </template>
245 |                         </div>
246 |                     </td>
247 |                 </tr>
248 | 
249 |                 <tr>
250 |                     <td>Nested x-for</td>
251 |                     <td>
252 |                         <div x-data="{ foos: [{bars: [{bobs: ['one', 'two']}, {bobs: ['three', 'four']}]}, {bars: [{bobs: ['five', 'six']}, {bobs: ['seven', 'eight']}]}] }">
253 |                             <template x-for="foo in foos">
254 |                                 <div>
255 |                                     <template x-for="bar in foo.bars">
256 |                                         <div>
257 |                                             <template x-for="bob in bar.bobs">
258 |                                                 <span x-text="bob"></span>
259 |                                             </template>
260 |                                         </div>
261 |                                     </template>
262 |                                 </div>
263 |                             </template>
264 |                         </div>
265 |                     </td>
266 |                 </tr>
267 | 
268 |                 <tr>
269 |                     <td>Transitions</td>
270 |                     <td>
271 |                         <div x-data="{ open: false }">
272 |                             <button x-on:click="open= ! open">
273 |                                 Open Modal
274 |                             </button>
275 | 
276 |                             <div x-show="open"
277 |                                 x-transition:enter="transition-medium"
278 |                                 x-transition:leave="transition-medium">
279 |                                 <div x-show="open"
280 |                                     x-transition:enter="transition-medium"
281 |                                     x-transition:enter-start="opacity-0"
282 |                                     x-transition:leave-end="opacity-0"
283 |                                     x-transition:leave="transition-medium"></div>
284 |                                 <div x-show="open"
285 |                                     x-transition:enter-start="opacity-0 scale-90"
286 |                                     x-transition:enter="ease-out transition-medium"
287 |                                     x-transition:enter-end="opacity-100 scale-100"
288 |                                     x-transition:leave-start="opacity-100 scale-100"
289 |                                     x-transition:leave="ease-in transition-faster"
290 |                                     x-transition:leave-end="opacity-0 scale-90">
291 |                                     <div>
292 |                                         hey
293 |                                     </div>
294 |                                     <div>
295 |                                         <button x-on:click="open= false" type="button">
296 |                                             Cancel
297 |                                         </button>
298 |                                     </div>
299 |                                 </div>
300 |                             </div>
301 |                         </div>
302 |                     </td>
303 |                 </tr>
304 | 
305 |                 <tr>
306 |                     <td>Transitions (with x-if)</td>
307 |                     <td>
308 |                         <div x-data="{ open: false }">
309 |                             <button x-on:click="open= ! open">
310 |                                 Open Modal
311 |                             </button>
312 | 
313 |                             <template x-if="open">
314 |                                     <div x-transition:enter-start="opacity-0 scale-90"
315 |                                     x-transition:enter="ease-out transition-medium"
316 |                                     x-transition:enter-end="opacity-100 scale-100"
317 |                                     x-transition:leave-start="opacity-100 scale-100"
318 |                                     x-transition:leave="ease-in transition-faster"
319 |                                     x-transition:leave-end="opacity-0 scale-90">
320 |                                         hey
321 |                                     </div>
322 |                             </template>
323 |                         </div>
324 |                     </td>
325 |                 </tr>
326 | 
327 |                 <tr>
328 |                     <td>Nested Transitions (with x-show)</td>
329 |                     <td>
330 |                         <div x-data="{ open: false }">
331 |                             <button x-on:click="open= ! open">
332 |                                 Open Modal
333 |                             </button>
334 | 
335 |                             <div x-show="open">
336 |                                 I shouldn't leave until the transition finishes.
337 |                                 <div x-show="open"
338 |                                     x-transition:leave-start="opacity-100 scale-100"
339 |                                     x-transition:leave="ease-in transition-slow"
340 |                                     x-transition:leave-end="opacity-0 scale-90">
341 |                                         I'm transitioning
342 |                                 </div>
343 |                             </div>
344 |                         </div>
345 |                     </td>
346 |                 </tr>
347 | 
348 |                 <tr>
349 |                     <td>Init function callback access refs and mutate data</td>
350 |                     <td>
351 |                         <div x-data="initialData()" x-init="init()">
352 |                             <div :style="'width: '+width+'px; background: purple;'">hey</div>
353 | 
354 |                             <button x-ref="inc">increase</button>
355 |                         </div>
356 | 
357 |                         <script>
358 |                             function initialData() {
359 |                                 return {
360 |                                     width: 20,
361 |                                     init() {
362 |                                         this.$refs.inc.addEventListener('click', () => {
363 |                                             this.width = this.width + 20
364 |                                         })
365 |                                     }
366 |                                 }
367 |                             }
368 |                         </script>
369 |                     </td>
370 |                 </tr>
371 | 
372 |                 <tr>
373 |                     <td>Dispatch</td>
374 |                     <td>
375 |                         <div x-data="{ foo: 'bar' }" x-on:custom-event="foo = $event.detail.newValue">
376 |                             <span x-text="foo"></span>
377 | 
378 |                             <button x-on:click="$dispatch('custom-event', {newValue: 'baz'})">Turn 'bar' to 'baz'</button>
379 |                         </div>
380 |                     </td>
381 |                 </tr>
382 | 
383 |                 <tr>
384 |                     <td>Cloak</td>
385 |                     <td>
386 |                         <div x-data="{}" x-cloak>
387 |                             I'm cloaked
388 |                         </div>
389 |                     </td>
390 |                 </tr>
391 |             </tbody>
392 |         </table>
393 |     </body>
394 | </html>
395 | 


--------------------------------------------------------------------------------