Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Polight/lego
🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
https://github.com/Polight/lego
custom-elements customelements dom es7 frontend future-proof html-modules javascript js-modules native polymer reactive reactjs vanilla-js virtual-dom vuejs w3c web-components web-standards webcomponents
Last synced: about 2 months ago
JSON representation
🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
- Host: GitHub
- URL: https://github.com/Polight/lego
- Owner: Polight
- License: mit
- Created: 2018-11-10T21:06:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-26T22:25:30.000Z (10 months ago)
- Last Synced: 2024-05-06T07:43:45.006Z (about 2 months ago)
- Topics: custom-elements, customelements, dom, es7, frontend, future-proof, html-modules, javascript, js-modules, native, polymer, reactive, reactjs, vanilla-js, virtual-dom, vuejs, w3c, web-components, web-standards, webcomponents
- Language: JavaScript
- Homepage: https://lego.js.org
- Size: 1.31 MB
- Stars: 110
- Watchers: 6
- Forks: 19
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Lists
- awesome-webcomponents - Lego repository
README
# LEGO: Modern Web-Components
## Native Web-Components?
Yes, you write native HTML, CSS and JS and create a native web-components [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) compliant.
It's stable and predictable.
If you have ever played with Web-Component-like frameworks (not to name Vue, React, Svelte…), you may know how debugging gets tricky and requires extra tooling.
Because LEGO is native, your browser developper toobar is all you need.
- `debugger` works as expected,
- _step-by-step_ debugging,
- element inspector,
- the console with the live JS in the context…
It's all just normal!
#### What does LEGO actually look like?
_/bricks/lean-welcome.html_:
```html
Welcome to LEGO
The lean way to make web-components
```
Later you can use it anywhere in your HTML:
```html
powerful and easy
```
Will read in your HTML:
```
Welcome to LEGO
The lean way to make web-components powerful and easy
```
Of course there's **so much** more you can do.
The [documentation](https://lego.js.org/) will guide you 📓
_Pretty neat!_
## Getting Started in 3 minutes
You can just hop in and experiment your first HTML Element.
[Follow this Getting Started guide](https://lego.js.org/v2/getting-started/#quick-start) for installing and writing your first component.
Once you're done with it you can write more components the same way and play with [daily usage guide](https://lego.js.org/v2/usage-web-components/) for passing advanced arguments, writing conditions and loops, dynamic styling, connecting to APIs…
## What Can You **Actually** Do With It?
You can create a simple reusable web-components for your HTML website or build a full fledge app with it.
It's as light as powerful, fully driven by the web-browsers standards.
Various applications are running Lego in production for years now.
Because of the standards and the zero dependency you can rely on it for the long term.
Your site/app will still running and remain editable in 10+ years, and as long as web browsers will exist.
## How Does LEGO Work?
LEGO (_Lightweight Embedded Gluten-free Objects_) is a base class that you extend and provide you with methods to use ♻️ reactive and 🏡 **native web-components** that are easy to digest 🌱 for your browser.
A small CLI in NodeJS come along to build 🚀 your component.
There's no [Vite](https://vitejs.dev/) nor other 3rd parties, it's [just an interpreter of ±180 lines of readable code](https://github.com/Polight/lego/blob/master/src/compiler/transpiler.js).
## What is LEGO Behind?
- 👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating)
- 🌱 Zero dependency: it uses [Petit-Dom](https://github.com/yelouafi/petit-dom) which is stable and embedded, so no bad suprise in the future
- ♻️ Reactive: updating the state recalculate the Virtual Dom when needed
- 🚀 fast: using virtual dom through a thin layer makes it close to bare-metal
- 💧 Simple: that's [Vanilla](http://vanilla-js.com/), there isn't much to know, it's a raw class to extend; no magic ✨
- 🪶 3 directives to enhance HTML: `:if` for conditions, `:for` for loops, `@myfuncname` to call an action
- 🏡 Native: LEGO components are actual native web-components, you benefit from all the today's and tomorrow's possibilites ([slot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), …).
Lego is not (and will never be):
- 🏯 A full bloated frontend framework with routing. [Others do it well](https://github.com/visionmedia/page.js).
- 🏗 A website builder with SSR or similar complexities.
- 🔐 An HTML replacement that locks you into a specific technology.
## Next Steps, Demo and Doc
🧪 View the [demo](https://polight.github.io/lego-demo/) and [their source](https://github.com/Polight/lego-demo/).
📕 [Read the full documentation at https://lego.js.org](https://lego.js.org)
💭 Lego is inspired from the [native Web-Component spec](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [Riot](https://riot.js.org/).
🔧 Customizing and contributing is just **much lighter** with simplicity, source that are easy to read, to hack and to maintain.
🎈 You can [read the core code](https://github.com/Polight/lego/blob/master/src/lib/Component.js) that is only 61 LOC resulting that Lego is **as light as 3Kb** for the full bundle!