pug in pug template strings, is a recursive style without ${} possible?

[mostrecent]

Pug and this repo are just great. It's nice to see that this plugin is actively maintained and just got a version bump.

I am wondering if there is any better way to embed pug into pug template strings, e.g. if I use render props. Here is an example:

const App = () => pug`
  Router
    Route(render=${({location}) => pug`
      .flex.w-100
        .flex.w-20.flex-column.pv3.vh-100.sans-serif.f6.bg-light-gray
          NavLink(to='/').ma2 Home
          NavLink(to='/about').ma2 About
          NavLink(to='/fun').ma2 Fun
        div
          TransitionGroup
            CSSTransition(key=location.key classNames='fade' timeout=300)
              Switch(location=location)
                Route(exact path='/' component=Home)
                Route(path='/about' component=About)
                Route(path='/fun' component=Fun)
    `})
`

This was the most elegant I could achieve. I am wondering if this second embedded pug in the render function of Route can be expressed without a pug? I understood that the attributes are plain JS, so I guess not, right?

Motivation for this question: Great about pug is that you don't need to care about closing tags and their indentation but with inline functions you need again something at the end of the inline function.

[ezhlobo]

@mostrecent for now that is the only way to insert pug inside javascript (attributes are just javascript). I'm not even sure if we can do anything cool for this, I'm open to suggestions.

[ezhlobo]

@mostrecent I suggest to continue this discussion in the #88. Since your question is resolved (as far as we can resolve it), I'd like to extend it and reach a decision for the more generic problem.

Feel free to re-open the issue if you disagree or if you have other point of view ;).

PS. Thanks for all your issues and warm words.