wallace 0.0.2 → 0.0.6

package/src/component.js

@@ -1,372 +0,0 @@
-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
-} 
-
-
-
-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
-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 (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 new Error('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.hidden(!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]
-    // 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) {
-        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
- */
-proto.__ex = function(baseClass, prototypeExtras, constructorFunction) {
-  // const base = baseClass || Component
-  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.hide = function(hidden) {
-  this.e.hidden = hidden
-}

package/src/helpers.js

@@ -1,16 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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]
-      // 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
-      const rtn = {n, o, c}
-      run[key] = rtn
-      return rtn
-    }
-    return run[key]
-  },
-  reset: function() {
-    this.run = {}
-  }
-}
-

package/src/mountie.js

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,173 +0,0 @@
-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])
-  }
-}

package/src/utils.js

@@ -1,64 +0,0 @@
-import {doc, isStr, makeEl} from './helpers'
-import {Wrapper} from './wrapper'
-
-/**
- * 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 {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)
-  const nodeToReplace = getElement(elementOrId)
-  nodeToReplace.parentNode.replaceChild(component.e, nodeToReplace)
-  return component
-}
-
-/**
- * returns a Wrapper around an element.
- *
- * @param {unsure} elementOrId Either a string representing an id, or an element.
- */
-export function wrap(elementOrId) {
-  return new Wrapper(getElement(elementOrId))
-}
-
-
-function getElement(elementOrId) {
-  return isStr(elementOrId) ? document.getElementById(elementOrId) : 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.props = props
-  component.init()
-  component.update()
-  return component
-}
-
-/**
- * Builds a component.
- */
-export function buildComponent(cls, parent) {
-  const component = new cls(parent)
-  component.__bv(component, cls.prototype)
-  return component
-}
-
-
-/**
- * Creates a wrapper of type tag e.g. h('div')
- */
-export function h(tag) {
-  return new Wrapper(doc.createElement(tag))
-}