collections?

[forresto]

Am I missing something? If I change the choo example to have 2 buttons

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

// create new nanocomponent
var customButton = component({
  render: function (data) {
    return html`
      <button>${data}</button>
    `
  }
})

var app = choo()
choo.router(['/', mainView])
document.body.appendChild(choo.start())

mainView (state, prev, send) {
  return html`
    <section>
      ${customButton(state.one)}
      ${customButton(state.two)}
    </section>
  `
}

it doesn't really cache those elements when state.one and state.two change, right?

[yoshuawuyts]

It should tho; the returned element on subsequent runs should be a <div> with a data- property on it. After the first first run the onupdate function is called because we might not always have control over the render loop (e.g. plenty of libs rely on selectors & mutations). What I tend to do is have a render() function that I call from both render and onupdate. The first arg to onupdate is the current tree so that should hopefully be reasonable! :D

Lmk if this works for you; hope you get why I designed things they are now haha. Cheers!

On Fri, Feb 10, 2017 at 3:32 AM Forrest Oliphant notifications@github.com wrote:

Am I missing something? If I change the choo example https://github.com/yoshuawuyts/nanocomponent-adapters/#choo to have 2 buttons

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

// create new nanocomponent var customButton = component({ render: function (data) { return html`

${data}

`

} })

var app = choo() choo.router(['/', mainView]) document.body.appendChild(choo.start())

mainView (state, prev, send) { return html`

${customButton(state.one)} ${customButton(state.two)}

` }

it doesn't really cache those elements when state.one and state.two change, right?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yoshuawuyts/nanocomponent/issues/4, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWler293LK0rpQZG5EsTaRPeJNnk12nks5ra8xKgaJpZM4L87Wh .

[forresto]

Here's my 😕 in requirebin executable form:

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

// Called once in template
var customButtonA = component({
  render: function (data) {
    console.log(data)
    return html`
      <button>${data}</button>
    `
  }
})

// Called twice in template
var customButtonB = component({
  render: function (data) {
    console.log(data)
    return html`
      <button>${data}</button>
    `
  }
})

var app = choo()

app.model({
  state: {
    now: 0
  },
  reducers: {
    ping: function (state, data) {
      return {now: data}
    }
  },
  subscriptions: {
    callDog: function (send, done) {
      setInterval(function () {
        var data = Date.now()
        send('ping', data, function (err) { done(err) })
      }, 1000)
    }
  }
})

app.router({default: '/'}, ['/', mainView])
document.body.appendChild(app.start())

function mainView (state, prev, send) {
  return html`
    <section>
      ${customButtonA("does cache A")}
      ${customButtonB("should cache B")}
      ${customButtonB(state.now)}
    </section>
  `
}

In the console I get:

does cache A  
should cache B  
0  
should cache B  
0  
should cache B  
1486783745460  
should cache B  
1486783746454  
should cache B 
1486783747479

[forresto]

@yoshuawuyts about that "should cache B" in the above code, should it cache B? I don't see how it would without a key of some kind.

(At least, React complains any time you have an array of components without key.)

[yoshuawuyts]

Oh in morphdom they use the id property; given that IDs should be unique per document it quite makes sense tbh

On Tue, Mar 7, 2017 at 4:34 PM Forrest Oliphant notifications@github.com wrote:

@yoshuawuyts https://github.com/yoshuawuyts about that "should cache B" in the above code, should it cache B? I don't see how it would without a key of some kind.

(At least, React complains any time you have an array of components without key.)

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/yoshuawuyts/nanocomponent/issues/4#issuecomment-284755935, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlegMJQ45nphcFSPYD5kj3Uva5vsI9ks5rjXjpgaJpZM4L87Wh .

[yoshuawuyts]

nanocomponent v3.0.0 is out - don't think this issue is relevant anymore. Also released https://github.com/yoshuawuyts/microcomponent for a more high level take on the API of nanocomponent