@efflore/ui-element

<!doctype html> <html> <head> <title>UIElement Docs – Installation & Setup</title> <link rel="stylesheet" href="assets/css/global.css"> <link rel="stylesheet" href="assets/css/okaidia.css"> <link rel="stylesheet" href="assets/css/components.css"> <script type="module" src="assets/js/main.min.js"></script> </head> <body> <header class="content-grid"> <h1 class="content">UIElement Docs <small>Version 0.8.5</small></h1> <nav class="breakout"> <ol> <li> <a href="index.html"> <span class="icon">📘</span> <strong>Introduction</strong> <small>Overview and key benefits of UIElement</small> </a> </li> <li class="active"> <a href="installation-setup.html"> <span class="icon">⚙️</span> <strong>Installation & Setup</strong> <small>How to install and set up the library</small> </a> </li> <li> <a href="core-concepts.html"> <span class="icon">🧩</span> <strong>Core Concepts</strong> <small>Learn about signals, state, and reactivity</small> </a> </li> <li> <a href="detailed-walkthrough.html"> <span class="icon">📋</span> <strong>Detailed Walkthrough</strong> <small>Step-by-step guide to creating components</small> </a> </li> <li> <a href="best-practices-patterns.html"> <span class="icon">💡</span> <strong>Best Practices & Patterns</strong> <small>Tips for effective and scalable usage</small> </a> </li> <li> <a href="advanced-topics.html"> <span class="icon">🚀</span> <strong>Advanced Topics</strong> <small>Diving deeper into contexts and performance</small> </a> </li> <li> <a href="examples-recipes.html"> <span class="icon">🧪</span> <strong>Examples & Recipes</strong> <small>Sample components and practical use cases</small> </a> </li> <li> <a href="troubleshooting-faqs.html"> <span class="icon">❓</span> <strong>Troubleshooting & FAQs</strong> <small>Common issues and frequently asked questions</small> </a> </li> <li> <a href="api-reference.html"> <span class="icon">📚</span> <strong>API Reference</strong> <small>Detailed documentation of classes and methods</small> </a> </li> <li> <a href="contributing-development.html"> <span class="icon">🤝</span> <strong>Contributing & Development</strong> <small>How to contribute and set up the dev environment</small> </a> </li> <li> <a href="changelog-versioning.html"> <span class="icon">📝</span> <strong>Changelog & Versioning</strong> <small>Track changes and understand versioning</small> </a> </li> <li> <a href="licensing-credits.html"> <span class="icon">⚖️</span> <strong>Licensing & Credits</strong> <small>License details and acknowledgments</small> </a> </li> </ol> </nav> </header> <main> <section class="hero"> <h1>⚙️ Installation & Setup</h1> <p class="lead"> Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components. </p> </section> <section> <h2>Using a CDN</h2> <p> For the easiest setup, include <strong>UIElement</strong> directly in your HTML via a CDN. This is ideal for quick projects or testing. </p> <code-block> <pre><code><script src="https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js"></script></code></pre> </code-block> <p> Or use <code><script type="module"></code> to import UIElement in your HTML: </p> <code-block> <pre><code><script type="module"> import { UIElement } from 'https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js'; // Your code here </script></code></pre> </code-block> </section> <section> <h2>Using a Self-Hosted Copy</h2> <p> You can include the built UIElement script from a local or hosted path if you prefer to self-host the script. The latest version is available in the Github Repo under <a href="https://github.com/efflore/ui-element/blob/main/index.min.js" target="_blank">https://github.com/efflore/ui-element/blob/main/index.min.js</a> </p> <p> Remember to keep the hosted file updated to use the latest features and bug fixes. </p> </section> <section> <h2>Installing with NPM</h2> <p> If you are using a bundler like Vite, Rollup, Webpack, or another module system, npm is the best way to install and manage <strong>UIElement</strong>. </p> <pre><code>npm install @efflore/ui-element</code></pre> <p> Then import <code>UIElement</code> in your JavaScript: </p> <code-block> <pre><code>import { UIElement } from '@efflore/ui-element';</code></pre> </code-block> <p> Use build tools to bundle the library into your project as necessary. </p> </section> <section> <h2>Creating Your First Component</h2> <p> Let's verify your setup by creating an interactive <code>HelloWorld</code> component that updates based on user input. </p> <pre><code>class HelloWorld extends UIElement { connectedCallback() { // Update content dynamically based on the 'name' signal this.first('.greeting').map(setText('name')); // Handle user input to change the 'name' this.first('input').map(on('input', event => this.set('name', event.target.value))); } } HelloWorld.define('hello-world');</code></pre> <p> Include it in your HTML (server-rendered): </p> <pre><code><hello-world> <label for="name-input">Your name</label> <input type="text" id="name-input" /> <p>Hello, <span class="greeting">World</span>!</p> </hello-world></code></pre> </section> <section> <h2>Verifying Installation</h2> <p> To verify your setup: </p> <ul> <li><strong>CDN & Self-Hosted Users</strong>: Check the browser console for any script loading errors and ensure typing in the input field updates the greeting.</li> <li><strong>NPM Users</strong>: Ensure <code>node_modules</code> contains <code>@efflore/ui-element</code> and your bundler correctly bundles the library.</li> </ul> </section> <section> <h2>Next Steps</h2> <p> Now that you've set up <strong>UIElement</strong>, you're ready to dive deeper into building reactive Web Components. Check out the <a href="core-concepts.html">Core Concepts</a> page to learn more about signals and reactivity, or proceed to the <a href="detailed-walkthrough.html">Detailed Walkthrough</a> for building more advanced components. </p> </section> </main> </body> </html>