Wonders
A JavaScript library for building command-line applications with JSX.
NOTE: This framework is currently in it's initial stage of development and is still highly experimental. Not all features are yet to be implemented so please feel free to help contribute towards features, bugs, and documentations where necessary.
Install
Install via npm or yarn
$ npm i -S wonders # or with yarn: $ yarn add wonders
Setup
Import Wonders
in your files.
; // Declare the JSX pragma/** @jsx Wonders.Component */
Instead of declaring the JSX pragma in each file, it is recommended to install babel-preset-wonders
which includes all the necessary babel presets and plugins to get you started with Wonders
.
{
"presets": ["wonders"]
}
Program Layout
A simple <program/>
will consist of multiple <commands/>
. These elements are handled internally by the renderer.
A simple structure would look something like this:
const App = <program ="1.0.0" => <command ="foo">Foo!</command> <command ="bar">Bar!</command> <command ="baz">Baz!</command> </program>;
The example above will only render and execute the <command name="foo" />
.
$ ./cli.js foo # -> Foo!
Creating Your First Command Line Application
Wonders
can render to any stream. For this example, we will be writing to process.stdout
so our command-line application can work.
We will need to pass the argument list (from the user input) into the <program />
element.
#!/usr/bin/env node // file: ./cli.js import Wonders from 'wonders'; const App = <program => <command ="hello"> Hello World! </command> </program>; Wonders;
Running the script will result with:
$ ./cli.js hello
# -> Hello, World!
Asynchronous Actions
Wonders
supports for rendering output from asynchronous task. Suppose you want to write a script that would deploy something to a remote server. A simple example can be written like so:
const deploy = { return { // perform remote server deployment ; };}; const App = <program args=processargv> <command name="deploy" onAction=deploy /> </program>; Wonders;
$ ./cli.js deploy # .... waits 5 seconds # -> Deployed!
Functional and Class Components
Wonders
follow the same patterns as React
when building reusable components for your <command/>
.
The most simplest way to write a component is to write a regular function.
{ return 'Beep!';}
Or as an ES6 class:
Component { return <p>Boop!</p>; }
You can feel free to compose your components, and stylize your output as necessary.
; { return <div> <p><strong>This is bold text</strong></p> <p><em>This is italicized text</em></p> <p><u>This is underlined text</u></p> </div> ;}
Demo Application
See the codebase for a working demo application below:
https://github.com/vutran/wonders-demo
LICENSE
MIT © Vu Tran