Это серия постов, документирующих разработку библиотеки simplr-forms.

Первоначально опубликовано 26 апреля.

Состояние ума

🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏

Тааак... Что случилось?

После довольно большой работы первый рабочий процесс e2e теперь разветвляется. Не тестовый, но рабочий пример браузера!

Как это выглядит?

Технический. Никаких стилей, ничего, только два текстовых поля и форма. И вы можете отправить форму (эта большая для библиотеки 😄).

А если бы мы говорили код?

Правильно. Итак, захватывающая часть заключается в том, что все работает по плану:

Декларативный и интуитивно понятный способ создания форм.

Все реагирующее приложение, включая форму, выглядит так:

import * as React from "react";
import * as ReactDOM from "react-dom";
import "tslib";
import { FormStore } from "simplr-forms-core/stores";
import { Form, Text, Submit } from "simplr-forms-dom";
export class MyForm extends React.Component<{}, { formId: string }> {
    protected onSubmit: any = (event: React.FormEvent<HTMLFormElement>, store: FormStore) => {
        console.log("Submitting...");
        console.log(store.ToObject());
    };
render() {
        return <Form onSubmit={this.onSubmit}>
            <label>
                Full name:
                <Text name="FullName" />
            </label>
            <label>
                Email:
                <Text name="Email" />
            </label>
            <Submit>Submit</Submit>
        </Form>;
    }
}
ReactDOM.render(<MyForm />, document.getElementById("react-root"));

При рендеринге это простая форма:

И даже рендеринг html настолько прост, насколько это возможно:

Это не «как» plain HTML form. Это простая форма HTML.

Но когда он заполнен и отправлен, он печатает это в консоли:

Ты уже видишь? 😄

Декларативная форма с интуитивно понятным, почти дефолтным onSubmit, где получение объекта всей формы сводится к следующему:

store.ToObject()

Единственное отличие от «по умолчанию» onSubmit заключается в том, что вы получаете FormStore в качестве второго параметра обработчика. И это только для вашего удобства. Вы можете взять его несколькими способами, если хотите.

И то, что дает вам FormStore, — это простота. Метод ToObject() заботится о том, чтобы узнать, как преобразовать данные в хранилище в простой объект. Вам не нужно заботиться ни о каких ссылках, значениях, ничего. Назовите свои поля с помощью .. Ну, name. И вы готовы идти!

Легкий? Супер легко!

Это восхитительно? Но... Где все остальное?

Этот простой пример показывает, что работает e2e в данный момент, но даже здесь довольно много вещей обрабатывается за кулисами:

  • Форма регистрируется с помощью FormStoresHandler и инициируется FormStore.
  • formId не дается, поэтому он генерируется для вас автоматически.
  • Оба поля text зарегистрированы в одном и том же хранилище с одним и тем же сгенерированным formId, и вам не нужно ничего делать!
  • Используемая здесь кнопка Submit взята из simplr-forms-dom, но в этом примере не используется пользовательская логика. Это в основном ваш <button type="submit">Submit</button> по умолчанию, и это может быть один. Потому что на самом деле это так, как вы можете видеть в приведенном выше HTML 👍 Никаких пользовательских обработчиков кликов, ничего. Обычная кнопка типа submit.
  • Все за кулисами обновляет данные в FormStore для вас, и вы уже можете слушать действия, исходящие от FormStore, и делать то, что вам нужно соответственно.

Кроме того, я почти уверен, что Modifiers и Normalizers уже будут работать, но пока не проверял. Validators с пакетом simplr-validation тоже делают то, что должны (спасибо Martynas за это).

О, хорошо. С момента последнего поста почти две недели назад Мартинас уже закончил начальную версию simplr-validation, и мы скоро протестируем ее и подготовим для нее формы.

Таким образом, валидация тесно связана с формами, а не экстернализована…

Нет! Ну да, но нет! 😄

Он связан только общедоступным API, который предоставляет simplr-forms-core, и все.

Вы уже можете создать свою собственную библиотеку проверки и просто использовать тот же общедоступный API, и все готово!

Почему я так уверен? Потому что simplr-validation делает именно это.

Потрясающий. Что дальше?

Пока мы не сможем выпустить полноценную альфу, нам нужно:

  • Наиболее часто используемые компоненты HTML, описанные в разделе simplr-forms-dom.
  • Модификаторы и нормализаторы работают.
  • Валидация работает с simplr-forms-dom.

Пока мы не сможем выпустить полноценную бета-версию, нам необходимо:

  • Все компоненты HTML, описанные в simplr-forms-dom.
  • Надежно работающий FieldsGroup.

Как только у нас будет что-то надежное, мы попросим нескольких человек проверить это. А пока, ура, первый поток e2e!

Далее в серии

Часть 4: нормализаторы и модификаторы