v10.1.5 => Resolves #229, #245

Author: TarekRaafat

README.md

@@ -23,7 +23,7 @@
 
 > Simple autocomplete pure vanilla Javascript library. :rocket:  <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a> **v10**
 
-autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with a wide range of projects & systems. <sub><sup>(Made for a better developer experience)</sub></pub>
+autoComplete.js is a simple, pure vanilla Javascript library progressively designed for speed, high versatility, and seamless integration with a wide range of projects & systems. <sub><sup>(Made for a better developer experience)</sub></pub>
 
 ## Features
 
@@ -47,13 +47,13 @@ autoComplete.js is a simple pure vanilla Javascript library that's progressively
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/autoComplete.min.js"></script>
 ```
 
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/css/autoComplete.min.css">
 ```
 #### Package Manager
 

dist/autoComplete.js

@@ -186,22 +186,6 @@
     ctx.input = typeof ctx.selector === "string" ? document.querySelector(ctx.selector) : ctx.selector();
   });
 
-  var preInit = (function (ctx) {
-    var callback = function callback(mutations, observer) {
-      mutations.forEach(function (mutation) {
-        if (ctx.input) {
-          observer.disconnect();
-          ctx.init();
-        }
-      });
-    };
-    var observer = new MutationObserver(callback);
-    observer.observe(document, {
-      childList: true,
-      subtree: true
-    });
-  });
-
   var select$1 = function select(element) {
     return typeof element === "string" ? document.querySelector(element) : element;
   };
@@ -641,16 +625,18 @@
 
   function extend (autoComplete) {
     var prototype = autoComplete.prototype;
-    prototype.preInit = function () {
-      preInit(this);
-    };
     prototype.init = function () {
       init(this);
     };
     prototype.start = function () {
       start(this);
     };
     prototype.unInit = function () {
+      if (this.wrapper) {
+        var parentNode = this.wrapper.parentNode;
+        parentNode.insertBefore(this.input, this.wrapper);
+        parentNode.removeChild(this.wrapper);
+      }
       removeEvents(this);
     };
     prototype.open = function () {
@@ -693,8 +679,7 @@
     };
     configure(this);
     extend.call(this, autoComplete);
-    var run = this.observe ? preInit : init;
-    run(this);
+    init(this);
   }
 
   return autoComplete;

dist/autoComplete.js.gz

@@ -72,7 +72,7 @@
 	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
 	<meta name="theme-color" content="#ffffff">
 	<link rel="stylesheet" type="text/css" media="screen"
-		href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/css/autoComplete.min.css">
+		href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/css/autoComplete.min.css">
 	<!-- <link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css"> -->
 	<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
 	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
@@ -150,7 +150,7 @@ <h4>mode</h4>
 			</div>
 		</footer>
 	</div>
-	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/autoComplete.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/autoComplete.min.js"></script>
 	<!-- <script src="./js/autoComplete.js"></script> -->
 	<script src="./js/index.js"></script>
 </body>

dist/autoComplete.min.js

@@ -186,22 +186,6 @@
     ctx.input = typeof ctx.selector === "string" ? document.querySelector(ctx.selector) : ctx.selector();
   });
 
-  var preInit = (function (ctx) {
-    var callback = function callback(mutations, observer) {
-      mutations.forEach(function (mutation) {
-        if (ctx.input) {
-          observer.disconnect();
-          ctx.init();
-        }
-      });
-    };
-    var observer = new MutationObserver(callback);
-    observer.observe(document, {
-      childList: true,
-      subtree: true
-    });
-  });
-
   var select$1 = function select(element) {
     return typeof element === "string" ? document.querySelector(element) : element;
   };
@@ -641,16 +625,18 @@
 
   function extend (autoComplete) {
     var prototype = autoComplete.prototype;
-    prototype.preInit = function () {
-      preInit(this);
-    };
     prototype.init = function () {
       init(this);
     };
     prototype.start = function () {
       start(this);
     };
     prototype.unInit = function () {
+      if (this.wrapper) {
+        var parentNode = this.wrapper.parentNode;
+        parentNode.insertBefore(this.input, this.wrapper);
+        parentNode.removeChild(this.wrapper);
+      }
       removeEvents(this);
     };
     prototype.open = function () {
@@ -693,8 +679,7 @@
     };
     configure(this);
     extend.call(this, autoComplete);
-    var run = this.observe ? preInit : init;
-    run(this);
+    init(this);
   }
 
   return autoComplete;

dist/autoComplete.min.js.gz

@@ -158,7 +158,7 @@
         src="//platform-api.sharethis.com/js/sharethis.js#property=5c213660c276020011d38212&product=inline-share-buttons"
         async="async"></script>
     <link rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/css/autoComplete.min.css">
+        href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/css/autoComplete.min.css">
 </head>
 
 <body>
@@ -209,7 +209,7 @@
             mustache: {
                 data: ["../package.json", {
                     minVersion: "10.1",
-                    version: "10.1.4"
+                    version: "10.1.5"
                 }]
             }
         }
@@ -224,7 +224,7 @@
     <script src="https://cdn.jsdelivr.net/npm/docsify-example-panels"></script>
     <script src="//cdn.jsdelivr.net/npm/codeblock-iframe@latest/dist/index.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-codeblock-iframe@latest/dist/index.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.4/dist/autoComplete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/autoComplete.min.js"></script>
 </body>
 
 </html>

docs/demo/index.html

@@ -32,8 +32,7 @@
 
 ## What it is? <!-- {docsify-ignore} -->
 
-autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed,
-high versatility and seamless integration with a wide range of projects & systems.
+autoComplete.js is a simple, pure vanilla Javascript library progressively designed for speed, high versatility, and seamless integration with a wide range of projects & systems. <sub><sup>(Made for a better developer experience)</sub></pub>
 
 ## Features <!-- {docsify-ignore} -->
 

docs/demo/js/autoComplete.js

@@ -35,8 +35,12 @@ For more information on semantic versioning, please visit <http://semver.org/>.
 
 ***
 
-### v10.1.4 ✨
-- 🔧 Fixed: Unresolved dependencies when building a svelte app (Thanks 👍 @sunshineplan) #243
+### v10.1.5 ✨
+- 🧹 Removed: `preInit` stage (Thanks 👍 @folknor) #229
+- 🔧 Fixed: `unInit` to remove the `wrapper` element (Thanks 👍 @deniseismo) #245
+
+### v10.1.4
+- 🔧 Fixed: Unresolved dependencies when building a Svelte app (Thanks 👍 @sunshineplan) #243
 
 ### v10.1.3
 - 🔧 Fixed: `mark` tag's invalid "classes" to "class" attribute (Thanks 👍 @50kudos) #242

docs/demo/js/autoComplete.js.gz

@@ -1,5 +1,5 @@
 {
-  "version": "10.1.4",
+  "version": "10.1.5",
   "name": "@tarekraafat/autocomplete.js",
   "description": "Simple autocomplete pure vanilla Javascript library.",
   "keywords": [

docs/demo/js/autoComplete.min.js

@@ -1,6 +1,5 @@
 import configure from "./services/configure";
 import extend from "./services/extend";
-import preInit from "./services/preInit";
 import init from "./services/init";
 
 /**
@@ -66,8 +65,6 @@ export default function autoComplete(config) {
   configure(this);
   // Stage API methods
   extend.call(this, autoComplete);
-  // Set to run "preInit" if "observer" enabled else "init"
-  const run = this.observe ? preInit : init;
-  // Run autoComplete.js
-  run(this);
+  // Initialize autoComplete.js
+  init(this);
 }

docs/demo/js/autoComplete.min.js.gz

@@ -273,7 +273,7 @@ const navigate = function (event, ctx) {
     case 27:
       event.preventDefault();
 
-      // Clear "inputField" value
+      // Clear "input" value
       ctx.input.value = "";
 
       close(ctx);

docs/index.html

@@ -5,6 +5,6 @@
  * @param {Object} ctx - autoComplete.js context
  */
 export default (name, ctx) => {
-  // Dispatch event on "inputField"
+  // Dispatch event on "input"
   ctx.input.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: ctx.feedback, cancelable: true }));
 };

docs/index.md

@@ -44,7 +44,7 @@ const create = (tag, options) => {
 };
 
 /**
- * Get the "inputField" query value
+ * Get the "input" query value
  *
  * @param {Element} field - input or textarea element
  *
@@ -59,7 +59,7 @@ const getQuery = (field) =>
  * @param {String} value - user's raw search query value
  * @param {Object} diacritics - formatting on/off
  *
- * @returns {String} - Raw "inputField" value as a string
+ * @returns {String} - Raw "input" value as a string
  */
 const format = (value, diacritics) => {
   value = value.toString().toLowerCase();

docs/release-notes.md

@@ -1,4 +1,3 @@
-import preInit from "./preInit";
 import init from "./init";
 import start from "./start";
 import { removeEvents } from "../controllers/eventController";
@@ -13,11 +12,6 @@ import search from "../controllers/searchController";
 export default function (autoComplete) {
   const { prototype } = autoComplete;
 
-  // Pre-Initialize autoComplete.js engine
-  prototype.preInit = function () {
-    preInit(this);
-  };
-
   // Initialize autoComplete.js engine
   prototype.init = function () {
     init(this);
@@ -30,6 +24,13 @@ export default function (autoComplete) {
 
   // Un-Initialize autoComplete.js engine
   prototype.unInit = function () {
+    if (this.wrapper) {
+      const parentNode = this.wrapper.parentNode;
+
+      parentNode.insertBefore(this.input, this.wrapper);
+      parentNode.removeChild(this.wrapper);
+    }
+
     removeEvents(this);
   };
 

package.json

@@ -18,7 +18,7 @@ export default async function (ctx) {
     "aria-expanded": false,
   };
 
-  // Set "inputField" attributes
+  // Set "input" attributes
   create(input, {
     "aria-controls": resultsList.id,
     "aria-autocomplete": "both",

src/autoComplete.js

@@ -10,7 +10,7 @@ import { render, close } from "../controllers/listController";
 export default async function (ctx) {
   const { input, query, trigger, threshold, resultsList } = ctx;
 
-  // Get "inputField" query value
+  // Get "input" query value
   let queryVal = getQuery(input);
   queryVal = query ? query(queryVal) : queryVal;
   // Get trigger decision