Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
alpinejs - npm Package Compare versions
Comparing version 2.7.3 to 2.8.0
| { | ||
| "main": "dist/alpine.js", | ||
| "name": "alpinejs", | ||
| "version": "2.7.3", | ||
| "version": "2.8.0", | ||
| "repository": { | ||
@@ -6,0 +6,0 @@ "type": "git", |
@@ -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.7.3` spezifiziert: | ||
| Als Beispiel wird hier die (letzte) Version `2.8.0` spezifiziert: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -42,0 +42,0 @@ |
@@ -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.7.3` (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.0` (la última): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -29,0 +29,0 @@ |
@@ -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.7.3` (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.0` (terbaru): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -641,3 +641,3 @@ | ||
| ### Properti Sihir | ||
| ### Properti Ajaib | ||
@@ -786,3 +786,3 @@ > Dengan pengecualian `$el`, properti ajaib tidak tersedia dalam `x-data` karena komponen belum diinisialisasi. | ||
| * Menambahkan `Alpine.directive()` | ||
| * Menambahkan `Alpine.component('foo', {...})` (Dengan metode sihir `__init()`) | ||
| * Menambahkan `Alpine.component('foo', {...})` (Dengan metode ajaib `__init()`) | ||
| * Mengirim peristiwa Alpine untuk "loaded", "transition-start", dll ... ([#299](https://github.com/alpinejs/alpine/pull/299)) ? | ||
@@ -789,0 +789,0 @@ * Menghapus "object" (dan array) sintaks dari `x-bind:class="{ 'foo': true }"` ([#236](https://github.com/alpinejs/alpine/pull/236) untuk menambah dukungan untuk sintaks objek untuk atribut `style`) |
@@ -17,3 +17,3 @@ # Alpine.js | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.js" defer></script> | ||
| ``` | ||
@@ -473,2 +473,34 @@ | ||
| --- | ||
| ### `$watch` | ||
| **例:** | ||
| ```html | ||
| <div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))"> | ||
| <button @click="open = ! open">開閉を切り替える</button> | ||
| </div> | ||
| ``` | ||
| マジックメソッド `$watch` を使用してコンポーネントのプロパティを「監視」することができます。上の例では、ボタンがクリックされて `open` が変更されるとコールバックが実行され、新しい値が `console.log` によって出力されます。 | ||
| ## セキュリティ | ||
| もしも脆弱性を発見した場合, [calebporzio@gmail.com]() 宛にメールを送ってください。 | ||
| Alpineでは `Function` オブジェクトを使用したカスタム実装に依存しています。この関数は `eval()` より安全ですが、Google Chromeアプリのような [CSP](https://csp.withgoogle.com/docs/strict-csp.html) が制限されている環境では使用が禁止されています。 | ||
| もしも機密データを扱う環境でAlpineを使用している場合かつ [CSP](https://csp.withgoogle.com/docs/strict-csp.html) を必要とする場合は、ポリシーに `unsafe-eval`を含める必要があります。堅牢なポリシーを設定することで、個人情報や財務情報を利用する際のユーザー保護に役立ちます。 | ||
| ポリシーはページ内すべてのスクリプトに適用されるので、Webサイトに含まれる他の外部ライブラリを信用できるかどうか慎重に検討し、 `eval()` 関数を使用したり、DOMを操作して悪意あるコードをページに注入したりするクロスサイトスクリプティング脆弱性を防ぐことが重要です。 | ||
| ## V3 ロードマップ | ||
| * Vueと互換性を持たせるために `x-ref` から `ref` に変更する？ | ||
| * `Alpine.directive()` を追加する | ||
| * `Alpine.component('foo', {...})` ( `__init()` マジックメソッドと一緒に) を追加する | ||
| * "loaded"や"transition-start"のようなイベントを追加する ([#299](https://github.com/alpinejs/alpine/pull/299)) ？ | ||
| * オブジェクトや配列を `x-bind:class="{ 'foo': true }"` から削除する([#236](https://github.com/alpinejs/alpine/pull/236) では `style` 属性をサポートしようとしている) | ||
| * `x-for` の性能を改善する ([#165](https://github.com/alpinejs/alpine/pull/165)) | ||
| * 「深い監視」をV3で追加する ([#294](https://github.com/alpinejs/alpine/pull/294)) | ||
| * `$el` ショートカットを追加する | ||
| * `@click.away` から `@click.outside` に変更する？ | ||
| ## ライセンス | ||
@@ -475,0 +507,0 @@ |
@@ -26,2 +26,4 @@ # Alpine.js | ||
| | Spanish | [**Documentación en Español**](./README.es.md) | | ||
| | Turkish | [**Türkçe Dokümantasyon**](./README.tr.md) | | ||
| | Français | [**Documentation en Français**](./README.fr.md) | | ||
@@ -38,5 +40,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.7.3` (latest): | ||
| For example, to use version `2.8.0` (latest): | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -317,3 +319,3 @@ | ||
| `x-on` attaches an event listener to the element it's declared on. When that event is emitted, the JavaScript expression set as its value is executed. | ||
| `x-on` attaches an event listener to the element it's declared on. When that event is emitted, the JavaScript expression set as its value is executed. You can use `x-on` with any event available for the element you're adding the directive on, for a full list of events, see [the Event reference on MDN](https://developer.mozilla.org/en-US/docs/Web/Events) for a list of possible values. | ||
@@ -320,0 +322,0 @@ If any data is modified in the expression, other element attributes "bound" to this data, will be updated. |
@@ -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.7.3`: | ||
| Por exemplo, para usar a versão `2.8.0`: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -32,0 +32,0 @@ |
192
README.ru.md
@@ -7,3 +7,3 @@ # Alpine.js | ||
| Alpine.js предлагает вам реактивность и декларативность таких больших фреймворков, как Vue или React, но за значительно меньшую цену. | ||
| Alpine.js предоставляет реактивность и декларативность как в больших фреймворках вроде Vue или React, но с меньшими затратами. | ||
@@ -14,3 +14,3 @@ Вы сможете использовать обычный DOM, при этом изменяя поведение по своему усмотрению. | ||
| > Замечание: синтаксис Alpine.js почти полностью заимствован из [Vue](https://vuejs.org/) (а, соответственно, и из [Angular](https://angularjs.org/)). Я безмерно благодарен разработчикам этих инструментов за тот вклад, который они внесли в Web. | ||
| > Замечание: синтаксис Alpine.js почти полностью заимствован из [Vue](https://ru.vuejs.org/) (а, соответственно, и из [Angular](https://angularjs.org/)). Я безмерно благодарен разработчикам этих инструментов за тот вклад, который они внесли в Web. | ||
@@ -26,6 +26,6 @@ ## Установка | ||
| Для продакшн-окружения, рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий. | ||
| Например, чтобы использовать версию `2.7.3`: | ||
| Для рабочего окружения рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий. | ||
| Например, чтобы использовать версию `2.8.0`: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -49,10 +49,10 @@ | ||
| Паттерн, использующийся выше, называется [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Он позволяет автоматически загружать современный бандл в современных браузерах, а в IE11 и других устаревших браузерах – бандл для IE11. | ||
| Паттерн, использующийся выше, называется [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Он позволяет автоматически загружать современный пакет в современных браузерах, а в IE11 и других устаревших браузерах – пакет для IE11. | ||
| ## Использование | ||
| *Дропдаун/Модальное окно* | ||
| *Выпадающий список/Модальное окно* | ||
| ```html | ||
| <div x-data="{ open: false }"> | ||
| <button @click="open = true">Открыть дропдаун</button> | ||
| <button @click="open = true">Открыть</button> | ||
@@ -63,3 +63,3 @@ <ul | ||
| > | ||
| Содержимое дропдаун | ||
| Содержимое | ||
| </ul> | ||
@@ -80,4 +80,4 @@ </div> | ||
| Alpine.js можно использовать и для более серьезных выражений: | ||
| *Предзагрузка HTML-содержания дропдауна при наведении мыши* | ||
| Alpine.js можно использовать и для более серьезных выражений. Например, *предзагрузка HTML-содержимого при наведении мыши*. | ||
| ```html | ||
@@ -92,3 +92,3 @@ <div x-data="{ open: false }"> | ||
| @click="open = true" | ||
| >Показать дропдаун</button> | ||
| >Показать</button> | ||
@@ -118,5 +118,5 @@ <div x-ref="dropdown" x-show="open" @click.away="open = false"> | ||
| | [`x-for`](#x-for) | Создает новые DOM узлы для каждого элемента в массиве. Должна использоваться в теге `<template>`. | | ||
| | [`x-transition`](#x-transition) | Директивы для добавления классов различным стадиям перехода (transition) элемента. | | ||
| | [`x-spread`](#x-spread) | Позволяет вам привязывать объект с директивами Alpine к элементам, улучшая переиспользуемость. | | ||
| | [`x-cloak`](#x-cloak) | Удаляется при инициализации Alpine. Полезна для скрытия DOM до инициализации. | | ||
| | [`x-transition`](#x-transition) | Директивы для добавления css-классов различным стадиям перехода (transition) элемента. | | ||
| | [`x-spread`](#x-spread) | Позволяет привязывать объект с директивами Alpine к элементам, улучшая повторное использование кода. | | ||
| | [`x-cloak`](#x-cloak) | Атрибут удаляется после инициализации Alpine. Используется для скрытия элементов до DOM инициализации. | | ||
@@ -141,14 +141,10 @@ И 6 магических свойств (magic properties): | ||
| ## VIP контрибьюторы | ||
| ## Сообщество проекта | ||
| <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>(Создатель)</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](https://alpinejs.codewithhugo.com/newsletter/) | ||
| * [Spruce (глобальные данные между компонентами)](https://github.com/ryangjchandler/spruce) | ||
| * [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter) | ||
| * [Alpine Magic Helpers (полезные хелперы для Alpine)](https://github.com/KevinBatdorf/alpine-magic-helpers) | ||
| * [Awesome Alpine (ссылки на прочие проекты об Alpine)](https://github.com/ryangjchandler/awesome-alpine) | ||
| ### Директивы | ||
@@ -168,5 +164,5 @@ | ||
| **Извлечение логики компонента** | ||
| **Задание логики компонента отдельной функцией** | ||
| Вы можете извлечь данные (и поведение) в переиспользуемые функции: | ||
| Можно получить данные (и задать поведение компонента) в повторно используемых функциях: | ||
@@ -194,3 +190,3 @@ ```html | ||
| > **Для пользователей бандлеров**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать области видимости бандлера, а не `window`). | ||
| > **Для пользователей бандлеров (bundler)**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать области видимости бандлера, а не `window`). | ||
@@ -213,5 +209,5 @@ | ||
| Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), вы можете передать `x-init` колбэк, и он выполнит его после инициализации: | ||
| Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), то можете передать в `x-init` колбэк, и он выполнит его после инициализации: | ||
| `x-init="() => { // здесь уже есть доступ к стейту после инициализации DOM // }"` | ||
| `x-init="() => { // здесь уже есть доступ к состоянию после инициализации DOM // }"` | ||
@@ -229,3 +225,3 @@ --- | ||
| `x-show.transition` – удобный API для добавления `x-show` CSS-переходов. | ||
| `x-show.transition` – удобный API для добавления к `x-show` CSS-переходов (transitions). | ||
@@ -276,3 +272,3 @@ ```html | ||
| Для классов необходимо передавать объект, где ключи – это имена классов, а значения – логические выражения, которые определяют применяются эти классы или нет. | ||
| Для css-классов необходимо передавать объект, где ключи – это имена классов, а значения – логические выражения, которые определяют применяются эти классы или нет. | ||
@@ -304,2 +300,9 @@ Например: | ||
| > Замечание: Если нужно вернуть логическое (true/false) значение атрибута в виде текста, например для `aria-*`, используйте метод `.toString()`. Например `:aria-expanded="isOpen.toString()"` вернёт строку `true` или `false`в зависимости от значения `isOpen`. | ||
| **Модификатор `.camel`** | ||
| **Пример:** `<svg x-bind:view-box.camel="myVar">` | ||
| Модификатор `camel` позволяет задать имя атрибута, которое будет преобразовано к синтаксису "camelCase". В данном примере значение будет присвоено атрибуту `viewBox`, а не `view-box`. | ||
| --- | ||
@@ -315,7 +318,7 @@ | ||
| `x-on` цепляет слушатель события на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение. | ||
| `x-on` цепляет слушатель события на элемент, в котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение. Можно использовать `x-on` с любым событием. См. полный список событий в [документации MDN](https://developer.mozilla.org/en-US/docs/Web/Events). | ||
| Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, будут обновлены. | ||
| Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, также будут обновлены. | ||
| > Замечание: Вы также можете задать имя JS-функции. | ||
| > Замечание: Также можно задать имя JS-функции. | ||
@@ -342,3 +345,3 @@ **Пример:** `<button x-on:click="myFunction"></button>` | ||
| Это полезно для скрытия дропдаунов или модальных окон, когда пользователь кликает в другом месте. | ||
| Это полезно для скрытия дропдаунов или модальных окон, когда пользователь кликает в другом месте экрана. | ||
@@ -355,3 +358,3 @@ **Модификатор `.prevent`** | ||
| При добавлении `.stop` обработчик вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`. | ||
| При добавлении `.stop` обработчик вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки к внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`. | ||
@@ -362,3 +365,3 @@ **Модификатор `.self`** | ||
| При добавлении `.self` обработчик события сработает, только если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки внешнему `<div>`, **не** вызовет обработчик. | ||
| При добавлении `.self` обработчик события сработает, только если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки к внешнему `<div>`, **не** вызовет его обработчик. | ||
@@ -369,3 +372,3 @@ **Модификатор `.window`** | ||
| При добавлении `.window` прослушиватель события установится не на узел DOM, на котором был вызван, а на глобальный объект window. Это полезно, когда нужно изменить состояние компонента при изменении чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, мы закроем модальное окно/дропдаун, иначе сохраним то же состояние. | ||
| При добавлении `.window` слушатель события установится не на узел DOM, на котором был вызван, а на глобальный объект window. Это используется, когда нужно изменить состояние компонента при изменении чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, модальное окно закроется. | ||
@@ -378,4 +381,10 @@ >Замечание: Также можно использовать модификатор `.document` для добавления слушателей к `document`. | ||
| При добавлении `.once` обработчик события будет вызван лишь единожды. Это полезно для вещей, которые вы хотите сделать только один раз, например, загрузка данных и т.п. | ||
| При добавлении `.once` обработчик события будет вызван лишь единожды. Это полезно для вещей, которые нужно сделать только один раз, например, загрузка данных и т.п. | ||
| **Модификатор `.passive`** | ||
| **Пример:** `<button x-on:mousedown.passive="interactive = true"></button>` | ||
| Добавление модификатора `.passive` к слушателю события сделает его пассивным. Это значит, что `preventDefault()` не будет работать ни с какими обрабатываемыми событиями. Это может помочь например с производительностью при прокрутке на сенсорных устройствах. | ||
| **Модификатор `.debounce`** | ||
@@ -385,3 +394,3 @@ | ||
| Модификатор `debounce` позволяет вам избавиться от ложных повторных вызовов обработчика события. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов к вызову, будет вызван последний вызов. | ||
| Модификатор `debounce` позволяет избавиться от ложных повторных вызовов обработчика события. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов, будет вызван последний вызов. | ||
@@ -397,2 +406,8 @@ Время ожидания по умолчанию 250 миллисекунд. | ||
| **Модификатор `.camel`** | ||
| **Пример:** `<input x-on:event-name.camel="doSomething()">` | ||
| Модификатор `camel` позволяет задать событие, которое будет преобразовано к синтаксису "camelCase". В данном примере слушатель будет добавлен к событию `eventName`. | ||
| --- | ||
@@ -407,9 +422,13 @@ | ||
| > Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых полях ввода, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://vuejs.org/v2/guide/forms.html). | ||
| > Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых полях ввода, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://ru.vuejs.org/v2/guide/forms.html). | ||
| **Модификатор `.number`** | ||
| **Пример:** `<input x-model.number="age">` | ||
| Модификатор `number` преобразует входное значение в число. Если оно не может быть преобразовано, то возвращается исходное значение. | ||
| **Модификатор `.debounce`** | ||
| **Пример:** `<input x-model.debounce="search">` | ||
| Модификатор `debounce` позволяет вам избавиться от ложных повторных изменений значения. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов к вызову, будет вызван последний вызов. | ||
| Модификатор `debounce` позволяет избавиться от ложных повторных изменений значения. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов, будет вызван последний вызов. | ||
@@ -456,5 +475,5 @@ Время ожидания по умолчанию 250 миллисекунд. | ||
| Это удобная альтернатива установке id и использованию повсюду `document.querySelector`. | ||
| Это удобная альтернатива установке id и использования `document.querySelector`. | ||
| > Замечание: при необходимости вы также можете привязывать x-ref динамические значения: `<span :x-ref="item.id"></span>`. | ||
| > Замечание: при необходимости также можно привязывать x-ref динамические значения: `<span :x-ref="item.id"></span>`. | ||
@@ -474,2 +493,4 @@ --- | ||
| > Замечание: При использовании `template` в тэге `svg`, используйте [полифил](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538). Он должен быть запущен до инициализации Alpine.js. | ||
| --- | ||
@@ -497,7 +518,22 @@ | ||
| ``` | ||
| Если нужно получить доступ к массиву данных (collection) внутри цикла, используйте такой синтаксис: | ||
| ```html | ||
| <template x-for="(item, index, collection) in items" :key="index"> | ||
| <!-- Можно ссылаться на массив "collection" --> | ||
| <!-- Текущий элемент --> | ||
| <div x-text="item"></div> | ||
| <!-- или так --> | ||
| <div x-text="collection[index]"></div> | ||
| <!-- Предыдущий элемент --> | ||
| <div x-text="collection[index - 1]"></div> | ||
| </template> | ||
| ``` | ||
| > Замечание: Внутри тега `<template></template>` с `x-for` должен быть лишь один корневой элемент. | ||
| > Замечание: При использовании `template` в тэге `svg`, используйте [полифил](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538). Он должен быть запущен до инициализации Alpine.js. | ||
| #### Вложенные `x-for` | ||
| Вы можете вкладывать `x-for` друг в друга, но вы ДОЛЖНЫ оборачивать каждый цикл в какой-нибудь элемент. Например: | ||
| Можно вкладывать `x-for` друг в друга, но НУЖНО оборачивать каждый цикл в какой-нибудь элемент. Например: | ||
@@ -514,2 +550,12 @@ ```html | ||
| #### Количество итераций | ||
| Alpine поддерживает синтаксис `i in n`, где `n` число, указывающее на количество итераций цикла. | ||
| ```html | ||
| <template x-for="i in 10"> | ||
| <span x-text="i"></span> | ||
| </template> | ||
| ``` | ||
| --- | ||
@@ -548,3 +594,3 @@ | ||
| Они ведут себя абсолютно так же, как transition-директивы во Vue, не считая того, что у них другие, более понятные названия: | ||
| Они ведут себя абсолютно так же, как transition-директивы во VueJS, но у них более понятные названия: | ||
@@ -565,6 +611,6 @@ | Директива | Описание | | ||
| ```html | ||
| <div x-data="dropdown"> | ||
| <button x-spread="trigger">Открыть дропдаун</button> | ||
| <div x-data="dropdown()"> | ||
| <button x-spread="trigger">Открыть</button> | ||
| <span x-spread="dialogue">Содержимое дропдауна</span> | ||
| <span x-spread="dialogue">Содержимое</span> | ||
| </div> | ||
@@ -594,3 +640,3 @@ | ||
| `x-spread` позволяем вам вынести привязки Alpine из элементов в переиспользуемый объект. | ||
| `x-spread` позволяет вынести привязки Alpine из элементов в объект (он может повторно использоваться в других компонентах). | ||
@@ -601,2 +647,4 @@ Ключи объекта – это директивы (любые, в том числе и с модификаторами), а значения – колбэки, с которыми будет работать Alpine. | ||
| > Замечание: Директивы `x-data` и `x-init` не могут использоваться в "spread"-объекте. | ||
| --- | ||
@@ -607,3 +655,3 @@ | ||
| `x-cloak` атрибуты удаляются с элементов, когда Alpine проинициализирован. Это полезно для скрытия DOM до его инициализации. Для этого необходимо добавить следующие глобальные стили: | ||
| Атрибуты `x-cloak` удаляются с элементов, когда Alpine будет проинициализирован. Это полезно для скрытия элемента до построения DOM. Для использования `x-cloak` необходимо добавить следующие css-правила: | ||
@@ -630,10 +678,4 @@ ```html | ||
| `$el` – магическое свойство, которое используется для получения корневого компонента DOM-узла. | ||
| `$el` – магическое свойство, которое используется для получения корневого DOM-узла компонента. | ||
| > Замечание: Свойство $event доступно только в DOM-выражениях. | ||
| Если вам нужен доступ к $event внутри JS-функции, вы можете передать его напрямую: | ||
| `<button x-on:click="myFunction($event)"></button>` | ||
| ### `$refs` | ||
@@ -647,3 +689,3 @@ **Пример:** | ||
| `$refs` – это магическое свойство, которое используется для получения DOM-элементов внутри компонента, помеченных `x-ref`. Это полезно, когда вам нужно вручную манипулировать элементами DOM. | ||
| `$refs` – это магическое свойство, которое используется для получения DOM-элементов внутри компонента, помеченных `x-ref`. Оно используется, когда нужно вручную манипулировать элементами DOM. | ||
@@ -660,2 +702,8 @@ --- | ||
| > Замечание: свойство $event доступно только в DOM-выражениях. | ||
| Если нужно получить доступ к $event внутри функции JavaScript, вы можете передать его как параметр: | ||
| `<button x-on:click="myFunction($event)"></button>` | ||
| --- | ||
@@ -667,3 +715,3 @@ | ||
| <div @custom-event="console.log($event.detail.foo)"> | ||
| <button @click="$dispatch('custom-event', { foo: 'bar' })"> | ||
| <button @click="$dispatch('custom-event', { foo: 'bar' })"></button> | ||
| <!-- После нажатия кнопки выводит в консоль "bar" --> | ||
@@ -675,5 +723,5 @@ </div> | ||
| Когда вам нужно перехватить событие, вызванное из узла на том же уровне вложенности, вам нужно использовать модификатор [`.window`](https://github.com/alpinejs/alpine/blob/master/README.ru.md#x-on): | ||
| Когда требуется перехватить событие, вызванное из узла на том же уровне вложенности, можно использовать модификатор [`.window`](https://github.com/alpinejs/alpine/blob/master/README.ru.md#x-on): | ||
| **Неправильный пример:** | ||
| **Пример неверного использования:** | ||
@@ -683,3 +731,3 @@ ```html | ||
| <span @custom-event="console.log($event.detail.foo)"></span> | ||
| <button @click="$dispatch('custom-event', { foo: 'bar' })"> | ||
| <button @click="$dispatch('custom-event', { foo: 'bar' })"></button> | ||
| <div> | ||
@@ -690,3 +738,3 @@ ``` | ||
| **Диспатч для компонентов** | ||
| **Диспетчеризация для компонентов** | ||
@@ -700,7 +748,7 @@ Вы также можете использовать предыдущую технику для общения компонентов друг с другом: | ||
| <button x-data @click="$dispatch('custom-event', 'Hello World!')"> | ||
| <button x-data @click="$dispatch('custom-event', 'Hello World!')"></button> | ||
| <!-- При нажатии в консоль выведется "Hello World!". --> | ||
| ``` | ||
| `$dispatch` – это сокращение для создания `CustomEvent` и его вызова (диспатча) с помощью `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы узнать больше о системе, лежащей в основе `CustomEvent` в браузерах. | ||
| `$dispatch` – это удобное сокращение для создания `CustomEvent` (пользовательские события) и их вызова с помощью `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы больше узнать о системе, лежащей в основе `CustomEvent` в браузерах. | ||
@@ -714,4 +762,4 @@ Любые данные, переданные как второй параметр в `$dispatch('some-event', { some: 'data' })`, становятся доступны через свойство "detail" события: `$event.detail.some`. Добавление событию пользовательских данных через свойство `.detail` – стандартная практика для `CustomEvent` в браузерах. [Подробнее здесь](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail). | ||
| <span x-model="foo"> | ||
| <button @click="$dispatch('input', 'baz')"> | ||
| <!-- После нажатия кнопки, `x-model` перехватит всплывающее события "input", и обновит foo на "baz". --> | ||
| <button @click="$dispatch('input', 'baz')"></button> | ||
| <!-- После нажатия кнопки, `x-model` перехватит всплывающее событие "input" (oninput), и обновит foo на "baz". --> | ||
| </span> | ||
@@ -723,3 +771,3 @@ </div> | ||
| Если вам нужен доступ к $dispatch внутри JS-функции, вы можете передать его напрямую: | ||
| Если нужен доступ к $dispatch внутри JavaScript-функции, вы можете передать его напрямую: | ||
@@ -780,4 +828,4 @@ `<button x-on:click="myFunction($dispatch)"></button>` | ||
| Copyright © 2019-2020 Caleb Porzio and контрибьюторы | ||
| Copyright © 2019-2021 Caleb Porzio и другие | ||
| Лицензировано по лицензии MIT, смотрите [LICENSE.md](LICENSE.md) для подробностей. |
@@ -25,5 +25,5 @@ # Alpine.js | ||
| 在正式環境中，建議在連結中固定特定版本，以避免新版本使功能無法使用。 | ||
| 如，要使用 `2.7.3` 版則可以這樣寫： | ||
| 如，要使用 `2.8.0` 版則可以這樣寫： | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script> | ||
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script> | ||
| ``` | ||
@@ -452,3 +452,3 @@ | ||
| > 備註：若有需要也可以在 x-ref` 上繫結動態數值：`<span :x-ref="item.id"></span>`。 | ||
| > 備註：若有需要也可以在 `x-ref` 上繫結動態數值：`<span :x-ref="item.id"></span>`。 | ||
@@ -541,3 +541,3 @@ --- | ||
| Alpine 中提供了 6 中不同的變換指示詞，可用於在元素變換的「hidden 隱藏」與「shown 顯示」狀態間的各個階段套用 Class。這些指示詞可用在 `x-show` **與** `x-if` 上。 | ||
| Alpine 中提供了 6 種不同的變換指示詞，可用於在元素變換的「hidden 隱藏」與「shown 顯示」狀態間的各個階段套用 Class。這些指示詞可用在 `x-show` **與** `x-if` 上。 | ||
@@ -544,0 +544,0 @@ 這些行為都與 VueJS 的 transition 指示詞很類似，但不同的地方則是使用了不同的名稱： |
@@ -31,3 +31,3 @@ import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, convertClassStringToArray, TRANSITION_CANCELLED } from './utils' | ||
| this.unobservedData = componentForClone ? componentForClone.getUnobservedData() : saferEval(dataExpression, dataExtras) | ||
| this.unobservedData = componentForClone ? componentForClone.getUnobservedData() : saferEval(el, dataExpression, dataExtras) | ||
@@ -45,3 +45,3 @@ /* IE11-ONLY:START */ | ||
| Object.entries(Alpine.magicProperties).forEach(([name, callback]) => { | ||
| Object.defineProperty(this.unobservedData, `$${name}`, { get: function () { return callback(canonicalComponentElementReference) } }); | ||
| Object.defineProperty(this.unobservedData, `$${name}`, { get: function () { return callback(canonicalComponentElementReference, this.$el) } }); | ||
| }) | ||
@@ -79,3 +79,3 @@ /* IE11-ONLY:END */ | ||
| Object.entries(Alpine.magicProperties).forEach(([name, callback]) => { | ||
| Object.defineProperty(this.unobservedData, `$${name}`, { get: function () { return callback(canonicalComponentElementReference) } }); | ||
| Object.defineProperty(this.unobservedData, `$${name}`, { get: function () { return callback(canonicalComponentElementReference, this.$el) } }); | ||
| }) | ||
@@ -357,3 +357,3 @@ /* MODERN-ONLY:END */ | ||
| evaluateReturnExpression(el, expression, extraVars = () => {}) { | ||
| return saferEval(expression, this.$data, { | ||
| return saferEval(el, expression, this.$data, { | ||
| ...extraVars(), | ||
@@ -365,3 +365,3 @@ $dispatch: this.getDispatchFunction(el), | ||
| evaluateCommandExpression(el, expression, extraVars = () => {}) { | ||
| return saferEvalNoReturn(expression, this.$data, { | ||
| return saferEvalNoReturn(el, expression, this.$data, { | ||
| ...extraVars(), | ||
@@ -398,3 +398,4 @@ $dispatch: this.getDispatchFunction(el), | ||
| if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') { | ||
| const rawData = saferEval(mutations[i].target.getAttribute('x-data') || '{}', { $el: this.$el }) | ||
| const xAttr = mutations[i].target.getAttribute('x-data') || '{}'; | ||
| const rawData = saferEval(this.$el, xAttr, { $el: this.$el }) | ||
@@ -401,0 +402,0 @@ Object.keys(rawData).forEach(key => { |
@@ -65,3 +65,3 @@ import { arrayUnique, checkedAttrLooseCompare, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils' | ||
| const originalClasses = el.__x_original_classes || [] | ||
| const newClasses = convertClassStringToArray(value) | ||
| const newClasses = value ? convertClassStringToArray(value) : [] | ||
| el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' ')) | ||
@@ -68,0 +68,0 @@ } |
@@ -116,2 +116,5 @@ import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate, isNumeric } from '../utils' | ||
| // If we are already past the x-for generated elements, we don't need to look ahead. | ||
| if (nextEl.__x_for_key === undefined) return | ||
| // If the the key's DO match, no need to look ahead. | ||
@@ -118,0 +121,0 @@ if (nextEl.__x_for_key === currentKey) return nextEl |
@@ -68,40 +68,63 @@ | ||
| export function saferEval(expression, dataContext, additionalHelperVariables = {}) { | ||
| if (typeof expression === 'function') { | ||
| return expression.call(dataContext) | ||
| const handleError = (el, expression, error) => { | ||
| console.warn(`Alpine Error: "${error}"\n\nExpression: "${expression}"\nElement:`, el); | ||
| if (! isTesting()) { | ||
| throw error; | ||
| } | ||
| return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var __alpine_result; with($data) { __alpine_result = ${expression} }; return __alpine_result`))( | ||
| dataContext, ...Object.values(additionalHelperVariables) | ||
| ) | ||
| } | ||
| export function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) { | ||
| if (typeof expression === 'function') { | ||
| return Promise.resolve(expression.call(dataContext, additionalHelperVariables['$event'])) | ||
| function tryCatch(cb, { el, expression }) { | ||
| try { | ||
| const value = cb(); | ||
| return value instanceof Promise | ||
| ? value.catch((e) => handleError(el, expression, e)) | ||
| : value; | ||
| } catch (e) { | ||
| handleError(el, expression, e) | ||
| } | ||
| } | ||
| let AsyncFunction = Function | ||
| export function saferEval(el, expression, dataContext, additionalHelperVariables = {}) { | ||
| return tryCatch(() => { | ||
| if (typeof expression === 'function') { | ||
| return expression.call(dataContext) | ||
| } | ||
| /* MODERN-ONLY:START */ | ||
| AsyncFunction = Object.getPrototypeOf(async function(){}).constructor | ||
| /* MODERN-ONLY:END */ | ||
| // For the cases when users pass only a function reference to the caller: `x-on:click="foo"` | ||
| // Where "foo" is a function. Also, we'll pass the function the event instance when we call it. | ||
| if (Object.keys(dataContext).includes(expression)) { | ||
| let methodReference = (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`))( | ||
| return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var __alpine_result; with($data) { __alpine_result = ${expression} }; return __alpine_result`))( | ||
| dataContext, ...Object.values(additionalHelperVariables) | ||
| ) | ||
| }, { el, expression }) | ||
| } | ||
| if (typeof methodReference === 'function') { | ||
| return Promise.resolve(methodReference.call(dataContext, additionalHelperVariables['$event'])) | ||
| } else { | ||
| return Promise.resolve() | ||
| export function saferEvalNoReturn(el, expression, dataContext, additionalHelperVariables = {}) { | ||
| return tryCatch(() => { | ||
| if (typeof expression === 'function') { | ||
| return Promise.resolve(expression.call(dataContext, additionalHelperVariables['$event'])) | ||
| } | ||
| } | ||
| return Promise.resolve((new AsyncFunction(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))( | ||
| dataContext, ...Object.values(additionalHelperVariables) | ||
| )) | ||
| let AsyncFunction = Function | ||
| /* MODERN-ONLY:START */ | ||
| AsyncFunction = Object.getPrototypeOf(async function(){}).constructor | ||
| /* MODERN-ONLY:END */ | ||
| // For the cases when users pass only a function reference to the caller: `x-on:click="foo"` | ||
| // Where "foo" is a function. Also, we'll pass the function the event instance when we call it. | ||
| if (Object.keys(dataContext).includes(expression)) { | ||
| let methodReference = (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`))( | ||
| dataContext, ...Object.values(additionalHelperVariables) | ||
| ) | ||
| if (typeof methodReference === 'function') { | ||
| return Promise.resolve(methodReference.call(dataContext, additionalHelperVariables['$event'])) | ||
| } else { | ||
| return Promise.resolve() | ||
| } | ||
| } | ||
| return Promise.resolve((new AsyncFunction(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))( | ||
| dataContext, ...Object.values(additionalHelperVariables) | ||
| )) | ||
| }, { el, expression }) | ||
| } | ||
@@ -124,3 +147,3 @@ | ||
| if (spreadDirective) { | ||
| let spreadObject = saferEval(spreadDirective.expression, component.$data) | ||
| let spreadObject = saferEval(el, spreadDirective.expression, component.$data) | ||
@@ -127,0 +150,0 @@ // Add x-spread directives to the pile of existing directives. |
@@ -487,2 +487,20 @@ import Alpine from 'alpinejs' | ||
| test('undefined class binding resolves to empty string', async () => { | ||
| jest.spyOn(window, 'setTimeout').mockImplementation((callback,time) => { | ||
| callback() | ||
| }); | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ errorClass: (hasError) => { if (hasError) { return 'red' } } }"> | ||
| <span id="error" x-bind:class="errorClass(true)">should be red</span> | ||
| <span id="empty" x-bind:class="errorClass(false)">should be empty</span> | ||
| </div> | ||
| ` | ||
| await expect(Alpine.start()).resolves.toBeUndefined() | ||
| expect(document.querySelector('#error').classList.value).toEqual('red') | ||
| expect(document.querySelector('#empty').classList.value).toEqual('') | ||
| }) | ||
| test('.camel modifier correctly sets name of attribute', async () => { | ||
@@ -489,0 +507,0 @@ document.body.innerHTML = ` |
@@ -380,2 +380,26 @@ import Alpine from 'alpinejs' | ||
| test('sibling x-for do not interact with each other', async () => { | ||
| document.body.innerHTML = ` | ||
| <div x-data="{ foos: [1], bars: [1, 2] }"> | ||
| <template x-for="foo in foos"> | ||
| <h1 x-text="foo"></h1> | ||
| </template> | ||
| <template x-for="bar in bars"> | ||
| <h2 x-text="bar"></h2> | ||
| </template> | ||
| <button @click="foos = [1, 2];bars = [1, 2, 3]">Change</button> | ||
| </div> | ||
| ` | ||
| Alpine.start() | ||
| await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(1) }) | ||
| await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(2) }) | ||
| document.querySelector('button').click() | ||
| await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) }) | ||
| await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(3) }) | ||
| }) | ||
| test('nested x-for event listeners', async () => { | ||
@@ -382,0 +406,0 @@ document._alerts = [] |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by9.73%
990683
- Number of package files
- increased by4.55%
69
- Lines of code
- increased by1.59%
14243
- Number of lines in readme file
- increased by0.25%
795
No dependency changes