Демонстрационное приложение, созданное с помощью Tatva.js. Tatva — это фреймворк веб-компонентов, который не требует шага сборки. Она использует крошечную реализацию Virtual Dom.
Содержание
Чем он отличается от Stencil.js?
- Не требует шага сборки. Загружайте фреймворк прямо из CDN.
- Не использует JSX. Вместо этого используются функции Hyperscript.
- Не использует нестандартные декораторы. Пишите веб-компоненты на чистом Javascript.
Сходства с другими фреймворками
- Использует события жизненного цикла, аналогичные React, но в стиле веб-компонентов. Вместо
componentDidMountиcomponentDidUnmount, используйтеcomponentDidConnectиcomponentDidDisconnect. - Использует виртуальный DOM
- Управление состоянием аналогично React Class Components
- Минимальная реализация PropTypes для автоматического преобразования атрибутов, установленных на компоненте.
Уникальные особенности
- Tatva использует Web Component API для обработки реквизитов и событий жизненного цикла, вместо того, чтобы реализовывать свой собственный. Она просто объединяет Virtual DOM с уже существующим Web Component API.
- Если вы хотите обновить компонент при изменении атрибута, просто поместите имя атрибута в список
observedAttributes.
Демонстрация приложения Todo
import { Component, h, text } from "https://unpkg.com/tatva@latest";
class TodoApp extends Component {
state = {
todo: '',
todos: []
}
setTodo(e) {
this.setState(state => ({
...state,
todo: e.target.value
}))
}
addTodo(id, todo) {
this.setState(state => ({
...state,
todos: [...this.state.todos, { id, todo }],
todo: ''
}))
}
removeTodo(todoId) {
this.setState(state => ({
...state,
todos: this.state.todos.filter(({ id }) => id !== todoId)
}));
}
handleFormSubmit(e) {
e.preventDefault();
this.addTodo(crypto.randomUUID(), this.state.todo);
}
render() {
return (
h('main', {},
h('form', { onsubmit: e => this.handleFormSubmit(e) },
h('input', {
oninput: e => this.setTodo(e),
placeholder: 'Enter Todo',
value: this.state.todo
})
),
!this.state.todos.length
? h('p', {}, text('No Todos.'))
: h('ul', {},
...this.state.todos.map(({ id, todo }) =>
h('li', { key: id },
text(todo),
h('button',
{ onclick: () => this.removeTodo(id) },
text('Remove')
)
)
)
)
)
)
}
}
customElements.define('todo-app', TodoApp);