Programmatic use of the build tool

[Marvin-Brouwer]

Hi,

I'd love to give this library a go. However, for the project I have this in mind I committed to a vite setup.
I'm okay with writing my own vite/rollup plugin to make this work but I'm having a hard time figuring out how to do that without just calling the CLI from a node fork.
Is there any possibility to just pass node streams to the build tool?
And if so, where should I look?

[samijaber]

That's not possible at the moment. I'm open to looking into how we can do that. Currently mitosis build pipes the following calls:

• finds all files matches by the glob pattern
• for each file, we:
  • read the file
  • call parser (parseJsx or parseSvelte) to convert the file to a JSON
  • call generators in parallel (like componentToReact) which convert the JSON to a string
  • save the string as a file whose name and path is based on config settings.

What changes (and where in this process) would we need to make for a vite plugin to work? What are the requirements?

[Marvin-Brouwer]

Hmm interesting, I'm pretty sure the vite/rollup plugins just stream in a combined tree-shook unified text stream based on all typescript files. So perhaps it's best to hook up after that?
Or maybe just hook into the normal typescript compiler that vite uses and make it use mytosis as a jsx-factory?
I'm just throwing some ideas out there, I'm in no sense a vite expert

[Marvin-Brouwer]

@samijaber,

I think I'm pretty close to getting this work.
I don't think vite supports multi-file so I may need to write a bundle for separate outputs but I'll see that when I get there.

Right now I'm seeing some odd output.
I have this code:

			const jsonTree = parseJsx(code, { typescript: true });
			const mitosisComponent = componentToMitosis({ })({ component: jsonTree })
			const react = componentToReact()({ component: jsonTree })
			const vue2 = componentToVue2()({ component: jsonTree })
			const vue3 = componentToVue3()({ component: jsonTree })
			const lit = componentToLit()({ component: jsonTree })

			return { code: lit };

The strange this is that all of these options generate the same output.
It all looks like react to me.
Am I doing something wrong here?

[Marvin-Brouwer]

I was, something Vite related.
It's not working though

[Marvin-Brouwer]

@samijaber,

I'm currently running into the build tool breaking on my when I output anything other than a componentToMitosis.
I'm happy to spend a bit more time to get this to work. However, before I do, I'm wondering how mitosis is supposed to be exported.
As far as I'm concerned there are 2 flavors I could pursue.

• Compiling to one library libname and adding sub-folders like:
  • libname/react
  • libname/lit
  • etc.
• Compiling to multi-library
  • @libname/react
  • @libname/lit
  • etc.

The latter would require multiple npm-publishes anyway so I think it would be fine to output the json from parseJsx instead and running mitosis from the command line on that for the respective publishes.

What I'm not sure of, is what is preferred.
I can imagine that people aren't really fond of installing a react library if they're only using lit.
But on the other end, with tree-shaking that shouldn't matter much.

What would you recommend?

[Marvin-Brouwer]

@samijaber I got stuck and started asking for help in the Vite discord.
I've made a POC repo to illustrate what I've tried so if you're interested you can take a look here:
https://github.com/Marvin-Brouwer/vite-plugin-mitosis
If you'd like, you can also maybe help out with out lack of Mitosis knowledge.