wallace 0.0.1

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "wallace",
+  "version": "0.0.1",
+  "description": "The framework that brings you freedom.",
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ],
+    "plugins": [
+      "babel-plugin-wallace",
+      "@babel/plugin-syntax-jsx",
+      "@babel/plugin-proposal-class-properties"
+    ]
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/wallace.js",
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "NODE_ENV=production rollup -c",
+    "test": "jest --clearCache && jest",
+    "clear-jest": "jest --clearCache"
+  },
+  "author": "Andrew Buchan",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "babel-plugin-wallace": "^0.0.1"
+  },
+  "gitHead": "eab798895e65906cfab812010aafd131a74cb72d",
+  "devDependencies": {
+    "rollup": "^3.27.0"
+  }
+}

package/src/component.js

@@ -0,0 +1,346 @@
+import {KeyedPool, InstancePool, SequentialPool} from './pool'
+import {buildComponent, createComponent} from  './utils'
+import {und, makeEl} from './helpers'
+import mountie from './mountie'
+import {Wrapper} from './wrapper'
+import {Lookup} from './lookup'
+
+const noop = function() {}
+
+/**
+ * Represents a component.
+ */
+export function Component(parent) {
+  const s = this
+  s.parent = parent       // The parent component
+  s.props = undefined     // The props passed to the component. May be changed.
+
+  // These will be set during build
+  s.e = null              // the element
+  s.el = null             // the named wrappers
+
+  // Internal state objects
+  s.__nv = []             // Nested components
+  s.__ov = {}             // The old values for watches to compare against
+} 
+
+
+var proto = Component.prototype
+
+proto.onUpdate = noop
+proto.afterUpdate = noop
+proto.onInit = noop
+proto.afterInit = noop
+
+/**
+ * Gets called once immediately after building.
+ * Sets initial props extracted from __html__.
+ * Note there is an issue here, in that we rely on there being initial props to call init
+ * on nested components.
+ */
+proto.init = function() {
+  this.onInit()
+  for (let key in this.__ip) {
+    let nestedComponent = this.el[key]
+    let callback = this.__ip[key]
+    if (callback) {
+      nestedComponent.props = callback(this, this.props)
+    }
+    nestedComponent.init()
+  }
+  this.afterInit()
+}
+/**
+ * Calls a function somewhere up the parent tree.
+ */
+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))
+    }
+    target = target.parent
+  }
+  throw 'Bubble popped.'
+}
+/**
+ * Move the component to new parent. Necessary if sharing a pool.
+ */
+proto.move = function(newParent) {
+  if (this.parent && this.parent.__nv) {
+    const nv = this.parent.__nv
+    nv.splice(nv.indexOf(this), 1)
+  }
+  this.parent = newParent
+}
+/**
+ * Builds a nested component of the specified class. Its up to you how you use it.
+ */
+proto.nest = function(cls, props) {
+  const child = createComponent(cls, this, props || this.props)
+  this.__nv.push(child)
+  return child
+}
+/**
+ * Lookup a watched value during update. Returns an object with {o, n, c}
+ * (oldValue, newValue, changed).
+ * You must call this.resetLookups before calling this during an update.
+ * The point is to pool the result so it doesn't have to be repeated.
+ */
+proto.lookup = function(query) {
+  return this.__qc.get(this, query)
+}
+/**
+ * Resets the lookups, must be called before calling this.lookup() during an update.
+ */
+proto.resetLookups = function() {
+  this.__qc.reset()
+}
+/**
+ * Sets the props and updates the component.
+ */
+proto.setProps = function(props) {
+  this.props = props
+  this.update()
+  return this
+}
+/**
+ * Call this if you want to get mount() and unmount() callbacks.
+ */
+proto.trackMounting = function() {
+  this.__mt.track(this)
+}
+/**
+ * Updates the component.
+ */
+proto.update = function() {
+  this.onUpdate()
+  this.resetLookups()
+  this.updateSelf()
+  this.updateNested()
+  this.afterUpdate()
+}
+/**
+ * Loops over watches skipping shielded watches if elements are hidden.
+ */
+proto.updateSelf = function() {
+  let i = 0, watch, wrapper, shieldCount, shieldQuery, shieldQueryResult, shouldBeVisible
+  const watches = this.__wc
+  const il = watches.length
+  while (i < il) {
+    watch = watches[i]
+    wrapper = this.el[watch.wk]
+    shieldQuery = watch.sq
+    i ++
+    shouldBeVisible = true
+    if (shieldQuery) {
+      // Get the newValue for shieldQuery using lookup
+      shieldQueryResult = this.lookup(shieldQuery).n
+
+      // Determine if shouldBeVisible based on reverseShield
+      // i.e. whether "shieldQuery===true" means show or hide.
+      shouldBeVisible = watch.rv ? shieldQueryResult : !shieldQueryResult
+
+      // The number of watches to skip if this element is not visible
+      shieldCount = shouldBeVisible ? 0 : watch.sc
+
+      // Set the element visibility
+      wrapper.visible(shouldBeVisible)
+      i += shieldCount
+    }
+    if (shouldBeVisible) {
+      applyWatchCallbacks(this, wrapper, watch.cb)
+    }
+  }
+}
+/**
+ * Update nested components (but not repeat elements).
+ */
+proto.updateNested = function() {
+  // These are user created by calling nest()
+  const items = this.__nv
+  for (let i=0, il=items.length; i<il; i++) {
+    let child = items[i]
+    if (child.__ia()) {
+      child.update()
+    }
+  }
+  // These are created with directives, and whose props arguments may need reprocessed.
+  for (let key in this.__ip) {
+    let callback = this.__ip[key]
+    let nestedComponent = this.el[key]
+    if (callback) {
+      nestedComponent.setProps(callback(this, this.props))
+    } else {
+      nestedComponent.update()
+    }
+  }
+}
+/**
+ * Calls the callback if the value has changed (
+ */
+// changed(name, callback) {
+//   const n = this.__ov[name]
+//   const o = this.props[name]
+//   if (n !== o) {
+//     callback(n, o)
+//   }
+// }
+
+
+/**
+ * Creates a watch.
+ */
+proto.__wa = function(wrapperKey, shieldQuery, reverseShield, shieldCount, callbacks) {
+  return {
+    wk: wrapperKey,       // The key of the corresponding wrapper.
+    sq: shieldQuery,      // The shield query key
+    rv: reverseShield,    // whether shieldQuery should be flipped
+    sc: shieldCount,      // The number of items to shield
+    cb: callbacks         // The callbacks - object
+  }
+}
+
+
+const applyWatchCallbacks = (component, wrapper, callbacks) => {
+  
+  for (let key in callbacks) {
+    let callback = callbacks[key]
+    if (key === '*') {
+      callback.call(component, wrapper, component.props, component)
+    } else {
+      // means: {new, old, changed}
+      const {n, o, c} = component.lookup(key)
+      if (c) {
+        callback.call(component, n, o, wrapper, component.props, component)
+      }
+    }
+  }
+}
+
+
+/**
+ * The global mount tracker.
+ */
+proto.__mt = mountie
+
+/**
+ * Nest Internal. For building a nested component declared in the html.
+ */
+proto.__ni = function(path, cls) {
+  const child = buildComponent(cls, this)
+  this.__gw(path).replace(child.e)
+  return child
+}
+
+/**
+ * 
+ * @param {function} baseClass - the base class to extend from
+ * @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) {
+  var subClass = constructorFunction || function(parent) {
+    baseClass.call(this, parent)
+  }
+  subClass.prototype = Object.create(baseClass && baseClass.prototype, {
+    constructor: { value: subClass, writable: true, configurable: true }
+  }); 
+  if (prototypeExtras) {
+    Object.assign(subClass.prototype, prototypeExtras);
+  }
+  return subClass
+}
+
+
+/**
+ * Create a component pool.
+ */
+proto.pool = function(cls, keyFn) {
+  return keyFn ? new KeyedPool(cls, keyFn) : new SequentialPool(cls)
+}
+
+/**
+ * Create an instance pool, for switches.
+ */
+proto.__ic = function(mappings, fallback) {
+  return new InstancePool(mappings, fallback)
+}
+
+/**
+ * Build the DOM. We pass prototype as local var for compactness.
+ */
+proto.__bd = function(prototype) {
+  if (prototype.__cn === undefined) {
+    prototype.__cn = makeEl(prototype.__ht)
+  }
+  this.e = prototype.__cn.cloneNode(true)
+}
+
+// proto.__bd = function(prototype, clone) {
+//   if (clone && !prototype.__cn) {
+//     prototype.__cn = makeEl(prototype.__ht)
+//   }
+//   this.e = clone ? prototype.__cn.cloneNode(true) : makeEl(prototype.__ht)
+// }
+
+// proto.__bd = function(prototype) {
+//   this.e = makeEl(prototype.__ht)
+// }
+
+/**
+ * Returns a regular wrapper around element at path, where path is an array of indices.
+ * This is used by the babel plugin.
+ */
+proto.__gw =  function(path) {
+  return new Wrapper(this.__fe(path))
+}
+
+/**
+ * Finds an element at specified path, where path is an array of indices.
+ * This is used by the babel plugin.
+ */
+proto.__fe = function(path) {
+  return path.reduce((acc, index) => acc.childNodes[index], this.e)
+}
+
+/**
+ * Is Attached.
+ * Determines whether this component is attached to the DOM.
+ */
+proto.__ia = function() {
+  let e = this.e
+  while (e) {
+    if (e === document) {
+      return true
+    }
+    e = e.parentNode
+  }
+  return false
+}
+
+/**
+ * Creates a lookup.
+ */
+proto.__lu = function(callbacks) {
+  return new Lookup(callbacks)
+}
+
+/**
+ * Creates an anonymous stub component class
+ */
+proto.__sv = function() {
+  const cls = function(parent) {
+    Component.call(this, parent)
+  }
+  cls.prototype = new Component()
+  return cls
+}
+
+/**
+ * Toggles visibility, like wrapper.
+ */
+proto.visible = function(visible) {
+  this.e.classList.toggle('hidden', !visible)
+}

package/src/helpers.js

@@ -0,0 +1,16 @@
+export const doc = document
+const throwAway = doc.createElement('template')
+
+/**
+ * Create an element from html string
+ */
+export function makeEl(html) {
+  throwAway.innerHTML = html
+  return throwAway.content.firstChild
+}
+
+/**
+ * Some utility functions
+ */
+export const und = x => x === undefined
+export const isStr = x => typeof x === 'string'

package/src/index.js

@@ -0,0 +1,18 @@
+import {createComponent, h, mount, wrap} from  './utils'
+import {isStr} from  './helpers'
+import {Component} from './component'
+import {KeyedPool, InstancePool, SequentialPool} from './pool'
+import {Wrapper} from './wrapper'
+
+module.exports = {
+  createComponent,
+  h,
+  mount,
+  KeyedPool,
+  InstancePool,
+  isStr,
+  SequentialPool,
+  Component,
+  Wrapper,
+  wrap
+}

package/src/lookup.js

@@ -0,0 +1,36 @@
+import {und} from './helpers'
+
+/**
+ * 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 = {
+  get: function(component, 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.__ov[key]
+      o = und(o) ? '' : o 
+      const n = this.callbacks[key](component, component.props)
+      const c = n !== o
+      component.__ov[key] = n
+      const rtn = {n, o, c}
+      run[key] = rtn
+      return rtn
+    }
+    return run[key]
+  },
+  reset: function() {
+    this.run = {}
+  }
+}
+

package/src/mountie.js

@@ -0,0 +1,23 @@
+/**
+ * Wallace's crude way of tracking mounting and unmounting.
+ */
+
+const trackedComponents = []
+
+export default {
+  track: function (component) {
+    trackedComponents.push({component: component, isAttached: component.__ia()})
+  },
+  flush: function () {
+    for (let i=0, il=trackedComponents.length; i<il; i++) {
+      let trackedComponent = trackedComponents[i]
+      let component = trackedComponent.component
+      let attachedNow = component.__ia()
+      if (attachedNow !== trackedComponent.isAttached) {
+        let fn = attachedNow ? component.mount : component.unmount
+        fn.apply(component)
+        trackedComponent.isAttached = attachedNow
+      }
+    }
+  }
+}

package/src/pool.js

@@ -0,0 +1,173 @@
+import {createComponent} from './utils'
+
+/**
+ * Pools same type components, retrieving by sequence.
+ * Must not be shared.
+ * 
+ * @param {class} componentClass - The class of Component to create.
+ * @param {function} keyFn - A function which obtains the key to pool by
+ */
+export function KeyedPool(componentClass, keyFn) {
+  this._v = componentClass
+  this._f = keyFn
+  this._k = []  // keys
+  this._p = {}  // pool of component instances
+}
+const proto = KeyedPool.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 this._get(this._p, this._v, this._f(item), item, parent)
+}
+
+/**
+ * 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 {Component} parent - The parent component.
+ */
+proto.patch = function(e, items, parent) {
+  const pool = this._p
+  const componentClass = this._v
+  const keyFn = this._f
+  const childNodes = e.childNodes
+  const itemsLength = items.length
+  const oldKeySequence = this._k
+  const newKeys = []
+  let item, key, component, childElementCount = oldKeySequence.length + 1
+  for (let i=0; i<itemsLength; i++) {
+    item = items[i]
+    key = keyFn(item)
+    component = this._get(pool, componentClass, key, item, parent)
+    newKeys.push(key)
+    if (i > childElementCount) {
+      e.appendChild(component.e)
+    } else if (key !== oldKeySequence[i]) {
+      e.insertBefore(component.e, childNodes[i])
+      pull(oldKeySequence, key, i)
+    }
+  }
+  this._k = newKeys
+  trimChildren(e, childNodes, itemsLength)
+}
+
+// Internal
+proto._get = function(pool, componentClass, key, item, parent) {
+  let component
+  if (pool.hasOwnProperty(key)) {
+    component = pool[key]
+    component.setProps(item)
+  } else {
+    component = createComponent(componentClass, parent, item)
+    pool[key] = component;
+  }
+  return component
+}
+
+/**
+ * Pools same type components, retrieving by sequence.
+ * Must not be shared.
+ * 
+ * @param {class} componentClass - The class of Component to create.
+ */
+export function SequentialPool(componentClass) {
+  this._v = componentClass
+  this._p = []  // pool of component instances
+  this._c = 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 {Component} parent - The parent component.
+ */
+SequentialPool.prototype.patch = function(e, items, parent) {
+  const pool = this._p
+  const componentClass = this._v
+  const childNodes = e.childNodes
+  const itemsLength = items.length
+  let item, component, poolCount = pool.length, childElementCount = this._c
+
+  for (let i=0; i<itemsLength; i++) {
+    item = items[i]
+    if (i < poolCount) {
+      component = pool[i]
+      component.setProps(item)
+    } else {
+      component = createComponent(componentClass, parent, item)
+      pool.push(component)
+      poolCount ++
+    }
+    if (i >= childElementCount) {
+      e.appendChild(component.e)
+    }
+  }
+  this._c = itemsLength
+  trimChildren(e, childNodes, itemsLength)
+}
+
+/**
+ * An object which creates and pools components according to the mappings provided.
+ * If there is no match in the mappings, the fallback function is called.
+ * 
+ * Note that the fallback must return an instance (of Component or Wrapper) whereas
+ * mappings must specify component classes. 
+ * 
+ * You can rely solely on the fallback if you like.
+ * 
+ * @param {Object} mappings - a mapping of format key->componentClass
+ * @param {function} fallback - a function to call when no key is provided.
+ * 
+ */
+export function InstancePool(mappings, fallback) {
+  this._m = mappings
+  this._f = fallback
+  this._i = {} // Instances
+}
+
+InstancePool.prototype.getOne = function(key, parentComponent) {
+  if (!this._i.hasOwnProperty(key)) {
+    this._i[key] = this._m.hasOwnProperty(key) ?
+      parentComponent.nest(this._m[key]) : this._f(key, parentComponent)
+  }
+  return this._i[key]
+}
+
+/**
+ * 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 
+ * @param {any} item 
+ * @param {Int} to 
+ */
+function pull(arr, item, to) {
+  const position = arr.indexOf(item)
+  if (position != to) {
+    arr.splice(to, 0, arr.splice(position, 1)[0])
+  }
+}