0.0.22 • Published 2 years ago
tatva v0.0.22
tatva.js
Tatva (Sanskrit word "तत्त्व", meaning "Element") is a Web Component Framework.
Installation
NPM
npm i tatva
CDN
import { Component, h, text } from "https://unpkg.com/tatva@latest";
// your code
Todo App Example
import { Component, h, text } from "https://unpkg.com/tatva@latest";
class TodoApp extends Component {
state = {
todo: '',
todos: []
}
setTodo(todo) {
this.setState(state => ({
...state,
todo
}))
}
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.target.value),
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);
0.0.22
2 years ago
0.0.21
2 years ago
0.0.20
2 years ago
0.0.19
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago