lego-dom 0.0.8 → 0.0.9

package/docs/.vitepress/dist/assets/guide_contributing.md.BgbUN-Mr.js

@@ -1 +0,0 @@
-import{_ as t,c as i,o as a,ag as s}from"./chunks/framework.B7OFBR9X.js";const u=JSON.parse('{"title":"Contributing","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contributing.md","filePath":"guide/contributing.md"}'),n={name:"guide/contributing.md"};function l(o,e,r,d,p,h){return a(),i("div",null,[...e[0]||(e[0]=[s('<h1 id="contributing" tabindex="-1">Contributing <a class="header-anchor" href="#contributing" aria-label="Permalink to &quot;Contributing&quot;">​</a></h1><p>Thank you for your interest in contributing to LegoJS!</p><h2 id="development-setup" tabindex="-1">Development Setup <a class="header-anchor" href="#development-setup" aria-label="Permalink to &quot;Development Setup&quot;">​</a></h2><ol><li><p>Clone the repository:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">git</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> clone</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> https://github.com/rayattack/LegoJS.git</span></span></code></pre></div></li><li><p>Install dependencies:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span></code></pre></div></li><li><p>Run the dev server for docs:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs:dev</span></span></code></pre></div></li></ol><h2 id="pull-requests" tabindex="-1">Pull Requests <a class="header-anchor" href="#pull-requests" aria-label="Permalink to &quot;Pull Requests&quot;">​</a></h2><ol><li>Fork the repo and create your branch from <code>main</code>.</li><li>If you&#39;ve added code that should be tested, add tests.</li><li>If you&#39;ve changed APIs, update the documentation.</li><li>Ensure the test suite passes.</li><li>Make sure your code lints.</li></ol><h2 id="license" tabindex="-1">License <a class="header-anchor" href="#license" aria-label="Permalink to &quot;License&quot;">​</a></h2><p>By contributing, you agree that your contributions will be licensed under its MIT License.</p>',8)])])}const g=t(n,[["render",l]]);export{u as __pageData,g as default};

package/docs/.vitepress/dist/assets/guide_index.md.GvZq_Yf2.js

@@ -1,2 +0,0 @@
-import{_ as a,c as l,o,ag as n,j as e,a as i,t as s}from"./chunks/framework.B7OFBR9X.js";const f=JSON.parse('{"title":"What is LegoJS?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),r={name:"guide/index.md"},d={tabindex:"0"};function u(h,t,p,g,m,c){return o(),l("div",null,[t[9]||(t[9]=n(`<h1 id="what-is-legojs" tabindex="-1">What is LegoJS? <a class="header-anchor" href="#what-is-legojs" aria-label="Permalink to &quot;What is LegoJS?&quot;">​</a></h1><p>LegoJS is a tiny, zero-dependency JavaScript library for building reactive Web Components directly in the browser.</p><h2 id="the-philosophy" tabindex="-1">The Philosophy <a class="header-anchor" href="#the-philosophy" aria-label="Permalink to &quot;The Philosophy&quot;">​</a></h2><p>LegoJS is built on a simple belief: <strong>the DOM is not your enemy</strong>.</p><p>Modern frameworks introduced virtual DOMs and compilation steps to solve problems that arose from trying to make the DOM do things it wasn&#39;t designed for. LegoJS takes a different approach—it embraces the DOM and Web Components as they were intended to be used.</p><h2 id="key-principles" tabindex="-1">Key Principles <a class="header-anchor" href="#key-principles" aria-label="Permalink to &quot;Key Principles&quot;">​</a></h2><h3 id="_1-mental-model-simplicity" tabindex="-1">1. Mental Model Simplicity <a class="header-anchor" href="#_1-mental-model-simplicity" aria-label="Permalink to &quot;1. Mental Model Simplicity&quot;">​</a></h3><p>There are no new concepts to learn. If you know:</p><ul><li>HTML</li><li>JavaScript objects</li><li>Basic DOM events</li></ul><p>You already know LegoJS.</p><h3 id="_2-no-build-step-required" tabindex="-1">2. No Build Step Required <a class="header-anchor" href="#_2-no-build-step-required" aria-label="Permalink to &quot;2. No Build Step Required&quot;">​</a></h3><p>Drop a <code>&lt;script&gt;</code> tag in your HTML and you&#39;re ready to go. Build tools are optional, not mandatory.</p><h3 id="_3-true-reactivity" tabindex="-1">3. True Reactivity <a class="header-anchor" href="#_3-true-reactivity" aria-label="Permalink to &quot;3. True Reactivity&quot;">​</a></h3><p>Change an object → the DOM updates. That&#39;s it. No <code>setState</code>, no <code>dispatch</code>, no <code>computed properties</code> to configure.</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// This just works</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">component._studs.count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h3 id="_4-web-standards-first" tabindex="-1">4. Web Standards First <a class="header-anchor" href="#_4-web-standards-first" aria-label="Permalink to &quot;4. Web Standards First&quot;">​</a></h3><p>LegoJS uses:</p><ul><li><strong>Web Components</strong> - Standard custom elements</li><li><strong>Shadow DOM</strong> - Native encapsulation</li><li><strong>ES6 Proxies</strong> - For reactivity</li><li><strong>Template literals</strong> - For templating</li></ul><p>No proprietary APIs. Everything is built on web standards.</p><h2 id="when-to-use-legojs" tabindex="-1">When to Use LegoJS <a class="header-anchor" href="#when-to-use-legojs" aria-label="Permalink to &quot;When to Use LegoJS&quot;">​</a></h2><h3 id="✅-legojs-is-great-for" tabindex="-1">✅ LegoJS is Great For: <a class="header-anchor" href="#✅-legojs-is-great-for" aria-label="Permalink to &quot;✅ LegoJS is Great For:&quot;">​</a></h3><ul><li><strong>Small to medium applications</strong> where framework overhead isn&#39;t worth it</li><li><strong>Embedded widgets</strong> that need to work anywhere</li><li><strong>Progressive enhancement</strong> of existing sites</li><li><strong>Learning</strong> how reactive systems work under the hood</li><li><strong>Projects</strong> where you want full control and no dependencies</li></ul><h3 id="⚠️-consider-alternatives-if" tabindex="-1">⚠️ Consider Alternatives If: <a class="header-anchor" href="#⚠️-consider-alternatives-if" aria-label="Permalink to &quot;⚠️ Consider Alternatives If:&quot;">​</a></h3><ul><li>You need a massive ecosystem of pre-built components</li><li>Your team is already invested in React/Vue/Angular</li><li>You need SSR (Server-Side Rendering) out of the box</li><li>You&#39;re building something extremely complex with hundreds of components</li></ul><h2 id="how-small-is-it" tabindex="-1">How Small Is It? <a class="header-anchor" href="#how-small-is-it" aria-label="Permalink to &quot;How Small Is It?&quot;">​</a></h2><p>The core library (<code>main.js</code>) is <strong>under 500 lines</strong> of well-commented JavaScript.</p><ul><li><strong>No dependencies</strong> - Zero <code>node_modules</code> bloat</li><li><strong>~17KB</strong> - Unminified, human-readable code</li><li><strong>~6KB</strong> - Minified and gzipped</li></ul><p>Compare that to:</p><ul><li>Vue 3: ~33KB (minified + gzipped)</li><li>React + ReactDOM: ~40KB (minified + gzipped)</li><li>Angular: ~100KB+ (minified + gzipped)</li></ul><h2 id="what-makes-it-different" tabindex="-1">What Makes It Different? <a class="header-anchor" href="#what-makes-it-different" aria-label="Permalink to &quot;What Makes It Different?&quot;">​</a></h2>`,30)),e("table",d,[t[8]||(t[8]=e("thead",null,[e("tr",null,[e("th",null,"Aspect"),e("th",null,"LegoJS"),e("th",null,"Traditional Frameworks")])],-1)),e("tbody",null,[t[3]||(t[3]=e("tr",null,[e("td",null,[e("strong",null,"Reactivity")]),e("td",null,"Direct object mutation"),e("td",null,"setState / dispatch / ref()")],-1)),e("tr",null,[t[1]||(t[1]=e("td",null,[e("strong",null,"Templates")],-1)),e("td",null,[t[0]||(t[0]=i("HTML with ",-1)),e("code",null,s(),1)]),t[2]||(t[2]=e("td",null,"JSX / template syntax",-1))]),t[4]||(t[4]=e("tr",null,[e("td",null,[e("strong",null,"Styles")]),e("td",null,"Shadow DOM (native)"),e("td",null,"CSS-in-JS / scoped CSS")],-1)),t[5]||(t[5]=e("tr",null,[e("td",null,[e("strong",null,"Build")]),e("td",null,"Optional"),e("td",null,"Required")],-1)),t[6]||(t[6]=e("tr",null,[e("td",null,[e("strong",null,"Learning Curve")]),e("td",null,"Hours"),e("td",null,"Days/Weeks")],-1)),t[7]||(t[7]=e("tr",null,[e("td",null,[e("strong",null,"Philosophy")]),e("td",null,"Embrace the platform"),e("td",null,"Abstract the platform")],-1))])]),t[10]||(t[10]=e("h2",{id:"next-steps",tabindex:"-1"},[i("Next Steps "),e("a",{class:"header-anchor",href:"#next-steps","aria-label":'Permalink to "Next Steps"'},"​")],-1)),t[11]||(t[11]=e("p",null,[i("Ready to dive in? Head to the "),e("a",{href:"/LegoJS/guide/getting-started.html"},"Getting Started"),i(" guide to build your first component in under 5 minutes.")],-1))])}const y=a(r,[["render",u]]);export{f as __pageData,y as default};

package/docs/.vitepress/dist/assets/guide_index.md.GvZq_Yf2.lean.js

@@ -1 +0,0 @@
-import{_ as a,c as l,o,ag as n,j as e,a as i,t as s}from"./chunks/framework.B7OFBR9X.js";const f=JSON.parse('{"title":"What is LegoJS?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),r={name:"guide/index.md"},d={tabindex:"0"};function u(h,t,p,g,m,c){return o(),l("div",null,[t[9]||(t[9]=n("",30)),e("table",d,[t[8]||(t[8]=e("thead",null,[e("tr",null,[e("th",null,"Aspect"),e("th",null,"LegoJS"),e("th",null,"Traditional Frameworks")])],-1)),e("tbody",null,[t[3]||(t[3]=e("tr",null,[e("td",null,[e("strong",null,"Reactivity")]),e("td",null,"Direct object mutation"),e("td",null,"setState / dispatch / ref()")],-1)),e("tr",null,[t[1]||(t[1]=e("td",null,[e("strong",null,"Templates")],-1)),e("td",null,[t[0]||(t[0]=i("HTML with ",-1)),e("code",null,s(),1)]),t[2]||(t[2]=e("td",null,"JSX / template syntax",-1))]),t[4]||(t[4]=e("tr",null,[e("td",null,[e("strong",null,"Styles")]),e("td",null,"Shadow DOM (native)"),e("td",null,"CSS-in-JS / scoped CSS")],-1)),t[5]||(t[5]=e("tr",null,[e("td",null,[e("strong",null,"Build")]),e("td",null,"Optional"),e("td",null,"Required")],-1)),t[6]||(t[6]=e("tr",null,[e("td",null,[e("strong",null,"Learning Curve")]),e("td",null,"Hours"),e("td",null,"Days/Weeks")],-1)),t[7]||(t[7]=e("tr",null,[e("td",null,[e("strong",null,"Philosophy")]),e("td",null,"Embrace the platform"),e("td",null,"Abstract the platform")],-1))])]),t[10]||(t[10]=e("h2",{id:"next-steps",tabindex:"-1"},[i("Next Steps "),e("a",{class:"header-anchor",href:"#next-steps","aria-label":'Permalink to "Next Steps"'},"​")],-1)),t[11]||(t[11]=e("p",null,[i("Ready to dive in? Head to the "),e("a",{href:"/LegoJS/guide/getting-started.html"},"Getting Started"),i(" guide to build your first component in under 5 minutes.")],-1))])}const y=a(r,[["render",u]]);export{f as __pageData,y as default};

package/docs/.vitepress/dist/assets/guide_templating.md.BgCGe4aa.lean.js

@@ -1 +0,0 @@
-import{_ as l,c as h,o as e,j as i,ag as t,a,t as n}from"./chunks/framework.B7OFBR9X.js";const y=JSON.parse('{"title":"Templating","description":"","frontmatter":{},"headers":[],"relativePath":"guide/templating.md","filePath":"guide/templating.md"}'),p={name:"guide/templating.md"};function k(E,s,d,r,g,o){return e(),h("div",null,[s[4]||(s[4]=i("h1",{id:"templating",tabindex:"-1"},[a("Templating "),i("a",{class:"header-anchor",href:"#templating","aria-label":'Permalink to "Templating"'},"​")],-1)),s[5]||(s[5]=i("p",null,"Learn about LegoJS templating features and syntax.",-1)),s[6]||(s[6]=i("h2",{id:"interpolation",tabindex:"-1"},[a("Interpolation "),i("a",{class:"header-anchor",href:"#interpolation","aria-label":'Permalink to "Interpolation"'},"​")],-1)),i("p",null,[s[0]||(s[0]=a("Use ",-1)),i("code",null,n(),1),s[1]||(s[1]=a(" to insert dynamic content:",-1))]),s[7]||(s[7]=t("",29)),i("p",null,[s[2]||(s[2]=a("Inside ",-1)),i("code",null,n(),1),s[3]||(s[3]=a(", you have access to:",-1))]),s[8]||(s[8]=t("",59))])}const u=l(p,[["render",k]]);export{y as __pageData,u as default};

package/docs/.vitepress/dist/assets/index.md.xV1taCED.lean.js

@@ -1 +0,0 @@
-import{_ as i,c as t,o as a,ag as e}from"./chunks/framework.B7OFBR9X.js";const E=JSON.parse(`{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"LegoJS","text":"Build Reactive Web Components","tagline":"A tiny, zero-dependency JavaScript library for creating reactive Web Components directly in the browser","image":{"src":"/logo.svg","alt":"LegoJS"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/rayattack/LegoJS"},{"theme":"alt","text":"Try Examples","link":"/examples/"}]},"features":[{"icon":"🎯","title":"Mental Model Simplicity","details":"No virtual DOM, no compilation step, no JSX. Just HTML with a few directives and reactive objects."},{"icon":"⚡","title":"Zero Dependencies","details":"Under 500 lines of code with no external dependencies. The entire library is smaller than most framework router plugins."},{"icon":"🔄","title":"True Reactivity","details":"Direct object mutation triggers updates. No setters, no actions, no reducers. Just change the data and the DOM updates."},{"icon":"🧩","title":"Web Components Native","details":"Built on standard Web Components with Shadow DOM. Works anywhere, plays well with existing code."},{"icon":"📦","title":"Single File Components","details":"Use .lego files with Vite for a modern development experience, or load directly in the browser."},{"icon":"🎨","title":"Scoped Styles","details":"Shadow DOM encapsulation means your styles never leak. Use the 'self' keyword to target component root."},{"icon":"🛣️","title":"Built-in Router","details":"Client-side routing included. Define routes, handle parameters, and add middleware without extra packages."},{"icon":"💪","title":"TypeScript Ready","details":"Full JSDoc annotations for excellent IDE support and optional TypeScript integration."},{"icon":"🚀","title":"Production Ready","details":"Battle-tested patterns from Vue and React, adapted for pure Web Components. No framework lock-in."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}`),n={name:"index.md"};function l(h,s,p,r,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e("",16)])])}const g=i(n,[["render",l]]);export{E as __pageData,g as default};