react-rails 1.11.0 → 2.0.0

data/lib/assets/javascripts/react_ujs.js

@@ -1,7 +1,429 @@
-//= require react_ujs_mount
-//= require react_ujs_turbolinks
-//= require react_ujs_turbolinks_classic
-//= require react_ujs_turbolinks_classic_deprecated
-//= require react_ujs_pjax
-//= require react_ujs_native
-//= require react_ujs_event_setup
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("react"), require("react-dom"), require("react-dom/server"));
+	else if(typeof define === 'function' && define.amd)
+		define(["react", "react-dom", "react-dom/server"], factory);
+	else if(typeof exports === 'object')
+		exports["ReactRailsUJS"] = factory(require("react"), require("react-dom"), require("react-dom/server"));
+	else
+		root["ReactRailsUJS"] = factory(root["React"], root["ReactDOM"], root["ReactDOMServer"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+/******/
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+// Assume className is simple and can be found at top-level (window).
+// Fallback to eval to handle cases like 'My.React.ComponentName'.
+// Also, try to gracefully import Babel 6 style default exports
+var topLevel = typeof window === "undefined" ? this : window;
+
+module.exports = function(className) {
+  var constructor;
+  // Try to access the class globally first
+  constructor = topLevel[className];
+
+  // If that didn't work, try eval
+  if (!constructor) {
+    constructor = eval(className);
+  }
+
+  // Lastly, if there is a default attribute try that
+  if (constructor && constructor['default']) {
+    constructor = constructor['default'];
+  }
+
+  return constructor;
+}
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var nativeEvents = __webpack_require__(7)
+var pjaxEvents = __webpack_require__(8)
+var turbolinksEvents = __webpack_require__(9)
+var turbolinksClassicDeprecatedEvents = __webpack_require__(11)
+var turbolinksClassicEvents = __webpack_require__(10)
+
+// see what things are globally available
+// and setup event handlers to those things
+module.exports = function(ujs) {
+  if (ujs.jQuery) {
+    ujs.handleEvent = function(eventName, callback) {
+      ujs.jQuery(document).on(eventName, callback);
+    };
+  } else {
+    ujs.handleEvent = function(eventName, callback) {
+      document.addEventListener(eventName, callback);
+    };
+  }
+
+  // Detect which kind of events to set up:
+  if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
+    if (typeof Turbolinks.EVENTS !== 'undefined') {
+      // Turbolinks.EVENTS is in classic version 2.4.0+
+      turbolinksClassicEvents.setup(ujs)
+    } else if (typeof Turbolinks.controller !== "undefined") {
+      // Turbolinks.controller is in version 5+
+      turbolinksEvents.setup(ujs);
+    } else {
+      turbolinksClassicDeprecatedEvents.setup(ujs);
+    }
+  } else if (typeof $ !== "undefined" && typeof $.pjax === 'function') {
+    pjaxEvents.setup(ujs);
+  } else {
+    nativeEvents.setup(ujs);
+  }
+}
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// Make a function which:
+// - First tries to require the name
+// - Then falls back to global lookup
+var fromGlobal = __webpack_require__(0)
+var fromRequireContext = __webpack_require__(12)
+
+module.exports = function(reqctx) {
+  var fromCtx = fromRequireContext(reqctx)
+  return function(className) {
+    var component;
+    try {
+      // `require` will raise an error if this className isn't found:
+      component = fromCtx(className)
+    } catch (err) {
+      // fallback to global:
+      component = fromGlobal(className)
+    }
+    return component
+  }
+}
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var React = __webpack_require__(3)
+var ReactDOM = __webpack_require__(4)
+var ReactDOMServer = __webpack_require__(5)
+
+var detectEvents = __webpack_require__(1)
+var constructorFromGlobal = __webpack_require__(0)
+var constructorFromRequireContextWithGlobalFallback = __webpack_require__(2)
+
+var ReactRailsUJS = {
+  // This attribute holds the name of component which should be mounted
+  // example: `data-react-class="MyApp.Items.EditForm"`
+  CLASS_NAME_ATTR: 'data-react-class',
+
+  // This attribute holds JSON stringified props for initializing the component
+  // example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
+  PROPS_ATTR: 'data-react-props',
+
+  // If jQuery is detected, save a reference to it for event handlers
+  jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
+
+  // helper method for the mount and unmount methods to find the
+  // `data-react-class` DOM elements
+  findDOMNodes: function(selector) {
+    var classNameAttr = ReactRailsUJS.CLASS_NAME_ATTR
+    // we will use fully qualified paths as we do not bind the callbacks
+    var selector, parent;
+
+    switch (typeof searchSelector) {
+      case 'undefined':
+        selector = '[' + classNameAttr + ']';
+        parent = document;
+        break;
+      case 'object':
+        selector = '[' + classNameAttr + ']';
+        parent = searchSelector;
+        break;
+      case 'string':
+        selector = searchSelector + '[' + classNameAttr + '], ' +
+                   searchSelector + ' [' + classNameAttr + ']';
+        parent = document;
+        break
+      default:
+        break;
+    }
+
+    if (ReactRailsUJS.jQuery) {
+      return ReactRailsUJS.jQuery(selector, parent);
+    } else {
+      return parent.querySelectorAll(selector);
+    }
+  },
+
+  // Get the constructor for a className (returns a React class)
+  // Override this function to lookup classes in a custom way,
+  // the default is ReactRailsUJS.ComponentGlobal
+  getConstructor: constructorFromGlobal,
+
+  useContext: function(req) {
+    this.getConstructor = constructorFromRequireContextWithGlobalFallback(req)
+  },
+
+  // Render `componentName` with `props` to a string,
+  // using the specified `renderFunction` from `react-dom/server`.
+  serverRender: function(renderFunction, componentName, props) {
+    var componentClass = this.getConstructor(componentName)
+    var element = React.createElement(componentClass, props)
+    return ReactDOMServer[renderFunction](element)
+  },
+
+  // Within `searchSelector`, find nodes which should have React components
+  // inside them, and mount them with their props.
+  mountComponents: function(searchSelector) {
+    var ujs = ReactRailsUJS
+    var nodes = ujs.findDOMNodes(searchSelector);
+
+    for (var i = 0; i < nodes.length; ++i) {
+      var node = nodes[i];
+      var className = node.getAttribute(ujs.CLASS_NAME_ATTR);
+      var constructor = ujs.getConstructor(className);
+      var propsJson = node.getAttribute(ujs.PROPS_ATTR);
+      var props = propsJson && JSON.parse(propsJson);
+
+      if (!constructor) {
+        var message = "Cannot find component: '" + className + "'"
+        if (console && console.log) {
+          console.log("%c[react-rails] %c" + message + " for element", "font-weight: bold", "", node)
+        }
+        throw new Error(message + ". Make sure your component is available to render.")
+      } else {
+        ReactDOM.render(React.createElement(constructor, props), node);
+      }
+    }
+  },
+
+  // Within `searchSelector`, find nodes which have React components
+  // inside them, and unmount those components.
+  unmountComponents: function(searchSelector) {
+    var nodes = ReactRailsUJS.findDOMNodes(searchSelector);
+
+    for (var i = 0; i < nodes.length; ++i) {
+      var node = nodes[i];
+      ReactDOM.unmountComponentAtNode(node);
+    }
+  },
+}
+
+if (typeof window !== "undefined") {
+  // Only setup events for browser (not server-rendering)
+  detectEvents(ReactRailsUJS)
+}
+
+// It's a bit of a no-no to populate the global namespace,
+// but we really need it!
+// We need access to this object for server rendering, and
+// we can't do a dynamic `require`, so we'll grab it from here:
+self.ReactRailsUJS = ReactRailsUJS
+
+module.exports = ReactRailsUJS
+
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = {
+  // Attach handlers to browser events to mount
+  // (There are no unmount handlers since the page is destroyed on navigation)
+  setup: function(ujs) {
+    if (ujs.jQuery) {
+      // Use jQuery if it's present:
+      ujs.jQuery(function() { ujs.mountComponents() });
+    } else if ('addEventListener' in window) {
+      document.addEventListener('DOMContentLoaded', function() { ujs.mountComponents() });
+    } else {
+      // add support to IE8 without jQuery
+      window.attachEvent('onload', function() { ujs.mountComponents() });
+    }
+  }
+}
+
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = {
+  // pjax support
+  setup: function(ujs) {
+    ujs.handleEvent('ready', function() { ujs.mountComponents() });
+    ujs.handleEvent('pjax:end', function(e) { ujs.mountComponents(e.target) });
+    ujs.handleEvent('pjax:beforeReplace', function(e) { ujs.unmountComponents(e.target) });
+  }
+}
+
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = {
+  // Turbolinks 5+ got rid of named events (?!)
+  setup: function(ujs) {
+    ujs.handleEvent('DOMContentLoaded', function() { ujs.mountComponents() })
+    ujs.handleEvent('turbolinks:render', function() { ujs.mountComponents() })
+    ujs.handleEvent('turbolinks:before-render', function() { ujs.unmountComponents() })
+  },
+}
+
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = {
+  // Attach handlers to Turbolinks-Classic events
+  // for mounting and unmounting components
+  setup: function(ujs) {
+    ujs.handleEvent(Turbolinks.EVENTS.CHANGE, function() { ujs.mountComponents() });
+    ujs.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, function() { ujs.unmountComponents() });
+  }
+}
+
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = {
+  // Before Turbolinks 2.4.0, Turbolinks didn't
+  // have named events and didn't have a before-unload event.
+  // Also, it didn't work with the Turbolinks cache, see
+  // https://github.com/reactjs/react-rails/issues/87
+  setup: function(ujs) {
+    Turbolinks.pagesCached(0)
+    ujs.handleEvent('page:change', function() { ujs.mountComponents() });
+    ujs.handleEvent('page:receive', function() { ujs.unmountComponents() });
+  }
+}
+
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+// Load React components by requiring them from "components/", for example:
+//
+// - "pages/index" -> `require("components/pages/index")`
+// - "pages/show.Header" -> `require("components/pages/show").Header`
+// - "pages/show.Body.Content" -> `require("components/pages/show").Body.Content`
+//
+module.exports = function(reqctx) {
+  return function(className) {
+    var parts = className.split(".")
+    var filename = parts.shift()
+    var keys = parts
+    // Load the module:
+    var component = reqctx("./" + filename)
+    // Then access each key:
+    keys.forEach(function(k) {
+      component = component[k]
+    })
+    // support `export default`
+    if (component.__esModule) {
+      component = component["default"]
+    }
+    return component
+  }
+}
+
+
+/***/ })
+/******/ ]);
+});

data/lib/generators/react/component_generator.rb

@@ -4,7 +4,7 @@ module React
       source_root File.expand_path '../../templates', __FILE__
       desc <<-DESC.strip_heredoc
       Description:
-          Scaffold a react component into app/assets/javascripts/components.
+          Scaffold a React component into `components/` of your Webpacker source or asset pipeline.
           The generated component will include a basic render function and a PropTypes
           hash to help with development.
 
@@ -90,17 +90,29 @@ module React
       }
 
       def create_component_file
-        extension = case
-                      when options[:es6]
-                        'es6.jsx'
-                      when options[:coffee]
-                        'js.jsx.coffee'
-                      else
-                        'js.jsx'
-                    end
-
-        file_path = File.join('app/assets/javascripts/components', "#{file_name}.#{extension}")
-        template("component.#{extension}", file_path)
+        template_extension = case
+        when options[:es6]
+          'es6.jsx'
+        when options[:coffee]
+          'js.jsx.coffee'
+        else
+          'js.jsx'
+        end
+
+        # Prefer webpacker to sprockets:
+        if defined?(Webpacker)
+          extension = options[:coffee] ? "coffee" : "js"
+          target_dir = Webpacker::Configuration.source_path
+            .join("components")
+            .relative_path_from(::Rails.root)
+            .to_s
+        else
+          extension = template_extension
+          target_dir = 'app/assets/javascripts/components'
+        end
+
+        file_path = File.join(target_dir, "#{file_name}.#{extension}")
+        template("component.#{template_extension}", file_path)
       end
 
       private