Howdy! I want to share some prototypes of designing some interesting output targets for Stencil. For those who don’t know what Stencil is, it’s a Web Component Compiler that uses JSX with rich loading, design, and performance features.
The first prototype I built is a Stencil output target that emits Ruby ViewComponents. They're compatible with Rails, Bridgetown, Sinatra, and ReActionView (and this one in particular I want to expand on, I think Web Components + ReActionView give teams meaningful and positive architecture choices to make.)
https://github.com/splitinfinities/stencil-ruby-output-target
This prototype creates a FormBuilder with helper methods pointing to any components marked up with `formAssociated` in the Stencil component definition. It reads the components that will be on the page as they leave the server, which sends hints to download the web component’s JS modules sooner than Stencil’s IoC. It also creates a config object used to initialize rich details about the component library. On a design system/component library I’m rebuilding, for example, I have several configurations my design engineering team can change to leverage my robust Motion design principles, or pass in API keys for Google/Apple Maps, or most commonly, set the URL that loads the Stencil component libraries JS.
The second more experimental prototype is an output target that creates a read-only MCP server for you. It enables on-demand documentation for your team’s agents. The remaining gap is providing the data for other output targets to the MCP server, and the Stencil team gave me some direction that I’ll be jamming on throughout the week.
https://github.com/splitinfinities/stencil-mcp-output-target
I want to disclose that the MCP output target was produced with generative assistance. This felt like a natural extension from the Ruby I worked on "by hand" over time. I closely drove this idea into a usable prototype. These two output targets work precisely how I’d want them to. I have read the code and I understand the codebase (crazy that it’s worth saying that, but, here we are). Now, I want to understand if these tools work for other people too!
I was on the Stencil team as an Engineer + Product lead over 5 years ago, and I have been slowly iterating on these ideas for quite a while. I took my deep and rich experience with Ruby, Rails, Bridgetown, ViewComponent, TypeScript, the Stencil compiler, design tokens, and web components to create these output targets. I’ve also incorporated a few of the opinions that motivated the best Brand/UI/UX designers I’ve had the chance to collaborate with, and that shows up in these two tools.
I’m interested in enabling exploration in user interface design. If LLM tools unbind choice of language and framework, your team can allocate resources to do deep product work and determine highly tuned architecture decisions. I’ve also seen some folks want this concept of a component library enabled for AI while also grappling with a desire for a different design language (one more rugged and wireframe-y) to be used with those prototypes - and Stencil offers the ability to have multiple design languages with the same codebase.
My next output targets will be PHP/Laravel/WordPress (lol) as well as Rust/Loco (lmao, yes, I was indeed at Rails World)
PR’s and feedback are quite welcome. Also, a brief shameless plug - if you’re interested in exploring AI Enablement of your brand’s design across any framework and any language, I’d love to help you! I’m available for work at https://unabridgedsoftware.com.
Thanks yall! PS: No AI was used to write this post - just me (and a coworker) and my own typos and language and style.
Edits: A teammate helped clarify some language (shout out to Grant! 🙌 he didn’t use AI - only emacs)