https://github.com/adamghill/dlite

A tiny, blazing fast view library that creates reactive Web Components
https://github.com/adamghill/dlite

2-way-binding dom html javascript reactive webcomponents

Last synced: 5 days ago
JSON representation

A tiny, blazing fast view library that creates reactive Web Components

• Host: GitHub
• URL: https://github.com/adamghill/dlite
• Owner: adamghill
• License: mit
• Created: 2023-01-22T03:43:19.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-30T01:54:57.000Z (about 1 month ago)
• Last Synced: 2024-12-31T15:09:32.051Z (12 days ago)
• Topics: 2-way-binding, dom, html, javascript, reactive, webcomponents
• Language: JavaScript
• Homepage: https://dlitejs.com
• Size: 956 KB
• Stars: 53
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  



dlite

A tiny, blazing fast view library that creates reactive Web Components


![npm (tag)](https://img.shields.io/npm/v/dlite/latest.svg?style=flat-square) [![gzip bundle size](http://img.badgesize.io/https://unpkg.com/dlite@latest/dist/dlite.es.js?compression=gzip&style=flat-square)](https://unpkg.com/dlite) ![NPM](https://img.shields.io/npm/l/dlite.svg?style=flat-square) ![GitHub Sponsors](https://img.shields.io/github/sponsors/adamghill?color=blue&style=flat-square)

## 📖 Complete documentation

https://dlitejs.com

## 🧐 Introduction

`dlite` creates `Web Components` and interactive web pages easily without the bloat of big frameworks. It can be effortlessly added into existing HTML pages to create reusable components for web applications. `dlite` is perfect for simple, but dynamic static sites or when you want to progressively upgrade a site without changing too much.

## ⭐ Features

- Seriously tiny: **<10 kB** (**<5 kB** when gzipped)

- No dependencies, no virtual DOM, no JSX, and no build tool required

- Reactive Web Components

- Progressive template language that leverages `template literals`

- Props support

- Computed properties

- Two-way data binding

- Events handling

- Component lifecycle hooks

- Directives (e.g. `if`/`else`, `for`, `style`, `class`)

- Shadow DOM by default with scoped CSS

- Put a script tag in your HTML and _go_ ⚡

It is compatible with all modern browsers that support [`ES2015`/`ES6`](https://caniuse.com/#feat=es6), [`ESM`](https://caniuse.com/?search=esm), and [`Proxy`](https://caniuse.com/#search=proxy).

## 🔧 Installation

The easiest way to use `dlite` is with a script tag.

```html

  import Dlite from '//unpkg.com/dlite';

```

More [details about installation](https://dlitejs.com/installation/).

## 🔄 Canonical counter example

An example counter component to give you a sense of what `dlite` looks like. See more [examples](https://dlitejs.com/examples/).

```html

  import Dlite from '//unpkg.com/dlite';

  

  Dlite({

    el: '#app',

    data: {

      count: 0

    },

    up() {

      this.data.count++;

    },

    down() {

      this.data.count--;

    }

  });

  
{this.count}


  


    Decrease Count

    Increase Count

  


```

## 🙋 FAQ

See the whole FAQ at https://dlitejs.com/faq/.

## 🧠 Related projects

Similar projects to `dlite` are listed on https://unsuckjs.com/.

## 🙌 Acknowledgements

`dlite` is forked from the fantastic work done by [Mardix](https://github.com/mardix) with [Litedom](https://github.com/mardix/litedom).

It includes code from these great libraries:

- https://github.com/bryhoyt/emerj 

- https://github.com/sindresorhus/on-change

The lightbulb logo is provided from https://openmoji.org/library/emoji-1F4A1/.