Skip to content
Permalink
Browse files

Meta tweaks (#9)

  • Loading branch information...
sindresorhus committed Jul 10, 2017
1 parent cdc4b2f commit 67a450ba21c89792fe72ffd089c8207c0c2d33bb
Showing with 100 additions and 113 deletions.
  1. +1 βˆ’1 .editorconfig
  2. +1 βˆ’0 .gitignore
  3. +1 βˆ’0 .npmrc
  4. +4 βˆ’16 license
  5. +75 βˆ’75 package.json
  6. +18 βˆ’21 readme.md
@@ -7,6 +7,6 @@ charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[{package.json,*.yml}]
[*.yml]
indent_style = space
indent_size = 2
@@ -1 +1,2 @@
node_modules
yarn.lock
1 .npmrc
@@ -0,0 +1 @@
package-lock=false
20 license
@@ -1,21 +1,9 @@
The MIT License (MIT)
MIT License

Copyright (c) Vadim Demedes <vdemedes@gmail.com> (github.com/vadimdemedes)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -1,77 +1,77 @@
{
"name": "ink",
"version": "0.1.2",
"description": "React for CLI",
"license": "MIT",
"repository": "vadimdemedes/ink",
"author": {
"name": "vdemedes",
"email": "vdemedes@gmail.com",
"url": "github.com/vadimdemedes"
},
"engines": {
"node": ">= 4"
},
"scripts": {
"test": "xo && ava"
},
"files": [
"lib",
"index.js"
],
"keywords": [
"react",
"cli"
],
"dependencies": {
"arrify": "^1.0.1",
"chalk": "^2.0.1",
"indent-string": "^3.1.0",
"lodash.flattendeep": "^4.4.0",
"lodash.isequal": "^4.5.0",
"log-update": "^1.0.2"
},
"devDependencies": {
"ava": "^0.19.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-register": "^6.24.1",
"eslint-config-xo-react": "^0.12.0",
"eslint-plugin-react": "^7.1.0",
"sinon": "^2.3.4",
"xo": "^0.18.2"
},
"ava": {
"require": [
"babel-register"
],
"babel": {
"presets": [
"@ava/stage-4"
],
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h"
}
]
]
}
},
"xo": {
"extends": [
"xo-react"
],
"plugins": [
"react"
],
"rules": {
"react/prop-types": 0
},
"settings": {
"react": {
"pragma": "h"
}
}
}
"name": "ink",
"version": "0.1.2",
"description": "React for CLI",
"license": "MIT",
"repository": "vadimdemedes/ink",
"author": {
"name": "vdemedes",
"email": "vdemedes@gmail.com",
"url": "github.com/vadimdemedes"
},
"engines": {
"node": ">=4"
},
"scripts": {
"test": "xo && ava"
},
"files": [
"lib",
"index.js"
],
"keywords": [
"react",
"cli"
],
"dependencies": {
"arrify": "^1.0.1",
"chalk": "^2.0.1",
"indent-string": "^3.1.0",
"lodash.flattendeep": "^4.4.0",
"lodash.isequal": "^4.5.0",
"log-update": "^1.0.2"
},
"devDependencies": {
"ava": "^0.19.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-register": "^6.24.1",
"eslint-config-xo-react": "^0.12.0",
"eslint-plugin-react": "^7.1.0",
"sinon": "^2.3.4",
"xo": "^0.18.2"
},
"ava": {
"require": [
"babel-register"
],
"babel": {
"presets": [
"@ava/stage-4"
],
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h"
}
]
]
}
},
"xo": {
"extends": [
"xo-react"
],
"plugins": [
"react"
],
"rules": {
"react/prop-types": 0
},
"settings": {
"react": {
"pragma": "h"
}
}
}
}
@@ -1,9 +1,9 @@
<h1 align="center">
<br>
<img width="192" alt="Ink" src="media/logo.png">
<br>
<br>
<br>
<br>
<img width="192" alt="Ink" src="media/logo.png">
<br>
<br>
<br>
</h1>

> React for CLIs. Build and test your CLI output using components.
@@ -14,7 +14,7 @@
## Install

```
$ npm install --save ink
$ npm install ink
```


@@ -79,14 +79,13 @@ mount(<Counter/>, process.stdout);
- [Stateless Function Components](#stateless-function-components)
- [Built-in Components](#built-in-components)

Ink's goal is to provide the same component-based UI building experience that React provides, but for CLI. That's why it tries to implement the minimum required functionality of React. If you are already familiar with React (or Preact, since Ink borrows a few ideas from it), you already know Ink.
Ink's goal is to provide the same component-based UI building experience that React provides, but for command-line apps. That's why it tries to implement the minimum required functionality of React. If you are already familiar with React (or Preact, since Ink borrows a few ideas from it), you already know Ink.

The key difference you have to remember is that the rendering result isn't a DOM, but a string, which Ink writes to output.
The key difference you have to remember is that the rendering result isn't a DOM, but a string, which Ink writes to the output.

### Getting Started

To ensure all examples work and you can begin your adventure with Ink, make sure to set up a JSX transpiler and set JSX pragma to `h`.
Don' forget to import `h` into every file that contains JSX.
To ensure all examples work and you can begin your adventure with Ink, make sure to set up a JSX transpiler and set JSX pragma to `h`. Don' forget to import `h` into every file that contains JSX.

```jsx
const {h} = require('ink');
@@ -142,14 +141,14 @@ class Counter extends Component {
const unmount = mount(<Counter/>);
setTimeout(() => {
// enough counting
// Enough counting
unmount();
}, 1000);
```

#### renderToString(tree)

Render a previously generated VDOM to a string, which you can flush to output.
Render a previously generated VDOM to a string, which you can flush to the output.

#### render(tree, [prevTree])

@@ -167,9 +166,7 @@ process.stdout.write(renderToString(tree));

### Components

Similarly to React, there are 2 kinds of components: Stateful components (next, "component") and stateless function components.
You can create a component by extending `Component` class.
Unlike stateless function components, they have access to state, context, lifecycle methods and they can be accessed via refs.
Similarly to React, there are two kinds of components: Stateful components (next, "component") and stateless function components. You can create a component by extending `Component` class. Unlike stateless function components, they have access to state, context, lifecycle methods and they can be accessed via refs.

```js
class Demo extends Component {
@@ -193,7 +190,7 @@ constructor(props, context) {
i: 0
};
// other initialization
// Other initialization
}
```

@@ -252,15 +249,15 @@ Component is about to rerender.

##### componentDidUpdate()

Component was rerendered and was written to output.
Component was rerendered and was written to the output.

#### State

Each component can have its local state accessible via `this.state`.
Whenever a state updates, component is rerendered.
Whenever a state updates, the component is rerendered.

To set the initial state, extend the constructor and assign an object to `this.state`.
Anywhere in the component state is accessible via `this.state`, and it's also passed to `render()` as a second argument.
The state is accessible via `this.state` anywhere in the component, and it's also passed to `render()` as a second argument.

```js
class Demo extends Component {
@@ -282,7 +279,7 @@ class Demo extends Component {

###### nextState

Type: `Object`, `Function`
Type: `Object` `Function`
Default: `{}`

Set a new state and update the output.
@@ -431,7 +428,7 @@ Using stateless function components:
const Demo = (props, context) => 'Hello World';
```

As you may have noticed, stateless function component still get access to props and context.
As you may have noticed, stateless function components still get access to props and context.

#### Built-in Components

0 comments on commit 67a450b

Please sign in to comment.
You can’t perform that action at this time.