Using Twig and Web Components with Emulsify

[mortenson]

👋 Hi there!

I'm the maintainer of Twig Components, a project that uses Twig with Web Components. I've been looking for a good example project to show what's possible with Twig Components, and it seems like Emulsify could be a good fit. I would recommend reading this blog post as a longer intro: Introducing Twig Components

A Web Component implementation could offer some new functionality for Emulsify:

1. Client-side rendering - Web Components run in the browser, which means that you can write Twig templates that can re-render when interacted with, or when their attributes change. Today if someone wanted to add a new Emulsify card to a page after it's loaded, or change a card's image, that would require JS that targets specific selectors and clones existing elements. With Web Components, you would just use the DOM to append a new element or change an element's attribute.
2. Support for non-PHP environments - Emulsify requires that Twig is compiled in a PHP environment, but Twig Components can be used with any frontend framework or static HTML. This would open the door for an Emulsify React, Vue, or Angular demo, for example.
3. Style encapsulation - Styles in Web Components are completely encapsulated, which means that you can write CSS targeting selectors like ol instead of .my-bem__class ol. It also guarantees that styles cannot leak into components - Web Components look identical everywhere they're used. I noticed that you're already writing selectors this way, then transforming them to BEM equivalents in the build. Web Components would remove the need for BEM, at least at a component level.
4. Simplified usage - If you want to include a Web Component on a page, you just write the HTML tag that it uses and fill in the attributes you need. This requires no knowledge of Twig and can be done in the user interface with WYSIWYG.

It's not like Web Components don't have downsides, but I wanted to list what I think are the biggest benefits of using them to summarize why I'm interested in pursuing this.

I was thinking of creating a new project for this and moving over patterns one-by-one from Emulsify, but wanted to see what the maintainers think first. To be clear, the goal of this would not be to change how Emulsify works, or merge anything into the main project, it would just be showing what you've already done in a different light.

Please let me know what you think, or if you have any questions! I'll post the new repository here if people are interested.

[shaal]

This is very interesting. https://www.drupal.org/docs/8/modules/twig-components/building-your-first-twig-component lists several steps that are required before a twig component can be created.

Do you have a twig component example and/or setup that is ready to be used with Emulsify?

[mortenson]

@shaal There's a Yeoman generator for Webpack builds that comes with a lot out of the box, which can be used by running:

npm install -g yo generator-twig-components-webpack
yo twig-components-webpack

More documentation for it can be found here.

I also maintain an example project using the generator at mortenson/twig-components-example, if you'd prefer to see something more complex.

[evanmwillhite]

@mortenson This sounds really interesting! I for one would love to see you build this and all the better if Emulsify helps you along the way. Thanks for contacting us, and keep us updated as you progress.

[mortenson]

Hey all - due to a lack of production use cases for Twig Components and my time being spent on another side project (Tome), I don't think I'll be able to work on this anytime soon. 😢

If I happen to work on this again, I'll ping y'all in a pull request. For Pattern Lab + Web Component work in the mean time, I would suggest reaching out to @sghoweri and @EvanLovely

[sghoweri]

Aw man, sorry to hear that @mortenson. There’s still a good chance some of the great ideas we chatted about at Drupalcon will end up seeing the light of day!

Earlier today I was literally wiring the Twig rendering engine in Bolt that powers our Twig-based static site generator + PHP rendering service up with the web component SSR approach you were taking here.

I’ll let you know if we have some big news to share on this!!

[evanmwillhite]

@sghoweri I haven't had time to dive in deep, but the little I've seen of Bolt lately looks fantastic. Thanks for all you've done and are doing for the community!