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

screwy

v1.0.5

Published

GUI for npm scripts

Downloads

16

Readme

Screwy

The npm scripts GUI. (Formerly npm-scripts-gui)

Tested on OS X Yosemite, OS X El Capitan, and Ubuntu

Installation

Install as a Dev Dependency

npm i -D screwy

...Or Install Globally

npm i -g screwy

Installing as a dev dependency allows anyone who downloads your project to also get access to the gui... for free!

Launching

To launch Screwy, you must be in a directory with a package.json file.

If Installed Globally

Then simply run: screwy

If Installed as a Dev Dependency (Recommended)

You must create an npm script task in the package.json that runs the screwy command and then you would run npm run <command_name> from the terminal.

{
    "scripts": {
        "screwy": "screwy"
    }
}

Installing as a dev dependency is recommended because it allows the Screwy to be bundled with your project and available for everyone who run npm i in your project.

Seeing Output

Whether Screwy is installed globally or as a dependency, any text output associated with any npm script task will be printed to the command line where Screwy was launched.

Quiting the App

To quit the app, it is safer to close the actual renderer window rather than quiting the process from the command line. If quiting from the command line, Screwy may not do the check to make sure all processes are killed before closing.

Killing a Running Script

Double Click a running button.

Processes will die automatically when they finish or when the app is closed, but there may be times when you want to manually kill a process.

You can also use the KILL command with file watching and hotkeys.

File Watching

You can tell Screwy to watch files and how to respond to those changes. You need to create a watch block in the .screwyrc file. You can watch directories, files, and use the * and ** wildcards.

After specifying a path, you need to specify which npm script task to respond to the file change and how it should respond. There are 3 options regarding the type of action to perform:

  • START (default, may be excluded)
  • KILL
  • RESTART (if the task is running, this will kill it and start it)

NOTE: A whitespace is required after any of the keywords.

Example:

{
    "watch": {
        "src/scripts/*.js": "RESTART transpile-scripts",
        "./index.js": "RESTART start-server",
        "src/styles": "stylus"
    }
}

In the example, the first watcher will restart the transpile-scripts task when any .js files are changed at src/scripts. The second watcher will apparently restart the server when the index.js file is changed. The last watcher will run START stylus (START is default).

Watching Other Commands

You can tell Screwy to run a command whenever another specific command finishes. Within the same block as file watching, simply replace the file path with CMD <command_name>

Example:

{
    "watch": {
        "CMD transpile-scripts": "RESTART start-server",
        "./index.js": "RESTART start-server"
    }
}

In the example, the RESTART start-server command will run every time the transpile-scripts command finishes and when index.js is changed.

Hotkeys

Ever wanted to run an npm script by hitting a key combination on your keyboard?

Hotkey combinations are configurable in the .screwyrc file. These allow you to trigger any npm scripts without needing to even click on the button or even being focused on the GUI window.

Again, you can have the GUI window minimized and the hotkeys will still trigger button clicks, and output will be sent to the terminal.

Hotkeys are defined in the .screwyrc file. They require the name of the hotkey combination as the key and the npm script as the value.

Just as with file watching, the START, RESTART, and KILL commands may be used with the npm task name.

{
    "hotkeys": {
        "Control+Cmd+Alt+s": "start",
        "Control+Cmd+Alt+r": "RESTART start",
        "Control+Cmd+Alt+k": "KILL start"
    }
}

In the above example, assuming the start command's job is to spin up a server, then Control+Cmd+Alt+s would start the server if it weren't on, Control+Cmd+Alt+r would restart it if it was running, and Control+Cmd+Alt+k would shut it down (kill it).

Multi-platform Compatibility

If you expect others to run Screwy on a different platform than you are developing on, you will need to specify the platform to avoid conflicts.

For Mac, use: OSX or darwin

For Linux, use: linux

{
    "hotkeys": {
        "darwin": {
            "Control+Cmd+Alt+s": "start",
            "Control+Cmd+Alt+r": "RESTART start",
            "Control+Cmd+Alt+k": "KILL start"
        }
    }
}

More hotkey examples are in the Configurations section.

Configurations

Screwy will automatically search for a .screwyrc in the same directory as the package.json. It should be in json format.

These are the available options:

  • name, choose different name than defined in package.json
  • primary, the primary script buttons (red buttons) for scripts that will be ran more frequently
  • exclude, scripts to NOT include in the GUI
  • alwaysOnTop, whether the window is always in front of other windows
  • theme, choose a light or dark theme for window
  • width, the initial window width
  • height, the initial window height
  • watch, specify paths to watch and tasks to respond to file changes
  • hotkeys, define hotkey combinations that will trigger npm scripts
  • silent, suppress all of the npm's native error message and error log. (This is good for tests or linting, where you usually get error messages anyways.)
  • .screwyrc Example**
{
    "name": "Qualtrics to SFDC",
    "primary": ["build", "run-production", "run-sandbox"],
    "exclude": ["scripts-gui", "prebuild"],
    "silent": ["lint", "test"]
    "alwaysOnTop": true,
    "theme": "dark",
    "width": 500,
    "watch": {
        "src/scripts/*.js": "RESTART production",
        "src/styles": "RESTART stylus"
    },
    "hotkeys": {
        "Control+Alt+b": "build",
        "Shift+Command+1": "run-production",
        "Shift+Command+2": "run-sandbox",
        "Control+Cmd+Alt+r": "RESTART run-production",
        "Control+Cmd+Alt+k": "KILL run-production"
    }
}

Any script not specified in primary or exclude will show up as a normal button.