wallace 0.0.6 → 0.0.7

package/lib/component.js

@@ -2,14 +2,14 @@
  * The base component.
  */
 export function Component(parent) {
-  this.parent = parent; // The parent component
+  this.parent = parent; // The parent component. TODO: is this needed?
   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;
@@ -36,29 +36,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

@@ -10,7 +10,7 @@ import {
   nestComponent,
   defineComponent,
   extendPrototype,
-  saveMiscObject,
+  stashMisc,
   saveRef,
 } from "./initCalls";
 
@@ -28,7 +28,7 @@ export {
   mount,
   nestComponent,
   onEvent,
-  saveMiscObject,
+  stashMisc,
   saveRef,
   SequentialPool,
 };

package/lib/initCalls.js

@@ -28,7 +28,7 @@ export const nestComponent = (rootElement, path, cls, parent) => {
 };
 
 /**
- * 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;
 };
 
@@ -82,13 +83,8 @@ 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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.7",
     "browserify": "^17.0.1"
   },
-  "gitHead": "3742fbcfdc21146c90252c2436fde91634fafa9e"
+  "gitHead": "625563b34b61857f1180da42d4b1f7bc229440c9"
 }