npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fnando/streamdeck

v0.1.0-alpha.7

Published

A lean framework for developing Elgato Stream Deck plugins.

Downloads

25

Readme

@fnando/streamdeck

Tests NPM NPM MIT License

A lean framework for developing Elgato Stream Deck plugins.

https://user-images.githubusercontent.com/3009/153739253-51973586-c278-4104-805c-ae61d534d33c.mp4

Installation

To create a new plugin, use the following command:

npx @fnando/streamdeck create /path/to/your/plugin \
  --name 'Your Plugin Name' \
  --description 'Your plugin description' \
  --id 'com.sample.streamdeck-your-plugin' \
  --github your-github-user

If you prefer Gitlab, use --gitlab instead. There are other options you may use, so if you want to check them out, the following command instead:

$ npx @fnando/streamdeck create --help
streamdeck create [path]

Create a new Stream Deck extension

Positionals:
  path  The extension path.                                    [string]

Options:
  --version      Show version number                          [boolean]
  --help         Show help                                    [boolean]
  --name         The human-readable name of the extension.
                                                    [string] [required]
  --id           A reversed-DNS format that identifies the extension.
                                                    [string] [required]
  --author       The author name.                         [default: ""]
  --email        The author email.                        [default: ""]
  --url          The extension url.                       [default: ""]
  --description  The extension description.
                               [default: "Your new Stream Deck plugin"]
  --github       Your Github user. When present, an origin pointing to
                 Github will be added.                    [default: ""]
  --gitlab       Your Gitlab user. When present, an origin pointing to
                 Gitlab will be added.                    [default: ""]
  --install      Install dependencies using npm.        [default: true]

Usage

$ streamdeck -h
Usage: streamdeck <command> [options]

Commands:
  streamdeck bundle          Build files under `build` directory. While
                             developing, use `--dev` to generate the
                             files that can be linked to Stream Deck's
                             plugins directory. It'll generate the
                             `.streamDeckPlugin` otherwise.
  streamdeck release         Release a new version of the plugin. This
                             command will export a new bundle, make a
                             new commit, tag it with the provided
                             version, alter CHANGELOG.md, and push to
                             your Git's repo origin source.
  streamdeck create [path]   Create a new Stream Deck extension
  streamdeck images          Create file with embedded images
  streamdeck link            Link the dist directory to Stream Deck's
                             plugin directory.
  streamdeck unlink          Remove the Stream Deck directory's link.
  streamdeck docs            Open Elgato's docs.
  streamdeck styleguide      Show Elgato's style guide
  streamdeck debug [action]  Manage debugging mode.

Options:
  --version  Show version number                              [boolean]
  --help     Show help                                        [boolean]

Plugin structure

$ tree -I node_modules
.
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE.md
├── README.md
├── build
│   └── com.fnando.hello.sdPlugin
│       ├── css
│       │   ├── custom.css
│       │   └── sdpi.css
│       ├── images
│       │   ├── actions
│       │   │   ├── Hello
│       │   │   │   ├── Key.png
│       │   │   │   └── [email protected]
│       │   │   ├── Hello.png
│       │   │   └── [email protected]
│       │   ├── category.png
│       │   ├── [email protected]
│       │   ├── plugin.png
│       │   └── [email protected]
│       ├── inspector.html
│       ├── inspector.js
│       ├── inspectors
│       ├── manifest.json
│       ├── plugin.html
│       └── plugin.js
├── icons.sketch
├── package-lock.json
├── package.json
├── release
│   └── com.fnando.hello.streamDeckPlugin
├── src
│   ├── actions
│   │   └── Hello.ts
│   ├── css
│   │   ├── custom.css
│   │   └── sdpi.css
│   ├── images
│   │   ├── actions
│   │   │   ├── Hello
│   │   │   │   ├── Key.png
│   │   │   │   └── [email protected]
│   │   │   ├── Hello.png
│   │   │   └── [email protected]
│   │   ├── category.png
│   │   ├── [email protected]
│   │   ├── embed
│   │   ├── multiActions
│   │   ├── plugin.png
│   │   └── [email protected]
│   ├── images.json
│   ├── inspector.html
│   ├── inspector.ts
│   ├── inspectors
│   ├── locales
│   ├── plugin.ts
│   └── streamdeck.json
└── tsconfig.json

18 directories, 40 files

Workflow

Development

  1. First, you need to enable the debugging mode. This can be done by running streamdeck debug enable.
  2. Symlink the plugin directory into Stream Deck's plugins directory by running streamdeck link.
  3. To open the debugger page, you'll need a Chrome-based browser (Google Chrome, Brave, Microsoft Edge, Opera, etc). Use streamdeck debug to open http://127.0.0.1:23654/ on your browser automatically.
  4. It's recommended that you use watchman to automatically export files while developing your plugin. Make sure it's installed and then run watchman-make -p 'src/**/*' '*.json' --run 'streamdeck bundle --dev' to watch for changes and create the bundle automatically. Notice that some changes will also require that you restart the Stream Deck app.

Releasing a new version

Once your plugin is done, run streamdeck release --version [version]. This command will update CHANGELOG.md, change src/streamdeck.json, generate the releases/*.streamDeckPlugin, make a Git commit, tag this commit, and push to your preferred Git hosting service (Github or Gitlab).

Maintainer

Contributors

  • https://github.com/fnando/streamdeck/contributors

Contributing

For more details about how to contribute, please read https://github.com/fnando/streamdeck/blob/main/CONTRIBUTING.md.

License

The gem is available as open source under the terms of the MIT License. A copy of the license can be found at https://github.com/fnando/streamdeck/blob/main/LICENSE.md.

Code of Conduct

Everyone interacting in the @fnando/streamdeck project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.