@cerebral/react - npm Package Compare versions

Comparing version 1.0.0-1504537127726 to 1.0.0-1504939819809

index.d.ts

 import * as React from 'react'
+import { Tag } from 'cerebral/tags'
+import { Computed, Resolve } from 'cerebral'
 
-interface Resolve {
-  path: (tag: any) => string
-  value: (tag: any) => any
+interface PropsMap {
+  [prop: string]: Tag | Computed
 }
@@ -11,7 +12,26 @@
 
-export function connect(propsMap: any, component: React.ComponentClass<any> | React.SFC<any>): React.ComponentClass<any>
+export function connect<P, EP = {}>(
+  propsMap: PropsMap,
+  component: React.ComponentClass<P & EP> | React.SFC<P & EP>
+): React.ComponentClass<EP>
+export function connect<P, EP = {}>(
+  propsMap: PropsMap,
+  overrideProps: (dependencyProps: any, ownProps: EP, resolve: Resolve) => Partial<P & EP>,
+  component: React.ComponentClass<P & EP> | React.SFC<P & EP>
+): React.ComponentClass<EP>
+
+export function connect(propsMap: PropsMap, component: React.ComponentClass<any> | React.SFC<any>): React.ComponentClass<any>
 export function connect(
-  propsMap: any,
+  propsMap: PropsMap,
   overrideProps: (dependencyProps: any, ownProps: any, resolve: Resolve) => any,
   component: React.ComponentClass<any> | React.SFC<any>
 ): React.ComponentClass<any>
+
+
+declare type ComponentDecorator = <TComponent extends React.ComponentClass<any>>(target: TComponent) => TComponent | void;
+
+export function decorator(propsMap: PropsMap): ComponentDecorator
+export function decorator(
+  propsMap: PropsMap,
+  overrideProps: (dependencyProps: any, ownProps: any, resolve: Resolve) => any
+): ComponentDecorator

package.json

 {
   "name": "@cerebral/react",
-  "version": "1.0.0-1504537127726",
+  "version": "1.0.0-1504939819809",
   "description": "React view for Cerebral",
@@ -19,4 +19,10 @@ "main": "index.js",
   "homepage": "http://cerebral.github.io/cerebral-website",
+  "devDependencies": {
+    "@types/react": "^15.0.27",
+    "@types/react-dom": "^15.5.0",
+    "jest": "^18.1.0",
+    "prop-types": "^15.5.10"
+  },
   "dependencies": {
-    "cerebral": "^2.1.0"
+    "cerebral": "^2.2.0-1504939819809"
   },
@@ -38,9 +44,3 @@ "scripts": {
     ]
-  },
-  "devDependencies": {
-    "@types/react": "^15.0.27",
-    "@types/react-dom": "^15.5.0",
-    "jest": "^18.1.0",
-    "prop-types": "^15.5.10"
   }
 }

README.md

@@ -5,6 +5,6 @@ # @cerebral/react
 
-**NPM**
-
+## Install
 `npm install @cerebral/react react react-dom babel-preset-react`
 
+## Container
 ```js
@@ -30,2 +30,5 @@ import React from 'react'
 
+## connect
+Typically you add a stateless component:
+
 ```js
@@ -36,3 +39,2 @@ import React from 'react'
 
-// Stateless
 export default connect({
@@ -46,4 +48,10 @@ foo: state`foo`,
 )
+```
 
-// Stateful
+But you can also use stateful components:
+```js
+import React from 'react'
+import {state, signal} from 'cerebral/tags'
+import {connect} from '@cerebral/react'
+
 export default connect({
@@ -72,6 +80,10 @@ foo: state`foo`,
 }, (dependencyProps, ownProps, resolve) => {
-  const path = resolve.path(state`entities.foo.{ownProps}`) // we can resolve values or path here. Note: it's not tracked as dependency
+  // we can resolve values or path here. Note: it's not tracked as dependency
+  const path = resolve.path(state`entities.foo.{ownProps}`)
+
   return {
-    foo: `Label: ${foo}`,                                   // values from state could be transformed here
-    onClick: (e) => clicked({ id: ownProps.id })            // signals calls could be bound here, so component uses it as general callback
+    // 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 })
   }
@@ -85,7 +97,7 @@ },
 
-**dependencyProps** are the props you connected.
+- **dependencyProps** are the props you connected.
 
-**props** are the props passed into the component by the parent.
+- **props** 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.
 
@@ -92,0 +104,0 @@ ## TypeScript

test/typescript/helper.js

 import * as tt from 'typescript-definition-tester'
+import * as ts from 'typescript'
 
 export function compileDirectory(done) {
-  tt.compileDirectory(__dirname, fileName => fileName.match(/\.ts$/), done)
+  const filter = fileName => fileName.match(/\.ts$/)
+  const options = {
+    experimentalDecorators: true,
+    noImplicitAny: true,
+    target: ts.ScriptTarget.ES2016,
+  }
+
+  tt.compileDirectory(__dirname, filter, options, done)
 }

New alerts

License Policy Violation

License

This 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

License

This 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

45858

increased by8.83%

Number of package files

28

increased by12%

Lines of code

937

increased by12.35%

Number of lines in readme file

141

increased by9.3%

Dependency changes

• Updatedcerebral@^2.2.0-1504939819809