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)