react_webpack_rails 0.0.5 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c9c67fecd5f3e1b72d2ebc46ec7dfb8d05ab75e4
-  data.tar.gz: 05a6301021820dab1ccb64564b424f0bc3ba69de
+  metadata.gz: 59c32fad93906a7fe5d5459d0bc091dcbdcda2c9
+  data.tar.gz: 9800aa8218f61aa770932a13057a3e97ddebcbae
 SHA512:
-  metadata.gz: 83e44ea83f26566d10ebca037c2c5cfe38fe998c88559ee2bb7345ad401ec0ceb76c51cc3a540fa5f82e801ded6d7023aee3aaae3e62c10a9a0ce1432399b0bd
-  data.tar.gz: 1e413493cca65abd5f4100b20291545a517712a53599345a7a774a0e848604f7f45c68c1b9c45ba2c2ea590db46fec4d7c46ca2bd7c03f96a8d304ef99be4359
+  metadata.gz: 8663103a400c5a87088b770923118b17d10de4f6c65bd7f4c13b4dac24eece013316f61ecb32bb4449adb69b94fc06264a6c195df0e770135da96848d3c59cca
+  data.tar.gz: 5a77f4bc72ff1e6f3c14e46e0b809e38bd64ea0d834df209004aaeb1147b29ba8b7a059328e40762d8b42597b5c5ad7480a6e7f6f02324d68fd1fb7ebc7abcba

data/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

data/.gitignore

@@ -7,4 +7,7 @@
 /pkg/
 /spec/reports/
 /tmp/
+/js/lib/
+
+node_modules
 react_webpack_rails-*.gem

data/.npmignore

@@ -0,0 +1 @@
+js/src/

data/.travis.yml

@@ -1,4 +1,38 @@
+branches:
+  except:
+    - docs
+
 language: ruby
-rvm:
-  - 2.2.2
-before_install: gem install bundler -v 1.10.4
+
+cache:
+  bundler: true
+  directories:
+  - spec/rails3_dummy_app/node_modules
+  - spec/rails4_dummy_app/node_modules
+  - node_modules
+
+matrix:
+  include:
+    - rvm: 2.2.4
+      gemfile: spec/rails4_dummy_app/Gemfile
+      env: TEST_SUITE=rails4
+    - rvm: 2.2.4
+      gemfile: spec/rails3_dummy_app/Gemfile
+      env: TEST_SUITE=rails3
+    - rvm: 2.2.4
+      gemfile: Gemfile
+      env: TEST_SUITE=gem
+    - rvm: 2.2.4
+      env: TEST_SUITE=node
+
+before_script:
+  - npm install -g npm@^2.0
+  - npm install -g webpack@^1.12.1
+  - bundle exec rake setup:$TEST_SUITE
+  - 'export CHROME_BIN=chromium-browser'
+  - "export DISPLAY=:99.0" # Setup display for selenium driver
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start
+
+script:
+  - bundle exec rake test:$TEST_SUITE

data/CHANGELOG.md

@@ -1,3 +1,57 @@
+## 0.1.0 (January 27, 2015)
+* `config.react.camelize_props = true` will camelize `react_component` prop keys
+* Babel updated to version 6
+* `react-webpack-rails` npm package
+  * replacing javascript integrations
+  * removing global javascript helpers (registerComponent, getComponent, createComponent, renderComponent, renderRouter, getRouter)
+
+#### migration 0.0.5 -> 0.1.0
+1. Install react-webpack-rails package.
+
+  ```
+  $ npm install --save react-webpack-rails
+  ```
+
+2. Update gem react_webpack_rails
+
+  ```
+  $ bundle update react_webpack_rails
+  ```
+3. Update babel to version 6.x.
+
+  ```
+  $ npm i --save-dev babel-core@^6.0.0 babel-loader@^6.0.0 babel-preset-stage-1@^6.0.0 babel-preset-react@^6.0.0 babel-preset-es2015@^6.0.0
+  ```  
+
+4. Update babel config file (we use stage-1).
+
+  ```
+  {
+    "presets": ["stage-1", "es2015", "react"]
+  }
+  ```
+
+5. Import and expose RWR in `react/index.js` file
+add on the top:
+
+  ```js
+  // app/react/index.js
+  import RWR from 'react-webpack-rails';
+  window.RWR = RWR;
+  ```
+
+6. Use helpers from RWR instead of globals. Example:
+
+  ```
+  # old
+  registerComponent(...)
+
+  # new
+  RWR.registerComponent(...)
+  ```
+
+7. You can remove exposed `React` and `ReactDOM` from `react/index.js`. No need to expose them globally.
+
 ## 0.0.5 (November 26, 2015)
 * Add Hot Reload support
   * Dependencies:
@@ -40,11 +94,13 @@
   $ 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

data/README.md

@@ -1,4 +1,6 @@
 # ReactWebpackRails
+[![Travis CI](https://travis-ci.org/netguru/react_webpack_rails.svg?branch=master)](https://travis-ci.org/netguru/react_webpack_rails)
+
 #### 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.
 
@@ -52,6 +54,10 @@ 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
 
+Make sure you have [webpack](https://webpack.github.io/docs/installation.html) installed globally:
+
+    $ npm install webpack -g
+
 Generate `react_bundle` for first time:
 
     $ webpack

data/Rakefile

@@ -1,26 +1,62 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
 
-namespace :spec do
+namespace :test do
   desc 'Run all tests'
-  task all: [:gem, :rails3, :rails4] do
+  task all: [:node, :gem, :rails3, :rails4] do
     puts 'Finished all tests, yay!'
   end
 
+  desc 'Run node package tests'
+  task :node do
+    sh %Q(npm test)
+  end
+
   desc 'Run gem tests'
   task :gem do
-    sh %Q(rspec spec/react_webpack_rails_spec.rb)
+    sh %Q(bundle exec rspec spec/react_webpack_rails_spec.rb)
   end
 
   desc 'Run rspec for rails3 application'
   task :rails3 do
-    sh %Q(cd spec/rails3_dummy_app && rspec)
+    Bundler.with_clean_env do
+      sh %Q(cd spec/rails3_dummy_app && npm run build && bundle exec rspec && npm test)
+    end
   end
 
   desc 'Run rspec for rails4 application'
   task :rails4 do
-    sh %Q(cd spec/rails4_dummy_app && rspec)
+    Bundler.with_clean_env do
+      sh %Q(cd spec/rails4_dummy_app && npm run build && bundle exec rspec && npm test)
+    end
   end
 end
 
-task default: 'spec:all'
+task default: 'test:all'
+
+namespace :setup do
+  desc 'Prepare every environment'
+  task all: [:gem, :rails3, :rails4] do
+    puts 'Prepared all, yay!'
+  end
+
+  desc 'Prepare node module dependencies'
+  task :node do
+    sh %Q(npm install)
+  end
+
+  desc 'Prepare gem dependencies'
+  task :gem do
+    sh %Q(bundle install)
+  end
+
+  desc 'Prepare rails3 test app dependencies'
+  task :rails3 do
+    sh %Q(npm install && cd spec/rails3_dummy_app && npm install && bundle install)
+  end
+
+  desc 'Prepare rails4 test app dependencies'
+  task :rails4 do
+    sh %Q(npm install && cd spec/rails4_dummy_app && npm install && bundle install)
+  end
+end

data/bin/setup

@@ -3,5 +3,7 @@ set -euo pipefail
 IFS=$'\n\t'
 
 bundle install
+cd spec/rails3_dummy_app && bundle install && cd ..
+cd rails4_dummy_app && bundle install
 
 # Do any other automated setup that you need to do here

data/docs/README.md

@@ -1,11 +1,12 @@
 # Docs
 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)
+  1. [React](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#React)
+    * [js: registerComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#registercomponent)
+    * [js: createComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getcomponent)
+    * [js: renderComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#rendercomponent)
+    * [js: unmountComponent](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#unmountcomponent)
+    * [ruby: react_component](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_component)
+  1. [ReactRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#ReactRouter)
+    * [js: getRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#getrouter)
+    * [js: renderRouter](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#renderrouter)
+    * [ruby: react_router](https://github.com/netguru/react_webpack_rails/blob/master/docs/api.md#react_router)

data/docs/api.md

@@ -1,152 +1,156 @@
-## UJS helpers
+# RWR api
 
-* ### registerComponent
-  ```js
-  registerComponent(String componentName, class|function component)
-  ```
+## React
 
-  Register component so it's globally accessible.
+  * #### registerComponent [js]
+    ```js
+    registerComponent(String componentName, class|function component)
+    ```
 
-  ##### example:
+    Register component so it's globally accessible.
 
-  ```js
-  import MyComponent from 'my-component';
+    ##### example:
 
-  registerComponent('MyComponentName', MyComponent);
-  ```
+    ```js
+    import MyComponent from 'my-component';
 
-  **note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactComponents` property.
+    registerComponent('MyComponentName', MyComponent);
+    ```
 
-* ### getComponent
+    **note:** Registered components are accessible in globally exposed `RWR.react` under `components` property.
 
-  ```js
-  getComponent(String componentName)
-  ```
+  * #### getComponent [js]
 
-  Shortcut for accessing registered component.
+    ```js
+    getComponent(String componentName)
+    ```
 
-  ##### example:
+    Shortcut for accessing registered component.
 
-  ```js
-  getComponent('MyComponentName');
-  ```
+    ##### example:
 
-* ### createComponent
+    ```js
+    getComponent('MyComponentName');
+    ```
 
-  ```js
-  createComponent(String componentName[, Object props])
-  ```
+  * #### createComponent [js]
 
-  Wrapper over React.createElement that creates ready to render component with props.
+    ```js
+    createComponent(String componentName[, Object props])
+    ```
 
-  ##### example:
+    Wrapper over React.createElement that creates ready to render component with props.
 
-  ```js
-  createComponent('MyComponentName', {foo: 'bar'});
-  ```
+    ##### example:
 
-* ### renderComponent
+    ```js
+    createComponent('MyComponentName', {foo: 'bar'});
+    ```
 
-  ```js
-  renderComponent(String componentName, Object props, DOMElement container)
-  ```
+  * #### renderComponent [js]
 
-  Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
+    ```js
+    renderComponent(String componentName, Object props, DOMElement container)
+    ```
 
-  ##### example:
+    Wrapper over `React.render` and `React.createElement`. Renders component with given props into specified DOM element.
 
-  ```js
-  var element = document.getElementById('my-element');
-  renderComponent('MyComponentName', {foo: 'bar'}, element);
-  ```
+    ##### example:
 
-* ### unmountComponent
+    ```js
+    var element = document.getElementById('my-element');
+    renderComponent('MyComponentName', {foo: 'bar'}, element);
+    ```
 
-  ```js
-  unmountComponent(DOMElement container)
-  ```
+  * #### unmountComponent [js]
 
-  Wrapper over `React.unmountComponentAtNode`. It will unmount component from given DOM node.
+    ```js
+    unmountComponent(DOMElement container)
+    ```
 
-  ##### example:
+    Wrapper over `React.unmountComponentAtNode`. It will unmount component from given DOM node.
 
-  ```js
-  var element = document.getElementById('my-element');
-  unmountComponent(element);
-  ```
+    ##### example:
 
-* ### registerRouter
-  ```js
-  registerRouter(String routerName, class|function component)
-  ```
+    ```js
+    var element = document.getElementById('my-element');
+    unmountComponent(element);
+    ```
 
-  Register router so it's globally accessible.
 
-  ##### example:
+  * ### react_component [ruby]
 
-  ```js
-  import MyComponent from 'my-component';
+    ```ruby
+    react_component(String component_name[, Object props, Object options])
+    ```
 
-  registerComponent('MyComponentName', MyComponent);
-  ```
+    Creates DOM node with props as data attributes in rendered view so RWR can grab it and mount proper component.
+    Options hash contains customization of React component, such as `tag`, `class`.
 
-  **note:** Registered components are accessible in globally exposed `ReactRailsUJS` under `reactRouters` property.
+    ##### example:
 
-* ### getRouter
+    ```ruby
+    <%= react_component('MyComponentName', MySerializer.new(my_data), { tag: :ul, class: 'my-class' }) %>
+    ```
 
-  ```js
-  getRouter(String routerName)
-  ```
+    **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.
 
-  Shortcut for accessing registered router.
 
-  ##### example:
+## ReactRouter
+  * #### registerRouter [js]
+    ```js
+    registerRouter(String routerName, class|function component)
+    ```
 
-  ```js
-  getRouter('MyRouterName');
-  ```
+    Register router so it's globally accessible.
 
-* ### renderRouter
+    ##### example:
 
-  ```js
-  renderRouter(String routerName, Object props, DOMElement container)
-  ```
+    ```js
+    import MyComponent from 'my-component';
 
-  Wrapper ove `Router.run` function with possibility to pass props to handler.
+    registerComponent('MyComponentName', MyComponent);
+    ```
 
-  ##### example:
+    **note:** Registered components are accessible in globally exposed `RWR.reactRouter` under `routers` property.
 
-  ```js
-  var element = document.getElementById('my-element');
-  renderComponent('MyComponentName', {foo: 'bar'}, element);
-  ```
+  * #### getRouter [js]
 
-## Rails helpers
+    ```js
+    getRouter(String routerName)
+    ```
 
-* ### react_component
+    Shortcut for accessing registered router.
 
-  ```ruby
-  react_component(String component_name[, Object props])
-  ```
+    ##### example:
 
-  Creates DOM node with props as data attributes in rendered view so ReactRailsUJS can grab it and mount proper  component.
+    ```js
+    getRouter('MyRouterName');
+    ```
 
-  ##### example:
+  * #### renderRouter [js]
 
-  ```ruby
-  <%= react_component('MyComponentName', MySerializer.new(my_data)) %>
-  ```
+    ```js
+    renderRouter(String routerName, DOMElement container)
+    ```
 
-  **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.
+    Wrapper over `React.render`. Search and render given router into specified DOM element.
 
-* ### react_router
+    ##### example:
 
-  ```ruby
-  react_router(String router_name)
-  ```
+    ```js
+    var element = document.getElementById('my-element');
+    renderRouter('MyRouterName', element);
+    ```
 
-  ##### example:
+  * #### react_router [ruby]
 
-  ```ruby
-  <%= react_router('MyRouterName') %>
-  ```
+    ```ruby
+    react_router(String router_name)
+    ```
+
+    ##### example:
+
+    ```ruby
+    <%= react_router('MyRouterName') %>
+    ```