Feature: clear child nodes before mounting components

Author: ishuah

preact_ujs/dist/preact_ujs.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("preact"));
+		module.exports = factory();
 	else if(typeof define === 'function' && define.amd)
-		define(["preact"], factory);
+		define([], factory);
 	else if(typeof exports === 'object')
-		exports["PreactRailsUJS"] = factory(require("preact"));
+		exports["PreactRailsUJS"] = factory();
 	else
-		root["PreactRailsUJS"] = factory(root["Preact"]);
-})(window, function(__WEBPACK_EXTERNAL_MODULE_preact__) {
+		root["PreactRailsUJS"] = factory();
+})(window, function() {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -103,7 +103,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-eval("var preact = __webpack_require__(/*! preact */ \"preact\")\nvar constructorFromGlobal = __webpack_require__(/*! ./src/getConstructor/fromGlobal */ \"./src/getConstructor/fromGlobal.js\")\nvar constructorFromRequireContextWithGlobalFallback = __webpack_require__(/*! ./src/getConstructor/fromRequireContextWithGlobalFallback */ \"./src/getConstructor/fromRequireContextWithGlobalFallback.js\")\n\nvar PreactRailsUJS = {\n  CLASS_NAME_ATTR: 'data-preact-class',\n  PROPS_ATTR: 'data-preact-props',\n\n  findDOMNodes: function() {\n    return document.querySelectorAll('['+PreactRailsUJS.CLASS_NAME_ATTR+']')\n  },\n\n  getConstructor: constructorFromGlobal,\n\n  useContext: function(requireContext) {\n    this.getConstructor = constructorFromRequireContextWithGlobalFallback(requireContext)\n  },\n\n  mountComponents: function() {\n    console.log('mountcomponent loaded')\n    var nodes = PreactRailsUJS.findDOMNodes()\n    for (var i = 0; i < nodes.length; ++i) {\n      var node = nodes[i]\n      var className = node.getAttribute(PreactRailsUJS.CLASS_NAME_ATTR)\n      var constructor = PreactRailsUJS.getConstructor(className)\n      var propsJson = node.getAttribute(PreactRailsUJS.PROPS_ATTR)\n      var props = propsJson && JSON.parse(propsJson)\n      preact.render(preact.h(constructor, props), node)\n    }\n  },\n\n  handleEvent: function(eventName, callback) {\n    document.addEventListener(eventName, callback);\n  },\n\n  removeEvent: function(eventName, callback) {\n    document.removeEventListener(eventName, callback);\n  }\n\n}\n\nPreactRailsUJS.handleEvent('DOMContentLoaded', PreactRailsUJS.mountComponents)\n\nmodule.exports = PreactRailsUJS\n\n\n//# sourceURL=webpack://PreactRailsUJS/./index.js?");
+eval("//var preact = require(\"preact\")\nvar constructorFromGlobal = __webpack_require__(/*! ./src/getConstructor/fromGlobal */ \"./src/getConstructor/fromGlobal.js\")\nvar constructorFromRequireContextWithGlobalFallback = __webpack_require__(/*! ./src/getConstructor/fromRequireContextWithGlobalFallback */ \"./src/getConstructor/fromRequireContextWithGlobalFallback.js\")\n\nvar PreactRailsUJS = {\n  CLASS_NAME_ATTR: 'data-preact-class',\n  PROPS_ATTR: 'data-preact-props',\n\n  findDOMNodes: function() {\n    return document.querySelectorAll('['+PreactRailsUJS.CLASS_NAME_ATTR+']')\n  },\n\n  getConstructor: constructorFromGlobal,\n\n  useContext: function(requireContext) {\n    this.getConstructor = constructorFromRequireContextWithGlobalFallback(requireContext)\n  },\n\n  mountComponents: function() {\n    console.log('mountcomponent loaded')\n    var nodes = PreactRailsUJS.findDOMNodes()\n    for (var i = 0; i < nodes.length; ++i) {\n      var node = nodes[i]\n      //PreactRailsUJS.clearChildNodes(node)\n      var className = node.getAttribute(PreactRailsUJS.CLASS_NAME_ATTR)\n      var constructor = PreactRailsUJS.getConstructor(className)\n      var propsJson = node.getAttribute(PreactRailsUJS.PROPS_ATTR)\n      var props = propsJson && JSON.parse(propsJson)\n      preact.render(preact.h(constructor, props), node)\n    }\n  },\n\n  clearChildNodes: function(node) {\n    while (node.firstChild) {\n      node.removeChild(node.firstChild);\n    }\n  },\n\n  handleEvent: function(eventName, callback) {\n    document.addEventListener(eventName, callback);\n  },\n\n  removeEvent: function(eventName, callback) {\n    document.removeEventListener(eventName, callback);\n  }\n\n}\n\nPreactRailsUJS.handleEvent('DOMContentLoaded', PreactRailsUJS.mountComponents)\n\nmodule.exports = PreactRailsUJS\n\n\n//# sourceURL=webpack://PreactRailsUJS/./index.js?");
 
 /***/ }),
 
@@ -138,17 +138,6 @@ eval("// Load React components by requiring them from \"components/\", for examp
 
 eval("// Make a function which:\n// - First tries to require the name\n// - Then falls back to global lookup\nvar fromGlobal = __webpack_require__(/*! ./fromGlobal */ \"./src/getConstructor/fromGlobal.js\")\nvar fromRequireContext = __webpack_require__(/*! ./fromRequireContext */ \"./src/getConstructor/fromRequireContext.js\")\n\nmodule.exports = function(reqctx) {\n  var fromCtx = fromRequireContext(reqctx)\n  return function(className) {\n    var component;\n    try {\n      // `require` will raise an error if this className isn't found:\n      component = fromCtx(className)\n    } catch (firstErr) {\n      // fallback to global:\n      try {\n        component = fromGlobal(className)\n      } catch (secondErr) {\n        console.error(firstErr)\n        console.error(secondErr)\n      }\n    }\n    return component\n  }\n}\n\n\n//# sourceURL=webpack://PreactRailsUJS/./src/getConstructor/fromRequireContextWithGlobalFallback.js?");
 
-/***/ }),
-
-/***/ "preact":
-/*!******************************************************************************************!*\
-  !*** external {"root":"Preact","commonjs2":"preact","commonjs":"preact","amd":"preact"} ***!
-  \******************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval("module.exports = __WEBPACK_EXTERNAL_MODULE_preact__;\n\n//# sourceURL=webpack://PreactRailsUJS/external_%7B%22root%22:%22Preact%22,%22commonjs2%22:%22preact%22,%22commonjs%22:%22preact%22,%22amd%22:%22preact%22%7D?");
-
 /***/ })
 
 /******/ });

preact_ujs/index.js

@@ -1,4 +1,4 @@
-var preact = require("preact")
+//var preact = require("preact")
 var constructorFromGlobal = require("./src/getConstructor/fromGlobal")
 var constructorFromRequireContextWithGlobalFallback = require("./src/getConstructor/fromRequireContextWithGlobalFallback")
 
@@ -17,10 +17,10 @@ var PreactRailsUJS = {
   },
 
   mountComponents: function() {
-    console.log('mountcomponent loaded')
     var nodes = PreactRailsUJS.findDOMNodes()
     for (var i = 0; i < nodes.length; ++i) {
       var node = nodes[i]
+      PreactRailsUJS.clearChildNodes(node)
       var className = node.getAttribute(PreactRailsUJS.CLASS_NAME_ATTR)
       var constructor = PreactRailsUJS.getConstructor(className)
       var propsJson = node.getAttribute(PreactRailsUJS.PROPS_ATTR)
@@ -29,6 +29,12 @@ var PreactRailsUJS = {
     }
   },
 
+  clearChildNodes: function(node) {
+    while (node.firstChild) {
+      node.removeChild(node.firstChild);
+    }
+  },
+
   handleEvent: function(eventName, callback) {
     document.addEventListener(eventName, callback);
   },

preact_ujs/package-lock.json

@@ -7,6 +7,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "preact": "^8.4.2",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2"
   }