open-index/open-npm huggingface dataset:
npm package: @liha-labs/query-guard
Description: Dependency-free core for typed URL query state.
Latest version: 0.1.3

# @liha-labs/query-guard

Dependency-free core for typed URL query state.

**ESM-only**  
Exports `import` + `types` via `exports`. No CommonJS build.

## What You Can Do
- Parse and serialize query strings.
- Keep typed query state in sync with the URL.
- Control how unknown keys are preserved or dropped.

## Quick Example (Core Only)
```ts
import { createBrowserAdapter, createQueryGuard } from '@liha-labs/query-guard'

const resolver = {
  resolve: ({ raw }) => ({ value: { q: raw.q ?? '' } }),
  serialize: (value) => ({ q: value.q }),
}

const guard = createQueryGuard({
  adapter: createBrowserAdapter(),
  resolver,
  defaultValue: { q: '' },
  unknownPolicy: 'keep',
})

guard.set({ q: 'hello' })
```

## createBrowserAdapter (Important)
- Browser-only. Throws when `window` is undefined.
- Subscribes only to `popstate`.
- External `history.pushState` / `history.replaceState` do not notify.
- Pull-based reads (`getSearch` / `getRaw` / `getQueries`) are safe on demand.

## createQueryGuard API
- `getSearch()` / `getRaw()` / `getQueries()` / `getMeta()`
- `setQueries(next, options?)`
- `set(patch, options?)`
- `reset(options?)`
- `subscribe(listener)`

### unknownPolicy
- `keep`: preserve keys not owned by the guard.
- `drop`: remove unknown keys when writing.

### set(patch)
- `undefined` means deletion.
- Deleted keys are removed from the URL.

### reset(mode)
- `clear`: remove owned keys from the URL.
- `write-defaults`: serialize `defaultValue` into the URL.

## Adapter Interface (QueryGuardAdapter)
Implement these three methods:
- `getSearch(): string`
- `setSearch(nextSearch: string, options?: { history?: 'replace' | 'push' }): void`
- `subscribe(listener: () => void): () => void`

This allows integrations with routers or non-browser environments.

## SSR
Use a custom adapter for SSR/non-browser environments.  
`createBrowserAdapter` throws if `window` is not available.
npm package: @liha-labs/query-guard-react
Description: React hook for `@liha-labs/query-guard`.
Latest version: 0.1.3

# @liha-labs/query-guard-react

React hook for `@liha-labs/query-guard`.

**ESM-only**  
Exports `import` + `types` via `exports`. No CommonJS build.

## Dependencies
- Peer: `react`
- Dependency: `@liha-labs/query-guard`

## How It Resolves Options
`useQueryGuard` resolves each option in this order:

1. Hook options (`useQueryGuard({...})`)
2. Provider defaults (`<QueryGuardProvider ...>`)
3. Built-in fallback

Built-in fallbacks:
- `adapter`: browser only (`createBrowserAdapter()`). In non-browser, throws.
- `resolver`: passthrough resolver (`raw` as-is, serialize via `String(...)`).
- `defaultValue`: `{}`
- `unknownPolicy`: if `defaultValue` is missing and requested policy is `drop`, it falls back to `keep` to avoid dropping everything.

## Usage
### 1) Provider-driven (recommended)
```tsx
import { QueryGuardProvider, useQueryGuard } from '@liha-labs/query-guard-react'
import { createBrowserAdapter } from '@liha-labs/query-guard'

const resolver = {
  resolve: ({ raw }) => ({
    value: { page: Number(raw.page ?? 1) },
  }),
  serialize: (value) => ({ page: String(value.page) }),
}

const adapter = createBrowserAdapter()

function App() {
  return (
    <QueryGuardProvider
      adapter={adapter}
      resolver={resolver}
      defaultValue={{ page: 1 }}
      history="replace"
      unknownPolicy="keep"
    >
      <Pager />
    </QueryGuardProvider>
  )
}

function Pager() {
  const { queries, set } = useQueryGuard<{ page: number }>()

  return (
    <button onClick={() => set({ page: queries.page + 1 })}>
      Next
    </button>
  )
}
```

### 2) Per-hook options (without Provider)
```tsx
import { useQueryGuard } from '@liha-labs/query-guard-react'

function Pager() {
  const { queries, set } = useQueryGuard({
    resolver,
    defaultValue: { page: 1 },
    history: 'replace',
    unknownPolicy: 'keep',
  })

  return <button onClick={() => set({ page: queries.page + 1 })}>Next</button>
}
```

### 3) Override Provider defaults in one place
```tsx
const { set } = useQueryGuard<{ page: number }>({
  history: 'push', // overrides Provider history only for this hook
})
```

### 4) Minimal mode (no options)
```tsx
const guard = useQueryGuard()
```
- Useful for quick prototyping.
- For production, define at least `resolver` and `defaultValue` (Provider or hook) for predictable typed behavior.

## Notes
- `useQueryGuard` recreates the guard when resolved `adapter`/`resolver`/`defaultValue`/`history`/`unknownPolicy` references change.
- For stable behavior, memoize Provider values and hook inputs (e.g. `useMemo`) when appropriate.
- Realtime updates depend on the adapter implementation.
- For SSR, do not use `createBrowserAdapter`; provide a custom adapter via Provider or hook options.
npm package: @liha-labs/query-guard-resolvers
Description: Resolver utilities for `@liha-labs/query-guard`.
Latest version: 0.1.3

# @liha-labs/query-guard-resolvers

Resolver utilities for `@liha-labs/query-guard`.

**ESM-only**  
Exports `import` + `types` via `exports`. No CommonJS build.

## zodResolver
Uses Zod to parse raw query values into typed objects.

### Behavior
- Raw values (`string` / `string[]`) are passed to Zod as-is.
- Use `z.coerce` for number/boolean conversions.
- `object -> raw` conversion stringifies non-primitive objects via `JSON.stringify`.
- If `JSON.stringify` returns `undefined`, the key is skipped.

## Usage
```ts
import { z } from 'zod'
import { zodResolver } from '@liha-labs/query-guard-resolvers'

const resolver = zodResolver(
  z.object({
    page: z.coerce.number().int().min(1).default(1),
    q: z.string().default(''),
    tags: z.array(z.string()).default([]),
  }),
  { defaultValue: { page: 1, q: '', tags: [] } }
)
```
npm package: @lihai-js/tool
Description: 📦@lihai-js/tool是总结企业项目中常用方法进行系统性实现封装💡，旨在减少不必要重复coding，抽出更多时间🏊 ,开箱即用🚀 🚀
Author: hai
Latest version: 2.1.0

# [@lihai-js/tool](http://jshai.gitee.io/tool)

![npm](https://img.shields.io/npm/v/@lihai-js/tool)
![npm](https://img.shields.io/npm/dt/@lihai-js/tool)

一个应对企业工作常用方法，进行代码片段汇总编写的JavaScipt工具库，旨在减少重复Coding。



## Install

```shell
npm install @lihai-js/tool
//yarn add  @lihai-js/tool
```


## Usage
深克隆
```js
const { ExpandObject } = require('@lihai-js/tool');
let origin = { name: '克隆', childrens: { name: "子类" } }
let cloneTarget = ExpandObject.getClone(origin)
```
订阅事件
```js
const { MyEvent } = require('@lihai-js/tool');
MyEvent.on('click', () => {
    console.log('订阅一个click事件');
});

MyEvent.trigger('click');
```

导出对应的模块使用
更多方法详情，请根据网络情况选择https://catsandmice.github.io/tool/#/ 或 http://jshai.gitee.io/tool 进行查阅


## License

[MIT](http://opensource.org/licenses/MIT)


## Contact me 

<img alt="公众号搜索隔壁姥爷" src="https://p.pstatp.com/origin/pgc-image/45fd0fc3498547faaea870528de101e6" width="500px">
npm package: @lihanwen/x-data-grid
Description: The community edition of the data grid component (MUI X).
Author: MUI Team
Latest version: 5.6.0

# @mui/x-data-grid

This package is the community edition of the data grid component.
It's part of MUI X, an open core extension of MUI, with advanced components.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid
```

This component has three peer dependencies that you will need to install as well.

```json
"peerDependencies": {
  "@mui/material": "^5.0.0",
  "react": "^17.0.0"
},
```

## Documentation

[The documentation](https://mui.com/components/data-grid/)
npm package: @lihautan/babel-parser
Description: A JavaScript parser
Author: Sebastian McKenzie
Latest version: 0.0.2

# @babel/parser

> A JavaScript parser

See our website [@babel/parser](https://babeljs.io/docs/en/next/babel-parser.html) for more information or the [issues](https://github.com/babel/babel/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22pkg%3A+parser+%28babylon%29%22+is%3Aopen) associated with this package.

## Install

Using npm:

```sh
npm install --save-dev @babel/parser
```

or using yarn:

```sh
yarn add @babel/parser --dev
```
npm package: @lihautan/babel-plugin-transform-quadruple-equal
Description: ## Inspiration
Author: Tan Li Hau
Latest version: 0.0.5

# transform-quadruple-equal

## Inspiration

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    ==== (&quot;really strict equals&quot;, same as{' '}
    <a href="https://t.co/LMVvSIFdpx">https://t.co/LMVvSIFdpx</a>)
  </p>
  &mdash; getify (@getify) <a href="https://twitter.com/getify/status/1285825895249383424?ref_src=twsrc%5Etfw">July 22, 2020</a>
</blockquote>

## Babel Plugin

[![npm version](https://badge.fury.io/js/%40lihautan%2Fbabel-plugin-transform-quadruple-equal.svg)](https://badge.fury.io/js/%40lihautan%2Fbabel-plugin-transform-quadruple-equal)

## 💡 The Idea

This is something you can't just do with babel transform plugin.

Because the following:

```js
a ==== b
```

is not a valid JavaScript syntax.

So, we need to first [fork the babel parser](https://lihautan.com/creating-custom-javascript-syntax-with-babel/).

To add support a new operator, we update the tokenizer to recognise one extra `=` character:

```diff-js
// filename: https://github.com/babel/babel/tree/master/packages/babel-parser/src/tokenizer/index.js

export default class Tokenizer extends ParserErrors {
  // ...
  readToken_eq_excl(code: number): void {
    // '=!'
    const next = this.input.charCodeAt(this.state.pos + 1);
    if (next === charCodes.equalsTo) {
      this.finishOp(
        tt.equality,
-        this.input.charCodeAt(this.state.pos + 2) === charCodes.equalsTo ? 3 : 2
+        this.input.charCodeAt(this.state.pos + 2) === charCodes.equalsTo
+          ? this.input.charCodeAt(this.state.pos + 3) === charCodes.equalsTo
+            ? 4
+            : 3
+          : 2
      );
      return;
    }
    // ...
  }
}
```

Now as `====` and `!===` become a valid token, babel will it treat it the same way as `===` and `!==` token.

The Babel plugin itself is straightforward.

`a ==== b` will form a binary expression, and we are going to transform it into `Object.is(a, b)`.

```js
a ==== b;
c !=== d;

// into
Object.is(a, b);
!Object.is(c, d);
```

## 📘 The Code

```js
export default function ({ template }) {
  return {
    name: 'transform-quadruple-equal',
    visitor: {
      BinaryExpression(path) {
        if (path.node.operator === '====') {
          path.replaceWith(
            template.expression`Object.is(${path.node.left}, ${path.node.right})`()
          );
        } else if (path.node.operator === '!===') {
          path.replaceWith(
            template.expression`!Object.is(${path.node.left}, ${path.node.right})`()
          );
        }
      },
    },
  };
}
```

Over here I used [babel.template](https://babeljs.io/docs/en/babel-template) which provides utility functions to create Babel AST using tagged template literal.
npm package: @lihautan/babel-plugin-transform-roman-numbers
Description: ## Inspiration
Author: Tan Li Hau
Latest version: 0.0.3

# transform-roman-numbers

## Inspiration

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    Roman numerals. Mandatory for floating point numbers.
  </p>
  &mdash; Bogdan Marinescu (@bogdanm78) <a href="https://twitter.com/bogdanm78/status/1285867389989552128?ref_src=twsrc%5Etfw">July 22, 2020</a>
</blockquote>

## 💡 The Idea

OK, I'm a bit lazy over here. I just going to support only integer roman numerals.

The following is a valid JavaScript syntax:

```js
let a = II;
b(VI);
```

as `II` is just a normal variable.

If the variable name is a roman numeric, we are going to transpile them into a `number`.

```js
let a = 2;
b(6);
```

So it would work like JavaScript supports roman numeric.

Of course not all variable name are free to modify:

```js
II(a);
const III = { IV: b };
class XI {
  XC() {}
}
```

The above is a valid JS, but it does not make sense to turn them into number, as function call expression, variable declaration, class name and method does not allow number as the sole variable name.

```js
2(a);
const 3 = { 4: b };
class 11 {
  90() {}
}
```

Although `{ 4: b }` looks valid. 🤔

I realised that the places of a variable can be interpreted as roman numeric is limited, so it's easier to whitelist those places rather than blacklist places it shouldn't be appear.

## 📘 The Code

```js
import { isValidRoman, romanToArab } from 'roman-numbers';

export default function ({ types: t }) {
  return {
    name: 'roman-numbers',
    visitor: {
      Identifier(path) {
        const { parent, node } = path;
        if (
          // const a = II
          (t.isVariableDeclarator(parent) && parent.init === node) ||
          // { a: II }
          (t.isObjectProperty(parent) && !parent.method) ||
          // [II]
          t.isArrayExpression(parent) ||
          // const { a: b = II } = c
          (t.isAssignmentExpression(parent) && parent.right === node) ||
          // function a({ a: b = II }) {}
          (t.isAssignmentPattern(parent) && parent.right === node) ||
          // II + III
          (t.isBinaryExpression(parent)) ||
          // II++
          (t.isUpdateExpression(parent))
        ) {
          const name = node.name;
          if (isValidRoman(name) && !path.scope.hasBinding(name)) {
            path.replaceWith(t.numericLiteral(romanToArab(name)));
          }
        }
      },
    },
  };
}
```

## 🧪 Try it out

<iframe
  src="https://codesandbox.io/embed/javascript--n0iic?expanddevtools=1&fontsize=14&hidenavigation=1&theme=light"
  style="width:100%; height:500px; border:4px solid; box-shadow: 5px 5px 0 #2aa3ef; overflow:hidden;"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

## 📦 Babel Plugin

[![npm version](https://badge.fury.io/js/%40lihautan%2Fbabel-plugin-transform-roman-numbers.svg)](https://badge.fury.io/js/%40lihautan%2Fbabel-plugin-transform-roman-numbers)
npm package: @lihbr/farben
Description: Colors of lihbr
Author: Lucie Haberer
Latest version: 0.1.0

# @lihbr/farben

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Conventional Commits][conventional-commits-src]][conventional-commits-href]
[![License][license-src]][license-href]

[Colors][lihbr-colors] of [lihbr][lihbr-github].

## Install

```bash
npm install theme-farben
```

## Contributing

Whether you're helping me fix bugs, improve the docs, or spread the word, I'd love to have you as a contributor!

**Asking a question**: [Open a new topic][repo-question] on GitHub Discussions explaining what you want to achieve / your question. I'll try to get back to you shortly.

**Reporting a bug**: [Open an issue][repo-bug-report] explaining your application's setup and the bug you're encountering.

**Suggesting an improvement**: [Open an issue][repo-feature-request] explaining your improvement or feature so we can discuss and learn more.

**Submitting code changes**: For small fixes, feel free to [open a PR][repo-pull-requests] with a description of your changes. For large changes, please first [open an issue][repo-feature-request] so we can discuss if and how the changes should be implemented.

## License

[MIT][license] License © 2024-PRESENT [Lucie Haberer][lihbr-github]

<!-- Links -->
[license]: ./LICENSE
[lihbr-colors]: https://lihbr.com/colors
[lihbr-github]: https://github.com/lihbr

<!-- Contributing -->

[repo-question]: https://github.com/lihbr/farben/discussions
[repo-bug-report]: https://github.com/lihbr/farben/issues/new?assignees=&labels=bug&template=bug_report.md&title=
[repo-feature-request]: https://github.com/lihbr/farben/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=
[repo-pull-requests]: https://github.com/lihbr/farben/pulls

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@lihbr/farben?style=flat&colorA=131010&colorB=54669c
[npm-version-href]: https://npmjs.com/package/@lihbr/farben
[npm-downloads-src]: https://img.shields.io/npm/dm/@lihbr/farben?style=flat&colorA=131010&colorB=a54a5e
[npm-downloads-href]: https://npmjs.com/package/@lihbr/farben
[conventional-commits-src]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?style=flat&colorA=131010&colorB=f27602&logo=conventionalcommits&logoColor=faf1f1
[conventional-commits-href]: https://conventionalcommits.org
[license-src]: https://img.shields.io/github/license/lihbr/farben.svg?style=flat&colorA=131010&colorB=759f53
[license-href]: https://github.com/lihbr/farben/blob/master/LICENSE
npm package: @lihbr/listr-update-renderer
Description: Listr update renderer
Author: Sam Verschueren
Latest version: 0.5.3

> Lucie: This is a quick fork of [listr-update-renderer](https://github.com/SamVerschueren/listr-update-renderer) that removes the initial indentation for styling purpose and makes `task.output` more meaningful. All credit goes to [Sam Verschueren](https://github.com/SamVerschueren)

# listr-update-renderer [![Build Status](https://travis-ci.org/SamVerschueren/listr-update-renderer.svg?branch=master)](https://travis-ci.org/SamVerschueren/listr-update-renderer)

> [Listr](https://github.com/SamVerschueren/listr) update renderer

<img src="screenshot.gif" />


## Install

```
$ npm install --save listr-update-renderer
```


## Usage

```js
const UpdaterRenderer = require('listr-update-renderer');
const Listr = require('listr');

const list = new Listr([
    {
        title: 'foo',
        task: () => Promise.resolve('bar')
    }
], {
    renderer: UpdaterRenderer,
	collapse: false
});

list.run();
```

> Note: This is the default renderer for [Listr](https://github.com/SamVerschueren/listr) and doesn't need to be specified.


## Options

These options should be provided in the [Listr](https://github.com/SamVerschueren/listr) options object.

### showSubtasks

Type: `boolean`<br>
Default: `true`

Set to `false` if you want to disable the rendering of the subtasks. Subtasks will be rendered if an error occurred in one of them.

### collapse

Type: `boolean`<br>
Default: `true`

Set to `false` if you don't want subtasks to be hidden after the main task succeed.

### clearOutput

Type: `boolean`<br>
Default: `false`

Clear the output when all the tasks are executed succesfully.


## Related

- [listr](https://github.com/SamVerschueren/listr) - Terminal task list
- [listr-verbose-renderer](https://github.com/SamVerschueren/listr-verbose-renderer) - Listr verbose renderer
- [listr-silent-renderer](https://github.com/SamVerschueren/listr-silent-renderer) - Suppress Listr rendering output


## License

MIT © [Sam Verschueren](https://github.com/SamVerschueren)


---

<div align="center">
	<b>
		<a href="https://tidelift.com/subscription/pkg/npm-listr-update-renderer?utm_source=npm-listr-update-renderer&utm_medium=referral&utm_campaign=enterprise&utm_term=repo">Get professional support for this package with a Tidelift subscription</a>
	</b>
	<br>
	<sub>
		Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
	</sub>
</div>
npm package: @lihbr/module-docs
Description: A demo global module used during my talk: "An Introduction to Nuxt Global Modules"
Author: Lucie Haberer
Latest version: 0.0.5

# nuxt-demo-global-modules

A demo global module used during my talk: _"An Introduction to Nuxt Global Modules"_.

- [📖 &nbsp;Nuxt Modules documentation](https://nuxtjs.org/docs/2.x/directory-structure/modules)
- [👩‍🏫 &nbsp;Talk resources](https://diapositiv.lihbr.com/talk/an-introduction-to-nuxt-global-modules)
- [💐 &nbsp;More from Lucie](https://lihbr.com/?source=nuxt-demo-global-modules)

## Install

> While working well please keep in mind **this is a demo**, feel free to fork it if you want to improve it~

```bash
# install package globally
npm install --global @lihbr/module-docs

# enable the global module once (run again to disable, etc.)
module-docs
```

## License

[MIT License](./LICENSE)