wallace 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,3 @@
+# Wallace
+
+See https://github.com/andyhasit/wallace

package/dist/wallace.js

@@ -53,13 +53,7 @@ Wrapper.prototype = {
     return this
   },
   att: function(name, value) {
-    this.e.setAttribute(name, value);
-    return this
-  },
-  atts: function(atts) {
-    for (let name in atts) {
-      this.att(name, atts[name]);
-    }
+    this.e[name] = value;
     return this
   },
   pool: function(pool) {
@@ -143,7 +137,7 @@ Wrapper.prototype = {
   src: function(value) {
     return this.att('src', value)
   },
-  style: function(name, value) {
+  style: function(value, name) {
     this.e.style[name] = value;
     return this
   },
@@ -155,8 +149,11 @@ Wrapper.prototype = {
     this.e.textContent = value;
     return this
   },
-  visible: function(visible) {
-    this.e.classList.toggle('hidden', !visible);
+  hidden: function(value) {
+    // TODO: fix this - it works in browser, is it just tests?
+    this.e.classList.toggle('hidden', value);
+    // console.log('hidden', value)
+    // this.e.hidden = !value
     return this
   },
   value: function(value) {
@@ -442,7 +439,9 @@ Lookup.prototype = {
       // 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.__ov[key];
+      // TODO: is this checking for watchOnce?
       o = und(o) ? '' : o; 
+      // console.log(key)
       const n = this.callbacks[key](component, component.props);
       const c = n !== o;
       component.__ov[key] = n;
@@ -477,6 +476,26 @@ function Component(parent) {
 } 
 
 
+
+Component.extend = function(opts) {
+  var base = opts._base || Component;
+  // TODO: do we care about allowing this?
+  // var NewComponent = opts.hasOwnProperty('constructor') ? opts.constructor : function(parent) {
+  
+  // TODO: This ends up being the name of the function, used in logging etc.
+  // Maybe change with Object.defineProperty() or use object hack {name: func....}
+  var CustomComponent = function(parent) {
+    base.call(this, parent);
+  };
+  delete opts._base;
+  CustomComponent.prototype = Object.create(base && base.prototype, {
+    constructor: { value: CustomComponent, writable: true, configurable: true }
+  });
+  Object.assign(CustomComponent.prototype, opts);
+  return CustomComponent
+};
+
+
 var proto = Component.prototype;
 
 proto.onUpdate = noop;
@@ -507,14 +526,17 @@ proto.init = function() {
  */
 proto.bubble = function(name) {
   let target = this.parent;
-  while (!und(target)) {
-    if (target[name]) {     
-      // We don't really care about performance here, so accessing arguments is fine.   
-      return target[name].apply(target,  Array.prototype.slice.call(arguments, 1))
+  while (target) {
+    // console.log(target.name)
+    let func = target[name];
+    if (func) {     
+      // We don't really care about performance here, so accessing arguments is fine.
+      // TODO: maybe we do care, so pass as array? Or use proxy?
+      return func.apply(target, Array.prototype.slice.call(arguments, 1))
     }
     target = target.parent;
   }
-  throw 'Bubble popped.'
+  throw new Error('Bubble popped.')
 };
 /**
  * Move the component to new parent. Necessary if sharing a pool.
@@ -588,7 +610,7 @@ proto.updateSelf = function() {
     shouldBeVisible = true;
     if (shieldQuery) {
       // Get the newValue for shieldQuery using lookup
-      shieldQueryResult = this.lookup(shieldQuery).n;
+      shieldQueryResult = !!this.lookup(shieldQuery).n;
 
       // Determine if shouldBeVisible based on reverseShield
       // i.e. whether "shieldQuery===true" means show or hide.
@@ -598,7 +620,7 @@ proto.updateSelf = function() {
       shieldCount = shouldBeVisible ? 0 : watch.sc;
 
       // Set the element visibility
-      wrapper.visible(shouldBeVisible);
+      wrapper.hidden(!shouldBeVisible);
       i += shieldCount;
     }
     if (shouldBeVisible) {
@@ -659,9 +681,11 @@ const applyWatchCallbacks = (component, wrapper, callbacks) => {
   
   for (let key in callbacks) {
     let callback = callbacks[key];
+    // TODO: change this to use constant.
     if (key === '*') {
       callback.call(component, wrapper, component.props, component);
     } else {
+      // TODO: will this transpile to something different?
       // means: {new, old, changed}
       const {n, o, c} = component.lookup(key);
       if (c) {
@@ -692,7 +716,8 @@ proto.__ni = function(path, cls) {
  * @param {object} [prototypeExtras] - an object with extra things to be added to the prototype
  * @param {function} [prototypeExtras] - the function to be used as constructor
  */
-Component.prototype.__ex = function(baseClass, prototypeExtras, constructorFunction) {
+proto.__ex = function(baseClass, prototypeExtras, constructorFunction) {
+  // const base = baseClass || Component
   var subClass = constructorFunction || function(parent) {
     baseClass.call(this, parent);
   };
@@ -793,8 +818,8 @@ proto.__sv = function() {
 /**
  * Toggles visibility, like wrapper.
  */
-proto.visible = function(visible) {
-  this.e.classList.toggle('hidden', !visible);
+proto.hide = function(hidden) {
+  this.e.hidden = hidden;
 };
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "The framework that brings you freedom.",
   "babel": {
     "presets": [
@@ -21,15 +21,17 @@
     "prepublish": "npm run build",
     "build": "NODE_ENV=production rollup -c",
     "test": "jest --clearCache && jest",
-    "clear-jest": "jest --clearCache"
+    "jest-clear": "jest --clearCache"
   },
   "author": "Andrew Buchan",
   "license": "MIT",
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "babel-plugin-wallace": "^0.0.1"
+    "@babel/plugin-syntax-jsx": "^7.22.5",
+    "babel-plugin-wallace": "^0.0.2",
+    "jest-summary-reporter": "^0.0.2"
   },
-  "gitHead": "eab798895e65906cfab812010aafd131a74cb72d",
+  "gitHead": "922a989fa10d19dbcd2aaffe725d075a85214a73",
   "devDependencies": {
     "rollup": "^3.27.0"
   }

package/src/component.js

@@ -25,6 +25,26 @@ export function Component(parent) {
 } 
 
 
+
+Component.extend = function(opts) {
+  var base = opts._base || Component
+  // TODO: do we care about allowing this?
+  // var NewComponent = opts.hasOwnProperty('constructor') ? opts.constructor : function(parent) {
+  
+  // TODO: This ends up being the name of the function, used in logging etc.
+  // Maybe change with Object.defineProperty() or use object hack {name: func....}
+  var CustomComponent = function(parent) {
+    base.call(this, parent)
+  }
+  delete opts._base
+  CustomComponent.prototype = Object.create(base && base.prototype, {
+    constructor: { value: CustomComponent, writable: true, configurable: true }
+  })
+  Object.assign(CustomComponent.prototype, opts)
+  return CustomComponent
+}
+
+
 var proto = Component.prototype
 
 proto.onUpdate = noop
@@ -55,14 +75,17 @@ proto.init = function() {
  */
 proto.bubble = function(name) {
   let target = this.parent
-  while (!und(target)) {
-    if (target[name]) {     
-      // We don't really care about performance here, so accessing arguments is fine.   
-      return target[name].apply(target,  Array.prototype.slice.call(arguments, 1))
+  while (target) {
+    // console.log(target.name)
+    let func = target[name]
+    if (func) {     
+      // We don't really care about performance here, so accessing arguments is fine.
+      // TODO: maybe we do care, so pass as array? Or use proxy?
+      return func.apply(target, Array.prototype.slice.call(arguments, 1))
     }
     target = target.parent
   }
-  throw 'Bubble popped.'
+  throw new Error('Bubble popped.')
 }
 /**
  * Move the component to new parent. Necessary if sharing a pool.
@@ -136,7 +159,7 @@ proto.updateSelf = function() {
     shouldBeVisible = true
     if (shieldQuery) {
       // Get the newValue for shieldQuery using lookup
-      shieldQueryResult = this.lookup(shieldQuery).n
+      shieldQueryResult = !!this.lookup(shieldQuery).n
 
       // Determine if shouldBeVisible based on reverseShield
       // i.e. whether "shieldQuery===true" means show or hide.
@@ -146,7 +169,7 @@ proto.updateSelf = function() {
       shieldCount = shouldBeVisible ? 0 : watch.sc
 
       // Set the element visibility
-      wrapper.visible(shouldBeVisible)
+      wrapper.hidden(!shouldBeVisible)
       i += shieldCount
     }
     if (shouldBeVisible) {
@@ -207,9 +230,11 @@ const applyWatchCallbacks = (component, wrapper, callbacks) => {
   
   for (let key in callbacks) {
     let callback = callbacks[key]
+    // TODO: change this to use constant.
     if (key === '*') {
       callback.call(component, wrapper, component.props, component)
     } else {
+      // TODO: will this transpile to something different?
       // means: {new, old, changed}
       const {n, o, c} = component.lookup(key)
       if (c) {
@@ -240,7 +265,8 @@ proto.__ni = function(path, cls) {
  * @param {object} [prototypeExtras] - an object with extra things to be added to the prototype
  * @param {function} [prototypeExtras] - the function to be used as constructor
  */
-Component.prototype.__ex = function(baseClass, prototypeExtras, constructorFunction) {
+proto.__ex = function(baseClass, prototypeExtras, constructorFunction) {
+  // const base = baseClass || Component
   var subClass = constructorFunction || function(parent) {
     baseClass.call(this, parent)
   }
@@ -341,6 +367,6 @@ proto.__sv = function() {
 /**
  * Toggles visibility, like wrapper.
  */
-proto.visible = function(visible) {
-  this.e.classList.toggle('hidden', !visible)
+proto.hide = function(hidden) {
+  this.e.hidden = hidden
 }

package/src/lookup.js

@@ -19,7 +19,9 @@ Lookup.prototype = {
       // 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.__ov[key]
+      // TODO: is this checking for watchOnce?
       o = und(o) ? '' : o 
+      // console.log(key)
       const n = this.callbacks[key](component, component.props)
       const c = n !== o
       component.__ov[key] = n

package/src/wrapper.js

@@ -39,13 +39,7 @@ Wrapper.prototype = {
     return this
   },
   att: function(name, value) {
-    this.e.setAttribute(name, value)
-    return this
-  },
-  atts: function(atts) {
-    for (let name in atts) {
-      this.att(name, atts[name])
-    }
+    this.e[name] = value
     return this
   },
   pool: function(pool) {
@@ -129,7 +123,7 @@ Wrapper.prototype = {
   src: function(value) {
     return this.att('src', value)
   },
-  style: function(name, value) {
+  style: function(value, name) {
     this.e.style[name] = value
     return this
   },
@@ -141,8 +135,11 @@ Wrapper.prototype = {
     this.e.textContent = value
     return this
   },
-  visible: function(visible) {
-    this.e.classList.toggle('hidden', !visible)
+  hidden: function(value) {
+    // TODO: fix this - it works in browser, is it just tests?
+    this.e.classList.toggle('hidden', value)
+    // console.log('hidden', value)
+    // this.e.hidden = !value
     return this
   },
   value: function(value) {