{"id":22933068,"url":"https://github.com/polight/lego","last_synced_at":"2025-04-12T22:19:18.439Z","repository":{"id":33661177,"uuid":"157021511","full_name":"Polight/lego","owner":"Polight","description":"🚀 Low-Tech Web-Components Made Lightweight \u0026 Future-Proof.","archived":false,"fork":false,"pushed_at":"2025-04-11T08:41:36.000Z","size":1381,"stargazers_count":132,"open_issues_count":16,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T22:19:08.873Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://lego.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-10T21:06:06.000Z","updated_at":"2025-04-11T19:03:20.000Z","dependencies_parsed_at":"2024-06-19T04:08:28.689Z","dependency_job_id":"cb44292e-3070-4d9c-8f2e-142af101814c","html_url":"https://github.com/Polight/lego","commit_stats":{"total_commits":119,"total_committers":8,"mean_commits":14.875,"dds":0.07563025210084029,"last_synced_commit":"7c268024de47c6c25e73e13f59fc0e15678f5dab"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Flego","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Flego/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Flego/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Flego/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polight","download_url":"https://codeload.github.com/Polight/lego/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248638105,"owners_count":21137605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-14T11:19:46.604Z","updated_at":"2025-04-12T22:19:18.433Z","avatar_url":"https://github.com/Polight.png","language":"JavaScript","readme":"\n\u003cp style=\"text-align:center\"\u003e\n \u003cimg src=\"./assets/lego.svg\" title=\"Native Web-components\" alt=\"Lego is a fast \u0026 native web-components library\" style=\"width:100%;max-width:600px\"\u003e\n\u003c/p\u003e\n\n\n# LEGO: Modern Buildless Web-Components\n\n## Native Web-Components?\n\nYes, you write native HTML, CSS and JS and create a native web-components [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) compliant.\n\nIt's stable and predictable.\n\nIf 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.\n\nBecause LEGO is native, your browser developper toobar is all you need.\n- `debugger` works as expected,\n- _step-by-step_ debugging,\n- element inspector,\n- the console with the live JS in the context…\n\nIt's all just normal!\n\n## Buildless\n\nBecause [buildless](https://duckduckgo.com/?q=buildless) is becoming a thing, we can know give it a name that speaks to all.\n\n\n#### What does LEGO actually look like?\n\n_/bricks/lean-welcome.html_:\n\n```html\n\u003ctemplate\u003e\n  \u003ch1\u003eWelcome to LEGO\u003c/h1\u003e\n  \u003cp\u003eThe lean way to make web-components \u003cslot\u003e\u003c/slot\u003e\u003c/p\u003e\n\u003c/template\u003e\n```\n\nLater you can use it anywhere in your HTML:\n\n```html\n\u003clean-welcome\u003epowerful and easy\u003c/lean-welcome\u003e\n```\n\nWill read in your HTML:\n\n```\nWelcome to LEGO\nThe lean way to make web-components powerful and easy\n```\n\nOf course there's **so much** more you can do.\nThe [documentation](https://lego.js.org/) will guide you 📓\n\n_Pretty neat!_\n\n\n## Getting Started in 3 minutes\n\nYou can just hop in and experiment your first HTML Element.\n\n[Follow this Getting Started guide](https://lego.js.org/v2/getting-started/#quick-start) for installing and writing your first component.\n\nOnce 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…\n\n\n## What Can You **Actually** Do With It?\n\nYou can create a simple reusable web-components for your HTML website or build a full fledge app with it.\nIt's as light as powerful, fully driven by the web-browsers standards.\n\nVarious applications are running Lego in production for years now.\n\nBecause of the standards and the zero dependency you can rely on it for the long term.\n\nYour site/app will still running and remain editable in 10+ years, and as long as web browsers will exist.\n\n\n## How Does LEGO Work?\n\nLEGO (_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.\n\nA small CLI in NodeJS come along to build 🚀 your component.\nThere'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).\nI also works with [https://bun.sh](Bun) and probably other interpreters.\n\n\n## What is LEGO Behind?\n\n- 👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating)\n- 🌱 Zero dependency: it uses [Petit-Dom](https://github.com/yelouafi/petit-dom) which is stable and embedded, so no bad suprise in the future\n- ♻️ Reactive: updating the state recalculate the Virtual Dom when needed\n- 🚀 fast: using virtual dom through a thin layer makes it close to bare-metal\n- 💧 Simple: that's [Vanilla](http://vanilla-js.com/), there isn't much to know, it's a raw class to extend; no magic ✨\n- 🪶 3 directives to enhance HTML: `:if` for conditions, `:for` for loops, `@myfuncname` to call an action\n- 🏡 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), …).\n\nLego is not (and will never be):\n- 🏯 A full bloated frontend framework with routing. [Others do it well](https://github.com/visionmedia/page.js).\n- 🏗 A website builder with SSR or similar complexities.\n- 🔐 An HTML replacement that locks you into a specific technology.\n\n## Next Steps, Demo and Doc\n\n 🧪 View the [demo](https://polight.github.io/lego-demo/) and [their source](https://github.com/Polight/lego-demo/).\n\n📕 [Read the full documentation at https://lego.js.org](https://lego.js.org)\n\n💭 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/).\n\n🔧 Customizing and contributing is just **much lighter** with simplicity, source that are easy to read, to hack and to maintain.\n\n🎈 You can [read the core code](https://github.com/Polight/lego/blob/master/src/lib/Component.js) that is only 61 \u003cabbr title=\"Lines Of Code\"\u003eLOC\u003c/abbr\u003e resulting that Lego is **as light as 3Kb** for the full bundle!\n\n## Latest News\n\n- April 2025: [Lego v1](https://lego.js.org/v1/) will remain in place and stable as it remains more flexible than ~~[the Lego v2 proposal](https://lego.js.org/v2/)~~.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolight%2Flego","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolight%2Flego","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolight%2Flego/lists"}