diff --git a/.travis.yml b/.travis.yml index f70a1c5..0abcde0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,4 +3,4 @@ language: node_js node_js: - "0.12" - "0.10" - - "iojs-v1.1.0" + - "4.0" diff --git a/CHANGELOG.md b/CHANGELOG.md index 7226fb9..b4dad63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.6.0 (Nov 06 2015) + +* make the render root configurable (https://github.com/paypal/react-engine/issues/68) + ## 2.5.0 (Oct 29 2015) * Throw an error only if peer dependency is not installed and is really required (https://github.com/paypal/react-engine/pull/98) diff --git a/README.md b/README.md index a3675c9..a9cb95d 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,8 @@ ### Install ```sh - # react-engine needs to be installed along side react, express and optionally react-router - npm install react-engine@2 express react@0.13 react-router@0.13 --save + # In your express app, react-engine needs to be installed along side react and optionally react-router + npm install react-engine@2 react@0.13 react-router@0.13 --save ``` ### Usage On Server Side @@ -76,7 +76,8 @@ The options object can contain properties from [react router's create configurat Additionally, it can contain the following **optional** properties, -- `docType`: - string that can be used as a doctype (_Default: ``_) +- `docType`: - a string that can be used as a doctype (_Default: ``_). + (docType might not make sense if you are rendering partials/sub page components, in that case you can pass and empty string as docType) - `routesFilePath`: - path for the file that contains the react router routes. react-engine uses this behind the scenes to reload the routes file in cases where [express's app property](http://expressjs.com/api.html#app.set) `view cache` is false, this way you don't need to restart the server every time a change is made in the view files or routes file. @@ -125,10 +126,11 @@ var data = client.data(); Pass in a JavaScript object as options to the react-engine's client boot function. The options object can contain properties from [react router's create configuration object](http://rackt.github.io/react-router/#Router.create). -Additionally, it should contain the following **required** property, +Additionally, it can contain the following properties, -- `viewResolver` : - a function that react-engine needs to resolve the view file. +- `viewResolver` : **required** - - a function that react-engine needs to resolve the view file. an example of the viewResolver can be [found here](https://github.com/paypal/react-engine/blob/ecd27b30a9028d3f02b8f8e89d355bb5fc909de9/examples/simple/public/index.js#L29). +- `mountNode` : **optional** - - supply a HTML DOM Node to mount the server rendered component in the case of partial/non-full page rendering. ### Data for component rendering The actual data that gets fed into the component for rendering is the `renderOptions` object that [express generates](https://github.com/strongloop/express/blob/2f8ac6726fa20ab5b4a05c112c886752868ac8ce/lib/application.js#L535-L588). diff --git a/lib/server.js b/lib/server.js index 2598b90..4b1169a 100644 --- a/lib/server.js +++ b/lib/server.js @@ -146,7 +146,16 @@ exports.create = function create(createOptions) { // state (script) injection var script = format(TEMPLATE, Config.client.markupId, JSON.stringify(data)); - html = html.replace('', script + ''); + + if (createOptions.docType === '') { + // if the `docType` is empty, the user did not want to add a docType to the rendered component, + // which means they might not be rendering a full page with `html` and `body` tags + // so attach the script tag to just the end of the generated html string + html += script; + } + else { + html = html.replace('', script + ''); + } return done(null, html); } diff --git a/package.json b/package.json index e55f830..87fb9eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-engine", - "version": "2.5.0", + "version": "2.6.0", "description": "a composite render engine for express apps to render both plain react views and react-router views", "main": "index.js", "scripts": {