open-index/open-npm huggingface dataset:
npm package: @svalit/lit
Description: A library for building fast, lightweight web components
Author: Google LLC
Latest version: 2.6.0

<div align="center">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./logo-dark.svg" alt="Lit" width="300" height="141">
  </source>
  <source media="(prefers-color-scheme: light)" srcset="./logo.svg" alt="Lit" width="300" height="141">
  </source>
  <img src="./logo.svg" alt="Lit" width="300" height="141">
</picture>

### Simple. Fast. Web Components.

[![Build Status](https://github.com/lit/lit/actions/workflows/tests.yml/badge.svg)](https://github.com/lit/lit/actions/workflows/tests.yml)
[![Published on npm](https://img.shields.io/npm/v/lit.svg?logo=npm)](https://www.npmjs.com/package/lit)
[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff)](https://lit.dev/discord/)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

</div>

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

## Documentation

See the full documentation for Lit at [lit.dev](https://lit.dev)

## About this release

This is a stable release of Lit 2.0. If upgrading from previous versions of `lit-element` or `lit-html`, please see the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/) for a step-by-step guide on upgrading.

## Overview

Lit provides developers with just the right tools to build fast web components:

- A fast declarative HTML template system
- Reactive property declarations
- A customizable reactive update lifecycle
- Easy to use scoped CSS styling

Lit builds on top of standard web components, and makes them easier to write:

```ts
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

// Registers the element
@customElement('my-element')
export class MyElement extends LitElement {
  // Styles are applied to the shadow root and scoped to this element
  static styles = css`
    span {
      color: green;
    }
  `;

  // Creates a reactive property that triggers rendering
  @property()
  mood = 'great';

  // Render the component's DOM by returning a Lit template
  render() {
    return html`Web Components are <span>${this.mood}</span>!`;
  }
}
```

Once you've defined your component, you can use it anywhere you use HTML:

```html
<my-element mood="awesome"></my-element>
```

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).
npm package: @svalit/lit-element
Description: A simple base class for creating fast, lightweight web components
Author: Google LLC
Latest version: 3.2.2

# LitElement 3.0

A simple base class for creating fast, lightweight web components.

[![Build Status](https://github.com/lit/lit/workflows/Tests/badge.svg)](https://github.com/lit/lit/actions?query=workflow%3ATests)
[![Published on npm](https://img.shields.io/npm/v/lit-element/next)](https://www.npmjs.com/package/lit-element)
[![Join our Slack](https://img.shields.io/badge/slack-join%20chat-4a154b.svg)](https://www.polymer-project.org/slack-invite)
[![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit)

LitElement is the base class that powers the [Lit](https://lit.dev) library for building fast web components. Most users should import `LitElement` from the [`lit`](https://www.npmjs.com/package/lit) package rather than installing and importing from the `lit-element` package directly.

## About this release

This is a stable release of `lit-element` 3.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of `lit-element`, please see the [Upgrade Guide](https://lit.dev/docs/releases/upgrade/) for a step-by-step guide on upgrading.

## Documentation

Full documentation is available at [lit.dev](https://lit.dev).

## Contributing

Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).
npm package: @svalit/ssr-client
Description: Client package for @lit-labs/ssr.
Author: Google LLC
Latest version: 1.0.1

# @lit-labs/ssr-client

A set of client-side support modules for rendering Lit components and templates
on the server using `@lit-labs/ssr`.

## Overview

Package contents:

- `directives/render-light.js`: A child-position directive that invokes and
  renders the parent custom element's `renderLight` method as its value.

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).
npm package: @svalit/task
Description: A controller for Lit that renders asynchronous tasks.
Author: Google LLC
Latest version: 2.0.0

# @lit-labs/task

A controller for Lit that renders asynchronous tasks.

## Overview

Often a Lit element needs to request, process, and render remote data, for
example when querying a REST API for data to be displayed. The `Task`
controller provides a simple pattern for encapsulating this behavior in an
easily reusable way. The controller integrates with a host Lit element. The
user provides a task function and an arguments function. Whenever the element
updates, the arguments are checked and if any have changed, the task is
initiated.

Sometimes it's important to control exactly when a task runs. For example,
task arguments may have changed, but it should not run until an interaction
event like a button click. For these types of use cases, the `autoRun` option
can be set to `false`. This setting can be passed in the task configuration
and/or be set on the `Task` itself. It defaults to `true`, but when `autoRun`
is `false`, the task does not run automatically when arguments change.
Instead, it can be run explicitly by calling `run(arg?)`. By default, `run()`
uses the task's configured arguments function, but a custom array of arguments
may be optionally passed.

The controller requests an update of the element whenever the task
status changes. Task status is provided via the `TaskStatus` object which has
values for `INITIAL`, `PENDING`, `COMPLETE`, and `ERROR`. The task result is
available via its `value` property, or via the `error` property when an error
occurs. The task `render` method may also be used to easily render different
task states. It accepts an object which optionally can implement methods for
`initial`, `pending`, `complete(value)`, and `error(error)`. These methods
typically return a Lit `TemplateResult` to render.

## Installation

From inside your project folder, run:

```bash
$ npm install @lit-labs/task
```

## Usage

Here's an example:

```ts
import {Task, TaskStatus} from '@lit-labs/task';
// ...

class MyElement extends LitElement {
  @state()
  private _userId: number = -1;

  private _apiTask = new Task(
    this,
    ([userId]) =>
      fetch(`//example.com/api/userInfo?${userId}`).then((response) =>
        response.json()
      ),
    () => [this._userId]
  );

  render() {
    return html`
      <div>User Info</div>
      ${this._apiTask.render({
        pending: () => html`Loading user info...`,
        complete: (user) => html`${user.name}`,
      })}
      <!-- ... -->
    `;
  }
}
```

## Contributing

Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).