stalefish 8.0.0 → 8.0.2

package/components/button.mjs

@@ -1,46 +1,5 @@
-import { html, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
+import { html } from 'halfcab'
 
-let cache = new LRU(300)
-
-class Button extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.action = args.action
-    let { width, minWidth, height, text, colour, disabled } = args
-
-    return html`
-        <button style="${disabled ? 'opacity: 0.3;' : ''}font-family: inherit; line-height: inherit; cursor: ${disabled ? 'not-allowed' : 'pointer'}; background-color: ${colour}; ${minWidth ? `min-width: ${minWidth};` : ''} border-radius: 3px; margin: 30px 10px; width: ${width}; height: ${height}; border: none; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); font-size: 17px; color: white;" ${disabled ? 'disabled' : ''} onclick=${e => this.action(e)}>${text}</button> 
-    `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
-      }
-    })
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
-
-function button (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Button()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Button()
-    return instance.createElement(args)
-  }
-}
-
-export default args => button(args)
+export default ({ width, minWidth, height, text, colour, disabled }) => html`
+      <button style="${disabled ? 'opacity: 0.3;' : ''}font-family: inherit; line-height: inherit; cursor: ${disabled ? 'not-allowed' : 'pointer'}; background-color: ${colour}; ${minWidth ? `min-width: ${minWidth};` : ''} border-radius: 3px; margin: 30px 10px; width: ${width}; height: ${height}; border: none; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); font-size: 17px; color: white;" ?disabled=${disabled} onclick=${e => this.action(e)}>${text}</button> 
+  `

package/components/checkbox.mjs

@@ -1,8 +1,4 @@
-import { html, css, formField, fieldIsTouched, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(300)
+import { html, css, formField, fieldIsTouched } from 'halfcab'
 
 let styles = css`
     .checkbox {
@@ -33,52 +29,21 @@ let styles = css`
     }
 `
 
-class Checkbox extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.onchange = args.onchange
-    let { wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground } = args
-
-    let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ${holdingPen[property] === true ? { checked: 'checked' } : ''} onchange=${e => {
-      formField(holdingPen, property)(e)
-      this.onchange && this.onchange(e)
-    }} type="checkbox" ${required ? { required: 'required' } : ''} />`
-
-    checkboxEl.indeterminate = indeterminate || false
+export default ({ wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground, onchange }) => {
+  let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ?checked=${holdingPen[property] === true} onchange=${e => {
+    formField(holdingPen, property)(e)
+    onchange && onchange(e)
+  }} type="checkbox" ${required ? { required: 'required' } : ''} />`
 
-    return html`
-        <label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" ${wrapperStyle ? { 'class': wrapperStyle } : ''}>
-            <span class="${styles.label}" style="background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8});">${label}${required ? ' *' : ''}${checkboxEl}</span>
-        </label>
-    `
-  }
+  checkboxEl.indeterminate = indeterminate || false
 
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
-      }
-    })
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
+  const wrapperClassName = wrapperStyle
+    ? (typeof wrapperStyle === 'string' ? wrapperStyle : (wrapperStyle.toString ? wrapperStyle.toString() : ''))
+    : ''
 
-function checkbox (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Checkbox()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Checkbox()
-    return instance.createElement(args)
-  }
+  return html`
+      <label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" class="${wrapperClassName}">
+          <span class="${styles.label}" style="background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8});">${label}${required ? ' *' : ''}${checkboxEl}</span>
+      </label>
+  `
 }
-
-export default args => checkbox(args)

package/components/dateTimePicker.mjs

@@ -1,11 +1,7 @@
-import { html, css, formField, fieldIsTouched, Component, LRU } from 'halfcab'
+import { html, css, formField, fieldIsTouched } from 'halfcab'
 import flatpickr from 'flatpickr'
 import calendarIcon from './icons/calendarIcon.mjs'
 import timeIcon from './icons/timeIcon.mjs'
-import clone from 'fast-clone'
-import * as deepDiff from 'deep-object-diff'
-
-let cache = new LRU(300)
 
 let styles = css`
   .textfield {
@@ -108,15 +104,8 @@ function detectTouchscreen () {
   return result
 }
 
-class DateTimePicker extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.onchange = args.onchange
-    this.oninput = args.oninput
-
-    let { wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, permanentTopPlaceholder = true, permanentTopLabel = false, flatpickrConfig = {}, timeOnly = false, disabled, disableClear = false } = args
-
-    let el = html`
+export default ({ wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, permanentTopPlaceholder = true, permanentTopLabel = false, flatpickrConfig = {}, timeOnly = false, disabled, disableClear = false, onchange, oninput }) => {
+  let el = html`
     <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
        <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;">
        <div class="${styles.icon}">${timeOnly ? timeIcon({ colour: '#ccc' }) : calendarIcon({ colour: '#ccc' })}</div>
@@ -128,7 +117,7 @@ class DateTimePicker extends Component {
     e.target.parentNode.parentNode._flatpickr.close()
     return false
   }}>clear</div>` : ''}
-       <input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onfocus=${e => {
+       <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onfocus=${e => {
   e.target.parentNode.parentNode._flatpickr && e.target.parentNode.parentNode._flatpickr.set('onValueUpdate', (fpDate, dateString) => {
     let fauxE = {
       currentTarget: {
@@ -139,58 +128,28 @@ class DateTimePicker extends Component {
       }
     }
     formField(holdingPen, property)(fauxE)
-    this.onchange && this.onchange(fauxE)
+    onchange && onchange(fauxE)
   })
-}} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); this.onchange && this.onchange(e) }} oninput=${e => { e.target.defaultValue = ''; this.oninput && this.oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${detectTouchscreen() ? timeOnly ? 'time' : 'date' : 'text'}" ${pattern ? { pattern } : ''} value="${holdingPen[property] || ''}" data-input />
+}} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${detectTouchscreen() ? timeOnly ? 'time' : 'date' : 'text'}" ${pattern ? { pattern } : ''} value="${holdingPen[property] || ''}" data-input />
        </div>
     </div>
     `
 
-    this.flatpickr = flatpickr(el, Object.assign(flatpickrConfig, {
-      wrap: true,
-      onValueUpdate: (fpDate, dateString) => {
-        let fauxE = {
-          currentTarget: {
-            validity: {
-              valid: true
-            },
-            value: dateString
-          }
+  this.flatpickr = flatpickr(el, Object.assign(flatpickrConfig, {
+    wrap: true,
+    onValueUpdate: (fpDate, dateString) => {
+      let fauxE = {
+        currentTarget: {
+          validity: {
+            valid: true
+          },
+          value: dateString
         }
-        formField(holdingPen, property)(fauxE)
-        this.onchange && this.onchange(fauxE)
-      }
-    }, timeOnly ? { noCalendar: true, enableTime: true } : null))
-
-    return el
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
       }
-    })
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
-
-function dateTimePicker (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new DateTimePicker()
-      cache.set(args.uniqueKey, instance)
+      formField(holdingPen, property)(fauxE)
+      onchange && onchange(fauxE)
     }
-    return instance.render(args)
-  } else {
-    instance = new DateTimePicker()
-    return instance.createElement(args)
-  }
-}
+  }, timeOnly ? { noCalendar: true, enableTime: true } : null))
 
-export default args => dateTimePicker(args)
+  return el
+}

package/components/dropdown.mjs

@@ -1,8 +1,4 @@
-import { html, css, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(300)
+import { html, css } from 'halfcab'
 
 let styles = css`
 
@@ -38,45 +34,13 @@ let styles = css`
   }
 `
 
-class Dropdown extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    // TODO - for menu items where the action changes, we need to use this.item.action
-    let { menuItems, visible, side, width, margin, backgroundColour } = args
-
-    return html`
-    <div tabindex="-1" class="${styles.dropdown}" style="position: relative; z-index: 100000; ${!visible ? 'display: none;' : ''}${side === 'right' ? 'float: right;' : ''}">
-      <div class="${styles.dropdownContent}" style="background-color: ${backgroundColour || '#f9f9f9'}; ${side === 'right' ? 'right: 0;' : ''} width: ${width || '160px'};${margin ? `margin: ${margin};` : ''}">
-      ${menuItems.filter(item => !item.visibleUnder || (item.visibleUnder && typeof window !== 'undefined' && window.innerWidth <= parseInt(item.visibleUnder)))
+export default ({ menuItems, visible, side, width, margin, backgroundColour }) => html`
+  <div tabindex="-1" class="${styles.dropdown}" style="position: relative; z-index: 100000; ${!visible ? 'display: none;' : ''}${side === 'right' ? 'float: right;' : ''}">
+    <div class="${styles.dropdownContent}" style="background-color: ${backgroundColour || '#f9f9f9'}; ${side === 'right' ? 'right: 0;' : ''} width: ${width || '160px'};${margin ? `margin: ${margin};` : ''}">
+    ${menuItems.filter(item => !item.visibleUnder || (item.visibleUnder && typeof window !== 'undefined' && window.innerWidth <= parseInt(item.visibleUnder)))
     .map(item => html`
-        ${item.separator ? html`<hr class="${styles.separator}">` : item.disabled === true ? html`<div style="opacity: 0.3; pointer-events: none;">${item.text}</div>` : html`<div style="cursor: pointer;" onclick=${item.action}>${item.text}</div>`}
-      `)}
-      </div>
-    </div>   
-    `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
-
-function dropdown (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Dropdown()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Dropdown()
-    return instance.createElement(args)
-  }
-}
-
-export default args => dropdown(args)
+      ${item.separator ? html`<hr class="${styles.separator}">` : item.disabled === true ? html`<div style="opacity: 0.3; pointer-events: none;">${item.text}</div>` : html`<div style="cursor: pointer;" onclick=${item.action}>${item.text}</div>`}
+    `)}
+    </div>
+  </div>   
+`

package/components/loader.mjs

@@ -1,4 +1,4 @@
-import { html, css, Component } from 'halfcab'
+import { html, css } from 'halfcab'
 
 let styles = css`
   .progress {
@@ -63,16 +63,6 @@ let styles = css`
       right: -8%; } }
 `
 
-class Loader extends Component {
-  createElement ({ on }) {
-    this.on = on
-    return on === true ? html`<div class="${styles.progress} indeterminate"></div>` : html`<div></div>`
-  }
-
-  update ({ on }) {
-    return on !== this.on
-  }
+export default ({ on }) => {
+  return on === true ? html`<div class="${styles.progress} indeterminate"></div>` : html`<div></div>`
 }
-
-let loader = new Loader()
-export default args => loader.render(args)

package/components/panel.mjs

@@ -1,13 +1,9 @@
-import { html, css, Component, LRU } from 'halfcab'
+import { html, css } from 'halfcab'
 import close from './icons/close.mjs'
 import up from './icons/up.mjs'
 import down from './icons/down.mjs'
 import moreVertical from './icons/moreVertical.mjs'
 import dropdown from './dropdown.mjs'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(2000)
 
 let styles = css`
     .panel h3 {
@@ -37,28 +33,15 @@ let styles = css`
     }
 `
 
-class Panel extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.headerAction = args.headerAction
-    this.dragStartAction = args.dragStartAction
-    this.dragOverAction = args.dragOverAction
-    this.dragEndAction = args.dragEndAction
-    this.dragLeaveAction = args.dragLeaveAction
-    this.draggable = args.draggable
-    this.collapseToggleAction = args.collapseToggleAction
-    this.closeAction = args.closeAction
-
-    let { chevronStyle = null, on = true, content, heading = '', collapsed = false, thinBorder = false, light = false, optionsMenu, tooltipHeading = false } = args
-
-    return on ? html`<div ondragover=${e => {
-      if (this.dragOverAction) {
-        e.preventDefault()
-        e.dataTransfer.dropEffect = 'move'
-      }
-    }} class="${styles.panel}" style='box-sizing: border-box; position: relative; top: 0; left: 0; text-align: left; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); border: solid ${thinBorder ? '3px' : '5px'} ${light ? '#DDD' : '#4371AD'}; background-color: #FBFBFB;'>
-        <div title="${tooltipHeading && collapsed ? heading : ''}" style="position: relative;" ondragleave="${e => this.dragLeaveAction && this.dragLeaveAction(e)}" ondragend="${e => this.dragEndAction && this.dragEndAction(e)}" ondragover="${e => this.dragOverAction && this.dragOverAction(e)}" ondragstart="${e => this.dragStartAction && this.dragStartAction(e)}" draggable="${this.draggable ? 'true' : ''}" >
-            ${heading ? html`<div class="${styles.header}" onclick=${e => this.headerAction && this.headerAction(e)}>
+export default ({ chevronStyle = null, on = true, content, heading = '', collapsed = false, thinBorder = false, light = false, optionsMenu, tooltipHeading = false, headerAction, dragStartAction, dragOverAction, dragEndAction, dragLeaveAction, draggable, collapseToggleAction, closeAction }) => {
+  return on ? html`<div ondragover=${e => {
+    if (dragOverAction) {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+    }
+  }} class="${styles.panel}" style='box-sizing: border-box; position: relative; top: 0; left: 0; text-align: left; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); border: solid ${thinBorder ? '3px' : '5px'} ${light ? '#DDD' : '#4371AD'}; background-color: #FBFBFB;'>
+        <div title="${tooltipHeading && collapsed ? heading : ''}" style="position: relative;" ondragleave="${e => dragLeaveAction && dragLeaveAction(e)}" ondragend="${e => dragEndAction && dragEndAction(e)}" ondragover="${e => dragOverAction && dragOverAction(e)}" ondragstart="${e => dragStartAction && dragStartAction(e)}" draggable="${draggable ? 'true' : ''}" >
+            ${heading ? html`<div class="${styles.header}" onclick=${e => headerAction && headerAction(e)}>
                 <h3 style="margin: 12px; max-width: calc(100% - ${optionsMenu ? '70' : '50'}px); color: ${light ? '#555;' : '#22487e'} ${collapsed ? 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden;' : ''}">${heading}</h3>
 
                 ${optionsMenu ? html`<div style="position: absolute; right: 45px; top: 13px;">
@@ -76,40 +59,10 @@ ${dropdown({
                 </div>` : ''}
             </div>` : ''}
         </div>
-        ${this.closeAction && !this.collapseToggleAction ? html`<div style="position: absolute; width: 20px; height: 20px; right: 5px; top: 5px; cursor: pointer;" onclick=${this.closeAction}><div style="display: flex; justify-content: center; align-items: center;">${close({ colour: '#22487e' })}</div></div>` : ''}
+        ${closeAction && !collapseToggleAction ? html`<div style="position: absolute; width: 20px; height: 20px; right: 5px; top: 5px; cursor: pointer;" onclick=${closeAction}><div style="display: flex; justify-content: center; align-items: center;">${close({ colour: '#22487e' })}</div></div>` : ''}
 
-        ${this.collapseToggleAction ? html`<div ${chevronStyle ? { 'class': chevronStyle } : ''} style="position: absolute; width: 50px; height: 50px; right: 0; margin-top: -3px; top: 5px; cursor: pointer;" onclick=${this.collapseToggleAction}><div style="display: flex; justify-content: center; align-items: center;">${collapsed ? down({ colour: light ? '#999' : '#22487e', width: '40px', height: '50px' }) : up({ colour: light ? '#999' : '#22487e', width: '40px', height: '40px' })}</div></div>` : ''}
+        ${collapseToggleAction ? html`<div ${chevronStyle ? { 'class': chevronStyle } : ''} style="position: absolute; width: 50px; height: 50px; right: 0; margin-top: -3px; top: 5px; cursor: pointer;" onclick=${collapseToggleAction}><div style="display: flex; justify-content: center; align-items: center;">${collapsed ? down({ colour: light ? '#999' : '#22487e', width: '40px', height: '50px' }) : up({ colour: light ? '#999' : '#22487e', width: '40px', height: '40px' })}</div></div>` : ''}
 
         ${collapsed === false ? typeof content === 'function' ? content() : content : ''}
     </div>` : ''
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function' && key !== 'content') {
-        this[key] = args[key]
-      }
-    })
-    return !!Object.keys(diff).find(key => key !== 'optionsMenu' && typeof diff[key] !== 'function')
-  }
 }
-
-function panel (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Panel()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Panel()
-    return instance.createElement(args)
-  }
-}
-
-export default args => panel(args)

package/components/selectbox.mjs

@@ -1,9 +1,5 @@
-import { html, css, formField, fieldIsTouched, Component, LRU } from 'halfcab'
+import { html, css, formField, fieldIsTouched } from 'halfcab'
 import solidDown from './icons/solidDown.mjs'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(300)
 
 let styles = css`
   .selectBox {
@@ -66,29 +62,21 @@ let styles = css`
   }
 `
 
-class Selectbox extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.onchange = args.onchange
-    this.oninput = args.oninput
-
-    let { wrapperStyle = null, holdingPen, label, property, options, required, disabled } = args
-
-    let currentOption = options.find(option => {
-      if (typeof option === 'object') {
-        return option.value === holdingPen[property]
-      } else {
-        return option === holdingPen[property]
-      }
-    })
-    this.currentOption = currentOption
+export default ({ wrapperStyle = null, holdingPen, label, property, options, required, disabled, onchange, oninput }) => {
+  let currentOption = options.find(option => {
+    if (typeof option === 'object') {
+      return option.value === holdingPen[property]
+    } else {
+      return option === holdingPen[property]
+    }
+  })
 
-    return html`
+  return html`
     <label style="text-align: left; position: relative; display: inline-block; width: 100%;" ${wrapperStyle ? { 'class': wrapperStyle } : ''}>
       <div class="${styles.down}">${solidDown({ colour: '#ccc' })}</div>
       <span class="${styles.label}">${label}${required ? ' *' : ''}</span>
-      <select ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}" class="${styles.selectBox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" oninput=${e => { formField(holdingPen, property)(e); this.oninput && this.oninput(e) }} onchange=${e => { formField(holdingPen, property)(e); this.onchange && this.onchange(e) }} onblur=${formField(holdingPen, property)}>
-        <option value="${required ? 'Select an option' : ''}" ${!holdingPen[property] ? { selected: 'true' } : ''} ${required ? { disabled: 'disabled' } : ''}>${required ? 'Select an option' : ''}</option>
+      <select ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}" class="${styles.selectBox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" oninput=${e => { formField(holdingPen, property)(e); oninput && oninput(e) }} onchange=${e => { formField(holdingPen, property)(e); onchange && onchange(e) }} onblur=${formField(holdingPen, property)}>
+        <option value="${required ? 'Select an option' : ''}" ?selected=${!holdingPen[property]} ?disabled=${required} : ''}>${required ? 'Select an option' : ''}</option>
         ${options.map(option => {
     let optionValue
     let optionName
@@ -98,39 +86,9 @@ class Selectbox extends Component {
     } else {
       optionValue = option
     }
-    return html`<option value="${optionValue}" ${holdingPen[property] == optionValue ? { selected: 'true' } : ''}>${optionName || optionValue}</option>` // eslint-disable-line
+    return html`<option value="${optionValue}" ?selected=${holdingPen[property] == optionValue}>${optionName || optionValue}</option>` // eslint-disable-line
   })}
       </select>
     </label>
   `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
-      }
-    })
-    return this.currentOption !== args.currentOption || !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
 }
-
-function selectbox (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Selectbox()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Selectbox()
-    return instance.createElement(args)
-  }
-}
-
-export default args => selectbox(args)

package/components/table.mjs

@@ -1,8 +1,4 @@
-import { html, css, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(100)
+import { html, css } from 'halfcab'
 
 let styles = css`
   .table {
@@ -46,46 +42,15 @@ let _data = [
   ['C1-R2', () => 'C2-R2', () => 'C3-R2']
 ]
 
-class Table extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    let { columns = _columns, data = _data } = args
-
-    return html`
-       <table class="${styles.table}">
-        <thead class="${styles.thRow}">
-            <tr>
-                ${columns.map(column => html`<th class="${styles.th} ${column.style || ''}" scope="col" ${column.action ? { onclick: column.action } : ''}>${column.title}${column.icon ? column.icon : ''}</th>`)}
-            </tr>
-        </thead>
-        <tbody>
-           ${data.map(row => html`<tr class="${styles.tr}">${row.map(column => html`<td class="${column.style || ''}" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap; max-width: 0; direction: rtl;">${typeof column.content === 'function' ? column.content() : column.content}</td>`)}</tr>`)}
-        </tbody>
-    </table>
-    `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
-
-function table (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Table()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Table()
-    return instance.createElement(args)
-  }
-}
-
-export default args => table(args)
+export default ({ columns = _columns, data = _data }) => html`
+   <table class="${styles.table}">
+    <thead class="${styles.thRow}">
+        <tr>
+            ${columns.map(column => html`<th class="${styles.th} ${column.style || ''}" scope="col" ${column.action ? { onclick: column.action } : ''}>${column.title}${column.icon ? column.icon : ''}</th>`)}
+        </tr>
+    </thead>
+    <tbody>
+       ${data.map(row => html`<tr class="${styles.tr}">${row.map(column => html`<td class="${column.style || ''}" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap; max-width: 0; direction: rtl;">${typeof column.content === 'function' ? column.content() : column.content}</td>`)}</tr>`)}
+    </tbody>
+</table>
+`

package/components/textarea.mjs

@@ -1,8 +1,4 @@
-import { html, css, formField, fieldIsTouched, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(300)
+import { html, css, formField, fieldIsTouched } from 'halfcab'
 
 let styles = css`
   .textarea {
@@ -59,51 +55,14 @@ function change ({ e, holdingPen, property, label }) {
   return ff
 }
 
-class Textarea extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.onchange = args.onchange
-    this.oninput = args.oninput
-
-    let { holdingPen, label, placeholder, property, required, pattern, onkeyup, autofocus, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, darkBackground } = args
-
-    let input = html`<textarea data-gramm="false" style="${this.height ? `height: ${this.height}` : ''}" class="${styles.textarea} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); this.onchange && this.onchange(e) }} oninput=${e => { this.height = window.getComputedStyle(this.element.querySelector('textarea')).height; change({ e, holdingPen, property, label: styles.label }); this.oninput && this.oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" ${pattern ? { pattern } : ''}>${holdingPen[property] || ''}</textarea>`
-
-    if (autofocus) {
-      input.autofocus = true
-    }
-
-    return html`
-       <label ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>${input}</label>
-    `
-  }
+export default ({ holdingPen, label, placeholder, property, required, pattern, onkeyup, autofocus, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, darkBackground, onchange, height, oninput, element }) => {
+  let input = html`<textarea data-gramm="false" style="${height ? `height: ${height}` : ''}" class="${styles.textarea} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { height = window.getComputedStyle(element.querySelector('textarea')).height; change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" ${pattern ? { pattern } : ''}>${holdingPen[property] || ''}</textarea>`
 
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
-      }
-    })
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
+  if (autofocus) {
+    input.autofocus = true
   }
-}
 
-function textarea (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Textarea()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Textarea()
-    return instance.createElement(args)
-  }
+  return html`
+     <label ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>${input}</label>
+  `
 }
-
-export default args => textarea(args)

package/components/textfield.mjs

@@ -1,9 +1,4 @@
-import { html, css, formField, fieldIsTouched, Component, LRU } from 'halfcab'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
-
-let cache = new LRU(300)
-
+import { html, css, formField, fieldIsTouched } from 'halfcab'
 // language=CSS
 let styles = css`
     .textfield {
@@ -98,58 +93,20 @@ function determineStep (type) {
   return '1'
 }
 
-class Textfield extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    this.onkeyup = args.onkeyup
-    this.oninput = args.oninput
-    this.onchange = args.onchange
-
-    let { highlightBorder = false, wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, type, autofocus, valueContext, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, maxCharacters, maxNumber, minNumber, darkBackground } = args
-
-    let input = html`<input data-gramm="false" ${disabled ? { disabled } : ''} ${maxNumber ? { max: maxNumber } : ''} ${minNumber ? { min: minNumber } : ''} ${maxCharacters ? { maxlength: maxCharacters } : ''} style="${type === 'color' ? 'height: 50px; padding: 2px 3px;' : ''}${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}" value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}" onkeyup=${e => this.onkeyup && this.onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); this.onchange && this.onchange(e) }} oninput=${e => { change({ e, holdingPen, property, label: styles.label }); this.oninput && this.oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${determineType(type)}" ${pattern ? { pattern } : ''} ${type.toLowerCase() === 'number' ? { step: determineStep(type) } : ''} />`
+export default ({ highlightBorder = false, wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, type, autofocus, valueContext, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, maxCharacters, maxNumber, minNumber, darkBackground, onkeyup, oninput, onchange }) => {
+  let input = html`<input data-gramm="false" ${disabled ? { disabled } : ''} ${maxNumber ? { max: maxNumber } : ''} ${minNumber ? { min: minNumber } : ''} ${maxCharacters ? { maxlength: maxCharacters } : ''} style="${type === 'color' ? 'height: 50px; padding: 2px 3px;' : ''}${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}" value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); onchange && onchange(e) }} oninput=${e => { change({ e, holdingPen, property, label: styles.label }); oninput && oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${determineType(type)}" ${pattern ? { pattern } : ''} ${type.toLowerCase() === 'number' ? { step: determineStep(type) } : ''} />`
 
-    if (autofocus) {
-      input.autofocus = true
-    }
-
-    return html`
-        <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
-            <label style="width: 100%; text-align: left; position: relative; padding: 0;">
-                ${valueContext ? html`<div class="${styles.valueContext}">${valueContext}</div>` : ''}
-                ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>` : ''}
-                ${input}
-            </label>
-        </div>
-    `
+  if (autofocus) {
+    input.autofocus = true
   }
 
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    Object.keys(diff).forEach(key => {
-      if (typeof diff[key] === 'function') {
-        this[key] = args[key]
-      }
-    })
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
+  return html`
+      <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
+          <label style="width: 100%; text-align: left; position: relative; padding: 0;">
+              ${valueContext ? html`<div class="${styles.valueContext}">${valueContext}</div>` : ''}
+              ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>` : ''}
+              ${input}
+          </label>
+      </div>
+  `
 }
-
-function textfield (args) {
-  let instance
-  if (args.uniqueKey) {
-    let found = cache.get(args.uniqueKey)
-    if (found) {
-      instance = found
-    } else {
-      instance = new Textfield()
-      cache.set(args.uniqueKey, instance)
-    }
-    return instance.render(args)
-  } else {
-    instance = new Textfield()
-    return instance.createElement(args)
-  }
-}
-
-export default args => textfield(args)

package/components/toast.mjs

@@ -1,7 +1,5 @@
-import { html, css, geb, Component } from 'halfcab'
+import { html, css, geb } from 'halfcab'
 import close from './icons/close.mjs'
-import * as deepDiff from 'deep-object-diff'
-import clone from 'fast-clone'
 
 let styles = css`
   .toast{
@@ -31,11 +29,8 @@ let styles = css`
   }
 `
 
-class Toast extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    let { on, message, colour, multiline, closeAction } = args
-    return html`
+export default ({ on, message, colour, multiline, closeAction }) => {
+  return html`
       <div class="${styles.toastContainer}" onclick=${() => geb.broadcast('errorDismissed')} style="${on ? 'bottom: 0px;' : `bottom: -${multiline ? '100' : '50'}px; opacity: 0; `}${multiline ? 'height: 100px;' : ''}">
           <div class="${styles.toast}" style="background-color: ${colour || 'red'};">
               <div style="width: 100%; margin-left: 20px">${message}</div>
@@ -43,13 +38,4 @@ class Toast extends Component {
           </div>
       </div>
     `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
 }
-
-let toast = new Toast()
-export default args => toast.render(args)

package/components/toolbar.mjs

@@ -1,6 +1,4 @@
-import { html, css, Component } from 'halfcab'
-import clone from 'fast-clone'
-import * as deepDiff from 'deep-object-diff'
+import { html, css } from 'halfcab'
 
 let styles = css`
   .toolbar {
@@ -17,24 +15,10 @@ let styles = css`
   }
 `
 
-class Toolbar extends Component {
-  createElement (args) {
-    this.args = clone(args)
-    let { content } = args
-    return html`
-      <div class="${styles.toolbar}">
+export default ({ content }) => html`
+    <div class="${styles.toolbar}">
         <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
-          ${typeof content === 'function' ? content() : content}
+            ${typeof content === 'function' ? content() : content}
         </div>
-      </div>
-    `
-  }
-
-  update (args) {
-    let diff = deepDiff.diff(this.args, args)
-    return !!Object.keys(diff).find(key => typeof diff[key] !== 'function')
-  }
-}
-
-let toolbar = new Toolbar()
-export default args => toolbar.render(args)
+    </div>
+`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",
@@ -8,7 +8,7 @@
   "scripts": {
     "test": "npm run test:lint",
     "test:lint": "standard \"**/*.mjs\"",
-    "npm-publish": "npm publish -tag beta",
+    "npm-publish": "npm publish --tag beta",
     "versionbump:fix": "npm version patch --no-git-tag-version",
     "versionbump:feature": "npm version minor --no-git-tag-version",
     "versionbump:breakingchanges": "npm version major --no-git-tag-version"
@@ -30,7 +30,7 @@
   },
   "homepage": "https://github.com/lorengreenfield/stalefish#readme",
   "devDependencies": {
-    "halfcab": "^13.0.5",
+    "halfcab": "^15.0.3",
     "standard": "^12.0.1"
   },
   "dependencies": {