Docs request — Can render a component assigned to a variable?

[nichoth]

question / docs request

The scenario: I'm making a single page app, and I get a child component client side, from a 'router' module.

class MyApp extends Tonic {
  render () {
    const child = router.match('/example')
    return this.html`<div>
      // how to render `child` here?
      <${child></${child}>
    </div>`
  }
}

How to make this work? Normally in this scenario you would just return html with the child component's class/tag name?

render () {
  return this.html`<my-child>example</my-child>`
}

[nichoth]

You would want to either return a string (the tag name) from the route function, or this is how we convert between camel-case class names and tag names in tonic:

function getTagName (camelName) {
    return camelName.match(/[A-Z][a-z0-9]*/g).join('-').toLowerCase()
}

You can use that like this, given a tonic class myComponent:

return this.html`
  <${getTagName(myComponent.name)}>hello</${getTagName(myComponent.name)}>
`