open-index/open-npm huggingface dataset:
npm package: @swtc/videostream
Description: Streams data from a file-like seekable object into a `video` or `audio` node (a HTMLMediaElement)
Author: John Hiesey
Latest version: 3.2.2

# Videostream

Streams data from a file-like seekable object into a &lt;video&gt; or &lt;audio&gt; node (a `HTMLMediaElement`).
Seeking the media element will request a different byte range from the incoming
file-like object.

For now only mp4 files are supported. The goal is to support
most files that conform to ISO/IEC 14496-12.

Version 2 is completely rewritten and substantially more robust
than the previous version that relied on mp4box.js. The only major regression
compared to the previous architecture is that fragmented mp4 files aren't
supported. If this is a problem I may add support again at some point.

Support for most other formats will take significant work.

## Usage

Videostream just exports a function. Use it like this:

```js
const VideoStream = require('videostream')

const exampleFile = {
  createReadStream (opts) {
    const { start, end } = opts
    // Return a readable stream that provides the bytes
    // between offsets "start" and "end" inclusive
  }
}

const video = document.createElement('video')
const videostream = new VideoStream(exampleFile, video)

video.addEventListener('error', () => {
  // listen for errors on the video/audio element directly
  const errorCode = elem.error
  const detailedError = videostream.detailedError
  // videostream.detailedError will often have a more detailed error message
})
```

### Errors

Handle errors by listening to the `'error'` event on the `<video>` or `<audio>` tag.

Some (but not all) errors will also cause `videostream.detailedError` to be set to
an error value that has a more informative error message.

## License

MIT. Copyright (c) John Hiesey.
npm package: @swup/ga-plugin
Description: A swup plugin for integrating Google Analytics
Author: Georgy Marchuk
Latest version: 2.0.0

# Swup Google Analytics Plugin

A [swup](https://swup.js.org) plugin for integrating Google Analytics.

- Trigger pageview events after each page change
- This event is not triggered on intial load, so the first page view must be triggered elsewhere
- However, the page view event is by default triggered in the [Javascripts tracking snippet](https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet) used for embedding Google Analytics

Simplified code run by this plugin on the `page:view` hook:

```js
// On sites using gtag.js
window.gtag('config', GA_MEASUREMENT_ID, {
  page_title: title,
  page_path: url
});

// On sites using analytics.js
window.ga('set', 'title', document.title);
window.ga('set', 'page', window.location.pathname + window.location.search);
window.ga('send', 'pageview');
```

## Installation

Install the plugin from npm and import it into your bundle.

```bash
npm install @swup/ga-plugin
```

```js
import SwupGaPlugin from '@swup/ga-plugin';
```

Or include the minified production file from a CDN:

```html
<script src="https://unpkg.com/@swup/ga-plugin@2"></script>
```

## Usage

To run this plugin, include an instance in the swup options.

```javascript
const swup = new Swup({
  plugins: [new SwupGaPlugin()]
});
```

## Options

### gaMeasurementId

This option is only required on sites using gtag.js, usually loaded like this:

```html
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
```

The `window.gtag` function the measurement ID to trigger page views.

```javascript
const swup = new Swup({
  plugins: [
    new SwupGaPlugin({ gaMeasurementId: GA_MEASUREMENT_ID })
  ]
});
```
npm package: @swup/gtm-plugin
Description: A swup plugin for integrating Google Tag Manager
Author: Georgy Marchuk
Latest version: 2.0.0

# Swup GTM Plugin

A [swup](https://swup.js.org) plugin for integrating Google Tag Manager.

- Trigger a custom event after each page change to associate with a page view within GTM
- This event is not triggered on intial load, so the first page view must be triggered elsewhere
- The event is a `VirtualPageview` with `virtualPageURL` and `virtualPageTitle` properties

Simplified code run by this plugin on the `page:view` hook:

```js
window.dataLayer.push({
  event: 'VirtualPageview',
  virtualPageURL: window.location.pathname + window.location.search,
  virtualPageTitle: document.title
});
```

## Installation

Install the plugin from npm and import it into your bundle.

```bash
npm install @swup/gtm-plugin
```

```js
import SwupGtmPlugin from '@swup/gtm-plugin';
```

Or include the minified production file from a CDN:

```html
<script src="https://unpkg.com/@swup/gtm-plugin@2"></script>
```

## Usage

To run this plugin, include an instance in the swup options.

```javascript
const swup = new Swup({
  plugins: [new SwupGtmPlugin()]
});
```
npm package: @swup/livewire-plugin
Description: A swup plugin for integrating Laravel Livewire
Author: Michael Aerni
Latest version: 2.0.1

# Swup Livewire Plugin

A [swup](https://swup.js.org) plugin for integrating [Laravel Livewire](https://laravel-livewire.com/).

Re-initialize Livewire components after each page change.

## Installation

Install the plugin from npm and import it into your bundle.

```bash
npm install @swup/livewire-plugin
```

```js
import SwupLivewirePlugin from '@swup/livewire-plugin';
```

Or include the minified production file from a CDN:

```html
<script src="https://unpkg.com/@swup/livewire-plugin@2"></script>
```

## Usage

To run this plugin, include an instance in the swup options.

```javascript
const swup = new Swup({
  plugins: [new SwupLivewirePlugin()]
});
```
npm package: @swup/plugin
Description: Base class for creating swup plugins
Author: Georgy Marchuk
Latest version: 4.0.0

# Swup Base Plugin

Base class for creating [swup](https://swup.js.org) plugins.

## Creating a Plugin

To create a new plugin, use the official [swup plugin template](https://github.com/swup/plugin-template).
It comes with detailed instructions and the required tooling.

## Usage

Import the base class and extend your plugin from it.

```js
import Plugin from '@swup/plugin';

export default class PluginName extends Plugin {
  name = 'PluginName';
  mount() {}
  unmount() {}
}
```

## Development

The official [swup command-line interface](https://github.com/swup/cli) has commands to help with
bundling and linting plugins.

```sh
npm install --save-dev @swup/cli
```

### Bundling

Bundle the plugin for production using [microbundle](https://github.com/developit/microbundle),
creating ESM and UMD builds.

```bash
# Bundle and transpile plugin code for distribution
swup package:bundle

# Bundle plugin code in watch mode
swup package:dev
```

### Linting & formatting

Lint the plugin code using [prettier](https://prettier.io/) and swup's recommended rules.

```bash
# Lint plugin code
swup package:lint

# Fix and format any lint errors
swup package:format
```

### Package info

Check that the plugin's package.json file contains the required information for microbundle:
input, output, export map, amd name, etc.

```bash
# Check plugin package info
swup package:check
```
npm package: @swup/progress-plugin
Description: A swup plugin for displaying a progress bar
Author: Philipp Daun
Latest version: 3.2.0

# Swup Progress Bar Plugin

A [swup](https://swup.js.org) plugin for displaying a progress bar.

Shows a loading indicator for requests taking longer than ~300ms.

## Installation

Install the plugin from npm and import it into your bundle.

```bash
npm install @swup/progress-plugin
```

```js
import SwupProgressPlugin from '@swup/progress-plugin';
```

Or include the minified production file from a CDN:

```html
<script src="https://unpkg.com/@swup/progress-plugin@3"></script>
```

## Usage

To run this plugin, include an instance in the swup options.

```javascript
const swup = new Swup({
  plugins: [new SwupProgressPlugin()]
});
```

## Styling

The progress bar has a class name of `swup-progress-bar` you can use for styling.

```css
.swup-progress-bar {
  height: 4px;
  background-color: blue;
}
```

## Options

```javascript
{
  className: 'swup-progress-bar',
  transition: 300,
  delay: 300,
  initialValue: 0.25,
  finishAnimation: true
}
```

### className

Class name to use for the container div.

### transition

Length of the CSS transition between loading states, in milliseconds.

### delay

How long to wait before showing the progress bar, in milliseconds.

Set to `0` to always display the progress bar, even on fast requests.

### initialValue

To create a slightly more "realistic" appearance, the progress bar will start
out at a random position beteen 0 and the value of this option. Set to `0` to
always start from the left.

### finishAnimation

Whether the progress bar will complete the transition to 100% before hiding.
npm package: @swup/test
Description: Swup theme template
Author: Georgy Marchuk
Latest version: 0.1.5

# Plugin template

This repo is used as a template for swup plugins. Steps to the publish your own swup plugin:

1. Make a copy of this repo.
2. Update the name in _package.json_. Please, follow format `swup-[plugin name]-plugin`.
3. Update the description, repository url and author in _package.json_.
4. Write your plugin in `src/index.js`. Plugin must be in a form of class, must extend `@swup/plugin` and should have a property name defined (`package.json` name in a form PascalCase - _swup-name-plugin_ -> _SwupNamePlugin_).
5. Update this documentation. Below is a documentation template where the _SwupNamePlugin_ needs to be replaced with your plugin name from packages.json in PascalCase.
6. Use `npm run build` to compile a standalone version of your plugin (_dist_ folder) and `npm run compile` to transpile npm version of your plugin (_lib_ folder). Both commands are run before publishing automatically.
7. Publish your plugin to npm with `npm publish` command. This assumes you have npm account and are logged in with your computers CLI.

## Tips

- Checkout existing plugins before creating one.
- Checkout existing plugins before creating one.
- Swup instance is automatically assigned to the plugin instance and can be accessed under `this.swup` in `mount`/`unmount` methods.
- If you feel like this should be an official swup plugin (under npm `@swup` organization) and the world could use a thing like this, contact me at gmarcuk@gmail.com.

---

# Swup [plugin name] plugin

## Instalation

This plugin can be installed with npm

```bash
npm install swup-[plugin name]-plugin
```

and included with import

```javascript
import Swup[Name]Plugin from 'swup-[plugin name]-plugin';
```

or included from the dist folder

```html
<script src="./dist/SwupNamePlugin.js"></script>
```

## Usage

To run this plugin, include an instance in the swup options.

```javascript
const swup = new Swup({
  plugins: [new SwupNamePlugin()]
});
```