open-index/open-npm huggingface dataset:
npm package: @poorest/blog
Description: my website
Latest version: 2.1.2

# a lightweight private npm repository server

## Install AND Usage

```bash
    $ npm i @poorest/npm -g
    $ poorest-npm -h  # help
    $ poorest-npm  # start
    
    $ npm set registry http://localhost:9000/
    $ npm set ca null # 如果你使用 HTTPS

    $ nohup poorest-npm & /dev/null 2&1
    $ lsof -i:9001
```
npm package: @poorest/ejs
Description: my ejs.
Latest version: 2.1.0

# @poorest/ejs
my ejs

<br/>

### install

```sh
	 npm i -S @poorest/ejs
```

### API 说明
- `EJS.configure(options, [fixContext])`修改内置`Context`，第一个参数是`配置项`, 第二个参数可选函数，可以对`Context`进行补充修改
- `EJS.inject(name: string, handle: any, replace: boolean = false)`为模板注入一些功能, `name`在模板中名称，`handle`在模板中`name`变量对应的值或函数，`replace`是否替换已经注入的
- `EJS.complie(path: string, options?: EJS.IOptions)` 翻译模板，返回一个render函数
- `EJS.render(path: string, data: any, options?: EJS.IOptions)` 渲染指定`path`的模板，`path`为模板路径，`data`为传递给渲染函数的数据，`options`为配置项，可以修改`Context`
- `EJS.clearCache` 清空现有缓存

```ts
	// 所有API都绑定在 EJS 这个对象上 
	const { EJS } = require('@poorest/ejs');

	// 一些可选配置项
	EJS.configure({
	})
	
	// 注入一些
	EJS.inject(name, handle, replace)

	// 渲染模板
	EJS.render(path, data, options?)

	// 翻译模板，返回一个render函数
	EJS.complie(path: string, options?: EJS.IOptions)
```

### 配置项说明

- `strict` boolean 类型，是否在模板翻译之后的函数内部使用`"use strict";`
- `debug` boolean 类型, 是否在模版翻译时输出行号
- `rmWhitespace` boolean 类型，是否移除模板每一行行首的的空格与换行符
- `scope` 自定义类型，翻译模板得到的函数的内部`this`指针
- `delimiter` string类型，模板标签的标志性字符，默认是`%`, 如:`<%- %>`
- `cache` boolean类型，是否启用翻译缓存，将模板的翻译后的函数缓存起来，下次翻译时直接使用
- `cacheScheduler` 内置Map类型，缓存管理的调度对象，可使用`LRU`算法替换
```ts
	const LRU = require('lru-cache');
    const cacheScheduler = new LRU(Object.assign({ max: 100 }, cacheOptions));
```
- `suffix` string类型，模板文件的后缀名
- `root` string类型，模板文件的根目录
- `locals` string类型，默认为`locals`，即在模版中的全局变量的名称
- `viewLoader` 函数类型，返回模版的内容，这个函数具有两个参数，第一个是模板文件的相对路径；第二个是模板翻译时的`context`，上面存储了翻译过程中使用的量，请不要在该函数中修改这些量
- `inject` 对象数组类型, 注入到模板的函数或这变量，该对象包含`name`和`handle`两个属性，`name`即注入到模板中时使用的名称，`handle`即该对应的处理方式，可以是一个函数，也可以是变量，同时还可以使用API给模版中注入，默认注入:`include`功能
npm package: @poorest/simple-db-driver
Description: a lightweight nodejs db driver.
Latest version: 2.1.2

# @poorest/simple-db-driver

a lightweight nodejs db driver

```sh
    npm i @poorest/simple-db-driver
    # or 
    pnpm add @poorest/simple-db-driver
    # or 
    yarn add @poorest/simple-db-driver
```
npm package: @poortable/react-native-appmetrica
Description: React Native plugin for AppMetrica analytics tool
Author: YANDEX LLC/poortable
Latest version: 2.0.1

# react-native-appmetrica
React Native bridge to the [AppMetrica](https://appmetrica.yandex.com/) on both iOS and Android.

## Installation

1. `npm install react-native-appmetrica --save`
2. If React Native version <= 0.59: \
  `react-native link react-native-appmetrica`
3. iOS only
  * if `${PROJECT_DIR}/ios/Podfile` exists: \
  `npx pod-install`
  * if `${PROJECT_DIR}/ios/Podfile` don't exists: \
  [Setup AppMetrica](https://appmetrica.yandex.com/docs/mobile-sdk-dg/tasks/ios-quickstart.html) and placed frameworks at `${PROJECT_DIR}/ios/Frameworks`

## Usage

```js
import AppMetrica from 'react-native-appmetrica';

// Starts the statistics collection process.
AppMetrica.activate({
  apiKey: '...KEY...',
  sessionTimeout: 120,
  firstActivationAsUpdate: false,
});

// Sends a custom event message and additional parameters (optional).
AppMetrica.reportEvent('My event');
AppMetrica.reportEvent('My event', { foo: 'bar' });

// Send a custom error event.
AppMetrica.reportError('My error');
```
npm package: @poorvangpatel/web-component
Description: An Angular web component
Author: poorvangpatel
Latest version: 1.0.5

# WebComponent

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.13.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @poouladorbit/treeway
Description: Show your files and directories like tree branches🌴
Author: pooulad
Latest version: 1.0.3

# treeway🌴

Show your files and directories like tree branches🌴

# install with npm

```bash
npm install @poouladorbit/treeway
```

# install with yarn

```bash
yarn add @poouladorbit/treeway
```

# Usage

To use the treeway🌴, use the following example:

```javascript
import React from "react";
import Treeway from "@poouladorbit/treeway";

function Test() {
  const items = [
    {
      name: "folder1",
      type: "directory",
      children: [
        {
          name: "file-1",
          type: "file",
        },
      ],
    },
  ];
  return (
    <div>
      <Treeway items={items} />
    </div>
  );
}

export default Test;
```

![treeway_props_image](https://github.com/pooulad/treeway/blob/main/images/Treeway_Props.png)

## props

- items: array of objects(node data).
- backgroundColor: background color for the buttons.
- direction: direction of treeway to open subitems in left or right.

# sample image of the project

![treeway_preview_image](https://github.com/pooulad/treeway/blob/main/images/Treeway_Screenshot.png)

# Contributing

This is my first package😁. So if you find any issues or have suggestions for improvements, please open an issue or submit a pull request on [GitHub](https://github.com/pooulad/treeway).

Please follow the semantic-release package rules for commits. for more information see [Semantic-Release](https://github.com/semantic-release/semantic-release)

# License

This project is licensed under the MIT [License](LICENSE) - see the [License](LICENSE) file for details.

# Todo

- [ ] imporve style
- [ ] add checkbox(optional props)
npm package: @poozle/engine-edk
Description: Used to develop extensions for Poozle
Author: Poozle
Latest version: 0.2.13

# Extension Development Kit \(Typescript\)

The Poozle Typescript EDK is a framework for rapidly developing production-grade Poozle connectors. The EDK currently offers helpers specific for creating Poozle extension connectors for:

- Ticketing
- Messaging

The EDK provides an improved developer experience by providing basic implementation structure and abstracting away low-level glue boilerplate.

This document is a general introduction to the EDK.

## Getting Started

Generate an empty connector using the code generator. First clone the Poozle repository then from the repository root run

```text
cd engine-integrations/extension-templates/generator
yarn
yarn generate
```

then follow the interactive prompt. Next, find all `TODO`s in the generated project directory -- they're accompanied by lots of comments explaining what you'll need to do in order to implement your connector. Upon completing all TODOs properly, you should have a functioning connector.
npm package: @poozle/engine-idk
Description: Used to develop integrations for Poozle
Author: Poozle
Latest version: 0.1.45

# Integration Development Kit \(Typescript\)

The Poozle Typescript IDK is a framework for rapidly developing production-grade Poozle connectors. The IDK currently offers helpers specific for creating Poozle integration connectors for:

- Ticketing
- Messaging

The IDK provides an improved developer experience by providing basic implementation structure and abstracting away low-level glue boilerplate.

This document is a general introduction to the IDK.

## Getting Started

Generate an empty connector using the code generator. First clone the Poozle repository then from the repository root run

```text
cd engine-integrations/integration-templates/generator
yarn
yarn generate
```

then follow the interactive prompt. Next, find all `TODO`s in the generated project directory -- they're accompanied by lots of comments explaining what you'll need to do in order to implement your connector. Upon completing all TODOs properly, you should have a functioning connector.
npm package: @poozle/react-poozle-link
Description: A React hook wrapper for Poozle Link.
Latest version: 2.2.3

# react-poozle-link

See documentation at https://poozle.dev/docs/linking-flow/get-started.

When updating this repo, bump the version number in `package.json` according to this semantic versioning scheme: https://docs.npmjs.com/about-semantic-versioning
npm package: @pop3/graphics
Description: JavaScript tools for reading and rendering [Populous: The Beginning](https://en.wikipedia.org/wiki/Populous:_The_Beginning) graphics files.
Latest version: 1.0.0-alpha.1

# POP3 - Graphics

JavaScript tools for reading and rendering [Populous: The Beginning](https://en.wikipedia.org/wiki/Populous:_The_Beginning) graphics files.

## Installation

```sh
npm install --save @pop3/graphics
```

## Usage

```js
const initGraphics = require('@pop3/graphics')

// Files should be a map that maps filenames to file content
const files = new Map(/* ... */)

// Create a graphics manager
const graphics = initGraphics(files)

// Load a palette
const palette = graphics.getPalette('data/fenew/fepal0.dat')

// Load a raw sprite file
const background = graphics.getRawSprite('data/fenew/febackg0.dat', 640, 480)

// Load a sprite file with multiple sprites
const logo = graphics.getSprites('data/fenew/felgspen.spr')

// Load a font
const largeTextFont = graphics.getFont('data/fenew/felo33we.spr', 'data/fenew/fepal0.dat')

// Draw a simple scene
const canvas = document.createElement('canvas')

canvas.width = 640
canvas.height = 480

const context = canvas.getContext('2d')

context.drawImage(background.render(palette), 0, 0)
context.drawImage(logo[0].render(palette), 180, 10)
context.drawImage(logo[1].render(palette), 460, 10)
context.drawImage(largeTextFont.renderText('Hello, World!'), 400, 140)
```

Produces:

![example output](example.png)

## API

### `init(files: Map<string, ArrayBuffer | Uint8Array>): Manager`

Initialize a new Graphics Manager.

The files map should be a map that maps filenames into either an `ArrayBuffer` (browser) or `Buffer` (Node.js).

### `Manager`

*to be written*

### `Font`

*to be written*

### `Palette`

*to be written*

### `Sprite`

*to be written*
npm package: @popa-marius/pushstate-server
Description: Static file server that works with HTML5 Pushstate.
Author: Scott Corgan
Latest version: 3.1.2

# pushstate-server

Forked version with bugfixes from `https://github.com/scottcorgan/pushstate-server`

Static file server that works with HTML5 Pushstate.

For example, the route ` /some/pushstate/route ` will return the ` index.html ` file. But, ` /some/static/path/logo.png ` will return the ` logo.png ` static file.

## Install

```
npm install pushstate-server --save
```

## Usage

```js
var server = require('pushstate-server');

server.start({
  port: 3000,
  directory: './public'
});
```

or for multiple directories

```js
var server = require('pushstate-server');

server.start({
  port: 4200,
  directories: ['./public', './bower_components']
});
```

or bind to a particular host

```js
server.start({
  port: 4200,
  host: '192.99.100.01',
  directories: ['./public', './bower_components']
});
```


## Global Install

```
npm install -g pushstate-server
```

```
usage: pushstate-server [-d directory] [-p port] [-f file]
```

## API

#### start(options[, callback])
* start the pushstate static file server

##### options

* `port`
  * set the port that the server should open
  * uses ` process.env.PORT ` if not specified, and defaults to port ` 9000 ` if none is available
* `directory`
  * the path to the directory where the static assets will be served
  * defaults to ` public `
* `file`
  * Custom file to serve
  * defaults to `index.html`
npm package: @popak/tp-starter
Description: A fast starter to create a normal typescript project
Author: poplark
Latest version: 1.0.0

# `@popak/tp-starter`

功能：快速创建一个标准的 typescript 项目代码库

## Usage

全局安装

```
npm install -g @popak/tp-starter
```

命令行创建项目

```
tps create xxx
```

## Features

1. 使用 typedoc 生成文档
2. 使用 eslint, prettier 规范代码
3. 使用 husky, lint-staged, pre-commit 进行代码提交检查修正
4. 使用 webpack 打包
5. 使用 typescript 生成 d.ts 文件
6. 自动初始化 git 代码库
7. 自动安装依赖库

todo
1. 支持 gulp x
2. 支持 rollup √
3. 支持 rollup 模板，配置文件等 √
4. 使用 lerna 管理 webpack, rollup 等模板库 √
5. init git √
6. install node_modules √
7. 支持 commit lint √
8. 检查 project 是否存在，提供 覆盖、合并、取消的选择
9. 支持 test 测试初始化
10. 自动 init commit
npm package: @popak/typescript-boilerplate
Description: 功能：快速创建一个标准的 typescript 代码库
Author: poplark
Latest version: 1.2.2


功能：快速创建一个标准的 typescript 代码库

功能点：
1. 使用 typedoc 生成文档
2. 使用 eslint, prettier 规范代码
3. 使用 husky, lint-staged, pre-commit 进行代码提交检查修正
4. 使用 webpack 打包
5. 使用 typescript 生成 d.ts 文件
6. 自动初始化 git 代码库
7. 自动安装依赖库

todo
1. 支持 gulp
2. 支持 rollup
npm package: @popcodeorg/eslint-import-resolver-jest
Description: 🃏 Jest import resolution plugin for eslint-plugin-import
Author: Christian Maniewski
Latest version: 2.1.1-popcode.1

# eslint-import-resolver-jest

[![Greenkeeper badge](https://badges.greenkeeper.io/JoinColony/eslint-import-resolver-jest.svg)](https://greenkeeper.io/)

_"I like my `testutils` where I can see 'em"_ 🕵🏽‍♀️

[![CircleCI](https://circleci.com/gh/JoinColony/eslint-import-resolver-jest.svg?style=svg)](https://circleci.com/gh/JoinColony/eslint-import-resolver-jest)

If you're using [jest](https://facebook.github.io/jest/) and you have installed custom name mappings in your config via the `moduleNameMapper` config and you're using the wonderful [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) you might get yelled at by eslint:

<img width="991" alt="grafik" src="https://cloud.githubusercontent.com/assets/2174084/25067977/a80c8d9e-2219-11e7-9189-4860d7f771d5.png">

(I oftentimes create an alias for the helpers I use for testing)

### Let's fix this!

```shell
yarn add eslint-import-resolver-jest -D
```

or

```shell
npm i eslint-import-resolver-jest -D
```

If you are using the [`package.json`](https://facebook.github.io/jest/docs/configuration.html) config option from jest everything should _just work_™.

If you are using a separate config file for jest using the `--config` option you have to point this plugin to it, too (in your .eslintrc):

```json
"settings": {
  "import/resolver": {
    "jest": {
      "jestConfigFile": "./jest.conf.json"
    }
  }
}
```

That's it!

#### Note

It will only resolve the modules in your test files that you specified via `testRegex` or `testMatch` in your jest config.

### Contributing

Create issues in this repo or get active yourself:

```shell
yarn test # npm test works, too
```

### License

MIT
npm package: @popcorn-video/video
Description: ```js import { Player, createHTML5Decoder } from '@popcorn-video/video';
Author: huey.LS
Latest version: 0.1.9

```js
import { Player, createHTML5Decoder } from '@popcorn-video/video';

new Player({
  decoders: [
    createHTML5Decoder({
      htmlAttributes: {'xx':'xx'}
    })
  ],
  sources: [{
    src: 'xxx.mp4',
    type: 'video/mp4'
  }]
})
```
npm package: @popcorn.moe/migi
Description: Our right hand to write Discord bots
Author: Popcorn.moe
Latest version: 1.6.0

# Migi

[![npm](https://img.shields.io/npm/v/@popcorn.moe/migi.svg)](https://www.npmjs.com/package/@popcorn.moe/migi)

![logo](https://vignette.wikia.nocookie.net/kiseijuu/images/0/0c/Migi.png)
Our right hand to write Discord bots

## Examples

### With decorators (Need babel)

```javascript
import Migi, { command, on } from '@popcorn.moe/migi'

class Ping {
	@command(/^ping(?: (.*))?$/)
	ping({ channel }, arg) {
		channel.send(`Ping ${arg}!`)
	}

	@on('ready')
	onReady() {
		console.log('Ready')
	}
}

const migi = new Migi({
	root: __dirname
})

migi.loadModule(Ping)

migi.on('ready', () => console.log(`Ready @${migi.user.tag}`))

migi.login(process.env.DISCORD_TOKEN)
```

### Without decorators

```javascript
const { Migi } = require('@popcorn.moe/migi')

class Ping {
	constructor(migi) {
		migi.command(/^ping(?: (.*))?$/, this, 'ping')
		migi.listen('ready', this, 'onReady')
	}

	ping({ channel }, arg) {
		channel.send(`Ping ${arg}!`)
	}

	onReady() {
		console.log('Ready')
	}
}

const migi = new Migi({
	root: __dirname
})

migi.loadModule(Ping)

migi.on('ready', () => console.log(`Ready @${migi.user.tag}`))

migi.login(process.env.DISCORD_TOKEN)
```
npm package: @popcornfinance-org/uikit
Description: Set of UI components for Popcorn Finance projects
Author: Popcorn Finance
Latest version: 0.9.4

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @popcornjs/firedb
Description: A firebase cloud firestore wrapper
Author: Just a badly drawn TABS dude
Latest version: 1.0.0

# fireDB

## the firebase realtime database wrapper

### Features

- easy setup
- built in typings
- most things are avalible
- absoltly t i n y
- just g o o d

soon gonna be used for popcorn-backend

### example use

```ts
import * as db from '@popcornjs/firedb';
const firebaseDB = firebase.database()
db.init(firebaseDB)
(
	// Because top level await doesnt exist :(
	async () => {
		db.update('something', 'New value!');
		const something = await db.get('something');
		console.log(something);
		db.remove( 'something');
	},
)();

// subscribing
db.subscribe('ThingToSubscribeTo', (value, Snapshot) => console.log(value));
```
npm package: @popcornswap/core
Description: Core contracts for the SushiSwap protocol
Latest version: 1.0.0

# SushiSwap

https://sushi.com/

## Deployed Contracts

https://dev.sushi.com/sushiswap/contracts

## Docs

[Development](docs/DEVELOPMENT.md)

[Deployment](docs/DEPLOYMENT.md)

[History](docs/HISTORY.md)

## Security

[Security Policy](SECURITY.md)

## License

[MIT](LICENSE.txt)
npm package: @popcornswap/sdk
Description: 🛠 An SDK for building applications on top of popcornswap.
Latest version: 1.0.2

# Sushiswap SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

This modifies uniswap-sdk's UniswapV2Factory address. The new address for sushiswap is  `0xC0AEe478e3658e2610c5F7A4A2E1777cE9e4f2Ac`.

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/sushiswap/sushiswap-sdk.git
```

Move into the sushiswap-sdk working directory

```sh
cd sushiswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @popeindustries/lit
Description: Seamlessly render lit templates and elements on the server and in the browser
Author: Alexander Pope
Latest version: 1.3.5

[![NPM Version](https://img.shields.io/npm/v/@popeindustries/lit.svg?style=flat)](https://npmjs.org/package/@popeindustries/lit)

# @popeindustries/lit

A convenient, all-in-one package for server-rendering and hydrating [**lit**](https://lit.dev) templates and web components.

## Features

- fast, streaming, Node.js server or `ServiceWorker` rendering
- seamless and efficient client-hydration via `render()`
- compatible with all synchronous directives
- proxies asynchronous directives for server streaming
- extensive web component features:
  - server render and hydrate light or shadow DOM
  - default support for `element.innerHTML` and `element.render()`
  - lazy client-hydration with `hydrate:idle` and `hydrate:visible` attributes
  - `LitElement` base class support
  - render any base class with a custom `ElementRenderer`

## Usage

Install with `npm/yarn/pnpm`:

```bash
$ npm install --save @popeindustries/lit
```

Author templates (see [lit-html](https://github.com/popeindustries/lit/tree/main/packages/lit-html)):

```js
import { html, svg, render } from '@popeindustries/lit';
import { directive } from '@popeindustries/lit/directive.js';
import { until } from '@popeindustries/lit/directives/until.js';
```

Author LitElement web components (see [lit-element](https://github.com/popeindustries/lit/tree/main/packages/lit-element)):

```js
import { css, LitElement } from '@popeindustries/lit';
import { LitElementRenderer } from '@popeindustries/lit/lit-element-renderer.js';
```

Author custom web components (see [lit-html-server](https://github.com/popeindustries/lit/tree/main/packages/lit-html-server)):

```js
import { ElementRenderer } from '@popeindustries/lit/element-renderer.js';
import { lazyHydrationMixin } from '@popeindustries/lit/lazy-hydration-mixin.js';
```

Server render templates and web components (see [lit-html-server](https://github.com/popeindustries/lit/tree/main/packages/lit-html-server)):

```js
import { renderToNodeStream, renderToString, renderToWebStream } from '@popeindustries/lit/html-server.js';
```
npm package: @popeindustries/lit-element
Description: Enable hydration of lit-element elements rendered on the server with @popeindustries/lit-html-server
Author: Alexander Pope
Latest version: 3.1.5

[![NPM Version](https://img.shields.io/npm/v/@popeindustries/lit-element.svg?style=flat)](https://npmjs.org/package/@popeindustries/lit-element)

# @popeindustries/lit-element

Seamlessly and efficiently use [@popeindustries/lit-html-server](https://github.com/popeindustries/lit/tree/main/packages/lit-html-server/) rendered HTML to hydrate **lit-element** web components in the browser, including lazy hydration with `hydrate:idle` or `hydrate:visible` attributes.

## Usage

Install with `npm/yarn/pnpm`:

```bash
$ npm install --save @popeindustries/lit-element
```

Create a web component:

```js
import { css, html, LitElement } from '@popeindustries/lit-element';

class MyEl extends LitElement {
  static styles = css`
    p {
      color: green;
    }
  `;
  render() {
    return html`<p>I am green!</p>`;
  }
}

customElements.define('my-el', MyEl);
```

...render a page template on the server with [`@popeindustries/lit-html-server`](https://github.com/popeindustries/lit/tree/main/packages/lit-html-server/):

```js
import './my-el.js';
import { html, renderToNodeStream } from '@popeindustries/lit-html-server';
import { hydratable } from '@popeindustries/lit-html-server/directives/hydratable.js';
import { LitElementRenderer } from '@popeindustries/lit-element/lit-element-renderer.js';
import http from 'node:http';

http.createServer(
  (request, response) => {
    response.writeHead(200);
    renderToNodeStream(html`<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <title>LitElement example</title>
        </head>
        <body>
          <my-el></my-el>
        </body>
      </html>`).pipe(response);
  },
  {
    // Register a renderer for LitElement components
    renderers: [LitElementRenderer],
  },
);
```

...and import the same web component in the browser to trigger hydration/render on changes:

```js
import './my-el.js';

// Trigger hydration/initial update
document.querySelector('body > my-el').removeAttribute('hydrate:defer');
```

> **Note**
> Due to how the `lit*` family of packages are minified and mangled for production, the `@popeindustries/lit-element` package is forced to _vendor_ all dependencies to `lit-element` and `@lit/reactive-element` packages. This shouldn't affect normal use as long as application code does not mix imports from `@popeindustries/lit-element` and `lit-element`.