wallace 0.7.2 → 0.10.0

package/lib/component.js

@@ -1,42 +1,40 @@
 const throwAway = document.createElement("template");
 const NO_LOOKUP = "__";
 
-const ComponentBase = {
-  stubs: {},
-  prototype: {
-    /**
-     * The render function that gets called by parent components.
-     */
-    render: function (props, ctrl) {
-      this.props = props;
-      this.ctrl = ctrl;
-      this.update();
-    },
+const ComponentPrototype = {
+  /**
+   * The render function that gets called by parent components.
+   */
+  render: function (props, ctrl) {
+    this.props = props;
+    this.ctrl = ctrl;
+    this.update();
+  },
 
-    /**
-     * Updates the DOM and renders nested components.
-     */
-    update: function () {
-      this._u(0, this._l);
-    },
+  /**
+   * Updates the DOM and renders nested components.
+   */
+  update: function () {
+    this._u(0, this._l);
+  },
 
-    _u: function (i, il) {
-      let watch,
-        element,
-        parent,
-        displayToggle,
-        detacher,
-        lookupTrue,
-        shouldBeVisible,
-        detachedElements,
-        detachedElement,
-        index,
-        adjustedIndex;
+  _u: function (i, il) {
+    let watch,
+      element,
+      parent,
+      displayToggle,
+      detacher,
+      lookupTrue,
+      shouldBeVisible,
+      detachedElements,
+      detachedElement,
+      index,
+      adjustedIndex;
 
-      const watches = this._w,
-        props = this.props,
-        previous = this._p;
-      /*
+    const watches = this._w,
+      props = this.props,
+      previous = this._p;
+    /*
       Watches is an array of objects with keys:
         e: the element index (number)
         c: the callbacks (object)
@@ -56,94 +54,87 @@ const ComponentBase = {
         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];
-        displayToggle = watch.v;
-        shouldBeVisible = true;
-        if (displayToggle) {
-          lookupTrue = !!this._q[displayToggle.q](props, this);
-          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;
-            }
-          } else {
-            element.hidden = !shouldBeVisible;
-          }
-          if (!shouldBeVisible) {
-            i += displayToggle.s;
+    while (i < il) {
+      watch = watches[i];
+      element = this._e[watch.e];
+      displayToggle = watch.v;
+      shouldBeVisible = true;
+      if (displayToggle) {
+        lookupTrue = !!this._q[displayToggle.q](props, this);
+        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;
           }
+        } else {
+          element.hidden = !shouldBeVisible;
         }
-        if (shouldBeVisible) {
-          const prev = previous[i],
-            callbacks = watch.c;
-          for (let key in callbacks) {
-            if (key === NO_LOOKUP) {
-              callbacks[key](element, props, this);
-            } else {
-              const oldValue = prev[key],
-                newValue = this._q[key](props, this);
-              if (oldValue !== newValue) {
-                callbacks[key](element, props, this, newValue);
-                prev[key] = newValue;
-              }
+        if (!shouldBeVisible) {
+          i += displayToggle.s;
+        }
+      }
+      if (shouldBeVisible) {
+        const prev = previous[i],
+          callbacks = watch.c;
+        for (let key in callbacks) {
+          if (key === NO_LOOKUP) {
+            callbacks[key](element, props, this);
+          } else {
+            const oldValue = prev[key],
+              newValue = this._q[key](props, this);
+            if (oldValue !== newValue) {
+              callbacks[key](element, props, this, newValue);
+              prev[key] = newValue;
             }
           }
         }
-        i++;
       }
+      i++;
     }
   }
 };
 
-Object.defineProperty(ComponentBase.prototype, "hidden", {
+Object.defineProperty(ComponentPrototype, "hidden", {
   set: function (value) {
     this.el.hidden = value;
   }
 });
 
+const ComponentBase = {
+  stubs: {},
+  prototype: ComponentPrototype
+};
+
 /**
- * Creates the constructor function for a component definition.
  *
- * @param {*} baseComponent - a component definition to inherit from.
- * @returns the newly created component definition function.
+ * @param {function} ComponentFunction - The Component definition function to add bits to.
+ * @param {function} BaseComponentFunction - A Component definition function to inherit bits from.
+ * @returns the ComponentFunction with bits added.
  */
-export function createConstructor(baseComponent) {
-  const Component = function () {
-    const root = (this.el = this._n.cloneNode(true)),
-      dynamicElements = (this._e = []),
-      stash = (this._s = []),
-      previous = (this._p = []),
-      refs = (this.refs = {});
-    this.ctrl = {};
-    this.props = {};
-    this._l = this._w.length;
-    this._b(this, root, dynamicElements, stash, previous, refs);
-  };
-
-  const proto = (Component.prototype = Object.create(baseComponent.prototype, {
-    constructor: {
-      value: Component
+export function initConstructor(ComponentFunction, BaseComponentFunction) {
+  const proto = (ComponentFunction.prototype = Object.create(
+    BaseComponentFunction.prototype,
+    {
+      constructor: {
+        value: ComponentFunction
+      }
     }
-  }));
-
-  // This lets us assign to prototype without replacing it.
-  Object.defineProperty(Component, "methods", {
+  ));
+  Object.defineProperty(ComponentFunction, "methods", {
     set: function (value) {
       Object.assign(proto, value);
     },
@@ -151,24 +142,17 @@ export function createConstructor(baseComponent) {
       return proto;
     }
   });
-  Component.create = function (props, ctrl) {
-    const component = new Component();
-    component.render(props, ctrl);
-    return component;
-  };
-  Component.stubs = Object.assign({}, baseComponent.stubs);
-  return Component;
+  ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
+  return ComponentFunction;
 }
 
-export function defineComponent(html, watches, queries, buildFunction, inheritFrom) {
-  const ComponentDefinition = createConstructor(inheritFrom || ComponentBase);
+export function defineComponent(html, watches, queries, contructor, inheritFrom) {
+  const ComponentDefinition = initConstructor(contructor, inheritFrom || ComponentBase);
   const proto = ComponentDefinition.prototype;
   throwAway.innerHTML = html;
-  //Ensure these do not clash with fields on the component itself.
   proto._w = watches;
   proto._q = queries;
-  proto._b = buildFunction;
-  proto._n = throwAway.content.firstChild;
-  proto.base = ComponentBase.prototype;
+  proto._t = throwAway.content.firstChild;
+  proto.base = ComponentPrototype;
   return ComponentDefinition;
 }

package/lib/createComponent.js

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

package/lib/extend.js

@@ -1,4 +1,4 @@
-import { createConstructor } from "./component";
+import { initConstructor } from "./component";
 
 /**
  * Calls to this function which provide the 2nd argument:
@@ -16,5 +16,7 @@ export function extendComponent(base, componentDef) {
   // and therefore we would not receive it.
   if (componentDef)
     throw new Error("2nd arg to extendComponent must be a JSX arrow function");
-  return createConstructor(base);
+  return initConstructor(function () {
+    base.call(this);
+  }, base);
 }

package/lib/index.js

@@ -1,8 +1,10 @@
 export { defineComponent } from "./component";
 export { extendComponent } from "./extend";
 export { mount } from "./mount";
-export { nestComponent } from "./nest";
+export { createComponent } from "./createComponent";
+export { nestComponent } from "./nestComponent";
 export { saveRef } from "./refs";
+export { savePart } from "./part";
 export { KeyedRepeater } from "./repeaters/keyed";
 export { SequentialRepeater } from "./repeaters/sequential";
 export { Router, route } from "./router";

package/lib/part.js

@@ -0,0 +1,17 @@
+function Part(component, start, end) {
+  this._c = component;
+  this._s = start;
+  this._e = end;
+}
+
+Part.prototype.update = function () {
+  this._c._u(this._s, this._e);
+};
+
+/**
+ * Saves a reference to a part of a component so it can be updated independently.
+ */
+export function savePart(node, component, parts, name, start, end) {
+  parts[name] = new Part(component, start, end);
+  return node;
+}

package/lib/refs.js

@@ -1,19 +1,7 @@
-function Ref(component, node, start, end) {
-  this.node = node;
-  this._c = component;
-  this._s = start;
-  this._e = end;
-}
-
-Ref.prototype.update = function () {
-  this._c._u(this._s, this._e);
-};
-
 /**
  * Saves a reference to a node (element or nested component)
  * Returns the node.
  */
-export function saveRef(node, component, refs, name, start, end) {
-  refs[name] = new Ref(component, node, start, end);
-  return node;
+export function saveRef(node, refs, name) {
+  return (refs[name] = node);
 }

package/lib/repeaters/keyed.js

@@ -1,33 +1,3 @@
-import { trimChildren } from "../utils";
-
-/*
- * Gets a component from the pool.
- */
-function getComponent(pool, componentDefinition, ctrl, key, props) {
-  let component;
-  if (pool.hasOwnProperty(key)) {
-    component = pool[key];
-  } else {
-    component = new componentDefinition();
-    pool[key] = component;
-  }
-  component.render(props, ctrl);
-  return component;
-}
-
-/**
- * Pulls an item forward in an array, to replicate insertBefore.
- * @param {Array} arr
- * @param {any} item
- * @param {Int} to
- */
-function pull(arr, item, to) {
-  const position = arr.indexOf(item);
-  if (position != to) {
-    arr.splice(to, 0, arr.splice(position, 1)[0]);
-  }
-}
-
 /**
  * Repeats nested components, reusing items based on key.
  *
@@ -37,20 +7,9 @@ function pull(arr, item, to) {
 export function KeyedRepeater(componentDefinition, keyFn) {
   this.def = componentDefinition;
   this.keyFn = keyFn;
-  this.keys = []; // keys
-  this.pool = {}; // pool of component instances
+  this.keys = []; // array of keys as last set.
+  this.pool = {}; // pool of component instances.
 }
-const proto = KeyedRepeater.prototype;
-
-/**
- * Retrieves a single component. Though not used in wallace itself, it may
- * be used elsewhere, such as in the router.
- *
- * @param {Object} item - The item which will be passed as props.
- */
-proto.getOne = function (item, ctrl) {
-  return getComponent(this.pool, this.def, ctrl, this.keyFn(item), item);
-};
 
 /**
  * Updates the element's childNodes to match the items.
@@ -58,33 +17,63 @@ proto.getOne = function (item, ctrl) {
  *
  * @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.
  */
-proto.patch = function (e, items, ctrl) {
-  // Attempt to speed up by reducing lookups. Does this even do anything?
-  // Does webpack undo this/do it for for me? Does the engine?
-  const pool = this.pool;
-  const componentDefinition = this.def;
-  const keyFn = this.keyFn;
-  const childNodes = e.childNodes;
-  const itemsLength = items.length;
-  const oldKeySequence = this.keys;
-  const newKeys = [];
+KeyedRepeater.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);
   let item,
+    el,
     key,
     component,
-    childElementCount = oldKeySequence.length + 1;
-  for (let i = 0; i < itemsLength; i++) {
+    anchor = null,
+    fragAnchor = null,
+    untouched = true,
+    append = false,
+    offset = previousKeysLength - itemsLength,
+    i = itemsLength - 1;
+
+  // Working backwards saves us having to track moves.
+  const frag = document.createDocumentFragment();
+  while (i >= 0) {
     item = items[i];
     key = keyFn(item);
-    component = getComponent(pool, componentDefinition, ctrl, key, item);
-    newKeys.push(key);
-    if (i > childElementCount) {
-      e.appendChild(component.el);
-    } else if (key !== oldKeySequence[i]) {
-      e.insertBefore(component.el, childNodes[i]);
-      pull(oldKeySequence, key, i);
+    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--;
   }
-  this.keys = newKeys;
-  trimChildren(e, childNodes, itemsLength);
+
+  if (append) {
+    e.appendChild(frag);
+  }
+
+  let toStrip = previousKeysSet.size;
+  while (toStrip > 0) {
+    e.removeChild(childNodes[0]);
+    toStrip--;
+  }
+
+  this.keys = newKeys.reverse();
 };

package/lib/repeaters/sequential.js

@@ -1,5 +1,3 @@
-import { trimChildren } from "../utils";
-
 /**
  * Repeats nested components, yielding from its pool sequentially.
  *
@@ -20,15 +18,16 @@ export function SequentialRepeater(componentDefinition) {
  * @param {any} ctrl - The parent item's controller.
  */
 SequentialRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool;
-  const componentDefinition = this.def;
-  const childNodes = e.childNodes;
-  const itemsLength = items.length;
-  let component,
-    poolCount = pool.length,
+  const pool = this.pool,
+    componentDefinition = this.def,
+    childNodes = e.childNodes,
+    itemsLength = items.length,
     childElementCount = this.count;
+  let i = 0,
+    component,
+    poolCount = pool.length;
 
-  for (let i = 0; i < itemsLength; i++) {
+  while (i < itemsLength) {
     if (i < poolCount) {
       component = pool[i];
     } else {
@@ -40,7 +39,12 @@ SequentialRepeater.prototype.patch = function (e, items, ctrl) {
     if (i >= childElementCount) {
       e.appendChild(component.el);
     }
+    i++;
   }
   this.count = itemsLength;
-  trimChildren(e, childNodes, itemsLength);
+  let lastIndex = childNodes.length - 1;
+  let keepIndex = itemsLength - 1;
+  for (let i = lastIndex; i > keepIndex; i--) {
+    e.removeChild(childNodes[i]);
+  }
 };

package/lib/router.js

@@ -60,7 +60,7 @@ Router.methods = {
     }
   },
   mount(component) {
-    this.el.innerHTML = "";
+    this.el.textContent = "";
     this.el.appendChild(component.el);
   }
 };

package/lib/types.d.ts

@@ -11,12 +11,13 @@
   1. Components
   2. JSX
   3. Nesting
-  4. Directives
-  5. Controllers
-  6. Inheritance
-  7. Stubs
-  8. TypeScript
-  9. Helpers
+  4. Repeating
+  5. Directives
+  6. Controllers
+  7. Inheritance
+  8. Stubs
+  9. TypeScript
+ 10. Helpers
 
 For more detailed documentation go to https://github.com/wallace-js/wallace
 
@@ -145,9 +146,13 @@ Component instances have the following fields:
 
 - `props` the data for this component instance.
 - `ctrl` the controller object.
-- `refs` an object with references to node.
 - `el` the component instance's root element.
 
+Optionally:
+
+- `ref` an object containing named elements or nested components.
+- `part` an object containing named parts.
+
 Both `props` and `ctrl` are set during the `render` method before calling `update`.
 There are no restrictions on types but typically:
 
@@ -175,7 +180,7 @@ Other than that, its standard JSX, except for three special cases:
 
 ## 3. Nesting
 
-To nest or repeat components use its name followed by `.nest` or `.repeat`:
+To nest a component use its name followed by `.nest` and pass `props` if needed:
 
 ```tsx
 const Task = (task) => (<div></div>);
@@ -196,11 +201,46 @@ const TaskList = (tasks) => (
 
 Notes:
 
- - You cannot use nest or repeat on the root element.
+ - You cannot use nest on the root element.
+
+## 4. Repeating
+
+To repeat a component use its name followed by `.repeat` and pass `items`:
+
+```tsx
+const Task = (task) => (<div></div>);
+
+const TaskList = (tasks) => (
+  <div>
+    <Task.repeat items={tasks} />
+  </div>
+);
+```
+
+This form reuses components sequentially, which may cause issues with CSS animations
+and focus, in which case you should use a keyed repeater by passing `key` which can
+be a string or a function:
+
+```tsx
+const TaskList = (tasks) => (
+  <div>
+    <Task.repeat items={tasks} key="id"/>
+  </div>
+);
+
+const TaskList = (tasks) => (
+  <div>
+    <Task.repeat items={tasks} key={(x) => x.id}/>
+  </div>
+);
+```
+
+Notes:
+
+ - You cannot repeat on the root element.
  - Repeat must be the only child element under its parent.
- - The `props` expects an array on repeat (See **TypeScript** below) 
 
-## 4. Directives
+## 5. Directives
 
 Directives are attributes with special behaviours. 
 
@@ -213,7 +253,7 @@ temporarily change it to something `class x:danger`.
 
 You can define your own directives in your babel config.
 
-## 5. Controllers
+## 6. Controllers
 
 A controller is just an object you create which gets passed down to every nested
 component, making it a convenient place to handle:
@@ -264,7 +304,7 @@ TaskList.methods = {
 };
 ```
 
-## 6. Inheritance
+## 7. Inheritance
 
 You can creat new component defintion by extending another one, either preserving the
 base's structure, or overriding it:
@@ -280,7 +320,7 @@ const Child2 = extendComponent(Parent, ({name}) => <h3>{name}</h3>);
 
 Either way the new component definition inherits the parent *prototype* and *stubs*.
 
-## 7. Stubs
+## 8. Stubs
 
 Stubs are named placeholders for nested components which are requested in the JSX:
 
@@ -313,7 +353,7 @@ Notes:
  - Stubs are separate components, so cannot access methods on the containing component
    through `self` (use the controller for that kind of thing).
 
-## 8. TypeScript
+## 9. TypeScript
 
 The main type is `Uses` which must be placed right after the comonent name:
 
@@ -337,7 +377,7 @@ const Task: Uses<null> = () => <div>Hello</div>;
 
 ### Props
 
-TypeScript will ensure you pass correct props during mounting or nesting:
+TypeScript will ensure you pass correct props during mounting, nesting and repeating:
 
 ```
 const TaskList: Uses<iTask[]> = (tasks) => (
@@ -349,6 +389,8 @@ const TaskList: Uses<iTask[]> = (tasks) => (
     </div>
   </div>
 );
+
+mount("main", TaskList, [{test: 'foo'}]);
 ```
 
 ### Controller
@@ -435,7 +477,7 @@ Wallace defines some other types you may use:
     constructor, not a class)
  - `ComponentInstance<Props, Controller, Methods>` - a component instance.
 
-## 9. Helpers
+## 10. Helpers
 
 Each of these has their own JSDoc, we just lsit them here.
 
@@ -513,10 +555,12 @@ declare module "wallace" {
     }): JSX.Element;
     repeat?({
       items,
+      key,
       show,
       hide
     }: {
       items: Array<Props>;
+      key?: string | ((item: Props) => any);
       show?: boolean;
       hide?: boolean;
     }): JSX.Element;
@@ -526,10 +570,6 @@ declare module "wallace" {
       ThisType<ComponentInstance<Props, Controller, Methods>>;
     // Methods will not be available on nested component, so omit.
     readonly stubs?: Record<string, ComponentFunction<Props, Controller>>;
-    create?(
-      props?: Props,
-      ctrl?: Controller
-    ): ComponentInstance<Props, Controller, Methods>;
   }
 
   type ComponenMethods<Props, Controller> = {
@@ -559,8 +599,7 @@ declare module "wallace" {
     Methods extends object = {}
   > = ComponentFunction<Props, Controller, Methods>;
 
-  export interface Ref {
-    node: HTMLElement | ComponentInstance;
+  export interface Part {
     update(): void;
   }
 
@@ -575,7 +614,8 @@ declare module "wallace" {
     el: HTMLElement;
     props: Props;
     ctrl: Controller;
-    refs: { [key: string]: Ref };
+    ref: { [key: string]: HTMLElement | ComponentInstance };
+    part: { [key: string]: Part };
     base: Component<Props, Controller>;
   } & Component<Props, Controller> &
     Methods;
@@ -620,6 +660,18 @@ declare module "wallace" {
     update(): void;
   }
 
+  /**
+   * Creates a component instance and renders it.
+   * @param def
+   * @param props
+   * @param ctrl
+   */
+  export function createComponent<Props, Controller, Methods extends object = {}>(
+    def: ComponentFunction<Props, Controller, Methods>,
+    props?: Props,
+    ctrl?: Controller
+  ): ComponentInstance<Props, Controller, Methods>;
+
   /**
    * Use to define a new component which extends another component, meaning it will
    * inherit its prototye and stubs.
@@ -634,9 +686,9 @@ declare module "wallace" {
     Controller = any,
     Methods extends object = {}
   >(
-    base: Uses<Props, Controller, Methods>,
+    base: ComponentFunction<Props, Controller, Methods>,
     componentFunc?: ComponentFunction<Props, Controller, Methods>
-  ): Uses<Props, Controller, Methods>;
+  ): ComponentFunction<Props, Controller, Methods>;
 
   /**
    * *Replaces* element with an instance of componentDefinition and renders it.
@@ -645,7 +697,7 @@ declare module "wallace" {
    */
   export function mount<Props = any, Controller = any, Methods extends object = {}>(
     element: string | HTMLElement,
-    componentDefinition: Uses<Props, Controller, Methods>,
+    componentDefinition: ComponentFunction<Props, Controller, Methods>,
     props?: Props,
     ctrl?: Controller
   ): ComponentInstance<Props, Controller, Methods>;
@@ -868,6 +920,32 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   items?: MustBeExpression;
 
+  /** ## Wallace directive: key
+   *
+   * Specifies a key for repeated components, creating an association between the key
+   * and the nested component.
+   *
+   * You can specify a property as a string or a function.
+   */
+  key?: any;
+
+  /**
+   * ## Wallace directive: part
+   *
+   * Saves a reference to part of a component allowing you to update it independently.
+   *
+   * ```
+   * <div part:title>
+   *   {name}
+   * </div>
+   * ```
+   *
+   * ```
+   * component.part.title.update();
+   * ```
+   */
+  part?: null;
+
   /**
    * ## Wallace directive: props
    *
@@ -879,10 +957,7 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: ref
    *
-   * Saves a reference to a node allowing you to:
-   *
-   * 1. Access the element or component as `ref.node`
-   * 2. Update the all nested elements using `ref.update()`.
+   * Saves a reference to an element or nested component.
    *
    * ```
    * <div ref:title>
@@ -891,11 +966,8 @@ interface DirectiveAttributes extends AllDomEvents {
    * ```
    *
    * ```
-   * component.refs.title.update();
-   * component.refs.title.node.textContent = 'hello';
+   * component.ref.title.textContent = 'hello';
    * ```
-   *
-   * Requires a qualifier, but you lose the tooltip in that format.
    */
   ref?: null;
 
@@ -954,8 +1026,10 @@ declare namespace JSX {
      *   ```
      *   <MyComponent.nest props={singleProps} />
      *   <MyComponent.repeat items={arrayOfProps} />
+     *   <MyComponent.repeat items={arrayOfProps} key="id"/>
+     *   <MyComponent.repeat items={arrayOfProps} key={(i) => i.id}/>
      *   ```
-     * Note that repeated components must not have siblings.
+     * Note that repeated components may not have siblings.
      *
      * Available Wallace directives:
      *
@@ -967,10 +1041,12 @@ declare namespace JSX {
      * - `hide` sets an element or component's hidden property.
      * - `html` Set the element's `innnerHTML` property.
      * - `if` excludes an element from the DOM.
+     * - `key` specifies a key for repeated items.
      * - `items` set items for repeated component, must be an array of props.
      * - `on[EventName]` creates an event handler (note the code is copied)
+     * - `part:xyz` saves a reference to part of a component so it can be updated
      * - `props` specifes props for a nested components.
-     * - `ref:xyz` saves a reference to node, allowing partial updates or access to element/component.
+     * - `ref:xyz` saves a reference to an element or nested omponent.
      * - `show` sets and element or component's hidden property.
      * - `style:xyz` sets a specific style property.
      * - `toggle:xyz` toggles `xyz` as defined by `class:xyz` on same element, or class

package/lib/utils.js

@@ -6,21 +6,6 @@ export function replaceNode(nodeToReplace, newNode) {
   nodeToReplace.parentNode.replaceChild(newNode, nodeToReplace);
 }
 
-/**
- * Trims the unwanted child elements from the end.
- *
- * @param {Node} e
- * @param {Array} childNodes
- * @param {Int} itemsLength
- */
-export function trimChildren(e, childNodes, itemsLength) {
-  let lastIndex = childNodes.length - 1;
-  let keepIndex = itemsLength - 1;
-  for (let i = lastIndex; i > keepIndex; i--) {
-    e.removeChild(childNodes[i]);
-  }
-}
-
 /**
  * Stash something on the component. Returns the element.
  * The generated code is expected to keep track of the position.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "wallace",
-  "version": "0.7.2",
+  "version": "0.10.0",
   "author": "Andrew Buchan",
-  "description": "The framework that brings you FREEDOM!!",
+  "description": "An insanely small, fast, intuitive and extendable front-end framework",
   "license": "ISC",
   "main": "lib/index.js",
   "files": [
@@ -14,8 +14,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.7.0",
+    "babel-plugin-wallace": "^0.10.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "8ddf878a5e0119acc5edea32f08b7fc8a40974f1"
+  "gitHead": "5516e673ca0e4c0a01644701b914ca923e000580"
 }