diff --git a/README.md b/README.md index 75e6684..9fc16a8 100644 --- a/README.md +++ b/README.md @@ -93,14 +93,14 @@ endorphin('my-component', MyComponent, { * Шаблон (как и всё описание компонента) использует XML-подобный синтаксис. Это означает, что все тэги должны быть закрыты (`

`) либо иметь закрывающий слэш в конце (`
`). При этом, в отличие от XML, можно не экранировать спецсимволы вроде `<` и `>`, а также не обязательно использовать кавычки для значений атрибутов. * Контрольные инструкции для описания динамических частей шаблона также описываются XML-тэгами, как правило, с префиксом `e:`. Динамические выражения указываются внутри фигурных скобок: `{ #count }`. Динамические значения атрибутов пишутся как `name={...}`, однако если ваш редактор/IDE не понимает такой синтаксис, можно писать `name="{...}"`. * Поведение компонента описывается в виде ES-модуля: вы экспортируете объекты и функции, которые известны Endorphin runtime. В экспортируемые функции первым аргументом *всегда* (кроме некоторых случаев с обработчиками событий) передаётся экземпляр компонента (DOM-элемент), которым можно управлять. Таким образом, Endorphin продвигает функциональный подход к описанию поведения компонента и избавляет от множества проблем с `this`. -* У компонента есть несколько источников данных: *props* (внешний контракт, передаётся в компонент снаружи), *state* (внутренний контракт, управляется самим компонентом) и *store* (данные приложения). Для удобства внутри шаблона используется используется специальный префикс для каждого источника данных: +* У компонента есть несколько источников данных: *props* (внешний контракт, передаётся в компонент снаружи), *state* (внутренний контракт, управляется самим компонентом) и *store* (данные приложения). Для удобства внутри шаблона используется специальный префикс для каждого источника данных: * Для обращения к значению из *props* достаточно написать `propName`, то есть обращаться как к глобальной переменной. * Для обращения к *state* используется префикс `#` (по аналогии с приватными свойствами классов в JS): `#stateName`. * Для обращения к *store* используется префикс `$`: `$storeName`. ## Шаблон -Как было отмечено выше, шаблон представляет из себя XML-подобный со специальными тэгами, которые управляют содержимым компонента. +Как было отмечено выше, шаблон представляет из себя XML-подобный файл со специальными тэгами, которые управляют содержимым компонента. ### Элемент @@ -115,7 +115,7 @@ endorphin('my-component', MyComponent, { * `name="value"` — значение в кавычках, можно указывать либо ординарные, либо двойные кавычки; * `name=value` — короткая запись значений, состоящих из одного слова, кавычки можно не использовать; -* `name={expr}` или `name="{expr}" — значением атрибута является результат работы выражения `expr`. +* `name={expr}` или `name="{expr}"` — значением атрибута является результат работы выражения `expr`. * `name="foo {expr} bar"` – интерполяция строк и выражений: в указанной строке значения в фигурных скобках заменяются на результат выражения. Аналогичный результат можно получить с помощью Template Strings: ```name={`foo ${expr} bar`}```. * `name` — булевое значение атрибута, аналог `name={true}`. * `{name}` — сокращённая запись вида `name={name}`, такая же запись доступна и для state и store: `{#enabled}` → `enabled={#enabled}`, `{$data}` → `data={$data}`. @@ -129,7 +129,7 @@ Endorphin различает два типа тэгов: обычные HTML-э У обычных элементов и DOM-компонентов немного отличается поведение атрибутов: -* Для обычных элементов атрибуты выводятся как обычные HTML-атрибуты, но для компонентов атрибуты — это *props*. Для удобства разработки props также отображаются как HTML-атрибуты у сгенерированного элемента. А для того, чтобы соответствовать семантике HTML, названия атрибутов конвертируются из *camelCase* в *kebab-case*: `` в DevTools отобразится как ``. HTML-атрибуты у DOM-компонентов носят чисто информативный характер и используются в CSS-стилизации и отладки кода, а сами данные доступны в свойстве `.props` элемента. У обычных элементов атрибуты являются источником данных, то есть влияют на работу элемента. +* Для обычных элементов атрибуты выводятся как обычные HTML-атрибуты, но для компонентов атрибуты — это *props*. Для удобства разработки props также отображаются как HTML-атрибуты у сгенерированного элемента. А для того, чтобы соответствовать семантике HTML, названия атрибутов конвертируются из *camelCase* в *kebab-case*: `` в DevTools отобразится как ``. HTML-атрибуты у DOM-компонентов носят чисто информативный характер и используются в CSS-стилизации и для отладки кода, а сами данные доступны в свойстве `.props` элемента. У обычных элементов атрибуты являются источником данных, то есть влияют на работу элемента. * Для обоих типов элементов выполняется приведение значений атрибутов для отображения в HTML: * строки и числа отображаются как есть; * функция отображается как `𝑓`; @@ -325,7 +325,7 @@ export function moveTo(x, y) {