Automate Syncing of Component Markup Across Integrations

[alionazherdetska]

Problem Statement

Stencil components often receive new attributes, slots, and other updates. These changes are not consistently reflected in the component wrappers used in our Next.js and Angular integration packages.
This results in outdated markup, missing props, and inconsistencies across frameworks.

Goal

Identify and implement a method to automatically update component markup in the Next.js and Angular integrations whenever Stencil components change.

Areas to Explore

Investigate potential sources of truth that could drive automated synchronization:

• Storybook default stories
  Use stories as canonical component usage definitions.
• Stencil-generated files
  Review available metadata (e.g., docs JSON, generated typings, output targets) that could be used for automation.

Proposed Solution (Initial Concept)

Explore adopting a unified approach using Mitosis:

• Maintain a private Mitosis library where component examples are written once in JSX.
• Use Mitosis to generate component examples in multiple formats (React/Next.js, Angular, etc.).
• Integration packages can then import or consume these generated examples to stay automatically in sync.

[alizedebray]

A solution could be to create a single library with Mitosis. In this private library, component examples would be written once in JSX then outputted into different languages. Other projects could then import the necessary components from the mitosis library and test them with there own framework.