wallace 0.0.7 → 0.0.8

package/lib/component.js

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

package/lib/index.js

@@ -1,11 +1,11 @@
-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,
@@ -18,17 +18,17 @@ export {
   extendComponent,
   Component,
   createComponent,
-  createProxy,
+  watch,
   defineComponent,
   extendPrototype,
   findElement,
-  getKeyedPool,
-  getSequentialPool,
-  KeyedPool,
+  getKeyedRepeater,
+  getSequentialRepeater,
+  KeyedRepeater,
   mount,
   nestComponent,
   onEvent,
   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,9 +20,9 @@ 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;
 };
@@ -49,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(
@@ -91,8 +88,8 @@ export function extendComponent(
 }
 
 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.7",
+  "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.7",
+    "babel-plugin-wallace": "^0.0.8",
     "browserify": "^17.0.1"
   },
-  "gitHead": "625563b34b61857f1180da42d4b1f7bc229440c9"
+  "gitHead": "7548afec467b0e4f6e433a401cca08acb3dc7bc7"
 }