Cleanup by Saneamiento
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
<link rel="preload" href="/sigpro/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/theme.yfWKMLQM.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/chunks/framework.C8AWLET_.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/api_mount.md.BiKjH18I.lean.js">
|
||||
<link rel="modulepreload" href="/sigpro/assets/api_mount.md.CoM2SFqU.lean.js">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css">
|
||||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||||
@@ -31,11 +31,11 @@
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount only the counter into a specific sidebar div</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#sidebar-widget'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-saneamiento" tabindex="-1">🔄 How it Works (Lifecycle & Saneamiento) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-saneamiento" aria-label="Permalink to "🔄 How it Works (Lifecycle & Saneamiento)""></a></h2><p>When <code>$.mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$.mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents "Zombie Effects" from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$.watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The "kill switch" that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to "🛑 Manual Unmounting""></a></h2><p>While SigPro handles most cleanups automatically (via <code>$.If</code>, <code>$.For</code>, and <code>$.router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</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:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#toast-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Counter, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#sidebar-widget'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="🔄-how-it-works-lifecycle-cleanup" tabindex="-1">🔄 How it Works (Lifecycle & Cleanup) <a class="header-anchor" href="#🔄-how-it-works-lifecycle-cleanup" aria-label="Permalink to "🔄 How it Works (Lifecycle & Cleanup)""></a></h2><p>When <code>$.mount</code> is executed, it performs these critical steps to ensure a leak-free environment:</p><ol><li><strong>Duplicate Detection</strong>: If you call <code>$.mount</code> on a target that already has a SigPro instance, it automatically calls <code>.destroy()</code> on the previous instance. This prevents "Zombie Effects" from stacking in memory.</li><li><strong>Internal Scoping</strong>: It executes the component function inside an internal <strong>Reactive Owner</strong>. This captures every <code>$.watch</code> and event listener created during the render.</li><li><strong>Target Injection</strong>: It clears the target using <code>replaceChildren()</code> and appends the new component.</li><li><strong>Runtime Creation</strong>: It returns a control object: <ul><li><code>container</code>: The actual DOM element created.</li><li><code>destroy()</code>: The "kill switch" that runs all cleanups, stops all watchers, and removes the element from the DOM.</li></ul></li></ol><hr><h2 id="🛑-manual-unmounting" tabindex="-1">🛑 Manual Unmounting <a class="header-anchor" href="#🛑-manual-unmounting" aria-label="Permalink to "🛑 Manual Unmounting""></a></h2><p>While SigPro handles most cleanups automatically (via <code>$.If</code>, <code>$.For</code>, and <code>$.router</code>), you can manually destroy any mounted instance. This is vital for imperatively managed UI like <strong>Toasts</strong> or <strong>Modals</strong>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</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:#005CC5;--shiki-dark:#79B8FF;"> instance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyToast, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#toast-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Later, to remove the toast and kill its reactivity:</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><hr><h2 id="💡-summary-cheat-sheet" tabindex="-1">💡 Summary Cheat Sheet <a class="header-anchor" href="#💡-summary-cheat-sheet" aria-label="Permalink to "💡 Summary Cheat Sheet""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to CSS Selector</strong></td><td style="text-align:left;"><code>$.mount(App, '#root')</code></td></tr><tr><td style="text-align:left;"><strong>Mount to DOM Node</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Clean & Re-mount</strong></td><td style="text-align:left;">Calling <code>$.mount</code> again on the same target</td></tr><tr><td style="text-align:left;"><strong>Total Saneamiento</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/router.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.router</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"DSCIaSlE\",\"api_mount.md\":\"BiKjH18I\",\"api_quick.md\":\"QL5306xO\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"DAemWpgh\",\"api_watch.md\":\"B4pyArWy\",\"index.md\":\"By6smViD\",\"install.md\":\"Cel7_1B6\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">instance.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><hr><h2 id="💡-summary-cheat-sheet" tabindex="-1">💡 Summary Cheat Sheet <a class="header-anchor" href="#💡-summary-cheat-sheet" aria-label="Permalink to "💡 Summary Cheat Sheet""></a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code Pattern</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to CSS Selector</strong></td><td style="text-align:left;"><code>$.mount(App, '#root')</code></td></tr><tr><td style="text-align:left;"><strong>Mount to DOM Node</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Clean & Re-mount</strong></td><td style="text-align:left;">Calling <code>$.mount</code> again on the same target</td></tr><tr><td style="text-align:left;"><strong>Total Cleanup</strong></td><td style="text-align:left;"><code>const app = $.mount(App); app.destroy();</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-83890dd9 data-v-4f9813fa><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-4f9813fa><span class="visually-hidden" id="doc-footer-aria-label" data-v-4f9813fa>Pager</span><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link prev" href="/sigpro/api/router.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Previous page</span><span class="title" data-v-4f9813fa>$.router</span><!--]--></a></div><div class="pager" data-v-4f9813fa><a class="VPLink link pager-link next" href="/sigpro/api/tags.html" data-v-4f9813fa><!--[--><span class="desc" data-v-4f9813fa>Next page</span><span class="title" data-v-4f9813fa>Tags</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_html.md\":\"DSCIaSlE\",\"api_mount.md\":\"CoM2SFqU\",\"api_quick.md\":\"Dw-DUc7L\",\"api_router.md\":\"Cn98LjXO\",\"api_signal.md\":\"BmorvARW\",\"api_tags.md\":\"BKWIb8mV\",\"api_watch.md\":\"BEM6Qssx\",\"index.md\":\"By6smViD\",\"install.md\":\"HK-a2_Fb\",\"ui_quick.md\":\"CsppjR8J\",\"vite_plugin.md\":\"CTs8LDIL\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SigPro\",\"description\":\"Minimalist Reactive Library\",\"base\":\"/sigpro/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Install\",\"link\":\"/install\"},{\"text\":\"Api\",\"link\":\"/api/quick\"}],\"sidebar\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"Installation\",\"link\":\"/install\"},{\"text\":\"Vite Plugin\",\"link\":\"/vite/plugin\"}]},{\"text\":\"API Reference\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/api/quick\"},{\"text\":\"$\",\"link\":\"/api/signal\"},{\"text\":\"$.watch\",\"link\":\"/api/watch\"},{\"text\":\"$.html\",\"link\":\"/api/html\"},{\"text\":\"$.router\",\"link\":\"/api/router\"},{\"text\":\"$.mount\",\"link\":\"/api/mount\"},{\"text\":\"Tags\",\"link\":\"/api/tags\"}]},{\"text\":\"UI Components\",\"items\":[{\"text\":\"Quick Start\",\"link\":\"/ui/quick\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/natxocc/sigpro\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user