open-index/open-npm huggingface dataset:
npm package: @kylemathews-test/yfs-react
Description: Synchronize text files between the browser and the file system
Author: Michael Fester
Latest version: 0.1.0

# YFS

Synchronize text files between the browser and the file system using the
[File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
and [Yjs](https://yjs.dev/).

<br />
<p align="center">
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@yfs/react">
    <img alt="" src="https://badgen.net/npm/v/@yfs/react">
  </a>
  <a aria-label="License" href="https://github.com/motifland/yfs/blob/main/LICENSE">
    <img alt="" src="https://badgen.net/npm/license/@yfs/react">
  </a>
</p>

## Installation

To get started, install the `@yfs/react` package via npm or yarn:

```shell
# npm
npm install @yfs/react

# Yarn
yarn add @yfs/react
```

## Usage

Example:

<!-- prettier-ignore -->
```jsx
import React, { useState } from 'react'
import * as Y from 'yjs'
import useYFS from '@yfs/react'

function Editor () {
  const { setRootDirectory, directoryName, syncDoc } = useYFS()
  const [doc] = useState<Y.Doc>(new Y.Doc())

  return (
    <div>
      <button
        onClick={() => {
          if (!directoryName) {
            setRootDirectory(true)
          } else {
            syncDoc('my-file.md', doc)
          }
        }}
      >
        Sync
      </button>
      {/* Editor code... */}
    </div>
  )
}
```

## Authors

This library is created by the team behind [Motif](https://motif.land)
([@motifland](https://twitter.com/motifland)).

- Michael Fester ([@michaelfester](https://twitter.com/michaelfester))

It is based on the great work by [Kevin Jahns](https://twitter.com/kevin_jahns)
on [Yjs](https://yjs.dev/).

## License

MIT
npm package: @kylemathews/dom-events
Description: dom event binding and triggering
Author: Roman Shtylman
Latest version: 0.1.4

# dom-events

Forked from https://www.npmjs.com/package/dom-events so [will build in
Webpack](https://github.com/defunctzombie/dom-events/pull/7).


DOM event binding and triggering

## api

### .on(element, name, fn [, useCapture])

Bind `fn` to be called when `name` is triggered on `element`.

```js
var eve = require('dom-events');

var div = document.createElement('div');
eve.on(div, 'click', function(ev) {
    console.log(ev);
});
```

### .off(element, name, fn [, useCapture])

Remove `fn` from being called when `name` is triggered on `element`

```js
var eve = require('dom-events');

var fn = function(ev) {
    console.log(ev);
};

var div = document.createElement('div');
eve.on(div, 'click', fn);

// emit some stuff

eve.off(div, 'click', fn);
```

### .once(element, name, fn [, useCapture])

Calls `fn` the first time the event happens and unsubcribes immediately.

### .emit(element, name [, opts])

Force emit `name` on `element`.

```js
var eve = require('dom-events');

var div = document.createElement('div');
eve.on(div, 'click', function(ev) {
    console.log(ev);
});

eve.emit(div, 'click'):
```

## license

MIT
npm package: @kylemathews/sync
Description: Sync library for client-side data management
Author: Kyle Mathews
Latest version: 0.0.5

# sync
Sync in data, mutate the data, sync back the changes

## Features

### Preloading Collections

The `preloadCollection` function allows you to preload data for collections before rendering routes or components. This is useful when you want to ensure that data is available immediately when a component renders, improving the user experience by preventing loading states.

```typescript
// collections/users.ts - Shared collection configuration
import { CollectionConfig } from '@kylemathews/sync';

// Create a cached configuration for the users collection
export const usersCollectionConfig: CollectionConfig = {
  id: 'users',
  sync: {
    id: 'users-sync',
    sync: ({ begin, write, commit }) => {
      // Your sync implementation
      // ...
    }
  },
  mutationFn: {
    persist: async () => {
      // Your mutation implementation
      // ...
    }
    awaitSync: async () => {
      // Your awaitSync implementation
      // ...
    }
  }
};

// routes/users.ts - Route loader
import { preloadCollection } from '@kylemathews/sync';
import { usersCollectionConfig } from '../collections/users';

export async function loader() {
  // Preload the collection data using the shared cached config
  await preloadCollection(usersCollectionConfig);
  return null;
}

// components/Users.tsx - Component using the collection
import { useCollection } from '@kylemathews/sync';
import { usersCollectionConfig } from '../collections/users';

export function UsersComponent() {
  // Uses the same cached collection config, ensuring consistency
  const { data } = useCollection(usersCollectionConfig);
  
  // Data is already loaded, no need for loading states
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {Array.from(data.values()).map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}
```

When you call `preloadCollection`, it:
1. Returns a promise that resolves once the initial sync is complete
2. Makes the data immediately available to any `useCollection` hooks with the same ID
3. Ensures that duplicate calls with the same ID return the same promise

This allows route transitions to pause until needed data is loaded, creating a smoother user experience.
npm package: @kylemathews/synthetic-dom-events
Description: create DOM events for builtin event types
Author: Roman Shtylman
Latest version: 0.3.1

# synthetic-dom-events

Forked from https://github.com/defunctzombie/synthetic-dom-events
so [can build in
Webpack.](https://github.com/defunctzombie/synthetic-dom-events/pull/10)

## example

```js
var event = require('synthetic-dom-events');

// event just returns a correctly created dom event object
// you are responsible for emitting it
var ev = event('click', { button: 2 });

var element = document.createElement('button');
element.dispatchEvent(ev);

// or legacy IE
//element.fireEvent('on' + ev.type, ev);
```