requirejs-react-jsx

WebJar for requirejs-react-jsx

License

License

MIT
Categories

Categories

JavaScript Languages React User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

requirejs-react-jsx
Last Version

Last Version

1.0.2
Release Date

Release Date

Type

Type

jar
Description

Description

requirejs-react-jsx
WebJar for requirejs-react-jsx
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/podio/requirejs-react-jsx

Download requirejs-react-jsx

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/requirejs-react-jsx/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>requirejs-react-jsx</artifactId>
    <version>1.0.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/requirejs-react-jsx/
implementation 'org.webjars.bower:requirejs-react-jsx:1.0.2'
// https://jarcasting.com/artifacts/org.webjars.bower/requirejs-react-jsx/
implementation ("org.webjars.bower:requirejs-react-jsx:1.0.2")
'org.webjars.bower:requirejs-react-jsx:jar:1.0.2'
<dependency org="org.webjars.bower" name="requirejs-react-jsx" rev="1.0.2">
  <artifact name="requirejs-react-jsx" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='requirejs-react-jsx', version='1.0.2')
)
libraryDependencies += "org.webjars.bower" % "requirejs-react-jsx" % "1.0.2"
[org.webjars.bower/requirejs-react-jsx "1.0.2"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : react jar [0.11.2,)
org.webjars.bower : requirejs-text jar [2.0.12,)

Project Modules

There are no modules declared in this project.

requirejs-react-jsx

NPM version Dependency Status

A RequireJS plugin for compiling React JSX files. Will use react-tools when compiling using r.js, and will use JSXTransformer or Babel when running in the browser in development. This allows us to support multiple bundles in r.js and exclude the JSXTransformer from all of them since we're requiring it dynamically and not explicitly. This also means that we can get 1:1 Source Maps in both development and production.

Example

http://i.imgur.com/upv8B0g.png

Install

$ bower install requirejs-react-jsx --save

If you're not using bower to manage your dependencies (you should), you can just download the jsx.js file manually.

Since we're also using react-tools for the build step while running in a node process, and not in the browser, you will need to install that also:

$ npm install react-tools --save

Usage

Setup

app.jsx

define(function(require){

  var React = require('react');

  function App() {
    this.AppView = React.createClass({
      render: function () {
        return (
          <div>
            <p>Hello, React!</p>
          </div>
        );
      }
    });
  }

  App.prototype.init = function () {
    React.render(<this.AppView />, document.body);
  };

  return App;

});

main.js

require.config({
  paths: {
    "react": "bower_components/react/react-with-addons",
    "babel": "bower_components/requirejs-react-jsx/babel-5.8.34.min",
    "jsx": "bower_components/requirejs-react-jsx/jsx",
    "text": "bower_components/requirejs-text/text"
  },

  shim : {
    "react": {
      "exports": "React"
    }
  },

  config: {
    babel: {
      sourceMaps: "inline", // One of [false, 'inline', 'both']. See https://babeljs.io/docs/usage/options/
      fileExtension: ".jsx" // Can be set to anything, like .es6 or .js. Defaults to .jsx
    }
  }
});

require(['jsx!app'], function(App){

  var app = new App();
  app.init();

});

Building

Call with $ node bower_components/r.js/dist/r.js -o build.js

In your r.js build.js config:

// add `optimize=none` to skip script optimization (useful during debugging).

({
  appDir: "./",
  baseUrl: "./",
  dir: "./compiled",
  mainConfigFile: "./main.js",

  optimize: "uglify2",
  skipDirOptimize: true,
  generateSourceMaps: true,
  findNestedDependencies: true,
  preserveLicenseComments: false,

  onBuildWrite: function (moduleName, path, singleContents) {
    return singleContents.replace(/jsx!/g, '');
  },

  modules: [
    {
      name: "main",
      exclude: ['jsx']
    }
  ]
})

Istanbul Code Coverage

If you want code coverage with Istanbul you will have to do a little extra work. Istanbul only instruments code required by nodes require function by default. However, you can make Istanbul also instrument RequireJS loaded dependencies in a node environment by adding the --hook-run-in-context switch.

requirejs-react-jsx will automatically detect that it is being run in an Istanbul enabled environment and

The --hook-run-in-context only makes Istanbul pick up normally loaded RequireJS files though, and not the ones transformed by RequireJS plugins. So requirejs-react-jsx will automatically detect that it is being run in an Istanbul enabled environment and manually instrument the transpiled code so Istanbul can collect coverage.

A full example of a coverage script in package.json could look like this:

{
  "scripts": {
    "test": "mocha",
    "coverage": "istanbul cover --hook-run-in-context _mocha"
  }
}

Changelog

1.0 - Eliminated all other transformer options than Babel. Switched config variable from jsx to babel. Added browser compatible babel 5.x build to repository to use for in-browser compilations

License

MIT

org.webjars.bower

Podio

Versions

Version
1.0.2
0.15.0