wallace 0.13.0 → 0.14.1

package/lib/component.js

@@ -35,7 +35,8 @@ const ComponentPrototype = {
     const watches = this._w,
       props = this.props,
       previous = this._p,
-      elements = this._e;
+      elements = this._e,
+      stash = this._s;
     /*
       Watches is an array of objects with keys:
         e: the element index (number)
@@ -61,7 +62,7 @@ const ComponentPrototype = {
         shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
         detacher = displayToggle.d;
         if (detacher) {
-          detacher.apply(element, shouldBeVisible, elements, this._s);
+          detacher.apply(element, shouldBeVisible, elements, stash);
         } else {
           element.hidden = !shouldBeVisible;
         }
@@ -74,7 +75,7 @@ const ComponentPrototype = {
           callbacks = watch.c;
         for (let key in callbacks) {
           if (key === NO_LOOKUP) {
-            callbacks[key](element, props, this);
+            callbacks[key](element, props, this, stash);
           } else {
             const oldValue = prev[key],
               newValue = this._q[key](props, this);

package/lib/detacher.js

@@ -9,18 +9,17 @@ export function Detacher(i, e, s) {
 }
 
 Detacher.prototype.apply = function (element, shouldBeVisible, elements, stash) {
-  let adjustedIndex;
   const index = this.i,
     parent = elements[this.e],
-    detachedElementCache = stash[this.s];
-  let offset = detachedElementCache.get(index) || 0;
-  if (shouldBeVisible && offset === -1) {
-    adjustedIndex = countOffset(detachedElementCache, index);
+    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]);
-    offset = 0;
-  } else if (!shouldBeVisible && offset === 0) {
+    ownOffset = 0;
+  } else if (!shouldBeVisible && ownOffset === 0) {
     parent.removeChild(element);
-    offset = -1;
+    ownOffset = -1;
   }
-  detachedElementCache.set(index, offset);
+  offsetTracker.set(index, ownOffset);
 };

package/lib/index.js

@@ -10,5 +10,6 @@ export { KeyedRepeater } from "./repeaters/keyed";
 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/offsetter.js

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

package/lib/repeaters/keyed.js

@@ -7,17 +7,16 @@ import { countOffset } from "../offsetter";
  *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
 export function KeyedRepeater(componentDefinition, key, adjustmentTracker, initialIndex) {
-  this.def = componentDefinition;
-  if (wallaceConfig.flags.allowRepeaterSiblings) {
-    this.at = adjustmentTracker;
-    this.ii = initialIndex;
-  }
-  this.keys = []; // array of keys as last set.
-  this.pool = {}; // pool of component instances.
+  this.d = componentDefinition;
+  this.k = []; // array of keys as last set.
   if (typeof key === "function") {
-    this.kf = key;
+    this.f = key;
   } else {
-    this.kn = key;
+    this.n = key;
+  }
+  if (wallaceConfig.flags.allowRepeaterSiblings) {
+    this.a = adjustmentTracker;
+    this.i = initialIndex;
   }
 }
 
@@ -25,29 +24,30 @@ export function KeyedRepeater(componentDefinition, key, adjustmentTracker, initi
  * 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 {Map} pool - pool of component instances.
  * @param {any} ctrl - The parent item's controller.
  */
-KeyedRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool,
-    componentDefinition = this.def,
-    keyName = this.kn,
-    keyFn = this.kf,
-    childNodes = e.childNodes,
+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.keys,
+    previousKeys = this.k,
     previousKeysLength = previousKeys.length,
     newKeys = [],
     previousKeysSet = new Set(previousKeys),
-    adjustmentTracker = this.at,
-    initialIndex = this.ii,
     frag = document.createDocumentFragment();
 
   let item,
     el,
     itemKey,
     component,
+    initialIndex,
+    offsetTracker,
     endAnchor = null,
     adjustment = 0,
     anchor = null,
@@ -58,8 +58,10 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
     i = itemsLength - 1;
 
   if (wallaceConfig.flags.allowRepeaterSiblings) {
-    if (adjustmentTracker) {
-      adjustment = countOffset(adjustmentTracker, initialIndex);
+    offsetTracker = this.a;
+    initialIndex = this.i;
+    if (offsetTracker) {
+      adjustment = countOffset(offsetTracker, initialIndex);
       endAnchor = childNodes[previousKeysLength + adjustment] || null;
       anchor = endAnchor;
       untouched = false;
@@ -69,8 +71,11 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
   // Working backwards saves us having to track moves.
   while (i >= 0) {
     item = items[i];
-    itemKey = keyName ? item[keyName] : keyFn(item);
-    component = pool[itemKey] || (pool[itemKey] = 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(itemKey)) {
@@ -80,7 +85,7 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
       offset++;
     } else {
       if (itemKey !== previousKeys[i + offset]) {
-        e.insertBefore(el, anchor);
+        parent.insertBefore(el, anchor);
         untouched = false;
       }
       anchor = el;
@@ -91,20 +96,20 @@ KeyedRepeater.prototype.patch = function (e, items, ctrl) {
   }
 
   if (append) {
-    e.insertBefore(frag, endAnchor);
+    parent.insertBefore(frag, endAnchor);
   }
 
   let toStrip = previousKeysSet.size;
   while (toStrip > 0) {
-    e.removeChild(childNodes[adjustment]);
+    parent.removeChild(childNodes[adjustment]);
     toStrip--;
   }
 
-  this.keys = newKeys.reverse();
+  this.k = newKeys.reverse();
 
   if (wallaceConfig.flags.allowRepeaterSiblings) {
-    if (adjustmentTracker) {
-      adjustmentTracker.set(initialIndex, itemsLength - 1);
+    if (offsetTracker) {
+      offsetTracker.set(initialIndex, itemsLength - 1);
     }
   }
 };

package/lib/repeaters/sequential.js

@@ -7,13 +7,12 @@ import { countOffset } from "../offsetter";
  *   if allowRepeaterSiblings is false the last two parameters are removed.
  */
 export function SequentialRepeater(componentDefinition, adjustmentTracker, initialIndex) {
-  this.def = componentDefinition;
+  this.d = componentDefinition;
+  this.c = 0; // Child count
   if (wallaceConfig.flags.allowRepeaterSiblings) {
-    this.at = adjustmentTracker;
-    this.ii = initialIndex;
+    this.a = adjustmentTracker;
+    this.i = initialIndex;
   }
-  this.pool = []; // pool of component instances
-  this.cc = 0; // Child count
 }
 
 /**
@@ -22,27 +21,30 @@ export function SequentialRepeater(componentDefinition, adjustmentTracker, initi
  *
  * @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, ctrl) {
-  const pool = this.pool,
-    componentDefinition = this.def,
-    childNodes = parent.childNodes,
+SequentialRepeater.prototype.patch = function (parent, items, pool, ctrl) {
+  const componentDefinition = this.d,
+    previousChildCount = this.c,
     itemsLength = items.length,
-    previousChildCount = this.cc,
-    initialIndex = this.ii,
-    adjustmentTracker = this.at;
+    childNodes = parent.childNodes;
+
   let i = 0,
     offset = 0,
     component,
     nextElement,
+    initialIndex,
+    offsetTracker,
     endOfRange = previousChildCount,
     poolCount = pool.length;
 
   if (wallaceConfig.flags.allowRepeaterSiblings) {
-    if (adjustmentTracker) {
+    initialIndex = this.i;
+    offsetTracker = this.a;
+    if (offsetTracker) {
       // The repeat element has siblings
-      offset = countOffset(adjustmentTracker, initialIndex);
+      offset = countOffset(offsetTracker, initialIndex);
       endOfRange += offset;
       nextElement = childNodes[endOfRange] || null;
     }
@@ -61,7 +63,7 @@ SequentialRepeater.prototype.patch = function (parent, items, ctrl) {
     }
     i++;
   }
-  this.cc = itemsLength;
+  this.c = itemsLength;
 
   let removeAtIndex = offset + previousChildCount - 1;
   const stopatIndex = offset + itemsLength - 1;
@@ -69,8 +71,8 @@ SequentialRepeater.prototype.patch = function (parent, items, ctrl) {
     parent.removeChild(childNodes[i]);
   }
   if (wallaceConfig.flags.allowRepeaterSiblings) {
-    if (adjustmentTracker) {
-      adjustmentTracker.set(initialIndex, itemsLength - 1);
+    if (offsetTracker) {
+      offsetTracker.set(initialIndex, itemsLength - 1);
     }
   }
 };

package/lib/toDateString.js

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

package/lib/types.d.ts

@@ -529,7 +529,8 @@ performance and bundle size:
 2.  allowCtrl - enables use of `ctrl` in components.
 3.  allowMethods - adds the `methods` helper to components.
 4.  allowParts  - enables use of parts.
-5.  allowStubs - enables the use of stubs.
+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:
@@ -840,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;
 
@@ -922,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
    *
@@ -1085,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.13.0",
+  "version": "0.14.1",
   "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.13.0",
+    "babel-plugin-wallace": "^0.14.1",
     "browserify": "^17.0.1"
   },
-  "gitHead": "4ee1dce381dcd46dd057f88c198dd5d6f3d257d9"
+  "gitHead": "c60384d682e38095780dd260004299e9c4038583"
 }