react-json-renderer - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

lib/converter.js

@@ -29,3 +29,3 @@ 'use strict';
     }
-    if (typeof child === 'string') {
+    if (typeof child === 'number' || typeof child === 'string') {
       return child;
@@ -53,3 +53,3 @@ }
     } else if (_typeof(tree.type.prototype) === 'object' && tree.type.prototype && tree.type.prototype.isReactComponent) {
-      name = tree.type.displayName || tree.type.name;
+      name = tree.type.displayName || tree.type.name || 'Unknown';
       type = 'class';
@@ -56,0 +56,0 @@ } else if (typeof tree.type === 'function') {

lib/renderer.js

@@ -36,7 +36,7 @@ 'use strict';
     }
-    if (typeof c === 'string') {
+    if (typeof c === 'number' || typeof c === 'string') {
       return c;
     }
     if (c.type) {
-      return createComponent(c);
+      return createFromObject(c);
     }
@@ -46,3 +46,3 @@ return null;
 
-  var createComponent = function createComponent(converted) {
+  var createFromObject = function createFromObject(converted) {
     var component = components[converted.type] || fallback;
@@ -59,4 +59,4 @@
     if (children) {
-      props.children = Array.isArray(children // eslint-disable-line react/prop-types
-      ) ? children.map(createChild) : createChild(children);
+      props.children = Array.isArray(children) // eslint-disable-line react/prop-types
+      ? children.map(createChild) : createChild(children);
     }
@@ -66,3 +66,3 @@ return (0, _react.createElement)(component, props);
 
-  return createComponent(tree);
+  return createFromObject(tree);
 };
@@ -69,0 +69,0 @@

package.json

 {
   "name": "react-json-renderer",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Render React components to a JSON tree",
   "main": "lib/index.js",
   "scripts": {
-    "clean": "rm -Rf ./lib",
-    "compile": "babel src --out-dir lib",
-    "build": "npm run clean && npm run compile",
+    "build:clean": "del lib",
+    "build:compile": "babel src --out-dir lib",
+    "build:flow": "flow-copy-source src lib",
+    "build:types": "cp ./lib/types.js.flow ./types.js",
+    "build": "npm run build:clean && npm run build:compile && npm run build:flow && npm run build:types",
     "flow": "flow",
     "lint": "eslint ./src",
     "jest": "jest",
-    "test": "npm run lint && npm run jest",
+    "test": "npm run lint && npm run flow && npm run jest",
     "start": "npm test && npm run build",
-    "prepublish": "npm start"
+    "prepublishOnly": "npm start"
   },
@@ -43,12 +45,14 @@ "repository": {
     "babel-preset-stage-1": "^6.24.1",
-    "eslint": "^3.19.0",
-    "eslint-config-prettier": "^2.1.1",
-    "eslint-plugin-flowtype": "^2.34.0",
-    "eslint-plugin-prettier": "^2.1.1",
-    "eslint-plugin-react": "^7.0.1",
-    "flow-bin": "^0.48.0",
+    "del-cli": "^1.1.0",
+    "eslint": "^4.2.0",
+    "eslint-config-prettier": "^2.3.0",
+    "eslint-plugin-flowtype": "^2.34.1",
+    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-react": "^7.1.0",
+    "flow-bin": "^0.49.1",
+    "flow-copy-source": "^1.2.0",
     "jest": "^20.0.4",
-    "prettier": "^1.4.4",
-    "react": "^15.5.4",
-    "react-test-renderer": "^15.5.4"
+    "prettier": "^1.5.2",
+    "react": "^15.6.1",
+    "react-test-renderer": "^15.6.1"
   },
@@ -55,0 +59,0 @@ "jest": {

README.md

@@ -25,4 +25,8 @@ # react-json-renderer
 convertToObject(
-  tree: string, Function, React.Component,
-  params?: Object,
+  tree: React.Element<*>,
+  params?: {
+    replacers?: {
+      [string]: (props: Object) => React.Element<*>,
+    },
+  },
 ): Object
@@ -37,4 +41,9 @@ ```
 convertToJSON(
-  tree: string, Function, React.Component,
-  params?: Object,
+  tree: React.Element<*>,
+  params?: {
+    replacers?: {
+      [string]: (props: Object) => React.Element<*>,
+    },
+    space?: number | string,
+  },
 ): Object
@@ -50,3 +59,8 @@ ```
   tree: Object,
-  params?: Object,
+  params?: {
+    components?: {
+      [type: string]: Class<React.Component<*, *, *>> | (props: Object) => React.Element<*>,
+    },
+    fallback?: Class<React.Component<*, *, *>> | (props: Object) => React.Element<*>,
+  },
 ): React.Element<*>
@@ -77,12 +91,9 @@ ```
 const View = ({ children }) => children
-const Welcome = ({ name }) => (
+const Welcome = ({ name }) =>
   <View>
     <Text>Welcome {name}!</Text>
   </View>
-)
 
 // Returns the JSON payload to provide to the client
-export const createWelcome = (name) => {
-  return convertToJSON(<Welcome name={name} />)
-}
+export const createWelcome = (name) => convertToJSON(<Welcome name={name} />)
 ```
@@ -106,5 +117,4 @@
 // Inject the JSON payload from the server and render with provided component and fallback
-export const PayloadRenderer = ({ payload }) => (
+export const PayloadRenderer = ({ payload }) =>
   <Renderer components={components} fallback={Fallback} json={payload} />
-)
 ```
@@ -135,5 +145,4 @@
 
-export const PayloadRenderer = ({ payload }) => (
+export const PayloadRenderer = ({ payload }) =>
   <Renderer components={components} fallback={RenderView} json={payload} />
-)
 ```
@@ -140,0 +149,0 @@

src/converter.js

 // @flow
 
-import React from 'react'
+import React, { type Element } from 'react'
 
 import type {
-  ComponentChild,
-  ComponentChildren,
-  ComponentConfig,
-  ComponentProps,
-  ComponentType,
   ConvertedChild,
   ConvertedChildren,
-  ConvertedComponent,
-  ReactComponent,
+  ConvertedElement,
+  ElementChild,
+  ElementChildren,
+  ElementProps,
 } from './types'
 
-type Replacer = (props: ComponentProps) => ComponentConfig
+type Replacer = (props: ElementProps) => Element<*>
 type ConvertParams = {
-  replacers?: { [key: string]: Replacer },
+  replacers?: { [string]: Replacer },
 }
 
 export const convertToObject = (
-  tree: ComponentConfig,
+  tree: Element<*>,
   params?: ConvertParams = {},
-): ConvertedComponent => {
+): ConvertedElement => {
   const replacers = params.replacers || {}
 
-  const convertChild = (child: ComponentChild): ConvertedChild => {
+  const convertChild = (child: ElementChild): ConvertedChild => {
     if (child == null) {
       return
     }
-    if (typeof child === 'string') {
+    if (typeof child === 'number' || typeof child === 'string') {
       return child
@@ -40,3 +37,3 @@ }
 
-  const convertChildren = (children: ComponentChildren): ConvertedChildren => {
+  const convertChildren = (children: ElementChildren): ConvertedChildren => {
     return Array.isArray(children)
@@ -47,3 +44,3 @@ ? children.map(convertChild)
 
-  const convertComponent = (tree: ComponentConfig, key?: string) => {
+  const convertComponent = (tree: Element<*>, key?: string) => {
     if (typeof tree.key === 'string') {
@@ -62,3 +59,3 @@ key = tree.key
     ) {
-      name = tree.type.displayName || tree.type.name
+      name = tree.type.displayName || tree.type.name || 'Unknown'
       type = 'class'
@@ -106,3 +103,3 @@ } else if (typeof tree.type === 'function') {
 export const convertToJSON = (
-  tree: ComponentConfig,
+  tree: Element<*>,
   params?: ConvertJSONParams = {},
@@ -109,0 +106,0 @@ ): string => {

src/renderer.js

@@ -5,7 +5,7 @@ // @flow
 
-import type { ConvertedComponent } from './types'
+import type { AnyComponent, ConvertedElement } from './types'
 
 type RenderParams = {
-  components?: { [type: string]: Component<*, *, *> },
-  fallback?: Component<*, *, *>,
+  components?: { [type: string]: AnyComponent },
+  fallback?: AnyComponent,
 }
@@ -16,3 +16,3 @@
 export const renderFromObject = (
-  tree: ConvertedComponent,
+  tree: ConvertedElement,
   params?: RenderParams,
@@ -27,7 +27,7 @@ ) => {
     }
-    if (typeof c === 'string') {
+    if (typeof c === 'number' || typeof c === 'string') {
       return c
     }
     if (c.type) {
-      return createComponent(c)
+      return createFromObject(c)
     }
@@ -37,3 +37,3 @@ return null
 
-  const createComponent = (converted: ConvertedComponent) => {
+  const createFromObject = (converted: ConvertedElement) => {
     const component = components[converted.type] || fallback
@@ -54,3 +54,3 @@
 
-  return createComponent(tree)
+  return createFromObject(tree)
 }
@@ -61,3 +61,3 @@
     json?: string,
-    tree?: ConvertedComponent,
+    tree?: ConvertedElement,
   }
@@ -64,0 +64,0 @@

src/types.js

@@ -5,34 +5,29 @@ // @flow
 
-type Props = { [key: string]: mixed }
+export type FunctionComponent = (props: Object) => Element<*>
 
-type StatelessComponent = (props: Props) => Element<*>
+export type ClassComponent = Class<Component<*, *, *>>
 
-export type ComponentType = string | ReactComponent
+export type AnyComponent = FunctionComponent | ClassComponent
 
-export type ReactComponent = StatelessComponent | Component<*, *, *>
+export type ElementChild = void | number | string | Element<*>
 
-export type ComponentChild = void | string | ComponentConfig
+export type ElementChildren = ElementChild | Array<ElementChild>
 
-export type ComponentChildren = ComponentChild | Array<ComponentChild>
-
-export type ComponentProps = Props & {
-  children?: ComponentChildren,
+export type ElementProps = {
+  children?: ElementChildren,
+  [key: string]: mixed,
 }
 
-export type ComponentConfig = {
-  type: ComponentType,
-  props: ComponentProps,
-}
+export type ConvertedChild = void | number | string | ConvertedElement
 
-export type ConvertedChild = void | string | ConvertedComponent
-
 export type ConvertedChildren = ConvertedChild | Array<ConvertedChild>
 
-export type ConvertedProps = Props & {
+export type ConvertedProps = {
   children?: ConvertedChildren,
+  [key: string]: mixed,
 }
 
-export type ConvertedComponent = {
+export type ConvertedElement = {
   type: string,
   props: ConvertedProps,
 }

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

165662

increased by14.9%

Number of package files

18

increased by38.46%

Lines of code

365

increased by4.29%

Number of lines in readme file

148

increased by6.47%

Worsened metrics

Dev dependency count

19

increased by11.76%

No dependency changes