Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cerebral/react
Advanced tools
@cerebral/react - npm Package Compare versions
Comparing version 4.0.0-1526409797341 to 4.0.0-1527015081471
| import * as React from 'react' | ||
| /* eslint-disable-next-line no-unused-vars */ | ||
| import { ResolveValue, IResolve } from 'function-tree' | ||
| import { BaseControllerClass } from 'cerebral'; | ||
@@ -14,10 +15,4 @@ export type IReactComponent<P = any> = | ||
| export const StateContainer: React.ComponentClass<{ | ||
| state: any | ||
| signals: any | ||
| children?: React.ReactNode | ||
| }> | ||
| export const Container: React.ComponentClass<{ | ||
| controller: any | ||
| app: BaseControllerClass | ||
| children?: React.ReactNode | ||
@@ -24,0 +19,0 @@ }> |
@@ -19,2 +19,4 @@ 'use strict'; | ||
| var _internal = require('cerebral/internal'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -40,9 +42,16 @@ | ||
| value: function getChildContext() { | ||
| var controller = this.props.controller; | ||
| var _props = this.props, | ||
| app = _props.app, | ||
| controller = _props.controller; | ||
| if (!controller) { | ||
| (0, _cerebral.throwError)('You are not passing controller to Container'); | ||
| if (controller) { | ||
| (0, _internal.DEPRECATE)('Container', 'please change from "controller" to "app" property'); | ||
| } | ||
| return { controller: controller }; | ||
| if (!app && !controller) { | ||
| (0, _cerebral.throwError)('You are not passing a Cerebral app to Container'); | ||
| } | ||
| return { controller: app || controller }; | ||
| } | ||
@@ -60,3 +69,3 @@ }, { | ||
| Container.propTypes = { | ||
| controller: _propTypes2.default.object.isRequired, | ||
| app: _propTypes2.default.object.isRequired, | ||
| children: _propTypes2.default.node.isRequired | ||
@@ -63,0 +72,0 @@ }; |
| { | ||
| "name": "@cerebral/react", | ||
| "version": "4.0.0-1526409797341", | ||
| "version": "4.0.0-1527015081471", | ||
| "description": "React view for Cerebral", | ||
@@ -20,3 +20,3 @@ "main": "index.js", | ||
| "dependencies": { | ||
| "cerebral": "^5.0.0-1526409797341" | ||
| "cerebral": "^5.0.0-1527015081471" | ||
| }, | ||
@@ -23,0 +23,0 @@ "scripts": { |
112
README.md
@@ -14,17 +14,11 @@ # @cerebral/react | ||
| import { render } from 'react-dom' | ||
| import { Controller } from 'cerebral' | ||
| import App from 'cerebral' | ||
| import { Container } from '@cerebral/react' | ||
| import App from './App' | ||
| import AppComponent from './components/App' | ||
| import main from './main' | ||
| const controller = Controller({ | ||
| state: { | ||
| foo: 'bar' | ||
| }, | ||
| signals: { | ||
| clicked: [] | ||
| } | ||
| }) | ||
| const app = App(main) | ||
| render( | ||
| <Container controller={controller}> | ||
| <Container app={app}> | ||
| <App /> | ||
@@ -42,3 +36,3 @@ </Container>, | ||
| import React from 'react' | ||
| import { state, signal } from 'cerebral/tags' | ||
| import { state, sequences } from 'cerebral/proxy' | ||
| import { connect } from '@cerebral/react' | ||
@@ -48,7 +42,7 @@ | ||
| { | ||
| foo: state`foo`, | ||
| click: signal`clicked` | ||
| foo: state.foo, | ||
| onClick: sequences.onClick | ||
| }, | ||
| function MyComponent({ foo, click }) { | ||
| return <div onClick={() => click()}>{foo}</div> | ||
| function MyComponent({ foo, onClick }) { | ||
| return <div onClick={() => onClick()}>{foo}</div> | ||
| } | ||
@@ -62,3 +56,3 @@ ) | ||
| import React from 'react' | ||
| import { state, signal } from 'cerebral/tags' | ||
| import { state, sequences } from 'cerebral/proxy' | ||
| import { connect } from '@cerebral/react' | ||
@@ -68,8 +62,8 @@ | ||
| { | ||
| foo: state`foo`, | ||
| click: signal`clicked` | ||
| foo: state.foo, | ||
| onClick: sequences.onClick | ||
| }, | ||
| class MyComponent extends React.Component { | ||
| render() { | ||
| return <div onClick={() => this.props.click()}>{this.props.foo}</div> | ||
| return <div onClick={() => this.props.onClick()}>{this.props.foo}</div> | ||
| } | ||
@@ -80,2 +74,19 @@ } | ||
| You do not have to define dependencies right away, you can rather dynamically grab them from inside the component. This is a preference thing: | ||
| ```js | ||
| import React from 'react' | ||
| import { state, sequences } from 'cerebral/proxy' | ||
| import { connect } from '@cerebral/react' | ||
| export default connect( | ||
| function MyComponent({ get }) { | ||
| const foo = get(state.foo) | ||
| const onClick = get(sequences.onClick) | ||
| return <div onClick={() => onClick()}>{foo}</div> | ||
| } | ||
| ) | ||
| ``` | ||
| You can add an additional function to connect that gives you full control of properties of the component and dependencies. The returned object from this function will be the exact props passed into the component. | ||
@@ -85,3 +96,3 @@ | ||
| import React from 'react' | ||
| import { signal, state } from 'cerebral/tags' | ||
| import { sequences, state } from 'cerebral/proxy' | ||
| import { connect } from '@cerebral/react' | ||
@@ -91,14 +102,11 @@ | ||
| { | ||
| foo: state`app.foo`, | ||
| clicked: signal`app.somethingClicked` | ||
| foo: state.app.foo, | ||
| onClick: sequences.app.onClick | ||
| }, | ||
| (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}`) | ||
| ({ foo, onClick }, ownProps, get) => { | ||
| 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 }) | ||
| // sequence calls could be bound here, so component uses it as general callback | ||
| onClick: (e) => onClick({ id: ownProps.id }) | ||
| } | ||
@@ -116,48 +124,6 @@ }, | ||
| * **resolve** allows you to resolve computed etc., just like resolve in actions. | ||
| * **get** allows you to resolve computed etc., just like get in actions. | ||
| ## TypeScript | ||
| If you use TypeScript, you can type your component props with connect: | ||
| ```ts | ||
| import React from 'react' | ||
| import { state, signal } from 'cerebral/tags' | ||
| import { connect } from '@cerebral/react' | ||
| // connected props | ||
| interface Props { | ||
| click(): void | ||
| foo: string | ||
| } | ||
| // component props such as <MyComponent name='foobar' /> | ||
| interface EProps { | ||
| name: string | ||
| } | ||
| // Stateless | ||
| export default connect<Props, EProps>( | ||
| { | ||
| foo: state`foo`, | ||
| click: signal`clicked` | ||
| }, | ||
| // TypeScript now knows about foo and click props | ||
| function MyComponent({ foo, click }) { | ||
| return <div onClick={() => click()}>{foo}</div> | ||
| } | ||
| ) | ||
| // Stateful | ||
| export default connect<Props, EProps>( | ||
| { | ||
| foo: state`foo`, | ||
| click: signal`clicked` | ||
| }, | ||
| class MyComponent extends React.Component<Props, EProps> { | ||
| render() { | ||
| return <div onClick={() => this.props.click()}>{this.props.foo}</div> | ||
| } | ||
| } | ||
| ) | ||
| ``` | ||
| If you use TypeScript, you can type your component props with connect. Read the [advanced section](/docs/advanced/typescript) on how to do this. |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.3%
24696
- Lines of code
- increased by0.75%
270
Worsened metrics
- Number of lines in readme file
- decreased by-22.58%
120