├── .babelrc ├── .codeclimate.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── lib └── render-react.js ├── package.json ├── src └── render-react.js └── test ├── fixtures ├── another-valid-component.js ├── invalid-component.js ├── react-router.js └── valid-component.js └── render-react.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react", 5 | "stage-0" 6 | ], 7 | "retainLines": true 8 | } 9 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | --- 2 | engines: 3 | duplication: 4 | enabled: true 5 | config: 6 | languages: 7 | - javascript 8 | eslint: 9 | enabled: true 10 | fixme: 11 | enabled: true 12 | ratings: 13 | paths: 14 | - "**.js" 15 | exclude_paths: 16 | - test/ 17 | - lib/ 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | test/fixtures 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "mocha": true 5 | }, 6 | "parser": "babel-eslint", 7 | "extends": "airbnb", 8 | "rules": { 9 | "max-len": 0, 10 | "import/extensions": 0 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Automatically normalize line endings for all text-based files 2 | # http://git-scm.com/docs/gitattributes#_end_of_line_conversion 3 | * text=auto 4 | 5 | # For the following file types, normalize line endings to LF on 6 | # checkin and prevent conversion to CRLF when they are checked out 7 | # (this is required in order to prevent newline related issues like, 8 | # for example, after the build script is run) 9 | .* text eol=lf 10 | *.css text eol=lf 11 | *.html text eol=lf 12 | *.jade text eol=lf 13 | *.js text eol=lf 14 | *.json text eol=lf 15 | *.less text eol=lf 16 | *.md text eol=lf 17 | *.sh text eol=lf 18 | *.txt text eol=lf 19 | *.xml text eol=lf 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | coverage/ 4 | 5 | npm-debug.log 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "5" 5 | - "6" 6 | addons: 7 | code_climate: true 8 | before_script: 9 | - npm install -g codeclimate-test-reporter 10 | - npm install 11 | script: 12 | - npm run coverage 13 | after_success: 14 | - codeclimate-test-reporter < coverage/lcov.info 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017 Andrew Shapro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/abramz/gulp-render-react.svg)](https://travis-ci.org/abramz/gulp-render-react) 2 | [![Dependency Status](https://david-dm.org/abramz/gulp-render-react.svg)](https://david-dm.org/abramz/gulp-render-react) 3 | 4 | [![Code Climate](https://codeclimate.com/github/abramz/gulp-render-react/badges/gpa.svg)](https://codeclimate.com/github/abramz/gulp-render-react) 5 | [![Test Coverage](https://codeclimate.com/github/abramz/gulp-render-react/badges/coverage.svg)](https://codeclimate.com/github/abramz/gulp-render-react/coverage) 6 | 7 | ### NO LONGER MAINTAINED 8 | 9 | # [gulp](http://gulpjs.com)-render-react 10 | > Render React components to string or static markup 11 | 12 | Will render React component with [ReactDOMServer.renderToString](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring) or [ReactDOMServer.renderToStaticMarkup](https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup) 13 | 14 | ## Install 15 | ```sh 16 | $ npm install --save-dev gulp-render-react 17 | ``` 18 | 19 | ## Usage 20 | ```js 21 | var gulp = require('gulp'); 22 | var render = require('gulp-render-react'); 23 | 24 | var SRC = 'src/*.js'; 25 | var DEST = 'dist'; 26 | 27 | gulp.task('default', function () { 28 | return gulp.src(SRC, { read: false }) 29 | .pipe(render({ 30 | type: 'string', 31 | props: { 32 | some: 'default' 33 | props: 'to', 34 | pass: 'on' 35 | } 36 | })) 37 | .pipe(gulp.dest(DEST)); 38 | }); 39 | ``` 40 | ## API 41 | 42 | ### render(opts) 43 | 44 | * `type` is 45 | * `string` for ReactDOMServer.renderToString() 46 | * `markup` for ReactDOMServer.renderToStaticMarkup() 47 | * `props` are the properties to create the component with 48 | 49 | ## Usage with [React Router](https://github.com/reactjs/react-router) 50 | ### src/app.js 51 | ```js 52 | import React, { Component, PropTypes } from 'react'; 53 | import { createMemoryHistory, Router, Route, IndexRoute } from 'react-router'; 54 | 55 | class App extends Component { 56 | render() { 57 | return ( 58 |
59 |

App

60 | {this.props.children} 61 |
62 | ); 63 | } 64 | } 65 | 66 | class Home extends Component { 67 | render() { 68 | return ( 69 |

Home

70 | ); 71 | } 72 | } 73 | 74 | class About extends Component { 75 | render() { 76 | return ( 77 |

About

78 | ); 79 | } 80 | } 81 | 82 | class MyRouter extends Component { 83 | static propTypes = { 84 | location: PropTypes.string, 85 | }; 86 | 87 | static defaultProps = { 88 | location: '/', 89 | }; 90 | 91 | render() { 92 | const history = createMemoryHistory(this.props.location); 93 | 94 | return ( 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | ); 103 | } 104 | } 105 | 106 | export default MyRouter; 107 | ``` 108 | 109 | ### Gulpfile.js 110 | ```js 111 | var gulp = require('gulp'); 112 | var render = require('gulp-render-react'); 113 | 114 | var SRC = 'src/*.js'; 115 | var DEST = 'dist'; 116 | 117 | gulp.task('default', function () { 118 | return gulp.src(SRC, { read: false }) 119 | .pipe(render({ 120 | type: 'string', 121 | props: { 122 | location: 'home' 123 | } 124 | })) 125 | .pipe(gulp.dest(DEST)); 126 | }); 127 | ``` 128 | 129 | ## License 130 | 131 | Copyright (c) 2014-2017 Andrew Shapro 132 | 133 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 134 | 135 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 136 | 137 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 138 | -------------------------------------------------------------------------------- /lib/render-react.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _gulpUtil = require('gulp-util');var _gulpUtil2 = _interopRequireDefault(_gulpUtil); 4 | var _through = require('through2');var _through2 = _interopRequireDefault(_through); 5 | var _react = require('react');var _react2 = _interopRequireDefault(_react); 6 | var _server = require('react-dom/server');var _server2 = _interopRequireDefault(_server);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };} 7 | 8 | /** 9 | * Requires a file containing a React component and create an instance of it 10 | * @param {String} filePath file path to the React component to render 11 | * @param {Object} props properties to apply to the element 12 | * @return {Element} the created React element 13 | */ /*! Gulp Render React | MIT License */ 14 | function createElement(filePath, props) { 15 | if (!filePath || typeof filePath !== 'string' || filePath.length === 0) { 16 | throw new Error('Expected filePath to be a string'); 17 | } 18 | 19 | // clear the require cache if we have already imported the file (if we are watching it) 20 | if (require.cache[filePath]) { 21 | delete require.cache[filePath]; 22 | } 23 | 24 | var component = require(filePath); // eslint-disable-line global-require, import/no-dynamic-require 25 | var element = _react2.default.createElement(component.default || component, props || {}); 26 | 27 | return element; 28 | } 29 | 30 | /** 31 | * Uses ReactDOMServer.renderToString on a component at filePath. Will apply optional pro 32 | * https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring 33 | * 34 | * @param {String} filePath react component to render 35 | * @param {Object} props properties to apply to the React component 36 | * @return {Buffer} buffer of the component rendered to a string 37 | */ 38 | function renderToString(filePath, props) { 39 | var element = createElement(filePath, props); 40 | var elementString = _server2.default.renderToString(element); 41 | 42 | return new Buffer(elementString); 43 | } 44 | 45 | /** 46 | * Uses ReactDOMServer.renderToStatic on a component at filePath. Will apply optional props 47 | * https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup 48 | * 49 | * @param {String} filePath react component to render 50 | * @param {Object} props properties to apply to the React component 51 | * @return {Buffer} buffer of the component rendered to a string 52 | */ 53 | function renderToStaticMarkup(filePath, props) { 54 | var element = createElement(filePath, props); 55 | var elementMarkup = _server2.default.renderToStaticMarkup(element); 56 | 57 | return new Buffer(elementMarkup); 58 | } 59 | 60 | module.exports = function (options) { 61 | var opts = options || {}; 62 | 63 | if (!opts.type || opts.type !== 'string' && opts.type !== 'markup') { 64 | throw new _gulpUtil2.default.PluginError('gulp-render-react', '`type` required (`string` or `markup`)'); 65 | } 66 | 67 | return _through2.default.obj(function process(file, enc, callback) { 68 | try { 69 | var newFile = file; 70 | // temporary before we allow src extension in options 71 | if (opts.type === 'string') { 72 | newFile.contents = renderToString(file.path, opts.props ? opts.props : {}); 73 | } else if (opts.type === 'markup') { 74 | newFile.contents = renderToStaticMarkup(file.path, opts.props ? opts.props : {}); 75 | } 76 | // temporary before we allow dest extension in options 77 | newFile.path = _gulpUtil2.default.replaceExtension(file.path, '.html'); 78 | this.push(newFile); 79 | } catch (err) { 80 | this.emit('error', new _gulpUtil2.default.PluginError('gulp-render-react', err, { fileName: file.path })); 81 | } 82 | callback(); 83 | }); 84 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-render-react", 3 | "version": "3.1.3", 4 | "description": "Render react components to string or static markup", 5 | "author": { 6 | "name": "Andrew Shapro", 7 | "email": "me@andrewshapro.com", 8 | "url": "http://github.com/abramz/" 9 | }, 10 | "license": "MIT", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/abramz/gulp-render-react.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/abramz/gulp-render-react/issues" 17 | }, 18 | "keywords": [ 19 | "gulpplugin", 20 | "react", 21 | "prerender" 22 | ], 23 | "main": "lib/render-react.js", 24 | "files": [ 25 | "lib" 26 | ], 27 | "scripts": { 28 | "clean": "rm -rf lib/", 29 | "prebuild": "npm run clean", 30 | "test": "./node_modules/.bin/mocha --reporter spec --compilers js:babel-register", 31 | "coverage": "./node_modules/.bin/babel-node ./node_modules/isparta/bin/isparta cover --report lcov node_modules/.bin/_mocha -- --recursive --reporter=spec", 32 | "lint": "./node_modules/.bin/eslint src test", 33 | "build": "./node_modules/.bin/babel src --out-dir lib" 34 | }, 35 | "pre-commit": [ 36 | "build", 37 | "lint", 38 | "test" 39 | ], 40 | "dependencies": { 41 | "gulp-util": "^3.0.7", 42 | "react": "^15.3.1", 43 | "react-dom": "^15.3.1", 44 | "through2": "^2.0.1" 45 | }, 46 | "devDependencies": { 47 | "babel-cli": "^6.5.1", 48 | "babel-core": "^6.5.2", 49 | "babel-eslint": "^7.1.1", 50 | "babel-preset-es2015": "^6.5.0", 51 | "babel-preset-react": "^6.5.0", 52 | "babel-preset-stage-0": "^6.5.0", 53 | "babel-register": "^6.5.2", 54 | "eslint": "^3.4.0", 55 | "eslint-config-airbnb": "^13.0.0", 56 | "eslint-plugin-import": "^2.2.0", 57 | "eslint-plugin-jsx-a11y": "^2.2.3", 58 | "eslint-plugin-react": "^6.1.2", 59 | "isparta": "^4.0.0", 60 | "mocha": "^3.0.2", 61 | "pre-commit": "^1.1.2", 62 | "react-router": "^3.0.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/render-react.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | import gutil from 'gulp-util'; 4 | import through from 'through2'; 5 | import React from 'react'; 6 | import ReactDOMServer from 'react-dom/server'; 7 | 8 | /** 9 | * Requires a file containing a React component and create an instance of it 10 | * @param {String} filePath file path to the React component to render 11 | * @param {Object} props properties to apply to the element 12 | * @return {Element} the created React element 13 | */ 14 | function createElement(filePath, props) { 15 | if (!filePath || typeof filePath !== 'string' || filePath.length === 0) { 16 | throw new Error('Expected filePath to be a string'); 17 | } 18 | 19 | // clear the require cache if we have already imported the file (if we are watching it) 20 | if (require.cache[filePath]) { 21 | delete require.cache[filePath]; 22 | } 23 | 24 | const component = require(filePath); // eslint-disable-line global-require, import/no-dynamic-require 25 | const element = React.createElement(component.default || component, props || {}); 26 | 27 | return element; 28 | } 29 | 30 | /** 31 | * Uses ReactDOMServer.renderToString on a component at filePath. Will apply optional pro 32 | * https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring 33 | * 34 | * @param {String} filePath react component to render 35 | * @param {Object} props properties to apply to the React component 36 | * @return {Buffer} buffer of the component rendered to a string 37 | */ 38 | function renderToString(filePath, props) { 39 | const element = createElement(filePath, props); 40 | const elementString = ReactDOMServer.renderToString(element); 41 | 42 | return new Buffer(elementString); 43 | } 44 | 45 | /** 46 | * Uses ReactDOMServer.renderToStatic on a component at filePath. Will apply optional props 47 | * https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostaticmarkup 48 | * 49 | * @param {String} filePath react component to render 50 | * @param {Object} props properties to apply to the React component 51 | * @return {Buffer} buffer of the component rendered to a string 52 | */ 53 | function renderToStaticMarkup(filePath, props) { 54 | const element = createElement(filePath, props); 55 | const elementMarkup = ReactDOMServer.renderToStaticMarkup(element); 56 | 57 | return new Buffer(elementMarkup); 58 | } 59 | 60 | module.exports = (options) => { 61 | const opts = options || {}; 62 | 63 | if (!opts.type || (opts.type !== 'string' && opts.type !== 'markup')) { 64 | throw new gutil.PluginError('gulp-render-react', '`type` required (`string` or `markup`)'); 65 | } 66 | 67 | return through.obj(function process(file, enc, callback) { 68 | try { 69 | const newFile = file; 70 | // temporary before we allow src extension in options 71 | if (opts.type === 'string') { 72 | newFile.contents = renderToString(file.path, opts.props ? opts.props : {}); 73 | } else if (opts.type === 'markup') { 74 | newFile.contents = renderToStaticMarkup(file.path, opts.props ? opts.props : {}); 75 | } 76 | // temporary before we allow dest extension in options 77 | newFile.path = gutil.replaceExtension(file.path, '.html'); 78 | this.push(newFile); 79 | } catch (err) { 80 | this.emit('error', new gutil.PluginError('gulp-render-react', err, { fileName: file.path })); 81 | } 82 | callback(); 83 | }); 84 | }; 85 | -------------------------------------------------------------------------------- /test/fixtures/another-valid-component.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | import React from 'react'; 4 | 5 | const anotherValidComponent = React.createClass({ 6 | displayName: 'anotherValidComponent', 7 | getDefaultProps: function getDefaultProps() { 8 | return { 9 | some: 'prop', 10 | }; 11 | }, 12 | render: function render() { 13 | let id = 0; 14 | return ( 15 | React.createElement('ul', null, 16 | Object.keys(this.props).map((key) => { 17 | return (React.createElement('li', {key: id++}, key, ' : ', this.props[key])); 18 | }, this) 19 | ) 20 | ); 21 | }, 22 | }); 23 | 24 | export default anotherValidComponent; 25 | -------------------------------------------------------------------------------- /test/fixtures/invalid-component.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | import React from 'react'; 4 | 5 | const validComponent = React.createClass({ 6 | getDefaultProps: () => { 7 | return {}; 8 | }, 9 | render: () => { 10 | let id = 0; 11 | return ( 12 | 13 | {Object.keys(this.props).forEach((key) => { 14 | return (
  • {prop.text}
    • ); 15 | })} 16 |     17 | ); 18 | } 19 | }); 20 | 21 | export default validComponent; 22 | -------------------------------------------------------------------------------- /test/fixtures/react-router.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | import { createMemoryHistory, Router, Route, IndexRoute } from 'react-router'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
    10 |

    App

    11 | {this.props.children} 12 |
    13 | ); 14 | } 15 | } 16 | 17 | class Home extends Component { 18 | render() { 19 | return ( 20 |

    Home

    21 | ); 22 | } 23 | } 24 | 25 | class About extends Component { 26 | render() { 27 | return ( 28 |

    About

    29 | ); 30 | } 31 | } 32 | 33 | class MyRouter extends Component { 34 | static propTypes = { 35 | location: PropTypes.string, 36 | }; 37 | 38 | static defaultProps = { 39 | location: '/', 40 | }; 41 | 42 | render() { 43 | const history = createMemoryHistory(this.props.location); 44 | 45 | return ( 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | ); 54 | } 55 | } 56 | 57 | export default MyRouter; 58 | -------------------------------------------------------------------------------- /test/fixtures/valid-component.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | 5 | class ValidComponent extends Component { 6 | static propTypes = { 7 | some: PropTypes.string, 8 | }; 9 | 10 | static defaultProps = { 11 | some: 'prop', 12 | }; 13 | 14 | renderElements() { 15 | let id = 0; 16 | return Object.keys(this.props).map((key) => { 17 | return ( 18 |
  • {key} : {this.props[key]}
    • 19 | ); 20 | }); 21 | } 22 | 23 | render() { 24 | return ( 25 | 26 | ); 27 | } 28 | } 29 | 30 | export default ValidComponent; 31 | -------------------------------------------------------------------------------- /test/render-react.spec.js: -------------------------------------------------------------------------------- 1 | /*! Gulp Render React | MIT License */ 2 | 3 | /* global describe, it */ 4 | import assert from 'assert'; 5 | import gutil from 'gulp-util'; 6 | import render from '../src/render-react.js'; 7 | 8 | describe('gulp-render-react', () => { 9 | it('should render valid React components to string', (done) => { 10 | const stream = render({ 11 | type: 'string', 12 | }); 13 | 14 | stream.on('data', (file) => { 15 | const extensionPattern = /.*?\.html/; 16 | const contentsPattern = /