open-index/open-npm huggingface dataset:
npm package: @reactivity-slim/meta
Description: reactivity via meta property
Author: hikali
Latest version: 0.0.3-beta.8

# 介绍

使用 对象属性的 `[[Get]]` 和 `[[Set]]` 元属性（Property Attributes）实现的响应式。

**不提供深度监听功能。**

# 安装

`pnpm add @reactivity-slim/meta`

# 使用

```ts
import { observable, observeKey, observeSelf } from ' @reactivity-slim/meta'

const data = {
  a: 1
}

observable(data)

observeKey(data, 'a', (newV, oldV) => {
  // do something...
})
observeSelf(data, () => {
  // do something...
})
```

# API

## observable(value)

将数据value变为响应式。

`value`：一个纯对象（plain object）或数组。

- plain object：可监听任意属性的写入操作。
- 数组：可监听以下更改数组自身的方法：`push`, `pop`, `shift`, `unshift`, `splice`, `reverse`, `sort`, `fill`, `copyWithin`。


## observeKey(obj, key, callback)

注册 plain object 的属性写入监听回调。当向`obj`的`key`属性写入不同的属性值时，同步触发监听回调`callback`。

`obj`：一个纯对象（plain object）。

`key`：一个`string`、`number`、`symbol`，为要监听的键。

`callback`：一个函数。参数分别为 `newV`、`oldV`，表新键值、旧键值。无返回值。

## observeSelf(value, callback)

注册 plain object，或数组的修改监听回调。当修改对象的任意键，或调用数组的修改方法（见`observable`），同步触发监听回调`callback`。

`value`：一个纯对象（plain object）或数组。

`callback`：一个函数。虽然有两个参数，分别为 `newV`、`oldV`，但均表数据的引用，只是最新的值。无返回值。

## isObservable(value)

判断`value`是否为 Observable 对象。

`value`：任意类型的数据。但应该是一个纯对象（plain object）或数组。

`return`：一个 `boolean`，表示参数`value`是否为 Observable 对象。
npm package: @reactivity-vue/filesystem
Description: Reactive filesystem powered by @vue/reactivity
Author: Elone Hoo
Latest version: 0.0.1

# @reactivity-vue/filesystem

[![NPM version](https://img.shields.io/npm/v/@reactivity-vue/filesystem?color=a1b858&label=)](https://www.npmjs.com/package/@reactivity-vue/filesystem)

> Reactive filesystem powered by [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity)

## Install

```bash
npm install --save-dev @reactivity-vue/filesystem
```

## Usage

> Work only in Node.js

### Async usage

```ts
import { useFile } from '@reactivity-vue/filesystem'

const fileRef = await useFile('messages.txt').waitForReady()

console.log(fileRef.value) // output file content

fileRef.value += 'Hello World' // append to file

fileRef.value = 'Good Morning' // write to file
```

### Callback usage

```ts
import { useFile } from '@reactivity-vue/filesystem'

useFile('messages.txt')
  .waitForReady()
  .then((fileRef) => {
    console.log(fileRef.value) // output file content
  })
```

### Watch for file changes (via [chokidar](https://github.com/paulmillr/chokidar))

```ts
const fileRef = useFile('messages.txt', { watchFileChanges: true })
```

### `useJson`

```ts
import { useJSON } from '@reactivity-vue/filesystem'

const data = useJSON('data.json', { initialValue: { foo: 'bar' } })

console.log(data.value) // { foo: 'bar' }

data.value = { bar: 'foo' } // write to json file
```

### Custom serializer

```ts
import YAML from 'js-yaml'
import { useFileWithSerializer } from  '@reactivity-vue/filesystem'

export function useYAML<T>(path: string, options: JSONSerializerOptions<T> = {}) {
  return useFileWithSerializer<T>(
    path,
    {
      ...options,
      serialize: v => YAML.safeDump(v)
      deserialize: v => YAML.safeLoad(v)
    }
  )
}
```

## License

[MIT](../../LICENSE) License © 2023 [Elone Hoo](https://github.com/elonehoo)
npm package: @reactivity-vue/watch
Description: The missing `watch` for @vue/reactivity
Author: Elone Hoo
Latest version: 0.0.1

# @reactivity-vue/watch

[![NPM version](https://img.shields.io/npm/v/@reactivity-vue/watch?color=a1b858&label=)](https://www.npmjs.com/package/@reactivity-vue/watch)

> The (missing) <kbd>watch</kbd> for <a href="https://github.com/vuejs/vue-next/tree/master/packages/reactivity"><code>@vue/reactivity</code></a>. Works without Vue.</p>

## Install

```bash
npm install --save-dev @reactivity-vue/watch
```

## Usage

```ts
import { computed, reactive, ref } from '@vue/reactivity'
import { watch, watchEffect } from '@reactivity-vue/watch'
const count = ref(1)
const stopWatch = watch(
  count,
  (newValue) => {
    console.log(`Count: ${newValue}`)
  }
)
count.value += 1
// Count: 2
stopWatch()
```


## License

[MIT](../../LICENSE) License © 2023 [Elone Hoo](https://github.com/elonehoo)
npm package: @reactivity-vue/when
Description: Promised one-time watch for @vue/reactivity
Author: Elone Hoo
Latest version: 0.0.1

# @reactivity-vue/when

[![NPM version](https://img.shields.io/npm/v/@reactivity-vue/when?color=a1b858&label=)](https://www.npmjs.com/package/@reactivity-vue/when)

> Promised one time watch for [`@vue/reactivity`](https://github.com/vuejs/core/tree/main/packages/reactivity)

## Install

```bash
npm install --save-dev @reactivity-vue/when
```

## Usage

### Wait for some async data to be ready

```ts
import { when } from '@reactivity-vue/when'

const { state, ready } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
  {},
)

await when(ready).toBe(true)

console.log(state) // state is now ready!
```

### Wait for custom conditions

> You can use `invoke` to call the async function.

```ts
import { invoke, when } from '@reactivity-vue/when'

const { count } = useMyCounter()

invoke(async () => {
  await when(count).toMatch(v => v > 7)

  alert('Counter is now larger than 7!')
})
```

### Timeout

```ts
// will be resolve when ref.value === true or 1000ms passed
await when(ref).toBe(true, { timeout: 1000 })

// will throw if timeout
try {
  await when(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
  // ref.value === true
}
catch (e) {
  // timeout
}
```

### More Examples

```ts
await when(ref).toBe(true)
await when(ref).toMatch(v => v > 10 && v < 100)
await when(ref).changed()
await when(ref).changedTimes(10)
await when(ref).toBeTruthy()
await when(ref).toBeNull()
await when(ref).toBeNaN()
await when(ref).toContain(5)

await when(ref).not.toBeNull()
await when(ref).not.toBeTruthy()
```

## License

[MIT](../../LICENSE) License © 2023 [Elone Hoo](https://github.com/elonehoo)
npm package: @reactivjs/reactivjs
Description: Minimalistic reactivity engine for CSR and SSR. Heavily inspired by Stimulus, AlpineJS and VanJS.
Author: Álvaro Palma
Latest version: 1.2.0

![ReactivJS, or the modern jQuery](logos/logo_big.png)

Bring your static HTML to life or create interactive client-side rendered islands _on the fly_. No build step required!

Minimalistic reactivity engine for CSR and SSR (**~5kb** minified, and **~2kb** minified + gzipped). Heavily inspired by **Stimulus**, **AlpineJS** and **VanJS**.

## WIP! 🚧
npm package: @reactizer/babel-preset
Description: The best Babel preset.
Author: oreqizer
Latest version: 0.32.2

# @reactizer/babel-preset

The best Babel preset.

## Setup

`babel.config.js`

```js
module.exports = {
  presets: ["@reactizer"],
};
```

**Assumes:**

- absolute paths relative to the `./src`

## License

MIT