wallace 0.0.7 → 0.1.0

package/lib/component.js

@@ -1,17 +1,22 @@
+const ALWAYS_UPDATE = "__";
+
 /**
  * The base component.
  */
-export function Component(parent) {
-  this.parent = parent; // The parent component. TODO: is this needed?
+export function Component() {
+  this.ctrl = undefined; // The controller.
   this.props = undefined; // The props passed to the component. May be changed.
   this.el = null; // the element - will be set during build.
   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", {
@@ -20,11 +25,50 @@ Object.defineProperty(proto, "hidden", {
   },
 });
 
+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(result[0], result[1], element, props, this);
+      }
+    }
+  }
+};
+
 /**
- * Sets the props and updates the component.
+ * The render function that gets called by parent components.
  */
-proto.render = function (props) {
+proto.render = function (props, ctrl) {
   this.props = props;
+  this.ctrl = ctrl;
   this.update();
 };
 
@@ -39,10 +83,8 @@ proto.update = function () {
     parent,
     displayToggle,
     detacher,
-    lookupReturn,
     lookupTrue,
     shouldBeVisible,
-    visibilityChanged,
     detachedElements,
     detachedElement,
     index,
@@ -50,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)
@@ -78,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;
@@ -96,7 +135,7 @@ proto.update = function () {
             }).length;
           parent.insertBefore(
             detachedElement,
-            parent.childNodes[adjustedIndex],
+            parent.childNodes[adjustedIndex]
           );
           detachedElements[index] = null;
         } else if (!shouldBeVisible && !detachedElement) {
@@ -112,7 +151,7 @@ proto.update = function () {
       }
     }
     if (shouldBeVisible) {
-      lookup.applyCallbacks(this, props, element, watch.c);
+      this._ac(props, element, watch.c);
     }
   }
 };

package/lib/index.js

@@ -1,34 +1,31 @@
-import { createComponent, createProxy, mount } from "./utils";
+import { mount, watch } from "./utils";
 import { Component } from "./component";
-import { KeyedPool, SequentialPool } from "./pool";
+import { KeyedRepeater, SequentialRepeater } from "./repeaters";
 import {
   extendComponent,
+  defineComponent,
   findElement,
-  getKeyedPool,
-  getSequentialPool,
+  getKeyedRepeater,
+  getSequentialRepeater,
   onEvent,
   nestComponent,
-  defineComponent,
-  extendPrototype,
-  stashMisc,
   saveRef,
+  stashMisc,
 } from "./initCalls";
 
 export {
-  extendComponent,
   Component,
-  createComponent,
-  createProxy,
   defineComponent,
-  extendPrototype,
+  extendComponent,
   findElement,
-  getKeyedPool,
-  getSequentialPool,
-  KeyedPool,
+  getKeyedRepeater,
+  getSequentialRepeater,
+  KeyedRepeater,
   mount,
   nestComponent,
   onEvent,
-  stashMisc,
   saveRef,
-  SequentialPool,
+  SequentialRepeater,
+  stashMisc,
+  watch,
 };

package/lib/initCalls.js

@@ -1,106 +1,98 @@
 import { Component } from "./component";
-import { Lookup } from "./lookup";
 import { buildComponent, replaceNode } from "./utils";
-import { KeyedPool, SequentialPool } from "./pool";
+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, parent) => {
+export function nestComponent(rootElement, path, cls) {
   const el = findElement(rootElement, path),
-    child = buildComponent(cls, parent);
+    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;
-};
+}
 
-/**
- * Creates a pool.
- */
-export const getKeyedPool = (cls, keyFn) => {
-  return new KeyedPool(cls, keyFn);
-};
+export function getKeyedRepeater(cls, keyFn) {
+  return new KeyedRepeater(cls, keyFn);
+}
 
-export const getSequentialPool = (cls) => {
-  return new SequentialPool(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,
+export function defineComponent(
   html,
   watches,
-  lookups,
+  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 (parent) {
-    base.call(this, parent);
+function _createConstructor(base) {
+  const ComponentDefinition = function () {
+    base.call(this);
+  };
+  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);
   };
-  Constructor.prototype = Object.create(base && base.prototype, {
+  ComponentDefinition.prototype = Object.create(base && base.prototype, {
     constructor: {
-      value: Constructor,
+      value: ComponentDefinition,
       writable: true,
       configurable: true,
     },
   });
-  Object.assign(Constructor.prototype, prototypeExtras);
-  return Constructor;
+  return ComponentDefinition;
 }

package/lib/{pool.js → repeaters.js}

@@ -1,19 +1,19 @@
-import { createComponent } from "./utils";
+import { buildComponent } from "./utils";
 
 /*
  * Gets a component from the pool.
  */
-const getComponent = (pool, componentClass, key, item, parent) => {
+function getComponent(pool, componentDefinition, ctrl, key, props) {
   let component;
   if (pool.hasOwnProperty(key)) {
     component = pool[key];
-    component.render(item);
   } else {
-    component = createComponent(componentClass, parent, item);
+    component = buildComponent(componentDefinition);
     pool[key] = component;
   }
+  component.render(props, ctrl);
   return component;
-};
+}
 
 /**
  * Trims the unwanted child elements from the end.
@@ -44,29 +44,27 @@ function pull(arr, item, to) {
 }
 
 /**
- * Pools same type components, retrieving by key.
- * Must not be shared.
+ * Repeats nested components, reusing items based on key.
  *
- * @param {class} componentClass - The class of Component to create.
- * @param {function} keyFn - A function which obtains the key to pool by
+ * @param {function} componentDefinition - The ComponentDefinition to create.
+ * @param {function} keyFn - A function which obtains the key.
  */
-export function KeyedPool(componentClass, keyFn) {
-  this._v = componentClass;
-  this._f = keyFn;
-  this._k = []; // keys
-  this._p = {}; // pool of component instances
+export function KeyedRepeater(componentDefinition, keyFn) {
+  this.def = componentDefinition;
+  this.keyFn = keyFn;
+  this.keys = []; // keys
+  this.pool = {}; // pool of component instances
 }
-const proto = KeyedPool.prototype;
+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.
- * @param {Component} parent - The parent component.
  */
-proto.getOne = function (item, parent) {
-  return getComponent(this._p, this._v, this._f(item), item, parent);
+proto.getOne = function (item, ctrl) {
+  return getComponent(this.pool, this.def, ctrl, this.keyFn(item), item);
 };
 
 /**
@@ -75,17 +73,16 @@ proto.getOne = function (item, parent) {
  *
  * @param {DOMElement} e - The DOM element to patch.
  * @param {Array} items - Array of items which will be passed as props.
- * @param {Component} parent - The parent component.
  */
-proto.patch = function (e, items, parent) {
+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 componentClass = 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,
@@ -94,7 +91,7 @@ proto.patch = function (e, items, parent) {
   for (let i = 0; i < itemsLength; i++) {
     item = items[i];
     key = keyFn(item);
-    component = getComponent(pool, componentClass, key, item, parent);
+    component = getComponent(pool, componentDefinition, ctrl, key, item);
     newKeys.push(key);
     if (i > childElementCount) {
       e.appendChild(component.el);
@@ -103,19 +100,19 @@ proto.patch = function (e, items, parent) {
       pull(oldKeySequence, key, i);
     }
   }
-  this._k = newKeys;
+  this.keys = newKeys;
   trimChildren(e, childNodes, itemsLength);
 };
 
 /**
- * Pools same type components, retrieving by sequence.
+ * Repeats nested components, yielding from its pool sequentially.
  *
- * @param {class} componentClass - The class of Component to create.
+ * @param {componentDefinition} componentDefinition - The class ComponentDefinition to create.
  */
-export function SequentialPool(componentClass) {
-  this._v = componentClass;
-  this._p = []; // pool of component instances
-  this._c = 0; // Child element count
+export function SequentialRepeater(componentDefinition) {
+  this.def = componentDefinition;
+  this.pool = []; // pool of component instances
+  this.count = 0; // Child element count
 }
 
 /**
@@ -124,32 +121,30 @@ export function SequentialPool(componentClass) {
  *
  * @param {DOMElement} e - The DOM element to patch.
  * @param {Array} items - Array of items which will be passed as props.
- * @param {Component} parent - The parent component.
+ * @param {any} ctrl - The parent item's controller.
  */
-SequentialPool.prototype.patch = function (e, items, parent) {
-  const pool = this._p;
-  const componentClass = this._v;
+SequentialRepeater.prototype.patch = function (e, items, ctrl) {
+  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);
     } else {
-      component = createComponent(componentClass, parent, item);
+      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);
 };