Package Exports

patternplate-transform-react-to-markup

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (patternplate-transform-react-to-markup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

patternplate-transform-react-to-markup

patternplate transform creating markup from react components.

Installation

npm install --save patternplate-transform-react-to-markup react react-dom

Transformation

Input

  module.exports = React.createClass({
    displayName: 'MyAwesomePattern',
    render: function() {
      return React.createElement('div', {className: 'my-awesome-pattern'}, 'My awesome Pattern.');
    }
  });

Output

  <!-- default settings -->
  <div class="my-awesome-pattern">
    My awesome Pattern
  </div>

  <!-- with static rendering disabled -->
  <div class="my-awesome-pattern" react-id=".cd5akchxj4.1.0">
    My awesome Pattern
  </div>


  <!-- with automount enabled -->
  <div data-mountpoint>
    <div class="my-awesome-pattern" react-id=".cd5akchxj4.1.0">
      My awesome Pattern
    </div>
  </div>

Configuration

Install patternplate-transform-react-to-markup, patternplate-transform-react, react and react-dom in your patternplate project. patternplate-server currently ships with patternplate-transform-react working on *.jsx and *.html files by default.

Parameters

// configuration/patternplate-server/transforms.js
module.exports = {
  "react-to-markup": {
    "opts": {
      "automount": false, // ignore any js files and mount the component as live React component on the frontend, implies static: false
      "static": true // render static markup without react-ids
    }
  }
}

Component auto mounting

patternplate-transform-react-to-markup is capable of rendering output needed for automatic mounting of react components. To enable this globally for your project specify

// configuration/patternplate-server/transforms.js
module.exports = {
  "react-to-markup": {
    "opts": {
      "automount": true
    }
  }
}

To enable auto mounting on a per pattern basis specify

// patterns/my-awesome-pattern/package.json
{
  "name": "my-awesome-pattern",
  "version": "0.1.0",
  "options": {
    "react-to-markup": {
      "opts": {
        "automount": true
      }
    }
  }
}

React version interoperability

patternplate-transform-react-to-markup provides interoperability with react 0.13 and 0.14. The decision making on the used call happens according to these rules:

if React.version gte 0.14
  if require.resolve('react-dom') fails
    warn
    use React.render
  else if require.resolve('react') succeeds
    use ReactDOM.render
else
  use React.render

This means you can use react with and without react-dom - you'll see a warning with react >= 0.14, though:

[ ⚠ External Deprecation ⚠ ] React version 0.14.7 deprecated React.renderToString and moved it to react-dom/server's renderToString, but react-dom is not available via require.resolve. Consider installing react-dom.