How to pass arguments to component constructor

Question

How to pass arguments to component constructor

YerkoPalma opened this issue 6 years ago · comments

This is more a question than an issue. I looked quickly at the source and though that I could pass arguments to components constructor trhough the cache method of the state. I tried this:

// component
var Component = require('choo/component')
var html = require('choo/html')

class Button extends Component {
  constructor (text) {
    super()
    console.log(arguments)
    this.text = text || ''
  }

  createElement () {
    return html`
      <button>${this.text}</button>
    `
  }

  update () {
    return false
  }
}

module.exports = Button

// view
function view (state, emit) {
  if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)

  return html`
    <body class="code lh-copy">
      <main class="pa3 cf center w3">
          <h2>I</h2>
          ${state.cache(Button, 'button', 'Hello world').render()}
      </main>
    </body>
  `
}

But that outputted <button>hello</button>. And the console log with arguments in the constructor gives me

Arguments(4)
0: "button"
1: {events: {…}, components: {…}, title: "welcome - main", cache: ƒ, href: "", …}
2: ƒ ()
3: "Hello world"
callee: (...)
length: 4
Symbol(Symbol.iterator): ƒ values()
get callee: ƒ ()
set callee: ƒ ()
__proto__: Object

Is that the intended behaviour? If that's the case, then is safe to assume that all components rendered through cache get the same signature

constructor (id, state, emit, ...args) {}

Carl Törnqvist · Answer 1 · Thu Jun 21 2018 13:59:04 GMT+0800 (China Standard Time)

That's right, state and emit are prefixed to the constructor arguments and the cache arguments are:

state.cache(Component, 'unique-id', ...args)

I'd be happy to contribute to the choo/component docs to help get this out there.

Yerko Palma · Answer 2 · Mon Jun 25 2018 10:16:32 GMT+0800 (China Standard Time)

Closing this questions because it is answered. Thanks.