Mastodonを読む/Reactが動く仕組み のバックアップ(No.1)

  1
  2
  3

-
|
|

//= require jquery2
//= require jquery_ujs
//= require components

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

-
|
!
 
 
 
 
-
|
|
!
 
-
!
 

//= require_self
//= require react_ujs
 
window.React    = require('react');
window.ReactDOM = require('react-dom');
window.Perf     = require('react-addons-perf');
 
if (!window.Intl) {
  require('intl');
  require('intl/locale-data/jsonp/en.js');
}
 
//= require_tree ./components
 
window.Mastodon = require('./components/containers/mastodon');

  1
  2
  3
  4
  5
  6
  7

-
|
|
|
|
|
|

//= 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

  1
  2
  3
  4
  5
  6
  7
  8
  9

-
-
-
-
|
|
!
!
!

;(function(document, window) {
  window.ReactRailsUJS.Turbolinks = {
    // Turbolinks 5+ got rid of named events (?!)
    setup: function() {
      ReactRailsUJS.handleEvent('turbolinks:load', function() {window.ReactRailsUJS.mountComponents()});
      ReactRailsUJS.handleEvent('turbolinks:before-render', function() {window.ReactRailsUJS.unmountComponents()});
    }
  };
})(document, window);

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29

-
-
!
-
-
|
!
-
-
|
!
!
-
-
-
-
!
-
-
!
-
|
!
-
|
-
|
!
!

;(function(document, window) {
  // jQuery is optional. Use it to support legacy browsers.
  var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
  if ($) {
    ReactRailsUJS.handleEvent = function(eventName, callback) {
      $(document).on(eventName, callback);
    };
  } else {
    ReactRailsUJS.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+
      ReactRailsUJS.TurbolinksClassic.setup();
    } else if (typeof Turbolinks.controller !== "undefined") {
      // Turbolinks.controller is in version 5+
      ReactRailsUJS.Turbolinks.setup();
    } else {
      ReactRailsUJS.TurbolinksClassicDeprecated.setup();
    }
  } else if ($ && typeof $.pjax === 'function') {
    ReactRailsUJS.pjax.setup();
  } else {
    ReactRailsUJS.Native.setup();
  }
})(document, window);

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12

-
-
!
|
-
-
|
!
|
-
|
!

;(function(document, window) {
  // jQuery is optional. Use it to support legacy browsers.
  var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
 
  window.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',

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

-
|
|
-
|
|
|
|
|
|
-
|
|
|
|
-
|
!
!
!

    mountComponents: function(searchSelector) {
      var nodes = window.ReactRailsUJS.findDOMNodes(searchSelector);
 
      for (var i = 0; i < nodes.length; ++i) {
        var node = nodes[i];
        var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
        var constructor = this.getConstructor(className);
        var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
        var props = propsJson && JSON.parse(propsJson);
 
        if (typeof(constructor) === "undefined") {
          var message = "Cannot find component: '" + className + "'"
          if (console && console.log) { console.log("%c[react-rails] %c" + message + " for element", "font-weight: bold", "", node) }
          var error = new Error(message + ". Make sure your component is globally available to render.")
          throw error
        } else {
          ReactDOM.render(React.createElement(constructor, props), node);
        }
      }
    },

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23

-
-
-
|
|
|
!
|
-
!
|
-
-
|
!
|
-
-
|
!
|
|
!

    // Get the constructor for a className
    getConstructor: function(className) {
      // 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 constructor;
 
      // Try to access the class globally first
      constructor = window[className];
 
      // If that didn't work, try eval
      if (!constructor) {
        constructor = eval.call(window, className);
      }
 
      // Lastly, if there is a default attribute try that
      if (constructor && constructor['default']) {
        constructor = constructor['default'];
      }
 
      return constructor;
    },

  1

window.Mastodon = require('./components/containers/mastodon');