wallace 0.12.2 → 0.14.0

package/lib/component.js

@@ -16,7 +16,7 @@ const ComponentPrototype = {
 
   /*
   COMPILER_MODS:
-    if useFlags is false this is deleted.
+    if useFlags is false this is deleted, so `_u` can be renamed to `update`.
   */
   update: function () {
     this._u(0, this._l);
@@ -100,7 +100,7 @@ const ComponentBase = {
   prototype: ComponentPrototype
 };
 
-if (wallaceConfig.flags.useStubs) {
+if (wallaceConfig.flags.allowStubs) {
   ComponentBase.stubs = {};
 }
 
@@ -110,7 +110,7 @@ if (wallaceConfig.flags.useStubs) {
  * @param {function} BaseComponentFunction - A Component definition function to inherit bits from.
  * @returns the ComponentFunction with bits added.
  */
-export function initConstructor(ComponentFunction, BaseComponentFunction) {
+export const initConstructor = (ComponentFunction, BaseComponentFunction) => {
   const proto = (ComponentFunction.prototype = Object.create(
     BaseComponentFunction.prototype,
     {
@@ -120,59 +120,55 @@ export function initConstructor(ComponentFunction, BaseComponentFunction) {
     }
   ));
 
-  if (wallaceConfig.flags.useMethods) {
+  if (wallaceConfig.flags.allowMethods) {
     Object.defineProperty(ComponentFunction, "methods", {
-      set: function (value) {
-        Object.assign(proto, value);
-      },
-      get: function () {
-        return proto;
-      }
+      set: value => Object.assign(proto, value),
+      get: () => proto
     });
   } else {
     if (process.env.NODE_ENV !== "production") {
       Object.defineProperty(ComponentFunction, "name", {
         set: function (value) {
           throw new Error(
-            'Flag "useMethods" 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 "useMethods" 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.useStubs) {
+  if (wallaceConfig.flags.allowStubs) {
     ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
   }
 
   return ComponentFunction;
-}
+};
 
-export function defineComponent(html, watches, queries, contructor, inheritFrom) {
+export const defineComponent = (html, watches, queries, contructor, 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.useBase) {
+  if (wallaceConfig.flags.allowBase) {
     proto.base = ComponentPrototype;
   } else {
     if (process.env.NODE_ENV !== "production") {
       Object.defineProperty(proto, "base", {
         set: function (value) {
           throw new Error(
-            'Flag "useBase" 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 "useBase" must be set to true in the config for this feature.'
+            'Flag "allowBase" must be set to true in the config for this feature.'
           );
         }
       });
@@ -180,4 +176,4 @@ export function defineComponent(html, watches, queries, contructor, inheritFrom)
   }
 
   return ComponentDefinition;
-}
+};

package/lib/createComponent.js

@@ -1,5 +1,5 @@
-export function createComponent(ComponentFunction, props, ctrl) {
+export const createComponent = (ComponentFunction, props, ctrl) => {
   const component = new ComponentFunction();
   component.render(props, ctrl);
   return component;
-}
+};

package/lib/detacher.js

@@ -1,28 +1,25 @@
+import { countOffset } from "./offsetter";
 /**
  * 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.
+  this.e = e; // the parent element key.
+  this.s = s; // the stash key of the map of detached nodes.
 }
 
 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) {
+    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);
-    detachedElements[index] = element;
+    ownOffset = -1;
   }
+  offsetTracker.set(index, ownOffset);
 };

package/lib/extend.js

@@ -11,7 +11,7 @@ import { initConstructor } from "./component";
  *
  * So it should never be called with 2nd arg in real life.
  */
-export function extendComponent(base, componentDef) {
+export const extendComponent = (base, componentDef) => {
   // This function call will have been replaced if 2nd arg is a valid component func.
   // and therefore we would not receive it.
   if (componentDef)
@@ -19,4 +19,4 @@ export function extendComponent(base, componentDef) {
   return initConstructor(function () {
     base.call(this);
   }, base);
-}
+};

package/lib/index.js

@@ -7,9 +7,9 @@ export { nestComponent } from "./nestComponent";
 export { saveRef } from "./refs";
 export { savePart } from "./part";
 export { KeyedRepeater } from "./repeaters/keyed";
-export { KeyedFnRepeater } from "./repeaters/keyedFn";
 export { SequentialRepeater } from "./repeaters/sequential";
 export { Router, route } from "./router";
 export { getStub } from "./stubs";
+export { toDateString } from "./toDateString";
 export { findElement, onEvent } from "./utils";
 export { watch, protect } from "./watch";

package/lib/mount.js

@@ -7,11 +7,11 @@ import { replaceNode } from "./utils";
  * @param {callable} componentDefinition The class of Component to create
  * @param {object} props The props to pass to the component (optional)
  */
-export function mount(elementOrId, componentDefinition, props, ctrl) {
+export const mount = (elementOrId, componentDefinition, props, ctrl) => {
   const component = new componentDefinition();
   component.render(props, ctrl);
   const element =
     typeof elementOrId === "string" ? document.getElementById(elementOrId) : elementOrId;
   replaceNode(element, component.el);
   return component;
-}
+};

package/lib/nestComponent.js

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

package/lib/offsetter.js

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

package/lib/part.js

@@ -11,7 +11,7 @@ Part.prototype.update = function () {
 /**
  * Saves a reference to a part of a component so it can be updated independently.
  */
-export function savePart(node, component, parts, name, start, end) {
+export const savePart = (node, component, parts, name, start, end) => {
   parts[name] = new Part(component, start, end);
   return node;
-}
+};

package/lib/refs.js

@@ -2,6 +2,4 @@
  * Saves a reference to a node (element or nested component)
  * Returns the node.
  */
-export function saveRef(node, refs, name) {
-  return (refs[name] = node);
-}
+export const saveRef = (node, refs, name) => (refs[name] = node);

package/lib/repeaters/keyed.js

@@ -1,16 +1,30 @@
-// WARNING: Code here is near duplicated in keyedFn.
+import { countOffset } from "../offsetter";
 
 /**
  * Repeats nested components, reusing items based on key.
  *
- * @param {function} componentDefinition - The ComponentDefinition to create.
- * @param {string} keyName - The name of the key property.
+ * COMPILER_MODS:
+ *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
-export function KeyedRepeater(componentDefinition, keyName) {
-  this.def = componentDefinition;
-  this.keyName = keyName;
-  this.keys = []; // array of keys as last set.
-  this.pool = {}; // pool of component instances.
+export function KeyedRepeater(
+  componentDefinition,
+  pool,
+  key,
+  adjustmentTracker,
+  initialIndex
+) {
+  this.d = componentDefinition;
+  this.k = []; // array of keys as last set.
+  this.p = pool; // pool of component instances. Must be a Map.
+  if (typeof key === "function") {
+    this.f = key;
+  } else {
+    this.n = key;
+  }
+  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    this.a = adjustmentTracker;
+    this.i = initialIndex;
+  }
 }
 
 /**
@@ -22,20 +36,27 @@ export function KeyedRepeater(componentDefinition, keyName) {
  * @param {any} ctrl - The parent item's controller.
  */
 KeyedRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool,
-    componentDefinition = this.def,
-    keyName = this.keyName,
+  const pool = this.p,
+    componentDefinition = this.d,
+    keyName = this.n,
+    keyFn = this.f,
+    useKeyName = keyName !== undefined,
     childNodes = e.childNodes,
     itemsLength = items.length,
-    previousKeys = this.keys,
+    previousKeys = this.k,
     previousKeysLength = previousKeys.length,
     newKeys = [],
     previousKeysSet = new Set(previousKeys),
     frag = document.createDocumentFragment();
+
   let item,
     el,
-    key,
+    itemKey,
     component,
+    initialIndex,
+    offsetTracker,
+    endAnchor = null,
+    adjustment = 0,
     anchor = null,
     fragAnchor = null,
     untouched = true,
@@ -43,39 +64,59 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
     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;
+    }
+  }
+
   // Working backwards saves us having to track moves.
   while (i >= 0) {
     item = items[i];
-    key = item[keyName];
-    component = pool[key] || (pool[key] = new componentDefinition());
+    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(key)) {
+    if (untouched && !previousKeysSet.has(itemKey)) {
       frag.insertBefore(el, fragAnchor);
       fragAnchor = el;
       append = true;
       offset++;
     } else {
-      if (key !== previousKeys[i + offset]) {
+      if (itemKey !== previousKeys[i + offset]) {
         e.insertBefore(el, anchor);
         untouched = false;
       }
       anchor = el;
     }
-    newKeys.push(key);
-    previousKeysSet.delete(key);
+    newKeys.push(itemKey);
+    previousKeysSet.delete(itemKey);
     i--;
   }
 
   if (append) {
-    e.appendChild(frag);
+    e.insertBefore(frag, endAnchor);
   }
 
   let toStrip = previousKeysSet.size;
   while (toStrip > 0) {
-    e.removeChild(childNodes[0]);
+    e.removeChild(childNodes[adjustment]);
     toStrip--;
   }
 
-  this.keys = newKeys.reverse();
+  this.k = newKeys.reverse();
+
+  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    if (offsetTracker) {
+      offsetTracker.set(initialIndex, itemsLength - 1);
+    }
+  }
 };

package/lib/repeaters/sequential.js

@@ -1,32 +1,60 @@
+import { countOffset } from "../offsetter";
+
 /**
- * Repeats nested components, yielding from its pool sequentially.
+ * Repeats nested components, yielding from the pool sequentially.
  *
- * @param {componentDefinition} componentDefinition - The ComponentDefinition to create.
+ * COMPILER_MODS:
+ *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
-export function SequentialRepeater(componentDefinition) {
-  this.def = componentDefinition;
-  this.pool = []; // pool of component instances
-  this.count = 0; // Child element count
+export function SequentialRepeater(
+  componentDefinition,
+  pool,
+  adjustmentTracker,
+  initialIndex
+) {
+  this.d = componentDefinition;
+  this.p = pool; // pool of component instances. Must be an Array.
+  this.c = 0; // Child count
+  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    this.a = adjustmentTracker;
+    this.i = initialIndex;
+  }
 }
 
 /**
  * Updates the element's childNodes to match the items.
  * Performance is important.
  *
- * @param {DOMElement} e - The DOM element to patch.
+ * @param {DOMElement} parent - The DOM element to patch.
  * @param {Array} items - Array of items which will be passed as props.
  * @param {any} ctrl - The parent item's controller.
  */
-SequentialRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool,
-    componentDefinition = this.def,
-    childNodes = e.childNodes,
+SequentialRepeater.prototype.patch = function (parent, items, ctrl) {
+  const pool = this.p,
+    componentDefinition = this.d,
+    previousChildCount = this.c,
     itemsLength = items.length,
-    childElementCount = this.count;
+    childNodes = parent.childNodes;
+
   let i = 0,
+    offset = 0,
     component,
+    nextElement,
+    initialIndex,
+    offsetTracker,
+    endOfRange = previousChildCount,
     poolCount = pool.length;
 
+  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];
@@ -36,15 +64,21 @@ SequentialRepeater.prototype.patch = function (e, items, ctrl) {
       poolCount++;
     }
     component.render(items[i], ctrl);
-    if (i >= childElementCount) {
-      e.appendChild(component.el);
+    if (i >= previousChildCount) {
+      parent.insertBefore(component.el, nextElement);
     }
     i++;
   }
-  this.count = itemsLength;
-  let lastIndex = childNodes.length - 1;
-  const keepIndex = itemsLength - 1;
-  for (let i = lastIndex; i > keepIndex; i--) {
-    e.removeChild(childNodes[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) {
+    if (offsetTracker) {
+      offsetTracker.set(initialIndex, itemsLength - 1);
+    }
   }
 };

package/lib/router.js

@@ -17,9 +17,8 @@ const converters = {
   date: v => new Date(v)
 };
 
-export function route(path, componentDef, converter, cleanup) {
-  return new Route(path, componentDef, converter, cleanup);
-}
+export const route = (path, componentDef, converter, cleanup) =>
+  new Route(path, componentDef, converter, cleanup);
 
 export const Router = () => <div></div>;
 

package/lib/stubs.js

@@ -1,6 +1,4 @@
 /**
  * Gets a stub by name.
  */
-export function getStub(component, name) {
-  return component.constructor.stubs[name];
-}
+export const getStub = (component, name) => component.constructor.stubs[name];

package/lib/toDateString.js

@@ -0,0 +1 @@
+export const toDateString = date => date.toISOString().slice(0, 10);

package/lib/types.d.ts

@@ -204,6 +204,7 @@ const TaskList = (tasks) => (
 Notes:
 
  - You cannot use nest on the root element.
+ - You cannot use `if` on a nested element, only `show` and `hide`.
 
 ## 4. Repeating
 
@@ -239,8 +240,8 @@ const TaskList = (tasks) => (
 
 Notes:
 
- - You cannot repeat on the root element.
- - Repeat must be the only child element under its parent.
+ - You cannot use repeat on the root element.
+ - You cannot toggle visibility on the repeat element.
 
 ## 5. Directives
 
@@ -386,9 +387,7 @@ const TaskList: Uses<iTask[]> = (tasks) => (
   <div>
     First task:
     <Task.nest props={tasks[0]} />
-    <div>
-      <Task.repeat items={tasks.slice(1)} />
-    </div>
+    <Task.repeat items={tasks.slice(1)} />
   </div>
 );
 
@@ -526,11 +525,12 @@ 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.  useBase - enables use of `base` in components.
-2.  useControllers - enables use of `ctrl` in components.
-3.  useMethods - adds the `methods` helper to components.
-4.  useParts - enables use of parts.
-5.  useStubs - enables the use of stubs.
+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.
 
 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:
@@ -543,8 +543,8 @@ module.exports = {
       "babel-plugin-wallace",
       {
         flags: {
-          useControllers: true,
-          useStubs: false
+          allowCtrl: true,
+          allowStubs: false
         },
       }
     ],
@@ -841,46 +841,29 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: bind
    *
-   * Sets up two-way binding:
-   *
-   *   1. It uses the expression as the element's value.
-   *   2. It assigns the value back to the expression when the element's `change` event
-   * fires.
-   *
-   * So this:
+   * Sets up two way binding between an input and data:
    *
    * ```
-   * const MyComponent = ({name}) => (
-   *   <input type="text" bind={name}/>
-   * );
+   * <input type="text" bind={name} />
    * ```
    *
    * Is the equivalent of this:
    *
-   *```
-   * const MyComponent = ({name}, {event}) => (
-   *   <input type="text" onChange={name = event.target.value} value={name}/>
-   * );
    * ```
-   *
-   * In the case of a checkbox it uses `checked` instead of `value`, so is the equivalent of this:
+   * <input type="text" value={name} onChange={name = event.target.value} />
+   * ```
+   * By default it watches the `change` event, but you can specify a different one using
+   * the `event` directive:
    *
    * ```
-   * const MyComponent = ({done}, {event}) => (
-   *   <input type="checkbox" onChange={done = event.target.checked} checked={done}/>
-   * );
+   * <input type="text" bind={name} event:keyup />
    * ```
    *
-   * By defaults it listens to the `change` event, but you can specify a different one:
+   * By default it binds to `value` but you can set a different property:
    *
    *```
-   * const MyComponent = ({name}) => (
-   *   <input type="text" bind:KeyUp={name} />
-   * );
+   * <input type="number" bind:valueAsNumber={name} />
    * ```
-   *
-   * Note that destructured props are converted to member expressions, so these examples
-   * work even though it looks like you're setting a local variable.
    */
   bind?: MustBeExpression;
 
@@ -923,6 +906,19 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   ctrl?: any;
 
+  /**
+   * ## Wallace directive: event
+   *
+   *
+   * Must be used with the `bind` directive, and causes it do watch a different event
+   * (the default is `change`)
+   *
+   * ```
+   * <input type="text" bind={name} event:keyup />
+   * ```
+   */
+  event?: string;
+
   /**
    * ## Wallace directive: fixed
    *
@@ -1078,7 +1074,6 @@ declare namespace JSX {
      *   <MyComponent.repeat items={arrayOfProps} key="id"/>
      *   <MyComponent.repeat items={arrayOfProps} key={(i) => i.id}/>
      *   ```
-     * Note that repeated components may not have siblings.
      *
      * Available Wallace directives:
      *
@@ -1087,6 +1082,7 @@ declare namespace JSX {
      * - `class:xyz` defines a set of classes to be toggled.
      * - `css` shorthand for `fixed:class`.
      * - `ctrl` specifies ctrl for nested/repeated components.
+     * - `event` changes the event which `bind` reacts to.
      * - `fixed:xyz` sets a attribute from an expression at definition.
      * - `hide` sets an element or component's hidden property.
      * - `html` Set the element's `innnerHTML` property.

package/lib/watch.js

@@ -9,12 +9,13 @@ export function watch(target, callback) {
   const handler = {
     get(target, key) {
       if (key == "isProxy") return true;
-      const prop = target[key];
-      if (typeof prop == "undefined") return;
-      if (typeof prop === "object") return new Proxy(prop, handler);
+      const prop = target[key],
+        propType = typeof prop;
+      if (propType == "undefined") return;
+      if (propType === "object") return new Proxy(prop, handler);
       if (
-        Array.isArray(target) &&
         typeof target[key] === "function" &&
+        Array.isArray(target) &&
         MUTATING_METHODS.includes(key)
       ) {
         return (...args) => {
@@ -23,6 +24,9 @@ export function watch(target, callback) {
           return result;
         };
       }
+      if (target instanceof Date && propType === "function") {
+        return prop.bind(target);
+      }
       return prop;
     },
     set(target, key, value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.12.2",
+  "version": "0.14.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.12.2",
+    "babel-plugin-wallace": "^0.14.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "7625a9b2fb654b6007a7ae97388a8c98995a49fe"
+  "gitHead": "94e0750d51118bf80ff69065fdb39a0f0f52dfc7"
 }

package/lib/repeaters/keyedFn.js

@@ -1,81 +0,0 @@
-// WARNING: Code here is near duplicated in keyedFn.
-
-/**
- * Repeats nested components, reusing items based on key.
- *
- * @param {function} componentDefinition - The ComponentDefinition to create.
- * @param {function} keyFn - A function which obtains the key.
- */
-export function KeyedFnRepeater(componentDefinition, keyFn) {
-  this.def = componentDefinition;
-  this.keyFn = keyFn;
-  this.keys = []; // array of keys as last set.
-  this.pool = {}; // pool of component instances.
-}
-
-/**
- * Updates the element's childNodes to match the items.
- * Performance is important.
- *
- * @param {DOMElement} e - The DOM element to patch.
- * @param {Array} items - Array of items which will be passed as props.
- * @param {any} ctrl - The parent item's controller.
- */
-KeyedFnRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool,
-    componentDefinition = this.def,
-    keyFn = this.keyFn,
-    childNodes = e.childNodes,
-    itemsLength = items.length,
-    previousKeys = this.keys,
-    previousKeysLength = previousKeys.length,
-    newKeys = [],
-    previousKeysSet = new Set(previousKeys),
-    frag = document.createDocumentFragment();
-  let item,
-    el,
-    key,
-    component,
-    anchor = null,
-    fragAnchor = null,
-    untouched = true,
-    append = false,
-    offset = previousKeysLength - itemsLength,
-    i = itemsLength - 1;
-
-  // Working backwards saves us having to track moves.
-  while (i >= 0) {
-    item = items[i];
-    key = keyFn(item);
-    component = pool[key] || (pool[key] = new componentDefinition());
-    component.render(item, ctrl);
-    el = component.el;
-    if (untouched && !previousKeysSet.has(key)) {
-      frag.insertBefore(el, fragAnchor);
-      fragAnchor = el;
-      append = true;
-      offset++;
-    } else {
-      if (key !== previousKeys[i + offset]) {
-        e.insertBefore(el, anchor);
-        untouched = false;
-      }
-      anchor = el;
-    }
-    newKeys.push(key);
-    previousKeysSet.delete(key);
-    i--;
-  }
-
-  if (append) {
-    e.appendChild(frag);
-  }
-
-  let toStrip = previousKeysSet.size;
-  while (toStrip > 0) {
-    e.removeChild(childNodes[0]);
-    toStrip--;
-  }
-
-  this.keys = newKeys.reverse();
-};