wallace 0.0.7 → 0.1.0

package/lib/utils.js

@@ -1,13 +1,13 @@
 /**
  * Creates and mounts a component onto an element.
  *
- * @param {unsure} elementOrId Either a string representing an id, or an element.
- * @param {class} cls The class of Component to create
+ * @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)
- * @param {object} parent The parent component (optional)
  */
-export function mount(elementOrId, cls, props, parent) {
-  const component = createComponent(cls, parent, props);
+export function mount(elementOrId, componentDefinition, props, ctrl) {
+  const component = buildComponent(componentDefinition);
+  component.render(props, ctrl);
   replaceNode(getElement(elementOrId), component.el);
   return component;
 }
@@ -23,38 +23,25 @@ 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);
-  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(componentDefinition) {
+  // TODO: add a dev warning here:
+  // if "componentDefinition is not a constructor" then we're probably missing a stub.
+  const component = new componentDefinition();
+  const proto = componentDefinition.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.
- *
- * @param {*} target - Any object, including arrays.
- * @param {*} component - A component.
- * @returns a Proxy object.
+ * See types for docs. Set grace to 0 for testing.
  */
-export const createProxy = (target, component) => {
+export function watch(target, callback, grace) {
+  let active = false;
+  if (grace === undefined) grace = 100;
   const handler = {
     get(target, key) {
       if (key == "isProxy") return true;
@@ -65,11 +52,22 @@ export const createProxy = (target, component) => {
         target[key] = new Proxy(prop, handler);
       return target[key];
     },
+
     set(target, key, value) {
       target[key] = value;
-      component.update();
+      if (grace) {
+        if (!active) {
+          setTimeout(() => {
+            active = false;
+          }, grace);
+          active = true;
+          callback();
+        }
+      } else {
+        callback();
+      }
       return true;
     },
   };
   return new Proxy(target, handler);
-};
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "wallace",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "author": "Andrew Buchan",
-  "description": "The framework that brings you glee.",
+  "description": "The framework that brings you FREEDOM!!",
   "license": "ISC",
   "main": "lib/index.js",
   "files": [
@@ -13,8 +13,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.0.7",
+    "babel-plugin-wallace": "^0.1.0",
     "browserify": "^17.0.1"
   },
-  "gitHead": "625563b34b61857f1180da42d4b1f7bc229440c9"
+  "gitHead": "950a6c9e6a849afa97e3221a81887fb0267405f2"
 }

package/lib/lookup.js

@@ -1,62 +0,0 @@
-const ALWAYS_UPDATE = "__";
-
-/**
- * Used internally.
- * An object which pools the results of lookup queries so we don't have to
- * repeat them in the same component.
- * The Lookup instance will be shared between instances of a component.
- * Must call reset() on every update.
- */
-export function Lookup(callbacks) {
-  this.callbacks = callbacks;
-  this.run = {};
-}
-
-Lookup.prototype = {
-  /**
-   * Lookup a watched value during update. Returns an object with {o, n, c}
-   * (oldValue, newValue, changed).
-   * You must resetLookups before calling get during an update.
-   * The point is to pool the result so it doesn't have to be repeated.
-   */
-  get: function (component, props, key) {
-    const run = this.run;
-    if (run[key] === undefined) {
-      // Verbose but efficient way as it avoids lookups?
-      // Or is this harmful to performance because we're just reading values more than calling functions?
-      let o = component._p[key];
-      // TODO: is this checking for watchOnce?
-      o = o === undefined ? "" : o;
-      const n = this.callbacks[key](props, component);
-      const c = n !== o;
-      component._p[key] = n;
-      const rtn = { n, o, c };
-      run[key] = rtn;
-      return rtn;
-    }
-    return run[key];
-  },
-  reset: function () {
-    this.run = {};
-  },
-  applyCallbacks: function (component, props, element, callbacks) {
-    for (let key in callbacks) {
-      let callback = callbacks[key];
-      if (key === ALWAYS_UPDATE) {
-        callback.call(component, element, component.props, component);
-      } else {
-        const result = this.get(component, props, key);
-        if (result.c) {
-          callback.call(
-            component,
-            result.n,
-            result.o,
-            element,
-            props,
-            component,
-          );
-        }
-      }
-    }
-  },
-};