reactrb 0.8.3 → 0.8.4

data/lib/reactive-ruby/rails/controller_helper.rb

@@ -1,15 +1,15 @@
 require 'action_controller'
 
-module ReactiveRuby
-  module Rails
-    class ActionController::Base
-      def render_component(*args)
-        @component_name = ((args[0].is_a? Hash) || args.empty?) ? params[:action].camelize : args.shift
-        @render_params = args.shift || {}
-        options = args[0] || {}
-        layout = options.key?(:layout) ? options[:layout].to_s : :default
-        render inline: "<%= react_component @component_name, @render_params, { prerender: !params[:no_prerender] } %>", layout: layout
-      end
+module ActionController
+  # adds render_component helper to ActionControllers
+  class Base
+    def render_component(*args)
+      @component_name = (args[0].is_a? Hash) || args.empty? ? params[:action].camelize : args.shift
+      @render_params = args.shift || {}
+      options = args[0] || {}
+      render inline: '<%= react_component @component_name, @render_params, '\
+                     '{ prerender: !params[:no_prerender] } %>',
+             layout: options.key?(:layout) ? options[:layout].to_s : :default
     end
   end
 end

data/lib/reactive-ruby/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '0.8.3'
+  VERSION = '0.8.4'
 end

data/lib/reactrb.rb

@@ -2,26 +2,25 @@
 
 if RUBY_ENGINE == 'opal'
   if `window.React === undefined || window.React.version === undefined`
-    raise [
-      "No React.js Available",
-      "",
-      "React.js must be defined before requiring 'reactrb'",
-      "'reactrb' has been tested with react v13, v14, and v15.",
-      "",
-      "IF USING 'react-rails':",
-      "   add 'require \"react\"' immediately before the 'require \"reactive-ruby\" directive in 'views/components.rb'.",
-      "IF USING WEBPACK:",
-      "   add 'react' to your webpack manifest.",
-      "OTHERWISE TO GET THE LATEST TESTED VERSION",
-      "   add 'require \"react-latest\"' immediately before the require of 'reactrb',",
-      "OR TO USE A SPECIFIC VERSION",
-      "   add 'require \"react-v1x\"' immediately before the require of 'reactrb'."
-    ].join("\n")
+    raise "No React.js Available\n\n"\
+          "React.js must be defined before requiring 'reactrb'\n"\
+          "'reactrb' has been tested with react v13, v14, and v15.\n\n"\
+          "IF USING 'react-rails':\n"\
+          "   add 'require \"react\"' immediately before the 'require \"reactive-ruby\" "\
+              "directive in 'views/components.rb'.\n"\
+          "IF USING WEBPACK:\n"\
+          "   add 'react' to your webpack manifest.\n"\
+          "OTHERWISE TO GET THE LATEST TESTED VERSION\n"\
+          "   add 'require \"react-latest\"' immediately before the require of 'reactrb',\n"\
+          "OR TO USE A SPECIFIC VERSION\n"\
+          "   add 'require \"react-v1x\"' immediately before the require of 'reactrb'."
   end
   require 'react/hash'
   require 'react/top_level'
   require 'react/observable'
   require 'react/component'
+  require 'react/component/dsl_instance_methods'
+  require 'react/component/tags'
   require 'react/component/base'
   require 'react/element'
   require 'react/event'
@@ -36,10 +35,12 @@ if RUBY_ENGINE == 'opal'
 else
   require 'opal'
   require 'opal-browser'
+  # rubocop:disable Lint/HandleExceptions
   begin
     require 'opal-jquery'
   rescue LoadError
   end
+  # rubocop:enable Lint/HandleExceptions
   require 'opal-activesupport'
   require 'reactive-ruby/version'
   require 'reactive-ruby/rails' if defined?(Rails)

data/lib/reactrb/auto-import.rb

@@ -0,0 +1,32 @@
+# rubocop:disable Style/FileName
+# require 'reactrb/auto-import' to automatically
+# import JS libraries and components when they are detected
+if RUBY_ENGINE == 'opal'
+  # modifies const and method_missing so that they will attempt
+  # to auto import native libraries and components using React::NativeLibrary
+  class Object
+    class << self
+      alias _reactrb_original_const_missing const_missing
+      alias _reactrb_original_method_missing method_missing
+
+      def const_missing(const_name)
+        # Opal uses const_missing to initially define things,
+        # so we always call the original, and respond to the exception
+        _reactrb_original_const_missing(const_name)
+      rescue StandardError => e
+        React::NativeLibrary.import_const_from_native(Object, const_name, true) || raise(e)
+      end
+
+      def method_missing(method_name, *args, &block)
+        method = method_name.gsub(/_as_node/, '') # remove once _as_node is deprecated.
+        component_class = React::NativeLibrary.import_const_from_native(self, method, false)
+        _reactrb_original_method_missing(method, *args, &block) unless component_class
+        if method == method_name
+          React::RenderingContext.render(component_class, *args, &block)
+        else # remove once _as_node is deprecated.
+          React::RenderingContext.build_only(component_class, *args, &block)
+        end
+      end
+    end
+  end
+end

data/lib/sources/react-v14.js

@@ -20816,3 +20816,87 @@ module.exports = warning;
 })(function(React) {
   return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 });
+/**
+ * ReactDOM v0.14.8
+ *
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
+;(function(f) {
+  // CommonJS
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = f(require('react'));
+
+  // RequireJS
+  } else if (typeof define === "function" && define.amd) {
+    define(['react'], f);
+
+  // <script>
+  } else {
+    var g;
+    if (typeof window !== "undefined") {
+      g = window;
+    } else if (typeof global !== "undefined") {
+      g = global;
+    } else if (typeof self !== "undefined") {
+      g = self;
+    } else {
+      // works providing we're not in "use strict";
+      // needed for Java 8 Nashorn
+      // see https://github.com/facebook/react/issues/3037
+      g = this;
+    }
+    g.ReactDOM = f(g.React);
+  }
+
+})(function(React) {
+  return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+});
+/**
+ * ReactDOMServer v0.14.8
+ *
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
+;(function(f) {
+  // CommonJS
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = f(require('react'));
+
+  // RequireJS
+  } else if (typeof define === "function" && define.amd) {
+    define(['react'], f);
+
+  // <script>
+  } else {
+    var g;
+    if (typeof window !== "undefined") {
+      g = window;
+    } else if (typeof global !== "undefined") {
+      g = global;
+    } else if (typeof self !== "undefined") {
+      g = self;
+    } else {
+      // works providing we're not in "use strict";
+      // needed for Java 8 Nashorn
+      // see https://github.com/facebook/react/issues/3037
+      g = this;
+    }
+    g.ReactDOMServer = f(g.React);
+  }
+
+})(function(React) {
+  return React.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+});

data/spec/react/component_spec.rb

@@ -616,47 +616,6 @@ describe React::Component do
       expect(React.render_to_static_markup(element)).to eq('<div></div>')
     end
 
-    it 'redefines `p` to make method missing work' do
-      stub_const 'Foo', Class.new
-      Foo.class_eval do
-        include React::Component
-
-        def render
-          p(class_name: 'foo') do
-            p
-            div { 'lorem ipsum' }
-            p(id: '10')
-          end
-        end
-      end
-
-      element = React.create_element(Foo)
-      markup = '<p class="foo"><p></p><div>lorem ipsum</div><p id="10"></p></p>'
-      expect(React.render_to_static_markup(element)).to eq(markup)
-    end
-
-    it 'only overrides `p` in render context' do
-      stub_const 'Foo', Class.new
-      Foo.class_eval do
-        include React::Component
-
-        before_mount do
-          p 'first'
-        end
-
-        after_mount do
-          p 'second'
-        end
-
-        def render
-          div
-        end
-      end
-
-      expect(Kernel).to receive(:p).with('first')
-      expect(Kernel).to receive(:p).with('second')
-      renderToDocument(Foo)
-    end
   end
 
   describe 'isMounted()' do

data/spec/react/dsl_spec.rb

@@ -2,13 +2,66 @@ require 'spec_helper'
 
 if opal?
 
-module TestMod123
-  class Bar < React::Component::Base
+  module TestMod123
+    class Bar < React::Component::Base
+    end
   end
-end
 
 describe 'the React DSL' do
 
+  context "render macro" do
+
+    it "can define the render method with the render macro with a html tag container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render(:div, class: :foo) do
+          "hello"
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div class="foo">hello</div>')
+    end
+
+    it "can define the render method with the render macro without a container" do
+      stub_const 'Foo', Class.new
+      Foo.class_eval do
+        include React::Component
+        render do
+          "hello"
+        end
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello</span>')
+    end
+
+    it "can define the render method with the render macro with a application defined container" do
+      stub_const 'Bar', Class.new(React::Component::Base)
+      Bar.class_eval do
+        param :p1
+        render { "hello #{params.p1}" }
+      end
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render Bar, p1: "fred"
+      end
+
+      expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<span>hello fred</span>')
+    end
+  end
+
+  it "can use the upcase version of builtin tags" do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        DIV { "hello" }
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
+  end
+
   it "will turn the last string in a block into a element" do
     stub_const 'Foo', Class.new
     Foo.class_eval do
@@ -17,7 +70,6 @@ describe 'the React DSL' do
         div { "hello" }
       end
     end
-
     expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>hello</div>')
   end
 
@@ -69,6 +121,38 @@ describe 'the React DSL' do
     expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div><p>hello</p></div>')
   end
 
+  it 'can do a method call on a class name that is not a direct sibling' do
+    stub_const 'Mod', Module.new
+    stub_const 'Mod::NestedMod', Module.new
+    stub_const 'Mod::Comp', Class.new(React::Component::Base)
+    Mod::Comp.class_eval do
+      render { 'Mod::Comp' }
+    end
+    stub_const 'Mod::NestedMod::NestedComp', Class.new(React::Component::Base)
+    Mod::NestedMod::NestedComp.class_eval do
+      render do
+        Comp()
+      end
+    end
+    expect(React.render_to_static_markup(React.create_element(Mod::NestedMod::NestedComp)))
+      .to eq('<span>Mod::Comp</span>')
+  end
+
+  it 'raises a meaningful error if a Constant Name is not actually a component' do
+    stub_const 'Mod', Module.new
+    stub_const 'Mod::NestedMod', Module.new
+    stub_const 'Mod::Comp', Class.new
+    stub_const 'Mod::NestedMod::NestedComp', Class.new(React::Component::Base)
+    Mod::NestedMod::NestedComp.class_eval do
+      backtrace :none
+      render do
+        Comp()
+      end
+    end
+    expect { React.render_to_static_markup(React.create_element(Mod::NestedMod::NestedComp)) }
+      .to raise_error('Comp does not appear to be a react component.')
+  end
+
   it "will treat the component class name as a first class component name" do
     stub_const 'Mod::Bar', Class.new
     Mod::Bar.class_eval do
@@ -141,6 +225,32 @@ describe 'the React DSL' do
     expect(React.render_to_static_markup(React.create_element(Foo))).to eq('<div>Hello&nbsp;&nbsp;Goodby</div>')
   end
 
+  it 'should convert a hash param to hyphenated html attributes if in React::HASH_ATTRIBUTES' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div(data: { foo: :bar }, aria: { foo_bar: :foo })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo)))
+      .to eq('<div data-foo="bar" aria-foo-bar="foo"></div>')
+  end
+
+  it 'should not convert a hash param to hyphenated html attributes if not in React::HASH_ATTRIBUTES' do
+    stub_const 'Foo', Class.new
+    Foo.class_eval do
+      include React::Component
+      def render
+        div(title: { bar: :foo })
+      end
+    end
+
+    expect(React.render_to_static_markup(React.create_element(Foo)))
+      .to eq('<div title="{&quot;bar&quot;=&gt;&quot;foo&quot;}"></div>')
+  end
+
   it "will remove all elements passed as params from the rendering buffer" do
     stub_const 'X2', Class.new
     X2.class_eval do

data/spec/react/native_library_spec.rb

@@ -1,10 +1,298 @@
 require 'spec_helper'
+require 'reactrb/auto-import'
 
 if opal?
-describe React::NativeLibrary do
-  it "will import a React.js library into the Ruby name space"              # class BS < NativeLibrary; imports 'ReactBootstrap'; end
-  it "exclude specific components from a library"                           # exclude "Modal" # can't access BS.Modal
-  it "rename specific components from a library"                            # rename "Modal" => "FooBar"  # BS.FooBar connects to ReactBootstrap.Modal
-  it "can importan multiple libraries into one class"                       
+
+module NativeLibraryTestModule
+  class Component < React::Component::Base
+    param :time_stamp
+    backtrace :none
+    render { NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+
+  class NestedComponent < React::Component::Base
+    param :time_stamp
+    backtrace :none
+    render { NativeLibrary::NativeNestedLibrary::NativeComponent(name: "There - #{params.time_stamp}") }
+  end
+end
+
+describe "React::NativeLibrary" do
+
+  after(:each) do
+    %x{
+      delete window.NativeLibrary;
+      delete window.NativeComponent;
+      delete window.nativeLibrary;
+      delete window.nativeComponent;
+      delete window.NativeObject;
+    }
+    Object.send :remove_const, :NativeLibrary
+    Object.send :remove_const, :NativeComponent
+  end
+
+  it "can use native_react_component? to detect a native React.js component" do
+    %x{
+      window.NativeComponent = React.createClass({
+        displayName: "HelloMessage",
+        render: function render() {
+          return React.createElement("div", null, "Hello ", this.props.name);
+        }
+      })
+    }
+    expect(React::API.native_react_component?(`window.NativeComponent`)).to be_truthy
+    expect(React::API.native_react_component?(`{render: function render() {}}`)).to be_falsy
+    expect(React::API.native_react_component?(`window.DoesntExist`)).to be_falsy
+    expect(React::API.native_react_component?(``)).to be_falsy
+  end
+
+  it "will import a React.js library into the Ruby name space" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::NativeLibrary)
+    Foo.class_eval do
+      imports "NativeLibrary"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+  end
+
+  it "will rename an imported a React.js component" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::NativeLibrary)
+    Foo.class_eval do
+      imports "NativeLibrary"
+      rename "NativeComponent" => "Bar"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo::Bar, name: "There"))).to eq('<div>Hello There</div>')
+  end
+
+  it "will give a reasonable error when failing to import a renamed component" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::NativeLibrary)
+    expect do
+      Foo.class_eval do
+        imports "NativeLibrary"
+        rename "MispelledComponent" => "Bar"
+      end
+    end.to raise_error(/could not import MispelledComponent/)
+  end
+
+  it "will import a single React.js component into the ruby name space" do
+    %x{
+      window.NativeComponent = React.createClass({
+        displayName: "HelloMessage",
+        render: function render() {
+          return React.createElement("div", null, "Hello ", this.props.name);
+        }
+      })
+    }
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      imports "NativeComponent"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+
+  end
+
+  it "will import a name scoped React.js component into the ruby name space" do
+    %x{
+      window.NativeLibrary = {
+        NativeComponent: React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+    }
+    stub_const 'Foo', Class.new(React::Component::Base)
+    Foo.class_eval do
+      imports "NativeLibrary.NativeComponent"
+    end
+    expect(React.render_to_static_markup(
+      React.create_element(Foo, name: "There"))).to eq('<div>Hello There</div>')
+
+  end
+
+  it "will give a meaningful error if the React.js component is invalid" do
+    %x{
+      window.NativeObject = {}
+    }
+    stub_const 'Foo', Class.new(React::Component::Base)
+    expect do
+      Foo.class_eval do
+        imports "NativeObject"
+      end
+    end.to raise_error("Foo cannot import 'NativeObject': does not appear to be a native react component.")
+    expect do
+      Foo.class_eval do
+        imports "window.Baz"
+      end
+    end.to raise_error(/^Foo cannot import \'window\.Baz\'\: (?!does not appear to be a native react component)..*$/)
+  end
+
+  context "automatic importing" do
+
+    it "will automatically import a React.js component when referenced in another component" do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::Component, time_stamp: Time.now))).to match(/<div>Hello There.*<\/div>/)
+    end
+
+    it "will automatically import a React.js component when referenced in another component" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render { NativeComponent(name: "There") }
+      end
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div>Hello There</div>')
+    end
+
+    it 'will automatically import a React.js component when referenced in another component with the _as_node suffix' do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render(:div) do
+          e = React::Element.new(NativeComponent_as_node(name: 'There'))
+          2.times { e.render }
+        end
+      end
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+    end
+
+    it "will automatically import a React.js component in a library when referenced in another component with the _as_node suffix" do
+      stub_const 'Foo', Class.new(React::Component::Base)
+      Foo.class_eval do
+        render(:div) do
+          e = React::Element.new(NativeLibrary::NativeComponent_as_node(name: 'There'))
+          2.times { e.render }
+        end
+      end
+      %x{
+        window.NativeLibrary = {
+          NativeComponent: React.createClass({
+            displayName: "HelloMessage",
+            render: function render() {
+              return React.createElement("div", null, "Hello ", this.props.name);
+            }
+          })
+        }
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(Foo))).to eq('<div><div>Hello There</div><div>Hello There</div></div>')
+    end
+
+    it "will automatically import a React.js component when referenced as a constant" do
+      %x{
+        window.NativeComponent = React.createClass({
+          displayName: "HelloMessage",
+          render: function render() {
+            return React.createElement("div", null, "Hello ", this.props.name);
+          }
+        })
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    end
+
+    it "will automatically import a native library containing a React.js component" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+            NativeComponent: React.createClass({
+              displayName: "HelloMessage",
+              render: function render() {
+                return React.createElement("div", null, "Hello ", this.props.name);
+              }
+            })
+          }
+        }
+      }
+
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))).to match(/<div>Hello There.*<\/div>/)
+    end
+
+    it "the library and components can begin with lower case letters" do
+      %x{
+        window.nativeLibrary = {
+          nativeComponent: React.createClass({
+            displayName: "HelloMessage",
+            render: function render() {
+              return React.createElement("div", null, "Hello ", this.props.name);
+            }
+          })
+        }
+      }
+      expect(React.render_to_static_markup(
+        React.create_element(NativeLibrary::NativeComponent, name: "There"))).to eq('<div>Hello There</div>')
+    end
+
+    it "will produce a sensible error if the component is not in the library" do
+      %x{
+        window.NativeLibrary = {
+          NativeNestedLibrary: {
+          }
+        }
+      }
+      expect do
+        React.render_to_static_markup(React.create_element(NativeLibraryTestModule::NestedComponent, time_stamp: Time.now))
+      end.to raise_error("could not import a react component named: NativeLibrary.NativeNestedLibrary.NativeComponent")
+
+    end
+
+  end
 end
 end