-</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div></div><div class="transform -rotate-2 -mt-1.5 card-example md:-mr-1.25 ml-auto mr-3" id="example-app"></div></div></section><section class="container px-2"><h2>Comes in at a tiny size.</h2><p>Due to the minimal philosophy and simple concepts, the libraries are compressed to just a few kilobytes, with staark at 1.5kB.</p></section><section class="container px-2"><h2>Efficient diffing algorithms.</h2><p>The node tree is morphed quickly from old to new with minimal overhead, ensuring fast updates.</p></section><section class="container px-2"><h2>Minimal amount of concepts to learn.</h2><p>The system is incredibly easy to reason with because you only need to learn a few core functions to build web apps. Simply mount the app and create nodes with the node function, then change the state to update the app, There are more functions available, but these are all optional.</p></section><div class="-mt-4 mb-6"><div class="no-scrollbar overflow-x-scroll"><div class="mx-auto table"><ul class="inline-flex items-center px-1 py-2"><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#mount" target="_blank" class="card"><div class="heading text-2">mount</div><p>Attach the application to the document, providing a view function and initial state.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 -rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#node" target="_blank" class="card"><div class="heading text-2">node</div><p>Create an abstract representation of a document element that staark uses to manipulate the actual document.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#memo" target="_blank" class="card"><div class="heading text-2">memo</div><p>Optimize time-costly operations by memoizing view functions based on state changes.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#conditional" target="_blank" class="card"><div class="heading text-2">conditional</div><p>Add branching to rendering by conditionally returning different nodes.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 -rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#match" target="_blank" class="card"><div class="heading text-2">match</div><p>Select and return nodes based on matching keys in an object.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#factory" target="_blank" class="card"><div class="heading text-2">factory</div><p>Simplify node creation with pre-configured functions for common elements.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#fctory" target="_blank" class="card"><div class="heading text-2">fctory</div><p>Combine factory and nde for creating nodes from query selectors.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 -rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#nde" target="_blank" class="card"><div class="heading text-2">nde</div><p>Create nodes using a query selector instead of element type and attributes.</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#update" target="_blank" class="card"><div class="heading text-2">update</div><p>Force a re-rendering of the application (returned by mount).</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div><div class="transform mx-1 w-24 hover:rotate-0 hover:scale-110 rotate-2"><a href="https://github.com/doars/staark/tree/main/packages/staark#unmount" target="_blank" class="card"><div class="heading text-2">unmount</div><p>Terminate and remove the application from the page (returned by mount).</p><p class="hover-a:underline text-0">Learn more <svg class="icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg></p></a></div></ul></div></div></div><section class="container px-2"><h2>Easy to add to your project.</h2></section><div class="-mt-4 mb-6"><div class="no-scrollbar overflow-x-scroll"><div class="mx-auto table"><ul class="inline-flex items-center px-1 py-2"><div class="transform mx-1 w-24"><div class="card"><div class="heading text-2">From NPM</div><p>Install the package from NPM, then import and enable the library in your build.</p><button onclick="window.copyToClipboard("npm i @doars/doars")"> <code>npm i @doars/doars</code> <svg class="ionicon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><rect height="336" rx="57" ry="57" style="fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px" width="336" x="128" y="128"></rect><path d="M383.5,128l.5-24a56.16,56.16,0,0,0-56-56H112a64.19,64.19,0,0,0-64,64V328a56.16,56.16,0,0,0,56,56h24" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"></path></svg></button><div class="code-wrapper"><pre><code class="-text-2 sm:-text-1"><span class="hljs-comment">// Import library.</span>
0 commit comments