Class based JS components based on DomElem. A pattern focused on improving the development experience surrounding the component concept.
This is a personal project and is currently under active development, everything is subject to change. Its current state reflects my current opinions as much as time allows within the confines of work and life responsibilities.
This repo can be re-themed, and extended as-is. But another great way to leverage this pattern is to clone/fork this repo and own it, completely cut/replace/rebuild components and theme to fit your exact needs, build your own component library, or even implement the pattern directly in your app.
Prove that scalable, reactive component patterns like the ones promoted within frameworks like React/Angular/Vue/Svelte/Etc can be achieved with a development pattern and little to no dependencies.
Projects with similar goals or results:
Obviously my personal experience and use-cases color my opinion, which in turn results in deviation from the paths others have forged. Those working opinions are here if you're interested.
- A Proxy based observable state utility
- A css in js solution leveraging postcss
- A Class interface wrapping an HTMLElement, observable state, and a handful of common utilities for interaction and manipulation
- A bunch of re-usable Components for common interfaces
- A demo server and suite of demos and examples to illustrate the usage and benefits of the pattern
A demo app is included, this offers good examples of library usage and a working visual reference tool for the components.
bun start
All components maintain a README &demo & test file which offer good examples of how each component can be used. Additionally, there are a set of examples available for reference. The entire demo app is built on bun and vanilla-bean-components which serves a second purpose as its own full-stack example.
Read the Getting Started doc when you're ready to start your own project with vanilla-bean-components.
Examples are a great way to get a feel for building with this pattern:
All the components are based on DomElem, so check that out for more details. But heres one way to use it:
const input = new DomElem({
tag: 'input',
value: 'Some text',
onChange: ({ value: newValue }) => {
input.options.value = newValue;
},
appendTo: document.body,
});
new DomElem({
tag: 'p',
textContent: input.options.subscriber('value', value => `The current value is: ${value}`),
appendTo: document.body,
});The theme defines common/global/constant styles. The theme is loaded through context so that it can be modified/replaced.
The styles functions use postcss, with the plugins: autoprefixer, and postcss-nested
styles()
new DomElem({
styles: theme => `
color: ${theme.colors.red};
`,
});styled
const RedOne = styled(
DomElem,
theme => `
color: ${theme.colors.red};
`,
);context
import { context } from 'vanilla-bean-components';
console.log(context.domElem.theme);