react_webpack_rails 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 29f27718bf4f9c516d3de813560b52b5e7164d19
-  data.tar.gz: 1090c7f9014ddacb6e58c5f7a298c6dcce17d2f3
+  metadata.gz: 23e61ad851d49804d84cff1615b14aa4ddec2ba8
+  data.tar.gz: 0adf9b76662d547ae6e2c22de4d117ce129669cd
 SHA512:
-  metadata.gz: de6c1cad348f6ce13aa40898e3e4472aeda9c83169199b21bc6208a5bf2ecf3d084f1191d73b2c0025d5b4bc3687db3447bb7d97eca45ca25c95ddff46f6e797
-  data.tar.gz: da62d8986d8184501c58bdd881b3a688ff81dee2f42d5858521572acb5bf46f6ea3c1fece8e1c43d60dff8896160face39139f8ed6a2f334be8f73d488db521a
+  metadata.gz: 858c4be7c690ebb7784d2caee695bae07984b3d09c428c26775a5640bd205c27c06af4692d694e09fe481876182fecd944e640641e57e74517b08a9a0afd5f14
+  data.tar.gz: 28d0dc73a1bb691ae1062e72d9551811452dc4a48e967f5f79e179b40671da3a600590cccd5e110e47d6430073b6a58c8d06f8172ee38d6927f28d8d0fc6fe3a

data/CHANGELOG.md

@@ -0,0 +1,25 @@
+## (0.0.2)
+* using rails like names
+* simplifying webpack setup
+* making `registerComponent` helper part of ujs,
+
+### migration 0.0.1 -> 0.0.2
+* in `application.js` replace:
+
+  ```js
+  //= require react-integration
+  //= require generated/bundle
+  ```
+
+  with:
+  ```js
+  //= require react_integration
+  //= require react_bundle
+  ```
+
+## (0.0.1) Initial release
+* generators for webpack configuration
+* helpers:
+  * js - `registerComponent` exposing component for rails
+  * rails - `react_component` using component based on https://github.com/reactjs/react-rails/blob/master/lib/react/rails/view_helper.rb
+* integration script based on https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb

data/README.md

@@ -1,8 +1,6 @@
 # ReactWebpackRails
-
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/react_webpack_rails`. To experiment with that code, run `bin/console` for an interactive prompt.
-
-TODO: Delete this and the text above, and describe your gem
+#### Rails - webpack setup with react integration.
+Inspired and partially based on https://github.com/reactjs/react-rails/ this gem provides generators and helpers that makes rails-webpack-react integration easy.
 
 ## Installation
 
@@ -12,7 +10,7 @@ Add this line to your application's Gemfile:
 gem 'react_webpack_rails'
 ```
 
-And then execute:
+Execute:
 
     $ bundle
 
@@ -20,9 +18,45 @@ Or install it yourself as:
 
     $ gem install react_webpack_rails
 
+Then run installation:
+
+    $ rails g react_webpack_rails:install
+
+Generate `react_bundle` for first time:
+
+    $ webpack
+
+And require integration and bundle files in `application.js`
+
+```js
+//= require react_integration
+//= require react_bundle
+```
+
 ## Usage
+1. Register component in index.js
 
-TODO: Write usage instructions here
+```js
+import Component from 'some-component';
+
+registerComponent('customComponentName', Component)
+```
+
+2. Use it in view
+
+```erb
+<%= react_component('customComponentName', { user: User.last })
+```
+
+#### Development
+Run webpack in watch mode so it will react on any file change.
+
+    webpack -w
+
+#### Production
+Run webpack in production mode before compiling assets
+
+    webpack -p
 
 ## Development
 
@@ -32,10 +66,9 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/react_webpack_rails.
+Bug reports and pull requests are welcome on GitHub at https://github.com/netguru/react_webpack_rails.
 
 
 ## License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-

data/lib/assets/javascripts/{react-integration.js.erb → react_integration.js.erb}

@@ -6,19 +6,15 @@
   // jQuery is optional. Use it to support legacy browsers.
   var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
 
-  window.reactComponents = {};
-  window.registerComponent = function (name, component) {
-    window.reactComponents[name] = component;
-  };
-
   // create the  namespace
   window.ReactRailsUJS = {
     CLASS_NAME_ATTR: 'data-react-class',
     PROPS_ATTR: 'data-react-props',
     RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
+    reactComponents: {},
     // helper method for the mount and unmount methods to find the
     // `data-react-class` DOM elements
-    findDOMNodes: function(searchSelector) {
+    _findDOMNodes: function(searchSelector) {
       // we will use fully qualified paths as we do not bind the callbacks
       var selector;
       if (typeof searchSelector === 'undefined') {
@@ -34,8 +30,12 @@
       }
     },
 
+    registerComponent: function (name, component) {
+      window.ReactRailsUJS.reactComponents[name] = component;
+    },
+
     mountComponents: function(searchSelector) {
-      var nodes = window.ReactRailsUJS.findDOMNodes(searchSelector);
+      var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
 
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
@@ -44,7 +44,7 @@
         // 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.reactComponents[className] || eval.call(window, className);
+        var constructor = window.ReactRailsUJS.reactComponents[className] || eval.call(window, className);
         var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
         var props = propsJson && JSON.parse(propsJson);
 
@@ -53,7 +53,7 @@
     },
 
     unmountComponents: function(searchSelector) {
-      var nodes = window.ReactRailsUJS.findDOMNodes(searchSelector);
+      var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
 
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
@@ -63,6 +63,9 @@
     }
   };
 
+  // expose registerComponent globally
+  window.registerComponent = ReactRailsUJS.registerComponent;
+
   // functions not exposed publicly
   function handleTurbolinksEvents () {
     var handleEvent;

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

@@ -2,8 +2,8 @@ module.exports = {
   context: __dirname + '/app/react',
   entry: './index',
   output: {
-    path: __dirname + '/app/assets/javascripts/generated',
-    filename: 'bundle.js'
+    path: __dirname + '/app/assets/javascripts',
+    filename: 'react_bundle.js'
   },
   module: {
     loaders: [

data/lib/react_webpack_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactWebpackRails
-  VERSION = '0.0.1'
+  VERSION = '0.0.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_webpack_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Rafał Gawlik
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-22 00:00:00.000000000 Z
+date: 2015-08-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -64,13 +64,14 @@ files:
 - ".gitignore"
 - ".rspec"
 - ".travis.yml"
+- CHANGELOG.md
 - Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
 - bin/console
 - bin/setup
-- lib/assets/javascripts/react-integration.js.erb
+- lib/assets/javascripts/react_integration.js.erb
 - lib/generators/react_webpack_rails/USAGE
 - lib/generators/react_webpack_rails/install_generator.rb
 - lib/generators/react_webpack_rails/templates/hello-world-test.jsx