wallace 0.14.1 → 0.16.0

package/lib/component.js

@@ -2,21 +2,15 @@ const throwAway = document.createElement("template");
 const NO_LOOKUP = "__";
 
 const ComponentPrototype = {
-  /*
-  COMPILER_MODS:
-    if useController is false:
-     - param `ctrl` is removed.
-     - `this.ctrl = ctrl` is removed.
-  */
-  render: function (props, ctrl) {
+  render: function (props, /* #INCLUDE-IF: allowCtrl */ ctrl) {
     this.props = props;
-    this.ctrl = ctrl;
+    /* #INCLUDE-IF: allowCtrl */ this.ctrl = ctrl;
     this.update();
   },
 
   /*
   COMPILER_MODS:
-    if useFlags is false this is deleted, so `_u` can be renamed to `update`.
+    if allowParts is false this is deleted, so `_u` can be renamed to `update`.
   */
   update: function () {
     this._u(0, this._l);
@@ -24,18 +18,19 @@ const ComponentPrototype = {
 
   /*
   COMPILER_MODS:
-  if useFlags is false:
+  if allowParts is false:
     - gets renamed to `update`
     - parameters are removed
     - add `i = 0, il = this._l` to variable declarator.
   */
   _u: function (i, il) {
-    let watch, element, displayToggle, detacher, lookupTrue, shouldBeVisible;
+    let watch, element, displayToggle, detacher, query, lookupTrue, shouldBeVisible;
 
     const watches = this._w,
       props = this.props,
       previous = this._p,
       elements = this._e,
+      lookups = this._q,
       stash = this._s;
     /*
       Watches is an array of objects with keys:
@@ -58,9 +53,12 @@ const ComponentPrototype = {
       displayToggle = watch.v;
       shouldBeVisible = true;
       if (displayToggle) {
-        lookupTrue = !!this._q[displayToggle.q](props, this);
-        shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
+        query = displayToggle.q;
         detacher = displayToggle.d;
+        if (query !== undefined) {
+          lookupTrue = !!lookups[query](props, this);
+          shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
+        }
         if (detacher) {
           detacher.apply(element, shouldBeVisible, elements, stash);
         } else {
@@ -78,7 +76,7 @@ const ComponentPrototype = {
             callbacks[key](element, props, this, stash);
           } else {
             const oldValue = prev[key],
-              newValue = this._q[key](props, this);
+              newValue = lookups[key](props, this);
             if (oldValue !== newValue) {
               callbacks[key](element, props, this, newValue);
               prev[key] = newValue;
@@ -88,23 +86,23 @@ const ComponentPrototype = {
       }
       i++;
     }
+  },
+  /* #INCLUDE-IF: allowDismount */ dismount: function () {
+    let i = 0,
+      stash = this._s,
+      dismountKeys = this._d;
+    while (i < dismountKeys.length) {
+      stash[dismountKeys[i]].dismount();
+      i++;
+    }
   }
 };
 
-Object.defineProperty(ComponentPrototype, "hidden", {
-  set: function (value) {
-    this.el.hidden = value;
-  }
-});
-
 const ComponentBase = {
-  prototype: ComponentPrototype
+  prototype: ComponentPrototype,
+  /* #INCLUDE-IF: allowStubs */ stub: {}
 };
 
-if (wallaceConfig.flags.allowStubs) {
-  ComponentBase.stubs = {};
-}
-
 /**
  *
  * @param {function} ComponentFunction - The Component definition function to add bits to.
@@ -128,35 +126,45 @@ export const initConstructor = (ComponentFunction, BaseComponentFunction) => {
     });
   } else {
     if (process.env.NODE_ENV !== "production") {
-      Object.defineProperty(ComponentFunction, "name", {
+      Object.defineProperty(ComponentFunction, "methods", {
         set: function (value) {
           throw new Error(
-            'Flag "allowMethods" must be set to true in the config for this feature.'
+            "Flag `allowMethods` must be set to true in the config for this feature."
           );
         },
         get: function () {
           throw new Error(
-            'Flag "allowMethods" must be set to true in the config for this feature.'
+            "Flag `allowMethods` must be set to true in the config for this feature."
           );
         }
       });
     }
   }
 
-  if (wallaceConfig.flags.allowStubs) {
-    ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
-  }
+  /* #INCLUDE-IF: allowStubs */
+  ComponentFunction.stub = Object.assign({}, BaseComponentFunction.stub);
 
   return ComponentFunction;
 };
 
-export const defineComponent = (html, watches, queries, contructor, inheritFrom) => {
+export const defineComponent = (
+  html,
+  watches,
+  queries,
+  contructor,
+  /* #INCLUDE-IF: allowDismount */ dismountKeys,
+  inheritFrom
+) => {
   const ComponentDefinition = initConstructor(contructor, inheritFrom || ComponentBase);
   const proto = ComponentDefinition.prototype;
   throwAway.innerHTML = html;
   proto._w = watches;
   proto._q = queries;
   proto._t = throwAway.content.firstChild;
+  if (wallaceConfig.flags.allowDismount) {
+    ComponentDefinition.pool = proto._c = []; // The shared component pool.
+    proto._d = dismountKeys; // Keys of stashed elements to dismount.
+  }
   if (wallaceConfig.flags.allowBase) {
     proto.base = ComponentPrototype;
   } else {
@@ -164,12 +172,12 @@ export const defineComponent = (html, watches, queries, contructor, inheritFrom)
       Object.defineProperty(proto, "base", {
         set: function (value) {
           throw new Error(
-            'Flag "allowBase" must be set to true in the config for this feature.'
+            "Flag `allowBase` must be set to true in the config for this feature."
           );
         },
         get: function () {
           throw new Error(
-            'Flag "allowBase" must be set to true in the config for this feature.'
+            "Flag `allowBase` must be set to true in the config for this feature."
           );
         }
       });

package/lib/createComponent.js

@@ -1,5 +1,9 @@
-export const createComponent = (ComponentFunction, props, ctrl) => {
+export const createComponent = (
+  ComponentFunction,
+  props,
+  /* #INCLUDE-IF: allowCtrl */ ctrl
+) => {
   const component = new ComponentFunction();
-  component.render(props, ctrl);
+  component.render(props, /* #INCLUDE-IF: allowCtrl */ ctrl);
   return component;
 };

package/lib/detacher.js

@@ -1,25 +1,71 @@
 import { countOffset } from "./offsetter";
 /**
- * Deals with conditionally detaching elements with the if directive.
+ * Deals with conditionally detaching single elements or components.
+ * A Detacher is assigned to a watch, not a component.
  */
-export function Detacher(i, e, s) {
-  this.i = i; // the initial element index.
-  this.e = e; // the parent element key.
-  this.s = s; // the stash key of the map of detached nodes.
+export function Detacher(initialIndex, parentElementKey, offsetTrackerStashKey) {
+  this.i = initialIndex;
+  this.e = parentElementKey;
+  this.s = offsetTrackerStashKey;
 }
 
-Detacher.prototype.apply = function (element, shouldBeVisible, elements, stash) {
+/*
+This is very tricky bit of code.
+
+It is affected by:
+  - initialIndex as passed into Detacher constructor.
+  - offsetTracker's initial value.
+
+It takes either:
+  - an element, which starts attached.
+  - a nester, whose element isn't attached to begin with.
+
+Which affects how the insertion position is calculated.
+
+About the offsetTracker:
+
+The offset tracker is a map which stores a number against the initialIndex of each
+conditionally displayed element, nester or repeater.
+
+That number serves two purposes:
+ 1. For elements & nesters it indicates whether the element needs inserted or removed,
+    if any.
+ 2. For all cases, it is used to calculate the position at which new itsems should be
+    inserted.
+
+Where it gets tricky is that the initial DOM will include elements, but not nester or
+repeater elements.
+
+For elements an offset of 0 means it is attached (and is the default if not set) and -1
+indicates it is detached, and tells elements after it that they need to adjust their
+insertion index by that much.
+
+For nesters it is also 0 or -1, but the default is -1, which is set in the constructor.
+
+For repeaters the offset is the number of items last rendered -1, because 0 items means
+no elements inserted. However the repeaters never go through this function, so we can
+assume the value here is always 0 or -1.
+
+*/
+Detacher.prototype.apply = function (elementOrNester, shouldBeVisible, elements, stash) {
   const index = this.i,
-    parent = elements[this.e],
     offsetTracker = stash[this.s];
   let ownOffset = offsetTracker.get(index) || 0;
-  if (shouldBeVisible && ownOffset === -1) {
-    const adjustedIndex = countOffset(offsetTracker, index);
-    parent.insertBefore(element, parent.childNodes[adjustedIndex]);
-    ownOffset = 0;
-  } else if (!shouldBeVisible && ownOffset === 0) {
-    parent.removeChild(element);
-    ownOffset = -1;
+
+  if ((shouldBeVisible && ownOffset < 0) || (!shouldBeVisible && ownOffset === 0)) {
+    var parent = elements[this.e],
+      element =
+        elementOrNester instanceof HTMLElement
+          ? elementOrNester
+          : elementOrNester.get().el;
+    if (shouldBeVisible) {
+      var adjustedIndex = countOffset(offsetTracker, index);
+      parent.insertBefore(element, parent.childNodes[adjustedIndex]);
+      ownOffset = 0;
+    } else {
+      parent.removeChild(element);
+      ownOffset = -1;
+    }
+    offsetTracker.set(index, ownOffset);
   }
-  offsetTracker.set(index, ownOffset);
 };

package/lib/index.js

@@ -3,7 +3,7 @@ export { Detacher } from "./detacher";
 export { extendComponent } from "./extend";
 export { mount } from "./mount";
 export { createComponent } from "./createComponent";
-export { nestComponent } from "./nestComponent";
+export { Nester } from "./repeaters/nester";
 export { saveRef } from "./refs";
 export { savePart } from "./part";
 export { KeyedRepeater } from "./repeaters/keyed";

package/lib/mount.js

@@ -1,17 +1,21 @@
-import { replaceNode } from "./utils";
-
 /**
  * Creates and mounts a component onto an element.
  *
  * @param {any} elementOrId Either a string representing an id, or an element.
  * @param {callable} componentDefinition The class of Component to create
  * @param {object} props The props to pass to the component (optional)
+ * @param {ctrl} props The ctrl to pass to the component (optional)
  */
-export const mount = (elementOrId, componentDefinition, props, ctrl) => {
+export const mount = (
+  elementOrId,
+  componentDefinition,
+  props,
+  /* #INCLUDE-IF: allowCtrl */ ctrl
+) => {
   const component = new componentDefinition();
-  component.render(props, ctrl);
+  component.render(props, /* #INCLUDE-IF: allowCtrl */ ctrl);
   const element =
     typeof elementOrId === "string" ? document.getElementById(elementOrId) : elementOrId;
-  replaceNode(element, component.el);
+  element.parentNode.replaceChild(component.el, element);
   return component;
 };

package/lib/offsetter.js

@@ -1,8 +1,7 @@
-export function countOffset(offsetTracker, index) {
+export const countOffset = (offsetTracker, index) => {
   let offset = 0;
   for (let [key, value] of offsetTracker.entries()) {
-    if (key >= index) break;
-    offset += value;
+    if (key < index) offset += value;
   }
   return index + offset;
-}
+};

package/lib/part.js

@@ -1,11 +1,11 @@
 function Part(component, start, end) {
-  this._c = component;
-  this._s = start;
-  this._e = end;
+  this.c = component;
+  this.s = start;
+  this.e = end;
 }
 
 Part.prototype.update = function () {
-  this._c._u(this._s, this._e);
+  this.c._u(this.s, this.e);
 };
 
 /**

package/lib/repeaters/keyed.js

@@ -2,114 +2,135 @@ import { countOffset } from "../offsetter";
 
 /**
  * Repeats nested components, reusing items based on key.
- *
- * COMPILER_MODS:
- *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
-export function KeyedRepeater(componentDefinition, key, adjustmentTracker, initialIndex) {
+export function KeyedRepeater(
+  componentDefinition,
+  key,
+  /* #INCLUDE-IF: allowRepeaterSiblings */ adjustmentTracker,
+  /* #INCLUDE-IF: allowRepeaterSiblings */ initialIndex
+) {
   this.d = componentDefinition;
+  /* #INCLUDE-IF: allowDismount */ this.s = componentDefinition.pool;
+  this.p = new Map();
   this.k = []; // array of keys as last set.
   if (typeof key === "function") {
     this.f = key;
   } else {
     this.n = key;
   }
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
-    this.a = adjustmentTracker;
-    this.i = initialIndex;
-  }
+  /* #INCLUDE-IF: allowRepeaterSiblings */ this.a = adjustmentTracker;
+  /* #INCLUDE-IF: allowRepeaterSiblings */ this.i = initialIndex;
 }
 
 /**
  * Updates the element's childNodes to match the items.
  * Performance is important.
- *
- * @param {DOMElement} parent - The DOM element to patch.
- * @param {Array} items - Array of items which will be passed as props.
- * @param {Map} pool - pool of component instances.
- * @param {any} ctrl - The parent item's controller.
  */
-KeyedRepeater.prototype.patch = function (parent, items, pool, ctrl) {
-  const componentDefinition = this.d,
-    keyName = this.n,
-    keyFn = this.f,
-    useKeyName = keyName !== undefined,
-    childNodes = parent.childNodes,
-    itemsLength = items.length,
-    previousKeys = this.k,
-    previousKeysLength = previousKeys.length,
-    newKeys = [],
-    previousKeysSet = new Set(previousKeys),
-    frag = document.createDocumentFragment();
+KeyedRepeater.prototype = {
+  patch: function (parent, items, /* #INCLUDE-IF: allowCtrl */ ctrl) {
+    const componentDefinition = this.d,
+      /* #INCLUDE-IF: allowDismount */ sharedPool = this.s,
+      ownPool = this.p,
+      keyName = this.n,
+      keyFn = this.f,
+      useKeyName = keyName !== undefined,
+      childNodes = parent.childNodes,
+      itemsLength = items.length,
+      previousKeys = this.k,
+      previousKeysLength = previousKeys.length,
+      newKeys = [],
+      previousKeysSet = new Set(previousKeys),
+      frag = document.createDocumentFragment();
 
-  let item,
-    el,
-    itemKey,
-    component,
-    initialIndex,
-    offsetTracker,
-    endAnchor = null,
-    adjustment = 0,
-    anchor = null,
-    fragAnchor = null,
-    untouched = true,
-    append = false,
-    offset = previousKeysLength - itemsLength,
-    i = itemsLength - 1;
+    let item,
+      el,
+      itemKey,
+      component,
+      initialIndex,
+      offsetTracker,
+      endAnchor = null,
+      adjustment = 0,
+      anchor = null,
+      fragAnchor = null,
+      untouched = true,
+      append = false,
+      offset = previousKeysLength - itemsLength,
+      i = itemsLength - 1;
 
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
-    offsetTracker = this.a;
-    initialIndex = this.i;
-    if (offsetTracker) {
-      adjustment = countOffset(offsetTracker, initialIndex);
-      endAnchor = childNodes[previousKeysLength + adjustment] || null;
-      anchor = endAnchor;
-      untouched = false;
+    if (wallaceConfig.flags.allowRepeaterSiblings) {
+      offsetTracker = this.a;
+      initialIndex = this.i;
+      if (offsetTracker) {
+        adjustment = countOffset(offsetTracker, initialIndex);
+        endAnchor = childNodes[previousKeysLength + adjustment] || null;
+        anchor = endAnchor;
+        untouched = false;
+      }
     }
-  }
 
-  // Working backwards saves us having to track moves.
-  while (i >= 0) {
-    item = items[i];
-    itemKey = useKeyName ? item[keyName] : keyFn(item);
-    if (!(component = pool.get(itemKey))) {
-      component = new componentDefinition();
-      pool.set(itemKey, component);
-    }
-    component.render(item, ctrl);
-    el = component.el;
-    if (untouched && !previousKeysSet.has(itemKey)) {
-      frag.insertBefore(el, fragAnchor);
-      fragAnchor = el;
-      append = true;
-      offset++;
-    } else {
-      if (itemKey !== previousKeys[i + offset]) {
-        parent.insertBefore(el, anchor);
-        untouched = false;
+    // Working backwards saves us having to track moves.
+    while (i >= 0) {
+      item = items[i];
+      itemKey = useKeyName ? item[keyName] : keyFn(item);
+      if (!(component = ownPool.get(itemKey))) {
+        if (wallaceConfig.flags.allowDismount) {
+          component = sharedPool.pop() || new componentDefinition();
+        } else {
+          component = new componentDefinition();
+        }
+        ownPool.set(itemKey, component);
+      }
+      component.render(item, /* #INCLUDE-IF: allowCtrl */ ctrl);
+      el = component.el;
+      if (untouched && !previousKeysSet.has(itemKey)) {
+        frag.insertBefore(el, fragAnchor);
+        fragAnchor = el;
+        append = true;
+        offset++;
+      } else {
+        if (itemKey !== previousKeys[i + offset]) {
+          parent.insertBefore(el, anchor);
+          untouched = false;
+        }
+        anchor = el;
       }
-      anchor = el;
+      newKeys.push(itemKey);
+      previousKeysSet.delete(itemKey);
+      i--;
     }
-    newKeys.push(itemKey);
-    previousKeysSet.delete(itemKey);
-    i--;
-  }
 
-  if (append) {
-    parent.insertBefore(frag, endAnchor);
-  }
+    if (append) {
+      parent.insertBefore(frag, endAnchor);
+    }
 
-  let toStrip = previousKeysSet.size;
-  while (toStrip > 0) {
-    parent.removeChild(childNodes[adjustment]);
-    toStrip--;
-  }
+    let toStrip = previousKeysSet.size;
+    while (toStrip > 0) {
+      parent.removeChild(childNodes[adjustment]);
+      toStrip--;
+    }
 
-  this.k = newKeys.reverse();
+    this.k = newKeys.reverse();
 
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    /* #INCLUDE-IF: allowRepeaterSiblings */
     if (offsetTracker) {
       offsetTracker.set(initialIndex, itemsLength - 1);
     }
+
+    /* #INCLUDE-IF: allowDismount */
+    for (const keyToRemove of previousKeysSet) {
+      component = ownPool.get(keyToRemove);
+      sharedPool.push(component);
+      component.dismount();
+      ownPool.delete(keyToRemove);
+    }
+  },
+  /* #INCLUDE-IF: allowDismount */ dismount: function () {
+    const pool = this.p,
+      sharedPool = this.s;
+    for (const [key, value] of pool.entries()) {
+      sharedPool.push(value);
+      value.dismount();
+    }
+    pool.clear();
   }
 };

package/lib/repeaters/nester.js

@@ -0,0 +1,29 @@
+export function Nester(componentDefinition) {
+  this.d = componentDefinition;
+  this.i = null;
+  /* #INCLUDE-IF: allowDismount */ this.s = componentDefinition.pool;
+}
+
+Nester.prototype = {
+  send: function (props, ctrl) {
+    this.get().render(props, ctrl);
+  },
+  get: function () {
+    if (!this.i) {
+      if (wallaceConfig.flags.allowDismount) {
+        this.i = this.s.pop() || new this.d();
+      } else {
+        this.i = new this.d();
+      }
+    }
+    return this.i;
+  },
+  /* #INCLUDE-IF: allowDismount */ dismount: function () {
+    const i = this.i;
+    if (i) {
+      i.dismount();
+      this.s.push(i);
+      this.i = null;
+    }
+  }
+};