@ungoldman/component

1.0.0 • Public • Published

@ungoldman/component

⚠️ fork in progress ⚠️

experimental, no support intended. may disappear at any moment.

Install

$ npm install @ungoldman/component

Usage

const choo = require('choo')
const html = require('nanohtml')
const Component = require('.')

function randomColor () {
  return '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
}

class Button extends Component {
  constructor () {
    super()
    this.color = null
  }

  createElement (color, emit) {
    this.color = color

    function onclick () {
      emit('color', randomColor())
    }

    return html`
      <button style="background-color: ${color}" onclick=${onclick}>
        Click Me
      </button>
    `
  }

  // Implement conditional rendering
  update (newColor) {
    return newColor !== this.color
  }
}

const button = new Button()

function mainView (state, emit) {
  return html`<body>${button.render(state.color, emit)}</body>`
}

const app = choo()

app.route('/', mainView)
app.mount('body')

app.use(function (state, emitter) {
  state.color = 'white'

  emitter.on('color', color => {
    state.color = color
    emitter.emit('render')
  })
})
color = 'green'
})

API

component = new Component([name])

Create a new Component instance. Additional methods can be set on the prototype.

component.render([arguments…])

Render the component. Returns a proxy node if already mounted on the DOM. Proxy nodes make it so DOM diffing algorithms leave the element alone when diffing. Call this when arguments have changed.

component.rerender()

Re-run .render using the last arguments that were passed to the render call. Useful for triggering component renders if internal state has changed. Arguments are automatically cached under this._arguments (🖐 hands off, buster! 🖐). The update method is bypassed on re-render.

component.element

A getter property that returns the component's DOM node if its mounted in the page and null when its not.

DOMNode = Component.prototype.createElement([arguments…])

Must be implemented. Component specific render function. Optionally cache argument values here. Run anything here that needs to run alongside node rendering. Must return a DOMNode. Use beforerender to run code after createElement when the component is unmounted. Arguments passed to render are passed to createElement. Elements returned from createElement must always return the same root node type.

Boolean = Component.prototype.update([arguments…])

Return a boolean to determine if prototype.createElement() should be called. The update method is analogous to React's shouldComponentUpdate. Called only when the component is mounted in the DOM tree. Arguments passed to render are passed to update. Defaults to always returning true.

Component.prototype.beforerender(el)

A function called right after createElement returns with el, but before the fully rendered element is returned to the render caller. Run any first render hooks here. The load and unload hooks are added at this stage. Do not attempt to rerender in beforerender as the component may not be in the DOM yet.

Component.prototype.load(el)

Called when the component is mounted on the DOM. Uses on-load under the hood.

Component.prototype.unload(el)

Called when the component is removed from the DOM. Uses on-load under the hood.

Component.prototype.afterupdate(el)

Called after a mounted component updates (e.g. update returns true). You can use this hook to call element.scrollIntoView or other dom methods on the mounted component.

Component.prototype.afterreorder(el)

Called after a component is re-ordered. This method is rarely needed, but is handy when you have a component that is sensitive to temorary removals from the DOM, such as externally controlled iframes or embeds (e.g. embedded tweets).

License

MIT

Package Sidebar

Install

npm i @ungoldman/component

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

214 kB

Total Files

11

Last publish

Collaborators

  • ungoldman