react-on-rails - npm Package Compare versions

Comparing version 3.0.6 to 4.0.0-beta.1

CHANGELOG.md

@@ -7,2 +7,19 @@ # Change Log
 
+## [4.0.0.rc.1] - 2016-03-06
+##### Added
+- Added controller `module ReactOnRails::Controller`. Adds method `redux_store` to setup redux stores in the view.
+- Added view helper `redux_store_hydration_data` to render the props on the application's layout, near the bottom. This allows for the client hydration data to be parsed after the server rendering, which may result in a faster load time.
+- Added helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` to support hot reloading Rails. See the [README.md](./README.md) for more details and see the example application in `spec/dummy`.
+- The checker for outdated bundles before running tests will default to including the directory with `server_bundle_js_file`.
+
+##### Fixed
+- The test runner assets up to date checker might see only the server rendering file, and assume that all assets are up to date.
+- Lots of doc updates!
+- Improved the **spec/dummy** sample app so that it supports CSS modules, hot reloading, etc, and it can server as a template for a new ReactOnRails installation.
+
+##### Breaking Changes
+- Deprecated `redux_store` called from views. Call this method from your controller actions and place `redux_store_hydration_data` on your layout, near the bottom. 
+- Removed the config default of the `config.server_bundle_js_file`. The default is blank, meaning no server rendering.
+
+
 ## [3.0.6] - 2016-03-01
@@ -196,3 +213,4 @@ ##### Fixed
 - Fix several generator related issues.
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/3.0.5...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/3.0.6...master
+[3.0.6]: https://github.com/shakacode/react_on_rails/compare/3.0.5...3.0.6
 [3.0.5]: https://github.com/shakacode/react_on_rails/compare/3.0.4...3.0.5
@@ -199,0 +217,0 @@ [3.0.4]: https://github.com/shakacode/react_on_rails/compare/3.0.3...3.0.4

node_package/lib/ReactOnRails.js

@@ -65,20 +65,2 @@ 'use strict';
   /**
-   * Set options for ReactOnRails, typically before you call ReactOnRails.register
-   * Available Options:
-   * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
-   */
-
-  setOptions: function setOptions(options) {
-    if (options.hasOwnProperty('traceTurbolinks')) {
-      this._options.traceTurbolinks = options.traceTurbolinks;
-      delete options.traceTurbolinks;
-    }
-
-    if ((0, _keys2.default)(options).length > 0) {
-      throw new Error('Invalid options passed to ReactOnRails.options: ', (0, _stringify2.default)(options));
-    }
-  },
-
-
-  /**
    * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
@@ -88,2 +70,3 @@ * find you components for rendering.
    */
+
   register: function register(components) {
@@ -106,12 +89,34 @@ _ComponentRegistry2.default.register(components);
   /**
-   * Allows retrieval of the store by name. This store will be hydrated by any
-   * Rails form props.
+   * Allows retrieval of the store by name. This store will be hydrated by any Rails form props.
+   * Pass optional param throwIfMissing = false if you want to use this call to get back null if the
+   * store with name is not registered.
    * @param name
+   * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
+   *        there is no store with the given name.
    * @returns Redux Store, possibly hydrated
    */
   getStore: function getStore(name) {
-    return _StoreRegistry2.default.getStore(name);
+    var throwIfMissing = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+
+    return _StoreRegistry2.default.getStore(name, throwIfMissing);
   },
 
 
+  /**
+   * Set options for ReactOnRails, typically before you call ReactOnRails.register
+   * Available Options:
+   * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
+   */
+  setOptions: function setOptions(options) {
+    if (options.hasOwnProperty('traceTurbolinks')) {
+      this._options.traceTurbolinks = options.traceTurbolinks;
+      delete options.traceTurbolinks;
+    }
+
+    if ((0, _keys2.default)(options).length > 0) {
+      throw new Error('Invalid options passed to ReactOnRails.options: ', (0, _stringify2.default)(options));
+    }
+  },
+
+
   ////////////////////////////////////////////////////////////////////////////////
@@ -118,0 +123,0 @@ // INTERNALLY USED APIs

node_package/lib/StoreRegistry.js

@@ -52,11 +52,19 @@ 'use strict';
    * @param name
-   * @returns store with given name
+   * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
+   *        there is no store with the given name.
+   * @returns Redux Store, possibly hydrated
    */
   getStore: function getStore(name) {
+    var throwIfMissing = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+
     if (_stores.has(name)) {
       return _stores.get(name);
     } else {
-      var storeKeys = (0, _from2.default)(_stores.keys()).join(', ');
-      console.log('storeKeys', storeKeys);
-      throw new Error('Could not find hydrated store with name \'' + name + '\'. Hydrated store names include [' + storeKeys + '].');
+      if (throwIfMissing) {
+        var storeKeys = (0, _from2.default)(_stores.keys()).join(', ');
+        console.log('storeKeys', storeKeys);
+        throw new Error('Could not find hydrated store with name \'' + name + '\'. ' + ('Hydrated store names include [' + storeKeys + '].'));
+      } else {
+        return;
+      }
     }
@@ -76,3 +84,3 @@ },
       var storeKeys = (0, _from2.default)(_storeGenerators.keys()).join(', ');
-      throw new Error('Could not find store registered with name \'' + name + '\'. Registered store names include [ ' + storeKeys + ' ]. Maybe you forgot to register the store?');
+      throw new Error('Could not find store registered with name \'' + name + '\'. Registered store ' + ('names include [ ' + storeKeys + ' ]. Maybe you forgot to register the store?'));
     }
@@ -79,0 +87,0 @@ },

package.json

 {
   "name": "react-on-rails",
-  "version": "3.0.6",
+  "version": "4.0.0-beta.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
@@ -5,0 +5,0 @@ "main": "node_package/lib/ReactOnRails.js",

README.md

@@ -78,3 +78,4 @@ [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails)  [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
     - [Globally Exposing Your React Components](#globally-exposing-your-react-components)
-    - [Rails View Helpers In-Depth](#rails-view-helpers-in-depth)
+    - [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
+    - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
     - [Redux](#redux)
@@ -224,3 +225,3 @@ - [React-Router](#react-router)
 
-### Rails View Helpers In-Depth
+## ReactOnRails View Helpers API
 Once the bundled files have been generated in your `app/assets/javascripts/generated` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
@@ -230,3 +231,3 @@
 
-#### react_component
+### react_component
 `react_component(component_name, options = {})`
@@ -244,3 +245,6 @@
 
-#### redux_store
+### redux_store
+#### Controller Extension
+Include the module ReactOnRails::Controller in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
+
 `redux_store(store_name, props = {})`
@@ -253,6 +257,19 @@
 
-#### Generator Functions
+For an example, see [spec/dummy/app/controllers/pages_controller.rb](spec/dummy/app/controllers/pages_controller.rb).
+
+#### View Helper
+`redux_store_hydration_data`
+
+Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](spec/dummy/app/views/layouts/application.html.erb).
+
+#### Redux Store Notes
+Note, you don't need to separately initialize your redux store. However, it's recommended for the two following use cases:
+
+1. You want to have multiple components that access the same store.
+2. You want to place the props to hydrate the client side stores at the very end of your HTML, so the browser can render all earlier HTML first. This is particularly useful if your props will be large.
+
+### Generator Functions
 Why would you create a function that returns a React compnent? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
 
-#### server_render_js
+### server_render_js
 `server_render_js(js_expression, options = {})`
@@ -265,4 +282,89 @@
 
+## ReactOnRails JavaScript API
+The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRails.js) file. Here's a quick summary. No guarantees that this won't be outdated!
+
+```js
+  /**
+   * Main entry point to using the react-on-rails npm package. This is how Rails will be able to
+   * find you components for rendering.
+   * @param components (key is component name, value is component)
+   */
+  register(components)
+
+  /**
+   * Allows registration of store generators to be used by multiple react components on one Rails
+   * view. store generators are functions that take one arg, props, and return a store. Note that
+   * the setStore API is different in tha it's the actual store hydrated with props.
+   * @param stores (key is store name, value is the store generator)
+   */
+  registerStore(stores)
+
+  /**
+   * Allows retrieval of the store by name. This store will be hydrated by any Rails form props. 
+   * Pass optional param throwIfMissing = false if you want to use this call to get back null if the
+   * store with name is not registered.
+   * @param name
+   * @param throwIfMissing Defaults to true. Set to false to have this call return undefined if 
+   *        there is no store with the given name.
+   * @returns Redux Store, possibly hydrated
+   */
+  getStore(name, throwIfMissing = true )
+
+  /**
+   * Set options for ReactOnRails, typically before you call ReactOnRails.register
+   * Available Options:
+   * `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
+   */
+  setOptions(options)
+```
+
+## Hot Reloading View Helpers
+The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
+
+The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array.
+
+static vs. hot is picked based on whether ENV["REACT_ON_RAILS_ENV"] == "HOT"
+
+```erb
+ <%= env_stylesheet_link_tag(static: 'application_static',
+                             hot: 'application_non_webpack',
+                             media: 'all',
+                             'data-turbolinks-track' => true)  %>
+
+ <!-- These do not use turbolinks, so no data-turbolinks-track -->
+ <!-- This is to load the hot assets. -->
+ <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
+                                      'http://localhost:3500/app-bundle.js']) %>
+
+ <!-- These do use turbolinks -->
+ <%= env_javascript_include_tag(static: 'application_static',
+                                hot: 'application_non_webpack',
+                                'data-turbolinks-track' => true) %>
+```
+                                
+See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb)
+
+**env_javascript_include_tag(args = {})**
+
+Helper to set CSS assets depending on if we want static or "hot", which means from the Webpack dev server.
+
+In this example, application_non_webpack is simply a CSS asset pipeline file which includes styles not placed in the webpack build.
+
+We don't need styles from the webpack build, as those will come via the JavaScript include tags.
+
+The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
+these params are optional, and support either a single value, or an array.
+
+```erb
+ <%= env_stylesheet_link_tag(static: 'application_static',
+                             hot: 'application_non_webpack',
+                             media: 'all',
+                             'data-turbolinks-track' => true)  %>
+```
+
+**env_stylesheet_link_tag(args = {})**
+
+
 ## Generator
-The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` means that `skip-bootstrap` is off.
+The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off.
 
@@ -389,3 +491,3 @@ Run `rails generate react_on_rails:install --help` for descriptions of all available options:
 ##### JavaScript Linters
-JavaScript linters are **enabled by default**, but can be disabled by passing the `--skip-js-linters` flag (alias `j`) , and those that run in Node have been add to `client/package.json` under `devDependencies`.
+JavaScript linters are **enabled by default**, but can be disabled by passing the `--skip-js-linters` flag (alias `j`) , and those that run in Node have been added to `client/package.json` under `devDependencies`.
 
@@ -392,0 +494,0 @@ ##### Ruby Linters

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87000

increased by9.44%

Lines of code

682

increased by1.64%

Number of lines in readme file

602

increased by20.4%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes