├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── README.md ├── package.json ├── src └── renderToJson.js └── test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "env": { 4 | "browser": true, 5 | "mocha": true, 6 | "node": true 7 | }, 8 | "rules": { 9 | "react/jsx-uses-react": 2, 10 | "react/jsx-uses-vars": 2, 11 | "react/react-in-jsx-scope": 2, 12 | "react/jsx-indent": [2, 4], 13 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 14 | //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example) 15 | "block-scoped-var": 0, 16 | // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved 17 | "padded-blocks": 0, 18 | 19 | "no-var": 0, 20 | "indent": [2, 4], 21 | "id-length": 0, 22 | "prefer-const": 0, 23 | "default-case": 0, 24 | "one-var": 0, 25 | "guard-for-in": 0, 26 | "no-shadow": 0, 27 | "no-param-reassing": 0, 28 | "quotes": 0, 29 | "func-names": 0, 30 | "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/test.js"]}] 31 | }, 32 | "plugins": [ 33 | "react" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .eslintrc 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-render-to-json 2 | 3 | > module to figure out what is passed to this.props.children in react 4 | 5 | [![Build Status](https://semaphoreci.com/api/v1/gorangajic/react-render-to-json/branches/master/badge.svg)](https://semaphoreci.com/gorangajic/react-render-to-json) 6 | 7 | ### install 8 | 9 | ``` 10 | npm install react-render-to-json --save 11 | ``` 12 | 13 | ### usage example 14 | 15 | ```javascript 16 | import React from 'react'; 17 | import renderToJson from 'react-render-to-json'; 18 | 19 | class Heart extends React.Component { 20 | render() { 21 | return ( 22 | 23 | 24 | 25 | ); 26 | } 27 | } 28 | 29 | console.log(renderToJSon()); 30 | 31 | ``` 32 | 33 | ```json 34 | { 35 | "name": "Heart", 36 | "attributes": {}, 37 | "children": [{ 38 | "name": "svg", 39 | "attributes": { 40 | "width": "24", 41 | "fill": "#00ea00", 42 | "height": "24", 43 | "viewBox": "0 0 24 24" 44 | }, 45 | "children": [{ 46 | "name": "g", 47 | "attributes": {}, 48 | "children": [{ 49 | "name": "path", 50 | "attributes": { 51 | "d": "M12 10.375c0-2.416-1.959-4.375-4.375-4.375s-4.375 1.959-4.375 4.375c0 1.127.159 2.784 1.75 4.375l7 5.25s5.409-3.659 7-5.25 1.75-3.248 1.75-4.375c0-2.416-1.959-4.375-4.375-4.375s-4.375 1.959-4.375 4.375" 52 | } 53 | }] 54 | }] 55 | }] 56 | } 57 | 58 | ``` 59 | 60 | Used by [react-svg-morph](https://github.com/gorangajic/react-svg-morph/) 61 | 62 | ### Licence 63 | 64 | MIT 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-render-to-json", 3 | "version": "0.0.6", 4 | "description": "hacky way to figure out what is passed to this.props.children in react", 5 | "main": "lib/renderToJson.js", 6 | "scripts": { 7 | "eslint": "eslint src", 8 | "test": "eslint src && mocha --require babel-register test.js", 9 | "prepublish": "babel src --out-dir lib" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+ssh://git@github.com/gorangajic/react-render-to-json.git" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "json", 18 | "render", 19 | "react-dom" 20 | ], 21 | "author": "Goran Gajic ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/gorangajic/react-render-to-json/issues" 25 | }, 26 | "homepage": "https://github.com/gorangajic/react-render-to-json#readme", 27 | "devDependencies": { 28 | "babel-cli": "6.16.0", 29 | "babel-eslint": "^4.1.3", 30 | "babel-preset-es2015": "6.16.0", 31 | "babel-preset-react": "6.16.0", 32 | "babel-preset-stage-0": "6.16.0", 33 | "babel-register": "6.16.3", 34 | "eslint": "3.6.0", 35 | "eslint-config-airbnb": "12.0.0", 36 | "eslint-plugin-import": "1.16.0", 37 | "eslint-plugin-jsx-a11y": "2.2.2", 38 | "eslint-plugin-react": "6.3.0", 39 | "mocha": "3.1.2", 40 | "react": "15.3.2", 41 | "should": "11.1.1" 42 | }, 43 | "peerDependencies": { 44 | "react": "^0.14.0 || ^15.0.0 || ^16.0.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/renderToJson.js: -------------------------------------------------------------------------------- 1 | /* eslint new-cap:0 */ 2 | export default function renderToJson(element) { 3 | let res = {}; 4 | if (!element || !element.type) { 5 | return element; 6 | } 7 | const Component = element.type; 8 | res.name = element.type; 9 | res.attributes = { ...element.props }; 10 | let children = element.props ? element.props.children : null; 11 | delete res.attributes.children; 12 | if (typeof Component !== "string") { 13 | res.name = Component.name; 14 | const context = element.context || {}; 15 | if (Component.prototype && typeof Component.prototype.render === "function") { // ReactComponent 16 | children = new Component(element.props, context).render(); 17 | } else { // function component 18 | children = Component(element.props, context); 19 | } 20 | } 21 | if (Array.isArray(children)) { 22 | res.children = children.map(child => renderToJson(child)); 23 | return res; 24 | } 25 | res.children = children ? [renderToJson(children)] : []; 26 | return res; 27 | } 28 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | /* eslint react/prefer-stateless-function: 0 */ 2 | import 'should'; 3 | import React from 'react'; 4 | import renderToJson from './src/renderToJson'; 5 | 6 | class SvgComponent extends React.Component { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } 17 | 18 | function AwesomeComponent() { 19 | return (
20 | Hello 21 |
); 22 | } 23 | 24 | describe('react-render-to-json', () => { 25 | it('should convert class component', () => { 26 | const render = renderToJson(); 27 | render.name.should.be.equal('SvgComponent'); 28 | render.attributes.foo.should.be.equal("bar"); 29 | const svg = render.children[0]; 30 | svg.name.should.be.equal("svg"); 31 | svg.attributes.fill.should.be.equal("#00ea00"); 32 | const g = svg.children[0]; 33 | g.name.should.be.equal('g'); 34 | g.children[0].name.should.be.equal('path'); 35 | g.children[0].attributes.d.should.be.equal('awesome-path'); 36 | }); 37 | 38 | it('should convert stateless functional components', () => { 39 | const render = renderToJson(); 40 | render.name.should.be.equal('AwesomeComponent'); 41 | const div = render.children[0]; 42 | div.name.should.be.equal("div"); 43 | div.attributes.className.should.be.equal("awesome"); 44 | const span = div.children[0]; 45 | span.name.should.be.equal("span"); 46 | span.attributes.className.should.be.equal("hi"); 47 | span.children[0].should.be.equal("Hello"); 48 | }); 49 | }); 50 | --------------------------------------------------------------------------------