wallace 0.0.8 → 0.2.0

package/lib/component.js

@@ -1,3 +1,5 @@
+const ALWAYS_UPDATE = "__";
+
 /**
  * The base component.
  */
@@ -8,18 +10,59 @@ export function Component() {
   this.ref = {}; // user set references to elements or components.
   // Internal state objects
   this._e = {}; // The dynamic elements in the DOM.
-  this._p = {}; // The previous values for watches to compare against.
   this._s = []; // A stash for misc objects.
+  this._p = {}; // The previous values for watches to compare against.
+  this._r = {}; // The current values read during an update.
 }
 
+Component.stubs = {};
+
 var proto = Component.prototype;
 
 Object.defineProperty(proto, "hidden", {
   set: function (value) {
     this.el.hidden = value;
-  },
+  }
 });
 
+proto._gs = function (name) {
+  return this.constructor.stubs[name];
+};
+
+/**
+ * Reads a query during update, returns an array with (oldValue, newValue, changed)
+ * and saves the old value. Must reset this._r before each run.
+ */
+proto._rq = function (props, key) {
+  const run = this._r;
+  if (run[key] === undefined) {
+    let oldValue = this._p[key];
+    const newValue = this._q[key](props, this);
+    this._p[key] = newValue;
+    const rtn = [newValue, oldValue, newValue !== oldValue];
+    run[key] = rtn;
+    return rtn;
+  }
+  return run[key];
+};
+
+/**
+ * Applies the callbacks.
+ */
+proto._ac = function (props, element, callbacks) {
+  for (let key in callbacks) {
+    let callback = callbacks[key];
+    if (key === ALWAYS_UPDATE) {
+      callback(element, props, this);
+    } else {
+      const result = this._rq(props, key);
+      if (result[2]) {
+        callback(element, props, this, result[0]);
+      }
+    }
+  }
+};
+
 /**
  * The render function that gets called by parent components.
  */
@@ -40,10 +83,8 @@ proto.update = function () {
     parent,
     displayToggle,
     detacher,
-    lookupReturn,
     lookupTrue,
     shouldBeVisible,
-    visibilityChanged,
     detachedElements,
     detachedElement,
     index,
@@ -51,11 +92,10 @@ proto.update = function () {
     thisElement;
 
   const watches = this._w;
-  const lookup = this._l;
   const props = this.props;
-  lookup.reset();
   const il = watches.length;
-  /* 
+  this._r = {};
+  /*
   Watches is an array of objects with keys:
     e: the element reference (string)
     c: the callbacks (object)
@@ -79,10 +119,8 @@ proto.update = function () {
     i++;
     shouldBeVisible = true;
     if (displayToggle) {
-      lookupReturn = lookup.get(this, props, displayToggle.q);
-      lookupTrue = !!lookupReturn.n;
+      lookupTrue = !!this._rq(props, displayToggle.q)[0];
       shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
-      visibilityChanged = lookupTrue != !!lookupReturn.o;
       detacher = displayToggle.d;
       if (detacher) {
         index = detacher.i;
@@ -95,10 +133,7 @@ proto.update = function () {
             Object.keys(detachedElements).filter(function (k) {
               return k < index && detachedElements[k];
             }).length;
-          parent.insertBefore(
-            detachedElement,
-            parent.childNodes[adjustedIndex],
-          );
+          parent.insertBefore(detachedElement, parent.childNodes[adjustedIndex]);
           detachedElements[index] = null;
         } else if (!shouldBeVisible && !detachedElement) {
           thisElement = this._e[watch.e];
@@ -113,7 +148,7 @@ proto.update = function () {
       }
     }
     if (shouldBeVisible) {
-      lookup.applyCallbacks(this, props, element, watch.c);
+      this._ac(props, element, watch.c);
     }
   }
 };

package/lib/index.js

@@ -1,26 +1,22 @@
-import { createComponent, watch, mount } from "./utils";
+import { mount, watch } from "./utils";
 import { Component } from "./component";
 import { KeyedRepeater, SequentialRepeater } from "./repeaters";
 import {
   extendComponent,
+  defineComponent,
   findElement,
   getKeyedRepeater,
   getSequentialRepeater,
   onEvent,
   nestComponent,
-  defineComponent,
-  extendPrototype,
-  stashMisc,
   saveRef,
+  stashMisc
 } from "./initCalls";
 
 export {
-  extendComponent,
   Component,
-  createComponent,
-  watch,
   defineComponent,
-  extendPrototype,
+  extendComponent,
   findElement,
   getKeyedRepeater,
   getSequentialRepeater,
@@ -28,7 +24,8 @@ export {
   mount,
   nestComponent,
   onEvent,
-  stashMisc,
   saveRef,
   SequentialRepeater,
+  stashMisc,
+  watch
 };

package/lib/initCalls.js

@@ -1,103 +1,92 @@
 import { Component } from "./component";
-import { Lookup } from "./lookup";
 import { buildComponent, replaceNode } from "./utils";
 import { KeyedRepeater, SequentialRepeater } from "./repeaters";
 const throwAway = document.createElement("template");
 
 /**
- * Create an element from html string
+ * Create an element from html string.
  */
 function makeEl(html) {
   throwAway.innerHTML = html;
   return throwAway.content.firstChild;
 }
 
-export const getProps = (component) => {
-  return component.props;
-};
-
-export const findElement = (rootElement, path) => {
+export function findElement(rootElement, path) {
   return path.reduce((acc, index) => acc.childNodes[index], rootElement);
-};
+}
 
-export const nestComponent = (rootElement, path, cls) => {
+export function nestComponent(rootElement, path, cls) {
   const el = findElement(rootElement, path),
     child = buildComponent(cls);
   replaceNode(el, child.el);
   return child;
-};
+}
 
 /**
  * Saves a reference to element or nested component. Returns the element.
  */
-export const saveRef = (element, component, name) => {
+export function saveRef(element, component, name) {
   component.ref[name] = element;
   return element;
-};
+}
 
 /**
  * Stash something on the component. Returns the element.
  * The generated code is expected to keep track of the position.
  */
-export const stashMisc = (element, component, object) => {
+export function stashMisc(element, component, object) {
   component._s.push(object);
   return element;
-};
+}
 
-export const onEvent = (element, eventName, callback) => {
+export function onEvent(element, eventName, callback) {
   element.addEventListener(eventName, callback);
   return element;
-};
+}
 
-export const getKeyedRepeater = (cls, keyFn) => {
+export function getKeyedRepeater(cls, keyFn) {
   return new KeyedRepeater(cls, keyFn);
-};
+}
 
-export const getSequentialRepeater = (cls) => {
+export function getSequentialRepeater(cls) {
   return new SequentialRepeater(cls);
-};
+}
 
-export function defineComponent(
-  html,
-  watches,
-  lookups,
-  buildFunction,
-  inheritFrom,
-  prototypeExtras,
-) {
-  const Constructor = extendPrototype(
-    inheritFrom || Component,
-    prototypeExtras,
-  );
-  extendComponent(Constructor.prototype, html, watches, lookups, buildFunction);
-  return Constructor;
+export function extendComponent(base, componentDef) {
+  // This function call will have been replaced if 2nd arg is a valid component func.
+  // and therefor we would not receive it.
+  if (componentDef)
+    throw new Error("2nd arg to extendComponent must be a JSX arrow function");
+  return _createConstructor(base);
 }
 
-export function extendComponent(
-  prototype,
-  html,
-  watches,
-  lookups,
-  buildFunction,
-) {
+export function defineComponent(html, watches, queries, buildFunction, inheritFrom) {
+  const ComponentDefinition = _createConstructor(inheritFrom || Component);
+  const prototype = ComponentDefinition.prototype;
   //Ensure these do not clash with fields on the component itself.
   prototype._w = watches;
-  prototype._l = new Lookup(lookups);
+  prototype._q = queries;
   prototype._b = buildFunction;
   prototype._n = makeEl(html);
+  return ComponentDefinition;
 }
 
-export function extendPrototype(base, prototypeExtras) {
-  const Constructor = function () {
+function _createConstructor(base) {
+  const ComponentDefinition = function () {
     base.call(this);
   };
-  Constructor.prototype = Object.create(base && base.prototype, {
+  ComponentDefinition.stubs = {};
+  Object.assign(ComponentDefinition.stubs, base.stubs);
+  // This is a helper function for the user.
+  ComponentDefinition.methods = function (obj) {
+    Object.assign(ComponentDefinition.prototype, obj);
+  };
+  ComponentDefinition.prototype = Object.create(base && base.prototype, {
     constructor: {
-      value: Constructor,
+      value: ComponentDefinition,
       writable: true,
-      configurable: true,
-    },
+      configurable: true
+    }
   });
-  Object.assign(Constructor.prototype, prototypeExtras);
-  return Constructor;
+  return ComponentDefinition;
 }

package/lib/repeaters.js

@@ -1,4 +1,4 @@
-import { createComponent } from "./utils";
+import { buildComponent } from "./utils";
 
 /*
  * Gets a component from the pool.
@@ -7,11 +7,11 @@ function getComponent(pool, componentDefinition, ctrl, key, props) {
   let component;
   if (pool.hasOwnProperty(key)) {
     component = pool[key];
-    component.render(props, ctrl);
   } else {
-    component = createComponent(componentDefinition, props, ctrl);
+    component = buildComponent(componentDefinition);
     pool[key] = component;
   }
+  component.render(props, ctrl);
   return component;
 }
 
@@ -50,10 +50,10 @@ function pull(arr, item, to) {
  * @param {function} keyFn - A function which obtains the key.
  */
 export function KeyedRepeater(componentDefinition, keyFn) {
-  this._v = componentDefinition;
-  this._f = keyFn;
-  this._k = []; // keys
-  this._p = {}; // pool of component instances
+  this.def = componentDefinition;
+  this.keyFn = keyFn;
+  this.keys = []; // keys
+  this.pool = {}; // pool of component instances
 }
 const proto = KeyedRepeater.prototype;
 
@@ -64,7 +64,7 @@ const proto = KeyedRepeater.prototype;
  * @param {Object} item - The item which will be passed as props.
  */
 proto.getOne = function (item, ctrl) {
-  return getComponent(this._p, this._v, ctrl, this._f(item), item);
+  return getComponent(this.pool, this.def, ctrl, this.keyFn(item), item);
 };
 
 /**
@@ -77,12 +77,12 @@ proto.getOne = function (item, ctrl) {
 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._p;
-  const componentDefinition = this._v;
-  const keyFn = this._f;
+  const pool = this.pool;
+  const componentDefinition = this.def;
+  const keyFn = this.keyFn;
   const childNodes = e.childNodes;
   const itemsLength = items.length;
-  const oldKeySequence = this._k;
+  const oldKeySequence = this.keys;
   const newKeys = [];
   let item,
     key,
@@ -100,7 +100,7 @@ proto.patch = function (e, items, ctrl) {
       pull(oldKeySequence, key, i);
     }
   }
-  this._k = newKeys;
+  this.keys = newKeys;
   trimChildren(e, childNodes, itemsLength);
 };
 
@@ -110,9 +110,9 @@ proto.patch = function (e, items, ctrl) {
  * @param {componentDefinition} componentDefinition - The class ComponentDefinition to create.
  */
 export function SequentialRepeater(componentDefinition) {
-  this._v = componentDefinition;
-  this._p = []; // pool of component instances
-  this._c = 0; // Child element count
+  this.def = componentDefinition;
+  this.pool = []; // pool of component instances
+  this.count = 0; // Child element count
 }
 
 /**
@@ -124,29 +124,27 @@ export function SequentialRepeater(componentDefinition) {
  * @param {any} ctrl - The parent item's controller.
  */
 SequentialRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this._p;
-  const componentDefinition = this._v;
+  const pool = this.pool;
+  const componentDefinition = this.def;
   const childNodes = e.childNodes;
   const itemsLength = items.length;
-  let item,
-    component,
+  let component,
     poolCount = pool.length,
-    childElementCount = this._c;
+    childElementCount = this.count;
 
   for (let i = 0; i < itemsLength; i++) {
-    item = items[i];
     if (i < poolCount) {
       component = pool[i];
-      component.render(item, ctrl);
     } else {
-      component = createComponent(componentDefinition, item, ctrl);
+      component = buildComponent(componentDefinition);
       pool.push(component);
       poolCount++;
     }
+    component.render(items[i], ctrl);
     if (i >= childElementCount) {
       e.appendChild(component.el);
     }
   }
-  this._c = itemsLength;
+  this.count = itemsLength;
   trimChildren(e, childNodes, itemsLength);
 };