wallace 0.7.2 → 0.8.0

package/lib/component.js

@@ -1,42 +1,40 @@
 const throwAway = document.createElement("template");
 const NO_LOOKUP = "__";
 
-const ComponentBase = {
-  stubs: {},
-  prototype: {
-    /**
-     * The render function that gets called by parent components.
-     */
-    render: function (props, ctrl) {
-      this.props = props;
-      this.ctrl = ctrl;
-      this.update();
-    },
+const ComponentPrototype = {
+  /**
+   * The render function that gets called by parent components.
+   */
+  render: function (props, ctrl) {
+    this.props = props;
+    this.ctrl = ctrl;
+    this.update();
+  },
 
-    /**
-     * Updates the DOM and renders nested components.
-     */
-    update: function () {
-      this._u(0, this._l);
-    },
+  /**
+   * Updates the DOM and renders nested components.
+   */
+  update: function () {
+    this._u(0, this._l);
+  },
 
-    _u: function (i, il) {
-      let watch,
-        element,
-        parent,
-        displayToggle,
-        detacher,
-        lookupTrue,
-        shouldBeVisible,
-        detachedElements,
-        detachedElement,
-        index,
-        adjustedIndex;
+  _u: function (i, il) {
+    let watch,
+      element,
+      parent,
+      displayToggle,
+      detacher,
+      lookupTrue,
+      shouldBeVisible,
+      detachedElements,
+      detachedElement,
+      index,
+      adjustedIndex;
 
-      const watches = this._w,
-        props = this.props,
-        previous = this._p;
-      /*
+    const watches = this._w,
+      props = this.props,
+      previous = this._p;
+    /*
       Watches is an array of objects with keys:
         e: the element index (number)
         c: the callbacks (object)
@@ -56,94 +54,87 @@ const ComponentBase = {
         s: the stash key of the detacher (plain object)
         e: the parent element key
       */
-      while (i < il) {
-        watch = watches[i];
-        element = this._e[watch.e];
-        displayToggle = watch.v;
-        shouldBeVisible = true;
-        if (displayToggle) {
-          lookupTrue = !!this._q[displayToggle.q](props, this);
-          shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
-          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) {
-              parent.removeChild(element);
-              detachedElements[index] = element;
-            }
-          } else {
-            element.hidden = !shouldBeVisible;
-          }
-          if (!shouldBeVisible) {
-            i += displayToggle.s;
+    while (i < il) {
+      watch = watches[i];
+      element = this._e[watch.e];
+      displayToggle = watch.v;
+      shouldBeVisible = true;
+      if (displayToggle) {
+        lookupTrue = !!this._q[displayToggle.q](props, this);
+        shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
+        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) {
+            parent.removeChild(element);
+            detachedElements[index] = element;
           }
+        } else {
+          element.hidden = !shouldBeVisible;
         }
-        if (shouldBeVisible) {
-          const prev = previous[i],
-            callbacks = watch.c;
-          for (let key in callbacks) {
-            if (key === NO_LOOKUP) {
-              callbacks[key](element, props, this);
-            } else {
-              const oldValue = prev[key],
-                newValue = this._q[key](props, this);
-              if (oldValue !== newValue) {
-                callbacks[key](element, props, this, newValue);
-                prev[key] = newValue;
-              }
+        if (!shouldBeVisible) {
+          i += displayToggle.s;
+        }
+      }
+      if (shouldBeVisible) {
+        const prev = previous[i],
+          callbacks = watch.c;
+        for (let key in callbacks) {
+          if (key === NO_LOOKUP) {
+            callbacks[key](element, props, this);
+          } else {
+            const oldValue = prev[key],
+              newValue = this._q[key](props, this);
+            if (oldValue !== newValue) {
+              callbacks[key](element, props, this, newValue);
+              prev[key] = newValue;
             }
           }
         }
-        i++;
       }
+      i++;
     }
   }
 };
 
-Object.defineProperty(ComponentBase.prototype, "hidden", {
+Object.defineProperty(ComponentPrototype, "hidden", {
   set: function (value) {
     this.el.hidden = value;
   }
 });
 
+const ComponentBase = {
+  stubs: {},
+  prototype: ComponentPrototype
+};
+
 /**
- * Creates the constructor function for a component definition.
  *
- * @param {*} baseComponent - a component definition to inherit from.
- * @returns the newly created component definition function.
+ * @param {function} ComponentFunction - The Component definition function to add bits to.
+ * @param {function} BaseComponentFunction - A Component definition function to inherit bits from.
+ * @returns the ComponentFunction with bits added.
  */
-export function createConstructor(baseComponent) {
-  const Component = function () {
-    const root = (this.el = this._n.cloneNode(true)),
-      dynamicElements = (this._e = []),
-      stash = (this._s = []),
-      previous = (this._p = []),
-      refs = (this.refs = {});
-    this.ctrl = {};
-    this.props = {};
-    this._l = this._w.length;
-    this._b(this, root, dynamicElements, stash, previous, refs);
-  };
-
-  const proto = (Component.prototype = Object.create(baseComponent.prototype, {
-    constructor: {
-      value: Component
+export function initConstructor(ComponentFunction, BaseComponentFunction) {
+  const proto = (ComponentFunction.prototype = Object.create(
+    BaseComponentFunction.prototype,
+    {
+      constructor: {
+        value: ComponentFunction
+      }
     }
-  }));
-
-  // This lets us assign to prototype without replacing it.
-  Object.defineProperty(Component, "methods", {
+  ));
+  Object.defineProperty(ComponentFunction, "methods", {
     set: function (value) {
       Object.assign(proto, value);
     },
@@ -151,24 +142,17 @@ export function createConstructor(baseComponent) {
       return proto;
     }
   });
-  Component.create = function (props, ctrl) {
-    const component = new Component();
-    component.render(props, ctrl);
-    return component;
-  };
-  Component.stubs = Object.assign({}, baseComponent.stubs);
-  return Component;
+  ComponentFunction.stubs = Object.assign({}, BaseComponentFunction.stubs);
+  return ComponentFunction;
 }
 
-export function defineComponent(html, watches, queries, buildFunction, inheritFrom) {
-  const ComponentDefinition = createConstructor(inheritFrom || ComponentBase);
+export function defineComponent(html, watches, queries, contructor, inheritFrom) {
+  const ComponentDefinition = initConstructor(contructor, inheritFrom || ComponentBase);
   const proto = ComponentDefinition.prototype;
   throwAway.innerHTML = html;
-  //Ensure these do not clash with fields on the component itself.
   proto._w = watches;
   proto._q = queries;
-  proto._b = buildFunction;
-  proto._n = throwAway.content.firstChild;
-  proto.base = ComponentBase.prototype;
+  proto._t = throwAway.content.firstChild;
+  proto.base = ComponentPrototype;
   return ComponentDefinition;
 }

package/lib/createComponent.js

@@ -0,0 +1,5 @@
+export function createComponent(ComponentFunction, props, ctrl) {
+  const component = new ComponentFunction();
+  component.render(props, ctrl);
+  return component;
+}

package/lib/extend.js

@@ -1,4 +1,4 @@
-import { createConstructor } from "./component";
+import { initConstructor } from "./component";
 
 /**
  * Calls to this function which provide the 2nd argument:
@@ -16,5 +16,7 @@ export function extendComponent(base, componentDef) {
   // and therefore we would not receive it.
   if (componentDef)
     throw new Error("2nd arg to extendComponent must be a JSX arrow function");
-  return createConstructor(base);
+  return initConstructor(function () {
+    base.call(this);
+  }, base);
 }

package/lib/index.js

@@ -1,8 +1,10 @@
 export { defineComponent } from "./component";
 export { extendComponent } from "./extend";
 export { mount } from "./mount";
-export { nestComponent } from "./nest";
+export { createComponent } from "./createComponent";
+export { nestComponent } from "./nestComponent";
 export { saveRef } from "./refs";
+export { savePart } from "./part";
 export { KeyedRepeater } from "./repeaters/keyed";
 export { SequentialRepeater } from "./repeaters/sequential";
 export { Router, route } from "./router";

package/lib/part.js

@@ -0,0 +1,17 @@
+function Part(component, start, end) {
+  this._c = component;
+  this._s = start;
+  this._e = end;
+}
+
+Part.prototype.update = function () {
+  this._c._u(this._s, this._e);
+};
+
+/**
+ * Saves a reference to a part of a component so it can be updated independently.
+ */
+export function savePart(node, component, parts, name, start, end) {
+  parts[name] = new Part(component, start, end);
+  return node;
+}

package/lib/refs.js

@@ -1,19 +1,7 @@
-function Ref(component, node, start, end) {
-  this.node = node;
-  this._c = component;
-  this._s = start;
-  this._e = end;
-}
-
-Ref.prototype.update = function () {
-  this._c._u(this._s, this._e);
-};
-
 /**
  * Saves a reference to a node (element or nested component)
  * Returns the node.
  */
-export function saveRef(node, component, refs, name, start, end) {
-  refs[name] = new Ref(component, node, start, end);
-  return node;
+export function saveRef(node, refs, name) {
+  return (refs[name] = node);
 }

package/lib/repeaters/sequential.js

@@ -20,15 +20,16 @@ export function SequentialRepeater(componentDefinition) {
  * @param {any} ctrl - The parent item's controller.
  */
 SequentialRepeater.prototype.patch = function (e, items, ctrl) {
-  const pool = this.pool;
-  const componentDefinition = this.def;
-  const childNodes = e.childNodes;
-  const itemsLength = items.length;
-  let component,
-    poolCount = pool.length,
+  const pool = this.pool,
+    componentDefinition = this.def,
+    childNodes = e.childNodes,
+    itemsLength = items.length,
     childElementCount = this.count;
+  let i = 0,
+    component,
+    poolCount = pool.length;
 
-  for (let i = 0; i < itemsLength; i++) {
+  while (i < itemsLength) {
     if (i < poolCount) {
       component = pool[i];
     } else {
@@ -40,6 +41,7 @@ SequentialRepeater.prototype.patch = function (e, items, ctrl) {
     if (i >= childElementCount) {
       e.appendChild(component.el);
     }
+    i++;
   }
   this.count = itemsLength;
   trimChildren(e, childNodes, itemsLength);

package/lib/router.js

@@ -60,7 +60,7 @@ Router.methods = {
     }
   },
   mount(component) {
-    this.el.innerHTML = "";
+    this.el.textContent = "";
     this.el.appendChild(component.el);
   }
 };

package/lib/types.d.ts

@@ -145,9 +145,13 @@ Component instances have the following fields:
 
 - `props` the data for this component instance.
 - `ctrl` the controller object.
-- `refs` an object with references to node.
 - `el` the component instance's root element.
 
+Optionally:
+
+- `ref` an object containing named elements or nested components.
+- `part` an object containing named parts.
+
 Both `props` and `ctrl` are set during the `render` method before calling `update`.
 There are no restrictions on types but typically:
 
@@ -526,10 +530,6 @@ declare module "wallace" {
       ThisType<ComponentInstance<Props, Controller, Methods>>;
     // Methods will not be available on nested component, so omit.
     readonly stubs?: Record<string, ComponentFunction<Props, Controller>>;
-    create?(
-      props?: Props,
-      ctrl?: Controller
-    ): ComponentInstance<Props, Controller, Methods>;
   }
 
   type ComponenMethods<Props, Controller> = {
@@ -559,8 +559,7 @@ declare module "wallace" {
     Methods extends object = {}
   > = ComponentFunction<Props, Controller, Methods>;
 
-  export interface Ref {
-    node: HTMLElement | ComponentInstance;
+  export interface Part {
     update(): void;
   }
 
@@ -575,7 +574,8 @@ declare module "wallace" {
     el: HTMLElement;
     props: Props;
     ctrl: Controller;
-    refs: { [key: string]: Ref };
+    ref: { [key: string]: HTMLElement | ComponentInstance };
+    part: { [key: string]: Part };
     base: Component<Props, Controller>;
   } & Component<Props, Controller> &
     Methods;
@@ -620,6 +620,18 @@ declare module "wallace" {
     update(): void;
   }
 
+  /**
+   * Creates a component instance and renders it.
+   * @param def
+   * @param props
+   * @param ctrl
+   */
+  export function createComponent<Props, Controller, Methods extends object = {}>(
+    def: ComponentFunction<Props, Controller, Methods>,
+    props?: Props,
+    ctrl?: Controller
+  ): ComponentInstance<Props, Controller, Methods>;
+
   /**
    * Use to define a new component which extends another component, meaning it will
    * inherit its prototye and stubs.
@@ -634,9 +646,9 @@ declare module "wallace" {
     Controller = any,
     Methods extends object = {}
   >(
-    base: Uses<Props, Controller, Methods>,
+    base: ComponentFunction<Props, Controller, Methods>,
     componentFunc?: ComponentFunction<Props, Controller, Methods>
-  ): Uses<Props, Controller, Methods>;
+  ): ComponentFunction<Props, Controller, Methods>;
 
   /**
    * *Replaces* element with an instance of componentDefinition and renders it.
@@ -645,7 +657,7 @@ declare module "wallace" {
    */
   export function mount<Props = any, Controller = any, Methods extends object = {}>(
     element: string | HTMLElement,
-    componentDefinition: Uses<Props, Controller, Methods>,
+    componentDefinition: ComponentFunction<Props, Controller, Methods>,
     props?: Props,
     ctrl?: Controller
   ): ComponentInstance<Props, Controller, Methods>;
@@ -868,6 +880,23 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   items?: MustBeExpression;
 
+  /**
+   * ## Wallace directive: part
+   *
+   * Saves a reference to part of a component allowing you to update it independently.
+   *
+   * ```
+   * <div part:title>
+   *   {name}
+   * </div>
+   * ```
+   *
+   * ```
+   * component.part.title.update();
+   * ```
+   */
+  part?: null;
+
   /**
    * ## Wallace directive: props
    *
@@ -879,10 +908,7 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: ref
    *
-   * Saves a reference to a node allowing you to:
-   *
-   * 1. Access the element or component as `ref.node`
-   * 2. Update the all nested elements using `ref.update()`.
+   * Saves a reference to an element or nested component.
    *
    * ```
    * <div ref:title>
@@ -891,11 +917,8 @@ interface DirectiveAttributes extends AllDomEvents {
    * ```
    *
    * ```
-   * component.refs.title.update();
-   * component.refs.title.node.textContent = 'hello';
+   * component.ref.title.textContent = 'hello';
    * ```
-   *
-   * Requires a qualifier, but you lose the tooltip in that format.
    */
   ref?: null;
 
@@ -969,8 +992,9 @@ declare namespace JSX {
      * - `if` excludes an element from the DOM.
      * - `items` set items for repeated component, must be an array of props.
      * - `on[EventName]` creates an event handler (note the code is copied)
+     * - `part:xyz` saves a reference to part of a component so it can be updated
      * - `props` specifes props for a nested components.
-     * - `ref:xyz` saves a reference to node, allowing partial updates or access to element/component.
+     * - `ref:xyz` saves a reference to an element or nested omponent.
      * - `show` sets and element or component's hidden property.
      * - `style:xyz` sets a specific style property.
      * - `toggle:xyz` toggles `xyz` as defined by `class:xyz` on same element, or class

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "author": "Andrew Buchan",
   "description": "The framework that brings you FREEDOM!!",
   "license": "ISC",
@@ -14,8 +14,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.7.0",
+    "babel-plugin-wallace": "^0.8.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "8ddf878a5e0119acc5edea32f08b7fc8a40974f1"
+  "gitHead": "7e497347a84b4326da188f11b7a71c85cc70bf41"
 }