feat(ujs) rename loadContext -> useContext, add global fallback

Author: rmosolgo

README.md

@@ -65,16 +65,16 @@ The component name tells `react-rails` where to load the component. For example:
 
 This way, you can access top-level, default, or named exports.
 
-The `require.context` inserted into `packs/application.js` is used to load components. If you want to load components from a different directory, override it by calling `ReactRailsUJS.loadContext`:
+The `require.context` inserted into `packs/application.js` is used to load components. If you want to load components from a different directory, override it by calling `ReactRailsUJS.useContext`:
 
 ```js
 var myCustomContext = require.context("custom_components", true)
 var ReactRailsUJS = require("react_ujs")
 // use `custom_components/` for <%= react_component(...) %> calls
-ReactRailsUJS.loadContext(myCustomContext)
+ReactRailsUJS.useContext(myCustomContext)
 ```
 
-Alternatively, you can bypass `ReactRailsUJS.loadContext` altogether and use the global namespace approach described in [Use with Asset Pipeline](#use-with-asset-pipeline)
+Alternatively, you can bypass `ReactRailsUJS.useContext` altogether and use the global namespace approach described in [Use with Asset Pipeline](#use-with-asset-pipeline)
 
 ## Use with Asset Pipeline
 

lib/generators/react/install_generator.rb

@@ -99,7 +99,7 @@ def setup_react_sprockets
 // Support component names relative to this directory:
 var componentRequireContext = require.context("components", true)
 var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.loadContext(componentRequireContext)
+ReactRailsUJS.useContext(componentRequireContext)
 JS
 
       def setup_react_webpacker

lib/generators/templates/server_rendering_pack.js

@@ -2,4 +2,4 @@
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
 var componentRequireContext = require.context("components", true)
 var ReactRailsUJS = require("react_ujs")
-ReactRailsUJS.loadContext(componentRequireContext)
+ReactRailsUJS.useContext(componentRequireContext)

react_ujs/index.js

@@ -4,7 +4,7 @@ var ReactDOMServer = require("react-dom/server")
 
 var detectEvents = require("./src/events/detect")
 var constructorFromGlobal = require("./src/getConstructor/fromGlobal")
-var constructorFromRequireContext = require("./src/getConstructor/fromRequireContext")
+var constructorFromRequireContextWithGlobalFallback = require("./src/getConstructor/fromRequireContextWithGlobalFallback")
 
 var ReactRailsUJS = {
   // This attribute holds the name of component which should be mounted
@@ -55,8 +55,8 @@ var ReactRailsUJS = {
   // the default is ReactRailsUJS.ComponentGlobal
   getConstructor: constructorFromGlobal,
 
-  loadContext: function(req) {
-    this.getConstructor = constructorFromRequireContext(req)
+  useContext: function(req) {
+    this.getConstructor = constructorFromRequireContextWithGlobalFallback(req)
   },
 
   // Render `componentName` with `props` to a string,

react_ujs/src/getConstructor/fromRequireContextWithGlobalFallback.js

@@ -0,0 +1,20 @@
+// Make a function which:
+// - First tries to require the name
+// - Then falls back to global lookup
+var fromGlobal = require("./fromGlobal")
+var fromRequireContext = require("./fromRequireContext")
+
+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
+  }
+}

test/dummy/app/javascript/packs/application.js

@@ -1,3 +1,8 @@
 var ctx = require.context("components", true)
 var ReactRailsUJS = require("../../../../../react_ujs/index")
-ReactRailsUJS.loadContext(ctx)
+ReactRailsUJS.useContext(ctx)
+var React = require("react")
+
+window.GlobalComponent = function(props) {
+  return React.createElement("h1", null, "Global Component")
+}

test/dummy/app/javascript/packs/server_rendering.js

@@ -2,4 +2,4 @@
 // It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
 var componentRequireContext = require.context("components", true)
 var ReactRailsUJS = require("../../../../../react_ujs/index")
-ReactRailsUJS.loadContext(componentRequireContext)
+ReactRailsUJS.useContext(componentRequireContext)

test/dummy/app/views/pack_components/show.html.erb

@@ -4,3 +4,4 @@
 <%= react_component("export_default_component") %>
 <%= react_component("named_export_component.Component") %>
 <%= react_component("subfolder/exports_component") %>
+<%= react_component("GlobalComponent") %>

test/react/rails/webpacker_test.rb

@@ -18,6 +18,7 @@ class ReactRailsWebpackerTest < ActionDispatch::IntegrationTest
       assert page.has_content?('Export Default')
       assert page.has_content?('Named Export')
       assert page.has_content?('Exports')
+      assert page.has_content?('Global Component')
     end
   end
 end

test/react/server_rendering/webpacker_manifest_container_test.rb

@@ -12,7 +12,7 @@ class WebpackerManifestContainerTest < ActiveSupport::TestCase
       container = React::ServerRendering::WebpackerManifestContainer.new
       js_file = container.find_asset("application.js")
       # Main file:
-      assert_includes js_file, "ReactRailsUJS.loadContext(ctx)"
+      assert_includes js_file, "ReactRailsUJS.useContext(ctx)"
       # Bundled dependencies:
       assert_includes js_file, "ExportDefaultComponent"
     end
@@ -22,7 +22,7 @@ def test_it_loads_from_webpack_dev_server
         container = React::ServerRendering::WebpackerManifestContainer.new
         js_file = container.find_asset("application.js")
         # Main file:
-        assert_includes js_file, "ReactRailsUJS.loadContext(ctx)"
+        assert_includes js_file, "ReactRailsUJS.useContext(ctx)"
         # Bundled dependencies:
         assert_includes js_file, "ExportDefaultComponent"
       end