react_on_rails 1.2.2 → 2.0.0.beta.1

data/Rakefile

@@ -1,5 +0,0 @@
-# Rake will automatically load any *.rake files inside of the "rakelib" folder
-# See rakelib/
-
-desc "Run all tests and linting"
-task default: ["run_rspec", "docker:lint"]

data/app/assets/javascripts/react_on_rails.js

@@ -1,241 +0,0 @@
-(function() {
-  this.ReactOnRails = {};
-  var turbolinksInstalled = (typeof Turbolinks !== 'undefined');
-
-  ReactOnRails.serverRenderReactComponent = function(options) {
-    var componentName = options.componentName;
-    var domId = options.domId;
-    var props = options.props;
-    var trace = options.trace;
-    var generatorFunction = options.generatorFunction;
-    var location = options.location;
-    var htmlResult = '';
-    var consoleReplay = '';
-    var hasErrors = false;
-
-    try {
-      var reactElementOrRouterResult = createReactElementOrRouterResult(componentName, props,
-        domId, trace, generatorFunction, location);
-      if (isRouterResult(reactElementOrRouterResult)) {
-
-        // We let the client side handle any redirect
-        // Set hasErrors in case we want to throw a Rails exception
-        hasErrors = !!reactElementOrRouterResult.routeError;
-        if (hasErrors) {
-          console.error('React Router ERROR: ' +
-            JSON.stringify(reactElementOrRouterResult.routeError));
-        } else {
-          if (trace) {
-            redirectLocation = reactElementOrRouterResult.redirectLocation;
-            redirectPath = redirectLocation.pathname + redirectLocation.search;
-            console.log('ROUTER REDIRECT: ' + componentName + ' to dom node with id: ' + domId +
-              ', redirect to ' + redirectPath);
-          }
-        }
-      } else {
-        htmlResult = provideServerReact().renderToString(reactElementOrRouterResult);
-      }
-    }
-    catch (e) {
-      hasErrors = true;
-      htmlResult = ReactOnRails.handleError({
-        e: e,
-        componentName: componentName,
-        serverSide: true,
-      });
-    }
-
-    consoleReplayScript = ReactOnRails.buildConsoleReplay();
-
-    return JSON.stringify({
-      html: htmlResult,
-      consoleReplayScript: consoleReplayScript,
-      hasErrors: hasErrors,
-    });
-  };
-
-  // Passing either componentName or jsCode
-  ReactOnRails.handleError = function(options) {
-    var e = options.e;
-    var componentName = options.componentName;
-    var jsCode = options.jsCode;
-    var serverSide = options.serverSide;
-
-    var lineOne =
-      'ERROR: You specified the option generator_function (could be in your defaults) to be\n';
-    var lastLine =
-      'A generator function takes a single arg of props and returns a ReactElement.';
-
-    console.error('Exception in rendering!');
-
-    var msg = '';
-    if (componentName) {
-      var shouldBeGeneratorError = lineOne +
-        'false, but the React component \'' + componentName + '\' seems to be a generator function.\n' +
-        lastLine;
-      var reMatchShouldBeGeneratorError = /Can't add property context, object is not extensible/;
-      if (reMatchShouldBeGeneratorError.test(e.message)) {
-        msg += shouldBeGeneratorError + '\n\n';
-        console.error(shouldBeGeneratorError);
-      }
-
-      var shouldBeGeneratorError = lineOne +
-        'true, but the React component \'' + componentName + '\' is not a generator function.\n' +
-        lastLine;
-      var reMatchShouldNotBeGeneratorError = /Cannot call a class as a function/;
-      if (reMatchShouldNotBeGeneratorError.test(e.message)) {
-        msg += shouldBeGeneratorError + '\n\n';
-        console.error(shouldBeGeneratorError);
-      }
-    }
-
-    if (jsCode) {
-      console.error('JS code was: ' + jsCode);
-    }
-
-    if (e.fileName) {
-      console.error('location: ' + e.fileName + ':' + e.lineNumber);
-    }
-
-    console.error('message: ' + e.message);
-    console.error('stack: ' + e.stack);
-    if (serverSide) {
-      msg += 'Exception in rendering!\n' +
-        (e.fileName ? '\nlocation: ' + e.fileName + ':' + e.lineNumber : '') +
-        '\nMessage: ' + e.message + '\n\n' + e.stack;
-      var reactElement = React.createElement('pre', null, msg);
-      return provideServerReact().renderToString(reactElement);
-    }
-  };
-
-  ReactOnRails.wrapInScriptTags = function(scriptBody) {
-    if (!scriptBody) {
-      return '';
-    }
-
-    return '\n<script>' + scriptBody + '\n</script>';
-  };
-
-  ReactOnRails.buildConsoleReplay = function() {
-    var consoleReplay = '';
-
-    var history = console.history;
-    if (history && history.length > 0) {
-      history.forEach(function(msg) {
-        consoleReplay += '\nconsole.' + msg.level + '.apply(console, ' +
-          JSON.stringify(msg.arguments) + ');';
-      });
-    }
-
-    return ReactOnRails.wrapInScriptTags(consoleReplay);
-  };
-
-  function forEachComponent(fn) {
-    var els = document.getElementsByClassName('js-react-on-rails-component');
-    for (var i = 0; i < els.length; i++) {
-      fn(els[i]);
-    };
-  }
-
-  function reactOnRailsPageLoaded() {
-    forEachComponent(render);
-  }
-
-  function reactOnRailsPageUnloaded() {
-    forEachComponent(unmount);
-  }
-
-  function unmount(el) {
-    var domId = el.getAttribute('data-dom-id');
-    var domNode = document.getElementById(domId);
-    provideClientReact().unmountComponentAtNode(domNode);
-  }
-
-  function render(el) {
-    var componentName = el.getAttribute('data-component-name');
-    var domId = el.getAttribute('data-dom-id');
-    var props = JSON.parse(el.getAttribute('data-props'));
-    var trace = JSON.parse(el.getAttribute('data-trace'));
-    var generatorFunction = JSON.parse(el.getAttribute('data-generator-function'));
-    var expectTurboLinks = JSON.parse(el.getAttribute('data-expect-turbo-links'));
-
-    if (!turbolinksInstalled && expectTurboLinks) {
-      console.warn('WARNING: NO TurboLinks detected in JS, but it is in your Gemfile');
-    }
-
-    try {
-      var domNode = document.getElementById(domId);
-      if (domNode) {
-        var reactElementOrRouterResult = createReactElementOrRouterResult(componentName, props,
-          domId, trace, generatorFunction);
-        if (isRouterResult(reactElementOrRouterResult)) {
-          throw new Error('You returned a server side type of react-router error: ' +
-            JSON.stringify(reactElementOrRouterResult) +
-            '\nYou should return a React.Component always for the client side entry point.');
-        } else {
-          provideClientReact().render(reactElementOrRouterResult, domNode);
-        }
-      }
-    }
-    catch (e) {
-      ReactOnRails.handleError({
-        e: e,
-        componentName: componentName,
-        serverSide: false,
-      });
-    }
-  };
-
-  function createReactElementOrRouterResult(componentName, props, domId, trace, generatorFunction, location) {
-    if (trace) {
-      console.log('RENDERED ' + componentName + ' to dom node with id: ' + domId);
-    }
-
-    if (generatorFunction) {
-      return this[componentName](props, location);
-    } else {
-      return React.createElement(this[componentName], props);
-    }
-  }
-
-  function provideClientReact() {
-    if (typeof ReactDOM === 'undefined') {
-      if (React.version >= '0.14') {
-        console.warn('WARNING: ReactDOM is not configured in webpack.server.rails.config.js file as an entry.\n' +
-                     'See: https://github.com/shakacode/react_on_rails/blob/master/docs/webpack.md for more detailed hints.');
-      }
-
-      return React;
-    }
-
-    return ReactDOM;
-  }
-
-  function provideServerReact() {
-    if (typeof ReactDOMServer === 'undefined') {
-      if (React.version >= '0.14') {
-        console.warn('WARNING: `react-dom/server` is not configured in webpack.server.rails.config.js file as an entry.\n' +
-                     'See: https://github.com/shakacode/react_on_rails/blob/master/docs/webpack.md for more detailed hints.');
-      }
-
-      return React;
-    }
-
-    return ReactDOMServer;
-  }
-
-  function isRouterResult(reactElementOrRouterResult) {
-    return !!(reactElementOrRouterResult.redirectLocation ||
-    reactElementOrRouterResult.error);
-  }
-
-  // Install listeners when running on the client.
-  if (typeof document !== 'undefined') {
-    if (!turbolinksInstalled) {
-      document.addEventListener('DOMContentLoaded', reactOnRailsPageLoaded);
-    } else {
-      document.addEventListener('page:before-unload', reactOnRailsPageUnloaded);
-      document.addEventListener('page:change', reactOnRailsPageLoaded);
-    }
-  }
-}.call(this));

data/app/helpers/react_on_rails_helper.rb

@@ -1,224 +0,0 @@
-# NOTE:
-# For any heredoc JS:
-# 1. The white spacing in this file matters!
-# 2. Keep all #{some_var} fully to the left so that all indentation is done evenly in that var
-require "react_on_rails/prerender_error"
-
-module ReactOnRailsHelper
-  # react_component_name: can be a React component, created using a ES6 class, or
-  #   React.createClass, or a
-  #     `generator function` that returns a React component
-  #       using ES6
-  #          let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
-  #       or using ES5
-  #          var MyReactComponentApp = function(props) { return <YourReactComponent {...props}/>; }
-  #    Exposing the react_component_name is necessary to both a plain ReactComponent as well as
-  #      a generator:
-  #    For client rendering, expose the react_component_name on window:
-  #      window.MyReactComponentApp = MyReactComponentApp;
-  #    For server rendering, export the react_component_name on global:
-  #      global.MyReactComponentApp = MyReactComponentApp;
-  #    See spec/dummy/client/app/startup/serverGlobals.jsx and
-  #      spec/dummy/client/app/startup/ClientApp.jsx for examples of this
-  # props: Ruby Hash or JSON string which contains the properties to pass to the react object
-  #
-  #  options:
-  #    generator_function: <true/false> default is false, set to true if you want to use a
-  #                        generator function rather than a React Component.
-  #    prerender: <true/false> set to false when debugging!
-  #    trace: <true/false> set to true to print additional debugging information in the browser
-  #           default is true for development, off otherwise
-  #    replay_console: <true/false> Default is true. False will disable echoing server rendering
-  #                    logs to browser. While this can make troubleshooting server rendering difficult,
-  #                    so long as you have the default configuration of logging_on_server set to
-  #                    true, you'll still see the errors on the server.
-  #    raise_on_prerender_error: <true/false> Default to false. True will raise exception on server
-  #       if the JS code throws
-  #  Any other options are passed to the content tag, including the id.
-  def react_component(component_name, props = {}, options = {})
-    # Create the JavaScript and HTML to allow either client or server rendering of the
-    # react_component.
-    #
-    # Create the JavaScript setup of the global to initialize the client rendering
-    # (re-hydrate the data). This enables react rendered on the client to see that the
-    # server has already rendered the HTML.
-    # We use this react_component_index in case we have the same component multiple times on the page.
-    react_component_index = next_react_component_index
-    react_component_name = component_name.camelize # Not sure if we should be doing this (JG)
-    if options[:id].nil?
-      dom_id = "#{component_name}-react-component-#{react_component_index}"
-    else
-      dom_id = options[:id]
-    end
-
-    # Setup the page_loaded_js, which is the same regardless of prerendering or not!
-    # The reason is that React is smart about not doing extra work if the server rendering did its job.
-    turbolinks_loaded = Object.const_defined?(:Turbolinks)
-
-    component_specification_tag =
-      content_tag(:div,
-                  "",
-                  class: "js-react-on-rails-component",
-                  style: "display:none",
-                  data: {
-                    component_name: react_component_name,
-                    props: props,
-                    trace: trace(options),
-                    generator_function: generator_function(options),
-                    expect_turbolinks: turbolinks_loaded,
-                    dom_id: dom_id
-                  })
-
-    # Create the HTML rendering part
-    result = server_rendered_react_component_html(options, props, react_component_name, dom_id)
-
-    server_rendered_html = result["html"]
-    console_script = result["consoleReplayScript"]
-
-    content_tag_options = options.except(:generator_function, :prerender, :trace,
-                                         :replay_console, :id, :react_component_name,
-                                         :server_side, :raise_on_prerender_error)
-    content_tag_options[:id] = dom_id
-
-    rendered_output = content_tag(:div,
-                                  server_rendered_html.html_safe,
-                                  content_tag_options)
-
-    # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
-    <<-HTML.html_safe
-#{component_specification_tag}
-#{rendered_output}
-#{replay_console(options) ? console_script : ''}
-    HTML
-  end
-
-  def sanitized_props_string(props)
-    props.is_a?(String) ? json_escape(props) : props.to_json
-  end
-
-  # Helper method to take javascript expression and returns the output from evaluating it.
-  # If you have more than one line that needs to be executed, wrap it in an IIFE.
-  # JS exceptions are caught and console messages are handled properly.
-  def server_render_js(js_expression, options = {})
-    wrapper_js = <<-JS
-(function() {
-  var htmlResult = '';
-  var consoleReplayScript = '';
-  var hasErrors = false;
-
-  try {
-    htmlResult =
-      (function() {
-        return #{js_expression};
-      })();
-  } catch(e) {
-    htmlResult = ReactOnRails.handleError({e: e, componentName: null,
-      jsCode: '#{escape_javascript(js_expression)}', serverSide: true});
-    hasErrors = true;
-  }
-
-  consoleReplayScript = ReactOnRails.buildConsoleReplay();
-
-  return JSON.stringify({
-      html: htmlResult,
-      consoleReplayScript: consoleReplayScript,
-      hasErrors: hasErrors
-  });
-
-})()
-    JS
-
-    result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
-
-    # IMPORTANT: To ensure that Rails doesn't auto-escape HTML tags, use the 'raw' method.
-    html = result["html"]
-    console_log_script = result["consoleLogScript"]
-    raw("#{html}#{replay_console(options) ? console_log_script : ''}")
-  rescue ExecJS::ProgramError => err
-    # rubocop:disable Style/RaiseArgs
-    raise ReactOnRails::PrerenderError.new(component_name: "N/A (server_render_js called)",
-                                           err: err,
-                                           js_code: wrapper_js)
-    # rubocop:enable Style/RaiseArgs
-  end
-
-  private
-
-  def next_react_component_index
-    @react_component_index ||= -1
-    @react_component_index += 1
-  end
-
-  # Returns Array [0]: html, [1]: script to console log
-  # NOTE, these are NOT html_safe!
-  def server_rendered_react_component_html(options, props, react_component_name, dom_id)
-    return { "html" => "", "consoleReplayScript" => "" } unless prerender(options)
-
-    # On server `location` option is added (`location = request.fullpath`)
-    # React Router needs this to match the current route
-
-    # Make sure that we use up-to-date server-bundle
-    ReactOnRails::ServerRenderingPool.reset_pool_if_server_bundle_was_modified
-
-    # Since this code is not inserted on a web page, we don't need to escape.
-    props_string = props.is_a?(String) ? props : props.to_json
-
-    wrapper_js = <<-JS
-(function() {
-  var props = #{props_string};
-  return ReactOnRails.serverRenderReactComponent({
-    componentName: '#{react_component_name}',
-    domId: '#{dom_id}',
-    props: props,
-    trace: #{trace(options)},
-    generatorFunction: #{generator_function(options)},
-    location: '#{request.fullpath}'
-  });
-})()
-    JS
-
-    result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
-
-    if result["hasErrors"] && raise_on_prerender_error(options)
-      # We caught this exception on our backtrace handler
-      # rubocop:disable Style/RaiseArgs
-      fail ReactOnRails::PrerenderError.new(component_name: react_component_name,
-                                            # Sanitize as this might be browser logged
-                                            props: sanitized_props_string(props),
-                                            err: nil,
-                                            js_code: wrapper_js,
-                                            console_messages: result["consoleReplayScript"])
-      # rubocop:enable Style/RaiseArgs
-    end
-    result
-  rescue ExecJS::ProgramError => err
-    # This error came from execJs
-    # rubocop:disable Style/RaiseArgs
-    raise ReactOnRails::PrerenderError.new(component_name: react_component_name,
-                                           # Sanitize as this might be browser logged
-                                           props: sanitized_props_string(props),
-                                           err: err,
-                                           js_code: wrapper_js)
-    # rubocop:enable Style/RaiseArgs
-  end
-
-  def raise_on_prerender_error(options)
-    options.fetch(:raise_on_prerender_error) { ReactOnRails.configuration.raise_on_prerender_error }
-  end
-
-  def trace(options)
-    options.fetch(:trace) { ReactOnRails.configuration.trace }
-  end
-
-  def generator_function(options)
-    options.fetch(:generator_function) { ReactOnRails.configuration.generator_function }
-  end
-
-  def prerender(options)
-    options.fetch(:prerender) { ReactOnRails.configuration.prerender }
-  end
-
-  def replay_console(options)
-    options.fetch(:replay_console) { ReactOnRails.configuration.replay_console }
-  end
-end