devpunks / snuggsi

snuggsi ツ - Easy Custom Elements in ~1kB
https://snuggsi.com
MIT License
395 stars 17 forks source link

Readme Template Example Fails to Run #227

Open jlukic opened 1 year ago

jlukic commented 1 year ago

Using the documentations readme example

<template name=developer>
  <!-- `{nickname}` will bind to `context` property `nickname` -->
  <h1>{nickname}</h1>
</template>
const
  template = Template `developer`
, context  = { nickname: 'That Beast' }

template.bind (context)

Is failing in current build in Chrome 110

snugsi.js:1 Uncaught TypeError: Failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'.

I believe this is because the parameters returned to the Template Literal is actually an array so the typeof == 'string' condition never occurs. https://github.com/devpunks/snuggsi/blob/88242ccf5a6871cd6b394df72d4f80778f89cb91/dist/snuggsi.js#L286

If you inspect with a breakpoint you can see the parameter actually looks like this

['developer', raw: Array(1)]

This is because it is also being passed the raw strings https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings

As pointed out in #222 this can also be solved by changing the syntax to

const
  template = Template(`developer`)

However this would require updating the readme if you want to require the parens.

Alternatively the logic could be updated to ducktype like

if (t.raw) {
  t = document.querySelector("template[name=" + t[0] + "]")
}