@cerebral/react - npm Package Compare versions

Comparing version 4.0.0-1521140905511 to 4.0.0-1525724201307

index.d.ts

 import * as React from 'react'
+/* eslint-disable-next-line no-unused-vars */
 import { ResolveValue, IResolve } from 'function-tree'
@@ -8,25 +9,48 @@
 
-export const StateContainer: React.ComponentClass<{state: any, signals: any, children?: React.ReactNode}>
-export const Container: React.ComponentClass<{controller: any, children?: React.ReactNode}>
+export const StateContainer: React.ComponentClass<{
+  state: any
+  signals: any
+  children?: React.ReactNode
+}>
+export const Container: React.ComponentClass<{
+  controller: any
+  children?: React.ReactNode
+}>
 
-export function connect<P, EP = {}>(
-  propsMap: PropsMap,
+export function connect<P>(
+  propsMap: P
+): <EP>(
   component: React.ComponentClass<P & EP> | React.SFC<P & EP>
-): React.ComponentClass<EP>
+) => React.ComponentClass<EP>
+
 export function connect<P, EP = {}>(
-  propsMap: PropsMap,
-  overrideProps: (dependencyProps: any, ownProps: EP, resolve: IResolve) => Partial<P & EP>,
+  propsMap: P,
+  overrideProps: (
+    dependencyProps: P,
+    ownProps: EP,
+    resolve: IResolve
+  ) => Partial<P & EP>
+): (
   component: React.ComponentClass<P & EP> | React.SFC<P & EP>
-): React.ComponentClass<EP>
+) => React.ComponentClass<EP>
 
-export function connect(propsMap: PropsMap, component: React.ComponentClass<any> | React.SFC<any>): React.ComponentClass<any>
 export function connect(
+  propsMap: PropsMap
+): (
+  component: React.ComponentClass<any> | React.SFC<any>
+) => React.ComponentClass<any>
+
+export function connect(
   propsMap: PropsMap,
-  overrideProps: (dependencyProps: any, ownProps: any, resolve: IResolve) => any,
+  overrideProps: (dependencyProps: any, ownProps: any, resolve: IResolve) => any
+): (
   component: React.ComponentClass<any> | React.SFC<any>
-): React.ComponentClass<any>
+) => React.ComponentClass<any>
 
+declare type ComponentDecorator = <
+  TComponent extends React.ComponentClass<any>
+>(
+  target: TComponent
+) => TComponent | void
 
-declare type ComponentDecorator = <TComponent extends React.ComponentClass<any>>(target: TComponent) => TComponent | void;
-
 export function decorator(propsMap: PropsMap): ComponentDecorator
@@ -33,0 +57,0 @@ export function decorator(

lib/connect.js

@@ -6,12 +6,12 @@ "use strict";
 });
-function connect(HOC, dependencies, mergeProps, passedComponent) {
-  var component = passedComponent;
+function connect(HOC, dependencies, mergeProps) {
   var props = mergeProps;
 
-  if (arguments.length === 3) {
-    component = props;
+  if (arguments.length === 2) {
     props = null;
   }
 
-  return HOC(dependencies, props, component);
+  return function (component) {
+    return HOC(dependencies, props, component);
+  };
 }
@@ -36,3 +36,3 @@
     return function (component) {
-      return connect.apply(undefined, [HOC].concat(args, [component]));
+      return connect.apply(undefined, [HOC].concat(args))(component);
     };
@@ -39,0 +39,0 @@ };

lib/Hoc.js

@@ -125,3 +125,5 @@ 'use strict';
       value: function render() {
-        return _react2.default.createElement(Component, this.view.getProps(this.props));
+        return this.view.render(this.props, function (props) {
+          return _react2.default.createElement(Component, props);
+        });
       }
@@ -128,0 +130,0 @@ }]);

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.decorator = exports.connect = exports.StateContainer = exports.Container = undefined;
+exports.decorator = exports.connect = exports.Container = undefined;
 
@@ -18,11 +18,2 @@ var _Container = require('./Container');
 
-var _StateContainer = require('./StateContainer');
-
-Object.defineProperty(exports, 'StateContainer', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_StateContainer).default;
-  }
-});
-
 var _Hoc = require('./Hoc');
@@ -29,0 +20,0 @@

package.json

 {
   "name": "@cerebral/react",
-  "version": "4.0.0-1521140905511",
+  "version": "4.0.0-1525724201307",
   "description": "React view for Cerebral",
@@ -19,10 +19,4 @@ "main": "index.js",
   "homepage": "http://cerebral.github.io/cerebral-website",
-  "devDependencies": {
-    "@types/react": "^16.0.35",
-    "@types/react-dom": "^16.0.3",
-    "jest": "^22.1.1",
-    "prop-types": "^15.5.10"
-  },
   "dependencies": {
-    "cerebral": "^5.0.0-1521140905511"
+    "cerebral": "^5.0.0-1525724201307"
   },
@@ -33,3 +27,3 @@ "scripts": {
     "prepublish": "npm run build",
-    "test": "mocha -r test/setup --compilers js:babel-register \"src/**/*.test.js\" \"test/**/*.test.js\"",
+    "test": "mocha -r test/setup --require babel-register \"src/**/*.test.js\" \"test/**/*.test.js\"",
     "test:watch": "npm run test -- --watch"
@@ -36,0 +30,0 @@ },

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 @@ }

No alert changes

Improved metrics

Dev dependency count

0

-100%

Number of lines in readme file

155

7.64%

Worsened metrics

Total package byte prevSize

22949

-16.07%

Number of package files

12

-20%

Lines of code

261

-9.37%

Dependency changes

• Updated

  cerebral@^5.0.0-1525724201307