discussion about pug syntax and tagged-templating libraries

[chase-moskal]

hello!

seems like all the cool kids are starting to use the hip new jsx alternatives like lit-html, lighterhtml, and htm to author declarative web components using html-like syntax

of course, i love to use pug syntax instead of html where i can get away with it

i thought it would be super cool if we could bring pug into the game

import {pug} from "pug"
import {LitElement} from "lit-element"

class MyComponent extends LitElement {
  static get properties() {
    return {
      title: { type: String },
      items: { type: Array },
    }
  }

  constructor() {
    this.title = "My Component Title"
    this.items = [{name: "alpha"}, {name: "beta"}]
  }

  render() {
    return pug`
      div
        h1 ${this.title}
        div.portrait
          img(src="portrait.jpg" alt="")
        ol.items
          ${this.items.map(item => pug`li ${item.name}`)}
    `
  }
}

i imagine it would be too complicated to integrate pug with the idiosyncratic syntax and features of these libraries to create lit-pug, lighterpug, and htm-pug

i think tagged-template rendering could become a core pug feature

pug would then become an alternative to these libraries in its own right, taking inspiration and cherrypicking features from these libraries which have pioneered the space

is this a cool idea? has it already been discussed somewhere? are there reasons i haven't thought about why this might not be a cool idea?

thanks, much love!

[ForbesLindesay]

You can already use pug as a jsx alternative: https://github.com/pugjs/babel-plugin-transform-react-pug this is compatible with anything that targets jsx

[chase-moskal]

@ForbesLindesay

no no, this isn't about react or any jsx-compatible options involving babel builds or what-not.. that old stuff is already in my rear-view mirror, brother! ;)

this is specifically about the fancy new tagged template literal systems, like lit-html

[ForbesLindesay]

It would be much simpler to have all the frameworks just support JSX and then they can all interoperate. I don't really see much point in us trying to support outputting tagged template literals. If you're working on pure DOM based stuff you might as well just use pug directly, if you want fancy components, JSX is a much better, more stable, battle tested, performant approach.

[chase-moskal]

@ForbesLindesay

hold on a second here friend, let's not shut down this discussion quite yet, please hear me out :)

JSX is a much better, more stable, battle tested, performant approach.

that could be true right now — but it takes inspired developers like us to make the changes we want to see in the world, right? :)

these new templating libraries are gaining traction and will likely have an important place in the future ecosystem — maybe i'm wrong, and that's okay

i love working with and playing with fresh tech, so i've personally moved away from JSX, and i'm interested and excited by the idea of using pug-like syntax with my new applications

i know that you are not excited by this topic like i am, however, i want to be clear that i am not asking you or the pug team to do any heavy lifting (especially on a topic that doesn't inspire you)

i'm simply looking for some advice and imagination about how this idea could be implemented

i want to solicit advice from those knowledgeable about how pug works, so that people like me might stand a chance to hazard an implementation and try this idea — hopefully with as little cost to the pug team's time as possible

in the spirit of exploring new ideas, even if they don't pan-out, can we continue this discussion?

i might be mixing oil and water here, but here it goes: i'd love to hear any feedback from @webreflection, @justinfagnani, and @developit, about ideas to bring pug-like syntax into the game, or to discuss whether the idea is good/bad/feasible/unperformant/etc and whether pug-like syntax could be reasonably integrated with something like lighterhtml/lit-html/htm

hah, i feel like i'm slipping right into my old scrummaster role just desperately trying to get everybody to have a discussion, i'm herding cats over here! ;)

cheers folks

edit: i've renamed the issue title for clarity

[chase-moskal]

oh man am i ever behind the times! i'm just learning about choo, and it's awesome! perhaps @yoshuawuyts might have some input about this pug fantasy of mine

[WebReflection]

JSX is a much better, more stable, battle tested, performant approach

I had a genuine laugh here ... anyway, to answer to @chase-moskal, at least my libraries are trying to promote as much as possible standards, even behind a template literal facade, so that what you write, is pretty much exactly what you'll get on the DOM (I actually consider that stability).

Accordingly, while I'm sure one could transform pug syntax into a template literal signature that my libraries could digest, I don't see value in creating a pug indirection, when HTML, and not JSX, is meant.

In HyperHTMLElement, as example, the render you wrote would be just like:

  render() {
    return this.html`
      <div>
        <h1> ${this.title} </h1>
        <div class="portrait">
          <img src="portrait.jpg">
        </div>
        <ol class="items">
          ${this.items.map(item => wire(item)`<li>${item.name}</li>`)}
        </ol>
      </div>`;
  }

and you'll get exactly that on the DOM.

Nothing really magic/special to learn, and you also have highlight in modern IDEs. 👋

[ZaDarkSide]

I found this https://github.com/marpple/ttl-pug

[nandoflorestan]

...aaand just over a year later we have the new Lit library (successor of lit-element + lit-html) and I am thinking how great it would be if we could just use glorious pug-like syntax for its templates.

The ttl-pug project linked above sounds interesting but the documentation is so lacking that I hardly know what it does.

@chase-moskal Are you currently using something with pug-like syntax?