devpunks/snuggsi

Multiple `{token}`s within same TEXT_NODE only insert last value

Closed this issue · 0 comments

PR Diff: - https://github.com/devpunks/snuggsi/pull/60/files

Given the following Custom Element

<foo-bar>{baz} {bat}</foo-bar>

<script>

Element `foo-bar`

(class extends HTMLElement {

  get baz () { return true }
  get bat () { return true }
})

</script>

Would only parse to:

<foo-bar>{baz} true</foo-bar>

This is because since both tokens were within the same TEXT_NODE the second token would set .textContent to default (pre-token replaced) .text. Thus overwriting the previous {token} insertion within the same TEXT_NODE.

Test Case jsFiddle

<hello-world>
  Hello {planet}
</hello-world>

<hello-world>
  {greeting} World
</hello-world>

<hello-world>
  {greeting} {planet}
</hello-world>

<script defer>

// Element Definition -----------------------------

Element `hello-world`

// Class Description ------------------------------

(class extends HTMLElement {

  initialize () { this.append `🌎 ` }

  get greeting () { return 'Bonjour' }
  get planet () { return 'from Mars 👽' }
})

</script>

Before

capture d ecran 2017-06-16 a 20 19 34

After

capture d ecran 2017-06-16 a 20 28 51