Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buelbuel/dim
Lightweight, zero-dependency web component boilerplate focusing on simplicity and web standards.
https://github.com/buelbuel/dim
javascript no-dependencies web-components web-standards
Last synced: about 2 months ago
JSON representation
Lightweight, zero-dependency web component boilerplate focusing on simplicity and web standards.
- Host: GitHub
- URL: https://github.com/buelbuel/dim
- Owner: buelbuel
- License: mit
- Created: 2024-07-16T14:29:38.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-26T06:17:49.000Z (6 months ago)
- Last Synced: 2024-10-16T22:14:44.789Z (3 months ago)
- Topics: javascript, no-dependencies, web-components, web-standards
- Language: JavaScript
- Homepage: https://www.jsdelivr.com/package/gh/buelbuel/dim
- Size: 1.97 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.jsdelivr.com/package/gh/buelbuel/dim)
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](https://github.com/buelbuel/dim-template)
## Why?
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).
## Features
- 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
## Installation
Copy the distributed files or just add to your index.html:
```html
import * as dim from 'https://cdn.jsdelivr.net/gh/buelbuel/dim@latest/dist/dim.min.js'
window.dim = dim
```
## Usage
### BaseElement
```js
const { BaseElement } = dim
class MyComponent extends BaseElement {
render() {
return html`
My Component`
}
}
export default MyComponent.define('my-component')
```
### ShadowElement
```js
const { ShadowElement, html } = dim
class MyShadowComponent extends ShadowElement {
render() {
return html`
My Shadow DOM Component`
}
}
export default MyShadowComponent.define('my-shadow-component')
```
### HTML and Style Utilities
```js
const { html, styleMap } = dim
const styles = {
color: 'red',
fontSize: '16px',
}
const template = html`
Styled content `
```
### Reactive Properties
```js
const { BaseElement } = dim
class MyComponent extends BaseElement {
constructor() {
super()
this.defineReactiveProperty('count', 0)
}
render() {
return html`
My Component
Increment ${this.count}
`
}
addEventListeners() {
this.addEventListenerWithCleanup('#increment', 'click', () => {
this.count++
})
}
}
```
### Router
```js
const { initRouter } = dim
const routes = {
'/': { component: () => import('./pages/Home.js'), layout: 'default-layout' },
'/about': { component: () => import('./pages/About.js'), layout: 'default-layout' },
}
initRouter(routes)
```
### Internationalization
```js
const { i18n } = dim
i18n.addTranslations('en', {
hello: {
world: 'World',
}
})
const { t } = dim
${t('hello.world')}
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License.