Это серия постов, документирующих разработку библиотеки simplr-forms.
Первоначально опубликовано 26 апреля.
- Часть 1: Зачем мы это делаем?
- Часть 2: ядро, проверка, тестирование.
- Часть 3: Первый поток e2e, FormStore.ToObject()
- Часть 4: нормализаторы и модификаторы
- Часть 4.X: Отчет о состоянии
Состояние ума
🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏
Тааак... Что случилось?
После довольно большой работы первый рабочий процесс 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!