open-index/open-npm huggingface dataset:
npm package: @r7-dev/electron-trpc
Description: Electron support for tRPC
Author: Jason Nall
Latest version: 0.8.0-beta.2

# electron-trpc

<p>
  <a href="https://www.npmjs.com/package/electron-trpc">
    <img alt="NPM" src="https://img.shields.io/npm/v/electron-trpc"/>
  </a>
  <a href="https://codecov.io/gh/jsonnull/electron-trpc"> 
  <img src="https://codecov.io/gh/jsonnull/electron-trpc/branch/main/graph/badge.svg?token=DU33O0D9LZ"/> 
  </a>
  <span>
    <img alt="MIT" src="https://img.shields.io/npm/l/electron-trpc"/>
  </span>
</p>

<p></p>

**Build IPC for Electron with tRPC**

- Expose APIs from Electron's main process to one or more render processes.
- Build fully type-safe IPC.
- Secure alternative to opening servers on localhost.
- Full support for queries, mutations, and subscriptions.

## Installation

```sh
# Using pnpm
pnpm add electron-trpc

# Using yarn
yarn add electron-trpc

# Using npm
npm install --save electron-trpc
```

## Basic Setup

1. Add your tRPC router to the Electron main process using `createIPCHandler`:

   ```ts
   import { app } from 'electron';
   import { createIPCHandler } from 'electron-trpc/main';
   import { router } from './api';

   app.on('ready', () => {
     const win = new BrowserWindow({
       webPreferences: {
         // Replace this path with the path to your preload file (see next step)
         preload: 'path/to/preload.js',
       },
     });

     createIPCHandler({ router, windows: [win] });
   });
   ```

2. Expose the IPC to the render process from the [preload file](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts):

   ```ts
   import { exposeElectronTRPC } from 'electron-trpc/main';

   process.once('loaded', async () => {
     exposeElectronTRPC();
   });
   ```

   > Note: `electron-trpc` depends on `contextIsolation` being enabled, which is the default.

3. When creating the client in the render process, use the `ipcLink` (instead of the HTTP or batch HTTP links):

   ```ts
   import { createTRPCProxyClient } from '@trpc/client';
   import { ipcLink } from 'electron-trpc/renderer';

   export const client = createTRPCProxyClient({
     links: [ipcLink()],
   });
   ```

4. Now you can use the client in your render process as you normally would (e.g. using `@trpc/react`).
npm package: @r74tech/docusaurus-plugin-panzoom
Description: A plugin to enable the panzoom component on SVG and other elements
Author: r74tech
Latest version: 2.4.2

# docusaurus-plugin-panzoom

This plugin adds the ability to pan and zoom images and SVG images inside of a docusaurus website.  This is useful for embedding diagrams or
complex mermaid.js renders around models and object schemas.  The normal theme doesn't scale tremendously well in a browser so some augmentation
for complex diagrams is necessary.

This implements the excellent [@panzoom/panzoom](https://www.npmjs.com/package/@panzoom/panzoom) plugin 

## Installation

```bash
npm install @r74tech/docusaurus-plugin-panzoom
```

```javascript
// In docusaurus.config.js
// ...
plugins: ['@r74tech/docusaurus-plugin-panzoom'],
// or
plugins: [['@r74tech/docusaurus-plugin-panzoom', {} /* options */]],
```

## Configuration

The plugin accepts the following configuration options:

```javascript
// In docusaurus.config.js
// ...
themeConfig: {
  zoom: {
    // A list of selectors to look for elements to enable pan and zoom
    // Default: ['div.mermaid[data-processed="true"]', 'div.docusaurus-mermaid-container', '.drawio']
    selectors: ['div.mermaid[data-processed="true"]', '.drawio'],
    
    // Whether to wrap the panzoom items in a div with overflow:hidden
    // This constrains the pan zoom detail into the original container
    // Default: true
    wrap: true,
    
    // The amount of time to wait in MS before the plugin client module tries to look for
    // and alter pan zoom elements. Some renders take a little bit before they appear in the
    // dom to find.
    // Default: 1000
    timeout: 1000,
    
    // Add this class to any element within the Panzoom element that you want to exclude from Panzoom handling.
    // That element's children will also be excluded. e.g. links and buttons that should not propagate the click event.
    // Default: 'panzoom-exclude'
    excludeClass: 'panzoom-exclude',
    
    // You can also pass any options supported by @panzoom/panzoom
    // See: https://github.com/timmywil/panzoom for available options
  }
}
```

> [!NOTE]
> This package is a fork of [act-org/docusaurus-plugin-panzoom](https://github.com/act-org/docusaurus-plugin-panzoom) under the MIT license. It was forked because the original package was not being actively maintained.
>
> If the original package is updated and maintained again, we recommend migrating back to the original package. This fork will continue to be maintained until then.

## License

MIT, see [LICENSE](LICENSE) for more details.
npm package: @r7kamura/cycle-fetcher-driver
Description: A Cycle.js Driver for making HTTP requests using fetcher.
Author: Ryo Nakamura
Latest version: 0.0.3

# cycle-fetcher-driver
A Cycle.js Driver for making HTTP requests using [stackable-fetcher](https://github.com/r7kamura/stackable-fetcher).

## Install
```sh
npm install @r7kamura/cycle-fetcher-driver
```

## Usage
```js
import Cycle from '@cycle/core';
import { h, makeDOMDriver } from '@cycle/dom'
import { makeFetcherDriver } from '@r7kamura/cycle-fetcher-driver';

Cycle.run(
  ({ DOM, HTTP }) => {
    const url = 'http://example.com';
    const request$ = Rx.Observable.just({ method: 'GET', url });
    const vtree$ = responses.HTTP
      .filter((response$) => response$.request.url === url)
      .mergeAll()
      .map(({ body }) => body)
      .startWith('Loading...')
      .map(text => h('h1', text));
    return {
      DOM: vtree$,
      HTTP: request$
    };
  },
  {
    DOM: makeDOMDriver('body'),
    HTTP: makeFetcherDriver()
  }
);
```
npm package: @r7kamura/cycle-history-driver
Description: A Cycle.js Driver to manage the browser history.
Author: Ryo Nakamura
Latest version: 0.0.2

# cycle-history-driver
A Cycle.js Driver to manage the browser history.

## Install
```sh
npm install @r7kamura/cycle-history-driver
```

## Usage
```js
import Cycle from '@cycle/core';
import { makeDOMDriver } from '@cycle/dom'
import { makeHistoryDriver } from '@r7kamura/cycle-history-driver';

Cycle.run(
  ({ DOM, history }) => view(model(intent({ DOM, history }))),
  {
    DOM: makeDOMDriver('body'),
    history: makeHistoryDriver()
  }
);
```

### request to push state
```js
// In your view function, you need to prepare an Observable that emits Object{url} for push-state.
// This Observable must be returned from your main function.
const historyRecord$ = DOM.select('a.your-internal-anchor').events('click').map((event) => {
  event.preventDefault();
  return { url: event.target.href };
});
```

### response from pop state
```js
// In your intent function, you can subscribe history to react to pop-state events.
// This Observable can be accessed from your main function's arguments.
history.map(_ => window.location.href).map((url) => { /* ... */ });
```