Spread operators again

[mostrecent]

I checked all the prior issues but I found a strange case where a spread doesn't work within pug (I am aware that attr values are pure JS).

Following doesn't work:

  return pug`
    ${images.map((e, i) => {
    return pug`
      div.h-100.bg-green(
        key=e.backgroundImage
        css=css(mq({
          ...e,
          display: i == context.slideId ? 'block' : 'none'
        }))
      )
      `
  })}
  `

Following does work:

return pug`
    ${images.map((e, i) => {
    const xE = {
      ...e,
      display: i == context.slideId ? 'block' : 'none'
    }
    return pug`
      div.h-100.bg-green(
        key=e.backgroundImage
        css=css(mq(xE))
      )
      `
  })}
  `

A bit context: css is emotion's css prop, css() is emotion's css helper, mq a media query helper from facepaint.

[ezhlobo]

@mostrecent hey, thank you for this issue. For me that looks like a bug, but in fact, it just shows that pug doesn't understand new JavaScript syntax, while in the second case we use spreading outside of pug template.

There is a workaround, you can still use Object.assign inside the template.

And just in case, take a look how you can also write your code with pure pug.

But in general I agree, that supporting of new js syntax inside pug will be a good idea. There is some workaround, and some discussion regarding that in pug repository: https://github.com/pugjs/pug/issues/2921

[mostrecent]

Hey @ezhlobo, thanks for your reply and also providing a Pug-in-js REPL, this is awesome, I just had a good use for it!

[pruge]

You can do this

  return pug`
    ${images.map((e, i) => {
    return pug`
      div.h-100.bg-green(
        key=e.backgroundImage
        css=${css(mq({
          ...e,
          display: i == context.slideId ? 'block' : 'none'
        }))}
      )
      `
  })}
  `