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

devtools-launchpad

v0.0.161

Published

The Launchpad makes it easy to build a developer tool for Firefox, Chrome, and Node.

Downloads

324

Readme

Launchpad

Npm version

launchpad-screenshot

Starting

The launchpad is almost always run in conjunction with a devtool like the Debugger. If you would like to run the launchpad by itself to test something or add a feature that is possible as well by running yarn start.

The Launchpad makes it easy to build a developer tool for Firefox, Chrome, and Node.

Debugger.html and Console.html are a good examples of tools built on top of the toolbox.

Features

  • Dev Server - local development environment to run your tool
  • Webpack Base - webpack config to build on top of
  • Landing Page - see available connections
  • Bootstrap function - hook to start your tool with a debuggee connection
  • Configs - config system to add additional runtime configuration

Dev Server

  • serve an index.html root
  • serve JS bundles with incremental builds and hot-reloading
  • handle cross origin requests from the client
  • runs firefox's tcp-ws proxy

Example dev-server.js

toolbox.startDevServer(envConfig, webpackConfig);

Webpack Config

The webpack base config makes it easy to use the launchpad out of the box.

Features

  • transpiles source: strips flow types, convert async to generators
  • loads JSON files for L10N strings and Configs
  • loads SVGs for inlining assets
  • ignore modules that should be excluded (fs)
  • CSS & JS hot reloading
  • map shimmed modules to privileged modules when bundling for the panel
  • bundles CSS into one file when building for the panel

Here's an example tool webpack.config.js.

Landing Page

The Landing Page shows the available Chrome, Firefox, and Node tabs to debug.

Features

  • shows available connections
  • has tools title
  • sets up L10N
  • loads the light and dark themes

Screenshot

Bootstrap function

The bootstrap function starts the launchpad and provides a connection hook for doing post-connect setup with the debuggee connection.

Features

  • checks for a connection id i.e. firefox-tab=child1/tab1
  • gets available tabs
  • connects to a debuggee tab
  • renders either the Landing Page or tool root component
bootstrap(React, ReactDOM, App, actions, store)
  .then(conn => onConnect(conn, actions));

Configs

The launchpad has a config system for adding runtime configs.

Features

  • target configs - firefox, chrome, node configuration
  • feature flags toggle features in the build
  • themes - enable light, dark
  • hot-reloading - toggle hot Reloading
  • logging - enable different logging support
  • environments - different configs for development, ci, panel
  • local override - local config overrides

Here's an example config.