wallace 0.5.0 → 0.7.0

package/lib/component.js

@@ -1,158 +1,174 @@
+const throwAway = document.createElement("template");
 const NO_LOOKUP = "__";
 
-/**
- * The base component constructor.
- */
-export function Component() {
-  this.ctrl = undefined;
-  this.props = undefined;
-  // Internal state objects (_e is created during build)
-  this._s = []; // A stash for misc objects like repeaters.
-  this._p = {}; // The previous values for watches to compare against.
-  this._r = {}; // The current values read during an update.
-  const root = this._n.cloneNode(true);
-  this.el = root;
-  this.ref = {};
-  this._b(this, root);
-}
+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();
+    },
 
-Component.stubs = {};
+    /**
+     * Updates the DOM and renders nested components.
+     */
+    update: function () {
+      this._u(0, this._l);
+    },
 
-var proto = Component.prototype;
+    _u: function (i, il) {
+      let watch,
+        element,
+        parent,
+        displayToggle,
+        detacher,
+        lookupTrue,
+        shouldBeVisible,
+        detachedElements,
+        detachedElement,
+        index,
+        adjustedIndex;
 
-Object.defineProperty(proto, "hidden", {
-  set: function (value) {
-    this.el.hidden = value;
-  }
-});
+      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)
+        ?v: visibility toggle (object)
 
-/**
- * Gets a stub by name.
- */
-proto._gs = function (name) {
-  return this.constructor.stubs[name];
-};
+      The callback is an object whose key is the lookup and value is a function which
+      applies the effect.
 
-/**
- * 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];
-};
+      The visibility 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 
 
-/**
- * Applies the callbacks.
- */
-proto._ac = function (props, element, callbacks) {
-  for (let key in callbacks) {
-    let callback = callbacks[key];
-    if (key === NO_LOOKUP) {
-      callback(element, props, this);
-    } else {
-      const result = this._rq(props, key);
-      if (result[2]) {
-        callback(element, props, this, result[0]);
+      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.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;
+          }
+        }
+        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++;
       }
     }
   }
 };
 
-/**
- * The render function that gets called by parent components.
- */
-proto.render = function (props, ctrl) {
-  this.props = props;
-  this.ctrl = ctrl;
-  this.update();
-};
+Object.defineProperty(ComponentBase.prototype, "hidden", {
+  set: function (value) {
+    this.el.hidden = value;
+  }
+});
 
 /**
- * Updates the DOM.
- * Loops over watches, skipping n watches if elements are hidden.
+ * Creates the constructor function for a component definition.
+ *
+ * @param {*} baseComponent - a component definition to inherit from.
+ * @returns the newly created component definition function.
  */
-proto.update = function () {
-  let i = 0,
-    watch,
-    element,
-    parent,
-    displayToggle,
-    detacher,
-    lookupTrue,
-    shouldBeVisible,
-    detachedElements,
-    detachedElement,
-    index,
-    adjustedIndex,
-    thisElement;
-
-  const watches = this._w;
-  const props = this.props;
-  const il = watches.length;
-  this._r = {};
-  /*
-  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 
+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);
+  };
 
-  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.e];
-    displayToggle = watch.v;
-    i++;
-    shouldBeVisible = true;
-    if (displayToggle) {
-      lookupTrue = !!this._rq(props, displayToggle.q)[0];
-      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) {
-          thisElement = this._e[watch.e];
-          parent.removeChild(thisElement);
-          detachedElements[index] = thisElement;
-        }
-      } else {
-        element.hidden = !shouldBeVisible;
-      }
-      if (!shouldBeVisible) {
-        i += displayToggle.s;
-      }
+  const proto = (Component.prototype = Object.create(baseComponent.prototype, {
+    constructor: {
+      value: Component
     }
-    if (shouldBeVisible) {
-      this._ac(props, element, watch.c);
+  }));
+
+  // This lets us assign to prototype without replacing it.
+  Object.defineProperty(Component, "methods", {
+    set: function (value) {
+      Object.assign(proto, value);
+    },
+    get: function () {
+      return proto;
     }
-  }
-};
+  });
+  Component.create = function (props, ctrl) {
+    const component = new Component();
+    component.render(props, ctrl);
+    return component;
+  };
+  Component.stubs = {} && baseComponent.stubs;
+  return Component;
+}
+
+export function defineComponent(html, watches, queries, buildFunction, inheritFrom) {
+  const ComponentDefinition = createConstructor(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;
+  return ComponentDefinition;
+}

package/lib/extend.js

@@ -0,0 +1,20 @@
+import { createConstructor } from "./component";
+
+/**
+ * Calls to this function which provide the 2nd argument:
+ *
+ *   const Foo = extendComponent(Bar, () => <div></div>))
+ *
+ * Are modified by the Babel plugin to become this:
+ *
+ *   const Foo = defineComponent(,,,,Bar);
+ *
+ * So it should never be called with 2nd arg in real life.
+ */
+export function extendComponent(base, componentDef) {
+  // This function call will have been replaced if 2nd arg is a valid component func.
+  // 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);
+}

package/lib/index.js

@@ -1,28 +1,11 @@
-import { mount, watch, protect } from "./utils";
-import { Component } from "./component";
-import { KeyedRepeater, SequentialRepeater } from "./repeaters";
-import {
-  extendComponent,
-  defineComponent,
-  findElement,
-  onEvent,
-  nestComponent,
-  saveRef,
-  stashMisc
-} from "./initCalls";
-
-export {
-  Component,
-  defineComponent,
-  extendComponent,
-  findElement,
-  KeyedRepeater,
-  mount,
-  nestComponent,
-  onEvent,
-  protect,
-  saveRef,
-  SequentialRepeater,
-  stashMisc,
-  watch
-};
+export { defineComponent } from "./component";
+export { extendComponent } from "./extend";
+export { mount } from "./mount";
+export { nestComponent } from "./nest";
+export { saveRef } from "./refs";
+export { KeyedRepeater } from "./repeaters/keyed";
+export { SequentialRepeater } from "./repeaters/sequential";
+export { Router, route } from "./router";
+export { getStub } from "./stubs";
+export { findElement, onEvent, stashMisc } from "./utils";
+export { watch, protect } from "./watch";

package/lib/mount.js

@@ -0,0 +1,17 @@
+import { replaceNode } from "./utils";
+
+/**
+ * Creates and mounts a component onto an element.
+ *
+ * @param {any} elementOrId Either a string representing an id, or an element.
+ * @param {callable} componentDefinition The class of Component to create
+ * @param {object} props The props to pass to the component (optional)
+ */
+export function mount(elementOrId, componentDefinition, props, ctrl) {
+  const component = new componentDefinition();
+  component.render(props, ctrl);
+  const element =
+    typeof elementOrId === "string" ? document.getElementById(elementOrId) : elementOrId;
+  replaceNode(element, component.el);
+  return component;
+}

package/lib/nest.js

@@ -0,0 +1,8 @@
+import { findElement, replaceNode } from "./utils";
+
+export function nestComponent(rootElement, path, componentDefinition) {
+  const el = findElement(rootElement, path),
+    child = new componentDefinition();
+  replaceNode(el, child.el);
+  return child;
+}

package/lib/refs.js

@@ -0,0 +1,19 @@
+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;
+}

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

@@ -1,3 +1,5 @@
+import { trimChildren } from "../utils";
+
 /*
  * Gets a component from the pool.
  */
@@ -13,21 +15,6 @@ function getComponent(pool, componentDefinition, ctrl, key, props) {
   return component;
 }
 
-/**
- * Trims the unwanted child elements from the end.
- *
- * @param {Node} e
- * @param {Array} childNodes
- * @param {Int} itemsLength
- */
-function trimChildren(e, childNodes, itemsLength) {
-  let lastIndex = childNodes.length - 1;
-  let keepIndex = itemsLength - 1;
-  for (let i = lastIndex; i > keepIndex; i--) {
-    e.removeChild(childNodes[i]);
-  }
-}
-
 /**
  * Pulls an item forward in an array, to replicate insertBefore.
  * @param {Array} arr
@@ -101,48 +88,3 @@ proto.patch = function (e, items, ctrl) {
   this.keys = newKeys;
   trimChildren(e, childNodes, itemsLength);
 };
-
-/**
- * Repeats nested components, yielding from its pool sequentially.
- *
- * @param {componentDefinition} componentDefinition - The class ComponentDefinition to create.
- */
-export function SequentialRepeater(componentDefinition) {
-  this.def = componentDefinition;
-  this.pool = []; // pool of component instances
-  this.count = 0; // Child element count
-}
-
-/**
- * Updates the element's childNodes to match the items.
- * Performance is important.
- *
- * @param {DOMElement} e - The DOM element to patch.
- * @param {Array} items - Array of items which will be passed as props.
- * @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,
-    childElementCount = this.count;
-
-  for (let i = 0; i < itemsLength; i++) {
-    if (i < poolCount) {
-      component = pool[i];
-    } else {
-      component = new componentDefinition();
-      pool.push(component);
-      poolCount++;
-    }
-    component.render(items[i], ctrl);
-    if (i >= childElementCount) {
-      e.appendChild(component.el);
-    }
-  }
-  this.count = itemsLength;
-  trimChildren(e, childNodes, itemsLength);
-};

package/lib/repeaters/sequential.js

@@ -0,0 +1,46 @@
+import { trimChildren } from "../utils";
+
+/**
+ * Repeats nested components, yielding from its pool sequentially.
+ *
+ * @param {componentDefinition} componentDefinition - The ComponentDefinition to create.
+ */
+export function SequentialRepeater(componentDefinition) {
+  this.def = componentDefinition;
+  this.pool = []; // pool of component instances
+  this.count = 0; // Child element count
+}
+
+/**
+ * Updates the element's childNodes to match the items.
+ * Performance is important.
+ *
+ * @param {DOMElement} e - The DOM element to patch.
+ * @param {Array} items - Array of items which will be passed as props.
+ * @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,
+    childElementCount = this.count;
+
+  for (let i = 0; i < itemsLength; i++) {
+    if (i < poolCount) {
+      component = pool[i];
+    } else {
+      component = new componentDefinition();
+      pool.push(component);
+      poolCount++;
+    }
+    component.render(items[i], ctrl);
+    if (i >= childElementCount) {
+      e.appendChild(component.el);
+    }
+  }
+  this.count = itemsLength;
+  trimChildren(e, childNodes, itemsLength);
+};

package/lib/router.jsx

@@ -0,0 +1,120 @@
+/*
+The Router is a component which mounts other components based on hash (URL bit after #).
+
+It currently expects the route to be made of chunks separated by / which are either
+text or placeholders:
+
+  /todos/detail/{id:int}/notes
+
+It performs no validation yet, and may change to use regex in future.
+*/
+
+const events = ["load", "hashchange"];
+const noMod = x => x;
+const converters = {
+  int: v => parseInt(v),
+  float: v => parseFloat(v),
+  date: v => new Date(v)
+};
+
+export function route(path, componentDef, converter, cleanup) {
+  return new Route(path, componentDef, converter, cleanup);
+}
+
+export const Router = () => <div></div>;
+
+Router.methods = {
+  render(props, ctrl) {
+    const defaultError = (error, router) => (router.el.innerHTML = error.message);
+    this.error = props.error || defaultError;
+    this.current = null;
+    events.forEach(e => window.addEventListener(e, () => this.onHashChange()));
+    if (props.atts) {
+      Object.keys(props.atts).forEach(k => {
+        this.el.setAttribute(k, props.atts[k]);
+      });
+    }
+    this.base.render.call(this, props, ctrl);
+  },
+  async onHashChange() {
+    const path = location.hash.slice(1) || "",
+      routes = this.props.routes,
+      len = routes.length;
+    let i = 0,
+      routeData;
+    try {
+      while (i < len) {
+        let route = routes[i];
+        if ((routeData = route.match(path))) {
+          const component = await route.getComponent(routeData, this.ctrl);
+          this.current && this.current.cleanup();
+          this.mount(component);
+          this.current = route;
+          return;
+        }
+        i++;
+      }
+      throw new Error(`Router unable to match path "${path}"`);
+    } catch (error) {
+      this.error(error, this);
+    }
+  },
+  mount(component) {
+    this.el.innerHTML = "";
+    this.el.appendChild(component.el);
+  }
+};
+
+export function Route(path, def, convert, cleanup) {
+  this.chunks = path
+    .split("/")
+    .map(s => (s.startsWith("{") ? new RouteArg(s.slice(1, -1)) : s));
+  this.def = def;
+  this._convert = convert || noMod;
+  this._cleanup = cleanup || noMod;
+  this.component = null;
+}
+
+Route.prototype = {
+  match(url) {
+    const parts = url.split("?", 2),
+      hash = parts[0],
+      query = parts[1],
+      args = {},
+      definedChunksCount = this.chunks.length,
+      foundChunks = hash.split("/");
+    if (definedChunksCount !== foundChunks.length) return;
+    let i = 0;
+    while (i < definedChunksCount) {
+      let definedChunk = this.chunks[i];
+      let foundChunk = foundChunks[i];
+      if (definedChunk instanceof RouteArg) {
+        args[definedChunk.name] = definedChunk.convert(foundChunk);
+      } else if (definedChunk != foundChunk) {
+        return;
+      }
+      i++;
+    }
+    return { args, params: new URLSearchParams(query), url };
+  },
+  async getComponent(routeData, ctrl) {
+    if (!this.component) {
+      this.component = new this.def();
+    }
+    const props = await this._convert(routeData);
+    this.component.render(props, ctrl);
+    return this.component;
+  },
+  /**
+   * Allows user to delete component or perform other cleanup.
+   */
+  cleanup() {
+    this._cleanup(this);
+  }
+};
+
+function RouteArg(str) {
+  let chunks = str.split(":");
+  this.name = chunks[0];
+  this.convert = converters[chunks[1]] || noMod;
+}

package/lib/stubs.js

@@ -0,0 +1,6 @@
+/**
+ * Gets a stub by name.
+ */
+export function getStub(component, name) {
+  return component.constructor.stubs[name];
+}

package/lib/types.d.ts

@@ -47,9 +47,11 @@ const MyComponent = ({title}, {ctrl, event}) => (
 
 The **xargs** contains:
 
-- `ctrl` a reference to a controller object.
-- `self` a reference to the component instance (as `this` is not allowed).
-- `event` for use in event callbacks, signifies the event.
+- `ctrl` refers to the controller.
+- `props` refers to the props, in case you want the non-destructured version too.
+- `self` refers to the component instance (as `this` is not allowed).
+- `event` refers to the event in an event callback.
+- `element` refers to the element in an event callback, or in `apply`.
 
 The function will be replaced by a very different one during compilation, therefore:
 
@@ -141,10 +143,9 @@ so use `self` from the **xargs** in component functions.
 
 Component instances have the following fields:
 
-- `props` the data for this component instance, stored as reference to original, not a 
-copy.
-- `ctrl` an object to help coordinate things, also stored as reference.
-- `ref` a dictionary of named elements.
+- `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.
 
 Both `props` and `ctrl` are set during the `render` method before calling `update`.
@@ -212,27 +213,6 @@ temporarily change it to something `class x:danger`.
 
 You can define your own directives in your babel config.
 
-Each has more
-detailed information on its JSDoc, which should display as a tool tip\* when you hover
-over it in your IDE.
-
-You can also 
-
-- `apply` runs a callback to modify an element.
-- `bind` updates a value when an input is changed.
-- `class:xyz` defines a set of classes to be toggled.
-- `hide` sets an element or component's hidden property.
-- `html` Set the element's `innnerHTML` property.
-- `if` excludes an element from the DOM.
-- `on[EventName]` creates an event handler (note the code is copied)
-- `props` specifes props for a nested or repeated component, in which case it must be
-an array.
-- `ref` saves a reference to an element or nested component.
-- `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 `xyz`.
-
-
 ## 5. Controllers
 
 A controller is just an object you create which gets passed down to every nested
@@ -516,6 +496,7 @@ declare module "wallace" {
       props: Props,
       xargs?: {
         ctrl: Controller;
+        props: Props;
         self: ComponentInstance<Props, Controller, Methods>;
         event: Event;
         element: HTMLElement;
@@ -539,12 +520,13 @@ declare module "wallace" {
       show?: boolean;
       hide?: boolean;
     }): JSX.Element;
-    // methods?: ComponenMethods<Props, Controller> &
-    //   ThisType<ComponentInstance<Props, Controller, Methods>>;
+    methods?: ComponenMethods<Props, Controller> &
+      ThisType<ComponentInstance<Props, Controller, Methods>>;
     readonly prototype?: ComponenMethods<Props, Controller> &
       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): ComponentInstance<Props, Controller, Methods>;
   }
 
   type ComponenMethods<Props, Controller> = {
@@ -574,6 +556,11 @@ declare module "wallace" {
     Methods extends object = {}
   > = ComponentFunction<Props, Controller, Methods>;
 
+  export interface Ref {
+    node: HTMLElement | ComponentInstance;
+    update(): void;
+  }
+
   /**
    * The type for a component instance.
    */
@@ -585,7 +572,7 @@ declare module "wallace" {
     el: HTMLElement;
     props: Props;
     ctrl: Controller;
-    ref: { [key: string]: HTMLElement };
+    refs: { [key: string]: Ref };
     base: Component<Props, Controller>;
   } & Component<Props, Controller> &
     Methods;
@@ -594,7 +581,6 @@ declare module "wallace" {
    * The component constructor function (typed as a class, but isn't).
    */
   export class Component<Props = any, Controller = any> {
-    render(props: Props, ctrl?: Controller): void;
     /**
      * The base render method looks like this:
      *
@@ -705,6 +691,32 @@ declare module "wallace" {
    * @returns a Proxy of the object.
    */
   export function watch<T>(target: T, callback: WatchCallback): T;
+
+  export type RouteData = {
+    args: { [key: string]: any };
+    params: URLSearchParams;
+    url: string;
+  };
+
+  export function route<Props>(
+    path: string,
+    componentDef: ComponentFunction<Props>,
+    converter: RouteConverter<Props>
+  ): Route<Props>;
+
+  type RouteConverter<Props> = (routedata: RouteData) => Props;
+
+  export type Route<Props> = [string, ComponentFunction<Props>, RouteConverter<Props>?];
+  export type RouterProps = {
+    routes: readonly Route<unknown>[];
+    atts?: Record<string, unknown>;
+    error?: (error: Error, router: Router) => void;
+  };
+
+  export class Router extends Component {
+    static nest?({ props }: { props?: RouterProps }): JSX.Element;
+    mount(component: Component<any>): void;
+  }
 }
 
 type MustBeExpression = Exclude<any, string>;
@@ -864,19 +876,25 @@ interface DirectiveAttributes extends AllDomEvents {
   /**
    * ## Wallace directive: ref
    *
-   * Saves a reference to the element on the component, allowing it to be accessed.
+   * 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()`.
    *
    * ```
-   * <div ref:title></div>
+   * <div ref:title>
+   *   {name}
+   * </div>
    * ```
    *
    * ```
-   * component.ref.title.textContent = 'hello';
+   * component.refs.title.update();
+   * component.refs.title.node.textContent = 'hello';
    * ```
    *
    * Requires a qualifier, but you lose the tooltip in that format.
    */
-  ref?: string;
+  ref?: null;
 
   /** ## Wallace directive: show
    *
@@ -949,7 +967,7 @@ declare namespace JSX {
      * - `items` set items for repeated component, must be an array of props.
      * - `on[EventName]` creates an event handler (note the code is copied)
      * - `props` specifes props for a nested components.
-     * - `ref` saves a reference to an element or nested component.
+     * - `ref:xyz` saves a reference to node, allowing partial updates or access to element/component.
      * - `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/lib/utils.js

@@ -1,66 +1,36 @@
-/**
- * Creates and mounts a component onto an element.
- *
- * @param {any} elementOrId Either a string representing an id, or an element.
- * @param {callable} componentDefinition The class of Component to create
- * @param {object} props The props to pass to the component (optional)
- */
-export function mount(elementOrId, componentDefinition, props, ctrl) {
-  const component = new componentDefinition();
-  component.render(props, ctrl);
-  replaceNode(getElement(elementOrId), component.el);
-  return component;
+export function findElement(rootElement, path) {
+  return path.reduce((acc, index) => acc.childNodes[index], rootElement);
 }
 
 export function replaceNode(nodeToReplace, newNode) {
   nodeToReplace.parentNode.replaceChild(newNode, nodeToReplace);
 }
 
-export function getElement(elementOrId) {
-  return typeof elementOrId === "string"
-    ? document.getElementById(elementOrId)
-    : elementOrId;
+/**
+ * Trims the unwanted child elements from the end.
+ *
+ * @param {Node} e
+ * @param {Array} childNodes
+ * @param {Int} itemsLength
+ */
+export function trimChildren(e, childNodes, itemsLength) {
+  let lastIndex = childNodes.length - 1;
+  let keepIndex = itemsLength - 1;
+  for (let i = lastIndex; i > keepIndex; i--) {
+    e.removeChild(childNodes[i]);
+  }
 }
 
-const MUTATING_METHODS = ["push", "pop", "shift", "unshift", "splice", "reverse", "sort"];
 /**
- * Returns a proxy which calls a callback when the object or its nested objects are
- * modified.
- *
- * Note that proxies have property `isProxy` set to true.
+ * Stash something on the component. Returns the element.
+ * The generated code is expected to keep track of the position.
  */
-export function watch(target, callback) {
-  const handler = {
-    get(target, key) {
-      if (key == "isProxy") return true;
-      const prop = target[key];
-      if (typeof prop == "undefined") return;
-      if (typeof prop === "object") return new Proxy(prop, handler);
-      if (
-        Array.isArray(target) &&
-        typeof target[key] === "function" &&
-        MUTATING_METHODS.includes(key)
-      ) {
-        return (...args) => {
-          const result = target[key](...args);
-          callback(target, key, args);
-          return result;
-        };
-      }
-      return prop;
-    },
-    set(target, key, value) {
-      target[key] = value;
-      callback(target, key, value);
-      return true;
-    }
-  };
-  return new Proxy(target, handler);
+export function stashMisc(element, stash, object) {
+  stash.push(object);
+  return element;
 }
 
-export function protect(obj) {
-  return watch(obj, (target, key, value) => {
-    console.log("target", target, "key", key, "value", value);
-    throw new Error("Attempted to modify protected object");
-  });
+export function onEvent(element, eventName, callback) {
+  element.addEventListener(eventName, callback);
+  return element;
 }

package/lib/watch.js

@@ -0,0 +1,42 @@
+const MUTATING_METHODS = ["push", "pop", "shift", "unshift", "splice", "reverse", "sort"];
+/**
+ * Returns a proxy which calls a callback when the object or its nested objects are
+ * modified.
+ *
+ * Note that proxies have property `isProxy` set to true.
+ */
+export function watch(target, callback) {
+  const handler = {
+    get(target, key) {
+      if (key == "isProxy") return true;
+      const prop = target[key];
+      if (typeof prop == "undefined") return;
+      if (typeof prop === "object") return new Proxy(prop, handler);
+      if (
+        Array.isArray(target) &&
+        typeof target[key] === "function" &&
+        MUTATING_METHODS.includes(key)
+      ) {
+        return (...args) => {
+          const result = target[key](...args);
+          callback(target, key, args);
+          return result;
+        };
+      }
+      return prop;
+    },
+    set(target, key, value) {
+      target[key] = value;
+      callback(target, key, value);
+      return true;
+    }
+  };
+  return new Proxy(target, handler);
+}
+
+export function protect(obj) {
+  return watch(obj, (target, key, value) => {
+    console.log("target", target, "key", key, "value", value);
+    throw new Error("Attempted to modify protected object");
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "author": "Andrew Buchan",
   "description": "The framework that brings you FREEDOM!!",
   "license": "ISC",
@@ -8,13 +8,14 @@
   "files": [
     "/lib"
   ],
+  "sideEffects": false,
   "types": "./lib/types.d.ts",
   "scripts": {
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.5.0",
+    "babel-plugin-wallace": "^0.7.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "12194040c835faf9d4f29e105dd908bacdbbb944"
+  "gitHead": "6cd84a9e6135e31d01880a82e6294ae0034bca59"
 }

package/lib/initCalls.js

@@ -1,116 +0,0 @@
-/**
- * Everything in here is used by or modified by the Babel plugin.
- */
-import { Component } from "./component";
-import { replaceNode } from "./utils";
-
-const throwAway = document.createElement("template");
-
-/**
- * A utility function that has to be in here because it needs _createConstructor and
- * we'd otherwise get cirular inmports.
- *
- * Calls to this function which provide the 2nd argument:
- *
- *   const Foo = extendComponent(Bar, () => <div></div>))
- *
- * Are modified by the Babel plugin to become this:
- *
- *   const Foo = defineComponent(,,,,Bar);
- *
- * So it should never be called with 2nd arg in real life.
- */
-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);
-}
-
-/*
-Everything after this is used by code generated by the Babel plugin.
-*/
-
-export function findElement(rootElement, path) {
-  return path.reduce((acc, index) => acc.childNodes[index], rootElement);
-}
-
-export function nestComponent(rootElement, path, componentDefinition) {
-  const el = findElement(rootElement, path),
-    child = new componentDefinition();
-  replaceNode(el, child.el);
-  return child;
-}
-
-/**
- * Saves a reference to element or nested component. Returns the element.
- */
-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 function stashMisc(element, component, object) {
-  component._s.push(object);
-  return element;
-}
-
-export function onEvent(element, eventName, callback) {
-  element.addEventListener(eventName, callback);
-  return element;
-}
-
-export function defineComponent(html, watches, queries, buildFunction, inheritFrom) {
-  const ComponentDefinition = _createConstructor(inheritFrom || Component);
-  const prototype = ComponentDefinition.prototype;
-  throwAway.innerHTML = html;
-  //Ensure these do not clash with fields on the component itself.
-  prototype._w = watches;
-  prototype._q = queries;
-  prototype._b = buildFunction;
-  prototype._n = throwAway.content.firstChild;
-  return ComponentDefinition;
-}
-
-/**
- * Creates a new component definition.
- *
- * @param {*} base - a component definition to inherit from - defaults to Component.
- * @returns the newly created component definition function.
- */
-function _createConstructor(base) {
-  const ComponentDefinition = function () {
-    base.call(this);
-  };
-  const proto = Object.create(base && base.prototype, {
-    constructor: {
-      value: ComponentDefinition,
-      writable: true,
-      configurable: true
-    }
-  });
-  ComponentDefinition.prototype = proto;
-
-  // methods lets us assign to prototype without replacing it.
-  Object.defineProperty(ComponentDefinition, "methods", {
-    set: function (value) {
-      Object.assign(proto, value);
-    },
-    get: function () {
-      return proto;
-    }
-  });
-
-  // Set up stubs
-  ComponentDefinition.stubs = {};
-  Object.assign(ComponentDefinition.stubs, base.stubs);
-
-  // Helper to access base prototype.
-  proto.base = Component.prototype;
-  return ComponentDefinition;
-}