Intro to Mitosis: The common reactive transformer

Mitosis.js is a compiler software that consumes a common part syntax and outputs framework-specific code. Which means you’ll be able to write software performance as soon as and generate it to React, Svelte, or Angular, amongst others. What distinguishes Mitosis from different compile-time frameworks is its “write as soon as, run anyplace” strategy to compilation. Mitosis is a formidable engineering feat, and it has purposes anyplace you want to summary front-end frameworks into pluggable elements. 

The hidden advantage of Mitosis is its revelation of the widespread points and unity in front-end JavaScript frameworks. It is a new mannequin that would yield surprising insights and new instructions for future JavaScript growth.

What’s Mitosis.js?

Mitosis is a undertaking from the parents at Builder.io, who additionally developed envelope-stretching initiatives just like the Qwik.js framework and Partytown. Builder is itself an excellent instance of the form of software that advantages from Mitosis. In brief, Builder permits you to visually design UI layouts throughout varied underlying framework implementations. It wants a standard language to course of and output these various frameworks, and that language is Mitosis.

As of this writing, Mitosis helps the next front-end JavaScript frameworks:

Mitosis additionally helps outputting to straight HTML and has Qwik.js on the roadmap. Additionally, Mitosis is the interpretation bridge that Builder makes use of between third-party design software Figma. That’s to say, the abstraction layer is helpful in taking design output and reworking it into the specified goal framework.

Mitosis is syntactically a subset of JSX, or JavaScript XML. This is smart for a few causes. JSX is the syntax in React, the most typical and influential JavaScript framework. Additionally, on the finish of the day, JSX is a reasonably good distillation of the weather of a reactive UI descriptor. Particularly, Mitosis makes use of a JSX variant impressed by the one utilized in Strong.js.

Itemizing 1 is a straightforward instance that reveals off a number of conventions of Mitosis’s JSX variant.

Itemizing 1. Primary record output in Mitosis (TypeScript)

import { useStore } from '@builder.io/mitosis';

kind Props = {
  author: string;
};

export default perform SongList(props: Props) {
  const state = useStore({
    songs: [
      { title: "Strawberry Fields", writer: "John Lennon" },
      { title: "Penny Lane", writer: "Paul McCartney" },
      { title: "Dark Horse", writer: "George Harrison" },
      { title: "It don't come Easy", writer: "Ringo Starr" }
    ],
  });
  return (
    <div>
      <For every={state.songs}>{(track, index) => <div>{track.title}</div>}</For>
    </div>
  );
}

Itemizing 1 takes a listing of objects (songs) and outputs a property from every one (track.title). There are few issues to notice on this pattern. First, the file exports a default perform. Subsequently, it’s defining a purposeful part. Mitosis will remodel this part to the suitable construction for its goal framework. 

Subsequent, observe that the part makes use of a hook, useStore. This hook works analogously to the one present in React. The code then makes use of the state to iterate over the songs with a <For> part. Iterating over collections is a kind of areas of variety in frameworks and the <For> part affords a easy, unified strategy to specific it.

Additionally, observe the usual dealing with of part properties, by way of the props argument to the perform (with its attendant TypeScript kind definition of Props).

Run the compiler

To place this part by the Mitosis compiler (or, strictly talking, transpiler), we will arrange a easy Node Bundle Supervisor (NPM) undertaking. To begin, provoke a undertaking (npm init), then set up the Mitosis libraries by coming into

npm set up @builder.io/mitosis-cli @builder.io/mitosis

The Mitosis compiler will robotically discover the recordsdata we wish to compile primarily based on a mitosis.config.js file. We’ll use the easy one proven in Itemizing 2.

Itemizing 2. Mitosis.config.js

module.exports = {
  recordsdata: 'src/**',
  targets: ['vue3', 'solid', 'svelte', 'react', 'angular'],
};

Itemizing 2 tells the place the sources are to be discovered (src/**) and what output frameworks to make use of.

Our part is in TypeScript, so we’ll want a easy tsconfig.json file, as effectively:

Itemizing 3. tsconfig.js

{
  "compilerOptions": {
    "jsx": "protect",
    "jsxImportSource": "@builder.io/mitosis"
  }
}

Itemizing 3 tells the TypeScript command-line interface (tsc-cli) easy methods to deal with the JSX it encounters. On this case, it leaves the syntax as-is (protect) and defines the module to make use of for import (@builder.io/mitosis). See the JSX overview and code pattern within the TypeScript documentation for particulars.

Mitosis with React

Now we’re able to get some output. Run npm exec mitosis construct. This may drop recordsdata into the output/ listing, one department for every goal framework. Let’s take a peek on the /output/react/src/elements/Songs.jsx model, which can look one thing like Itemizing 4.

Itemizing 4. React model of Songs.jsx

import * as React from "react";
import { useState } from "react";
perform SongList(props) {
  const [songs, setSongs] = useState(() => [
    {
      title: "Strawberry Fields",  writer: "John Lennon"
    },
    {
      title: "Penny Lane",  writer: "Paul McCartney"
    },
    {
      title: "Dark Horse",  writer: "George Harrison"
    },
    {
      title: "It don't come Easy",  writer: "Ringo Starr"
    }
  ]);
  return /* @__PURE__ */ React.createElement("div", null, songs == null ? void 0 : songs.map((track, index) => /* @__PURE__ */ React.createElement("div", null, track.title)));
}
export {
  SongList as default
};

So, we will see that Mitosis has switched to utilizing the React implementation of useState and has opted for utilizing React.createElement to outline the div and track.map() to iterate over the gathering. It exports the part as a default module. This appears to be like like legitimate React thus far, however let’s examine it. 

We will go to a different listing and spin up a create-react-app actual fast (see the Create React App web page for particulars), then go to the brand new listing that has simply been created. Within the /src listing, we’ll copy over the output/react/src/elements/Songs.jsx file from our Mitosis undertaking. We open App.jsx and import the brand new part by including import “./Songs.jsx” as Songs, then go into the template markup and use the part someplace with <Songs />. 

Now, we will run the app with npm begin. Examine the output at localhost:3000 and also you’ll see the record of track names on the web page.

Good. Now we all know that Mitosis is working with React. In a real-world state of affairs, we may readily construct a pipeline so as to add Mitosis to our construct course of. 

Mitosis with Svelte

Let’s use a fast shortcut to see how Mitosis works with Svelte. Copy the contents of /output/svelte/src/elements/Songs.svelte (noticing that Mitosis has given the right extension to the file). Go to the Svelte playground and paste the supply into the left-hand code panel. After a second, you will note the track record on the suitable aspect of the display. 

Mitosis is producing right Svelte. In the event you’re curious, Itemizing 5 reveals the idiomatic Svelte iteration for the <For> part.

Itemizing 5. Track iterator in Svelte

{#every songs as track, index}
  <div>{track.title}</div>
{/every}
And Vue, Angular, SolidJS

You’ll be able to take related steps to confirm the correctness of every of the opposite output targets. 

Configuration and plugins

Mitosis is meant to be fairly versatile. Specifically, the Mitosis playground demonstrates the flexibility to alter a configuration to pick not solely completely different frameworks however completely different traits inside them. As an illustration, you’ll be able to choose a state supplier in React, selecting between useState, Mobx, and Strong. You can also choose completely different styling options, like Emotion CSS, Styled Parts, and Styled JSX.

Mitosis additionally helps the flexibility to outline plugins that run arbitrary code at strategic moments, like earlier than and after the underlying JSON information construction is generated.

Consuming framework code

You may surprise whether it is potential to flip Mitosis’s performance from producing to consuming framework code. For example, may we take a UI outlined in a framework implementation and parse it into the Mitosis JSON mannequin? That may not solely allow us to two-directionally translate between Mitosis and a framework however truly translate between completely different frameworks by way of the Mitosis mannequin. 

I requested Builder.io’s founder, Steve Sewell whether or not Mitosis may perceive framework code. Here is what he mentioned:

[Framework parsing] is unquestionably the largest request we get. Proper now most frameworks are a bit too freeform (not sufficient constraints) to do that reliably. That mentioned Svelte is the most effective candidate for that, which is actively being labored on, we name it sveltosis.

Conclusion

Mitosis is presently nonetheless in beta. That being mentioned, it has greater than 6,000 stars on GitHub and is in energetic use at Builder.io. Maybe probably the most attention-grabbing factor about Mitosis is that it describes a reactive person interface as JSON. It represents declaratively in information the complicated performance on the coronary heart of front-end frameworks, which offers a basis for growing a common mannequin of front-end growth frameworks. Mitosis’s cross-framework strategy to JavaScript compilation factors to the opportunity of meta frameworks and platforms that builders may use to compose purposes at the next stage of abstraction.