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

quaint-repple

v0.1.0

Published

Embed a REPL in Quaint

Downloads

3

Readme

quaint-repple

Embed a REPL in Quaint.

Example of `quaint-repple in action (for the Earl Grey language): http://earl-grey.io/repl.html

Install

In your Quaint project directory, run the command:

quaint --setup repple

Sample usage

repple repl ::
  language = javascript
  theme = zenburn
  code =>
    function fun(superFun) {
      return "Quaint is as fun as " + superFun  + "!";
    }

Sample configuration

"repple": {
  "language": "javascript",
  "theme": "zenburn"
}

repple macro

The macro is used like this:

repple <type> ::
  <option> = <value>
  ...

Types

There are four "types" of interactive environments that you can embed:

  • repl: a read-eval-print-loop where you can enter commands and view the results.

  • repl-aside: a repl with an output area on the side. That output area can be written to by returning Into("aside", "something") to the repl.

  • editor: a full editor with an output area on the side. Hit Ctrl+Enter to evaluate the code in the editor. The result will be printed out on the side.

  • editor-repl: a full editor with a repl on the side. Hit Ctrl+Enter to evaluate the code in the editor. Then you can use the repl to play with the functionality you defined in the editor.

Options

  • language: the language to use, either javascript or earlgrey
  • theme: the CodeMirror theme to use
  • code: a code block in the chosen language. If type is editor or editor-repl, that code will appear in the editor at the start. If repl or repl-aside it will be executed and its return value, if it is not undefined, will be printed out in the repl. (Note: use code => instead of code =).

Evaluation environment

The repl and editor have access to a few special variables and functions:

  • $out: in the repl, represents the output box for the current expression. You may call $out.log(value) to log a value there.

  • $repl: the repl object, if there is a repl. $repl.cm is the CodeMirror instance for the current expression, if you need to manipulate it.

  • $editor: the editor object, if there is an editor. $editor.cm is the CodeMirror instance for the editor, if you need to manipulate it.

  • Into(id, value): when returned to the repl, that object instructs repple to print out the value in the element with id id. But note that the special value "aside" will print it in the area next to the repl when the type is repl-aside.

  • throw ReloadAfterPromise(promise): when a value of type ReloadAfterPromise is thrown, repple will automatically catch it, wait for the promise it encapsulates to end, and then re-execute the expression. Be careful with this one.

  • compile(): in the mode editor-repl, this will trigger recompilation of the editor's contents.

Options

language

Options:

  • javascript (default)
  • earlgrey

The programming language for the editor or repl.

theme

Default: "default"

The name of the CodeMirror theme to use. You can view all the themes here:

https://codemirror.net/demo/theme.html