react_ujs - npm Package Compare versions

Comparing version 1.0.0 to 2.0.1

dist/react_ujs.js

@@ -120,2 +120,12 @@ (function webpackUniversalModuleDefinition(root, factory) {
 module.exports = function(ujs) {
+  console.log(ujs.handleEvent)
+  if (ujs.handleEvent) {
+    // We're calling this a second time -- remove previous handlers
+    turbolinksClassicEvents.teardown(ujs)
+    turbolinksEvents.teardown(ujs);
+    turbolinksClassicDeprecatedEvents.teardown(ujs);
+    pjaxEvents.teardown(ujs);
+    nativeEvents.teardown(ujs);
+  }
+
   if (ujs.jQuery) {
@@ -125,6 +135,19 @@ ujs.handleEvent = function(eventName, callback) {
     };
-  } else {
+    ujs.removeEvent = function(eventName, callback) {
+      ujs.jQuery(document).off(eventName, callback);
+    }
+  } else if ('addEventListener' in window) {
     ujs.handleEvent = function(eventName, callback) {
       document.addEventListener(eventName, callback);
     };
+    ujs.removeEvent = function(eventName, callback) {
+      document.removeEventListener(eventName, callback);
+    };
+  } else {
+    ujs.handleEvent = function(eventName, callback) {
+      window.attachEvent(eventName, callback);
+    };
+    ujs.removeEvent = function(eventName, callback) {
+      window.detachEvent(eventName, callback);
+    };
   }
@@ -256,4 +279,7 @@
 
-  useContext: function(req) {
-    this.getConstructor = constructorFromRequireContextWithGlobalFallback(req)
+  // Given a Webpack `require.context`,
+  // try finding components with `require`,
+  // then falling back to global lookup.
+  useContext: function(requireContext) {
+    this.getConstructor = constructorFromRequireContextWithGlobalFallback(requireContext)
   },
@@ -304,7 +330,32 @@
   },
+
+  // Check the global context for installed libraries
+  // and figure out which library to hook up to (pjax, Turbolinks, jQuery)
+  // This is called on load, but you can call it again if needed
+  // (It will unmount itself)
+  detectEvents: function() {
+    detectEvents(this)
+  },
 }
 
+// These stable references are so that handlers can be added and removed:
+ReactRailsUJS.handleMount = function(e) {
+  var target = undefined;
+  if (e && e.target) {
+    target = e.target;
+  }
+  ReactRailsUJS.mountComponents(target);
+}
+ReactRailsUJS.handleUnmount = function(e) {
+  var target = undefined;
+  if (e && e.target) {
+    target = e.target;
+  }
+  ReactRailsUJS.unmountComponents(target);
+}
+
+
 if (typeof window !== "undefined") {
   // Only setup events for browser (not server-rendering)
-  detectEvents(ReactRailsUJS)
+  ReactRailsUJS.detectEvents()
 }
@@ -331,9 +382,15 @@
       // Use jQuery if it's present:
-      ujs.jQuery(function() { ujs.mountComponents() });
+      ujs.handleEvent("ready", ujs.handleMount);
     } else if ('addEventListener' in window) {
-      document.addEventListener('DOMContentLoaded', function() { ujs.mountComponents() });
+      ujs.handleEvent('DOMContentLoaded', ujs.handleMount);
     } else {
       // add support to IE8 without jQuery
-      window.attachEvent('onload', function() { ujs.mountComponents() });
+      ujs.handleEvent('onload', ujs.handleMount);
     }
+  },
+
+  teardown: function(ujs) {
+    ujs.removeEvent("ready", ujs.handleMount);
+    ujs.removeEvent('DOMContentLoaded', ujs.handleMount);
+    ujs.removeEvent('onload', ujs.handleMount);
   }
@@ -350,6 +407,12 @@ }
   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) });
-  }
+    ujs.handleEvent('ready', ujs.handleMount);
+    ujs.handleEvent('pjax:end', ujs.handleMount);
+    ujs.handleEvent('pjax:beforeReplace', ujs.handleUnmount);
+  },
+
+  teardown: function(ujs) {
+    ujs.removeEvent('ready', ujs.handleMount);
+    ujs.removeEvent('pjax:end', ujs.handleMount);
+    ujs.removeEvent('pjax:beforeReplace', ujs.handleUnmount);
+  },
 }
@@ -365,6 +428,12 @@
   setup: function(ujs) {
-    ujs.handleEvent('DOMContentLoaded', function() { ujs.mountComponents() })
-    ujs.handleEvent('turbolinks:render', function() { ujs.mountComponents() })
-    ujs.handleEvent('turbolinks:before-render', function() { ujs.unmountComponents() })
+    ujs.handleEvent('DOMContentLoaded', ujs.handleMount)
+    ujs.handleEvent('turbolinks:render', ujs.handleMount)
+    ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount)
   },
+
+  teardown: function(ujs) {
+    ujs.removeEvent('DOMContentLoaded', ujs.handleMount)
+    ujs.removeEvent('turbolinks:render', ujs.handleMount)
+    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount)
+  },
 }
@@ -381,4 +450,8 @@
   setup: function(ujs) {
-    ujs.handleEvent(Turbolinks.EVENTS.CHANGE, function() { ujs.mountComponents() });
-    ujs.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, function() { ujs.unmountComponents() });
+    ujs.handleEvent(Turbolinks.EVENTS.CHANGE, ujs.handleMount);
+    ujs.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, ujs.handleUnmount);
+  },
+  teardown: function(ujs) {
+    ujs.removeEvent(Turbolinks.EVENTS.CHANGE, ujs.handleMount);
+    ujs.removeEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, ujs.handleUnmount);
   }
@@ -399,4 +472,8 @@ }
     Turbolinks.pagesCached(0)
-    ujs.handleEvent('page:change', function() { ujs.mountComponents() });
-    ujs.handleEvent('page:receive', function() { ujs.unmountComponents() });
+    ujs.handleEvent('page:change', ujs.handleMount);
+    ujs.handleEvent('page:receive', ujs.handleUnmount);
+  },
+  teardown: function(ujs) {
+    ujs.removeEvent('page:change', ujs.handleMount);
+    ujs.removeEvent('page:receive', ujs.handleUnmount);
   }
@@ -403,0 +480,0 @@ }

index.js

@@ -108,7 +108,32 @@ var React = require("react")
   },
+
+  // Check the global context for installed libraries
+  // and figure out which library to hook up to (pjax, Turbolinks, jQuery)
+  // This is called on load, but you can call it again if needed
+  // (It will unmount itself)
+  detectEvents: function() {
+    detectEvents(this)
+  },
 }
 
+// These stable references are so that handlers can be added and removed:
+ReactRailsUJS.handleMount = function(e) {
+  var target = undefined;
+  if (e && e.target) {
+    target = e.target;
+  }
+  ReactRailsUJS.mountComponents(target);
+}
+ReactRailsUJS.handleUnmount = function(e) {
+  var target = undefined;
+  if (e && e.target) {
+    target = e.target;
+  }
+  ReactRailsUJS.unmountComponents(target);
+}
+
+
 if (typeof window !== "undefined") {
   // Only setup events for browser (not server-rendering)
-  detectEvents(ReactRailsUJS)
+  ReactRailsUJS.detectEvents()
 }
@@ -115,0 +140,0 @@

package.json

 {
   "name": "react_ujs",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Rails UJS for the react-rails gem",
@@ -5,0 +5,0 @@ "main": "index.js",

src/events/detect.js

@@ -10,2 +10,12 @@ var nativeEvents = require("./native")
 module.exports = function(ujs) {
+  console.log(ujs.handleEvent)
+  if (ujs.handleEvent) {
+    // We're calling this a second time -- remove previous handlers
+    turbolinksClassicEvents.teardown(ujs)
+    turbolinksEvents.teardown(ujs);
+    turbolinksClassicDeprecatedEvents.teardown(ujs);
+    pjaxEvents.teardown(ujs);
+    nativeEvents.teardown(ujs);
+  }
+
   if (ujs.jQuery) {
@@ -15,6 +25,19 @@ ujs.handleEvent = function(eventName, callback) {
     };
-  } else {
+    ujs.removeEvent = function(eventName, callback) {
+      ujs.jQuery(document).off(eventName, callback);
+    }
+  } else if ('addEventListener' in window) {
     ujs.handleEvent = function(eventName, callback) {
       document.addEventListener(eventName, callback);
     };
+    ujs.removeEvent = function(eventName, callback) {
+      document.removeEventListener(eventName, callback);
+    };
+  } else {
+    ujs.handleEvent = function(eventName, callback) {
+      window.attachEvent(eventName, callback);
+    };
+    ujs.removeEvent = function(eventName, callback) {
+      window.detachEvent(eventName, callback);
+    };
   }
@@ -21,0 +44,0 @@

src/events/native.js

@@ -7,10 +7,16 @@ module.exports = {
       // Use jQuery if it's present:
-      ujs.jQuery(function() { ujs.mountComponents() });
+      ujs.handleEvent("ready", ujs.handleMount);
     } else if ('addEventListener' in window) {
-      document.addEventListener('DOMContentLoaded', function() { ujs.mountComponents() });
+      ujs.handleEvent('DOMContentLoaded', ujs.handleMount);
     } else {
       // add support to IE8 without jQuery
-      window.attachEvent('onload', function() { ujs.mountComponents() });
+      ujs.handleEvent('onload', ujs.handleMount);
     }
+  },
+
+  teardown: function(ujs) {
+    ujs.removeEvent("ready", ujs.handleMount);
+    ujs.removeEvent('DOMContentLoaded', ujs.handleMount);
+    ujs.removeEvent('onload', ujs.handleMount);
   }
 }

src/events/pjax.js

 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) });
-  }
+    ujs.handleEvent('ready', ujs.handleMount);
+    ujs.handleEvent('pjax:end', ujs.handleMount);
+    ujs.handleEvent('pjax:beforeReplace', ujs.handleUnmount);
+  },
+
+  teardown: function(ujs) {
+    ujs.removeEvent('ready', ujs.handleMount);
+    ujs.removeEvent('pjax:end', ujs.handleMount);
+    ujs.removeEvent('pjax:beforeReplace', ujs.handleUnmount);
+  },
 }

src/events/turbolinks.js

 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() })
+    ujs.handleEvent('DOMContentLoaded', ujs.handleMount)
+    ujs.handleEvent('turbolinks:render', ujs.handleMount)
+    ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount)
   },
+
+  teardown: function(ujs) {
+    ujs.removeEvent('DOMContentLoaded', ujs.handleMount)
+    ujs.removeEvent('turbolinks:render', ujs.handleMount)
+    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount)
+  },
 }

src/events/turbolinksClassic.js

@@ -5,5 +5,9 @@ module.exports = {
   setup: function(ujs) {
-    ujs.handleEvent(Turbolinks.EVENTS.CHANGE, function() { ujs.mountComponents() });
-    ujs.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, function() { ujs.unmountComponents() });
+    ujs.handleEvent(Turbolinks.EVENTS.CHANGE, ujs.handleMount);
+    ujs.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, ujs.handleUnmount);
+  },
+  teardown: function(ujs) {
+    ujs.removeEvent(Turbolinks.EVENTS.CHANGE, ujs.handleMount);
+    ujs.removeEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, ujs.handleUnmount);
   }
 }

src/events/turbolinksClassicDeprecated.js

@@ -8,5 +8,9 @@ module.exports = {
     Turbolinks.pagesCached(0)
-    ujs.handleEvent('page:change', function() { ujs.mountComponents() });
-    ujs.handleEvent('page:receive', function() { ujs.unmountComponents() });
+    ujs.handleEvent('page:change', ujs.handleMount);
+    ujs.handleEvent('page:receive', ujs.handleUnmount);
+  },
+  teardown: function(ujs) {
+    ujs.removeEvent('page:change', ujs.handleMount);
+    ujs.removeEvent('page:receive', ujs.handleUnmount);
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

87376

increased by5.28%

Lines of code

782

increased by21.24%

No dependency changes