Stream Deck TS-SDK

A library that helps you develop plugins for Elgato's Stream Deck.

Installation

- Install via npm:

``bash
npm install --save streamdeck-typescript
`

Decorators

This Plugin adds a few decorators for classes and methods.

$3

- methods
- @SDOnPiEvent(event) - Listens for specified event in the property inspector context and if
triggered, calls method
- Overhands EventData (\NameOfEvent\Event; Example: KeyDownEvent, KeyUpEvent, WillAppearEvent)
- @SDOnActionEvent(event) - Listens for specified event in the action context and if triggered, calls method
- Overhands EventData (\NameOfEvent\Event; Example: KeyDownEvent, KeyUpEvent, WillAppearEvent)

Usage

You can see an example in the example folder
or look through the Source docs

$3

#### counter.ts
`typescript
import {StreamDeckPluginHandler} from '../src';
import {CounterAction} from './actions/counter.action';

export class Counter extends StreamDeckPluginHandler {
constructor() {
super();
new CounterAction(this, 'fun.shiro.counter.action');
}
}

new Counter();

`

#### plugin.html
`html










`
Here you can see. After the build you have only one file (bundle.js in this case) and this gets loaded.

#### counter-pi.ts
`typescript
import {DidReceiveSettingsEvent, SDOnPiEvent, StreamDeckPropertyInspectorHandler} from '../src';
import {SettingsInterface} from './interfaces/settings.interface';

class CounterPi extends StreamDeckPropertyInspectorHandler {
private count: HTMLInputElement;
private stepsCount: HTMLInputElement;

constructor() {
super();
}

@SDOnPiEvent('documentLoaded')
onDocumentReady() {
this.count = document.getElementById('count') as HTMLInputElement;
this.count.addEventListener('keyup', () =>
this.settingsManager.setContextSettingsAttributes(
this.actionInfo.context, {count: this.count.valueAsNumber}, 500));
this.stepsCount = document.getElementById('steps') as HTMLInputElement;
this.stepsCount.addEventListener('keyup', () =>
this.settingsManager.setContextSettingsAttributes(
this.actionInfo.context, {steps: this.stepsCount.valueAsNumber}, 500));

const settings = this.settingsManager.getContextSettings(this.actionInfo.context);

this.count.value = (settings?.count ?? 0).toString();
this.stepsCount.value = (settings?.steps ?? 1).toString();
}

@SDOnPiEvent('didReceiveSettings')
private onSettingsReceived({payload: {settings}}: DidReceiveSettingsEvent) {
if (Object.keys(settings).length <= 0)
return;

this.count.value = settings.count.toString() ?? 0;
this.stepsCount.value = settings.steps.toString() ?? 1;
}
}

new CounterPi();
`

#### property-inspector.html
`html











@SDOnActionEvent('didReceiveSettings')
private onSettings({context, payload: {settings}}: DidReceiveSettingsEvent) {
this.plugin.setTitle(settings.count.toString() ?? 0, context);
}
}
`
#### settings.interface.ts
`typescript
export interface SettingsInterface {
count: number,
steps: number
}
`

Building the Plugin

`json
{
"scripts": {
"build": "tsc -p tsconfig.json",
"build-example": "browserify -p tsify example/counter-pi.ts | terser -cm --comments false -o dist/bundle-pi.js && browserify -p tsify example/counter.ts | terser -cm --comments false -o dist/bundle.js",
"watch": "start watchify --debug -p tsify example/counter.ts -o dist/bundle.js && start watchify --debug -p tsify example/counter-pi.ts -o dist/bundle-pi.js",
"documentation": "typedoc src/index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
``

How to contribute?

Just fork the repository and create PR's. This project uses
release-please to automatically manage releases.

release-please follows the conventionalcommits specification which follows
the angular commit guidelines.

When commits are merged to the master branch, release-please will automatically create or update a release PR with the appropriate version bump and changelog updates.