lego-dom 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -432
- package/docs/.vitepress/config.js +4 -4
- package/docs/.vitepress/dist/404.html +3 -3
- package/docs/.vitepress/dist/api/define.html +6 -6
- package/docs/.vitepress/dist/api/directives.html +6 -6
- package/docs/.vitepress/dist/api/globals.html +7 -7
- package/docs/.vitepress/dist/api/index.html +7 -7
- package/docs/.vitepress/dist/api/lifecycle.html +6 -6
- package/docs/.vitepress/dist/api/route.html +6 -6
- package/docs/.vitepress/dist/api/vite-plugin.html +7 -7
- package/docs/.vitepress/dist/assets/{api_globals.md.DOjt7AV0.js → api_globals.md.CEznyRAY.js} +1 -1
- package/docs/.vitepress/dist/assets/api_index.md.IEYUxUIr.js +1 -0
- package/docs/.vitepress/dist/assets/{api_vite-plugin.md.DNn9VhL5.js → api_vite-plugin.md.DC8Li09k.js} +1 -1
- package/docs/.vitepress/dist/assets/{app.BG5s3B0P.js → app.BfblNDJy.js} +1 -1
- package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.Crdp7-Zp.js +1 -0
- package/docs/.vitepress/dist/assets/chunks/{VPLocalSearchBox.BO-PSxt1.js → VPLocalSearchBox.C18E44rY.js} +1 -1
- package/docs/.vitepress/dist/assets/chunks/{theme.DA-iSa9B.js → theme.VX3itTW6.js} +2 -2
- package/docs/.vitepress/dist/assets/{examples_form.md.B3stGKbu.js → examples_form.md.DQoAgbLR.js} +1 -1
- package/docs/.vitepress/dist/assets/{examples_index.md.BDEG_D4J.js → examples_index.md.CVJJjXXE.js} +3 -5
- package/docs/.vitepress/dist/assets/{examples_routing.md.bqZ9DjDK.js → examples_routing.md.sRnA5RXw.js} +4 -4
- package/docs/.vitepress/dist/assets/{examples_sfc-showcase.md.DLXaUiop.js → examples_sfc-showcase.md.DPf9Wm99.js} +4 -4
- package/docs/.vitepress/dist/assets/{examples_todo-app.md.D5RhZoo5.js → examples_todo-app.md.CqF4JaWn.js} +2 -2
- package/docs/.vitepress/dist/assets/{guide_cdn-usage.md.CAjf03Lr.js → guide_cdn-usage.md.CjIjusre.js} +8 -8
- package/docs/.vitepress/dist/assets/{guide_components.md.BIFWF1Hc.js → guide_components.md.CMU3iM6R.js} +1 -1
- package/docs/.vitepress/dist/assets/guide_contributing.md.Crrv3T_0.js +1 -0
- package/docs/.vitepress/dist/assets/{guide_directives.md.Bi3ynu1d.js → guide_directives.md.DFwqvqOv.js} +1 -1
- package/docs/.vitepress/dist/assets/{guide_getting-started.md.2Nr1lp2z.js → guide_getting-started.md.DtaJPe0i.js} +5 -5
- package/docs/.vitepress/dist/assets/guide_index.md.DtJVpLI9.js +2 -0
- package/docs/.vitepress/dist/assets/guide_index.md.DtJVpLI9.lean.js +1 -0
- package/docs/.vitepress/dist/assets/{guide_lifecycle.md.B28j1OzS.js → guide_lifecycle.md.CfY3jlU1.js} +1 -1
- package/docs/.vitepress/dist/assets/{guide_quick-start.md.CNk3VGTF.js → guide_quick-start.md.CwdNNA21.js} +4 -4
- package/docs/.vitepress/dist/assets/{guide_reactivity.md.CVsaMaPv.js → guide_reactivity.md.DgTH0MTn.js} +8 -8
- package/docs/.vitepress/dist/assets/{guide_routing.md.DSpDP25o.js → guide_routing.md.nMB0QOBR.js} +3 -3
- package/docs/.vitepress/dist/assets/{guide_sfc.md.CVUP66tS.js → guide_sfc.md.BUkWma1z.js} +39 -39
- package/docs/.vitepress/dist/assets/{guide_templating.md.BgCGe4aa.js → guide_templating.md.XI3uUlYI.js} +2 -2
- package/docs/.vitepress/dist/assets/guide_templating.md.XI3uUlYI.lean.js +1 -0
- package/docs/.vitepress/dist/assets/{index.md.xV1taCED.js → index.md.M4_o26kF.js} +2 -2
- package/docs/.vitepress/dist/assets/index.md.M4_o26kF.lean.js +1 -0
- package/docs/.vitepress/dist/examples/form.html +7 -7
- package/docs/.vitepress/dist/examples/index.html +26 -342
- package/docs/.vitepress/dist/examples/routing.html +11 -11
- package/docs/.vitepress/dist/examples/sfc-showcase.html +11 -11
- package/docs/.vitepress/dist/examples/todo-app.html +8 -8
- package/docs/.vitepress/dist/guide/cdn-usage.html +14 -14
- package/docs/.vitepress/dist/guide/components.html +7 -7
- package/docs/.vitepress/dist/guide/contributing.html +7 -7
- package/docs/.vitepress/dist/guide/directives.html +8 -8
- package/docs/.vitepress/dist/guide/getting-started.html +11 -11
- package/docs/.vitepress/dist/guide/index.html +8 -8
- package/docs/.vitepress/dist/guide/lifecycle.html +7 -7
- package/docs/.vitepress/dist/guide/quick-start.html +10 -10
- package/docs/.vitepress/dist/guide/reactivity.html +14 -14
- package/docs/.vitepress/dist/guide/routing.html +9 -9
- package/docs/.vitepress/dist/guide/sfc.html +46 -46
- package/docs/.vitepress/dist/guide/templating.html +8 -8
- package/docs/.vitepress/dist/hashmap.json +1 -1
- package/docs/.vitepress/dist/index.html +8 -8
- package/docs/.vitepress/dist/logo.svg +1 -1
- package/docs/api/globals.md +1 -1
- package/docs/api/index.md +2 -2
- package/docs/api/vite-plugin.md +1 -1
- package/docs/examples/form.md +1 -1
- package/docs/examples/index.md +3 -3
- package/docs/examples/routing.md +4 -4
- package/docs/examples/sfc-showcase.md +4 -4
- package/docs/examples/todo-app.md +2 -2
- package/docs/guide/cdn-usage.md +8 -8
- package/docs/guide/components.md +1 -1
- package/docs/guide/contributing.md +2 -2
- package/docs/guide/directives.md +1 -1
- package/docs/guide/getting-started.md +6 -6
- package/docs/guide/index.md +9 -9
- package/docs/guide/lifecycle.md +1 -1
- package/docs/guide/quick-start.md +4 -4
- package/docs/guide/reactivity.md +8 -8
- package/docs/guide/routing.md +3 -3
- package/docs/guide/sfc.md +39 -39
- package/docs/guide/templating.md +2 -2
- package/docs/index.md +10 -10
- package/docs/public/logo.svg +17 -38
- package/examples/vite-app/README.md +2 -2
- package/examples/vite-app/index.html +8 -4
- package/examples/vite-app/src/components/greeting-card.lego +25 -25
- package/examples/vite-app/src/components/sample-component.lego +44 -44
- package/examples/vite-app/src/components/todo-list.lego +242 -0
- package/examples/vite-app/src/main.js +3 -3
- package/examples/vite-app/vite.config.js +2 -1
- package/examples.js +3 -3
- package/go.html +117 -0
- package/lego.js +2 -0
- package/main.js +41 -35
- package/package.json +8 -3
- package/parse-lego.test.js +1 -1
- package/vite-plugin.js +2 -2
- package/docs/.vitepress/dist/assets/api_index.md.OS6h01ct.js +0 -1
- package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.DQmuWC2Z.js +0 -1
- package/docs/.vitepress/dist/assets/guide_contributing.md.BgbUN-Mr.js +0 -1
- package/docs/.vitepress/dist/assets/guide_index.md.GvZq_Yf2.js +0 -2
- package/docs/.vitepress/dist/assets/guide_index.md.GvZq_Yf2.lean.js +0 -1
- package/docs/.vitepress/dist/assets/guide_templating.md.BgCGe4aa.lean.js +0 -1
- package/docs/.vitepress/dist/assets/index.md.xV1taCED.lean.js +0 -1
- /package/docs/.vitepress/dist/assets/{api_globals.md.DOjt7AV0.lean.js → api_globals.md.CEznyRAY.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{api_index.md.OS6h01ct.lean.js → api_index.md.IEYUxUIr.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{api_vite-plugin.md.DNn9VhL5.lean.js → api_vite-plugin.md.DC8Li09k.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{examples_form.md.B3stGKbu.lean.js → examples_form.md.DQoAgbLR.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{examples_index.md.BDEG_D4J.lean.js → examples_index.md.CVJJjXXE.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{examples_routing.md.bqZ9DjDK.lean.js → examples_routing.md.sRnA5RXw.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{examples_sfc-showcase.md.DLXaUiop.lean.js → examples_sfc-showcase.md.DPf9Wm99.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{examples_todo-app.md.D5RhZoo5.lean.js → examples_todo-app.md.CqF4JaWn.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_cdn-usage.md.CAjf03Lr.lean.js → guide_cdn-usage.md.CjIjusre.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_components.md.BIFWF1Hc.lean.js → guide_components.md.CMU3iM6R.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_contributing.md.BgbUN-Mr.lean.js → guide_contributing.md.Crrv3T_0.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_directives.md.Bi3ynu1d.lean.js → guide_directives.md.DFwqvqOv.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_getting-started.md.2Nr1lp2z.lean.js → guide_getting-started.md.DtaJPe0i.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_lifecycle.md.B28j1OzS.lean.js → guide_lifecycle.md.CfY3jlU1.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_quick-start.md.CNk3VGTF.lean.js → guide_quick-start.md.CwdNNA21.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_reactivity.md.CVsaMaPv.lean.js → guide_reactivity.md.DgTH0MTn.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_routing.md.DSpDP25o.lean.js → guide_routing.md.nMB0QOBR.lean.js} +0 -0
- /package/docs/.vitepress/dist/assets/{guide_sfc.md.CVUP66tS.lean.js → guide_sfc.md.BUkWma1z.lean.js} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"CDN Usage","description":"","frontmatter":{},"headers":[],"relativePath":"guide/cdn-usage.md","filePath":"guide/cdn-usage.md"}'),t={name:"guide/cdn-usage.md"};function l(k,s,p,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="cdn-usage" tabindex="-1">CDN Usage <a class="header-anchor" href="#cdn-usage" aria-label="Permalink to "CDN Usage""></a></h1><p>
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"CDN Usage","description":"","frontmatter":{},"headers":[],"relativePath":"guide/cdn-usage.md","filePath":"guide/cdn-usage.md"}'),t={name:"guide/cdn-usage.md"};function l(k,s,p,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="cdn-usage" tabindex="-1">CDN Usage <a class="header-anchor" href="#cdn-usage" aria-label="Permalink to "CDN Usage""></a></h1><p>Lego works perfectly without any build tools. Just include it via CDN and start building!</p><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
2
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>My App</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
@@ -12,7 +12,7 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
12
12
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Use it --></span></span>
|
|
13
13
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hello-world</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{ message: 'Hello from CDN!' }"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hello-world</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
14
14
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
15
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Include
|
|
15
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- Include Lego --></span></span>
|
|
16
16
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://unpkg.com/lego-dom/main.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
17
17
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
18
18
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>That's it! Open this file in any browser and it works.</p><h2 id="cdn-providers" tabindex="-1">CDN Providers <a class="header-anchor" href="#cdn-providers" aria-label="Permalink to "CDN Providers""></a></h2><h3 id="unpkg-recommended" tabindex="-1">unpkg (Recommended) <a class="header-anchor" href="#unpkg-recommended" aria-label="Permalink to "unpkg (Recommended)""></a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><!-- Latest version --></span></span>
|
|
@@ -28,7 +28,7 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
28
28
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
29
29
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"UTF-8"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
30
30
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"viewport"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"width=device-width, initial-scale=1.0"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Todo App -
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Todo App - Lego</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
32
32
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
33
33
|
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
34
34
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-family</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">system-ui</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sans-serif</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
@@ -109,7 +109,7 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
109
109
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Lego.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">define</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'todo-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, Lego.registry[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'todo-app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].innerHTML, {</span></span>
|
|
110
110
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> newTodo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
111
111
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> todos: [</span></span>
|
|
112
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Learn
|
|
112
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Learn Lego'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
113
113
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Build something awesome'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
114
114
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
115
115
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> addTodo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
@@ -127,7 +127,7 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
127
127
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
128
128
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
129
129
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
130
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="progressive-enhancement" tabindex="-1">Progressive Enhancement <a class="header-anchor" href="#progressive-enhancement" aria-label="Permalink to "Progressive Enhancement""></a></h2><p>
|
|
130
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="progressive-enhancement" tabindex="-1">Progressive Enhancement <a class="header-anchor" href="#progressive-enhancement" aria-label="Permalink to "Progressive Enhancement""></a></h2><p>Lego is perfect for progressively enhancing existing sites:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><!-- Your existing page --></span></span>
|
|
131
131
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"legacy-content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
132
132
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>My Existing Site</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
133
133
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>This works without JavaScript</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
@@ -163,11 +163,11 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
163
163
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.location.href </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '/logout'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
164
164
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
165
165
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
|
|
166
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="embedding-in-existing-apps" tabindex="-1">Embedding in Existing Apps <a class="header-anchor" href="#embedding-in-existing-apps" aria-label="Permalink to "Embedding in Existing Apps""></a></h2><p>
|
|
166
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="embedding-in-existing-apps" tabindex="-1">Embedding in Existing Apps <a class="header-anchor" href="#embedding-in-existing-apps" aria-label="Permalink to "Embedding in Existing Apps""></a></h2><p>Lego components work alongside other frameworks:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</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;"><!-- Works fine with jQuery, Bootstrap, etc. --></span></span>
|
|
167
167
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://code.jquery.com/jquery-3.6.0.min.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
168
168
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://unpkg.com/lego-dom/main.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
169
169
|
<span class="line"></span>
|
|
170
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Your
|
|
170
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Your Lego component --></span></span>
|
|
171
171
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
172
172
|
<span class="line"></span>
|
|
173
173
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Your jQuery code --></span></span>
|
|
@@ -179,4 +179,4 @@ import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
179
179
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://unpkg.com/lego-dom@0.0.7/main.js"</span></span>
|
|
180
180
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> integrity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"sha384-..."</span></span>
|
|
181
181
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> crossorigin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"anonymous"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
182
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="browser-compatibility" tabindex="-1">Browser Compatibility <a class="header-anchor" href="#browser-compatibility" aria-label="Permalink to "Browser Compatibility""></a></h2><p>
|
|
182
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="browser-compatibility" tabindex="-1">Browser Compatibility <a class="header-anchor" href="#browser-compatibility" aria-label="Permalink to "Browser Compatibility""></a></h2><p>Lego works in all modern browsers:</p><ul><li>✅ Chrome 63+</li><li>✅ Firefox 63+</li><li>✅ Safari 11.1+</li><li>✅ Edge 79+</li></ul><p>No polyfills needed for these browsers!</p><h2 id="pros-and-cons" tabindex="-1">Pros and Cons <a class="header-anchor" href="#pros-and-cons" aria-label="Permalink to "Pros and Cons""></a></h2><h3 id="✅-advantages" tabindex="-1">✅ Advantages <a class="header-anchor" href="#✅-advantages" aria-label="Permalink to "✅ Advantages""></a></h3><ul><li><strong>No build step</strong> - Instant development</li><li><strong>No npm</strong> - No dependency management</li><li><strong>Fast prototyping</strong> - Perfect for demos and learning</li><li><strong>Progressive enhancement</strong> - Add to existing sites easily</li><li><strong>Low barrier</strong> - Great for beginners</li></ul><h3 id="⚠️-limitations" tabindex="-1">⚠️ Limitations <a class="header-anchor" href="#⚠️-limitations" aria-label="Permalink to "⚠️ Limitations""></a></h3><ul><li>No tree-shaking (you get the whole library)</li><li>No TypeScript compilation</li><li>No <code>.lego</code> SFC support</li><li>No hot module replacement</li><li>Slower for large apps compared to bundled versions</li></ul><h2 id="when-to-use-cdn" tabindex="-1">When to Use CDN <a class="header-anchor" href="#when-to-use-cdn" aria-label="Permalink to "When to Use CDN""></a></h2><p><strong>Perfect for:</strong></p><ul><li>Prototypes and demos</li><li>Small websites (1-5 components)</li><li>Progressive enhancement</li><li>Learning and experimentation</li><li>CodePen/JSFiddle examples</li></ul><p><strong>Consider bundling for:</strong></p><ul><li>Large applications (10+ components)</li><li>Production apps requiring optimization</li><li>Projects needing TypeScript</li><li>Teams wanting SFC workflow</li></ul><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to "Next Steps""></a></h2><ul><li>See <a href="/LegoJS/examples/">complete CDN examples</a></li><li>Learn about <a href="/LegoJS/guide/routing.html">routing</a> for multi-page apps</li><li>Explore <a href="/LegoJS/guide/directives.html">directives</a> for common patterns</li></ul>`,50)])])}const y=i(t,[["render",l]]);export{g as __pageData,y as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t,c as h,o as l,ag as i,j as a,a as n,t as p}from"./chunks/framework.B7OFBR9X.js";const c=JSON.parse('{"title":"Components","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components.md","filePath":"guide/components.md"}'),e={name:"guide/components.md"};function k(E,s,d,r,g,o){return l(),h("div",null,[s[2]||(s[2]=i(`<h1 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h1><p>Learn how to create and use components in
|
|
1
|
+
import{_ as t,c as h,o as l,ag as i,j as a,a as n,t as p}from"./chunks/framework.B7OFBR9X.js";const c=JSON.parse('{"title":"Components","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components.md","filePath":"guide/components.md"}'),e={name:"guide/components.md"};function k(E,s,d,r,g,o){return l(),h("div",null,[s[2]||(s[2]=i(`<h1 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h1><p>Learn how to create and use components in Lego.</p><h2 id="what-is-a-component" tabindex="-1">What is a Component? <a class="header-anchor" href="#what-is-a-component" aria-label="Permalink to "What is a Component?""></a></h2><p>A component is a reusable, self-contained piece of UI with its own template, styles, and logic.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"user-badge"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
2
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> self {</span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">inline-flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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 "Contributing""></a></h1><p>Thank you for your interest in contributing to Lego!</p><h2 id="development-setup" tabindex="-1">Development Setup <a class="header-anchor" href="#development-setup" aria-label="Permalink to "Development Setup""></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/Lego.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 "Pull Requests""></a></h2><ol><li>Fork the repo and create your branch from <code>main</code>.</li><li>If you've added code that should be tested, add tests.</li><li>If you'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 "License""></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};
|
|
@@ -70,7 +70,7 @@ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
70
70
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/contact"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Contact</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="with-dynamic-routes" tabindex="-1">With Dynamic Routes <a class="header-anchor" href="#with-dynamic-routes" aria-label="Permalink to "With Dynamic Routes""></a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/user/{{ userId }}"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>View Profile</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
71
71
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/product/{{ productId }}"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ productName }}</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">Router Required</p><p><code>b-link</code> only works if you've set up routing with <code>Lego.route()</code>.</p></div><h2 id="b-data" tabindex="-1">b-data <a class="header-anchor" href="#b-data" aria-label="Permalink to "b-data""></a></h2><p>Initialize component state.</p><h3 id="basic-usage-2" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage-2" aria-label="Permalink to "Basic Usage""></a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{ count: 0, name: 'Alice' }"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="with-complex-data" tabindex="-1">With Complex Data <a class="header-anchor" href="#with-complex-data" aria-label="Permalink to "With Complex Data""></a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">todo-list</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{</span></span>
|
|
72
72
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> todos: [</span></span>
|
|
73
|
-
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> { text: 'Learn
|
|
73
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> { text: 'Learn Lego', done: true },</span></span>
|
|
74
74
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> { text: 'Build app', done: false }</span></span>
|
|
75
75
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ],</span></span>
|
|
76
76
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> filter: 'all'</span></span>
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import{_ as t,c as l,o as h,ag as i,j as a,a as n,t as p}from"./chunks/framework.B7OFBR9X.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),k={name:"guide/getting-started.md"};function e(E,s,d,r,g,o){return h(),l("div",null,[s[2]||(s[2]=i(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p>Get up and running with
|
|
1
|
+
import{_ as t,c as l,o as h,ag as i,j as a,a as n,t as p}from"./chunks/framework.B7OFBR9X.js";const c=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),k={name:"guide/getting-started.md"};function e(E,s,d,r,g,o){return h(),l("div",null,[s[2]||(s[2]=i(`<h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to "Getting Started""></a></h1><p>Get up and running with Lego in under 5 minutes.</p><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><h3 id="option-1-cdn-no-build-tools" tabindex="-1">Option 1: CDN (No Build Tools) <a class="header-anchor" href="#option-1-cdn-no-build-tools" aria-label="Permalink to "Option 1: CDN (No Build Tools)""></a></h3><p>The fastest way to try Lego is via CDN:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
2
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
4
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>My
|
|
4
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>My Lego App</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
5
5
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
6
6
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
7
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">my-component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
8
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
9
9
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://unpkg.com/lego-dom/main.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
10
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"my-component"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
11
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello
|
|
11
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Hello Lego!</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
12
12
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
13
13
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
14
14
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>That's it! Open this HTML file in any browser and it works.</p><h3 id="option-2-npm" tabindex="-1">Option 2: npm <a class="header-anchor" href="#option-2-npm" aria-label="Permalink to "Option 2: npm""></a></h3><p>For projects using npm:</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> lego-dom</span></span></code></pre></div><p>Then import it:</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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Lego } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'lego-dom'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
15
15
|
<span class="line"></span>
|
|
16
16
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Lego.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">define</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'my-component'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`</span></span>
|
|
17
|
-
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <h1>Hello
|
|
17
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> <h1>Hello Lego!</h1></span></span>
|
|
18
18
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h3 id="option-3-with-vite-recommended-for-larger-projects" tabindex="-1">Option 3: With Vite (Recommended for Larger Projects) <a class="header-anchor" href="#option-3-with-vite-recommended-for-larger-projects" aria-label="Permalink to "Option 3: With Vite (Recommended for Larger Projects)""></a></h3><p>For the best development experience with <code>.lego</code> Single File Components:</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;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> create</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vite@latest</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-lego-app</span></span>
|
|
19
19
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-lego-app</span></span>
|
|
20
20
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> lego-dom</span></span></code></pre></div><p>Configure <code>vite.config.js</code>:</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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vite'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
@@ -104,4 +104,4 @@ import{_ as t,c as l,o as h,ag as i,j as a,a as n,t as p}from"./chunks/framework
|
|
|
104
104
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleInput()"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
105
105
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @submit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"handleSubmit(event)"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="_4-directives" tabindex="-1">4. Directives <a class="header-anchor" href="#_4-directives" aria-label="Permalink to "4. Directives""></a></h3><p>Special attributes for common patterns:</p><ul><li><code>b-if</code> - Conditional rendering</li><li><code>b-for</code> - List rendering</li><li><code>b-sync</code> - Two-way binding</li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"isLoggedIn"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Welcome back!</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
106
106
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"item in items"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>{{ item.name }}</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"username"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="what-you-ve-learned" tabindex="-1">What You've Learned <a class="header-anchor" href="#what-you-ve-learned" aria-label="Permalink to "What You've Learned""></a></h2><ul><li>✅ Three different ways to install
|
|
107
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> b-sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"username"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><h2 id="what-you-ve-learned" tabindex="-1">What You've Learned <a class="header-anchor" href="#what-you-ve-learned" aria-label="Permalink to "What You've Learned""></a></h2><ul><li>✅ Three different ways to install Lego</li><li>✅ How to create your first component</li><li>✅ The basics of templates, state, and events</li><li>✅ Available directives</li></ul><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to "Next Steps""></a></h2><ul><li>Learn about <a href="/LegoJS/guide/components.html">Components</a> in depth</li><li>Explore <a href="/LegoJS/guide/reactivity.html">Reactivity</a> and how it works</li><li>Check out <a href="/LegoJS/guide/templating.html">Templating</a> features</li><li>See <a href="/LegoJS/examples/">Examples</a> of real applications</li></ul>`,15))])}const F=t(k,[["render",e]]);export{c as __pageData,F as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as a,c as l,o,ag as n,j as e,a as i,t as r}from"./chunks/framework.B7OFBR9X.js";const f=JSON.parse('{"title":"What is Lego?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),s={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-lego" tabindex="-1">What is Lego? <a class="header-anchor" href="#what-is-lego" aria-label="Permalink to "What is Lego?""></a></h1><p>Lego 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 "The Philosophy""></a></h2><p>Lego 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't designed for. Lego 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 "Key Principles""></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 "1. Mental Model Simplicity""></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 Lego.</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 "2. No Build Step Required""></a></h3><p>Drop a <code><script></code> tag in your HTML and you'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 "3. True Reactivity""></a></h3><p>Change an object → the DOM updates. That'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>
|
|
2
|
+
<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 "4. Web Standards First""></a></h3><p>Lego 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-lego" tabindex="-1">When to Use Lego <a class="header-anchor" href="#when-to-use-lego" aria-label="Permalink to "When to Use Lego""></a></h2><h3 id="✅-lego-is-great-for" tabindex="-1">✅ Lego is Great For: <a class="header-anchor" href="#✅-lego-is-great-for" aria-label="Permalink to "✅ Lego is Great For:""></a></h3><ul><li><strong>Small to medium applications</strong> where framework overhead isn'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 "⚠️ Consider Alternatives If:""></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'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 "How Small Is It?""></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 "What Makes It Different?""></a></h2>`,30)),e("table",d,[t[8]||(t[8]=e("thead",null,[e("tr",null,[e("th",null,"Aspect"),e("th",null,"Lego"),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,r(),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(s,[["render",u]]);export{f as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as a,c as l,o,ag as n,j as e,a as i,t as r}from"./chunks/framework.B7OFBR9X.js";const f=JSON.parse('{"title":"What is Lego?","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),s={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,"Lego"),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,r(),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(s,[["render",u]]);export{f as __pageData,y as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"Lifecycle Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"guide/lifecycle.md","filePath":"guide/lifecycle.md"}'),l={name:"guide/lifecycle.md"};function p(t,s,k,e,E,d){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="lifecycle-hooks" tabindex="-1">Lifecycle Hooks <a class="header-anchor" href="#lifecycle-hooks" aria-label="Permalink to "Lifecycle Hooks""></a></h1><p>Learn about component lifecycle hooks in
|
|
1
|
+
import{_ as i,c as a,o as n,ag as h}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"Lifecycle Hooks","description":"","frontmatter":{},"headers":[],"relativePath":"guide/lifecycle.md","filePath":"guide/lifecycle.md"}'),l={name:"guide/lifecycle.md"};function p(t,s,k,e,E,d){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="lifecycle-hooks" tabindex="-1">Lifecycle Hooks <a class="header-anchor" href="#lifecycle-hooks" aria-label="Permalink to "Lifecycle Hooks""></a></h1><p>Learn about component lifecycle hooks in Lego.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to "Overview""></a></h2><p>Components have three lifecycle hooks:</p><ul><li><code>mounted()</code> - Called after component is added to DOM</li><li><code>updated()</code> - Called after state changes and re-render</li><li><code>unmounted()</code> - Called when component is removed from DOM</li></ul><h2 id="mounted" tabindex="-1">mounted() <a class="header-anchor" href="#mounted" aria-label="Permalink to "mounted()""></a></h2><p>Called once when the component is first attached to the DOM.</p><h3 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h3><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:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
2
2
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mounted</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.B7OFBR9X.js";const d=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"guide/quick-start.md","filePath":"guide/quick-start.md"}'),l={name:"guide/quick-start.md"};function h(k,s,p,e,E,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h1><p>The fastest way to get started with
|
|
1
|
+
import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.B7OFBR9X.js";const d=JSON.parse('{"title":"Quick Start","description":"","frontmatter":{},"headers":[],"relativePath":"guide/quick-start.md","filePath":"guide/quick-start.md"}'),l={name:"guide/quick-start.md"};function h(k,s,p,e,E,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to "Quick Start""></a></h1><p>The fastest way to get started with Lego is using the CDN. No build tools required!</p><h2 id="_1-create-an-html-file" tabindex="-1">1. Create an HTML file <a class="header-anchor" href="#_1-create-an-html-file" aria-label="Permalink to "1. Create an HTML file""></a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
2
2
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"en"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"UTF-8"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
5
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Lego Quick Start</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
6
6
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
7
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
8
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 2. Use your component --></span></span>
|
|
@@ -17,7 +17,7 @@ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.B7OFBR9X.js";const d
|
|
|
17
17
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"toggle()"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Toggle Name</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
18
18
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
19
19
|
<span class="line"></span>
|
|
20
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 4. Load
|
|
20
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 4. Load Lego --></span></span>
|
|
21
21
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://unpkg.com/lego-dom/main.js"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
22
22
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
23
23
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> <!-- 5. Define logic (Optional) --></span></span>
|
|
@@ -25,7 +25,7 @@ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.B7OFBR9X.js";const d
|
|
|
25
25
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hello-world'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).state </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
26
26
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
27
27
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
28
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'World'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '
|
|
28
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'World'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Lego'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
29
29
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
30
30
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
|
|
31
31
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"Reactivity","description":"","frontmatter":{},"headers":[],"relativePath":"guide/reactivity.md","filePath":"guide/reactivity.md"}'),h={name:"guide/reactivity.md"};function e(l,s,p,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="reactivity" tabindex="-1">Reactivity <a class="header-anchor" href="#reactivity" aria-label="Permalink to "Reactivity""></a></h1><p>Understand how
|
|
2
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">component._studs.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'new item'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// DOM updates!</span></span></code></pre></div><p>No <code>setState()</code>, no <code>dispatch()</code>, no special syntax. Just mutate the data.</p><h2 id="how-it-works" tabindex="-1">How It Works <a class="header-anchor" href="#how-it-works" aria-label="Permalink to "How It Works""></a></h2><p>
|
|
1
|
+
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.B7OFBR9X.js";const g=JSON.parse('{"title":"Reactivity","description":"","frontmatter":{},"headers":[],"relativePath":"guide/reactivity.md","filePath":"guide/reactivity.md"}'),h={name:"guide/reactivity.md"};function e(l,s,p,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="reactivity" tabindex="-1">Reactivity <a class="header-anchor" href="#reactivity" aria-label="Permalink to "Reactivity""></a></h1><p>Understand how Lego makes your UI automatically update when data changes.</p><h2 id="the-core-concept" tabindex="-1">The Core Concept <a class="header-anchor" href="#the-core-concept" aria-label="Permalink to "The Core Concept""></a></h2><p>When you change an object, the DOM updates automatically:</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:#24292E;--shiki-dark:#E1E4E8;">component._studs.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// DOM updates!</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">component._studs.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'new item'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// DOM updates!</span></span></code></pre></div><p>No <code>setState()</code>, no <code>dispatch()</code>, no special syntax. Just mutate the data.</p><h2 id="how-it-works" tabindex="-1">How It Works <a class="header-anchor" href="#how-it-works" aria-label="Permalink to "How It Works""></a></h2><p>Lego uses <strong>ES6 Proxies</strong> to track changes:</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:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> reactive</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Proxy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj, {</span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> set</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
|
5
5
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> oldValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target[key];</span></span>
|
|
@@ -18,7 +18,7 @@ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
18
18
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'updated'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><h3 id="✅-array-methods" tabindex="-1">✅ Array Methods <a class="header-anchor" href="#✅-array-methods" aria-label="Permalink to "✅ Array Methods""></a></h3><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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'new'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span>
|
|
19
19
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span>
|
|
20
20
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span>
|
|
21
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sort</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><h3 id="✅-nested-objects" tabindex="-1">✅ Nested Objects <a class="header-anchor" href="#✅-nested-objects" aria-label="Permalink to "✅ Nested Objects""></a></h3><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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.user.profile.age </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><p>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sort</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><h3 id="✅-nested-objects" tabindex="-1">✅ Nested Objects <a class="header-anchor" href="#✅-nested-objects" aria-label="Permalink to "✅ Nested Objects""></a></h3><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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.user.profile.age </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><p>Lego recursively wraps nested objects in proxies.</p><h3 id="✅-object-deletion" tabindex="-1">✅ Object Deletion <a class="header-anchor" href="#✅-object-deletion" aria-label="Permalink to "✅ Object Deletion""></a></h3><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:#D73A49;--shiki-dark:#F97583;">delete</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.user.email; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Reactive</span></span></code></pre></div><h3 id="⚠️-limitations" tabindex="-1">⚠️ Limitations <a class="header-anchor" href="#⚠️-limitations" aria-label="Permalink to "⚠️ Limitations""></a></h3><h4 id="replacing-arrays" tabindex="-1">Replacing Arrays <a class="header-anchor" href="#replacing-arrays" aria-label="Permalink to "Replacing Arrays""></a></h4><p>Don't replace the entire array reference:</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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> newItems; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ⚠️ Might not be reactive</span></span></code></pre></div><p>Instead, mutate in place:</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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
22
22
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">newItems); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ✅ Better</span></span></code></pre></div><h4 id="adding-new-root-properties" tabindex="-1">Adding New Root Properties <a class="header-anchor" href="#adding-new-root-properties" aria-label="Permalink to "Adding New Root Properties""></a></h4><p>Adding properties after initialization won't be reactive:</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;">// Initial state</span></span>
|
|
23
23
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
24
24
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span></span>
|
|
@@ -28,7 +28,7 @@ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
28
28
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.newProp </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'value'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ⚠️ Not reactive</span></span></code></pre></div><p>Initialize all properties upfront:</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:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
29
29
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
30
30
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> newProp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ✅ Initialize with default</span></span>
|
|
31
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="batching-updates" tabindex="-1">Batching Updates <a class="header-anchor" href="#batching-updates" aria-label="Permalink to "Batching Updates""></a></h2><p>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="batching-updates" tabindex="-1">Batching Updates <a class="header-anchor" href="#batching-updates" aria-label="Permalink to "Batching Updates""></a></h2><p>Lego batches updates using <code>requestAnimationFrame</code>:</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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
32
32
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
33
33
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
34
34
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Only one re-render happens!</span></span></code></pre></div><p>This prevents unnecessary DOM updates and improves performance.</p><h2 id="update-lifecycle" tabindex="-1">Update Lifecycle <a class="header-anchor" href="#update-lifecycle" aria-label="Permalink to "Update Lifecycle""></a></h2><ol><li><strong>State Change</strong> - You mutate data</li><li><strong>Proxy Intercepts</strong> - Change is detected</li><li><strong>Batch Queue</strong> - Component added to update queue</li><li><strong>requestAnimationFrame</strong> - Browser schedules render</li><li><strong>Re-render</strong> - DOM is updated</li><li><strong>updated() Hook</strong> - Called after render</li></ol><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:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
@@ -94,18 +94,18 @@ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.B7OFBR9X.js";const g
|
|
|
94
94
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
95
95
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">count.value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
96
96
|
<span class="line"></span>
|
|
97
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//
|
|
97
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Lego</span></span>
|
|
98
98
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.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="react" tabindex="-1">React <a class="header-anchor" href="#react" aria-label="Permalink to "React""></a></h3><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;">// React</span></span>
|
|
99
99
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
100
100
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
|
101
101
|
<span class="line"></span>
|
|
102
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//
|
|
102
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Lego</span></span>
|
|
103
103
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.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="svelte" tabindex="-1">Svelte <a class="header-anchor" href="#svelte" aria-label="Permalink to "Svelte""></a></h3><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;">// Svelte</span></span>
|
|
104
104
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
105
105
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
106
106
|
<span class="line"></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//
|
|
108
|
-
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>
|
|
107
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Lego</span></span>
|
|
108
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.count</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Lego is closest to Svelte's model but uses Proxies instead of compilation.</p><h2 id="advanced-patterns" tabindex="-1">Advanced Patterns <a class="header-anchor" href="#advanced-patterns" aria-label="Permalink to "Advanced Patterns""></a></h2><h3 id="watching-for-changes" tabindex="-1">Watching for Changes <a class="header-anchor" href="#watching-for-changes" aria-label="Permalink to "Watching for Changes""></a></h3><p>Use <code>updated()</code> hook:</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:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
109
109
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
110
110
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> previousCount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
111
111
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|