https://github.com/rafaelrinaldi/data-components
:recycle: Tiny component structure for web applications
https://github.com/rafaelrinaldi/data-components
components custom-elements html-attributes
Last synced: 11 months ago
JSON representation
:recycle: Tiny component structure for web applications
- Host: GitHub
- URL: https://github.com/rafaelrinaldi/data-components
- Owner: rafaelrinaldi
- License: mit
- Created: 2016-02-10T01:37:01.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-25T21:37:38.000Z (over 5 years ago)
- Last Synced: 2025-03-17T17:19:31.984Z (11 months ago)
- Topics: components, custom-elements, html-attributes
- Language: JavaScript
- Homepage: https://git.io/v2SZ4
- Size: 106 KB
- Stars: 101
- Watchers: 5
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[demo-url]: https://rafaelrinaldi.github.io/data-components
[dist-url]: https://raw.githubusercontent.com/rafaelrinaldi/data-components/master/dist/index.min.js
[index]: https://github.com/rafaelrinaldi/data-components/blob/master/index.js
[manifest]: https://github.com/rafaelrinaldi/data-components/blob/master/package.json
[spa]: https://en.wikipedia.org/wiki/Single-page_application
[url]: http://rinaldi.io
# data-components
> Tiny component structure for web applications
## Sponsors
Thank you to all the sponsors for this project:
[→ Sponsor my open source work](https://github.com/sponsors/rafaelrinaldi)
## Install
```sh
$ npm install data-components --save
```
Or you can simply copy and paste the [minified standalone version that lives under `dist/`][dist-url]
## Features
* No need for a module bundler, it works in all browsers
* [Zero dependencies][manifest]
* No magic under the hood, [see it for yourself][index]
* Small (1.2 KB minified)
## Motivation
There are plenty of options to architect a web application out there but most of them often assume that you're working on a [SPA][spa]. That alone will add a lot of stuff that you might not want at all. Data binding, custom messaging system and virtual DOM to name a few.
Sometimes you just need something simple to kick things off without having to worry about naming conventions and programming paradigms. That's how this library was born.
## Usage
Let's implement the simplest todo list app.
```html
```
Ok, now that we have our markup in place, let's implement the application.
```js
// Todo component
class Todo {
constructor(el, options) {
this.el = el;
// Read from initial values
this.todos = options.values.split(',');
this.render();
}
// Add items to the list
add(todo) {
this.todos.push(todo);
this.render();
}
// Render the list to the DOM
render() {
this.el.innerHTML = this.todos.map(todo => `
}
}
// User input component
class Input {
constructor(el, options, sandbox) {
const todo = sandbox.get('todo');
// Submit value to "todo" component when hitting the enter key
el.addEventListener('keydown', e => {
if (e.keyCode === 13) {
todo.add(el.value);
el.value = '';
el.focus();
}
});
}
}
// Bootstrap components (UMD build exposes `components()`)
components({
todo: Todo,
input: Input
});
```
It works with just a few lines of code :tada:
[Check out the demo page][demo-url] for a slightly more complex example.
## More
For more detailed instructions on how the project works and how to use it, please [check the user guide](/GUIDE.md).
## License
MIT © [Rafael Rinaldi][url]
---