{"id":23968628,"url":"https://github.com/vutran/wonders","last_synced_at":"2025-04-13T15:40:35.059Z","repository":{"id":57398875,"uuid":"86120993","full_name":"vutran/wonders","owner":"vutran","description":":rainbow: Declarative JavaScript framework to build command-line applications.","archived":false,"fork":false,"pushed_at":"2017-04-15T00:18:24.000Z","size":93,"stargazers_count":37,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T00:42:02.812Z","etag":null,"topics":["cli","command-line","component","console","jsx","jsx-renderer","react","terminal","vdom","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vutran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-25T00:19:51.000Z","updated_at":"2025-02-15T06:43:11.000Z","dependencies_parsed_at":"2022-09-12T05:40:37.165Z","dependency_job_id":null,"html_url":"https://github.com/vutran/wonders","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fwonders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fwonders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fwonders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutran%2Fwonders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vutran","download_url":"https://codeload.github.com/vutran/wonders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248739746,"owners_count":21154220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","command-line","component","console","jsx","jsx-renderer","react","terminal","vdom","virtual-dom"],"created_at":"2025-01-07T00:15:25.048Z","updated_at":"2025-04-13T15:40:35.036Z","avatar_url":"https://github.com/vutran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wonders\n\n\u003e A JavaScript library for building command-line applications with JSX.\n\n**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.\n\n## Install\n\nInstall via npm or [yarn](https://yarnpkg.com)\n\n```bash\n$ npm i -S wonders\n\n# or with yarn:\n\n$ yarn add wonders\n```\n\n## Setup\n\nImport `Wonders` in your files.\n\n```js\nimport Wonders from 'wonders';\n\n// Declare the JSX pragma\n/** @jsx Wonders.Component */\n```\n\nInstead 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`.\n\n```\n{\n    \"presets\": [\"wonders\"]\n}\n```\n\n## Program Layout\n\nA simple `\u003cprogram/\u003e` will consist of multiple `\u003ccommands/\u003e`. These elements are handled internally by the renderer.\n\nA simple structure would look something like this:\n\n```jsx\nconst App = (\n    \u003cprogram version=\"1.0.0\" args={process.argv}\u003e\n        \u003ccommand name=\"foo\"\u003eFoo!\u003c/command\u003e\n        \u003ccommand name=\"bar\"\u003eBar!\u003c/command\u003e\n        \u003ccommand name=\"baz\"\u003eBaz!\u003c/command\u003e\n    \u003c/program\u003e\n);\n```\n\nThe example above will only render and execute the `\u003ccommand name=\"foo\" /\u003e`.\n\n```bash\n$ ./cli.js foo\n\n# -\u003e Foo!\n```\n\n## Creating Your First Command Line Application\n\n`Wonders` can render to any stream. For this example, we will be writing to `process.stdout` so our command-line application can work.\n\nWe will need to pass the argument list (from the user input) into the `\u003cprogram /\u003e` element.\n\n```jsx\n#!/usr/bin/env node\n\n// file: ./cli.js\n\nimport Wonders from 'wonders';\n\nconst App = (\n    \u003cprogram args={process.argv}\u003e\n        \u003ccommand name=\"hello\"\u003e\n            Hello, World!\n        \u003c/command\u003e\n    \u003c/program\u003e\n);\n\nWonders.render(\u003cApp /\u003e, process.stdout);\n```\n\nRunning the script will result with:\n\n```\n$ ./cli.js hello\n\n# -\u003e Hello, World!\n```\n\n## Asynchronous Actions\n\n`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:\n\n```js\nconst deploy = () =\u003e {\n    return new Promise((resolve) =\u003e {\n        // perform remote server deployment\n        setTimeout(() =\u003e {\n            // resolve with a message once finished.\n            resolve('Deployed!');\n        }, 5000);\n    });\n};\n\nconst App = (\n    \u003cprogram args={process.argv}\u003e\n        \u003ccommand name=\"deploy\" onAction={deploy} /\u003e\n    \u003c/program\u003e\n);\n\nWonders.render(\u003cApp /\u003e, process.stdout);\n```\n\n```bash\n$ ./cli.js deploy\n\n# .... waits 5 seconds\n# -\u003e Deployed!\n```\n\n## Functional and Class Components\n\n`Wonders` follow the same patterns as [`React`](https://github.com/facebook/react) when building reusable components for your `\u003ccommand/\u003e`.\n\nThe simplest way to write a component is to write a regular function.\n\n```js\nfunction beep() {\n    return 'Beep!';\n}\n```\n\nOr as an ES6 class:\n\n```js\nclass Boop extends Wonders.Component {\n    render() {\n        return \u003cp\u003eBoop!\u003c/p\u003e;\n    }\n}\n```\n\nYou can feel free to compose your components and stylize your output as necessary.\n\n```js\nimport Wonders from 'wonders';\n\nexport function stylize() {\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003e\u003cstrong\u003eThis is bold text.\u003c/strong\u003e\u003c/p\u003e\n            \u003cp\u003e\u003cem\u003eThis is italicized text.\u003c/em\u003e\u003c/p\u003e\n            \u003cp\u003e\u003cu\u003eThis is underlined text.\u003c/u\u003e\u003c/p\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n## Demo Application\n\nSee the codebase for a working demo application below:\n\n[https://github.com/vutran/wonders-demo](https://github.com/vutran/wonders-demo)\n\n## LICENSE\n\nMIT © [Vu Tran](https://github.com/vutran/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutran%2Fwonders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvutran%2Fwonders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutran%2Fwonders/lists"}