alpinejs - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

package.json

 {
     "main": "dist/alpine.js",
     "name": "alpinejs",
-    "version": "2.6.0",
+    "version": "2.7.0",
     "repository": {
@@ -11,3 +11,3 @@ "type": "git",
         "watch": "rollup -c -w",
-        "build": "concurrently \"rollup -c\" \"npx rollup -c rollup-ie11.config.js\"",
+        "build": "concurrently \"rollup -c\" \"npx rollup -c rollup-ie11.config.js\" \"node inject-version-readme\"",
         "test": "npx jest",
@@ -19,4 +19,4 @@ "test:debug": "node --inspect node_modules/.bin/jest --runInBand"
     "devDependencies": {
-        "@babel/core": "^7.11.1",
-        "@babel/preset-env": "^7.11.0",
+        "@babel/core": "^7.11.6",
+        "@babel/preset-env": "^7.11.5",
         "@rollup/plugin-commonjs": "^11.1.0",
@@ -44,3 +44,3 @@ "@rollup/plugin-multi-entry": "^3.0.1",
         "rollup-plugin-strip-code": "^0.2.7",
-        "rollup-plugin-terser": "^7.0.0",
+        "rollup-plugin-terser": "^7.0.2",
         "shim-selected-options": "^1.0.1"
@@ -47,0 +47,0 @@ },

README.ja.md

@@ -17,3 +17,3 @@ # Alpine.js
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.js" defer></script>
 ```
@@ -35,5 +35,4 @@
 ```html
-<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>
-
-<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
 ```
@@ -40,0 +39,0 @@

README.md

@@ -20,5 +20,6 @@ # Alpine.js
 | Japanese | [**日本語ドキュメント**](./README.ja.md) | 
-| Chinese | [**繁體中文使用文件**](./README_zh-TW.md) | 
+| Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) | 
 | Russian | [**Документация на русском**](./README.ru.md) | 
-| Portuguese | [**Documentação em Português**](./README.pt.md) | 
+| Portuguese | [**Documentação em Português**](./README.pt.md) |
+| Spanish | [**Documentación en Español**](./README.es.md) |
 
@@ -35,5 +36,5 @@ ## Install
 For production environments, it's recommended to pin a specific version number in the link to avoid unexpected breakage from newer versions.
-For example, to use version `2.3.5`:
+For example, to use version `2.7.0` (latest):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>
 ```
@@ -144,12 +145,9 @@
 
-## VIP Contributors
+## Community Projects
 
-<table>
-  <tr>
-    <td align="center"><a href="http://calebporzio.com"><img src="https://avatars2.githubusercontent.com/u/3670578?v=4" width="100px;" alt="Caleb Porzio"/><br /><sub><b>Caleb Porzio</b></sub></a><br /><sub>(Creator)</sub></td>
-    <td align="center"><a href="https://github.com/HugoDF"><img src="https://avatars2.githubusercontent.com/u/6459679?v=4" width="100px;" alt="Hugo"/><br /><sub><b>Hugo</b></sub></a></td>
-    <td align="center"><a href="https://github.com/ryangjchandler"><img src="https://avatars2.githubusercontent.com/u/41837763?v=4" width="100px;" alt="Ryan Chandler"/><br /><sub><b>Ryan Chandler</b></sub></a></td>
-    <td align="center"><a href="https://github.com/SimoTod"><img src="https://avatars2.githubusercontent.com/u/8427737?v=4" width="100px;" alt="Simone Todaro"/><br /><sub><b>Simone Todaro</b></sub></a></td>
-  </tr>
-</table>
+* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
+* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
+* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
+* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
+* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
 
@@ -406,2 +404,7 @@ ### Directives
 
+**`.number` modifier**
+**Example:** `<input x-model.number="age">`
+
+The `number` modifier will convert the input's value to a number. If the value cannot be parsed as a valid number, the original value is returned.
+
 **`.debounce` modifier**
@@ -511,2 +514,12 @@ **Example:** `<input x-model.debounce="search">`
 
+#### Iterating over a range
+
+Alpine supports the `i in n` syntax, where `n` is an integer, allowing you to iterate over a fixed range of elements.
+
+```html
+<template x-for="i in 10">
+    <span x-text="i"></span>
+</template>
+```
+
 ---
@@ -513,0 +526,0 @@

README.pt.md

@@ -26,6 +26,6 @@ # Alpine.js
 Para ambiente de produção, é recomendado fixar o número da versão específico no link para evitar problemas inesperadas das versões mais recentes.
-Por exemplo, para usar a versão `2.3.5`:
+Por exemplo, para usar a versão `2.7.0`:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>
 ```
@@ -32,0 +32,0 @@

README.ru.md

@@ -25,5 +25,5 @@ # Alpine.js
 Для продакшн-окружения, рекомедуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
-Например, чтобы использовать версию `2.3.5`:
+Например, чтобы использовать версию `2.7.0`:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>
 ```
@@ -30,0 +30,0 @@

src/component.js

@@ -120,2 +120,21 @@ import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray } from './utils'
                 self.watchers[key].forEach(callback => callback(target[key]))
+            } else if (Array.isArray(target)) {
+                // Arrays are special cases, if any of the items change, we consider the array as mutated.
+                Object.keys(self.watchers)
+                    .forEach(fullDotNotationKey => {
+                        let dotNotationParts = fullDotNotationKey.split('.')
+
+                        // Ignore length mutations since they would result in duplicate calls.
+                        // For example, when calling push, we would get a mutation for the item's key
+                        // and a second mutation for the length property.
+                        if (key === 'length') return
+
+                        dotNotationParts.reduce((comparisonData, part) => {
+                            if (Object.is(target, comparisonData[part])) {
+                                self.watchers[fullDotNotationKey].forEach(callback => callback(target))
+                            }
+
+                            return comparisonData[part]
+                        }, self.getUnobservedData())
+                    })
             } else {
@@ -122,0 +141,0 @@ // Let's walk through the watchers with "dot-notation" (foo.bar) and see

src/directives/for.js

@@ -1,2 +0,2 @@
-import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate } from '../utils'
+import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate, isNumeric } from '../utils'
 
@@ -95,2 +95,7 @@ export function handleForDirective(component, templateEl, expression, initialUpdate, extraVars) {
 
+    // This adds support for the `i in n` syntax.
+    if (isNumeric(iteratorNames.items)) {
+        return Array.from(Array(parseInt(iteratorNames.items, 10)).keys(), i => i + 1)
+    }
+
     return component.evaluateReturnExpression(el, iteratorNames.items, extraVars)
@@ -97,0 +102,0 @@ }

src/directives/text.js

@@ -7,3 +7,3 @@ export function handleTextDirective(el, output, expression) {
 
-    el.innerText = output
+    el.textContent = output
 }

src/polyfills.js

@@ -12,1 +12,19 @@ // For the IE11 build.
 SVGElement.prototype.contains = SVGElement.prototype.contains || HTMLElement.prototype.contains
+
+// .childElementCount polyfill
+// from https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/childElementCount#Polyfill_for_IE8_IE9_Safari
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.childElementCount == null) {
+        Object.defineProperty(constructor.prototype, 'childElementCount', {
+            get: function() {
+                var i = 0, count = 0, node, nodes = this.childNodes;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) count++;
+                }
+                return count;
+            }
+        });
+    }
+})(window.Node || window.Element);

src/utils.js

@@ -27,3 +27,3 @@
     } else if (el.content.childElementCount !== 1) {
-        console.warn(`Alpine: <template> tag with [${directive}] encountered with multiple element roots. Make sure <template> only has a single child node.`)
+        console.warn(`Alpine: <template> tag with [${directive}] encountered with multiple element roots. Make sure <template> only has a single child element.`)
     }
@@ -30,0 +30,0 @@ }

test/constructor.spec.js

@@ -35,3 +35,3 @@ import Alpine from 'alpinejs'
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -71,3 +71,3 @@
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -96,3 +96,3 @@
 
-    await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })
 
@@ -115,4 +115,4 @@ document.querySelector('#B').innerHTML = `
     await wait(() => {
-        expect(document.querySelector('#A span').innerText).toEqual('bar')
-        expect(document.querySelector('#B span').innerText).toEqual('baz')
+        expect(document.querySelector('#A span').textContent).toEqual('bar')
+        expect(document.querySelector('#B span').textContent).toEqual('baz')
     })
@@ -142,3 +142,3 @@ })
 
-    await wait(() => { expect(document.querySelector('#A span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('#A span').textContent).toEqual('bar') })
 
@@ -163,4 +163,4 @@ document.querySelector('#B').innerHTML = `
     await wait(() => {
-        expect(document.querySelector('#A span').innerText).toEqual('bar')
-        expect(document.querySelector('#B span').innerText).toEqual('baz')
+        expect(document.querySelector('#A span').textContent).toEqual('bar')
+        expect(document.querySelector('#B span').textContent).toEqual('baz')
     })
@@ -188,3 +188,3 @@ })
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -204,8 +204,8 @@ document.querySelector('#target').innerHTML = `
 
-    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('0') })
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
-    await wait(() => { expect(document.querySelector('#target span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
+    await wait(() => { expect(document.querySelector('#target span').textContent).toEqual('1') })
 })
@@ -274,3 +274,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -288,3 +288,3 @@ document.querySelector('div').setAttribute('x-data', '{ count: 1 }')
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
@@ -308,3 +308,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('0')
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -322,3 +322,3 @@ document.querySelector('div').setAttribute('x-data', '{ count: $el.dataset.count }')
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('1') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
@@ -370,3 +370,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })
@@ -373,0 +373,0 @@

test/custom-magic-properties.spec.js

@@ -16,3 +16,3 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })

test/data.spec.js

@@ -19,3 +19,3 @@ import Alpine from 'alpinejs'
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })
@@ -32,3 +32,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 })
@@ -50,3 +50,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })
@@ -63,3 +63,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('test')
+    expect(document.querySelector('span').textContent).toEqual('test')
 })
@@ -76,7 +76,7 @@
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })
@@ -97,29 +97,29 @@
     // This test would create exponentially slower performance and eventually stall out.
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
     document.querySelector('h1').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('foo') })
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -126,0 +126,0 @@

test/debounce.spec.js

@@ -23,17 +23,17 @@ import Alpine from 'alpinejs'
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(249)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
@@ -55,17 +55,17 @@
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(99)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
@@ -83,21 +83,21 @@
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
-    expect(document.querySelector('span').innerText).toEqual('')
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' }})
-    expect(document.querySelector('span').innerText).toEqual('')
+    fireEvent.input(document.querySelector('input'), { target: { value: 'foo' } })
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(249)
 
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 })
@@ -115,21 +115,21 @@
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(10)
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 1 }})
-    expect(document.querySelector('span').innerText).toEqual(0)
+    fireEvent.input(document.querySelector('input'), { target: { value: 1 } })
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(99)
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     await timeout(20)
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
@@ -151,3 +151,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -159,3 +159,3 @@ fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
@@ -173,3 +173,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -181,3 +181,3 @@ fireEvent.keyDown(document.querySelector('input'), { key: 'a' })
 
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })

test/dispatch.spec.js

@@ -19,7 +19,7 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('baz') })
 })

test/for.spec.js

@@ -22,3 +22,3 @@ import Alpine from 'alpinejs'
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('foo')
 
@@ -29,4 +29,4 @@ document.querySelector('button').click()
 
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
-    expect(document.querySelectorAll('span')[1].innerText).toEqual('bar')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('foo')
+    expect(document.querySelectorAll('span')[1].textContent).toEqual('bar')
 })
@@ -91,4 +91,4 @@
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelector('h1').innerText).toEqual('first')
-    expect(document.querySelector('h2').innerText).toEqual('bar')
+    expect(document.querySelector('h1').textContent).toEqual('first')
+    expect(document.querySelector('h2').textContent).toEqual('bar')
 
@@ -98,4 +98,4 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('first')
-        expect(document.querySelector('h2').innerText).toEqual('baz')
+        expect(document.querySelector('h1').textContent).toEqual('first')
+        expect(document.querySelector('h2').textContent).toEqual('baz')
     })
@@ -119,3 +119,3 @@ })
     expect(document.querySelectorAll('div.child').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -125,3 +125,3 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bob')
+        expect(document.querySelector('span').textContent).toEqual('bob')
     })
@@ -147,3 +147,3 @@ })
     expect(document.querySelectorAll('ul').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -153,3 +153,3 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bob')
+        expect(document.querySelector('span').textContent).toEqual('bob')
     })
@@ -220,4 +220,4 @@ })
 
-    expect(document.querySelector('h1').innerText).toEqual(0)
-    expect(document.querySelector('h2').innerText).toEqual(0)
+    expect(document.querySelector('h1').textContent).toEqual('0')
+    expect(document.querySelector('h2').textContent).toEqual('0')
 })
@@ -239,4 +239,4 @@
 
-    expect(document.querySelector('h1').innerText).toEqual(["foo"])
-    expect(document.querySelector('h2').innerText).toEqual(["foo"])
+    expect(document.querySelector('h1').textContent).toEqual('foo')
+    expect(document.querySelector('h2').textContent).toEqual('foo')
 })
@@ -291,11 +291,11 @@
 
-    await wait(() => { expect(document.querySelector('h1').innerText).toEqual('foo') })
+    await wait(() => { expect(document.querySelector('h1').textContent).toEqual('foo') })
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 
     document.querySelector('span').click()
 
-    await wait(() => { expect(document.querySelector('h1').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('h1').textContent).toEqual('bar') })
 })
@@ -322,4 +322,4 @@
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob')
 
@@ -330,5 +330,5 @@ document.querySelector('button').click()
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('lob')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('law')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('lob')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('law')
 })
@@ -359,5 +359,5 @@
 
-    expect(document.querySelectorAll('span')[0].innerText).toEqual('zero')
-    expect(document.querySelectorAll('span')[1].innerText).toEqual('one')
-    expect(document.querySelectorAll('span')[2].innerText).toEqual('two')
+    expect(document.querySelectorAll('span')[0].textContent).toEqual('zero')
+    expect(document.querySelectorAll('span')[1].textContent).toEqual('one')
+    expect(document.querySelectorAll('span')[2].textContent).toEqual('two')
 
@@ -388,6 +388,6 @@ // Make sure states are preserved
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab')
-    expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab')
+    expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab')
 })
@@ -420,6 +420,6 @@
 
-    expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 0')
-    expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-    expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
-    expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+    expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 0')
+    expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+    expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0')
+    expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
@@ -431,6 +431,6 @@ expect(document._alerts.length).toEqual(0)
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 0')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 0')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
@@ -444,6 +444,6 @@ expect(document._alerts.length).toEqual(1)
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 1')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 1')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
@@ -458,6 +458,6 @@ expect(document._alerts.length).toEqual(2)
     await wait(() => {
-        expect(document.querySelectorAll('h2')[0].innerText).toEqual('foo: bob = 2')
-        expect(document.querySelectorAll('h2')[1].innerText).toEqual('foo: lob = 0')
-        expect(document.querySelectorAll('h2')[2].innerText).toEqual('baz: bab = 1')
-        expect(document.querySelectorAll('h2')[3].innerText).toEqual('baz: lab = 0')
+        expect(document.querySelectorAll('h2')[0].textContent).toEqual('foo: bob = 2')
+        expect(document.querySelectorAll('h2')[1].textContent).toEqual('foo: lob = 0')
+        expect(document.querySelectorAll('h2')[2].textContent).toEqual('baz: bab = 1')
+        expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab = 0')
 
@@ -499,1 +499,15 @@ expect(document._alerts.length).toEqual(3)
 })
+
+test('x-for over range using i in x syntax', async () => {
+    document.body.innerHTML = `
+        <div x-data>
+            <template x-for="i in 10">
+                <span x-text="i"></span>
+            </template>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('span').length).toEqual(10)
+})

test/if.spec.js

@@ -44,3 +44,3 @@ import Alpine from 'alpinejs'
     expect(document.querySelector('h2')).toBeFalsy()
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -56,3 +56,3 @@ document.querySelector('h1').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
@@ -79,3 +79,3 @@ })
     expect(document.querySelectorAll('span').length).toEqual(1)
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
@@ -95,3 +95,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -101,4 +101,4 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual(1)
+        expect(document.querySelector('span').textContent).toEqual('1')
     })
 })

test/lifecycle.spec.js

@@ -29,4 +29,4 @@ import Alpine from 'alpinejs'
     window.setValueA = (el) => { valueA = el.innerHTML }
-    window.setValueB = (el) => { valueB = el.innerText }
-    window.data = function() {
+    window.setValueB = (el) => { valueB = el.textContent }
+    window.data = function () {
         return {
@@ -67,7 +67,7 @@ foo: 'bar',
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') })
 })
@@ -86,7 +86,7 @@
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bob') })
 })
@@ -106,4 +106,4 @@
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
 })

test/model.spec.js

@@ -112,3 +112,3 @@ import Alpine from 'alpinejs'
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -252,3 +252,3 @@
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -261,3 +261,3 @@ fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } });
         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
@@ -284,3 +284,3 @@ })
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
-    expect(document.querySelector('span').innerText).toEqual(['bar'])
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -294,3 +294,3 @@ document.querySelectorAll('option')[2].selected = true
         expect(document.querySelectorAll('option')[2].selected).toEqual(true)
-        expect(document.querySelector('span').innerText).toEqual(['bar', 'baz'])
+        expect(document.querySelector('span').textContent).toEqual('bar,baz')
     })
@@ -310,3 +310,3 @@ })
     expect(document.querySelector('input').value).toEqual('foo')
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 
@@ -317,3 +317,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
@@ -333,3 +333,3 @@ })
     expect(document.querySelector('input').value).toEqual('')
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
@@ -340,3 +340,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
@@ -356,3 +356,3 @@ })
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -362,3 +362,3 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
@@ -379,3 +379,3 @@ })
     expect(document.querySelector('input').value).toEqual('#ff0000')
-    expect(document.querySelector('span').innerText).toEqual('#ff0000')
+    expect(document.querySelector('span').textContent).toEqual('#ff0000')
 
@@ -386,3 +386,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '#00ff00' } });
         expect(document.querySelector('input').value).toEqual('#00ff00')
-        expect(document.querySelector('span').innerText).toEqual('#00ff00')
+        expect(document.querySelector('span').textContent).toEqual('#00ff00')
     })
@@ -404,3 +404,3 @@
     expect(document.querySelector('input').value).toEqual('foo')
-    expect(document.querySelector('span').innerText).toEqual('foo')
+    expect(document.querySelector('span').textContent).toEqual('foo')
 
@@ -411,3 +411,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } });
         expect(document.querySelector('input').value).toEqual('bar')
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
@@ -428,3 +428,3 @@ })
     expect(document.querySelector('input').value).toEqual('2020-07-10')
-    expect(document.querySelector('span').innerText).toEqual('2020-07-10')
+    expect(document.querySelector('span').textContent).toEqual('2020-07-10')
 
@@ -435,3 +435,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '2021-01-01' } });
         expect(document.querySelector('input').value).toEqual('2021-01-01')
-        expect(document.querySelector('span').innerText).toEqual('2021-01-01')
+        expect(document.querySelector('span').textContent).toEqual('2021-01-01')
     })
@@ -452,3 +452,3 @@ })
     expect(document.querySelector('input').value).toEqual('2020-01-01T20:00')
-    expect(document.querySelector('span').innerText).toEqual('2020-01-01T20:00')
+    expect(document.querySelector('span').textContent).toEqual('2020-01-01T20:00')
 
@@ -459,3 +459,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '2021-02-02T20:00' } });
         expect(document.querySelector('input').value).toEqual('2021-02-02T20:00')
-        expect(document.querySelector('span').innerText).toEqual('2021-02-02T20:00')
+        expect(document.querySelector('span').textContent).toEqual('2021-02-02T20:00')
     })
@@ -480,3 +480,3 @@ })
     expect(document.querySelector('input').value).toEqual('2020-04')
-    expect(document.querySelector('span').innerText).toEqual('2020-04')
+    expect(document.querySelector('span').textContent).toEqual('2020-04')
 
@@ -487,3 +487,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '2021-05' } });
         expect(document.querySelector('input').value).toEqual('2021-05')
-        expect(document.querySelector('span').innerText).toEqual('2021-05')
+        expect(document.querySelector('span').textContent).toEqual('2021-05')
     })
@@ -505,3 +505,3 @@ })
     expect(document.querySelector('input').value).toEqual('11')
-    expect(document.querySelector('span').innerText).toEqual('11')
+    expect(document.querySelector('span').textContent).toEqual('11')
 
@@ -512,3 +512,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '2021' } });
         expect(document.querySelector('input').value).toEqual('2021')
-        expect(document.querySelector('span').innerText).toEqual('2021')
+        expect(document.querySelector('span').textContent).toEqual('2021')
     })
@@ -529,3 +529,3 @@ })
     expect(document.querySelector('input').value).toEqual('SecretKey')
-    expect(document.querySelector('span').innerText).toEqual('SecretKey')
+    expect(document.querySelector('span').textContent).toEqual('SecretKey')
 
@@ -536,3 +536,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: 'NewSecretKey' } });
         expect(document.querySelector('input').value).toEqual('NewSecretKey')
-        expect(document.querySelector('span').innerText).toEqual('NewSecretKey')
+        expect(document.querySelector('span').textContent).toEqual('NewSecretKey')
     })
@@ -553,3 +553,3 @@ })
     expect(document.querySelector('input').value).toEqual('10')
-    expect(document.querySelector('span').innerText).toEqual('10')
+    expect(document.querySelector('span').textContent).toEqual('10')
 
@@ -560,3 +560,3 @@ fireEvent.input(document.querySelector('input'), { target: { value: '20' } });
         expect(document.querySelector('input').value).toEqual('20')
-        expect(document.querySelector('span').innerText).toEqual('20')
+        expect(document.querySelector('span').textContent).toEqual('20')
     })
@@ -577,3 +577,3 @@ })
     expect(document.querySelector('input').value).toEqual('')
-    expect(document.querySelector('span').innerText).toEqual('')
+    expect(document.querySelector('span').textContent).toEqual('')
 
@@ -585,3 +585,3 @@ const newValue = 'Frontend Frameworks';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -602,3 +602,3 @@ })
     expect(document.querySelector('input').value).toEqual('[phone]')
-    expect(document.querySelector('span').innerText).toEqual('[phone]')
+    expect(document.querySelector('span').textContent).toEqual('[phone]')
 
@@ -610,3 +610,3 @@ const newValue = '[phone]';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -627,3 +627,3 @@ })
     expect(document.querySelector('input').value).toEqual('[phone]')
-    expect(document.querySelector('span').innerText).toEqual('[phone]')
+    expect(document.querySelector('span').textContent).toEqual('[phone]')
 
@@ -635,3 +635,3 @@ const newValue = '[phone]';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -652,3 +652,3 @@ })
     expect(document.querySelector('input').value).toEqual('22:00')
-    expect(document.querySelector('span').innerText).toEqual('22:00')
+    expect(document.querySelector('span').textContent).toEqual('22:00')
 
@@ -660,3 +660,3 @@ const newValue = '23:00';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -677,3 +677,3 @@ })
     expect(document.querySelector('input').value).toEqual('22:00')
-    expect(document.querySelector('span').innerText).toEqual('22:00')
+    expect(document.querySelector('span').textContent).toEqual('22:00')
 
@@ -685,3 +685,3 @@ const newValue = '23:00';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -702,3 +702,3 @@ })
     expect(document.querySelector('input').value).toEqual('2020-W20')
-    expect(document.querySelector('span').innerText).toEqual('2020-W20')
+    expect(document.querySelector('span').textContent).toEqual('2020-W20')
 
@@ -710,3 +710,3 @@ const newValue = '2020-W30';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -727,3 +727,3 @@ })
     expect(document.querySelector('input').value).toEqual('https://example.com')
-    expect(document.querySelector('span').innerText).toEqual('https://example.com')
+    expect(document.querySelector('span').textContent).toEqual('https://example.com')
 
@@ -735,3 +735,3 @@ const newValue = 'https://alpine.io';
         expect(document.querySelector('input').value).toEqual(newValue)
-        expect(document.querySelector('span').innerText).toEqual(newValue)
+        expect(document.querySelector('span').textContent).toEqual(newValue)
     })
@@ -738,0 +738,0 @@ })

test/mutations.spec.js

@@ -51,7 +51,7 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('button').innerText).toEqual(1)
+    expect(document.querySelector('button').textContent).toEqual('1')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') })
 
@@ -63,3 +63,3 @@ // Move the component and run the observer
             {
-                target:  document.getElementById('b'),
+                target: document.getElementById('b'),
                 type: 'childList',
@@ -71,3 +71,3 @@ addedNodes: [ document.querySelector('button') ],
 
-    await wait(() => { expect(document.querySelector('button').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('button').textContent).toEqual('2') })
 })

test/nesting.spec.js

@@ -22,3 +22,3 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -29,3 +29,3 @@ document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -46,3 +46,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 })

test/next-tick.spec.js

@@ -13,3 +13,3 @@ import Alpine from 'alpinejs'
 
-            <button x-on:click="foo = 'baz'; $nextTick(() => {$refs.span.innerText = 'bob'})"></button>
+            <button x-on:click="foo = 'baz'; $nextTick(() => {$refs.span.textContent = 'bob'})"></button>
         </div>
@@ -20,7 +20,7 @@ `
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
     document.querySelector('button').click()
 
-    await wait(() => expect(document.querySelector('span').innerText).toEqual('bob'))
+    await wait(() => expect(document.querySelector('span').textContent).toEqual('bob'))
 })
@@ -43,7 +43,7 @@
 
-    expect(document.querySelector('p').innerText).toEqual(2)
+    expect(document.querySelector('p').textContent).toEqual('2')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('p').innerText).toEqual(3) })
+    await wait(() => { expect(document.querySelector('p').textContent).toEqual('3') })
 })
@@ -69,3 +69,3 @@
     await wait(() => {
-        expect(document.querySelector('h2').innerText).toEqual('none')
+        expect(document.querySelector('h2').textContent).toEqual('none')
     })
@@ -76,4 +76,4 @@
     await wait(() => {
-        expect(document.querySelector('h2').innerText).toEqual('')
+        expect(document.querySelector('h2').textContent).toEqual('')
     })
 })

test/on.spec.js

@@ -102,3 +102,3 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -108,3 +108,3 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('bar')
+        expect(document.querySelector('span').textContent).toEqual('bar')
     })
@@ -115,3 +115,3 @@
     await wait(() => {
-        expect(document.querySelector('span').innerText).toEqual('baz')
+        expect(document.querySelector('span').textContent).toEqual('baz')
     })
@@ -255,19 +255,19 @@ })
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(2) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('2') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: ' ' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(4) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('4') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Spacebar' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(6) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('6') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(7) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('7') })
 })
@@ -286,11 +286,11 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Enter', metaKey: true })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
@@ -311,7 +311,7 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
     fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 
@@ -321,3 +321,3 @@ fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' })
     await timeout(25)
-    expect(document.querySelector('span').innerText).toEqual(1)
+    expect(document.querySelector('span').textContent).toEqual('1')
 })
@@ -330,6 +330,6 @@
         offsetHeight: {
-          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+            get: function () { return this.classList.contains('hidden') ? 0 : 1 }
         },
         offsetWidth: {
-          get: function() { return this.classList.contains('hidden') ? 0 : 1 }
+            get: function () { return this.classList.contains('hidden') ? 0 : 1 }
         }
@@ -478,3 +478,3 @@ });
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -485,3 +485,3 @@ document.querySelector('button').click()
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
@@ -499,3 +499,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual('bar')
+    expect(document.querySelector('span').textContent).toEqual('bar')
 
@@ -506,3 +506,3 @@ document.querySelector('button').click()
 
-    expect(document.querySelector('span').innerText).toEqual('baz')
+    expect(document.querySelector('span').textContent).toEqual('baz')
 })
@@ -521,3 +521,3 @@
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -528,11 +528,11 @@ const autocompleteEvent = new Event('keydown')
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(0) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('0') })
 
     fireEvent.keyDown(document.querySelector('input'), { key: '?' })
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 
     fireEvent(document.querySelector('input'), autocompleteEvent)
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })
@@ -550,3 +550,3 @@
 
-    expect(document.querySelector('p').innerText).toEqual('bar')
+    expect(document.querySelector('p').textContent).toEqual('bar')
 
@@ -556,3 +556,3 @@ document.querySelector('button').click();
     await wait(() => {
-        expect(document.querySelector('p').innerText).toEqual('bob');
+        expect(document.querySelector('p').textContent).toEqual('bob');
     });
@@ -571,3 +571,3 @@ })
 
-    expect(document.querySelector('p').innerText).toEqual('bar')
+    expect(document.querySelector('p').textContent).toEqual('bar')
 
@@ -577,4 +577,4 @@ document.querySelector('button').click();
     await wait(() => {
-        expect(document.querySelector('p').innerText).toEqual('bob');
+        expect(document.querySelector('p').textContent).toEqual('bob');
     });
 })

test/readonly.spec.js

@@ -21,3 +21,3 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('span').innerText).toEqual(0)
+    expect(document.querySelector('span').textContent).toEqual('0')
 
@@ -31,3 +31,3 @@ const input = document.querySelector('input')
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1') })
 })

test/ref.spec.js

@@ -13,3 +13,3 @@ import Alpine from 'alpinejs'
 
-            <button x-on:click="$refs['bob'].innerText = 'lob'"></button>
+            <button x-on:click="$refs['bob'].textContent = 'lob'"></button>
         </div>
@@ -20,7 +20,7 @@ `
 
-    expect(document.querySelector('span').innerText).toEqual(undefined)
+    expect(document.querySelector('span').textContent).toEqual('')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') })
 })
@@ -30,3 +30,3 @@
     document.body.innerHTML = `
-        <div x-data="{ foo() { this.$refs.bob.innerText = 'lob' } }">
+        <div x-data="{ foo() { this.$refs.bob.textContent = 'lob' } }">
             <span x-ref="bob"></span>
@@ -40,7 +40,7 @@
 
-    expect(document.querySelector('span').innerText).toEqual(undefined)
+    expect(document.querySelector('span').textContent).toEqual('')
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('lob') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('lob') })
 })

test/spread.spec.js

@@ -65,5 +65,5 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelectorAll('li')[0].innerText).toEqual('one')
-    expect(document.querySelectorAll('li')[1].innerText).toEqual('two')
-    expect(document.querySelectorAll('li')[2].innerText).toEqual('three')
+    expect(document.querySelectorAll('li')[0].textContent).toEqual('one')
+    expect(document.querySelectorAll('li')[1].textContent).toEqual('two')
+    expect(document.querySelectorAll('li')[2].textContent).toEqual('three')
 })
@@ -70,0 +70,0 @@

test/strict-mode.spec.js

@@ -29,3 +29,3 @@ import Alpine from 'alpinejs'
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1200) })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('1200') })
 })

test/text.spec.js

@@ -5,3 +5,3 @@ import Alpine from 'alpinejs'
 global.MutationObserver = class {
-    observe() {}
+    observe() { }
 }
@@ -18,3 +18,3 @@
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
@@ -33,7 +33,21 @@
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('') })
 
     document.querySelector('button').click()
 
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
+    await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') })
 })
+
+test('x-text on SVG elements', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar' }">
+            <svg>
+                <text x-text="foo"></text>
+            </svg>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('text').textContent).toEqual('bar') })
+})

test/watch.spec.js

@@ -20,4 +20,4 @@ import Alpine from 'alpinejs'
 
-    expect(document.querySelector('h1').innerText).toEqual('bar')
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('bar')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
@@ -27,4 +27,4 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('baz')
-        expect(document.querySelector('h2').innerText).toEqual('baz')
+        expect(document.querySelector('h1').textContent).toEqual('baz')
+        expect(document.querySelector('h2').textContent).toEqual('baz')
     })
@@ -47,4 +47,4 @@ })
 
-    expect(document.querySelector('h1').innerText).toEqual('baz')
-    expect(document.querySelector('h2').innerText).toEqual('lob')
+    expect(document.querySelector('h1').textContent).toEqual('baz')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
 
@@ -54,5 +54,99 @@ document.querySelector('button').click()
     await wait(() => {
-        expect(document.querySelector('h1').innerText).toEqual('law')
-        expect(document.querySelector('h2').innerText).toEqual('law')
+        expect(document.querySelector('h1').textContent).toEqual('law')
+        expect(document.querySelector('h2').textContent).toEqual('law')
     })
 })
+
+test('$watch arrays', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: ['one'], bob: 'lob' }" x-init="$watch('foo', value => { bob = value })">
+            <h1 x-text="foo"></h1>
+            <h2 x-text="bob"></h2>
+
+            <button id="push" x-on:click="foo.push('two')"></button>
+            <button id="pop" x-on:click="foo.pop()"></button>
+            <button id="unshift" x-on:click="foo.unshift('zero')"></button>
+            <button id="shift" x-on:click="foo.shift()"></button>
+            <button id="assign" x-on:click="foo = [2,1,3]"></button>
+            <button id="sort" x-on:click="foo.sort()"></button>
+            <button id="reverse" x-on:click="foo.reverse()"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('h1').textContent).toEqual('one')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
+
+    document.querySelector('#push').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('one,two')
+        expect(document.querySelector('h2').textContent).toEqual('one,two')
+    })
+
+    document.querySelector('#pop').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('one')
+        expect(document.querySelector('h2').textContent).toEqual('one')
+    })
+
+    document.querySelector('#unshift').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('zero,one')
+        expect(document.querySelector('h2').textContent).toEqual('zero,one')
+    })
+
+    document.querySelector('#shift').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('one')
+        expect(document.querySelector('h2').textContent).toEqual('one')
+    })
+
+    document.querySelector('#assign').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('2,1,3')
+        expect(document.querySelector('h2').textContent).toEqual('2,1,3')
+    })
+
+    document.querySelector('#sort').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('1,2,3')
+        expect(document.querySelector('h2').textContent).toEqual('1,2,3')
+    })
+
+    document.querySelector('#reverse').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('3,2,1')
+        expect(document.querySelector('h2').textContent).toEqual('3,2,1')
+    })
+})
+
+test('$watch nested arrays', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: {baz: ['one']}, bob: 'lob' }" x-init="$watch('foo.baz', value => { bob = value })">
+            <h1 x-text="foo.baz"></h1>
+            <h2 x-text="bob"></h2>
+
+            <button id="push" x-on:click="foo.baz.push('two')"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('h1').textContent).toEqual('one')
+    expect(document.querySelector('h2').textContent).toEqual('lob')
+
+    document.querySelector('#push').click()
+
+    await wait(() => {
+        expect(document.querySelector('h1').textContent).toEqual('one,two')
+        expect(document.querySelector('h2').textContent).toEqual('one,two')
+    })
+})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

819883

increased by5.91%

Number of package files

66

increased by3.13%

Lines of code

13816

increased by1.57%

Number of lines in readme file

773

increased by1.71%

Published versions last two months

5

increased by25%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes