Good morning everyone and happy MonDEV!☕
I hope you have had a great week and a nice weekend!
Today there is a lot to talk about, so let's dive right into this week's tools!
Have you ever had to use a component written in one framework in a new project that uses a different framework and had to rewrite it from scratch? Or wanted to create a series of components that you can use independently of the framework and keep your library constantly updated?
In short, have you ever wanted to write components once and make them work on any framework?
This is exactly what the tool of this week does: Mitosis
Mitosis is a tool that allows you to write components only once using a syntax very similar to React. How does it work?
Once the project is initialized, by accessing the library folder we will find two subfolders: the src folder containing all our components, and the packages folder, where we will find a folder for each output framework.
So, from within the library folder, simply run the npm run start command to start compiling the components we create within the individual folders.
If you want the result also for Svelte and Qwik then you will also need to run the npm run build:watch command in the respective folders.
After doing this, you can work within library/src and your components will be gradually built in the respective folders each time you save.
The interesting thing is that the code for this tool can also be generated by Visual Copilot, a Figma plugin created by Builder.io from the same authors that allows, by selecting a layer, to generate the code for that single component for the preferred framework, including Mitosis itself.
With minimal effort, you can have a base component to work with any framework you want.
Really convenient!
A couple of notes
Currently the local version supports Svelte, Qwik, and React; however, in the playground on the website, many other working target frameworks are already available.
This is an open-source tool and the community is working hard to also bring the builders for other frameworks locally; as always, my invitation is to try to contribute as you can.
Speaking of contributions: on Windows, you might encounter some problems when running the npm run start command from the library folder. This is due to the single quotes in the package.json precisely in the start command! I have opened a PR to fix this, but if you want to use it locally in the meantime, you can easily replace the single quotes with double quotes and escape them, and it will work perfectly!
Let's meet
Wouldn't it be nice to see each other live, discuss development in an informal context, sharing our knowledge and passions and tinkering a bit on the computer?
Well, together with Giuppi, Gianluca Lomarco, and Dev Leonardo, we thought of organizing a small meetup to chat about the dev world, see each other live and have fun!
When? Saturday, June 8!
Where? Cesena
Here is the link to book your spot,
Will you be there? 😉
I hope so, we can't wait to meet you all!😁
Meanwhile, I just have to wish you a good week
Happy Coding 0_1
Top comments (0)