open-index/open-npm huggingface dataset:
npm package: @laucher1998/utils
Description: 一个基于typescript的跨平台的实用工具集，专为现代前端框架（如Vue、React等）设计，旨在简化开发流程、提高效率并确保代码的可维护性。集合大量前端常用工具，无论你是在构建响应式用户界面、处理异步操作还是优化性能，都是你的理想选择。
Author: laucher
Latest version: 1.2.3

<br>
<p align="center">
@laucher1998/utils   
<br />
常用的工具函数（utils、hooks）
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@laucher1998/utils" target="__blank"><img src="https://img.shields.io/npm/v/@laucher1998/utils?color=a1b858&label=" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@laucher1998/utils" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@laucher1998/utils?color=50a36f&label="></a>
</p>

**中文** 

## 👀 文档

- [文档地址](https://utils.czhlove.cn/)

## 🚀 特性

- 🌎 **任意`JavaScript`环境中运行**: 支持`Node.js`、浏览器以及任意`JavaScript`框架
- 📡 **可通过`CDN`引用**: 同时支持`jsdelivr`和`unpkg`
- ⚡️ **完全可摇树**: 自带`Tree-shaking`，只对引入的代码进行打包
- 💫 **零依赖**: 零`Dependencies`依赖，只会安装项目本身
- 🦾 **强类型**: 使用`TypeScript`编写，拥有强大的类型推导提示
- 💯 **`100%`测试**: `100%`测试覆盖率，`100%`测试通过率

## 📦 安装

```bash
# npm
npm install @laucher1998/utils

# or yarn
yarn add @laucher1998/utils

# or pnpm
pnpm add @laucher1998/utils
```

## 📡 `CDN`

```html
<!-- 提供包含所有方法的全局变量 PureUtils -->

<!-- jsdelivr -->
<script src="//cdn.jsdelivr.net/npm/@laucher1998/utils"></script>

<!-- unpkg -->
<script src="//unpkg.com/@laucher1998/utils"></script>
```

## 许可证

[MIT © 2022-present, laucher1998](./LICENSE)
npm package: @lauded/widget
Description: Lauded embeddable for page/popup widgets
Author: Lauded
Latest version: 0.6.11

# Lauded Widget

Full page widget
`<lauded-page-widget api-key="api_key"></lauded-page-widget>`

Popup widget
`<lauded-popup-widget api-key="api_key"></lauded-popup-widget>`

# Build for production & deploy
1. Increase version in `package.json`
2. Ensure `VITE_API_URL` is correct in .env
3. Run `vite build` or `yarn build`
4. Run `npm publish --access public` (need to be logged in and have access to publish)

# Code for site
Header:
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lauded/widget/dist/style.css">`

Before </body> tag:
`<script type="module" src="https://cdn.jsdelivr.net/npm/@lauded/widget/dist/lauded-widget.umd.min.js"></script>`
npm package: @laudspeaker/clickhouse-migrations
Description: ClickHouse Migrations
Latest version: 1.0.1


# clickhouse-migrations

> ClickHouse Migrations CLI

## Install

```sh
npm install --global clickhouse-migrations
```

## Usage

Create a directory, where migrations will be stored. It will be used as the value for the `--migrations-home` option (or for environment variable `CH_MIGRATIONS_HOME`).

In the directory, create migration files, which should be named like this: `1_some_text.sql`, `2_other_text.sql`, `10_more_test.sql`. What's important here is that the migration version number should come first, followed by an underscore (`_`), and then any text can follow. The version number should increase for every next migration. Please note that once a migration file has been applied to the database, it cannot be modified or removed. 

For migrations' content should be used correct SQL ClickHouse queries. Multiple queries can be used in a single migration file, and each query should be terminated with a semicolon (;). The queries could be idempotent - for example: `CREATE TABLE IF NOT EXISTS table ...;` Clickhouse settings, that can be included at the query level, can be added like `SET allow_experimental_object_type = 1;`. For adding comments should be used `--`, `# `, `#!`. 

If the database provided in the `--db` option (or in `CH_MIGRATIONS_DB`) doesn't exist, it will be created automatically.

```
  Usage
    $ clickhouse-migrations migrate <options>

  Required options
      --host=<name>             Clickhouse hostname 
                                  (ex. https://clickhouse:8123)
      --user=<name>             Username
      --password=<password>     Password
      --db=<name>               Database name
      --migrations-home=<dir>   Migrations' directory

  Environment variables
      Instead of options can be used environment variables.
      CH_MIGRATIONS_HOST        Clickhouse hostname (--host)
      CH_MIGRATIONS_USER        Username (--user)
      CH_MIGRATIONS_PASSWORD    Password (--password)
      CH_MIGRATIONS_DB          Database name (--db)
      CH_MIGRATIONS_HOME        Migrations' directory (--migrations-home)

  CLI examples
      clickhouse-migrations migrate --host=http://localhost:8123 
      --user=default --password='' --db=analytics 
      --migrations-home=/app/clickhouse/migrations

      clickhouse-migrations migrate 
```

Migration file example:
```
-- an example of migration file 1_init.sql

SET allow_experimental_object_type = 1;

CREATE TABLE IF NOT EXISTS events (
  event JSON
);
```
npm package: @lauf/lauf-runner
Description: [![codecov](https://codecov.io/gh/cefn/lauf/branch/main/graph/badge.svg?token=H4O0Wmvho5&flag=lauf-runner)](https://codecov.io/gh/cefn/lauf)
Author: Cefn Hoile
Latest version: 0.1.0-beta.14

[![codecov](https://codecov.io/gh/cefn/lauf/branch/main/graph/badge.svg?token=H4O0Wmvho5&flag=lauf-runner)](https://codecov.io/gh/cefn/lauf)
npm package: @lauf/queue
Description: In-memory MessageQueue with compile-time-immutable state.
Author: Cefn Hoile
Latest version: 2.0.0

## Minimal in-memory message queue

A Typescript queue implementation with...

- a Promise-oriented, Generic API to build your own event loops
- queue limits to facilitate [backpressure](https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7)
- immutable queue state to facilitate [time-travel debugging](https://medium.com/replay-io/introduction-to-time-travel-debugging-a02786c5c0d9)

Read the [API Reference](https://cefn.com/lauf/api/modules/_lauf_queue.html) or the reference usages below.

## Usage

```typescript
// Create a queue that accepts any values
const queue = createQueue();

// put an event in the queue
queue.send({
  kind: "move",
  x: 200,
  y: 200,
});

// block until next event is available
const action = await queue.receive();
```

```typescript
// define an event type
interface Coordinate {
  x: number;
  y: number;
}

// Create a queue for typed events
const typedQueue = createQueue<Coordinate>();

// block until next event is available
const { x, y } = await queue.receive();
```

### Import OR Require

```javascript
import { createQueue } from "@lauf/queue"; // for esm
const { createQueue } = require("@lauf/queue"); // for commonjs
```

## Getting Started

### Install

```zsh
npm install @lauf/queue
```
npm package: @lauf/store-edit
Description: Intuitive editing of @lauf/store state, (using Immer drafts)
Author: Cefn Hoile
Latest version: 2.0.0

## Edit a store's immutable state

An idiot-proof mechanism to write @lauf/store state without breaking immutability. Guarantees safe Immutable edits without needing to learn [Immutable update patterns](https://redux.js.org/usage/structuring-reducers/immutable-update-patterns)

Read the [API Reference](https://cefn.com/lauf/api/modules/_lauf_store_edit.html) or the reference usages below.

## Usage

### Making Edits

```typescript
// given this example store
const counterState = createStore({ counter: 0 });

// editing a draft writes a new immutable state
edit(counterState, (draft) => (draft.counter += 1));
```

## How it works

Your editor function is passed a draft object matching store state. Edit the
draft using any javascript syntax. [Immer](https://www.npmjs.com/package/immer)
then efficiently composes a new Immutable state to reflect your drafted changes,
leaving the old state intact. The new state is passed to `store.write(...)`.

### Import OR Require

```javascript
import { edit } from "@lauf/store-edit"; // for esm
const { edit } = require("@lauf/store-edit"); // for commonjs
```

## Getting Started

### Install

```zsh
npm install @lauf/store-edit
```

### Demonstration Apps

Selected [Example Counter Apps](https://github.com/cefn/watchable/tree/main/apps) offer minimal demonstrations of `@lauf/store-edit`. See the following...

- [counter-react-ts-edit](https://github.com/cefn/watchable/tree/main/apps/counter-react-ts-edit#readme)
- [counter-react-ts-edit-context](https://github.com/cefn/watchable/tree/main/apps/counter-react-ts-edit-context#readme)
npm package: @lauf/store-follow
Description: Await @lauf/store state changes and trigger business logic
Author: Cefn Hoile
Latest version: 2.0.0

## Track selected changes to state

Promise-oriented tracking to monitor selected parts of a @lauf/store {@link Store}.
Re-runs a Selector after each change to store state, and notifies when the
value returned by the Selector changes.

Read the [API Reference](https://cefn.com/lauf/api/modules/_lauf_store_follow.html) or the reference usages below.

## Usage

### Follow a Selector

```typescript
// given this example store
const gameStore = createStore({
  steps: 0,
  direction: null,
});

// queue any changes to `steps` to be passed to a callback
followSelector(
  gameStore,
  (state) => state.steps,
  async (steps) => {
    stepDisplay.innerText = `Completed ${steps} steps`;
  }
);
```

## Getting Started

### Install

```zsh
npm install @lauf/store-edit
```

## Advanced Usage

### Explicitly handle queue.receive()

For complex examples needing access to underlying queue logic, use
`withSelectorQueue`. It's what `followSelector` uses under the hood.

Sometimes you can't afford the syntactic sugar of `followSelector` which
subscribes your callback automatically and hides the `queue.receive()` API
that is notified of changes to your selection.

Like `followSelector`, `withSelectorQueue` also creates and subscribes a Queue
to be notified every time a new value is returned, but it passes this Queue
direct to your handler along with the initial selected value. It unsubscribes and
disposes the queue only when your handler returns.

#### Example

The `withSelectorQueue` example below needs direct access to `queue.receive()` as it waits for the first event of either...

1. game character direction changed (from users keyboard input)
2. timer expired (the character steps every 300ms)

It therefore has to use `Promise.race()` to handle either the receive or the timeout, whichever comes first.

```typescript
// given this example store
const gameStore = createStore({
  steps: 0,
  direction: null,
});

// track direction (set elsewhere in the app)
const lastDirection = await withSelectorQueue(
  gameStore,
  (state) => state.direction,
  async function ({ receive }, initialDirection) {
    let direction = initialDirection;
    let directionPromise = null;
    let stepPromise = null;
    while (direction !== null) {
      // loop until player stopped moving
      directionPromise = directionPromise || receive();
      stepPromise = stepPromise || sleep(STEP_MS);
      const winner: string = await Promise.race([
        directionPromise.then(() => "direction"),
        stepPromise.then(() => "step"),
      ]);
      if (winner === "direction") {
        direction = await directionPromise; // direction changed
        directionPromise = null; // dispose promise
      } else if (winner === "step") {
        stepDirection(direction); // time to step
        stepPromise = null; // dispose promise
      }
    }
  }
);
```
npm package: @lauf/store-react
Description: Update React components when @lauf/store state changes
Author: Cefn Hoile
Latest version: 2.0.0

## Store bindings for React

Enables React apps to use
[@lauf/store](https://www.npmjs.com/package/@lauf/store) for state-management

Read the [API Reference](https://cefn.com/lauf/api/modules/_lauf_store_react.html) or the reference usages below.

## Usage

### Track a part of Store state

```typescript
// given some example store
interface CounterState {
  counter: number;
  active: boolean;
}
const counterStore = createStore<CounterState>({ counter: 0, active: false });

// bind Display to just the `counter` property
// won't re-render when `active` property changes
export const Display = (props: { store: Store<CounterState> }) => {
  const counter = useSelected(props.store, (state) => state.counter);
  return <h1>Counter is {counter}</h1>;
};
```

## Getting Started

### Install

```zsh
npm install @lauf/store-react
```

## Advanced

### Create a store in a component

```typescript
// create a store for the lifetime of this component
const store = useStore<CounterState>({ counter: 0, active: false });
```

A Store created through `useStore` can be passed through [prop
drilling](https://kentcdodds.com/blog/prop-drilling) or
[Context](https://github.com/cefn/watchable/tree/main/apps/counter-react-ts-edit-context#readme) to descendant components,
who will subscribe to the parts they want to track.

Note, using the `useStore` hook can often be avoided. A Store can be a
[singleton](https://en.wikipedia.org/wiki/Singleton_pattern) in most apps meaning
a single instance can simply be created and exported from a module.

If you are certain that an ancestor React component will never be replaced and
(hence) lose its state, then `useStore` can be used safely.

If you want different parts of the render tree to have their own independent
copy of some Store, it offers the convenience of components simply creating their own Stores
inline.

### Consume the whole state

```typescript
const rootState = useRootState(props.store);
```

Note, this is rarely needed in production code for several reasons...

- well-architected business logic should live outside the render loop, using `followSelector(...)` from @lauf/store-follow
- to consume **part** of the state, prefer {@link useSelector} which doesn't trigger renders on every state change

```typescript
// Re-runs this functional component when any state changes
export const StateLog = (props: { store: Store<CounterState> }) => {
  const rootState = useRootState(props.store);
  const [stateHistory, setStateHistory] = useState<CounterState[]>([]);
  useEffect(() => {
    setStateHistory([...stateHistory, rootState]);
  }, [rootState]);
  return <h1>Counter is {counter}</h1>;
};
```
npm package: @laughing-cli/uni-native-router
Description: 一个封装 uniapp 原生路由 API 库，使用 uni-app 原生钩子实现和方法实现、hooks 的使用方式适配 vue3
Author: gxkai
Latest version: 0.0.68

# uni-native-router

一个封装 uniapp 原生路由 API 库，使用 uni-app 原生钩子实现和方法实现、hooks 的使用方式适配 vue3
npm package: @laughingzhu/astro-link-preview
Description: This Astro integration generates preview images for external links.
Author: LaughingZhu
Latest version: 0.0.17

<h1 align="center">
  <code>astro-link-preview</code>
</h1>

<p align="center">
  <a href="https://npmjs.org/package/astro-link-preview">
    <img src="https://img.shields.io/npm/v/astro-link-preview.svg" alt="version">
  </a>
</p>

<p align="center">
  <strong>
  This <code>Astro</code> integration generates preview images for external links.
  </strong>
</p>

<br>

![demo](../../assets/demo.gif)

## Features

- Supports both Static Site Generation (`SSG`) and Server-Side Rendering (`SSR`) modes. 
- Automatically optimizes images to improve loading performance.
- Provides customizable styles for preview images. 

## Installation

```shell
# Using NPM
npm install astro-link-preview
# Using Yarn
yarn add astro-link-preview
# Using PNPM
pnpm add astro-link-preview
```

## Config

```js
// astro.config.mjs
import {defineConfig} from "astro/config"
import linkPreview from "astro-link-preview"
export default defineConfig({
  integrations: [
    linkPreview()
  ],
})
```


## Options 

```ts
import type { LaunchOptions } from 'playwright'

export interface Options {
  /**
   * Whether to log stats
   * @default true
   */
  logStats?: boolean
  /**
   * proxy settings
   */
  proxy?: LaunchOptions['proxy']
  /**
   * preview image format
   * @default 'jpg'
   */
  previewImageFormat?: 'png' | 'jpg'
  /**
   * whether to allow image previews on mobile devices
   * @default false
   */
  enableOnMobile?: boolean
}
```

## How to use

see [example](../playground/)

## License

MIT &copy; [nemurubaka](https://github.com/cijiugechu)