wallace 0.12.0 → 0.12.2

package/lib/component.js

@@ -30,21 +30,12 @@ const ComponentPrototype = {
     - add `i = 0, il = this._l` to variable declarator.
   */
   _u: function (i, il) {
-    let watch,
-      element,
-      parent,
-      displayToggle,
-      detacher,
-      lookupTrue,
-      shouldBeVisible,
-      detachedElements,
-      detachedElement,
-      index,
-      adjustedIndex;
+    let watch, element, displayToggle, detacher, lookupTrue, shouldBeVisible;
 
     const watches = this._w,
       props = this.props,
-      previous = this._p;
+      previous = this._p,
+      elements = this._e;
     /*
       Watches is an array of objects with keys:
         e: the element index (number)
@@ -59,15 +50,10 @@ const ComponentPrototype = {
         s: the number of watches to skip as their node is underneath
         r: reversed
         ?d: detacher 
-
-      The detacher has keys:
-        i: the initial element index
-        s: the stash key of the detacher (plain object)
-        e: the parent element key
       */
     while (i < il) {
       watch = watches[i];
-      element = this._e[watch.e];
+      element = elements[watch.e];
       displayToggle = watch.v;
       shouldBeVisible = true;
       if (displayToggle) {
@@ -75,22 +61,7 @@ const ComponentPrototype = {
         shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
         detacher = displayToggle.d;
         if (detacher) {
-          index = detacher.i;
-          parent = this._e[detacher.e];
-          detachedElements = this._s[detacher.s];
-          detachedElement = detachedElements[index];
-          if (shouldBeVisible && detachedElement) {
-            adjustedIndex =
-              index -
-              Object.keys(detachedElements).filter(function (k) {
-                return k < index && detachedElements[k];
-              }).length;
-            parent.insertBefore(detachedElement, parent.childNodes[adjustedIndex]);
-            detachedElements[index] = null;
-          } else if (!shouldBeVisible && !detachedElement) {
-            parent.removeChild(element);
-            detachedElements[index] = element;
-          }
+          detacher.apply(element, shouldBeVisible, elements, this._s);
         } else {
           element.hidden = !shouldBeVisible;
         }

package/lib/detacher.js

@@ -0,0 +1,28 @@
+/**
+ * Deals with conditionally detaching elements with the if directive.
+ */
+export function Detacher(i, e, s) {
+  this.i = i; // the initial element index.
+  this.e = e; // the stash key of the map of detached nodes.
+  this.s = s; // the parent element key.
+}
+
+Detacher.prototype.apply = function (element, shouldBeVisible, elements, stash) {
+  let adjustedIndex;
+  const index = this.i,
+    parent = elements[this.e],
+    detachedElements = stash[this.s],
+    detachedElement = detachedElements[index];
+  if (shouldBeVisible && detachedElement) {
+    adjustedIndex =
+      index -
+      Object.keys(detachedElements).filter(function (k) {
+        return k < index && detachedElements[k];
+      }).length;
+    parent.insertBefore(detachedElement, parent.childNodes[adjustedIndex]);
+    detachedElements[index] = null;
+  } else if (!shouldBeVisible && !detachedElement) {
+    parent.removeChild(element);
+    detachedElements[index] = element;
+  }
+};

package/lib/index.js

@@ -1,4 +1,5 @@
 export { defineComponent } from "./component";
+export { Detacher } from "./detacher";
 export { extendComponent } from "./extend";
 export { mount } from "./mount";
 export { createComponent } from "./createComponent";
@@ -10,5 +11,5 @@ export { KeyedFnRepeater } from "./repeaters/keyedFn";
 export { SequentialRepeater } from "./repeaters/sequential";
 export { Router, route } from "./router";
 export { getStub } from "./stubs";
-export { findElement, onEvent, stashMisc } from "./utils";
+export { findElement, onEvent } from "./utils";
 export { watch, protect } from "./watch";

package/lib/repeaters/keyed.js

@@ -30,7 +30,8 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
     previousKeys = this.keys,
     previousKeysLength = previousKeys.length,
     newKeys = [],
-    previousKeysSet = new Set(previousKeys);
+    previousKeysSet = new Set(previousKeys),
+    frag = document.createDocumentFragment();
   let item,
     el,
     key,
@@ -43,7 +44,6 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
     i = itemsLength - 1;
 
   // Working backwards saves us having to track moves.
-  const frag = document.createDocumentFragment();
   while (i >= 0) {
     item = items[i];
     key = item[keyName];

package/lib/repeaters/keyedFn.js

@@ -30,7 +30,8 @@ KeyedFnRepeater.prototype.patch = function (e, items, ctrl) {
     previousKeys = this.keys,
     previousKeysLength = previousKeys.length,
     newKeys = [],
-    previousKeysSet = new Set(previousKeys);
+    previousKeysSet = new Set(previousKeys),
+    frag = document.createDocumentFragment();
   let item,
     el,
     key,
@@ -43,7 +44,6 @@ KeyedFnRepeater.prototype.patch = function (e, items, ctrl) {
     i = itemsLength - 1;
 
   // Working backwards saves us having to track moves.
-  const frag = document.createDocumentFragment();
   while (i >= 0) {
     item = items[i];
     key = keyFn(item);

package/lib/types.d.ts

@@ -887,7 +887,7 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: class
    *
-   * Without a qualifer this acts as a normal attribute:
+   * Without a qualifier this acts as a normal attribute:
    *
    * ```
    * <div class={foo} ></div>
@@ -915,10 +915,10 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: ctrl
    *
-   * Specifies ctrl for nested/repeated components.
+   * Specifies alternative `ctrl` for nested or repeated components.
    *
    * ```
-   * <MyComponent.nest ctrl={aController} />
+   * <MyComponent.nest ctrl={altController} />
    * ```
    */
   ctrl?: any;

package/lib/utils.js

@@ -1,20 +1,15 @@
 export function findElement(rootElement, path) {
-  return path.reduce((acc, index) => acc.childNodes[index], rootElement);
+  let node = rootElement;
+  for (let i = 0; i < path.length; i++) {
+    node = node.childNodes[path[i]];
+  }
+  return node;
 }
 
 export function replaceNode(nodeToReplace, newNode) {
   nodeToReplace.parentNode.replaceChild(newNode, nodeToReplace);
 }
 
-/**
- * Stash something on the component. Returns the element.
- * The generated code is expected to keep track of the position.
- */
-export function stashMisc(element, stash, object) {
-  stash.push(object);
-  return element;
-}
-
 export function onEvent(element, eventName, callback) {
   element.addEventListener(eventName, callback);
   return element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "author": "Andrew Buchan",
   "description": "An insanely small, fast, intuitive and extendable front-end framework",
   "homepage": "https://wallace.js.org",
@@ -15,8 +15,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.12.0",
+    "babel-plugin-wallace": "^0.12.2",
     "browserify": "^17.0.1"
   },
-  "gitHead": "bbaf61dd2313ba947efc3f35580626ca6f71fc84"
+  "gitHead": "7625a9b2fb654b6007a7ae97388a8c98995a49fe"
 }