open-index/open-npm huggingface dataset:
npm package: @mixer/arcade-machine-react
Description: Input abstraction layer for gamepads, keyboards, and UWP apps
Author: Connor Peet
Latest version: 1.1.0

# @mixer/arcade-machine-react

:video_game: Input abstraction layer for gamepads, keyboards, and UWP apps in React.

See [the docs](https://arcademachinedocs.z13.web.core.windows.net/) for more information and interactive examples!
npm package: @mixer/cdk-quickstart-publisher
Description: This is a helper script to publish quickstarts for cdk. Used internally within Mixer.
Author: Connor Peet
Latest version: 1.0.3

# cdk-quickstart-publisher

This is a helper script to publish quickstarts for cdk. Used internally within Mixer.

### How to use

0. `npm i -g @mixer/cdk-quickstart-publisher`
1. Set your `AZURE_STORAGE_CONNECTION_STRING` environment variable appropriately. [`direnv`](https://direnv.net/) is super useful for this.
2. Create a `.cdk-quickstart` file in your project that exports a list of file rules. Here's an [example](https://github.com/mixer/interactive-launchpad/blob/master/.cdk-quickstart).
3. `npm install -g @mcph/cdk-quickstart-publisher`
4. Run `cdk-quickstart-publisher` to do the thing!

![](./example.png)
npm package: @mixer/cdk-std
Description: Standard library for Mixer Interactive controls
Author: Connor Peet
Latest version: 0.3.0

# cdk-std [![Build Status](https://travis-ci.org/mixer/cdk-std.svg?branch=master)](https://travis-ci.org/mixer/cdk-std)

The `cdk-std` is the standard library for development with Mixer Interactive controls. It provides foundational functionality to communicate from your controls to the Mixer webpage. If you're using the Preact starter, this library is already largely wrapped up for you. If you're using the HTML starter code, you'll be dealing with this more directly.

### Usage & Documentation

API documentation is available [here](https://mixer.github.io/cdk-std/simple-ref.html).

We recommend importing this script through our CDN by adding a script tag in the `<head>` of your webpage:

```html
<script  src="https://mixercc.azureedge.net/lib/std-v0.2.js"></script>
```

After importing it, `mixer` will be available as a global variable in your code. To send input, for example, you can call:

```js
document.getElementById('hello-world').onclick = function(event) {
  mixer.socket.call('giveInput', {
    controlID: 'hello-world',
    event: 'click',
    button: event.button,
  });
};
```

For more information, head to our [developer site](https://dev.mixer.com/)!

### Why is this needed?

For security reasons, all custom control code you write runs in a sandboxes iframe in the Mixer page. However, there's information we want to tell you about, such as the data coming down the Interactive websocket, the position of the video, and so on and so forth. This package provides a bridge and pleasant wrappers over postMessage, the protocol that allows that to happen.

```
                   │
┌──────────────┐       ┌──────────────┐
│Mixer webpage │   │   │ Your Custom  │
│    or app    │       │   Controls   │
│           ┌──┴───┴───┴──┐           │
│         ◀─┤   cdk-std   ├─▶         │
│           └──┬───┬───┬──┘           │
└──────────────┘       └──────────────┘
                   │

            Frame boundary

```
npm package: @mixer/cdk-webpack-plugin
Description: Webpack plugin for Mixer interactive projects
Author: Connor Peet
Latest version: 0.1.5

# cdk-webpack-plugin [![Build Status](https://travis-ci.org/mixer/cdk-webpack-plugin.svg?branch=master)](https://travis-ci.org/mixer/cdk-webpack-plugin)

This plugin is used for developing with custom controls. All custom control bundles are built with Webpack, and this plugin provides hooks for the CDK to collect data and upload bundles correctly.

### Usage

This plugin requires Webpack version 4. You should import it, then add it to the `plugins` array in the `webpack.config.js`. Check out the [HTML starter code](https://github.com/mixer/cdk-html-starter/blob/master/webpack.config.js) for an example:

```js
const { MixerPlugin } = require('@mixer/cdk-webpack-plugin');

// ...

plugins: [
  // The Mixer plugin hooks up all the ✨magic✨ for the development server
  // and uploading to mixer.com.
  new MixerPlugin({ homepage: 'src/index.html' }),
  // ...
```

### Options

#### `homepage` (string) **Required**

Should point to your entry point, canonically called the `index.html`. This is the page loaded and embedded in a Mixer webpage when viewers navigate to the channel.

#### `locales` (string)

You can pass a glob to load folder of locale data. For more information about dealing with translations, check out the [docs on our dev site](https:/dev.mixer.com/reference/interactive_next/quickstart-preact.html#internationalization).
npm package: @mixer/chat-client-websocket
Description: Websocket wrapper for Mixer's chat websocket uses
Author: Microsoft
Latest version: 1.2.0

# client-websocket

[![Build Status](https://travis-ci.org/mixer/client-node.svg)](https://travis-ci.org/mixer/client-websocket) [![](https://badges.gitter.im/mixer/developers.png)](https://gitter.im/mixer/developers)

This is a client websocket library for [Mixer](https://mixer.com)'s Chat Service written in Node.js.

## Getting Started.

It's available on npm:
```
npm install --save @mixer/chat-client-websocket
```

To use the full client library, see https://github.com/mixer/client-node

We have tutorials on our [Developer Site](https://dev.mixer.com) to help you get started.

- [Chat Tutorial](https://dev.mixer.com/tutorials/chatbot.html)
- [REST API Tutorial](https://dev.mixer.com/tutorials/rest.html)


## Getting Help
Chat with us and other developers on our [gitter](https://gitter.im/mixer/mixer-dev)
npm package: @mixer/client-node
Description: Client library for interacting with the mixer API.
Author: Microsoft
Latest version: 3.5.0

# client-node

[![Build Status](https://travis-ci.org/mixer/client-node.svg)](https://travis-ci.org/mixer/client-node) [![](https://badges.gitter.im/mixer/developers.png)](https://gitter.im/mixer/developers)

This is a client library for [Mixer](https://mixer.com) written in Node.js.

## Getting Started.

It's available on npm:
```
npm install --save @mixer/client-node
```

We have tutorials on our [Developer Site](https://dev.mixer.com) to help you get started.

- [Chat Tutorial](https://dev.mixer.com/tutorials/chatbot.html)
- [REST API Tutorial](https://dev.mixer.com/tutorials/rest.html)


## Getting Help
Chat with us and other developers on our [gitter](https://gitter.im/mixer/mixer-dev)


## Contributing
We always welcome contributions from our community! Head to [contributing](https://github.com/mixer/client-node/blob/master/CONTRIBUTING.md) to get started.
npm package: @mixer/executed-nested-binary
Description: Executes a node binary from this folder or any parent
Author: Connor Peet
Latest version: 1.0.1

# node-ex

This tool solves a problem with running scripts in (specifically) Lerna monorepos. Your monorepo will probably common tools, but each package might have its own specific tools and versions. The package specific tools will be found in `./packages/foo/node_modules/.bin`, and the common packages in `./node_modules/.bin`. However, npm scripts in the nested package will only reference the local binaries. Packages like [`link-parent-bin`](https://www.npmjs.com/package/link-parent-bin) allow you to override the nested package binaries with the parent, but these prevent the nested package from being able to install and of its own tools.

`node-ex` is a simple tool which executes a command with all parent `node_module/.bin` folders placed in the PATH of the command. Your nested binaries, if present, will override the shared binaries.

### Usage

```
npm install -g @mixer/execute-nested-binary
```

You can run your commands by prefixing them with `node-ex`:

```
$ node-ex prettier --help
Usage: prettier [options] [file/glob ...]
```

You can also pass `--where` before the binary to print out its location on your hard drive:

```
$ node-ex --where prettier
/Users/copeet/Github/potatoes/node_modules/.bin
```
npm package: @mixer/parallel-prettier
Description: Concurrent prettier runner
Author: Connor Peet
Latest version: 2.0.3

# @mixer/parallel-prettier

A wrapper around [prettier]() that formats files in parallel to speed up large projects.

```
npm install -g @mixer/parallel-prettier
```

After installing the CLI, the `pprettier` command will be available to you.

### Ad-hoc Performance

```
# 300 file project:

prettier --write "src/**/*.{ts,tsx,json,scss}"  6.57s user 0.55s system 131% cpu 5.405 total
pprettier --write "src/**/*.{ts,tsx,json,scss}"  0.41s user 0.08s system 14% cpu 3.455 total

# 1200 file project:

prettier --write "src/**/*.{ts,tsx,json,scss}"  27.09s user 3.26s system 123% cpu 24.496 total
pprettier --write "src/**/*.{ts,tsx,json,scss}"  1.21s user 0.27s system 14% cpu 10.580 total
```
npm package: @mixer/postmessage-rpc
Description: Remote procedure call layer between browser contexts
Author: Connor Peet
Latest version: 1.1.4

# @mixer/postmessage-rpc

This is a library for making RPC calls (asynchronous method calls) between browser windows or iframes. It builds upon the browser `postMessage` API, which lacks some features that complex applications may depend upon:

 - The ability to have transactional request/response calls between windows
 - Easy scoping between multiple applications; `postMessage` events are global on the window, so multiple postMessage targets must be disambiguated.
 - `postMessage` does not guarantee ordering, which can lead to surprising and difficult to diagnose bugs.

This RPC layer resolves those issues.

### Example Usage

The RPC class is symmetrical and should be created on both windows you want to talk between. Say you want to embed `iframe.html` inside the `parent.html`, and have the parent provide a function that adds things the child gives it. That might look like:

**parent.js**

```js
import { RPC } from '@mixer/postmessage-rpc';

const rpc = new RPC({
  // The window you want to talk to:
  target: myIframe.contentWindow,
  // This should be unique for each of your producer<->consumer pairs:
  service: 'my-awesome-service',

  // Optionally, allowlist the origin you want to talk to:
  // origin: 'example.com',
});

rpc.expose('add', (data) => data.a + data.b);
```

**iframe.js**

```js
import { RPC } from '@mixer/postmessage-rpc';

const rpc = new RPC({
  target: window.parent,
  service: 'my-awesome-service',
});

rpc.call('add', { a: 3, b: 5 }).then(result => console.log('3 + 5 is', result));
```
npm package: @mixer/preprocessor-loader
Description: C/C++ style preprocess compiler for HTML/css/etc.
Author: Jonathan Lobaugh
Latest version: 1.0.2

# preprocessor-loader

[![npm version](https://badge.fury.io/js/@mcph/preprocessor-loader.svg)](https://badge.fury.io/js/@mcph/webpackpreprocessor-loader)
[![Build Status](https://travis-ci.org/mixer/@mcph/preprocessor-loader.svg?branch=master)](https://travis-ci.org/mixer/preprocessor-loader)

[Link](https://github.com/jsoverson/preprocess/blob/master/README.md) to `preprocess` documentation

`preprocessor-loader` is a webpack loader that allows conditional compilation of HTML/TS/CSS via comment 'directives'. It's essentially a very minimalistic C/C++ preprocessor language and to interoperate fully with other templating engines and build tools.

For example, you can have split styling for a "desktop" and "xbox" build:

```html
<h1>Hello World</h1>

<!-- @if PLATFORM == 'desktop' -->
<p>You're on our desktop build!</p>
<!-- @endif -->
<!-- @if PLATFORM == 'mobile' -->
<p>You're on our mobile build!</p>
<!-- @endif -->
```

The result of building the above targeting the `mobile` platform would be:

```html
<h1>Hello World</h1>

<p>This is only on mobile</p>
```

### Usage

Your `webpack.config.js` might look something like this:

```js
module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.html$/,
        loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=html&PLATFORM=' + platform]
      },
      {
        test: /\.ts$/,
        loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=ts&PLATFORM=' + platform]
      },
      {
        test: /\.scss$/,
        loaders: ['raw-loader', '@mcph/preprocessor-loader?_type=scss&PLATFORM=' + platform]
      }
    ]
  }
};
```

The loader can take any number of key/value pairs, with each key representing what you want to compile against, and each value representing what you want that key to be. In this case, we specified that we only want to compile `<!-- @if PLATFORM == 'mobile' -->` and want everything else to be stripped out.
npm package: @mixer/shortcode-oauth
Description: Mixer OAuth shortcode client
Author: Connor Peet
Latest version: 1.2.0

# @mixer/shortcode-auth

```
npm install --save @mixer/shortcode-oauth
```

This is a client for Mixer shortcode OAuth in Node.js. An example can be found in `example.js` in this directory. For more information about OAuth in general, check out the [OAuth reference page](https://dev.mixer.com/reference/oauth/index.html) on the Mixer developer site.

```js
const { ShortCodeExpireError, OAuthClient } = require('@mixer/shortcode-oauth');

const client = new OAuthClient({
  clientId: '<Your OAuth token here!>',
  scopes: ['interactive:robot:self'],
});

const attempt = () =>
  client
    .getCode()
    .then(code => {
      console.log(`Go to mixer.com/go and enter ${code.code}`);
      return code.waitForAccept();
    })
    .catch(err => {
      if (err instanceof ShortCodeExpireError) {
        return attempt(); // loop!
      }

      throw err;
    });

attempt().then(tokens => console.log(`Token data`, tokens.data));

```

Example:

```
Go to mixer.com/go and enter E2LM8U
Token data { accessToken: '<snip>',
  refreshToken: '<snip>',
  expiresAt: 2018-08-23T06:56:49.169Z,
  scopes: [ 'interactive:robot:self' ] }
```
npm package: @mixer/webpack-bundle-compare
Description: Tool to compare webpack bundle files
Author: Connor Peet
Latest version: 0.1.1

# @mixer/webpack-bundle-compare

This is a tool that allows you to compare webpack bundle analysis files over time. Check it out [here](https://happy-water-0887b0b1e.azurestaticapps.net).

![](./screenshot.png)

## Usage

The bundle comparison tool takes URLs of webpack stat outputs and displays them. You can use the JSON output from the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer), but we also include a plugin here if you don't use that package.

### Using the Plugin

First, install the plugin.

```
npm install --save-dev @mixer/webpack-bundle-compare
```

Then, add it to your webpack.config.js file.

```diff
+const { BundleComparisonPlugin } = require('@mixer/webpack-bundle-compare');

...

   plugins: [
+    new BundleComparisonPlugin()
   ]
```

By default, this'll output a file named `stats.msp.gz` in your build output. This is a gzipped msgpack file--for large projects webpack bundle stats can get pretty big and slow down your build, so we try to make it fast. You can configure the output format and filename by passing options to the plugin:

```js
new BundleComparisonPlugin({
  // File to create, relative to the webpack build output path:
  file: 'myStatsFile.msp.gz',
  // Format to output, "msgpack" by default:
  format: 'msgpack' | 'json',
  // Whether to gzip the output, defaults to true:
  gzip: true | false,
})
```

Once you have this file, you can upload it somewhere such as Azure blob storage, and serve it in the tool. The module exposes a convenient way to get a direct preloaded link in the tool:

```js
const { getComparisonAddress } = require('@mixer/webpack-bundle-compare');
const link = getComparisonAddress([
  'http://example.com/stats1.msp.gz',
  'http://example.com/stats1.msp.gz',
])

console.log('See your comparison at:', link);
```

## Contributing

### Architecture

It's a React/Redux app. We pull webpack analysis JSON down from URLs, process them, and output UI. State is driven via Redux, and the parsing and unzipping of the (potentially very large) webpack stat files happen in a webworker. Actions sent in the redux state are mirrored to the webworker, and in turn the webworker and send actions which get fired back to the host application. The work we do atop the stats file is not particularly interesting--an assortment of parsing, walking, and graph generation functions.

### Iteration

To develop against the UI:

1. Create a folder called "public/samples", and place JSON files in there. Or use the ones we already have preloaded.
2. Set the `WBC_FILES` environment variable to a comma-delimited list of the filenames you placed in there.
3. Running the webpack dev server via `npm start` will now serve the files you have placed in there.
npm package: @mixerx/config
Description: Typed network and instance config for MixerX
Latest version: 0.1.2

# @mixerx/config

Mainnet-first Tornado-compatible config package.

The exported shape follows `tornado-config` conventions (top-level exports like
`torn`, `miningV2`, `instances`, `tornadoRouter`, `relayerRegistry`, etc.), and
`instances` uses numeric chain keys (`1`, `5`, `10`, ...).

## Scripts

- `yarn typecheck`
- `yarn build`
- `yarn check:shape`
npm package: @mixgarden/sdk
Description: JavaScript/TypeScript SDK for the Mixgarden API
Latest version: 0.1.4

# Mixgarden JavaScript SDK

A lightweight promise‑based wrapper around the Mixgarden REST API.

```bash
npm install @mixgarden/sdk
```

- Use `models()` to get a list of available models and providers.
- Use `plugins()` to get a list of available plugins.
- Use `conversations()` to get a list of available conversations.
- Use `conversation(id)` to get a specific conversation.
- Use `chat()` when you’re building a conversational UI, or want the platform to maintain context for you.
- Use `getMGCompletion()` when you need a one-off, stateless generation enhanced by Mixgarden plugins.
- Use `getCompletion()` when you need a one-off, stateless generation directly from LLM (Raw LLM Output).

```ts
import { MixgardenSDK } from '@mixgarden/sdk';

const sdk = new MixgardenSDK({ apiKey: process.env.MIXGARDEN_API_KEY });

const models = await sdk.getModels();
const chat = await sdk.chat({
  model: "openai/gpt-4o-mini",
  // Optionally add conversationId to add to an existing conversation
  // conversationId: "your-convo-id",
  content: 'hello mixgarden!',
  pluginId: 'tone-pro',
  pluginSettings: {
      'emotion-type': 'neutral',
      'emotion-intensity': 6,
      'personality-type': 'friendly'
  }
});
const plugins = await sdk.getPlugins();
const conversations = await sdk.getConversations();
const conversation = await sdk.getConversation(conversations[0].id);

// Mixgarden Enhanced Output - Single Message
const mgCompletion = await sdk.getMGCompletion({
  model: "openai/gpt-4o-mini",
  content: "hello mixgarden!",
  maxTokens: 100,
  temperature: 0.7,
  pluginId: "tone-pro",
  pluginSettings: {
    "emotion-type": "neutral",
    "emotion-intensity": 6,
    "personality-type": "friendly"
  }
});

// Raw LLM Output - Single Message
const completion = await sdk.getCompletion({ 
    model: "openai/gpt-4o-mini", 
    messages: [{ role: 'user', content: 'Hi there!' }], 
    maxTokens: 100, temperature: 0.7 
});
```