Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vutran/wonders
:rainbow: Declarative JavaScript framework to build command-line applications.
https://github.com/vutran/wonders
cli command-line component console jsx jsx-renderer react terminal vdom virtual-dom
Last synced: 1 day ago
JSON representation
:rainbow: Declarative JavaScript framework to build command-line applications.
- Host: GitHub
- URL: https://github.com/vutran/wonders
- Owner: vutran
- License: mit
- Created: 2017-03-25T00:19:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-15T00:18:24.000Z (over 7 years ago)
- Last Synced: 2024-11-07T09:49:32.984Z (2 months ago)
- Topics: cli, command-line, component, console, jsx, jsx-renderer, react, terminal, vdom, virtual-dom
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 35
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wonders
> A JavaScript library for building command-line applications with JSX.
**NOTE:** This framework is currently in its initial stage of development and is still highly experimental. Not all features have been implemented yet so please feel free to help contribute towards features, bugs, and documentations where necessary.
## Install
Install via npm or [yarn](https://yarnpkg.com)
```bash
$ npm i -S wonders
# or with yarn:
$ yarn add wonders
```
## Setup
Import `Wonders` in your files.
```js
import Wonders from 'wonders';
// Declare the JSX pragma
/** @jsx Wonders.Component */
```
Instead of declaring the JSX pragma in each file, it is recommended to install [`babel-preset-wonders`](https://www.npmjs.com/package/babel-preset-wonders) which includes all the necessary babel presets and plugins to get you started with `Wonders`.
```
{
"presets": ["wonders"]
}
```
## Program Layout
A simple `` will consist of multiple ``. These elements are handled internally by the renderer.
A simple structure would look something like this:
```jsx
const App = (
Foo!
Bar!
Baz!
);
```
The example above will only render and execute the ``.
```bash
$ ./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 `` element.
```jsx
#!/usr/bin/env node
// file: ./cli.js
import Wonders from 'wonders';
const App = (
Hello, World!
);
Wonders.render(, process.stdout);
```
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:
```js
const deploy = () => {
return new Promise((resolve) => {
// perform remote server deployment
setTimeout(() => {
// resolve with a message once finished.
resolve('Deployed!');
}, 5000);
});
};
const App = (
);
Wonders.render(, process.stdout);
```
```bash
$ ./cli.js deploy
# .... waits 5 seconds
# -> Deployed!
```
## Functional and Class Components
`Wonders` follow the same patterns as [`React`](https://github.com/facebook/react) when building reusable components for your ``.
The simplest way to write a component is to write a regular function.
```js
function beep() {
return 'Beep!';
}
```
Or as an ES6 class:
```js
class Boop extends Wonders.Component {
render() {
return
Boop!
;
}
}
```
You can feel free to compose your components and stylize your output as necessary.
```js
import Wonders from 'wonders';
export function stylize() {
return (
This is bold text.
This is italicized text.
This is underlined text.
);
}
```
## Demo Application
See the codebase for a working demo application below:
[https://github.com/vutran/wonders-demo](https://github.com/vutran/wonders-demo)
## LICENSE
MIT © [Vu Tran](https://github.com/vutran/)