wallace 0.0.6 → 0.0.8

package/lib/component.js

@@ -1,15 +1,15 @@
 /**
  * The base component.
  */
-export function Component(parent) {
-  this.parent = parent; // The parent component
+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
+  this.el = null; // the element - will be set during build.
+  this.ref = {}; // user set references to elements or components.
   // Internal state objects
-  this._o = []; // stashed objects like pools.
-  this._e = {}; // stashed elements.
-  this._p = {}; // The previous values for watches to compare against
+  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.
 }
 
 var proto = Component.prototype;
@@ -21,10 +21,11 @@ Object.defineProperty(proto, "hidden", {
 });
 
 /**
- * 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();
 };
 
@@ -36,29 +37,83 @@ proto.update = function () {
   let i = 0,
     watch,
     element,
-    shieldQuery,
-    shieldQueryResult,
-    shouldBeVisible;
+    parent,
+    displayToggle,
+    detacher,
+    lookupReturn,
+    lookupTrue,
+    shouldBeVisible,
+    visibilityChanged,
+    detachedElements,
+    detachedElement,
+    index,
+    adjustedIndex,
+    thisElement;
 
-  const watches = this.__wc;
+  const watches = this._w;
   const lookup = this._l;
   const props = this.props;
   lookup.reset();
   const il = watches.length;
+  /* 
+  Watches is an array of objects with keys:
+    e: the element reference (string)
+    c: the callbacks (object)
+    ?v: visibility toggle (object)
+
+  The display toggle has keys:
+    q: the query key in lookup
+    s: the number of watches to skip as their node is underneath
+    r: reversed
+    ?d: detacher 
+
+  The detacher has keys:
+    i: the initial element index
+    s: the stash key of the detacher (plain object)
+    e: the parent element key
+  */
   while (i < il) {
     watch = watches[i];
-    element = this._e[watch.wk];
-    shieldQuery = watch.sq;
+    element = this._e[watch.e];
+    displayToggle = watch.v;
     i++;
     shouldBeVisible = true;
-    if (shieldQuery) {
-      shieldQueryResult = !!lookup.get(this, props, shieldQuery).n;
-      shouldBeVisible = watch.rv ? shieldQueryResult : !shieldQueryResult;
-      element.hidden = !shouldBeVisible;
-      i += shouldBeVisible ? 0 : watch.sc;
+    if (displayToggle) {
+      lookupReturn = lookup.get(this, props, displayToggle.q);
+      lookupTrue = !!lookupReturn.n;
+      shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
+      visibilityChanged = lookupTrue != !!lookupReturn.o;
+      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) {
+          thisElement = this._e[watch.e];
+          parent.removeChild(thisElement);
+          detachedElements[index] = thisElement;
+        }
+      } else {
+        element.hidden = !shouldBeVisible;
+      }
+      if (!shouldBeVisible) {
+        i += displayToggle.s;
+      }
     }
     if (shouldBeVisible) {
-      lookup.applyCallbacks(this, props, element, watch.cb);
+      lookup.applyCallbacks(this, props, element, watch.c);
     }
   }
 };

package/lib/index.js

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

package/lib/initCalls.js

@@ -1,7 +1,7 @@
 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");
 
 /**
@@ -20,15 +20,15 @@ export const findElement = (rootElement, path) => {
   return path.reduce((acc, index) => acc.childNodes[index], rootElement);
 };
 
-export const nestComponent = (rootElement, path, cls, parent) => {
+export const 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. Can be used to wrap a stash call.
+ * Saves a reference to element or nested component. Returns the element.
  */
 export const saveRef = (element, component, name) => {
   component.ref[name] = element;
@@ -36,10 +36,11 @@ export const saveRef = (element, component, name) => {
 };
 
 /**
- * Saves a misc object (anything that's not an element). Can be used to wrap a stash call.
+ * Stash something on the component. Returns the element.
+ * The generated code is expected to keep track of the position.
  */
-export const saveMiscObject = (element, component, object) => {
-  component._o.push(object);
+export const stashMisc = (element, component, object) => {
+  component._s.push(object);
   return element;
 };
 
@@ -48,15 +49,12 @@ export const onEvent = (element, eventName, callback) => {
   return element;
 };
 
-/**
- * Creates a pool.
- */
-export const getKeyedPool = (cls, keyFn) => {
-  return new KeyedPool(cls, keyFn);
+export const getKeyedRepeater = (cls, keyFn) => {
+  return new KeyedRepeater(cls, keyFn);
 };
 
-export const getSequentialPool = (cls) => {
-  return new SequentialPool(cls);
+export const getSequentialRepeater = (cls) => {
+  return new SequentialRepeater(cls);
 };
 
 export function defineComponent(
@@ -82,21 +80,16 @@ export function extendComponent(
   lookups,
   buildFunction,
 ) {
-  prototype.__wc = watches.map((arr) => ({
-    wk: arr[0], // The key of the corresponding element.
-    sq: arr[1], // The shield query key
-    rv: arr[2], // whether shieldQuery should be flipped
-    sc: arr[3], // The number of items to shield
-    cb: arr[4], // The callbacks - object
-  }));
+  //Ensure these do not clash with fields on the component itself.
+  prototype._w = watches;
   prototype._l = new Lookup(lookups);
   prototype._b = buildFunction;
   prototype._n = makeEl(html);
 }
 
 export function extendPrototype(base, prototypeExtras) {
-  const Constructor = function (parent) {
-    base.call(this, parent);
+  const Constructor = function () {
+    base.call(this);
   };
   Constructor.prototype = Object.create(base && base.prototype, {
     constructor: {

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

@@ -3,17 +3,17 @@ import { createComponent } 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);
+    component.render(props, ctrl);
   } else {
-    component = createComponent(componentClass, parent, item);
+    component = createComponent(componentDefinition, props, ctrl);
     pool[key] = component;
   }
   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;
+export function KeyedRepeater(componentDefinition, keyFn) {
+  this._v = componentDefinition;
   this._f = keyFn;
   this._k = []; // keys
   this._p = {}; // 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._p, this._v, ctrl, this._f(item), item);
 };
 
 /**
@@ -75,13 +73,12 @@ 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 componentDefinition = this._v;
   const keyFn = this._f;
   const childNodes = e.childNodes;
   const itemsLength = items.length;
@@ -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);
@@ -108,12 +105,12 @@ proto.patch = function (e, items, parent) {
 };
 
 /**
- * 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;
+export function SequentialRepeater(componentDefinition) {
+  this._v = componentDefinition;
   this._p = []; // pool of component instances
   this._c = 0; // Child element count
 }
@@ -124,11 +121,11 @@ 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) {
+SequentialRepeater.prototype.patch = function (e, items, ctrl) {
   const pool = this._p;
-  const componentClass = this._v;
+  const componentDefinition = this._v;
   const childNodes = e.childNodes;
   const itemsLength = items.length;
   let item,
@@ -140,9 +137,9 @@ SequentialPool.prototype.patch = function (e, items, parent) {
     item = items[i];
     if (i < poolCount) {
       component = pool[i];
-      component.render(item);
+      component.render(item, ctrl);
     } else {
-      component = createComponent(componentClass, parent, item);
+      component = createComponent(componentDefinition, item, ctrl);
       pool.push(component);
       poolCount++;
     }

package/lib/types.d.ts

@@ -27,9 +27,10 @@ declare module "wallace" {
     element: string | HTMLElement,
     component: Accepts<T>,
     props?: T,
+    ctrl?: any,
   ): Component<T>;
 
-  export function createProxy<T>(obj: T, component: Component<T>): T;
+  export function watch<T>(obj: T, callback: CallableFunction): T;
 
   export function extendPrototype<T>(
     base: Accepts<T>,

package/lib/utils.js

@@ -4,10 +4,9 @@
  * @param {unsure} elementOrId Either a string representing an id, or an element.
  * @param {class} cls The class of Component to create
  * @param {object} props The props to pass to the component (optional)
- * @param {object} parent The parent component (optional)
  */
-export function mount(elementOrId, cls, props, parent) {
-  const component = createComponent(cls, parent, props);
+export function mount(elementOrId, cls, props, ctrl) {
+  const component = createComponent(cls, props, ctrl);
   replaceNode(getElement(elementOrId), component.el);
   return component;
 }
@@ -26,35 +25,34 @@ export function getElement(elementOrId) {
  * Creates a component and initialises it.
  *
  * @param {class} cls The class of Component to create
- * @param {object} parent The parent component (optional)
  * @param {object} props The props to pass to the component (optional)
  */
-export function createComponent(cls, parent, props) {
-  const component = buildComponent(cls, parent);
-  component.render(props);
+export function createComponent(cls, props, ctrl) {
+  const component = buildComponent(cls);
+  component.render(props, ctrl);
   return component;
 }
 
 /**
- * Builds a component.
+ * Builds a component's initial DOM.
  */
-export function buildComponent(cls, parent) {
-  const component = new cls(parent);
-  const prototype = cls.prototype;
-  const dom = prototype._n.cloneNode(true);
+export function buildComponent(cls) {
+  const component = new cls();
+  const proto = cls.prototype;
+  const dom = proto._n.cloneNode(true);
   component.el = dom;
-  component._b(component, dom);
+  proto._b(component, dom);
   return component;
 }
 
 /**
- * Wraps target in a Proxy which calls component.update() whenever it is modified.
+ * Wraps target in a Proxy which calls a function whenever it is modified.
  *
  * @param {*} target - Any object, including arrays.
- * @param {*} component - A component.
- * @returns a Proxy object.
+ * @param {*} callback - A callback function.
+ * @returns a Proxy of the object.
  */
-export const createProxy = (target, component) => {
+export function watch(target, callback) {
   const handler = {
     get(target, key) {
       if (key == "isProxy") return true;
@@ -67,9 +65,9 @@ export const createProxy = (target, component) => {
     },
     set(target, key, value) {
       target[key] = value;
-      component.update();
+      callback();
       return true;
     },
   };
   return new Proxy(target, handler);
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "author": "Andrew Buchan",
   "description": "The framework that brings you glee.",
   "license": "ISC",
@@ -13,8 +13,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.0.6",
+    "babel-plugin-wallace": "^0.0.8",
     "browserify": "^17.0.1"
   },
-  "gitHead": "3742fbcfdc21146c90252c2436fde91634fafa9e"
+  "gitHead": "7548afec467b0e4f6e433a401cca08acb3dc7bc7"
 }