### Install sly and lit Source: https://github.com/e280/sly/blob/main/README.md Installs the @e280/sly package and the lit library using npm. Lit is used for HTML rendering within sly views. ```sh npm install @e280/sly lit ``` -------------------------------- ### Get Op Pod Info Source: https://github.com/e280/sly/blob/main/README.md Provides examples of accessing the internal 'pod' information and status properties of an Op instance. This includes the current status string, the actual value (if ready), and boolean flags for loading, ready, and error states. ```TypeScript op.pod // ["loading"] op.status // "loading" op.value // undefined (or value if ready) ``` ```TypeScript op.isLoading // true op.isReady // false op.isError // false ``` -------------------------------- ### Start Async Operation with Promise using use.op.promise Source: https://github.com/e280/sly/blob/main/README.md Initiates an asynchronous operation by directly providing a Promise. This is a convenient way to integrate existing asynchronous functions or operations into Sly's operation management system. ```ts const op = use.op.promise(doAsyncWork()) ``` -------------------------------- ### Start Async Operation with use.op Source: https://github.com/e280/sly/blob/main/README.md Initiates an asynchronous operation, typically defined by an async function. The result of this operation can be managed and potentially displayed using loading states. ```ts const op = use.op(async() => { await nap(5000) return 123 }) ``` -------------------------------- ### Get Pod Ready Value with podium.value Source: https://github.com/e280/sly/blob/main/README.md A utility function to safely retrieve the value from a 'ready' Pod. If the Pod is not in the 'ready' state, it returns `undefined`. ```ts podium.value(["loading"]) // undefined podium.value(["ready", 123]) // 123 ``` -------------------------------- ### Get Pod Status with podium.status Source: https://github.com/e280/sly/blob/main/README.md A utility function to determine the current status ('loading', 'ready', or 'error') of a given Pod. ```ts podium.status(["ready", 123]) // "ready" ``` -------------------------------- ### Ergonomic Typed HTML Attribute Access with use.attrs Source: https://github.com/e280/sly/blob/main/README.md Provides a convenient way to access and manage typed HTML attributes for a component. It allows defining expected attribute types (String, Number, Boolean) and provides a reactive interface for getting and setting them. ```ts const attrs = use.attrs({ name: String, count: Number, active: Boolean, }) ``` ```ts attrs.name // "chase" attrs.count // 123 attrs.active // true ``` ```ts attrs.name = "zenky" attrs.count = 124 attrs.active = false // removes html attr ``` ```ts attrs.name = undefined // removes the attr ``` -------------------------------- ### Create Op Instance Source: https://github.com/e280/sly/blob/main/README.md Demonstrates the creation of an Op instance with different initial states: default (loading), explicitly loading, ready with a value, and error with an error object. ```TypeScript const op = new Op() // loading status by default ``` ```TypeScript const op = Op.loading() ``` ```TypeScript const op = Op.ready(123) ``` ```TypeScript const op = Op.error(new Error()) ``` -------------------------------- ### Basic sly view Source: https://github.com/e280/sly/blob/main/README.md Defines a simple sly view that renders a 'hello world' paragraph. Views are the core of sly, utilizing Shadow DOM and hooks. ```ts view(use => () => html`

hello world

`) ``` -------------------------------- ### Import Sly Ops, Pods, and Loaders Source: https://github.com/e280/sly/blob/main/README.md Imports necessary utilities for managing asynchronous operations, loading states, and data pods from the Sly framework. ```ts import {nap} from "@e280/stz" import {Pod, podium, Op, makeLoader, anims} from "@e280/sly" ``` -------------------------------- ### Create a Ticker with Sly Hooks Source: https://github.com/e280/sly/blob/main/README.md Demonstrates how to create a simple ticker that increments a signal every second using `use.mount`, `repeat`, and `nap`. This showcases basic lifecycle management and timed updates. ```ts import {repeat, nap} from "@e280/stz" const seconds = use.signal(0) use.mount(() => repeat(async() => { await nap(1000) seconds.value++ })) ``` -------------------------------- ### Run Function Once at Initialization with use.once Source: https://github.com/e280/sly/blob/main/README.md Executes a provided function only once when the component is initialized. It returns the value produced by that function, useful for setting up initial states or expensive computations that should not be repeated. ```ts const whatever = use.once(() => { console.log("happens only once") return 123 }) whatever // 123 ``` -------------------------------- ### Combine Multiple Ops with Op.all Source: https://github.com/e280/sly/blob/main/README.md Shows how to use Op.all to combine multiple Op instances into a single Op. The resulting Op's state depends on the states of all the combined Ops: it's loading if any are loading, error if any are error, and ready only if all are ready. ```TypeScript Op.all(Op.ready(123), Op.loading()) // ["loading"] ``` ```TypeScript Op.all(Op.ready(1), Op.ready(2), Op.ready(3)) // ["ready", [1, 2, 3]] ``` -------------------------------- ### Pod States: Loading, Ready, Error Source: https://github.com/e280/sly/blob/main/README.md Illustrates the three possible states of a 'Pod', which represents an asynchronous operation. A Pod can be in a 'loading' state, a 'ready' state containing a value, or an 'error' state containing an error object. ```ts // loading pod ["loading"] ``` ```ts // ready pod contains value 123 ["ready", 123] ``` ```ts // error pod contains an error ["error", new Error()] ``` -------------------------------- ### Create Op from Async Function Source: https://github.com/e280/sly/blob/main/README.md Shows how to create an Op that automatically calls and tracks the status of an asynchronous function. The op will transition through loading, potentially ready with a return value, or error states. ```TypeScript const op = Op.fn(async() => { await nap(4000) return 123 }) ``` -------------------------------- ### Manage Lifecycle and Return Value with use.life Source: https://github.com/e280/sly/blob/main/README.md Combines the functionality of `use.mount` and `use.wake`, allowing a function to run on mount, return a value, and optionally provide an unmount cleanup function. The returned value is the first element of the tuple returned by the function. ```ts const v = use.life(() => { console.log("mounted") const value = 123 return [value, () => console.log("unmounted")] }) v // 123 ``` -------------------------------- ### Build a direct web component with sly Source: https://github.com/e280/sly/blob/main/README.md Creates a web component directly using sly's '.component()' method without using the 'view' function. This component renders a simple paragraph. ```ts const MyComponent = view.component(use => html`

hello world

`) ``` -------------------------------- ### Execute Action After First Render with use.wake and use.rendered Source: https://github.com/e280/sly/blob/main/README.md Combines `use.wake` and `use.rendered` to execute a callback function after the initial render of a component. This is useful for performing side effects or DOM manipulations that should only happen once after the component is visible. ```ts use.wake(() => use.rendered.then(() => { console.log("after first render") })) ``` -------------------------------- ### Run Function on Mount and Return Value with use.wake Source: https://github.com/e280/sly/blob/main/README.md Executes a function every time the view is mounted and returns a value. This is useful for initializing data or effects that should run on each mount. ```ts const whatever = use.wake(() => { console.log("view mounted") return 123 }) whatever // 123 ``` -------------------------------- ### Create Loader with Animation Source: https://github.com/e280/sly/blob/main/README.md Demonstrates the creation of a 'loader' function using `makeLoader` and a provided animation pattern (e.g., `anims.dots`). This loader is then used to render the state of an Op. ```TypeScript const loader = makeLoader(anims.dots) ``` -------------------------------- ### Render Op with Loader Source: https://github.com/e280/sly/blob/main/README.md Illustrates how to use a created 'loader' function to render an Op within an HTML template. The loader automatically handles displaying a loading spinner, an error message, or the transformed value when the Op's state changes. ```HTML return html`

cool stuff

${loader(op, value => html`
${value}
`)} ` ``` -------------------------------- ### Manage Mount/Unmount Lifecycle with use.mount Source: https://github.com/e280/sly/blob/main/README.md Sets up lifecycle hooks for when a view is mounted and unmounted. It accepts a function that can return another function to be executed on unmount, enabling cleanup operations. ```ts use.mount(() => { console.log("view mounted") return () => { console.log("view unmounted") } }) ``` -------------------------------- ### Import Sly DOM Multitool Source: https://github.com/e280/sly/blob/main/README.md Imports the primary '$' utility from the Sly DOM multitool, which provides a concise way to select and manipulate DOM elements. ```ts import {$} from "@e280/sly" ``` -------------------------------- ### Register multiple web components Source: https://github.com/e280/sly/blob/main/README.md Registers multiple web components ('MyComponent' and 'MyCounter') with the DOM using sly's '$.register' function. Tag names are automatically converted to kebab-case. ```ts $.register({MyComponent, MyCounter}) // // ``` -------------------------------- ### Convert a sly view to a web component Source: https://github.com/e280/sly/blob/main/README.md Converts an existing 'CounterView' into a web component instance, allowing it to be used in HTML. The component instance can receive new props at runtime via its 'render' method. ```ts const MyCounter = CounterView.component(1) ``` -------------------------------- ### Configure sly view settings Source: https://github.com/e280/sly/blob/main/README.md Defines a 'CoolView' with custom Shadow DOM settings ('open' mode and 'delegatesFocus: true') using the '.settings()' method. It also includes a slot for nested content. ```ts export const CoolView = view .settings({mode: "open", delegatesFocus: true}) .declare(use => (greeting: string) => { return html`😎 ${greeting} ` }) ``` -------------------------------- ### Inject sly view with attributes and children Source: https://github.com/e280/sly/blob/main/README.md Demonstrates injecting the 'CoolView' into the DOM with specific HTML attributes ('class="hero"') and nested children content, which can be slotted into the view. ```ts $.render($(".app"), html`

super cool example

${CoolView.props("hello") .attr("class", "hero") .children(html`spongebob`) .render()} `) ``` -------------------------------- ### Register Web Components with $.register Source: https://github.com/e280/sly/blob/main/README.md Registers custom web components with the browser. This allows you to use these components as custom HTML tags in your application. ```ts $.register({MyComponent, AnotherCoolComponent}) // // ``` -------------------------------- ### Declare a sly view with state and styles Source: https://github.com/e280/sly/blob/main/README.md Declares a CounterView using the sly 'view' function. It includes state management with 'use.signal', event handling for incrementing the count, and custom styling using Lit's 'css'. The view renders a count display and a button. ```ts import {$, view} from "@e280/sly" import {html, css} from "lit" export const CounterView = view(use => (start: number) => { use.name("counter") use.styles(css`p {color: green}`) const count = use.signal(start) const increment = () => { count.value++ } return html`

count ${count()}

` }) ``` -------------------------------- ### Render a sly view into the DOM Source: https://github.com/e280/sly/blob/main/README.md Renders the CounterView into a specified DOM element using sly's '$' utility. It demonstrates passing an initial value to the view and nesting it within other HTML. ```ts $.render($(".app"), html`

my cool counter demo

${CounterView(1)} `) ``` -------------------------------- ### Query All DOM Elements with $.all Source: https://github.com/e280/sly/blob/main/README.md Queries and returns all DOM elements that match the provided CSS selector. This is useful for iterating over a collection of elements. ```ts for (const item of $.all("ul li")) console.log(item) ``` -------------------------------- ### Instant View Rerender with use.renderNow Source: https://github.com/e280/sly/blob/main/README.md Forces an immediate rerender of the view without any debouncing. This is useful when an update needs to be reflected in the UI as soon as possible. ```ts use.renderNow() ``` -------------------------------- ### Register a sly view as a web component Source: https://github.com/e280/sly/blob/main/README.md Registers the CounterView as a custom web component named 'my-counter'. This allows the view to be used directly in HTML markup. ```ts $.register({MyCounter: CounterView.component(1)}) // ``` -------------------------------- ### Await Op Value Source: https://github.com/e280/sly/blob/main/README.md Illustrates how to asynchronously wait for an Op to reach a 'ready' state or throw an error. This is useful for synchronizing operations that depend on the Op's final value. ```TypeScript await op // 123 ``` -------------------------------- ### Attach Stylesheets with use.styles Source: https://github.com/e280/sly/blob/main/README.md Attaches stylesheets to the view's shadow DOM. This allows for encapsulated styling of Sly components, preventing style conflicts with the global scope. ```ts use.styles(css1, css2, css3) ``` -------------------------------- ### Select Op Value Based on Status Source: https://github.com/e280/sly/blob/main/README.md Demonstrates the 'select' method, which allows executing different functions based on the current status of the Op (loading, ready, or error). It returns the result of the executed function, transforming the Op's state into a specific output. ```TypeScript const result = op.select({ loading: () => "it's loading...", ready: value => `dude, it's ready! ${value}`, error: err => `dude, there's an error!`, }) result // "dude, it's ready! 123" ``` -------------------------------- ### Select a Single DOM Element with $ Source: https://github.com/e280/sly/blob/main/README.md Selects a single DOM element using a CSS selector. If the element is not found, it throws an error. This is the default behavior for selecting elements that are expected to exist. ```ts $(".demo") // HTMLElement (or throws error) ``` -------------------------------- ### Render HTML Content into an Element with $.render Source: https://github.com/e280/sly/blob/main/README.md Renders HTML content into a specified DOM element. This is a convenient way to update the content of an element dynamically. ```ts $.render(element, html`

hello world

`) ``` -------------------------------- ### Query DOM Element within a Specific Element with $ Source: https://github.com/e280/sly/blob/main/README.md Selects a DOM element using a CSS selector, but scopes the search within a specified parent element. This allows for more targeted DOM queries. ```ts $("li", listElement) // HTMLElement ``` -------------------------------- ### Morph Op Value Source: https://github.com/e280/sly/blob/main/README.md Explains the 'morph' method, which creates a new Op by transforming the value of the current Op if it's in a 'ready' state. This allows for functional transformations of the Op's data without directly mutating it. ```TypeScript op.morph(n => n + 1) // ["ready", 124] ``` -------------------------------- ### Safely Select a DOM Element with $.maybe Source: https://github.com/e280/sly/blob/main/README.md Safely selects a DOM element using a CSS selector. If the element is not found, it returns `undefined` instead of throwing an error, making it suitable for optional elements. ```ts $.maybe(".demo") // HTMLElement | undefined ``` -------------------------------- ### Create and Manage Signals with use.signal Source: https://github.com/e280/sly/blob/main/README.md Creates a reactive signal, which is a value that can be tracked and updated. Changes to the signal automatically trigger re-renders or updates in the UI. It supports both reading and writing the signal's value. ```ts const count = use.signal(1) // read the signal count() // 1 // write the signal count(2) ``` -------------------------------- ### Promise Resolution After Next Render with use.rendered Source: https://github.com/e280/sly/blob/main/README.md Returns a promise that resolves after the next render cycle completes. This is helpful for performing actions that depend on the DOM being updated, such as querying elements that were just rendered. ```ts use.rendered.then(() => { const slot = use.shadow.querySelector("slot") console.log(slot) }) ``` -------------------------------- ### Set View Attribute with use.name Source: https://github.com/e280/sly/blob/main/README.md Sets the 'view' attribute value for a Sly component. This is used to define the visual state or identity of a view, similar to setting an ID or class in traditional HTML. ```ts use.name("squarepants") ``` -------------------------------- ### Debounced View Rerender with use.render Source: https://github.com/e280/sly/blob/main/README.md Triggers a rerender of the view, but with debouncing applied. This means the rerender will only occur after a short delay, preventing excessive re-renders if multiple updates happen in quick succession. ```ts use.render() ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.