Welcome

LEGO (Lightweight Embedded Gluten-free Objects) is a library for writing fast ♻️ reactive, 📦 scoped and predictable 🏡 native Web Components in HTML/CSS/JS, that are easy to digest 🌱 for your browser.

Example (bricks/my-example.html):

<template>
  <h1>Welcome to LEGO</h1>
  <p>The lean way to make ${state.duration} Web Components powerful and easy</p>
</template>

<script>
  export default class extends Lego {
    state = { duration: 'Future-Proof' }
  }
</script>

<style>
  p {
    color: chocolate;
  }
</style>

These are native HTML elements with Shadow DOM, slots and all native features from the official specs.

LEGO is:

• 👙 Minimalist: 117 lines of readable code in its core (non-optimized, uncompressed, no cheating);
• 🌱 Low dependency: its single third-party is the minimalist petit-dom which is stable and embedded, and which itself has no dependency. So no bad surprise 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 VanillaJS! 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 possibilities (slot, encapsulation with Shadow DOM, …);
• 🦺 Safe: because it has no third-party dependency and is fully based on browser features, it’s secured and upgraded via your browser.

LEGO is not (and will never be):

• 🏯 A fully-bloated front-end framework with built-in routing. Others do it well;
• 🏗 A website builder with built-in SSR or similar complexities;
• 🔐 An HTML replacement that locks you into a specific technology;
• 🧓 An old browsers or IE compatible library. Support for Custom Elements is spreading and shall increase in time (you may try Web Components polyfills if you feel wild).

Next Steps, Demo and Doc #

🧪 View the demo and their source.

💭 LEGO is inspired from the native Web Component specs and Riot.

🔧 Customizing and contributing is just much lighter with simplicity. Source are easy to read for a regular developer which makes it accessible to maintain, to tweak and to hack in the loooong term.

🎈 You can read the core code! That is only 117 LOC resulting that LEGO is as light as 2.8KB for the full bundle! No Babel transpiler, no Parcel, no Webpack… It just works out of the box.

📖 Keep on reading this documentation and start writing your first LEGO component…