@polight/lego

Version:

Tiny Web-Components lib for future-proof HTML mentors

8 lines (7 loc) • 17.4 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/assets/css/just-the-docs-default.css"> <script src="/assets/js/vendor/lunr.min.js"></script> <script src="/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Native Web-Components Library | 🚀 Lego Web-Components</title> <meta name="generator" content="Jekyll v4.2.2" /> <meta property="og:title" content="Native Web-Components Library" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="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 (my-example.html): <template> <p>Hey Joe</p> </template> <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: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating). 🌱 Low dependency: its single third-party is the minimalist Petit-Dom which itself has no dependency ♻️ 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, there isn’t much to know, it’s a raw class to extend; no magic ✨ 🏡 Native: webcomponents are actual native webcomponents, you benefit from all the today’s and tomorrow’s possibilites (slot, encapsulation, …) 🦺 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 full bloated frontend framework with built-in routing. Others do it well. 🏗 A website builder with buit-in SSR or similar complexities. 🔐 An HTML replacement that locks you into a specific technology. 🧓 An old browsers or IE compatible library (you may try webcomponent polyfills if you feel wild). View the demo and their source 🧪. Lego is inspired from the native Web-Component spec and Riot. It’s just much lighter with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term. The core lib is only 61 LOC! Lego is as light as 3Kb for the full bundle! No Babel transpiler, no Parcel, no Webpack… it just works out of the box. Demo: view in action" /> <meta property="og:description" content="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 (my-example.html): <template> <p>Hey Joe</p> </template> <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: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating). 🌱 Low dependency: its single third-party is the minimalist Petit-Dom which itself has no dependency ♻️ 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, there isn’t much to know, it’s a raw class to extend; no magic ✨ 🏡 Native: webcomponents are actual native webcomponents, you benefit from all the today’s and tomorrow’s possibilites (slot, encapsulation, …) 🦺 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 full bloated frontend framework with built-in routing. Others do it well. 🏗 A website builder with buit-in SSR or similar complexities. 🔐 An HTML replacement that locks you into a specific technology. 🧓 An old browsers or IE compatible library (you may try webcomponent polyfills if you feel wild). View the demo and their source 🧪. Lego is inspired from the native Web-Component spec and Riot. It’s just much lighter with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term. The core lib is only 61 LOC! Lego is as light as 3Kb for the full bundle! No Babel transpiler, no Parcel, no Webpack… it just works out of the box. Demo: view in action" /> <link rel="canonical" href="http://localhost:4000/v2/" /> <meta property="og:url" content="http://localhost:4000/v2/" /> <meta property="og:site_name" content="🚀 Lego Web-Components" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2023-03-03T20:30:45+01:00" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Native Web-Components Library" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2023-03-03T20:30:45+01:00","datePublished":"2023-03-03T20:30:45+01:00","description":"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 (my-example.html): <template> <p>Hey Joe</p> </template> <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: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating). 🌱 Low dependency: its single third-party is the minimalist Petit-Dom which itself has no dependency ♻️ 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, there isn’t much to know, it’s a raw class to extend; no magic ✨ 🏡 Native: webcomponents are actual native webcomponents, you benefit from all the today’s and tomorrow’s possibilites (slot, encapsulation, …) 🦺 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 full bloated frontend framework with built-in routing. Others do it well. 🏗 A website builder with buit-in SSR or similar complexities. 🔐 An HTML replacement that locks you into a specific technology. 🧓 An old browsers or IE compatible library (you may try webcomponent polyfills if you feel wild). View the demo and their source 🧪. Lego is inspired from the native Web-Component spec and Riot. It’s just much lighter with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term. The core lib is only 61 LOC! Lego is as light as 3Kb for the full bundle! No Babel transpiler, no Parcel, no Webpack… it just works out of the box. Demo: view in action","headline":"Native Web-Components Library","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/v2/"},"url":"http://localhost:4000/v2/"}</script>  </head> <link rel="stylesheet" href="/assets/css/style.css" /> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header"> <a href="http://localhost:4000/" class="site-title lh-tight"> 🚀 Lego </a> <a href="#" id="menu-button" class="site-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav"> <div class="nav-category">v2.0 - alpha</div> <ul class="nav-list"><li class="nav-list-item active"><a href="http://localhost:4000/v2/" class="nav-list-link active">Welcome</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/getting-started/" class="nav-list-link">Getting Started</a></li><li class="nav-list-item"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="http://localhost:4000/v2/usage-web-components/" class="nav-list-link">Usage</a><ul class="nav-list "><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/template/" class="nav-list-link">Template tag</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/condition/" class="nav-list-link">Condition :if</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/loop/" class="nav-list-link">Loop :for</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/custom-directive/" class="nav-list-link">Custom directives</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/events/" class="nav-list-link">Binding events</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/reactive/" class="nav-list-link">Reactive properties</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/attributes/" class="nav-list-link">Pass attributes</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/slots/" class="nav-list-link">Using slots</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/reactive-css/" class="nav-list-link">Reactive CSS</a></li><li class="nav-list-item "><a href="http://localhost:4000/v2/usage-web-components/script-tag/" class="nav-list-link">Script Tag</a></li></ul></li><li class="nav-list-item"><a href="http://localhost:4000/v2/naming-components/" class="nav-list-link">Naming Conventions</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/compile-components/" class="nav-list-link">Compiling</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/configuring-components/" class="nav-list-link">Configuring</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/advanced-components/" class="nav-list-link">Advanced Example</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/testing-components/" class="nav-list-link">Testing</a></li><li class="nav-list-item"><a href="http://localhost:4000/v2/advanced-webcomponents/" class="nav-list-link">Getting deep</a></li></ul> </nav> <footer class="site-footer"> <p>Version 2.0 pre-release</p> <p>Based on <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>.</p> </footer> </div> </section> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search"> <div class="search-input-wrap"> <input type="search" id="search-input" class="search-input" tabindex="0" placeholder="Search the Lego documentation" aria-label="Search " autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> </div> <div id="main-content-wrap" class="main-content-wrap"> <div id="main-content" class="main-content" role="main"> <p>LEGO (<em>Lightweight Embedded Gluten-free Objects</em>) is a library for writing fast ♻️ reactive, 📦 scoped and predictable 🏡 <strong>native web-components</strong> in HTML/CSS/JS, that are easy to digest 🌱 for your browser.</p> <p>Example (<code class="language-plaintext highlighter-rouge">my-example.html</code>):</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template></span> <span class="nt"><p></span>Hey Joe<span class="nt"></p></span> <span class="nt"></template></span> <span class="nt"><style></span> <span class="nt">p</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">chocolate</span> <span class="p">}</span> <span class="nt"></style></span> </code></pre></div></div> <p>These are <strong>native HTML elements</strong> with Shadow DOM, slots and all native features from the official specs.</p> <p>Lego is:</p> <ul> <li>👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating).</li> <li>🌱 Low dependency: its single third-party is the minimalist <a href="https://github.com/yelouafi/petit-dom">Petit-Dom</a> which itself has no dependency</li> <li>♻️ Reactive: updating the state recalculate the Virtual Dom when needed</li> <li>🚀 fast: using virtual dom through a thin layer makes it close to bare-metal</li> <li>💧 Simple: that’s <a href="http://vanilla-js.com/">Vanilla</a>, there isn’t much to know, it’s a raw class to extend; no magic ✨</li> <li>🏡 Native: webcomponents are actual native webcomponents, you benefit from all the today’s and tomorrow’s possibilites (slot, encapsulation, …)</li> <li>🦺 Safe: because it has no third-party dependency and is fully based on browser features, it’s secured and upgraded via your browser.</li> </ul> <p>Lego is not (and will never be):</p> <ul> <li>🏯 A full bloated frontend framework with built-in routing. <a href="https://github.com/visionmedia/page.js">Others do it well</a>.</li> <li>🏗 A website builder with buit-in SSR or similar complexities.</li> <li>🔐 An HTML replacement that locks you into a specific technology.</li> <li>🧓 An old browsers or IE compatible library (you may try <a href="https://github.com/webcomponents/polyfills">webcomponent polyfills</a> if you feel wild).</li> </ul> <p>View the <a href="https://polight.github.io/lego-demo/">demo</a> and <a href="https://github.com/Polight/lego-demo">their source</a> 🧪.</p> <p>Lego is inspired from the <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">native Web-Component spec</a> and <a href="https://riot.js.org/">Riot</a>.</p> <p>It’s just <strong>much lighter</strong> with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term. The <a href="https://github.com/Polight/lego/blob/master/src/lib/Component.js">core lib</a> is only 61 <abbr title="Lines Of Code">LOC</abbr>! Lego is as light as <strong>3Kb</strong> for the full bundle!</p> <p>No Babel transpiler, no Parcel, no Webpack… it just works out of the box.</p> <p>Demo: <a href="https://polight.github.io/lego-demo/">view in action</a></p> <hr> <footer> <p class="text-small text-grey-dk-100 mb-0">Lego is <a href=https://github.com/polight/lego>open-source</a>. Distributed under <a href="https://github.com/polight/lego/tree/master/LICENSE.txt">MIT license.</a></p> <div class="d-flex mt-2"> </div> </footer> </div> </div> <a href="#" id="search-button" class="search-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg> </a> <div class="search-overlay"></div> </div> </body> </html>