ink - npm Package Compare versions
Comparing version 0.4.1 to 0.5.0
47
index.js
@@ -11,3 +11,6 @@ 'use strict'; | ||
| const Indent = require('./lib/components/indent'); | ||
| const Text = require('./lib/components/text'); | ||
| const Renderer = require('./lib/renderer'); | ||
| const Color = require('./lib/components/color'); | ||
| const Bold = require('./lib/components/bold'); | ||
| const Underline = require('./lib/components/underline'); | ||
@@ -17,4 +20,8 @@ exports.StringComponent = StringComponent; | ||
| exports.h = h; | ||
| exports.Fragment = h.Fragment; | ||
| exports.Indent = Indent; | ||
| exports.Text = Text; | ||
| exports.Renderer = Renderer; | ||
| exports.Color = Color; | ||
| exports.Underline = Underline; | ||
| exports.Bold = Bold; | ||
@@ -46,6 +53,2 @@ const noop = () => {}; | ||
| const context = {}; | ||
| let isUnmounted = false; | ||
| let currentTree; | ||
| readline.emitKeypressEvents(stdin); | ||
@@ -57,19 +60,6 @@ | ||
| const update = () => { | ||
| const nextTree = build(tree, currentTree, onUpdate, context); // eslint-disable-line no-use-before-define | ||
| log(renderToString(nextTree)); | ||
| const currentTree = new Renderer(tree); | ||
| currentTree.on('update', log); | ||
| currentTree.update(); | ||
| currentTree = nextTree; | ||
| }; | ||
| const onUpdate = () => { | ||
| if (isUnmounted) { | ||
| return; | ||
| } | ||
| update(); | ||
| }; | ||
| update(); | ||
| const onKeyPress = (ch, key) => { | ||
@@ -83,3 +73,3 @@ if (key.name === 'escape' || (key.ctrl && key.name === 'c')) { | ||
| stdin.on('keypress', onKeyPress); | ||
| stdout.on('resize', update); | ||
| stdout.on('resize', currentTree.update); | ||
| } | ||
@@ -96,3 +86,3 @@ | ||
| originalFn.apply(console, args); | ||
| update(); | ||
| currentTree.update(); | ||
| }; | ||
@@ -106,6 +96,2 @@ | ||
| const exit = () => { | ||
| if (isUnmounted) { | ||
| return; | ||
| } | ||
| if (stdin.isTTY) { | ||
@@ -115,7 +101,6 @@ stdin.setRawMode(false); | ||
| stdin.pause(); | ||
| stdout.removeListener('resize', update); | ||
| stdout.removeListener('resize', currentTree.update); | ||
| } | ||
| isUnmounted = true; | ||
| build(null, currentTree, onUpdate, context); // eslint-disable-line no-use-before-define | ||
| currentTree.unmount(); | ||
| log.done(); | ||
@@ -122,0 +107,0 @@ |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| module.exports = (component, props, ...children) => { | ||
| const h = (component, props, ...children) => { | ||
| if (typeof component !== 'function' && typeof component !== 'string') { | ||
@@ -44,1 +44,5 @@ throw new TypeError(`Expected component to be a function, but received ${typeof component}. You may have forgotten to export a component.`); | ||
| }; | ||
| h.Fragment = ({children}) => children; | ||
| module.exports = h; |
| { | ||
| "name": "ink", | ||
| "version": "0.4.1", | ||
| "version": "0.5.0", | ||
| "description": "React for CLI", | ||
@@ -16,3 +16,4 @@ "license": "MIT", | ||
| "scripts": { | ||
| "test": "xo && ava" | ||
| "test": "xo && ava", | ||
| "cast": "svg-term --command 'node media/demo.js' --out media/demo.svg --from=100 --window --width=50 --height=8 --term=iterm2 --profile=Snazzy" | ||
| }, | ||
@@ -47,6 +48,8 @@ "files": [ | ||
| "devDependencies": { | ||
| "@babel/core": "^7.0.0-beta.44", | ||
| "@babel/plugin-transform-react-jsx": "^7.0.0-beta.44", | ||
| "@babel/register": "^7.0.0-beta.44", | ||
| "ansi-styles": "^3.1.0", | ||
| "ava": "^0.21.0", | ||
| "babel-plugin-transform-react-jsx": "^6.24.1", | ||
| "babel-register": "^6.24.1", | ||
| "ava": "^1.0.0-beta.3", | ||
| "babel-eslint": "^8.2.2", | ||
| "eslint-config-xo-react": "^0.13.0", | ||
@@ -56,2 +59,3 @@ "eslint-plugin-react": "^7.1.0", | ||
| "strip-ansi": "^4.0.0", | ||
| "svg-term-cli": "^2.1.1", | ||
| "xo": "^0.18.2" | ||
@@ -61,16 +65,19 @@ }, | ||
| "require": [ | ||
| "babel-register" | ||
| "@babel/register" | ||
| ], | ||
| "babel": { | ||
| "presets": [ | ||
| "@ava/stage-4" | ||
| ], | ||
| "plugins": [ | ||
| [ | ||
| "transform-react-jsx", | ||
| { | ||
| "pragma": "h" | ||
| } | ||
| "testOptions": { | ||
| "presets": [ | ||
| "@ava/stage-4" | ||
| ], | ||
| "plugins": [ | ||
| [ | ||
| "@babel/plugin-transform-react-jsx", | ||
| { | ||
| "pragma": "h", | ||
| "pragmaFrag": "h.Fragment" | ||
| } | ||
| ] | ||
| ] | ||
| ] | ||
| } | ||
| } | ||
@@ -84,5 +91,7 @@ }, | ||
| "react": { | ||
| "pragma": "h" | ||
| "pragma": "h", | ||
| "pragmaFrag": "h.Fragment" | ||
| } | ||
| }, | ||
| "parser": "babel-eslint", | ||
| "overrides": [ | ||
@@ -92,3 +101,4 @@ { | ||
| "rules": { | ||
| "react/prop-types": 0 | ||
| "react/prop-types": 0, | ||
| "quotes": 0 | ||
| } | ||
@@ -95,0 +105,0 @@ } |
115
readme.md
@@ -24,3 +24,3 @@ <h1 align="center"> | ||
| ```jsx | ||
| const {h, render, Component, Text} = require('ink'); | ||
| const {h, render, Component, Color } = require('ink'); | ||
@@ -38,5 +38,5 @@ class Counter extends Component { | ||
| return ( | ||
| <Text green> | ||
| <Color green> | ||
| {this.state.i} tests passed | ||
| </Text> | ||
| </Color> | ||
| ); | ||
@@ -61,5 +61,6 @@ } | ||
| <img src="media/demo.gif" width="516"> | ||
| <p align="center"> | ||
| <img src="media/demo.svg" width="600"> | ||
| </p> | ||
| ## Useful Components | ||
@@ -79,4 +80,18 @@ | ||
| - [ink-table](https://github.com/maticzav/ink-table) - Table component. | ||
| - [ink-broadcast](https://github.com/jimmed/ink-broadcast) - Implementation of react-broadcast for Ink. | ||
| - [ink-router](https://github.com/jimmed/ink-router) - Implementation of react-router for Ink. | ||
| - [ink-tab](https://github.com/jdeniau/ink-tab) - Tab component. | ||
| - [ink-link](https://github.com/sindresorhus/ink-link) - Link component. | ||
| - [ink-select](https://github.com/karaggeorge/ink-select) - Select component. | ||
| - [ink-scrollbar](https://github.com/karaggeorge/ink-scrollbar) - Scrollbar component. | ||
| - [ink-box](https://github.com/sindresorhus/ink-box) - Box component. | ||
| - [ink-text-animation](https://github.com/yardnsm/ink-text-animation) - Text animation component. | ||
| - [ink-gradient](https://github.com/sindresorhus/ink-gradient) - Gradient color component. | ||
| - [ink-big-text](https://github.com/sindresorhus/ink-big-text) - Awesome text component. | ||
| ## Built with Ink | ||
| - [emoj](https://github.com/sindresorhus/emoj) - Find relevant emoji on the command-line. | ||
| - [emma](https://github.com/maticzav/emma-cli) - Terminal assistant to find and install npm packages. | ||
| ## Guide | ||
@@ -110,3 +125,3 @@ | ||
| { | ||
| "pragma": "h" | ||
| "pragma": "h" | ||
| } | ||
@@ -495,19 +510,7 @@ ] | ||
| Surprise, surprise, our favorite `<div>` and `<span>` can be used in Ink components! | ||
| They are useful for grouping elements, since JSX doesn't allow multiple elements without a parent. | ||
| They are useful for grouping elements | ||
| The only difference between `<div>` and `<span>` is that `<div>` inserts a newline after children. | ||
| This won't work: | ||
| ```jsx | ||
| const Demo = ( | ||
| <A/> | ||
| <B/> | ||
| <C/> | ||
| ); | ||
| ``` | ||
| This will: | ||
| ```jsx | ||
| const Demo = ( | ||
| <div> | ||
@@ -533,18 +536,80 @@ <A/> | ||
| The `<Text>` compoment is a simple wrapper around [the `chalk` API](https://github.com/chalk/chalk#api) it supports all of the chalk methods as `props`. | ||
| Ink also supports Fragments for returning multiple children from a component's render method. | ||
| ```jsx | ||
| import {Text} from "ink" | ||
| const {h, Fragment} = require('ink'); | ||
| <Text rgb={[255, 255, 255]} bgKeyword="magenta"> | ||
| render( | ||
| <Fragment> | ||
| <A/> | ||
| <B/> | ||
| <C/> | ||
| </Fragment> | ||
| ); | ||
| ``` | ||
| Or using the shorthand syntax: | ||
| ```jsx | ||
| const {h} = require('ink'); | ||
| render( | ||
| <> | ||
| <A/> | ||
| <B/> | ||
| <C/> | ||
| </> | ||
| ); | ||
| ``` | ||
| To use the Fragments make sure you have `pragmaFrag` in your configuration: | ||
| ```json | ||
| { | ||
| "babel": { | ||
| "plugins": [ | ||
| [ | ||
| "@babel/plugin-transform-react-jsx", | ||
| { | ||
| "pragma": "h", | ||
| "pragmaFrag": "h.Fragment" | ||
| } | ||
| ] | ||
| ] | ||
| } | ||
| } | ||
| ``` | ||
| You will also need [Babel v7.0.0-beta.31](https://github.com/babel/babel/releases/tag/v7.0.0-beta.31) or above, which means you will also need to upgrade any other tools that use Babel to their compatible versions, like [@babel/plugin-transform-react-jsx](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx) and [@babel/core](https://www.npmjs.com/package/@babel/core). | ||
| The `<Color>` compoment is a simple wrapper around [the `chalk` API](https://github.com/chalk/chalk#api) it supports all of the chalk methods as `props`. | ||
| ```jsx | ||
| import {Color} from 'ink'; | ||
| <Color rgb={[255, 255, 255]} bgKeyword="magenta"> | ||
| Hello! | ||
| </Text> | ||
| </Color> | ||
| <Text hex="#000000" bgHex="#FFFFFF"> | ||
| <Color hex="#000000" bgHex="#FFFFFF"> | ||
| Hey there | ||
| </Text> | ||
| </Color> | ||
| ``` | ||
| The `<Bold>` and `<Underline>` components render their children bolded and underlined respectively. | ||
| ```jsx | ||
| import {Bold, Underline} from 'ink'; | ||
| <Bold> | ||
| I am bold | ||
| </Bold> | ||
| <Underline> | ||
| I am underlined | ||
| </Underline> | ||
| ``` | ||
| ## License | ||
| MIT © [Vadim Demedes](https://github.com/vadimdemedes) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.62%
32523
- Number of package files
- increased by15.79%
22
- Lines of code
- increased by9.35%
538
- Number of lines in readme file
- increased by11.95%
609
Worsened metrics
- Dev dependency count
- increased by33.33%
12
No dependency changes