Mitosis

Mitosis is a transpiler that lets you write JS components in one format (e.g., in a subset of JSX or in Svelte) and transpile that to any major JS framework (React, Vue, Angular, etc.) and also to non-JS templating languages (e.g., Liquid). There's currently no plugin that outputs to Twig, but someone could write that plugin if they wanted to.

What enables Mitosis to work is that it must be able to compile a source format into an intermediary JSON representation that can then be compiled to all of the destination formats. This places restrictions on what can be used for the source format. Therefore, if using JSX as the source format, not all JSX syntax can be used, and if using Svelte as the source format, not all Svelte syntax can be used. These more limited formats are referred to as "Mitosis JSX" and "Sveltosis". Despite the reduced syntax that's supported in each of these formats, this could still be quite helpful for maintaining a library of simple components that can be used in any front-end framework.

This d.o. project is for experimenting with manually converting Drupal Twig templates to one or both of the Mitosis source formats. For example, see links.lite.tsx and links.svelte, which are work-in-progress conversions of Olivero's links.html.twig. The goal is for eventually enough templates to be converted that JS front-ends using any JS framework can get their desired template from here and use Mitosis to convert it to the format needed by that JS framework.