Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed typos in README.md #82

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed typos in README.md #82

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,14 @@ endorphin('my-component', MyComponent, {
* Шаблон (как и всё описание компонента) использует XML-подобный синтаксис. Это означает, что все тэги должны быть закрыты (`<p></p>`) либо иметь закрывающий слэш в конце (`<br />`). При этом, в отличие от 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-подобный файл со специальными тэгами, которые управляют содержимым компонента.

### Элемент

Expand All @@ -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}`.
Expand All @@ -129,7 +129,7 @@ Endorphin различает два типа тэгов: обычные HTML-э

У обычных элементов и DOM-компонентов немного отличается поведение атрибутов:

* Для обычных элементов атрибуты выводятся как обычные HTML-атрибуты, но для компонентов атрибуты — это *props*. Для удобства разработки props также отображаются как HTML-атрибуты у сгенерированного элемента. А для того, чтобы соответствовать семантике HTML, названия атрибутов конвертируются из *camelCase* в *kebab-case*: `<my-component someItems={items}>` в DevTools отобразится как `<my-component some-items="{}">`. HTML-атрибуты у DOM-компонентов носят чисто информативный характер и используются в CSS-стилизации и отладки кода, а сами данные доступны в свойстве `.props` элемента. У обычных элементов атрибуты являются источником данных, то есть влияют на работу элемента.
* Для обычных элементов атрибуты выводятся как обычные HTML-атрибуты, но для компонентов атрибуты — это *props*. Для удобства разработки props также отображаются как HTML-атрибуты у сгенерированного элемента. А для того, чтобы соответствовать семантике HTML, названия атрибутов конвертируются из *camelCase* в *kebab-case*: `<my-component someItems={items}>` в DevTools отобразится как `<my-component some-items="{}">`. HTML-атрибуты у DOM-компонентов носят чисто информативный характер и используются в CSS-стилизации и для отладки кода, а сами данные доступны в свойстве `.props` элемента. У обычных элементов атрибуты являются источником данных, то есть влияют на работу элемента.
* Для обоих типов элементов выполняется приведение значений атрибутов для отображения в HTML:
* строки и числа отображаются как есть;
* функция отображается как `𝑓`;
Expand Down Expand Up @@ -325,7 +325,7 @@ export function moveTo(x, y) {
</template>
<script>
export function checkLoad(elem) {
const onLoad = () => console.log('image loaded);
const onLoad = () => console.log('image loaded');
elem.addEventListener('load', onLoad);

return {
Expand All @@ -345,7 +345,7 @@ export function moveTo(x, y) {
</template>
<script>
export function checkLoad(elem, param) {
const onLoad = () => console.log('image loaded);
const onLoad = () => console.log('image loaded');
elem.addEventListener('load', onLoad);

return {
Expand Down Expand Up @@ -406,7 +406,7 @@ Hello &#123; greeting &#125;!

### `<e:choose>`/`<e:when>`/`<e:otherwise>` (or alias `<e:switch>`/`<e:case>`/`<e:default>`)

Аналог `if`/`else if`/`else`: внутри элемента `<e:choose>` перечисляются секции `<e:when test={...}>`, из которых выполнится первая, в которой условие атрибута `test` истинной. Если ни одно из условий не было истинным, сработает секция `<e:otherwise>`:
Аналог `if`/`else if`/`else`: внутри элемента `<e:choose>` перечисляются секции `<e:when test={...}>`, из которых выполнится первая, в которой условие атрибута `test` истинно. Если ни одно из условий не было истинным, сработает секция `<e:otherwise>`:

```html
<e:choose>
Expand Down Expand Up @@ -501,7 +501,7 @@ Hello &#123; greeting &#125;!

## Выражения

Выражения в шаблонах представляют собой обычные JavaScript-выражения но со следующими важными изменениями.
Выражения в шаблонах представляют собой обычные JavaScript-выражения, но со следующими важными изменениями.

Возможности выражений намеренно ограничены подмножеством, необходимым для *получения данных*. То есть вы можете обращаться к свойствам объектов, выполнять над ними логические и математические операции, но не сможете, например, создать класс или генератор (а оно вам надо в шаблонах?). Это сделано для того, чтобы ту же самую семантику выражений можно было повторить *на любом языке программирования*, например, Java, Python, Go и т.д.

Expand Down Expand Up @@ -657,7 +657,7 @@ ul[endo4tueq] li[endo4tueq] {

### `@media global`

Внутри `@media global` указываются правила, которым вообще не применяется никакая изоляция, то есть они применимы к *всему сайту* и выводятся как есть. Самый частый пример применения `@media global` – это создание библиотеки CSS-анимаций появления и удаления элементов.
Внутри `@media global` указываются правила, к которым вообще не применяется никакая изоляция, то есть они применимы ко *всему сайту* и выводятся как есть. Самый частый пример применения `@media global` – это создание библиотеки CSS-анимаций появления и удаления элементов.

```css
@media global {
Expand Down Expand Up @@ -691,7 +691,7 @@ Endorphin-компонент — это обычный DOM-элемент, ко

* `props` (Object) — свойства компонента, переданные снаружи. Это *внешний контракт*, по которому внешний мир общается с компонентом.
* `setProps(obj)` — обновляет свойства компонента, указанные в `obj`. Данные должны быть *иммутабельными*: если меняете свойство какого-то объекта в `props`, сам объект нужно пересоздавать.
* `state` (Object) — внутренние свойства компонента (*внутренний контракт*), которые компонент сам у тебя меняет.
* `state` (Object) — внутренние свойства компонента (*внутренний контракт*), которые компонент сам у себя меняет.
* `setState(obj)` — обновляет внутренние свойства компонента, указанные в `obj`. Как и в `setProps()`, данные должны быть иммутабельными.
* `root` (Element) — указатель на основной компонент приложения.
* `refs` (Object) — указатели на элементы шаблона.
Expand Down Expand Up @@ -737,7 +737,7 @@ export function didChange({ setState }, { enabled }) {

Доступны следующие методы жизненного цикла:

* `props()` — возвращает объект с начальными публичными свойствами компонента. Значения из этого объекта являются значениями по умолчанию, то есть если вызов `setProp()` выставит какое-то свойство в `null` или `undefined`, значение свойства будет взято из этого объекта.
* `props()` — возвращает объект с начальными публичными свойствами компонента. Значения из этого объекта являются значениями по умолчанию, то есть если вызов `setProps()` выставит какое-то свойство в `null` или `undefined`, значение свойства будет взято из этого объекта.
* `state()` — возвращает объект с начальными приватными свойствами компонента.
* `store()` — возвращает стор компонента. Если не указан, стор будет унаследован от родителя.
* `init(component)` — создан экземпляр компонента. Он ещё пустой, не содержит начальных свойств.
Expand Down Expand Up @@ -826,7 +826,7 @@ export const extend = {

<!-- my-component.html -->
<template>
Greeting it <slot>default</slot>
Greeting is <slot>default</slot>
</template>
```

Expand Down