@cerebral/react - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2-1523952156059

package.json

 {
   "name": "@cerebral/react",
-  "version": "3.2.1",
+  "version": "3.2.2-1523952156059",
   "description": "React view for Cerebral",
@@ -26,3 +26,3 @@ "main": "index.js",
   "dependencies": {
-    "cerebral": "^4.2.1"
+    "cerebral": "^4.2.2-1523952156059"
   },
@@ -29,0 +29,0 @@ "scripts": {

README.md

@@ -6,10 +6,12 @@ # @cerebral/react
 ## Install
+
 `npm install @cerebral/react react react-dom babel-preset-react`
 
 ## Container
+
 ```js
 import React from 'react'
-import {render} from 'react-dom'
-import {Controller} from 'cerebral'
-import {Container} from '@cerebral/react'
+import { render } from 'react-dom'
+import { Controller } from 'cerebral'
+import { Container } from '@cerebral/react'
 import App from './App'
@@ -26,10 +28,12 @@
 
-render((
+render(
   <Container controller={controller}>
     <App />
-  </Container>
-), document.querySelector('#app'))
+  </Container>,
+  document.querySelector('#app')
+)
 ```
 
 ## connect
+
 Typically you add a stateless component:
@@ -39,10 +43,11 @@
 import React from 'react'
-import {state, signal} from 'cerebral/tags'
-import {connect} from '@cerebral/react'
+import { state, signal } from 'cerebral/tags'
+import { connect } from '@cerebral/react'
 
-export default connect({
-  foo: state`foo`,
-  click: signal`clicked`
-},
-  function MyComponent ({foo, click}) {
+export default connect(
+  {
+    foo: state`foo`,
+    click: signal`clicked`
+  },
+  function MyComponent({ foo, click }) {
     return <div onClick={() => click()}>{foo}</div>
@@ -54,13 +59,15 @@ }
 But you can also use stateful components:
+
 ```js
 import React from 'react'
-import {state, signal} from 'cerebral/tags'
-import {connect} from '@cerebral/react'
+import { state, signal } from 'cerebral/tags'
+import { connect } from '@cerebral/react'
 
-export default connect({
-  foo: state`foo`,
-  click: signal`clicked`
-},
+export default connect(
+  {
+    foo: state`foo`,
+    click: signal`clicked`
+  },
   class MyComponent extends React.Component {
-    render () {
+    render() {
       return <div onClick={() => this.props.click()}>{this.props.foo}</div>
@@ -76,20 +83,22 @@ }
 import React from 'react'
-import {signal, state} from 'cerebral/tags'
-import {connect} from '@cerebral/react'
+import { signal, state } from 'cerebral/tags'
+import { connect } from '@cerebral/react'
 
-export default connect({
-  foo: state`app.foo`,
-  clicked: signal`app.somethingClicked`
-}, (dependencyProps, ownProps, resolve) => {
-  // we can resolve values or path here. Note: it's not tracked as dependency
-  const path = resolve.path(state`entities.foo.{ownProps}`)
+export default connect(
+  {
+    foo: state`app.foo`,
+    clicked: signal`app.somethingClicked`
+  },
+  (dependencyProps, ownProps, resolve) => {
+    // we can resolve values or path here. Note: it's not tracked as dependency
+    const path = resolve.path(state`entities.foo.{ownProps}`)
 
-  return {
-    // values from state could be transformed here
-    foo: `Label: ${foo}`,                       
-    // signals calls could be bound here, so component uses it as general callback            
-    onClick: (e) => clicked({ id: ownProps.id })
-  }
-},
-  function App({foo, onClick}) {
+    return {
+      // values from state could be transformed here
+      foo: `Label: ${foo}`,
+      // signals calls could be bound here, so component uses it as general callback
+      onClick: (e) => clicked({ id: ownProps.id })
+    }
+  },
+  function App({ foo, onClick }) {
     return <div onClick={onClick}>{foo}</div>
@@ -100,7 +109,7 @@ }
 
-- **dependencyProps** are the props you connected.
+* **dependencyProps** are the props you connected.
 
-- **ownProps** are the props passed into the component by the parent.
+* **ownProps** are the props passed into the component by the parent.
 
-- **resolve** allows you to resolve computed etc., just like resolve in actions.
+* **resolve** allows you to resolve computed etc., just like resolve in actions.
 
@@ -113,8 +122,8 @@ ## TypeScript
 import React from 'react'
-import {state, signal} from 'cerebral/tags'
-import {connect} from '@cerebral/react'
+import { state, signal } from 'cerebral/tags'
+import { connect } from '@cerebral/react'
 
 // connected props
 interface Props {
-  click (): void
+  click(): void
   foo: string
@@ -129,8 +138,9 @@ }
 // Stateless
-export default connect<Props, EProps>({
-  foo: state`foo`,
-  click: signal`clicked`
-},
+export default connect<Props, EProps>(
+  {
+    foo: state`foo`,
+    click: signal`clicked`
+  },
   // TypeScript now knows about foo and click props
-  function MyComponent ({foo, click}) {
+  function MyComponent({ foo, click }) {
     return <div onClick={() => click()}>{foo}</div>
@@ -141,8 +151,9 @@ }
 // Stateful
-export default connect<Props, EProps>({
-  foo: state`foo`,
-  click: signal`clicked`
-},
+export default connect<Props, EProps>(
+  {
+    foo: state`foo`,
+    click: signal`clicked`
+  },
   class MyComponent extends React.Component<Props, EProps> {
-    render () {
+    render() {
       return <div onClick={() => this.props.click()}>{this.props.foo}</div>
@@ -149,0 +160,0 @@ }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27493

increased by0.3%

Number of lines in readme file

155

increased by7.64%

Worsened metrics

Number of package files

14

decreased by-6.67%

Number of low quality alerts

2

increased by100%

Dependency changes

• Updatedcerebral@^4.2.2-1523952156059