open-index/open-npm huggingface dataset:
npm package: @luvio/compiler
Description: Luvio Compiler
Latest version: 0.160.4

# @luvio/compiler

## Purpose

The Luvio Compiler package is the main code generator for API clients. It uses a two-phased approach to code generation.

1. Parsing
   - We take a RAML file and [parse it](./src/parser/main.ts) using [AMF](https://a.ml/docs/amf/using-amf/amf_parsing/) and our own custom annotations into an intermediate representation called [ModelInfo](./src/intermediate/model-info.ts);
2. Code Generation
   - We take the `ModelInfo` and we use it to inform generation of Typescript Api Clients. The code generator is designed to be somewhat composable, so the caller can decide which pieces of the `ModelInfo` they'd like to have generated by providing different "Source Writers" to the compiler. This is all coordinated by the [LuvioRamlCompiler](./src/compiler/raml-compiler.ts).
   - The main transformation from pieces of `ModelInfo` to the actual Typescript code happens in [codegen](./src/codegen/).
npm package: @luvio/durable-store-idb
Description: IndexedDB-based implementation of the Luvio DurableStore
Latest version: 0.160.4

# durable-store-idb

An implementation of the Luvio DurableStore based on [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).

## Install

```sh
npm i @luvio/durable-store-idb
```

## Usage

```js
import { IndexedDbDurableStore } from '@luvio/durable-store-idb';

const durableStore = new IndexedDbDurableStore();

const luvio = new Luvio(
  makeDurable(new Environment(new InMemoryStore(), networkAdapter), {
    durableStore,
  })
);
```
npm package: @luvio/environments
Description: Luvio Environments
Latest version: 0.160.4

# Luvio Environments

NOTE: This package is PRE-PRODUCTION and should not be consumed by applications at this point in time. Breaking changes can and will be added to this environment without notice!

Example of durable store environment being configured:

```ts
const store = new InMemoryStore();
const durableStore = new MyDurableStoreImplementation();
const env = makeDurable(new Environment(store, network), { durableStore });
const luvio = new Luvio(env);
```
npm package: @luvio/network-adapter-composable
Description: Composable adapter implementation of the Luvio NetworkAdapter
Latest version: 0.160.4

# network-adapter-fetch

An implementation of the Luvio NetworkAdapter that allows for multiple NetworkAdapters in the same environment.

## Install

```sh
npm i @luvio/network-adapter-composable
```

## Usage

```js
import { buildComposableNetworkAdapter } from '@luvio/network-adapter-composable';
import { composedJwtNetworkAdapter } from '@luvio/network-adapter-jwt';
import { fetchNetworkAdapter } from '@luvio/network-adapter-fetch';

const networkAdapter = buildComposableNetworkAdapter([
  composedJwtNetworkAdapter, // Ex: handle ResourceRequests that needs JWT authentication, leveraging on the baseUri
  {
    shouldHandleRequest: () => true, // default network adapter
    adapter: fetchNetworkAdapter,
  },
]);

const luvio = new Luvio(new Environment(new InMemoryStore(), networkAdapter));
```
npm package: @luvio/network-adapter-fetch
Description: fetch-based implementation of the Luvio NetworkAdapter
Latest version: 0.160.4

# network-adapter-fetch

An implementation of the Luvio NetworkAdapter based on [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

## Install

```sh
npm i @luvio/network-adapter-fetch
```

## Usage

```js
import { fetchNetworkAdapter } from '@luvio/network-adapter-fetch';

const luvio = new Luvio(new Environment(new InMemoryStore(), fetchNetworkAdapter));
```
npm package: @luvio/recipes
Description: Lightning Data Service Recipes
Latest version: 0.19.4-230.2.1
Deprecated: Package no longer supported

# Lightning Data Service Recipes

A collection of easy-to-digest code examples for Lightning Data Services (LDS). Each recipe demonstrates to how to configure LDS to control the behavior of the generated API clients. A link to the RAML takes you right to the code in GitHub.

## Exploring the recipes

### Generate artifacts

```
$ yarn build
```

### Start the server

```
$ yarn start
```

### View the recipes

Point your browser to [http://localhost:3000/](http://localhost:3000/).
npm package: @luvra/luvsql
Description: A lightweight, TypeScript-based relational database with SQL-like syntax and optional JSON persistence.
Author: Inale
Latest version: 0.4.2

# LuvSQL: A Modern, Lightweight Relational Database Framework

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
[![Tests](https://img.shields.io/badge/tests-passing-green)](https://jestjs.io/)

## Overview

LuvSQL is a next-generation relational database framework designed for full-stack developers, emphasizing simplicity, security, and performance. Built in TypeScript, it provides a human-friendly query syntax while maintaining core relational features like schemas, CRUD operations, and expressive filtering. Ideal for prototyping, edge computing, and integration with frameworks like Next.js, LuvSQL is secure-by-default with built-in validation and sanitization.

Key Pillars:
- **Developer-Friendly Syntax**: Verb-noun commands (e.g., `STORE|ENTRY`) for intuitive querying.
- **Security-First**: Input sanitization, type enforcement, and configurable encryption/RBAC.
- **Lightweight & Extensible**: In-memory core with persistence hooks; AST-based for custom extensions.
- **Performance**: Fast in-memory operations for small/medium datasets.

LuvSQL is not a full production DB yet (e.g., persistence is configurable but unimplemented), but it's a strong foundation for modern web apps.

## Fundamentals

LuvSQL models data as:
- **BluePrint**: Database schema containing Canvases (tables).
- **Canvas**: Table with verticalPanels (columns) and horizontalPanels (rows).
- **Queries**: Parsed to AST, validated, and executed via a modular engine.

Supported Features:
- Schema Definition: Types (INTEGER, TEXT, etc.), nullability, defaults, primaries.
- CRUD: Store, Retrieve (with WHERE, ORDER BY, LIMIT), Refine (update), Erase.
- Expressions: Binary/logical operators, LIKE, params for prepared statements.
- Validation: Runtime checks for types, identifiers, and safety.

## Getting Started

### Installation
```bash
git clone https://github.com/your-repo/luvsql.git
cd luvsql
npm install
npm run build
npm package: @luwes/dash-video-element
Description: Custom element for playing video using the DASH format. Uses dash.js.
Author: Wesley Luyten
Latest version: 1.0.1

# `<dash-video>`

[![Version](https://img.shields.io/npm/v/@luwes/dash-video-element?style=flat-square)](https://www.npmjs.com/package/@luwes/dash-video-element) 
[![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@luwes/dash-video-element/+esm?compression=gzip&label=gzip&style=flat-square)](https://cdn.jsdelivr.net/npm/@luwes/dash-video-element/+esm)

A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 
for dash.js with an API that matches the 
[`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API.

- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)

## Example

<!-- prettier-ignore -->
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/dash-video-element@1.0/+esm"></script>
<dash-video controls src="https://player.vimeo.com/external/648359100.mpd?s=a4419a2e2113cc24a87aef2f93ef69a8e4c8fb0c"></dash-video>
```

## Install

First install the NPM package:

```bash
npm install @luwes/dash-video-element
```

Import in your app javascript (e.g. src/App.js):

```js
import '@luwes/dash-video-element';
```

Optionally, you can load the script directly from a CDN using [JSDelivr](https://www.jsdelivr.com/):

<!-- prettier-ignore -->
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/dash-video-element@1.0/+esm"></script>
```

This will register the custom elements with the browser so they can be used as HTML.

## Related

- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
- [`<youtube-video>`](https://github.com/muxinc/youtube-video-element) A custom element for the YouTube player.
- [`<vimeo-video>`](https://github.com/luwes/vimeo-video-element) A custom element for the Vimeo player.
- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A custom element for Video.js.
- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player.
- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player.
- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
npm package: @luwes/disco
Description: Easy and universal way to react to elements being `disconnected` and `connected` via native DOM events.
Latest version: 1.0.0

# Disco 🕺

[![Version](https://img.shields.io/npm/v/@luwes/disco.svg?color=success&style=flat-square)](https://www.npmjs.com/package/@luwes/disco)
![Badge size](https://img.badgesize.io/https://unpkg.com/@luwes/disco/dist/disco.min.js?v=1&compression=gzip&label=gzip&style=flat-square)


**npm**: `npm i @luwes/disco`  
**cdn**: https://unpkg.com/@luwes/disco  

Easy and universal way to react to elements being `disconnected` and `connected` via native DOM events.

Observe via a direct node reference, an array of nodes or a string selector that internally makes use of `Element.matches(selectorString)`. It's recommended to keep the observed scope as small as possible for the best performance. 


## Example

```js
import { observe } from '@luwes/disco';

/**
 * Observe one specific div element
 */
const div = document.createElement('div');
observe(div);

div.addEventListener('connected', () => console.log('connected!'));
document.body.append(div);

/******************************************************************/

/**
 * Observe all (future) h1 elements.
 */
observe('h1');
const firstH1 = document.createElement('h1');
const lastH1 = document.createElement('h1');

firstH1.addEventListener('connected', () => console.log('connected!'));
lastH1.addEventListener('connected', () => console.log('connected!'));

document.body.append(firstH1, lastH1);

/******************************************************************/

/**
 * Observe all section elements in the document for removal.
 */
const sections = document.querySelectorAll('section');
observe(...sections);
[...sections].forEach(section =>
  section.addEventListener('disconnected', () => console.log('🕺')))
```

## API

<dl>
<dt><a href="#observe">observe(...nodesOrSelectors)</a></dt>
<dd><p>Observe a node, array of nodes or an element selector for dis-connected events.</p>
</dd>
<dt><a href="#unobserve">unobserve([...nodesOrSelectors])</a></dt>
<dd><p>Unobserve for dis-connected events.</p>
</dd>
</dl>

<a name="observe"></a>

## observe(...nodesOrSelectors)
Observe a node, array of nodes or an element selector for dis-connected events.

**Kind**: global function

| Param | Type |
| --- | --- |
| ...nodesOrSelectors | <code>Node</code> \| <code>String</code> |

<a name="unobserve"></a>

## unobserve([...nodesOrSelectors])
Unobserve for dis-connected events.

**Kind**: global function

| Param | Type |
| --- | --- |
| [...nodesOrSelectors] | <code>Node</code> \| <code>String</code> |
npm package: @luwes/hls-video-element
Description: Custom element for playing video using the HTTP Live Streaming (HLS) format. Uses hls.js.
Author: Wesley Luyten
Latest version: 1.2.1

# `<hls-video>`

[![Version](https://img.shields.io/npm/v/@luwes/hls-video-element?style=flat-square)](https://www.npmjs.com/package/@luwes/hls-video-element) 
[![Badge size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@luwes/hls-video-element/+esm?compression=gzip&label=gzip&style=flat-square)](https://cdn.jsdelivr.net/npm/@luwes/hls-video-element/+esm)

A [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 
for hls.js with an API that matches the 
[`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) API.

- 🏄‍♂️ Compatible [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API
- 🕺 Seamlessly integrates with [Media Chrome](https://github.com/muxinc/media-chrome)

## Example

<!-- prettier-ignore -->
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/hls-video-element@1.0/+esm"></script>
<hls-video controls src="https://stream.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA.m3u8"></hls-video>
```

## Install

First install the NPM package:

```bash
npm install @luwes/hls-video-element
```

Import in your app javascript (e.g. src/App.js):

```js
import '@luwes/hls-video-element';
```

Optionally, you can load the script directly from a CDN using [JSDelivr](https://www.jsdelivr.com/):

<!-- prettier-ignore -->
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@luwes/hls-video-element@1.0/+esm"></script>
```

This will register the custom elements with the browser so they can be used as HTML.

## Related

- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
- [`<youtube-video>`](https://github.com/muxinc/youtube-video-element) A custom element for the YouTube player.
- [`<vimeo-video>`](https://github.com/luwes/vimeo-video-element) A custom element for the Vimeo player.
- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A custom element for Video.js.
- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A custom element for the Wistia player.
- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A custom element for the JW player.
- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player custom element.
- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
npm package: @luwes/little-vdom
Description: Fork from developit/little-vdom
Latest version: 0.3.4

# 🍼 little-vdom

> Forked from developit's [little-vdom](https://gist.github.com/developit/2038b141b31287faa663f410b6649a87) gist.

**npm**: `npm i @luwes/little-vdom`  
**cdn**: [unpkg.com/@luwes/little-vdom](https://unpkg.com/@luwes/little-vdom)  

---

- 650B Virtual DOM
- Components
- State
- Diffing
- Keys
- Fragments
- Refs
- Style maps

Use reactive JSX with minimal overhead.

## Usage ([Codepen](https://codepen.io/luwes/pen/ZEXPbzE?editors=0011))

```jsx
/** @jsx h */

// Components get passed (props, state, setState)
function Counter(props, { count = 0 }, update) {
  const increment = () => update({ count: ++count });
  return <button onclick={increment}>{count}</button>
}

function Since({ time }, state, update) {
  setTimeout(update, 1000); // update every second
  const ago = (Date.now() - time) / 1000 | 0;
  return <time>{ago}s ago</time>
}

render(
  <div id="app">
    <h1>Hello</h1>
    <Since time={Date.now()} />
    <Counter />
  </div>,
  document.body
);
```
npm package: @luwes/memo
Description: Memoization with shallowly comparing object arguments.
Latest version: 1.0.1

# memo

Memoization with shallowly comparing object arguments.

```sh
npm i @luwes/memo
```

```js
import memo from '@luwes/memo';

let called = 0
const memoized = memo(
  a => {
    called++
    return a
  }
)
let obj = { a: 9 }
console.log(memoized(obj) === obj)
console.log(memoized({ a: 9 }) === obj)
console.log(called === 1)

let obj2 = { a: 7 }
console.log(memoized(obj2) === obj2)
console.log(called === 2)
```
npm package: @luwes/youtube-video-element
Description: Custom element (web component) for YouTube.
Author: Wesley Luyten
Latest version: 0.4.0

# `<youtube-video>`

A custom element (web component) for YouTube.

The element API matches the HTML5 `<video>` tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag.

One of the goals was to have `<youtube-video>` seamlessly integrate with [Media Chrome](https://github.com/muxinc/media-chrome).

## Example ([CodeSandbox](https://codesandbox.io/s/youtube-video-element-kvu1fv))

<!-- prettier-ignore -->
```html
<script type="module" src="https://unpkg.com/@luwes/youtube-video-element@0"></script>
<youtube-video controls src="https://www.youtube.com/watch?v=H3KSKS3TTbc"></youtube-video>
```

## Installing

`<youtube-video>` is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.

### Loading into your HTML using `<script>`

<!-- prettier-ignore -->
```html
<script type="module" src="https://unpkg.com/@luwes/youtube-video-element@0"></script>
```

### Adding to your app via `npm`

```bash
npm install @luwes/youtube-video-element --save
```

Include in your app javascript (e.g. src/App.js)

```js
import '@luwes/youtube-video-element';
```

This will register the custom elements with the browser so they can be used as HTML.

## Related

- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A web component for Video.js.
- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A web component for the Wistia player.
- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A web component for the JW player.
- [`<hls-video>`](https://github.com/muxinc/hls-video-element) A web component for playing HTTP Live Streaming (HLS) videos.
- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player web component.
npm package: @luwuer/yunin-cli
Description: yunyin cli for web project
Latest version: 1.0.5

yunin-cli是云英的前端脚手架工具，初衷是为解决从已有项目中剥离基础模较为繁琐的问题，统一管理项目基础模板。

脚手架处理流程如下：
1. 上传模板到git仓库，模板就是你从项目中剥离的基础模块
2. 添加模板到脚手架
3. 拉取已选择的模板到本地

### Usage

```bash
# step 1
yarn global add @luwuer/yunin-cli

# step 2
yunin <command>
```

### Command

- `init`   初始项目
- `list`   查看已有模板
- `add`    [本地]添加模板
- `remove` [本地]删除模板

> 由于没有服务器，`add` && `remove`只支持本地添加和删除模板。
> 如果需要上传远程模板，可以在[github](https://github.com/luwuer/yunin-cli)提Pull Request，或者联系邮箱`html6@foxmail.com`

### Dependencies

- [commander](https://github.com/tj/commander.js) 处理命令行输入
- [inquirer](https://github.com/SBoudrias/Inquirer.js) 命令行输出提示信息让用户分布输入信息，支持多种输入类型
- [chalk](https://github.com/chalk/chalk) 命令行输出彩色提示信息
- [cli-spinner](https://www.npmjs.com/package/cli-spinner) 命令行加载动画
- [glob](https://www.npmjs.com/package/glob) 支持正则匹配文件