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

node-popup

v0.1.14

Published

Simulates browser-style popups

Downloads

147

Readme

Node Popup

Simulates browser-style popups (alert, confirm, and prompt) from the commandline using a promise based API. Additional alerts (choose, choosedropdown, and choosemultiple)

Note: this project uses carlo and you'll need a copy of chrome installed for this it to work.

Demo

This demo shows the six different types of included popups.

Note: The last three questions will be graded

git clone <this repository>
cd <cloned folder>
npm install
npm run demo

Installation

npm install node-popup

Export

Common JS Module

The default export is a common js module.

const popup = require('node-popup');
const popup = require('node-popup/dist/cjs.js');

Bundler

If you're using some sort of package buldler, you can import the default module as an es6 module.

import * as popup from 'node-popup';

Typescript Source

The Typescript source is available... especially useful when bundled as a submodule.

import * as popup from 'node-popup/src/index.ts';

ES Module

An ecmascript module is available for use with node's "--experimental-modules" flag. Note: since this is experimental, this may not work.

import * as popup from 'node-popup/dist/esm.mjs';

Usage

Alert

Simulate an alert box.

import {alert} from 'node-popup';
alert('Hello World!');

alert

Confirm

Simulate a confirm box.

Note: popup functions will retun a promise that will be rejected if the window is closed or the "cancel" button is clicked.

import {confirm} from 'node-popup';
const main = ()=>{
    try{
        await confirm('Confirm or Deny?');
        console.log('Confirmed!');// OK button clicked
    }catch(error){
        console.log('Denied!');// cancel button clicked
    }
}
main();

confirm

Prompt

Simulate a prompt box.

Note: The answer returned is a string.

import {prompt} from 'node-popup';
const main = ()=>{
    try{
        const name = await prompt('What\'s your name?', 'Bob');
        console.log(`Hello ${name}`);// OK button clicked
    }catch(error){
        console.log('Canceled!');// cancel button clicked
    }
}
main();

prompt

Choose and Choosedropdown

Like prompt, but with multiple choices instead of a free text box.

Using choose will present a list of answers as radio buttons.

import {choose} from 'node-popup';
const main = ()=>{
    try{
        const name = await choose('What\'s your choice?', 'Choice 0', 'Choice 1', 'Choice 2');
        console.log(`You choose: ${prompt}`);// OK button clicked
    }catch(error){
        console.log('Canceled!');// cancel button clicked
    }
}
main();

choose

Using choosedropdown will present a list of answers as radio buttons.

import {choosedropdown} from 'node-popup';
const main = ()=>{
    try{
        const choice = await choosedropdown('What\'s your choice?', 'Choice A', 'Choice B', 'Choice C');
        console.log(`You have chosen: ${choice}`);// OK button clicked
    }catch(error){
        console.log('Canceled!');// cancel button clicked
    }
}
main();

choosedropdown

Choosemultiple

Like choose, but with multiple answers selected via checkboxes.

Note: The answer returned is an array of strings.

import {choosemultiple} from 'node-popup';
const main = ()=>{
    try{
        const choices = await choosemultiple('What are your choices?', 'Choice α', 'Choice β', 'Choice γ');
        console.log(`Your choices are ${choice.join(',')}`);// OK button clicked
    }catch(error){
        console.log('Canceled!');// cancel button clicked
    }
}
main();

choosemultiple

Custom Popups

You can create customized popups.

import {customized} from 'node-popup';

const customizedPopup = customized({
    pageBody,// Body of page to use. See ./pages.js for options
    style, // Style. See ./style.css for default. Note: css containing character '>' currently fails
    top = defaultOptions.top, // Top of window
    left = defaultOptions.left, // Left of window
    width = defaultOptions.wdith, // Width of window
    height = defaultOptions.height, // Height of window
    title = defaultOptions.title // Title of window
});

Debugging

This can be useful for quick debugging; but should be viewed as an anti-pattern.