wallace 0.0.5 → 0.0.7

package/lib/component.js

@@ -1,24 +1,19 @@
-const noop = function () {};
-
 /**
  * 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;
 
-proto.onUpdate = noop;
-proto.afterUpdate = noop;
-
 Object.defineProperty(proto, "hidden", {
   set: function (value) {
     this.el.hidden = value;
@@ -28,50 +23,96 @@ Object.defineProperty(proto, "hidden", {
 /**
  * Sets the props and updates the component.
  */
-proto.setProps = function (props) {
+proto.render = function (props) {
   this.props = props;
   this.update();
 };
 
 /**
- * Updates the component.
- */
-proto.update = function () {
-  this.onUpdate();
-  this.updateSelf();
-  this.afterUpdate();
-};
-
-/**
+ * Updates the DOM.
  * Loops over watches, skipping n watches if elements are hidden.
  */
-proto.updateSelf = function () {
+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,4 +1,4 @@
-import { createComponent, mount } from "./utils";
+import { createComponent, createProxy, mount } from "./utils";
 import { Component } from "./component";
 import { KeyedPool, SequentialPool } from "./pool";
 import {
@@ -10,7 +10,7 @@ import {
   nestComponent,
   defineComponent,
   extendPrototype,
-  saveMiscObject,
+  stashMisc,
   saveRef,
 } from "./initCalls";
 
@@ -18,6 +18,7 @@ export {
   extendComponent,
   Component,
   createComponent,
+  createProxy,
   defineComponent,
   extendPrototype,
   findElement,
@@ -27,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/lib/lookup.js

@@ -1,4 +1,5 @@
-const ALWAYS_UPDATE = "*";
+const ALWAYS_UPDATE = "__";
+
 /**
  * Used internally.
  * An object which pools the results of lookup queries so we don't have to

package/lib/pool.js

@@ -7,7 +7,7 @@ const getComponent = (pool, componentClass, key, item, parent) => {
   let component;
   if (pool.hasOwnProperty(key)) {
     component = pool[key];
-    component.setProps(item);
+    component.render(item);
   } else {
     component = createComponent(componentClass, parent, item);
     pool[key] = component;
@@ -140,7 +140,7 @@ SequentialPool.prototype.patch = function (e, items, parent) {
     item = items[i];
     if (i < poolCount) {
       component = pool[i];
-      component.setProps(item);
+      component.render(item);
     } else {
       component = createComponent(componentClass, parent, item);
       pool.push(component);

package/lib/types.d.ts

@@ -16,9 +16,9 @@ declare module "wallace" {
 
   export type Accepts<Type> = ComponentFunction<Type>;
 
-  export interface Component {
+  export interface Component<T> {
     update(): void;
-    setProps(props: any): void;
+    render(props: T): void;
     el: HTMLElement;
   }
 
@@ -27,7 +27,9 @@ declare module "wallace" {
     element: string | HTMLElement,
     component: Accepts<T>,
     props?: T,
-  ): Component;
+  ): Component<T>;
+
+  export function createProxy<T>(obj: T, component: Component<T>): T;
 
   export function extendPrototype<T>(
     base: Accepts<T>,

package/lib/utils.js

@@ -31,8 +31,7 @@ export function getElement(elementOrId) {
  */
 export function createComponent(cls, parent, props) {
   const component = buildComponent(cls, parent);
-  component.props = props;
-  component.update();
+  component.render(props);
   return component;
 }
 
@@ -47,3 +46,30 @@ export function buildComponent(cls, parent) {
   component._b(component, dom);
   return component;
 }
+
+/**
+ * Wraps target in a Proxy which calls component.update() whenever it is modified.
+ *
+ * @param {*} target - Any object, including arrays.
+ * @param {*} component - A component.
+ * @returns a Proxy object.
+ */
+export const createProxy = (target, component) => {
+  const handler = {
+    get(target, key) {
+      if (key == "isProxy") return true;
+      const prop = target[key];
+      if (typeof prop == "undefined") return;
+      // set value as proxy if object
+      if (!prop.isProxy && typeof prop === "object")
+        target[key] = new Proxy(prop, handler);
+      return target[key];
+    },
+    set(target, key, value) {
+      target[key] = value;
+      component.update();
+      return true;
+    },
+  };
+  return new Proxy(target, handler);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "Andrew Buchan",
   "description": "The framework that brings you glee.",
   "license": "ISC",
@@ -10,13 +10,11 @@
   ],
   "types": "./lib/types.d.ts",
   "scripts": {
-    "test": "jest --clearCache && jest",
-    "check": "babel $@",
-    "rebuild-plugin": "cd ../babel-plugin-wallace && npx tsc"
+    "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.0.5",
+    "babel-plugin-wallace": "^0.0.7",
     "browserify": "^17.0.1"
   },
-  "gitHead": "3acf6a601862c29c011f5745322d0c3853561d75"
+  "gitHead": "625563b34b61857f1180da42d4b1f7bc229440c9"
 }