Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

alpinejs

Package Overview
Dependencies
Maintainers
1
Versions
134
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

alpinejs - npm Package Compare versions

Comparing version 2.8.0 to 2.8.1

README.ar.md
README.ko.md
README.zh-CN.md

12

package.json
{
"main": "dist/alpine.js",
"name": "alpinejs",
"version": "2.8.0",
"version": "2.8.1",
"repository": {

@@ -18,14 +18,14 @@ "type": "git",

"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-multi-entry": "^3.0.1",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-replace": "^2.3.4",
"@testing-library/dom": "^6.16.0",
"@testing-library/jest-dom": "^4.2.4",
"@webcomponents/template": "^1.4.3",
"@webcomponents/template": "^1.4.4",
"babel-jest": "^25.5.1",
"classlist-polyfill": "^1.2.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"core-js": "^3.8.3",
"element-closest": "^3.0.2",

@@ -32,0 +32,0 @@ "element-remove": "^1.0.4",

6

README.de.md

@@ -37,5 +37,5 @@ # Alpine.js

Für die Produktionsumgebung wird empfohlen, den Link mit einer spezifischen Versionsnummer zu versehen. Somit kann präventiv sichergestellt werden, dass keine unerwarteten Fehler durch Versionsaktualisierungen zustande kommen.
Als Beispiel wird hier die (letzte) Version `2.8.0` spezifiziert:
Als Beispiel wird hier die (letzte) Version `2.8.1` spezifiziert:
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -165,3 +165,3 @@

`x-data` deklariert einen neuene Komponenten-Geltungsbereich. Jede neu erstellte Komponente wird nun mit der angegebenen Datenquelle initialisiert.
`x-data` deklariert einen neuen Komponenten-Geltungsbereich. Jede neu erstellte Komponente wird nun mit der angegebenen Datenquelle initialisiert.

@@ -168,0 +168,0 @@ Dies verhält sich ähnlich wie die `data`-Eigenschaft einer Vue-Komponente.

4

README.es.md

@@ -24,5 +24,5 @@ # Alpine.js

Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.8.0` (la última):
Para entornos de producción, se recomienda especificar una número de versión en concreto en el enlace para evitar comportamientos inesperados que puedan romper las nuevas versiones. Por ejemplo, para usar la versión `2.8.1` (la última):
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -29,0 +29,0 @@

4

README.fr.md

@@ -38,5 +38,5 @@ # Alpine.js

Dans les environnements de production, il est recommandé d'inscrire un numéro de version spécifique dans le lien, afin d'éviter qu'une nouvelle version ne provoque un comportement inattendu.
Par exemple, pour utiliser la version `2.8.0` (la dernière) :
Par exemple, pour utiliser la version `2.8.1` (la dernière) :
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -43,0 +43,0 @@

4

README.id.md

@@ -35,5 +35,5 @@ # Alpine.js

Untuk lingkungan produksi, disarankan untuk memasang pin pada nomor versi tertentu di link untuk menghindari kerusakan yang tidak terduga dari versi yang lebih baru. Misalnya, untuk menggunakan versi `2.8.0` (terbaru):
Untuk lingkungan produksi, disarankan untuk memasang pin pada nomor versi tertentu di link untuk menghindari kerusakan yang tidak terduga dari versi yang lebih baru. Misalnya, untuk menggunakan versi `2.8.1` (terbaru):
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -40,0 +40,0 @@

2

README.ja.md

@@ -17,3 +17,3 @@ # Alpine.js

```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.js" defer></script>
```

@@ -20,0 +20,0 @@

33

README.md

@@ -19,2 +19,4 @@ # Alpine.js

| --- | --- |
| Arabic | [**التوثيق باللغة العربية**](./README.ar.md) |
| Chinese Simplified | [**简体中文文档**](./README.zh-CN.md) |
| Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) |

@@ -29,2 +31,3 @@ | German | [**Dokumentation in Deutsch**](./README.de.md) |

| Français | [**Documentation en Français**](./README.fr.md) |
| Korean | [**한국어 문서**](./README.ko.md) |

@@ -41,5 +44,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.8.0` (latest):
For example, to use version `2.8.1` (latest):
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -252,3 +255,3 @@

> Note: `x-show` will wait for any children to finish transitioning out. If you want to bypass this behavior, add the `.immediate` modifer:
> Note: `x-show` will wait for any children to finish transitioning out. If you want to bypass this behavior, add the `.immediate` modifier:
```html

@@ -476,3 +479,3 @@ <div x-show.immediate="open">

> Note: `x-if` must have a single element root inside the `<template></template>` tag.
> Note: `x-if` must have a single root element inside the `<template></template>` tag.

@@ -508,13 +511,15 @@ > Note: When using `template` in a `svg` tag, you need to add a [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) that should be run before Alpine.js is initialized.

<template x-for="(item, index, collection) in items" :key="index">
<!-- You can also reference "collection" inside the iteration if you need. -->
<!-- Current item. -->
<div x-text="item"></div>
<!-- Same as above. -->
<div x-text="collection[index]"></div>
<!-- Previous item. -->
<div x-text="collection[index - 1]"></div>
<div>
<!-- You can also reference "collection" inside the iteration if you need. -->
<!-- Current item. -->
<div x-text="item"></div>
<!-- Same as above. -->
<div x-text="collection[index]"></div>
<!-- Previous item. -->
<div x-text="collection[index - 1]"></div>
</div>
</template>
```
> Note: `x-for` must have a single element root inside of the `<template></template>` tag.
> Note: `x-for` must have a single root element inside of the `<template></template>` tag.

@@ -640,3 +645,5 @@ > Note: When using `template` in a `svg` tag, you need to add a [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) that should be run before Alpine.js is initialized.

<style>
[x-cloak] { display: none; }
[x-cloak] {
display: none !important;
}
</style>

@@ -643,0 +650,0 @@ ```

4

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.8.0`:
Por exemplo, para usar a versão `2.8.1`:
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -32,0 +32,0 @@

4

README.ru.md

@@ -25,5 +25,5 @@ # Alpine.js

Для рабочего окружения рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
Например, чтобы использовать версию `2.8.0`:
Например, чтобы использовать версию `2.8.1`:
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -30,0 +30,0 @@

4

README.tr.md

@@ -38,5 +38,5 @@ # Alpine.js

Gerçek ortamda kullanırken yeni çıkan sürümlerden kaynaklanabilecek bozukluklardan kaçınmak için bağlantıda versiyon numarasını tam olarak belirtmek önerilir.
Örneğin, `2.8.0` (son sürüm) sürümünü kullanmak için:
Örneğin, `2.8.1` (son sürüm) sürümünü kullanmak için:
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -43,0 +43,0 @@

4

README.zh-TW.md

@@ -25,5 +25,5 @@ # Alpine.js

在正式環境中，建議在連結中固定特定版本，以避免新版本使功能無法使用。
如，要使用 `2.8.0` 版則可以這樣寫：
如，要使用 `2.8.1` 版則可以這樣寫：
```html
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
```

@@ -30,0 +30,0 @@

12

src/component.js

@@ -97,3 +97,5 @@ import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray, TRANSITION_CANCELLED } from './utils'

// Register all our listeners and set all our attribute bindings.
this.initializeElements(this.$el)
// If we're cloning a component, the third parameter ensures no duplicate
// event listeners are registered (the mutation observer will take care of them)
this.initializeElements(this.$el, () => {}, componentForClone ? false : true)

@@ -199,3 +201,3 @@ // Use mutation observer to detect new elements being added within this component at run-time.

initializeElements(rootEl, extraVars = () => {}) {
initializeElements(rootEl, extraVars = () => {}, shouldRegisterListeners = true) {
this.walkAndSkipNestedComponents(rootEl, el => {

@@ -208,3 +210,3 @@ // Don't touch spawns from for loop

this.initializeElement(el, extraVars)
this.initializeElement(el, extraVars, shouldRegisterListeners)
}, el => {

@@ -219,3 +221,3 @@ el.__x = new Component(el)

initializeElement(el, extraVars) {
initializeElement(el, extraVars, shouldRegisterListeners = true) {
// To support class attribute merging, we have to know what the element's

@@ -227,3 +229,3 @@ // original class attribute looked like for reference.

this.registerListeners(el, extraVars)
shouldRegisterListeners && this.registerListeners(el, extraVars)
this.resolveBoundAttributes(el, true, extraVars)

@@ -230,0 +232,0 @@ }

2

src/directives/bind.js

@@ -11,3 +11,3 @@ import { arrayUnique, checkedAttrLooseCompare, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils'

// If nested model key is undefined, set the default value to empty string.
if (value === undefined && expression.match(/\./)) {
if (value === undefined && String(expression).match(/\./)) {
value = ''

@@ -14,0 +14,0 @@ }

4

src/directives/for.js

@@ -49,3 +49,3 @@ import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate, isNumeric } from '../utils'

let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
let inMatch = expression.match(forAliasRE)
let inMatch = String(expression).match(forAliasRE)
if (! inMatch) return

@@ -99,3 +99,3 @@ let res = {}

// This adds support for the `i in n` syntax.
if (isNumeric(items) && items > 0) {
if (isNumeric(items) && items >= 0) {
items = Array.from(Array(items).keys(), i => i + 1)

@@ -102,0 +102,0 @@ }

27

src/directives/on.js

@@ -12,4 +12,8 @@ import { kebabCase, camelCase, debounce, isNumeric } from '../utils'

let handler, listenerTarget
if (modifiers.includes('away')) {
let handler = e => {
listenerTarget = document
handler = e => {
// Don't do anything if the click came from the element or within it.

@@ -29,10 +33,7 @@ if (el.contains(e.target)) return

}
// Listen for this event at the root level.
document.addEventListener(event, handler, options)
} else {
let listenerTarget = modifiers.includes('window')
listenerTarget = modifiers.includes('window')
? window : (modifiers.includes('document') ? document : el)
let handler = e => {
handler = e => {
// Remove this global event handler if the element that declared it

@@ -73,11 +74,11 @@ // has been removed. It's now stale.

}
}
if (modifiers.includes('debounce')) {
let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
handler = debounce(handler, wait, this)
}
if (modifiers.includes('debounce')) {
let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
handler = debounce(handler, wait, this)
}
listenerTarget.addEventListener(event, handler, options)
}
listenerTarget.addEventListener(event, handler, options)
}

@@ -84,0 +85,0 @@

2

src/directives/text.js
export function handleTextDirective(el, output, expression) {
// If nested model key is undefined, set the default value to empty string.
if (output === undefined && expression.match(/\./)) {
if (output === undefined && String(expression).match(/\./)) {
output = ''

@@ -5,0 +5,0 @@ }

3

src/utils.js

@@ -31,3 +31,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 element.`)
console.warn(`Alpine: <template> tag with [${directive}] encountered with an unexpected number of root elements. Make sure <template> has a single root element. `)
}

@@ -73,2 +73,3 @@ }

if (! isTesting()) {
Object.assign(error, { el, expression })
throw error;

@@ -75,0 +76,0 @@ }

17

test/for.spec.js

@@ -559,1 +559,18 @@ import Alpine from 'alpinejs'

})
test('x-for over range using i in x syntax with i <= 0', async () => {
document.body.innerHTML = `
<div x-data="{ count: 1 }">
<template x-for="i in count">
<span x-text="i"></span>
</template>
<button @click="count--"></button>
</div>
`
Alpine.start()
document.querySelector('button').click()
await wait(() => { expect(document.querySelectorAll('span').length).toEqual(0) })
})

26

test/spread.spec.js

@@ -218,1 +218,27 @@ import Alpine from 'alpinejs'

});
test('x-spread undefined values can fail gracefully', async () => {
window.data = function () {
return {
foo: {
['x-text'](){
return this.somethingUndefined;
}
}
};
};
document.body.innerHTML = `
<div x-data="window.data()">
<button x-text="somethingUndefined">should be empty string</button>
<span x-spread="foo">should be empty string<span>
</div>
`;
Alpine.start();
await wait(() => {
expect(document.querySelector("button").textContent).toEqual('')
expect(document.querySelector("span").textContent).toEqual('')
})
});
dist/alpine-ie11.js

Sorry, the diff of this file is too big to display

dist/alpine.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc