lib/assets/javascripts/react_ujs.js in react-rails-1.11.0 vs lib/assets/javascripts/react_ujs.js in react-rails-2.0.0

- old
+ new

@@ -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 + } +} + + +/***/ }) +/******/ ]); +}); \ No newline at end of file