open-index/open-npm huggingface dataset:
npm package: @snoringarvind/pagination
Description: - An Angular directive for pagination.
Author: Arvind Chauhan snoringarvind@gmail.com
Latest version: 1.0.4

# App Pagination

An Angular directive for pagination.
![gif](https://github.com/snoringarvind/appPagination/blob/main/src/assets/pagination-record.gif)

## Angular Version

This Angular directive is created using Angular 12+ .

## How to install

```
npm i @snoringarvind/pagination
```

## Documentation

Please refere to the documentation on <a href='https://github.com/snoringarvind/npm-angular-pagination'>github</a>

## License

MIT License
npm package: @snorlite/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 3.0.1
Deprecated: false

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @snorreeb/nrkno-sanity-react-utils
Description: Various React related utility functions and libs used by nrkno-sanity.
Latest version: 2.0.0-v3-studio.0

# @nrk/nrkno-sanity-react-utils

Various React related utility functions and libs used by nrkno-sanity.

# Installation

`npm install --save @nrk/nrkno-sanity-react-utils`

# Usage

## useSetRefs

Callback that sets all provided refs. Useful when you need multiple reference handles to the same component.

For instance, a ref for your local state and for forwarded Sanity ref in custom input component.

```tsx
function SomeComponent(props: any, forwardRef: ForwardedRef<HTMLDivElement>) {
  const ref = useRef<HTMLDivElement | null>(null)
  const setRefs = useSetRefs(ref, forwardRef);
  return <div ref={setRefs} />;
}
```

## useResizeObserver

Get a callback whenever an observed element changes size.

```tsx
function SomeComponent() {
 //useState and NOT useRef
  const [ref, setRef] = useState<HTMLDivElement | null>(null);

  const onResize= useCallback((domRect: DOMRect) => {
      // invoked whenever the div is resized
    }, [])
    
  useResizeObserver(onResize, ref);
  return <div ref={setRef} />;
}
```

## useDebouncedEffect

Takes an effect callback and dependency array (same arguments as React.useEffect),
and a debounce delay.

When dependencies change (including component mount, ala useEffect),
the effect will be invoked after <delay> milliseconds.

The effect is debounced:
Delay restarts whenever dependencies change, and only the last
change to dependencies will be used.

```ts
function SomeComponent({prop}: {prop: string}) {
    useDebouncedEffect(() => {
        // delays invoking this func until after 500 milliseconds have elapsed 
        // since the last time dependencies changed
    }, [prop], 500)
    return null;
}
```
npm package: @snorreeb/sanity-iframe-api
Description: Helper functions for integrating with sanity-plugin-iframe-preview.
Author: Snorre Eskeland Brekke
Latest version: 0.3.0

# sanity-iframe-api

WORK IN PROGRESS.

Framework agnostic functions for interacting with
the IFramePreview provided by
`@snorreeb/sanity-plugin-iframe-preview`.


# Installation

`npm i @snorreeb/sanity-iframe-api`

# Usage

```ts
import { initPreview } from '@snorreeb/sanity-iframe-api'

// Somewhere after page load
initPreview(
    {
        sanityClientVersion: "2021-06-01",
        // groq MUST contain _rev projected at the top level
        groqQuery: "* [_type='my-page' && _id == $id]{_rev, ...}[0]",
        queryParams: (doc) => ({id: doc._id}), // default
        initialData: prefetchedData
    },
    (data) => {
        // When this page is loaded in an iframe, 
        // embedded in IFramePreview in Sanity Studio,
        // this callback will receive updated data whenever the Studio makes edits.
        
        // Use it to update your page in whatever way makes sense.
    }
)
```

See jsdocs for each config-param for details.
npm package: @snorreeb/sanity-iframe-api-react
Description: Helper hooks for integrating a React frontend with sanity-plugin-iframe-preview.
Author: Snorre Eskeland Brekke
Latest version: 0.3.0

# sanity-iframe-api-react

WORK IN PROGRESS.

## Installation

`npm i @snorreeb/sanity-iframe-api-react`

## Usage

In your React-component:

```tsx
import { usePreviewData } from '@snorreeb/sanity-iframe-api-react'

function MyPage({ prefetchedData }) {
    const data = usePreviewData({
        sanityClientVersion: "2021-06-01",
        // groq MUST contain _rev projected at the top level
        groqQuery: "* [_type='my-page' && _id == $id]{_rev, ...}[0]",
        queryParams: (doc) => ({id: doc._id}), // default
        initialData: prefetchedData,
        enabled: () => /* when url contains query param sanityPreview=true */ // default
    });
    
    return <div>{data.title}</div>
}

// When this component is loaded in an iframe, embedded in IFramePreview in Sanity Studio,
// it will receive updated data whenever the Studio makes edits.
```

See jsdocs for each config-parameter for details.

### Lazy-loaded query
The hook will only load the relevant preview when the enabled prop resolves to true.
To avoid putting your GROQ-query in the main bundle, you might want to lazy load it:

```tsx
function MyPage() {
    const data = usePreviewData({
        groqQuery: () => import("./my-groq-query").then((module) => module.myGroqQuery),
        enabled: () => whenCondtionPermits
    });
    return <div>{data.title}</div>
}
```

## Development

### Testing in next.js / React app

React-hooks are very particular about React-version, and do not seem to work
well with `npm link`. The most bulletproof way of testing this package is therefore:

* `cd to/this/package`
* `npm pack`
* `cp <package-tar file> /path/to/nextjs/node_modules`
* `cd /path/to/nextjs`
* `npm install ./node_modules/<package-tar file>`
* Revert package.json when done testing.
npm package: @snorresovold/pocketsync
Description: Use PocketSync to synchronise 2 different pocketbase instances
Author: https://github.com/snorresovold
Latest version: 1.0.7

# Pocketsync

Pocketsync is a tool used for synchronising the schemas of different [pocketbase](https://github.com/pocketbase/pocketbase) instances.

<br>

## Example:
You have a Pocketbase instance in prod and can't do development on that exact instance, then you could have a local instance of pocketbase to do development on and synchronise them when you're done. 

You should probably use a Github action or other Devops tool to do this.

<br>

## Usage:
Pocketsync takes in 6 arguments, The email and password (for authorization) of both instances, and the url of both instances.

```ts
pocketSync({
    email1@gmail.com, 
    email2@gmail.com, 
    password1, 
    password2, 
    url1, 
    url2
})
```
npm package: @snort/bot
Description: Simple bot framework
Author: Kieran
Latest version: 1.2.1

# @snort/bot

Simple live stream event chat bot (NIP-53)

## Example

```typescript
import { parseNostrLink } from "@snort/system";
import { SnortBot } from "../src/index";

// listen to chat events on every NoGood live stream
const noGoodLink = parseNostrLink("npub12hcytyr8fumy3axde8wgeced523gyp6v6zczqktwuqeaztfc2xzsz3rdp4");

// Run a simple bot
SnortBot.simple("example")
  .link(noGoodLink)
  .relay("wss://relay.damus.io")
  .relay("wss://nos.lol")
  .relay("wss://relay.nostr.band")
  .profile({
    name: "PingBot",
    picture: "https://nostr.download/572f5ff8286e8c719196f904fed24aef14586ec8181c14b09efa726682ef48ef",
    lud16: "kieran@zap.stream",
    about: "An example bot",
  })
  .command("!ping", h => {
    h.reply("PONG!");
  })
  .run();
```
npm package: @snort/system
Description: Snort nostr system package
Author: v0l
Latest version: 2.0.0-pre.11

## @snort/system

A collection of caching and querying techniquies used by https://snort.social to serve all content from the nostr protocol.

Simple example:

```js
import { NostrSystem, RequestBuilder, StoreSnapshot, NoteCollection } from "@snort/system";

// Singleton instance to store all connections and access query fetching system
const System = new NostrSystem({});

(async () => {
  // Setup cache system
  await System.Init();

  // connec to one "bootstrap" relay to pull profiles/relay lists from
  // also used as a fallback relay when gossip model doesnt know which relays to pick, or "authors" are not provided in the request
  await System.ConnectToRelay("wss://relay.snort.social", { read: true, write: false });

  // ID should be unique to the use case, this is important as all data fetched from this ID will be merged into the same NoteStore
  const rb = new RequestBuilder("get-posts");
  rb.withFilter()
    .authors(["63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed"]) // Kieran pubkey
    .kinds([1])
    .limit(10);

  const q = System.Query(rb);
  // basic usage using "onEvent", fired every 100ms
  q.on("event", evs => {
    console.log(evs);
    // something else..
  });
})();
```
npm package: @snort/system-react
Description: React hooks for @snort/system
Author: Kieran
Latest version: 2.0.0-pre.14

## @snort/system-react

React hooks for @snort/system

### Available hooks

#### `useRequestBuilder(RequestBuilder)`

The main hook which allows you to subscribe to nostr relays and returns a reactive store.

#### `useUserProfile(pubkey: string | undefined)`

Profile hook, profile loading is automated, this hook will return the profile from cache and also refresh the cache in the background (`stale-while-revalidate`)

#### `useEventFeed(NostrLink)` / `useEventsFeed(Array<NostrLink>)`

A simple hook which can load events using the `NostrLink` class, this class contains one NIP-19 entity `nevent/naddr` etc.

#### `useReactions(id, Array<NostrLink>)`

Loads reactions for a set of events, this can be a set of posts on a profile or an arbitary list of events.

#### `useEventReactions(NostrLink, Array<NostrEvent>)`

Process a set of related events (usually results from `useReactions`) and return likes/dislikes/reposts/zaps

#### `useUserSearch()`

Search for profiles in the profile cache, this also returns exact links if they match

#### `useSystemState(System)`

Hook state of the nostr system

## Example:

```js
import { useMemo } from "react";
import { SnortContext, useRequestBuilder, useUserProfile } from "@snort/system-react";
import { NostrSystem, NoteCollection, RequestBuilder, TaggedNostrEvent } from "@snort/system";

const System = new NostrSystem({});

// some bootstrap relays
["wss://relay.snort.social", "wss://nos.lol"].forEach(r => System.ConnectToRelay(r, { read: true, write: false }));

export function Note({ ev }: { ev: TaggedNostrEvent }) {
  const profile = useUserProfile(ev.pubkey);

  return (
    <div>
      Post by: {profile.name ?? profile.display_name}
      <p>{ev.content}</p>
    </div>
  );
}

export function UserPosts(props: { pubkey: string }) {
  const sub = useMemo(() => {
    const rb = new RequestBuilder("get-posts");
    rb.withFilter().authors([props.pubkey]).kinds([1]).limit(10);

    return rb;
  }, [props.pubkey]);

  const data = useRequestBuilder(sub);
  return (
    <>
      {data.map(a => (
        <Note ev={a} />
      ))}
    </>
  );
}

export function MyApp() {
  return (
    <SnortContext.Provider value={System}>
      <UserPosts pubkey="63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed" />
    </SnortContext.Provider>
  );
}
```
npm package: @snort/worker-relay
Description: A nostr relay in a service worker
Author: Kieran
Latest version: 2.0.0-pre.3

## Worker Relay

Worker relay is a Nostr relay built on `sqlite-wasm`

`WorkerRelayInterface` is the class which accepts the URL of the worker script

`sqlite-wasm` uses OFPS in order to persist the database.

### Example

```typescript
import { WorkerRelayInterface } from "@snort/worker-relay";

// when using Vite import the worker script directly (for production)
import WorkerVite from "@snort/worker-relay/src/worker?worker";

// in dev mode import esm module, i have no idea why it has to work like this
const workerScript = import.meta.env.DEV
  ? new URL("@snort/worker-relay/dist/esm/worker.mjs", import.meta.url)
  : new WorkerVite();

const workerRelay = new WorkerRelayInterface(workerScript);

// load sqlite database and run migrations
await workerRelay.init({
  databasePath: "relay.db",
  insertBatchSize: 100,
});

// Query worker relay with regular nostr REQ command
const results = await workerRelay.query(["REQ", "1", { kinds: [1], limit: 10 }]);

// publish a new event to the relay
const myEvent = {
  kind: 1,
  created_at: Math.floor(new Date().getTime() / 1000),
  content: "test",
  tags: [],
};
if (await workerRelay.event(myEvent)) {
  console.log("Success");
}
```
npm package: @snorvisable/angular-odata
Description: This library exposes a service for easy communication with OData endpoints. Use it to retrieve and manipulate data through OData endpoints.
Author: Bart Kardol
Latest version: 0.2.2

# AngularOdata

This library exposes a service for easy communication with OData endpoints. Use it to retrieve and manipulate data through OData endpoints.


# Quick set-up
1. Add @snorvisable/angular-odata to the dependencies in the project.json file.
`"@snorvisable/angular-odata": "0.2.2"`
2. Import the `AngularODataModule` in app.module.ts.
3. Create a new class extending `ODataConfig` and add it to the providers. Replace rootUrl with the root url of the API you'd like to query:
```javascript
export class MyODataConfig extends ODataConfig {
  rootURL = 'https://services.odata.org/TripPinRESTierService';
}
```

```javascript
providers: [
    { provide: ODataConfig, useClass: MyODataConfig }
  ],
imports: [
    AngularODataModule
  ]
```


# Usage example
```javascript
export class AppComponent implements OnInit {
  title = 'My Awesome App';
constructor(private factory: ODataFactory) {

}

  ngOnInit(): void {
    // Create a service with the injected factory.
    const artistsService = this.factory.CreateService<Artist>("artists");
    
    // Retrieve all artists and log the artists to the console.
    artistsService.query().getCollection().subscribe(artists => console.log(artists));
  }
}
```


Visit the [wiki](https://github.com/Snorvisable/angular-odata/wiki) if you want to know more.
npm package: @snout/branding
Description: Branding assets for Snout
Author: Erin Millard
Latest version: 1.0.0

# Branding assets for Snout

[![Current version][badge-version-image]][badge-version-link]

[badge-version-image]: https://img.shields.io/npm/v/@snout/branding?label=%40snout%2Fbranding&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/branding

## Usage

```js
const consumer = require('@snout/branding')

const faviconPath = consumer.absoluteImagePath('faviconIco', 'container')
```
npm package: @snout/docusaurus-config
Description: The Docusaurus configuration used by Snout repositories
Author: Erin Millard
Latest version: 6.0.3

# Snout Docusaurus Configuration

[![Current version][badge-version-image]][badge-version-link]
[![Build status][badge-build-image]][badge-build-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/docusaurus-config/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/docusaurus-config/actions/workflows/ci.yml
[badge-version-image]: https://img.shields.io/npm/v/@snout/docusaurus-config?label=%40snout%2Fdocusaurus-config&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/docusaurus-config

## Usage

```js
// docusaurus.config.js
const { createConfig } = require("../docusaurus.config.js");

module.exports = createConfig({
  rootPath: __dirname,
  title: "Snout ...",
});
```
npm package: @snout/eslint-config
Description: The ESLint configuration used by Snout repositories
Author: Erin Millard
Latest version: 4.0.1

# Snout ESLint Configuration

[![Current version][badge-version-image]][badge-version-link]
[![Build status][badge-build-image]][badge-build-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/eslint-config/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/eslint-config/actions/workflows/ci.yml
[badge-version-image]: https://img.shields.io/npm/v/@snout/eslint-config?label=%40snout%2Feslint-config&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/eslint-config

## Installation

Install as a dev dependency using your preferred package manager.

## Usage

```js
// .eslintrc.cjs
module.exports = {
  extends: ["@snout"],
};
```
npm package: @snout/eslint-config-react
Description: The ESLint configuration used by Snout repositories that use React
Author: Erin Millard
Latest version: 2.0.5

# Snout ESLint Configuration for React

[![Current version][badge-version-image]][badge-version-link]
[![Build status][badge-build-image]][badge-build-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/eslint-config-react/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/eslint-config-react/actions/workflows/ci.yml
[badge-version-image]: https://img.shields.io/npm/v/@snout/eslint-config-react?label=%40snout%2Feslint-config-react&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/eslint-config-react

## Installation

Install as a dev dependency using your preferred package manager.

## Usage

Designed for use in conjunction with [@snout-router/eslint-config].

[@snout-router/eslint-config]: https://github.com/snout-router/eslint-config

```js
// .eslintrc.cjs
module.exports = {
  extends: ["@snout/react"],
};
```
npm package: @snout/jest-config
Description: The Jest configuration used by Snout repositories
Author: Erin Millard
Latest version: 4.0.0

# Snout Jest Configuration

[![Current version][badge-version-image]][badge-version-link]
[![Build status][badge-build-image]][badge-build-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/jest-config/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/jest-config/actions/workflows/ci.yml
[badge-version-image]: https://img.shields.io/npm/v/@snout/jest-config?label=%40snout%2Fjest-config&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/jest-config

## Usage

```js
// jest.config.js
export { default } from "@snout/jest-config";
```

```makefile
# Makefile
export NODE_OPTIONS := --experimental-vm-modules --redirect-warnings=artifacts/node-warnings
```
npm package: @snout/regexp
Description: Utility functions for working with regular expressions
Author: Erin Millard
Latest version: 0.3.3

# Snout RegExp Utilities

[![Current version][badge-version-image]][badge-version-link]
[![Bundle size][badge-bundle-image]][badge-bundle-link]
[![Build status][badge-build-image]][badge-build-link]
[![Test coverage][badge-coverage-image]][badge-coverage-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/regexp/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/regexp/actions/workflows/ci.yml
[badge-bundle-image]: https://img.shields.io/bundlephobia/minzip/@snout/regexp?style=for-the-badge
[badge-bundle-link]: https://bundlephobia.com/result?p=@snout/regexp
[badge-coverage-image]: https://img.shields.io/codecov/c/gh/snout-router/regexp?style=for-the-badge
[badge-coverage-link]: https://codecov.io/gh/snout-router/regexp
[badge-version-image]: https://img.shields.io/npm/v/@snout/regexp?label=%40snout%2Fregexp&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/regexp
npm package: @snout/rollup-config
Description: The Rollup configuration used by Snout repositories
Author: Erin Millard
Latest version: 1.1.2

# Snout Rollup configuration

[![Current version][badge-version-image]][badge-version-link]

[badge-version-image]: https://img.shields.io/npm/v/@snout/rollup-config?label=%40snout%2Frollup-config&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/rollup-config

## Usage

```js
// rollup.config.js
import {createConfig} from '@snout/rollup-config'
import packageJson from './package.json'

export default createConfig(packageJson)
```
npm package: @snout/router-path
Description: A simple, light-weight, type-safe router path implementation
Author: Erin Millard
Latest version: 0.7.4

# Snout Router Path

[![Current version][badge-version-image]][badge-version-link]
[![Bundle size][badge-bundle-image]][badge-bundle-link]
[![Build status][badge-build-image]][badge-build-link]
[![Test coverage][badge-coverage-image]][badge-coverage-link]

[badge-build-image]: https://img.shields.io/github/workflow/status/snout-router/router-path/CI?style=for-the-badge
[badge-build-link]: https://github.com/snout-router/router-path/actions/workflows/ci.yml
[badge-bundle-image]: https://img.shields.io/bundlephobia/minzip/@snout/router-path?style=for-the-badge
[badge-bundle-link]: https://bundlephobia.com/result?p=@snout/router-path
[badge-coverage-image]: https://img.shields.io/codecov/c/gh/snout-router/router-path?style=for-the-badge
[badge-coverage-link]: https://codecov.io/gh/snout-router/router-path
[badge-version-image]: https://img.shields.io/npm/v/@snout/router-path?label=%40snout%2Frouter-path&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/router-path
npm package: @snout/router-path-extras
Description: Additional parameter types for Snout router path
Author: Erin Millard
Latest version: 0.3.2

# Snout Router Path Extras

[![Current version][badge-version-image]][badge-version-link]
[![Bundle size][badge-bundle-image]][badge-bundle-link]
[![Build status][badge-build-image]][badge-build-link]
[![Test coverage][badge-coverage-image]][badge-coverage-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/router-path-extras/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/router-path-extras/actions/workflows/ci.yml
[badge-bundle-image]: https://img.shields.io/bundlephobia/minzip/@snout/router-path-extras?style=for-the-badge
[badge-bundle-link]: https://bundlephobia.com/result?p=@snout/router-path-extras
[badge-coverage-image]: https://img.shields.io/codecov/c/gh/snout-router/router-path-extras?style=for-the-badge
[badge-coverage-link]: https://codecov.io/gh/snout-router/router-path-extras
[badge-version-image]: https://img.shields.io/npm/v/@snout/router-path-extras?label=%40snout%2Frouter-path-extras&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/router-path-extras
npm package: @snout/tsconfig
Description: The TypeScript configuration used by Snout repositories
Author: Erin Millard
Latest version: 3.0.1

# Snout TypeScript Configuration

[![Current version][badge-version-image]][badge-version-link]
[![Build status][badge-build-image]][badge-build-link]

[badge-build-image]: https://img.shields.io/github/actions/workflow/status/snout-router/tsconfig/ci.yml?branch=main&style=for-the-badge
[badge-build-link]: https://github.com/snout-router/tsconfig/actions/workflows/ci.yml
[badge-version-image]: https://img.shields.io/npm/v/@snout/tsconfig?label=%40snout%2Ftsconfig&logo=npm&style=for-the-badge
[badge-version-link]: https://npmjs.com/package/@snout/tsconfig

## Usage

```jsonc
// tsconfig.json
{
  "extends": "@snout/tsconfig"
}
```