react_webpack_rails 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e5c7c1e774861da4a8dd6be317a5f624bb1d8f2e
-  data.tar.gz: 5f26add913b827882a39f459ca6546f16b4483e0
+  metadata.gz: 3fd3ea5641aff396b2ade349f530503b12fda9dc
+  data.tar.gz: 65b1f0030b965aef255c22e58ed19b4309529a91
 SHA512:
-  metadata.gz: 55934857a674403c7fbf1215877e54ef69bc2e121f7d47ad0bcc9e8dfc03f3bf27c56f243495f13ec6f7d62d791e9348a0a9142430acdc69a3dbc5085608f7bb
-  data.tar.gz: bef5eef2a86dc6bca571ba6ae52b74c25ae69098ce470982b90bdc4b225cc47b2236b60aed1481b1dcad4b6a7ae8493cfdcb3460a1f19d7de57aa3d316efd7ff
+  metadata.gz: 2afdd1696782b2b19b7520c14ea07b7c6b63838a7e945109c623f12af6cd03a9b91b761b8f568f570ed81ce3738726fd4c36f4973b971bfd378dedf97d017a52
+  data.tar.gz: 269768ac294ea3e532978fa23e9a3a6db9830aeaec1385a61cd0058020061d9de3e0608570e24a6a300fca4d365cace7b7268261c24b743987e672cfef83121d

data/CHANGELOG.md

@@ -1,3 +1,34 @@
+## 0.0.4 (October 26, 2015)
+* Add [react-router [v1]](https://github.com/rackt/react-router) integration:
+  * js helpers:
+    * `registerRouter`
+    * `getRouter`
+    * `renderRouter`
+  * rails helper:
+    * `react_router`
+* Add `unmountComponent` js helper.
+* Bump package.json.
+* Add React 0.14 compatibility.
+* Add `.babelrc` file as part of generator.
+
+### migration 0.0.3 -> 0.0.4
+* Make sure your package.json is up-to-date.
+* install `react-dom 0.14`:
+  ```
+  $ npm install react-dom --save`
+  ```
+* Expose `ReactDOM` in app/react/index.js.
+  ```js
+  import ReactDOM from 'react-dom';
+  window.ReactDOM = ReactDOM;
+  ```
+* Create `.bablerc` in your project directory:
+  ```js
+  {
+    "stage": 1
+  }
+  ```
+
 ## 0.0.3 (September 6, 2015)
 * Reorganize config files.
 * Add UJS helpers:

data/README.md

@@ -35,6 +35,7 @@ This will create following files:
 │   ├── dev.config.js
 │   ├── production.config.js
 │   └── tests.config.js
+|── .babelrc
 ├── karma.conf.js
 ├── package.json
 └── webpack.config.js
@@ -55,6 +56,10 @@ And require integration and bundle files in `application.js`
 //= require react_bundle
 ```
 
+### Babel
+
+By default, `react-webpack-rails` uses Babel Stage 1 - Proposal. If you want to change the stage, you can do so in the `.babelrc` file. It is however not recommended to use Stage 0 in a production app, because the features present there can be dropped, which would break your application.
+
 ## Usage
 ##### Check [docs](https://github.com/netguru/react_webpack_rails/tree/master/docs) for detailed api description.
 #### Register component in index.js
@@ -96,6 +101,9 @@ or manually:
 
     $ webpack -p --config YOUR_CONFIG
 
+#### Deployment
+Check [docs/deployment.md](docs/deployment.md)
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/docs/README.md

@@ -1,81 +1,11 @@
 # Docs
-
-## UJS helpers
-
-* ### registerComponent
-  ```js
-  registerComponent(String componentName, class|function component)
-  ```
-
-  Register component so it's globally accessible.
-
-  ##### example:
-
-  ```js
-  import MyComponent from 'my-component';
-
-  registerComponent('MyComponentName', MyComponent);
-  ```
-
-  **note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactComponents` property.
-
-* ### getComponent
-
-  ```js
-  getComponent(String componentName)
-  ```
-
-  Shortcut for accessing registered component.
-
-  ##### example:
-
-  ```js
-  getComponent('MyComponentName');
-  ```
-
-* ### createComponent
-
-  ```js
-  createComponent(String componentName[, Object props])
-  ```
-
-  Wrapper over React.createElement that creates ready to render component with props.
-
-  ##### example:
-
-  ```js
-  createComponent('MyComponentName', {foo: 'bar'});
-  ```
-
-* ### renderComponent
-
-  ```js
-  renderComponent(String componentName, Object props, DOMElement container)
-  ```
-
-  Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
-
-  ##### example:
-
-  ```js
-  var element = document.getElementById('my-element');
-  renderComponent('MyComponentName', {foo: 'bar'}, element);
-  ```
-
-## Rails helpers
-
-* ### react_component
-
-  ```ruby
-  react_component(String component_name[, Object props])
-  ```
-
-  Creates DOM node with props as data attributes in rendered view so ReactRailsUJS can grab it and mount proper  component.
-
-  ##### example:
-
-  ```ruby
-  <%= react_component('MyComponentName', MySerializer.new(my_data)) %>
-  ```
-
-  **note:** Props Object will parsed to JSON. Be careful when passing rails models there - all its data accessible after `.to_json` will be exposed as data-attributes. We  recommend using serializers to control it.
+1. [Api](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md)
+  1. [UJS helpers](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ujs-helpers)
+    * [registerComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#registercomponent)
+    * [createComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getcomponent)
+    * [renderComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rendercomponent)
+    * [getRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getrouter)
+    * [renderRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#renderrouter)
+  1. [Rails helpers](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rails-helpers)
+    * [react_component]( https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component)
+    * [react_router](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_router)

data/docs/api.md

@@ -0,0 +1,152 @@
+## UJS helpers
+
+* ### registerComponent
+  ```js
+  registerComponent(String componentName, class|function component)
+  ```
+
+  Register component so it's globally accessible.
+
+  ##### example:
+
+  ```js
+  import MyComponent from 'my-component';
+
+  registerComponent('MyComponentName', MyComponent);
+  ```
+
+  **note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactComponents` property.
+
+* ### getComponent
+
+  ```js
+  getComponent(String componentName)
+  ```
+
+  Shortcut for accessing registered component.
+
+  ##### example:
+
+  ```js
+  getComponent('MyComponentName');
+  ```
+
+* ### createComponent
+
+  ```js
+  createComponent(String componentName[, Object props])
+  ```
+
+  Wrapper over React.createElement that creates ready to render component with props.
+
+  ##### example:
+
+  ```js
+  createComponent('MyComponentName', {foo: 'bar'});
+  ```
+
+* ### renderComponent
+
+  ```js
+  renderComponent(String componentName, Object props, DOMElement container)
+  ```
+
+  Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
+
+  ##### example:
+
+  ```js
+  var element = document.getElementById('my-element');
+  renderComponent('MyComponentName', {foo: 'bar'}, element);
+  ```
+
+* ### unmountComponent
+
+  ```js
+  unmountComponent(DOMElement container)
+  ```
+
+  Wrapper over `React.unmountComponentAtNode`. It will unmount component from given DOM node.
+
+  ##### example:
+
+  ```js
+  var element = document.getElementById('my-element');
+  unmountComponent(element);
+  ```
+
+* ### registerRouter
+  ```js
+  registerRouter(String routerName, class|function component)
+  ```
+
+  Register router so it's globally accessible.
+
+  ##### example:
+
+  ```js
+  import MyComponent from 'my-component';
+
+  registerComponent('MyComponentName', MyComponent);
+  ```
+
+  **note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactRouters` property.
+
+* ### getRouter
+
+  ```js
+  getRouter(String routerName)
+  ```
+
+  Shortcut for accessing registered router.
+
+  ##### example:
+
+  ```js
+  getRouter('MyRouterName');
+  ```
+
+* ### renderRouter
+
+  ```js
+  renderRouter(String routerName, Object props, DOMElement container)
+  ```
+
+  Wrapper ove `Router.run` function with possibility to pass props to handler.
+
+  ##### example:
+
+  ```js
+  var element = document.getElementById('my-element');
+  renderComponent('MyComponentName', {foo: 'bar'}, element);
+  ```
+
+## Rails helpers
+
+* ### react_component
+
+  ```ruby
+  react_component(String component_name[, Object props])
+  ```
+
+  Creates DOM node with props as data attributes in rendered view so ReactRailsUJS can grab it and mount proper  component.
+
+  ##### example:
+
+  ```ruby
+  <%= react_component('MyComponentName', MySerializer.new(my_data)) %>
+  ```
+
+  **note:** Props Object will be parsed to JSON. Be careful when passing rails models there - all its data accessible after `.to_json` will be exposed as data-attributes. We  recommend using serializers to control it.
+
+* ### react_router
+
+  ```ruby
+  react_router(String router_name)
+  ```
+
+  ##### example:
+
+  ```ruby
+  <%= react_router('MyRouterName') %>
+  ```

data/docs/deployment.md

@@ -0,0 +1,65 @@
+#### Heroku
+Heroku will generally assume that it is a Rails application if deployed without further configuration. However, Heroku needs to install the
+node packages and use webpack to seed the asset pipeline with the `react_bundle`.
+
+Two main steps are necessary to allow the application to properly deploy onto Heroku. First, tell Heroku that you're using two buildpacks and make sure
+the nodejs one is first:
+
+```bash
+$ heroku buildpacks:clear # this line is only necessary if buildpacks were previously specified
+$ heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-nodejs
+$ heroku buildpacks:add --index 2 https://github.com/heroku/heroku-buildpack-ruby
+```
+
+Second, amend the provided `package.json` file to include a `postinstall` script that is the same as the build script (by default; otherwise
+however as configured for production as described earlier for webpack). This `postinstall` script makes sure the `react_bundle` file is put
+into `app/assets/javascript` before Heroku's `assets:precompile` step when it builds the Rails app.
+
+```json
+"scripts": {
+  "test": "karma start",
+  "start": "webpack -w --config webpack/dev.config.js",
+  "build": "webpack -p --config webpack/production.config.js",
+  "postinstall": "webpack -p --config webpack/production.config.js"
+},
+```
+
+Deploying to Heroku should now work correctly:
+
+```bash
+  $ git push heroku master    # or however you'd like to push to Heroku
+```
+
+#### Tie Webpack assets to Rails rake tasks
+
+Rake task `assets.rake`
+```ruby
+# The webpack must compile assets before assets:environment task.
+# Otherwise Sprockets sees no changes and doesn't precompile assets.
+Rake::Task['assets:precompile']
+  .clear_prerequisites
+  .enhance(['assets:compile_environment'])
+
+# Remove Webpack assets as well
+Rake::Task['assets:clobber'].enhance do
+  Rake::Task['assets:clobber_webpack'].invoke
+end
+
+namespace :assets do
+  #In this task, set prerequisites for the assets:precompile task
+  task :compile_environment => :webpack do
+    Rake::Task['assets:environment'].invoke
+  end
+
+  desc 'Compile Webpack assets'
+  task :webpack do
+    sh "NODE_ENV=#{Rails.env} npm run build" # this runs a react_webpack_rails script
+  end
+
+  desc 'Remove compiled Webpack assets'
+  task :clobber_webpack do
+    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/react_bundle.js"
+    rm_rf "#{Rails.application.config.root}/app/assets/stylesheets/react_bundle.css"
+  end
+end
+```

data/lib/assets/javascripts/react_integration.js.erb

@@ -6,12 +6,24 @@
   // jQuery is optional. Use it to support legacy browsers.
   var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
 
+  var _ReactDOM = function () {
+    if(typeof window.ReactDOM !== 'undefined'){
+      return window.ReactDOM;
+    };
+    if(parseFloat(window.React.version) >= 0.14) {
+      console.warn("ReactDOM is missing. Make sure it's exposed in app/react/index.js");
+    };
+    return window.React;
+  }
+
   // create the  namespace
   window.ReactRailsUJS = {
     CLASS_NAME_ATTR: 'data-react-class',
     PROPS_ATTR: 'data-react-props',
+    ROUTER_FLAG: 'data-react-router',
     RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
     reactComponents: {},
+    reactRouters: {},
     // helper method for the mount and unmount methods to find the
     // `data-react-class` DOM elements
     _findDOMNodes: function(searchSelector) {
@@ -45,7 +57,28 @@
 
     renderComponent: function (name, props, element) {
       var component = window.ReactRailsUJS.createComponent(name, props);
-      React.render(component, element);
+      _ReactDOM().render(component, element);
+    },
+
+    unmountComponent: function (node) {
+      _ReactDOM().unmountComponentAtNode(node);
+    },
+
+    registerRouter: function(name, routes) {
+      window.ReactRailsUJS.reactRouters[name] = routes;
+    },
+
+    getRouter: function(name) {
+      return window.ReactRailsUJS.reactRouters[name];
+    },
+
+    renderRouter: function(name, element) {
+      if(window.ReactRailsUJS.routerEnabled == true){
+        throw new Error("Error when renering " + name + "router: can't render more than one router.")
+      }
+      window.ReactRailsUJS.routerEnabled = true;
+      var router = window.ReactRailsUJS.getRouter(name);
+      _ReactDOM().render(router, element);
     },
 
     mountComponents: function(searchSelector) {
@@ -54,25 +87,27 @@
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
         var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
-
-        // Assume className is simple and can be found at top-level (window).
-        // Fallback to eval to handle cases like 'My.React.ComponentName'.
-
-        var constructor = window.ReactRailsUJS.reactComponents[className];
         var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
+        try {
+          var isRouter = JSON.parse(node.getAttribute(window.ReactRailsUJS.ROUTER_FLAG));
+        } catch(error) {
+          var isRouter = false
+        }
         var props = propsJson && JSON.parse(propsJson);
-
-        React.render(React.createElement(constructor, props), node);
+        if (isRouter) {
+          window.ReactRailsUJS.renderRouter(className, node)
+        } else {
+          window.ReactRailsUJS.renderComponent(className, props, node)
+        }
       }
     },
 
     unmountComponents: function(searchSelector) {
       var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
-
+      window.ReactRailsUJS.routerEnabled = false;
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
-
-        React.unmountComponentAtNode(node);
+        window.ReactRailsUJS.unmountComponent(node);
       }
     }
   };
@@ -82,6 +117,11 @@
   window.getComponent = ReactRailsUJS.getComponent;
   window.createComponent = ReactRailsUJS.createComponent;
   window.renderComponent = ReactRailsUJS.renderComponent;
+  window.unmountComponent = ReactRailsUJS.unmountComponent;
+
+  window.registerRouter = ReactRailsUJS.registerRouter;
+  window.getRouter = ReactRailsUJS.getRouter;
+  window.renderRouter = ReactRailsUJS.renderRouter;
 
   // functions not exposed publicly
   function handleTurbolinksEvents () {

data/lib/generators/react_webpack_rails/install_generator.rb

@@ -2,8 +2,11 @@ module ReactWebpackRails
   class InstallGenerator < Rails::Generators::Base
     source_root File.expand_path('../templates', __FILE__)
     class_option :example, type: :boolean, default: true, desc: 'Include example component and test files.'
+    class_option :router, type: :boolean, default: true, desc: 'Add and expose react-router globally.'
+
 
     def generate_layout
+      copy_file '.babelrc', '.babelrc'
       copy_file 'webpack.config.js', 'webpack.config.js'
       copy_file 'webpack/dev.config.js', 'webpack/dev.config.js'
       copy_file 'webpack/production.config.js', 'webpack/production.config.js'

data/lib/generators/react_webpack_rails/templates/.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 1
+}

data/lib/generators/react_webpack_rails/templates/karma.conf.js

@@ -6,7 +6,9 @@ module.exports = function (config) {
     singleRun: true,
     frameworks: ['mocha', 'sinon'],
     files: ['webpack/tests.config.js'],
-    preprocessors: {'webpack/tests.config.js': ['webpack', 'sourcemap']},
+    preprocessors: {
+      'webpack/tests.config.js': ['webpack', 'sourcemap']
+    },
     reporters: ['dots'],
     webpack: {
       module: {

data/lib/generators/react_webpack_rails/templates/package.json.erb

@@ -1,26 +1,28 @@
 {
   "name": "<%="#{Rails.application.class.parent_name}"%>",
   "devDependencies": {
-    "babel-eslint": "^4.1.1",
-    "eslint": "^0.24.1",
-    "eslint-plugin-react": "^3.3.1",
-    "expect": "^1.9.0",
-    "karma": "^0.13.9",
-    "karma-chrome-launcher": "^0.2.0",
+    "babel-eslint": "^4.1.3",
+    "eslint": "^1.7.3",
+    "eslint-plugin-react": "^3.6.3",
+    "expect": "^1.12.2",
+    "karma": "^0.13.13",
+    "karma-chrome-launcher": "^0.2.1",
     "karma-mocha": "^0.2.0",
     "karma-sinon": "^1.0.4",
-    "karma-sourcemap-loader": "^0.3.5",
+    "karma-sourcemap-loader": "^0.3.6",
     "karma-webpack": "^1.7.0",
     "webpack-notifier": "^1.2.1"
   },
   "dependencies": {
-    "babel-core": "^5.8.19",
+    "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "extract-text-webpack-plugin": "^0.8.2",
-    "node-sass": "^3.2.0",
-    "react": "^0.13.3",
+    "node-sass": "^3.3.3",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
+<%= options.router ? '    "react-router": "1.0.0-rc3",' : ''%>
     "react-tools": "*",
-    "sass-loader": "^2.0.1",
+    "sass-loader": "^3.0.0",
     "webpack": "^1.12.1"
   },
   "scripts": {

data/lib/generators/react_webpack_rails/templates/react/index.js.erb

@@ -1,11 +1,12 @@
-window.React = require('react');
+import React from 'react';
+import ReactDOM from 'react-dom';
+window.React = React;
+window.ReactDOM = ReactDOM;
 <% if options.example %>
 import HelloWorld from './components/hello-world';
-
-registerComponent('hello-world', HelloWorld);
+registerComponent('HelloWorld', HelloWorld);
 <% else %>
 // example usage:
 // import HelloWorld from './components/hello-world';
-
-// registerComponent('hello-world', HelloWorld);
+// registerComponent('HelloWorld', HelloWorld);
 <% end %>

data/lib/generators/react_webpack_rails/templates/webpack/dev.config.js

@@ -2,5 +2,6 @@ const WebpackNotifierPlugin = require('webpack-notifier');
 const config = require('./../webpack.config');
 
 config.plugins.push(new WebpackNotifierPlugin());
+config.devtool = 'eval-source-map';
 
 module.exports = config;

data/lib/react_webpack_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactWebpackRails
-  VERSION = '0.0.3'.freeze
+  VERSION = '0.0.4'.freeze
 end

data/lib/react_webpack_rails/view_helpers.rb

@@ -2,17 +2,20 @@ module ReactWebpackRails
   module ViewHelpers
     # based on https://github.com/reactjs/react-rails/blob/master/lib/react/rails/view_helper.rb
     def react_component(name, props = {}, options = {}, &block)
-      options = { tag: options } if options.is_a?(Symbol)
-
       html_options = options.reverse_merge(data: {})
       html_options[:data].tap do |data|
         data[:react_class] = name
         data[:react_props] = (props.is_a?(String) ? props : props.to_json)
+        data[:react_router] = options.delete(:react_router)
       end
       html_tag = html_options[:tag] || :div
       html_options.except!(:tag)
 
       content_tag(html_tag, '', html_options, &block)
     end
+
+    def react_router(name)
+      react_component(name, {}, react_router: true)
+    end
   end
 end

data/react_webpack_rails.gemspec

@@ -25,4 +25,6 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency 'bundler', '~> 1.10'
   spec.add_development_dependency 'rake', '~> 10.0'
   spec.add_development_dependency 'rspec', '~> 3.3'
+
+  spec.add_dependency 'rails', '>= 3.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_webpack_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Rafał Gawlik
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-09-06 00:00:00.000000000 Z
+date: 2015-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -53,6 +53,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.2'
 description: ''
 email:
 - gawlikraf@gmail.com
@@ -72,8 +86,11 @@ files:
 - bin/console
 - bin/setup
 - docs/README.md
+- docs/api.md
+- docs/deployment.md
 - lib/assets/javascripts/react_integration.js.erb
 - lib/generators/react_webpack_rails/install_generator.rb
+- lib/generators/react_webpack_rails/templates/.babelrc
 - lib/generators/react_webpack_rails/templates/karma.conf.js
 - lib/generators/react_webpack_rails/templates/package.json.erb
 - lib/generators/react_webpack_rails/templates/react/components/hello-world-test.jsx
@@ -114,3 +131,4 @@ signing_key:
 specification_version: 4
 summary: React and Rails integration done with webpack
 test_files: []
+has_rdoc: