react_webpack_rails 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 23e61ad851d49804d84cff1615b14aa4ddec2ba8
-  data.tar.gz: 0adf9b76662d547ae6e2c22de4d117ce129669cd
+  metadata.gz: e5c7c1e774861da4a8dd6be317a5f624bb1d8f2e
+  data.tar.gz: 5f26add913b827882a39f459ca6546f16b4483e0
 SHA512:
-  metadata.gz: 858c4be7c690ebb7784d2caee695bae07984b3d09c428c26775a5640bd205c27c06af4692d694e09fe481876182fecd944e640641e57e74517b08a9a0afd5f14
-  data.tar.gz: 28d0dc73a1bb691ae1062e72d9551811452dc4a48e967f5f79e179b40671da3a600590cccd5e110e47d6430073b6a58c8d06f8172ee38d6927f28d8d0fc6fe3a
+  metadata.gz: 55934857a674403c7fbf1215877e54ef69bc2e121f7d47ad0bcc9e8dfc03f3bf27c56f243495f13ec6f7d62d791e9348a0a9142430acdc69a3dbc5085608f7bb
+  data.tar.gz: bef5eef2a86dc6bca571ba6ae52b74c25ae69098ce470982b90bdc4b225cc47b2236b60aed1481b1dcad4b6a7ae8493cfdcb3460a1f19d7de57aa3d316efd7ff

data/.gitignore

@@ -7,4 +7,4 @@
 /pkg/
 /spec/reports/
 /tmp/
-react_webpack_rails-0.0.1.gem
+react_webpack_rails-*.gem

data/CHANGELOG.md

@@ -1,10 +1,20 @@
-## (0.0.2)
-* using rails like names
-* simplifying webpack setup
-* making `registerComponent` helper part of ujs,
+## 0.0.3 (September 6, 2015)
+* Reorganize config files.
+* Add UJS helpers:
+  * `getComponent`
+  * `createComponent`
+  * `renderComponent`
+* Add docs.
+* Add various Readme fixes.
+* Bump dependencies.
+
+## 0.0.2 (August 29, 2015)
+* Use rails like names.
+* Simplify webpack setup.
+* Make `registerComponent` helper part of ujs.
 
 ### migration 0.0.1 -> 0.0.2
-* in `application.js` replace:
+* In `application.js` replace:
 
   ```js
   //= require react-integration
@@ -17,9 +27,9 @@
   //= require react_bundle
   ```
 
-## (0.0.1) Initial release
-* generators for webpack configuration
-* helpers:
+## 0.0.1 Initial release (August 25, 2015)
+* Add generators for webpack configuration.
+* Add 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
+  * rails - `react_component` using component based on https://github.com/reactjs/react-rails/blob/master/lib/react/rails/view_helper.rb.
+* Add integration script based on https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb.

data/README.md

@@ -1,6 +1,6 @@
 # ReactWebpackRails
-#### 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.
+#### 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 react-webpack-rails integration easy.
 
 ## Installation
 
@@ -22,6 +22,28 @@ Then run installation:
 
     $ rails g react_webpack_rails:install
 
+This will create following files:
+
+```
+├── app
+│   └── react
+│       ├── components
+│       │   ├── hello-world.jsx
+│       │   └── hello-world-test.jsx
+│       └── index.js
+├── webpack
+│   ├── dev.config.js
+│   ├── production.config.js
+│   └── tests.config.js
+├── karma.conf.js
+├── package.json
+└── webpack.config.js
+```
+
+Establish the node packages (may take a few moments)
+
+    $ npm install    # you may see warnings to consider updating the provided package.json file with license and repository
+
 Generate `react_bundle` for first time:
 
     $ webpack
@@ -34,29 +56,45 @@ And require integration and bundle files in `application.js`
 ```
 
 ## Usage
-1. Register component in index.js
+##### Check [docs](https://github.com/netguru/react_webpack_rails/tree/master/docs) for detailed api description.
+#### Register component in index.js
 
 ```js
-import Component from 'some-component';
-
-registerComponent('customComponentName', Component)
+import Component from './components/some-component';
+registerComponent('customComponentName', Component);
 ```
 
-2. Use it in view
+#### Use it in rails view
 
 ```erb
-<%= react_component('customComponentName', { user: User.last })
+<%= react_component('customComponentName', { user: User.last }) %>
+```
+
+#### Use it in javascript file
+
+```js
+const element = $('#my-element');
+renderComponent('customComponentName', {user_id: 1}, element);
 ```
 
-#### Development
-Run webpack in watch mode so it will react on any file change.
+### Development
+Run webpack in watch mode using script:
+
+    $ npm start
+
+Or manually:
+
+    $ webpack -w --config YOUR_CONFIG
+
+
+### Production
+Run webpack in production mode before compiling assets using script:
 
-    webpack -w
+    $ npm run build
 
-#### Production
-Run webpack in production mode before compiling assets
+or manually:
 
-    webpack -p
+    $ webpack -p --config YOUR_CONFIG
 
 ## Development
 

data/docs/README.md

@@ -0,0 +1,81 @@
+# 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.

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

@@ -34,6 +34,20 @@
       window.ReactRailsUJS.reactComponents[name] = component;
     },
 
+    getComponent: function(name) {
+      return window.ReactRailsUJS.reactComponents[name];
+    },
+
+    createComponent: function (name, props) {
+      var constructor = window.ReactRailsUJS.getComponent(name);
+      return React.createElement(constructor, props);
+    },
+
+    renderComponent: function (name, props, element) {
+      var component = window.ReactRailsUJS.createComponent(name, props);
+      React.render(component, element);
+    },
+
     mountComponents: function(searchSelector) {
       var nodes = window.ReactRailsUJS._findDOMNodes(searchSelector);
 
@@ -44,7 +58,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.ReactRailsUJS.reactComponents[className] || eval.call(window, className);
+        var constructor = window.ReactRailsUJS.reactComponents[className];
         var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
         var props = propsJson && JSON.parse(propsJson);
 
@@ -63,8 +77,11 @@
     }
   };
 
-  // expose registerComponent globally
+  // expose helpers globally
   window.registerComponent = ReactRailsUJS.registerComponent;
+  window.getComponent = ReactRailsUJS.getComponent;
+  window.createComponent = ReactRailsUJS.createComponent;
+  window.renderComponent = ReactRailsUJS.renderComponent;
 
   // functions not exposed publicly
   function handleTurbolinksEvents () {

data/lib/generators/react_webpack_rails/install_generator.rb

@@ -1,13 +1,21 @@
 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.'
 
     def generate_layout
       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'
       copy_file 'karma.conf.js', 'karma.conf.js'
-      copy_file 'tests.webpack.js', 'tests.webpack.js'
-      copy_file 'index.js', 'app/react/index.js'
-      copy_file 'hello-world.jsx', 'app/react/components/hello-world.jsx'
+      copy_file 'webpack/tests.config.js', 'webpack/tests.config.js'
+      template 'react/index.js.erb', 'app/react/index.js'
+      if options.example
+        copy_file 'react/components/hello-world.jsx', 'app/react/components/hello-world.jsx'
+        copy_file 'react/components/hello-world-test.jsx', 'app/react/components/hello-world-test.jsx'
+      else
+        create_file 'app/react/components/.keep'
+      end
       template 'package.json.erb', 'package.json'
     end
 

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

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

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

@@ -1,30 +1,32 @@
 {
   "name": "<%="#{Rails.application.class.parent_name}"%>",
   "devDependencies": {
-    "babel-eslint": "^4.0.5",
+    "babel-eslint": "^4.1.1",
     "eslint": "^0.24.1",
-    "eslint-plugin-react": "^3.2.2",
+    "eslint-plugin-react": "^3.3.1",
     "expect": "^1.9.0",
     "karma": "^0.13.9",
     "karma-chrome-launcher": "^0.2.0",
     "karma-mocha": "^0.2.0",
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.5",
-    "karma-webpack": "^1.7.0"
+    "karma-webpack": "^1.7.0",
+    "webpack-notifier": "^1.2.1"
   },
   "dependencies": {
     "babel-core": "^5.8.19",
     "babel-loader": "^5.3.2",
-    "chart.js": "^1.0.2",
-    "fuse.js": "^1.2.2",
-    "lodash": "^3.10.1",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "node-sass": "^3.2.0",
     "react": "^0.13.3",
-    "react-chartjs": "^0.6.0",
     "react-tools": "*",
-    "webpack": "^1.10.5"
+    "sass-loader": "^2.0.1",
+    "webpack": "^1.12.1"
   },
   "scripts": {
-    "test": "karma start"
+    "test": "karma start",
+    "start": "webpack -w --config webpack/dev.config.js",
+    "build": "webpack -p --config webpack/production.config.js"
   },
   "license": "",
   "engines": {

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

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

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

@@ -1,3 +1,5 @@
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 module.exports = {
   context: __dirname + '/app/react',
   entry: './index',
@@ -9,12 +11,25 @@ module.exports = {
     loaders: [
       {
         test: /\.jsx?$/,
-        exclude: /(node_modules|bower_components$)/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract('css!sass')
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('css!sass')
       }
     ]
   },
   resolve: {
     extensions: ['', '.js', '.jsx', '.js.jsx']
-  }
+  },
+  plugins: [
+    new ExtractTextPlugin('../stylesheets/react_bundle.css', {
+      allChunks: true
+    })
+  ]
 };

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

@@ -0,0 +1,6 @@
+const WebpackNotifierPlugin = require('webpack-notifier');
+const config = require('./../webpack.config');
+
+config.plugins.push(new WebpackNotifierPlugin());
+
+module.exports = config;

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

@@ -0,0 +1,3 @@
+const config = require('./../webpack.config');
+
+module.exports = config;

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

@@ -0,0 +1,2 @@
+var context = require.context('./../app/react', true, /-test\.jsx?$/);
+context.keys().forEach(context);

data/lib/react_webpack_rails/railtie.rb

@@ -2,7 +2,7 @@ require 'react_webpack_rails/view_helpers'
 
 module ReactWebpackRails
   class Railtie < Rails::Railtie
-    initializer "react_webpack_rails.view_helpers" do
+    initializer 'react_webpack_rails.view_helpers' do
       ActionView::Base.send :include, ViewHelpers
     end
   end

data/lib/react_webpack_rails/version.rb

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

data/react_webpack_rails.gemspec

@@ -11,7 +11,7 @@ Gem::Specification.new do |spec|
 
   spec.summary       = 'React and Rails integration done with webpack'
   spec.description   = ''
-  spec.homepage      = ''
+  spec.homepage      = 'https://github.com/netguru/react_webpack_rails'
   spec.license       = 'MIT'
 
   # Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
@@ -24,5 +24,5 @@ Gem::Specification.new do |spec|
 
   spec.add_development_dependency 'bundler', '~> 1.10'
   spec.add_development_dependency 'rake', '~> 10.0'
-  spec.add_development_dependency 'rspec'
+  spec.add_development_dependency 'rspec', '~> 3.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: react_webpack_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Rafał Gawlik
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-29 00:00:00.000000000 Z
+date: 2015-09-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -43,16 +43,16 @@ dependencies:
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.3'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.3'
 description: ''
 email:
 - gawlikraf@gmail.com
@@ -71,23 +71,25 @@ files:
 - Rakefile
 - bin/console
 - bin/setup
+- docs/README.md
 - 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
-- lib/generators/react_webpack_rails/templates/hello-world.jsx
-- lib/generators/react_webpack_rails/templates/index.js
 - lib/generators/react_webpack_rails/templates/karma.conf.js
 - lib/generators/react_webpack_rails/templates/package.json.erb
-- lib/generators/react_webpack_rails/templates/tests.webpack.js
+- lib/generators/react_webpack_rails/templates/react/components/hello-world-test.jsx
+- lib/generators/react_webpack_rails/templates/react/components/hello-world.jsx
+- lib/generators/react_webpack_rails/templates/react/index.js.erb
 - lib/generators/react_webpack_rails/templates/webpack.config.js
+- lib/generators/react_webpack_rails/templates/webpack/dev.config.js
+- lib/generators/react_webpack_rails/templates/webpack/production.config.js
+- lib/generators/react_webpack_rails/templates/webpack/tests.config.js
 - lib/react_webpack_rails.rb
 - lib/react_webpack_rails/engine.rb
 - lib/react_webpack_rails/railtie.rb
 - lib/react_webpack_rails/version.rb
 - lib/react_webpack_rails/view_helpers.rb
 - react_webpack_rails.gemspec
-homepage: ''
+homepage: https://github.com/netguru/react_webpack_rails
 licenses:
 - MIT
 metadata: {}

data/lib/generators/react_webpack_rails/USAGE

@@ -1,8 +0,0 @@
-this will create:
-  webpack.config.js
-  karma.conf.js
-  tests.webpack.js
-  package.json.erb
-  app/react/index.js
-  app/react/components/hello-world.jsx
-  app/react/components/hello-world-test.jsx

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

@@ -1,4 +0,0 @@
-window.React = require('react');
-import HelloWorld from './components/hello-world';
-
-registerComponent('hello-world', HelloWorld);

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

@@ -1,2 +0,0 @@
-var context = require.context('./app/react', true, /-test\.jsx?$/);
-context.keys().forEach(context);