dim is an idiomatic web component helper library, designed as a sane alternative to the node madness of todays web. It focuses on simplicity and adherence to web standards only, offering quality-of-life features - but with zero dependencies.
You can find an example at dim-template
dim provides a lightweight alternative to complex web component libraries, focusing on:
- Simplicity: No build step, no dependencies
- Standards: Leveraging web standards and custom elements
- Flexibility: Easy to extend and customize
- Performance: Minimal overhead and efficient updates
By using dim, you can create modern web applications with a familiar component-based architecture while staying as close to the metal as humanly possible (not literally).
- Zero dependencies
- Web standards-based
- Simple router
- Abstracted HTML and Shadow Element components for less boilerplate
- Utility functions for HTML templating and styling
- Reactivity
- i18n
Copy the distributed files or just add to your index.html:
<script type="module">
import * as dim from 'https://cdn.jsdelivr.net/gh/buelbuel/dim@latest/dist/dim.min.js'
window.dim = dim
</script>const { BaseElement } = dim
class MyComponent extends BaseElement {
render() {
return html`<div>My Component</div>`
}
}
export default MyComponent.define('my-component')const { ShadowElement, html } = dim
class MyShadowComponent extends ShadowElement {
render() {
return html`<div>My Shadow DOM Component</div>`
}
}
export default MyShadowComponent.define('my-shadow-component')const { html, styleMap } = dim
const styles = {
color: 'red',
fontSize: '16px',
}
const template = html` <div style="${styleMap(styles)}">Styled content</div> `const { BaseElement } = dim
class MyComponent extends BaseElement {
constructor() {
super()
this.defineReactiveProperty('count', 0)
}
render() {
return html`
<div>My Component</div>
<button id="increment">Increment ${this.count}</button>
`
}
addEventListeners() {
this.addEventListenerWithCleanup('#increment', 'click', () => {
this.count++
})
}
}const { initRouter } = dim
const routes = {
'/': { component: () => import('./pages/Home.js'), layout: 'default-layout' },
'/about': { component: () => import('./pages/About.js'), layout: 'default-layout' },
}
initRouter(routes)const { i18n } = dim
i18n.addTranslations('en', {
hello: {
world: 'World',
}
})
const { t } = dim
<p>${t('hello.world')}</p>Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent