alpinejs - npm Package Compare versions

Comparing version 2.8.1 to 2.8.2

LICENSE.md

 # MIT License
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
     "main": "dist/alpine.js",
     "name": "alpinejs",
-    "version": "2.8.1",
+    "version": "2.8.2",
     "repository": {
@@ -6,0 +6,0 @@ "type": "git",

README.ar.md

@@ -51,3 +51,3 @@ <div dir="rtl">
 
-في بيئات التطوير، نوصي باستعمال إصدار محدّد كما في الرابط، لتجنب حدوث مشاكل غير متوقعة أو تصادمها مع الإصدارات الحديثة. على سبيل المثال، لاستخدام الإصدار الأخير (2.8.1) يمكنك كتابة:
+في بيئات التطوير، نوصي باستعمال إصدار محدّد كما في الرابط، لتجنب حدوث مشاكل غير متوقعة أو تصادمها مع الإصدارات الحديثة. على سبيل المثال، لاستخدام الإصدار الأخير (2.8.2) يمكنك كتابة:
 
@@ -57,3 +57,3 @@ <div dir="ltr">
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -958,3 +958,3 @@
 
-حقوق النشر محفوظة  © 2019-2020 لـ Caleb Porzio والمساهمين.
+حقوق النشر محفوظة  © 2019-2021 لـ Caleb Porzio والمساهمين.
 
@@ -961,0 +961,0 @@ مرخص بموجب ترخيص MIT، راجع [LICENSE.md](LICENSE.md) للحصول على التفاصيل.

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.1` spezifiziert:
+Als Beispiel wird hier die (letzte) Version `2.8.2` spezifiziert:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -788,4 +788,4 @@
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
 Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.

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.1` (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.2` (la última):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -183,3 +183,3 @@
 
-También puedes mezclar múltiples tipos de datos usadndo desestructuración de objetos:
+También puedes mezclar múltiples tipos de datos usando desestructuración de objetos:
 
@@ -752,4 +752,4 @@ ```html
 
-Copyright © 2019-2020 Caleb Porzio y colaboradores
+Copyright © 2019-2021 Caleb Porzio y colaboradores
 
 Licenciado bajo la licencia MIT, ve [LICENSE.md](LICENSE.md) para más detalles.

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.1` (la dernière) :
+Par exemple, pour utiliser la version `2.8.2` (la dernière) :
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -792,4 +792,4 @@
 
-Copyright © 2019-2020 Caleb Porzio et contributeurs
+Copyright © 2019-2021 Caleb Porzio et contributeurs
 
 Licencié sous la licence du MIT, voir [LICENSE.md](LICENSE.md) pour plus de détails.

README.id.md

@@ -19,2 +19,3 @@ # Alpine.js
 | --- | --- |
+| Arabic | [**التوثيق باللغة العربية**](./README.ar.md) |
 | Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) |
@@ -26,2 +27,3 @@ | Indonesian | [**Dokumentasi Bahasa Indonesia**](./README.id.md) |
 | Spanish | [**Documentación en Español**](./README.es.md) |
+| Korean | [**한국어 문서**](./README.ko.md) |
 
@@ -37,5 +39,5 @@ ## Instalasi
 
-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):
+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.2` (terbaru):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -89,3 +91,3 @@
 Anda bahkan dapat menggunakannya untuk hal-hal yang tidak sepele: 
-*Mengambil konten HTML dari dropdown terlebih dahulu saat mengarahkan kursor*
+*Mengambil konten HTML dari dropdown terlebih dahulu saat mengarahkan kursor*.
 ```html
@@ -798,4 +800,4 @@ <div x-data="{ open: false }">
 
-hak cipta © 2019-2020 Caleb Porzio dan kontributor
+hak cipta © 2019-2021 Caleb Porzio dan kontributor
 
 Berlisensi di bawah lisensi MIT, lihat [LICENSE.md](LICENSE.md) untuk detailnya.

README.ja.md

@@ -17,3 +17,3 @@ # Alpine.js
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>
 ```
@@ -87,29 +87,31 @@
 
-次の13のディレクティブを使用できます。
+次の14のディレクティブを使用できます。
 
-| ディレクティブ
-| --- |
-| [`x-data`](#x-data) |
-| [`x-init`](#x-init) |
-| [`x-show`](#x-show) |
-| [`x-bind`](#x-bind) |
-| [`x-on`](#x-on) |
-| [`x-model`](#x-model) |
-| [`x-text`](#x-text) |
-| [`x-html`](#x-html) |
-| [`x-ref`](#x-ref) |
-| [`x-if`](#x-if) |
-| [`x-for`](#x-for) |
-| [`x-transition`](#x-transition) |
-| [`x-cloak`](#x-cloak) |
+| ディレクティブ | 説明 |
+| --- | --- |
+| [`x-data`](#x-data) | 新しいコンポーネントのスコープを宣言します。 |
+| [`x-init`](#x-init) | コンポーネントが初期化されると式を実行します。 |
+| [`x-show`](#x-show) | 式の `true` `false` に応じて、要素の `display: none;` スタイルを切り替えます。 |
+| [`x-bind`](#x-bind) | 属性の値にJS式の結果を設定します。 |
+| [`x-on`](#x-on) | イベントリスナーを要素にアタッチします。イベント発行時に指定されたJS式を実行します。 |
+| [`x-model`](#x-model) | `x-model` は要素に「双方向データバインディング」を追加します。つまり、入力要素の値はコンポーネントデータと同期します。 |
+| [`x-text`](#x-text) | `x-text` は `x-bind` と同様に機能しますが、属性値を更新する代わりに要素の `innerText` を更新します。 |
+| [`x-html`](#x-html) | `x-text` は `x-bind` と同様に機能しますが、属性値を更新する代わりに要素の `innerHtml` を更新します。 |
+| [`x-ref`](#x-ref) | コンポーネントから生 DOM 要素を取得する便利な方法を提供します |
+| [`x-if`](#x-if) | DOMから完全に要素を削除します。`<template>` タグでネストする必要があります。 |
+| [`x-for`](#x-for) | 配列の各要素から新しいDOMを作成します。`<template>` タグでネストする必要があります。 |
+| [`x-transition`](#x-transition) | 要素の遷移の様々な段階にクラスを適用するためのディレクティブです。 |
+| [`x-spread`](#x-spread) | 再利用可能なAlpineディレクティブのオブジェクトを要素にバインドすることができます。 |
+| [`x-cloak`](#x-cloak) | この属性はAlpineの初期化時に削除されます。これは、事前に初期化されたDOMを隠すのに役立ちます。 |
 
-それと5つのマジックプロパティ：
+それと6つのマジックプロパティ：
 
-| マジックプロパティ
-| --- |
-| [`$el`](#el) |
-| [`$refs`](#refs) |
-| [`$event`](#event) |
-| [`$dispatch`](#dispatch) |
-| [`$nextTick`](#nexttick) |
+| マジックプロパティ | 説明 |
+| --- | --- |
+| [`$el`](#el) | ルートコンポーネントのDOMノードを取得できます。 |
+| [`$refs`](#refs) | コンポーネント内の `x-ref` でマークされたDOM要素を取得できます。 |
+| [`$event`](#event) | イベントリスナ内でネイティブブラウザの「Event」オブジェクトを取得できます。 |
+| [`$dispatch`](#dispatch) | `CustomEvent` を作成し、内部的に`.dispatchEvent()`を使用してディスパッチします。 |
+| [`$nextTick`](#nexttick) | AlpineがリアクティブなDOM更新を行った後に実行する式を指定できます。 |
+| [`$watch`](#watch) | コンポーネントのプロパティを「監視」し、変更があったときに指定されたコールバックを実行します。 |
 
@@ -385,2 +387,43 @@
 
+### `x-spread`
+**Example:**
+```html
+<div x-data="dropdown()">
+    <button x-spread="trigger">Open Dropdown</button>
+
+    <span x-spread="dialogue">Dropdown Contents</span>
+</div>
+
+<script>
+    function dropdown() {
+        return {
+            open: false,
+            trigger: {
+                ['@click']() {
+                    this.open = true
+                },
+            },
+            dialogue: {
+                ['x-show']() {
+                    return this.open
+                },
+                ['@click.away']() {
+                    this.open = false
+                },
+            }
+        }
+    }
+</script>
+```
+
+`x-spread` は、Alpineのバインディングを要素から再利用可能なオブジェクトに抽出することができます。
+
+オブジェクトのキーはディレクティブ(もちろん修飾子を含むことができます)として、値はコールバックとして評価されます。
+
+> 注意: x-spreadにはいくつかの注意点があります。
+> - 展開されるディレクティブが`x-for` の場合、コールバックから通常の式の文字列を返す必要があります。例えば `['x-for']() { return 'item in items' }` のようにです。
+> - `x-data` と `x-init` は "spread" オブジェクトの中では使えません。
+
+---
+
 ### `x-cloak`
@@ -509,4 +552,4 @@ **例:** `<div x-data="{}" x-cloak></div>`
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
 MIT ライセンスの下でライセンスされています。詳細については、[LICENSE.md](LICENSE.md) を参照してください。

README.ko.md

@@ -26,5 +26,5 @@ # Alpine.js
 프로덕션 환경의 경우 최신 버전의 예상치 못한 문제를 방지하기 위해 링크에 특정 버전 번호를 설정하는 것이 좋습니다.
-예를 들어 `2.8.1` 버전 사용:
+예를 들어 `2.8.2` 버전 사용:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -782,4 +782,4 @@
 
-저작권 © 2019-2020 Caleb Porzio 와 기여자들
+저작권 © 2019-2021 Caleb Porzio 와 기여자들
 
 MIT 라이센스에 따라 허가되며, 더 자세한 내용은 [LICENSE.md](LICENSE.md)를 확인하세요.

README.md

@@ -42,5 +42,5 @@ # Alpine.js
 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.1` (latest):
+For example, to use version `2.8.2` (latest):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -153,7 +153,8 @@
 
-* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
+* [Alpine Devtools](https://github.com/HugoDF/alpinejs-devtools)
+* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
+* [Alpine Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
 * [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
+* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
 * [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)
 
@@ -801,4 +802,4 @@ ### Directives
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
 Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.

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.1`:
+Por exemplo, para usar a versão `2.8.2`:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -788,4 +788,4 @@
 
-Copyright © 2019-2020 Caleb Porzio e colaboradores
+Copyright © 2019-2021 Caleb Porzio e colaboradores
 
 Licenciado sob a licença MIT, consulte [LICENSE.md](LICENSE.md) para obter detalhes.

README.ru.md

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

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.1` (son sürüm) sürümünü kullanmak için:
+Örneğin, `2.8.2` (son sürüm) sürümünü kullanmak için:
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -791,4 +791,4 @@
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
 MIT lisansı altında lisanslanmıştır, detaylar için [LICENSE.md](LICENSE.md) 'e bakınız.

README.zh-CN.md

@@ -25,5 +25,5 @@ # Alpine.js
 生产环境中，建议在链接中锁定特定版本号，以此避免新版本中的变更造成问题。
-例如，锁定版本为 `2.8.1` (最新版本):
+例如，锁定版本为 `2.8.2` (最新版本):
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -782,4 +782,4 @@
 
-Copyright © 2019-2020 Caleb Porzio 与仓库所有贡献者 版权所有
+Copyright © 2019-2021 Caleb Porzio 与仓库所有贡献者 版权所有
 
 基于 MIT 许可证开源，查看 [LICENSE.md](LICENSE.md) 获取详情。

README.zh-TW.md

@@ -25,5 +25,5 @@ # Alpine.js
 在正式環境中，建議在連結中固定特定版本，以避免新版本使功能無法使用。
-如，要使用 `2.8.1` 版則可以這樣寫：
+如，要使用 `2.8.2` 版則可以這樣寫：
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.1/dist/alpine.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
 ```
@@ -748,5 +748,5 @@
 
-Copyright © 2019-2020 Caleb Porzio and contributors
+Copyright © 2019-2021 Caleb Porzio and contributors
 
 Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
 透過 MIT 授權條款授權，詳情請參閱 [LICENSE.md](LICENSE.md)。

src/component.js

@@ -99,3 +99,3 @@ import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray, TRANSITION_CANCELLED } from './utils'
         // event listeners are registered (the mutation observer will take care of them)
-        this.initializeElements(this.$el, () => {}, componentForClone ? false : true)
+        this.initializeElements(this.$el, () => {}, componentForClone)
 
@@ -201,3 +201,3 @@ // Use mutation observer to detect new elements being added within this component at run-time.
 
-    initializeElements(rootEl, extraVars = () => {}, shouldRegisterListeners = true) {
+    initializeElements(rootEl, extraVars = () => {}, componentForClone = false) {
         this.walkAndSkipNestedComponents(rootEl, el => {
@@ -210,5 +210,5 @@ // Don't touch spawns from for loop
 
-            this.initializeElement(el, extraVars, shouldRegisterListeners)
+            this.initializeElement(el, extraVars, componentForClone ? false : true)
         }, el => {
-            el.__x = new Component(el)
+            if(! componentForClone) el.__x = new Component(el)
         })
@@ -215,0 +215,0 @@

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

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

1109176

increased by0.35%

Number of lines in readme file

803

increased by0.12%

Worsened metrics

Published versions last two months

4

decreased by-20%

No dependency changes