wallace 0.0.5 → 0.0.6

package/lib/component.js

@@ -1,5 +1,3 @@
-const noop = function () {};
-
 /**
  * The base component.
  */
@@ -16,9 +14,6 @@ export function Component(parent) {
 
 var proto = Component.prototype;
 
-proto.onUpdate = noop;
-proto.afterUpdate = noop;
-
 Object.defineProperty(proto, "hidden", {
   set: function (value) {
     this.el.hidden = value;
@@ -28,24 +23,16 @@ 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,

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 {
@@ -18,6 +18,7 @@ export {
   extendComponent,
   Component,
   createComponent,
+  createProxy,
   defineComponent,
   extendPrototype,
   findElement,

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.6",
   "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.6",
     "browserify": "^17.0.1"
   },
-  "gitHead": "3acf6a601862c29c011f5745322d0c3853561d75"
+  "gitHead": "3742fbcfdc21146c90252c2436fde91634fafa9e"
 }