wallace 0.14.1 → 0.15.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 */ stubs: {}
 };
 
-if (wallaceConfig.flags.allowStubs) {
-  ComponentBase.stubs = {};
-}
-
 /**
  *
  * @param {function} ComponentFunction - The Component definition function to add bits to.
@@ -128,7 +126,7 @@ 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.'
@@ -143,20 +141,30 @@ export const initConstructor = (ComponentFunction, BaseComponentFunction) => {
     }
   }
 
-  if (wallaceConfig.flags.allowStubs) {
-    ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
-  }
+  /* #INCLUDE-IF: allowStubs */
+  ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
 
   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 {

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 take 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;
+    }
+  }
+};

package/lib/repeaters/sequential.js

@@ -2,77 +2,103 @@ import { countOffset } from "../offsetter";
 
 /**
  * Repeats nested components, yielding from the pool sequentially.
- *
- * COMPILER_MODS:
- *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
-export function SequentialRepeater(componentDefinition, adjustmentTracker, initialIndex) {
+export function SequentialRepeater(
+  componentDefinition,
+  /* #INCLUDE-IF: allowRepeaterSiblings */ adjustmentTracker,
+  /* #INCLUDE-IF: allowRepeaterSiblings */ initialIndex
+) {
   this.d = componentDefinition;
+  /* #INCLUDE-IF: allowDismount */ this.s = componentDefinition.pool;
+  this.p = [];
   this.c = 0; // Child count
-  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 {Array} pool -  pool of component instances.
- * @param {any} ctrl - The parent item's controller.
  */
-SequentialRepeater.prototype.patch = function (parent, items, pool, ctrl) {
-  const componentDefinition = this.d,
-    previousChildCount = this.c,
-    itemsLength = items.length,
-    childNodes = parent.childNodes;
+SequentialRepeater.prototype = {
+  patch: function (parent, items, /* #INCLUDE-IF: allowCtrl */ ctrl) {
+    const componentDefinition = this.d,
+      /* #INCLUDE-IF: allowDismount */ sharedPool = this.s,
+      previousChildCount = this.c,
+      pool = this.p,
+      itemsLength = items.length,
+      childNodes = parent.childNodes;
 
-  let i = 0,
-    offset = 0,
-    component,
-    nextElement,
-    initialIndex,
-    offsetTracker,
-    endOfRange = previousChildCount,
-    poolCount = pool.length;
+    let i = 0,
+      offset = 0,
+      component,
+      nextElement,
+      initialIndex,
+      offsetTracker,
+      endOfRange = previousChildCount,
+      poolCount = pool.length,
+      originalPoolCount = poolCount;
 
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
-    initialIndex = this.i;
-    offsetTracker = this.a;
-    if (offsetTracker) {
-      // The repeat element has siblings
-      offset = countOffset(offsetTracker, initialIndex);
-      endOfRange += offset;
-      nextElement = childNodes[endOfRange] || null;
+    if (wallaceConfig.flags.allowRepeaterSiblings) {
+      initialIndex = this.i;
+      offsetTracker = this.a;
+      if (offsetTracker) {
+        // The repeat element has siblings
+        offset = countOffset(offsetTracker, initialIndex);
+        endOfRange += offset;
+        nextElement = childNodes[endOfRange] || null;
+      }
     }
-  }
-  while (i < itemsLength) {
-    if (i < poolCount) {
-      component = pool[i];
-    } else {
-      component = new componentDefinition();
-      pool.push(component);
-      poolCount++;
+    while (i < itemsLength) {
+      if (i < poolCount) {
+        component = pool[i];
+      } else {
+        if (wallaceConfig.flags.allowDismount) {
+          component = sharedPool.pop() || new componentDefinition();
+        } else {
+          component = new componentDefinition();
+        }
+        pool.push(component);
+        poolCount++;
+      }
+      component.render(items[i], /* #INCLUDE-IF: allowCtrl */ ctrl);
+      if (i >= previousChildCount) {
+        parent.insertBefore(component.el, nextElement);
+      }
+      i++;
     }
-    component.render(items[i], ctrl);
-    if (i >= previousChildCount) {
-      parent.insertBefore(component.el, nextElement);
+    this.c = itemsLength;
+
+    let removeAtIndex = offset + previousChildCount - 1;
+    const stopAtIndex = offset + itemsLength - 1;
+    for (let i = removeAtIndex; i > stopAtIndex; i--) {
+      parent.removeChild(childNodes[i]);
     }
-    i++;
-  }
-  this.c = itemsLength;
 
-  let removeAtIndex = offset + previousChildCount - 1;
-  const stopatIndex = offset + itemsLength - 1;
-  for (let i = removeAtIndex; i > stopatIndex; i--) {
-    parent.removeChild(childNodes[i]);
-  }
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    /* #INCLUDE-IF: allowRepeaterSiblings */
     if (offsetTracker) {
       offsetTracker.set(initialIndex, itemsLength - 1);
     }
+
+    /* #INCLUDE-IF: allowDismount */
+    while (originalPoolCount > itemsLength) {
+      component = pool.pop();
+      sharedPool.push(component);
+      component.dismount();
+      originalPoolCount--;
+    }
+  },
+  /* #INCLUDE-IF: allowDismount */ dismount: function () {
+    let component,
+      pool = this.p,
+      poolCount = pool.length,
+      sharedPool = this.s;
+    while (poolCount > 0) {
+      component = pool.pop();
+      sharedPool.push(component);
+      component.dismount();
+      poolCount--;
+    }
+    pool.length = 0;
   }
 };

package/lib/router.js

@@ -22,8 +22,8 @@ export const route = (path, componentDef, converter, cleanup) =>
 
 export const Router = () => <div></div>;
 
-Router.methods = {
-  render(props, ctrl) {
+Object.assign(Router.prototype, {
+  render(props, /* #INCLUDE-IF: allowCtrl */ ctrl) {
     const defaultError = (error, router) => (router.el.innerHTML = error.message);
     this.error = props.error || defaultError;
     this.current = null;
@@ -33,7 +33,7 @@ Router.methods = {
         this.el.setAttribute(k, props.atts[k]);
       });
     }
-    this.base.render.call(this, props, ctrl);
+    this.base.render.call(this, props, /* #INCLUDE-IF: allowCtrl */ ctrl);
   },
   async onHashChange() {
     const path = location.hash.slice(1) || "",
@@ -45,7 +45,10 @@ Router.methods = {
       while (i < len) {
         let route = routes[i];
         if ((routeData = route.match(path))) {
-          const component = await route.getComponent(routeData, this.ctrl);
+          const component = await route.getComponent(
+            routeData,
+            /* #INCLUDE-IF: allowCtrl */ this.ctrl
+          );
           this.current && this.current.cleanup();
           this.mount(component);
           this.current = route;
@@ -62,7 +65,7 @@ Router.methods = {
     this.el.textContent = "";
     this.el.appendChild(component.el);
   }
-};
+});
 
 export function Route(path, def, convert, cleanup) {
   this.chunks = path
@@ -96,12 +99,12 @@ Route.prototype = {
     }
     return { args, params: new URLSearchParams(query), url };
   },
-  async getComponent(routeData, ctrl) {
+  async getComponent(routeData, /* #INCLUDE-IF: allowCtrl */ ctrl) {
     if (!this.component) {
       this.component = new this.def();
     }
     const props = await this._convert(routeData);
-    this.component.render(props, ctrl);
+    this.component.render(props, /* #INCLUDE-IF: allowCtrl */ ctrl);
     return this.component;
   },
   /**

package/lib/types.d.ts

@@ -525,12 +525,13 @@ watchedObj[0] = 'foo';  // throws error.
 You can toggle flags in your babel config to disable certain features for cutting edge
 performance and bundle size:
 
-1.  allowBase - enables use of `base` in components.
-2.  allowCtrl - enables use of `ctrl` in components.
-3.  allowMethods - adds the `methods` helper to components.
-4.  allowParts  - enables use of parts.
-5.  allowRepeaterSiblings - allows repeaters to have siblings.
-6.  allowStubs - enables the use of stubs.
+1.  `allowBase` - allows use of `base` in components.
+2.  `allowCtrl` - allows use of `ctrl` in components.
+3.  `allowDismount` - allows components to handle dismounting.
+4.  `allowMethods` - allows use of `methods` helper to components.
+5.  `allowParts` - allows use of parts.
+6.  `allowRepeaterSiblings` - allows repeaters to have siblings.
+7.  `allowStubs` - allows use of stubs.
 
 These flags default to true, unless you specify `flags` in the plugin config, in which
 case they default to false and you need to explicitly enable those you want:

package/lib/utils.js

@@ -1,16 +1,12 @@
-export function findElement(rootElement, path) {
+export const findElement = (rootElement, path) => {
   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);
-}
-
-export function onEvent(element, eventName, callback) {
+export const onEvent = (element, eventName, callback) => {
   element.addEventListener(eventName, callback);
   return element;
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "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.14.1",
+    "babel-plugin-wallace": "^0.15.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "c60384d682e38095780dd260004299e9c4038583"
+  "gitHead": "87a69fe8a8f3b8dd20e66eb0d125998658272931"
 }

package/lib/nestComponent.js

@@ -1,8 +0,0 @@
-import { findElement, replaceNode } from "./utils";
-
-export const nestComponent = (rootElement, path, componentDefinition) => {
-  const el = findElement(rootElement, path),
-    child = new componentDefinition();
-  replaceNode(el, child.el);
-  return child;
-};