Bit.dev with Codegen:
We, me & @resident_lemur have been trying to establish a component development pipeline with Plasmic to a git Bit managed workspace.
Our goal with is:
We develop one or multiple components visually in Plasmic.
Codegen into a git repo.
We code our logic
Bit watches our components files and registers them as micro repositories via Bit Add.
Deploy to NPM as a single isolated and versioned component(s).
And voila we can visually edit our components , re-use them in projects with NPM and the best part, update them all the way to NPM with just the publish button in Plasmic.
The problem
Our current problem with that is how Plasmic Codegen file structure is incompatible with single folder per component files that Bit requires per our understanding. As in other files and other folders that don’t belong to that single component.
As codegen puts the actual components together in the “Plasmic” folder with no folder separation for each component…
Possibly a solution
For this to work, Plasmic would need to put all components files belonging to a single component in the same folder. Possibly as "components/Button/Button.tsx
components/Button/Plasmic/PlasmicButton.tsx…
Could possibly be a publish with Codegen setting in the UI
I’m not familiar with bit.dev, but it looks interesting!
What is Bit supposed to do if your components share assets in common? Various files in plasmic/ are not specific to a component, so it’s not always necessarily cleanly divisible that way. But I also don’t think that’s unusual—ignoring Plasmic, do you know how Bit handles such cases?
Via dependencies. To my understanding the component has a reference to a NPM dependency or a supported registry it will automatically include them as dependencies. Bit can also digest configs to fetch dependencies.
All non custom code that supports a custom Plasmic component should be included as a dependency. All code specific to the component should live in the folder with the component specific files.
We have done experiment with manually moving around files so the can be digested by Bit. But that’s not productive. We have considered creating a pipeline with GitHub actions for example to fix the file structure so Bit can track it as a component.
One thing to note is that the plasmic.json file is the source of truth for “where files are” for different components. So you could write a script that, after plasmic sync, reorganizes the files the way you want them, and update plasmic.json accordingly. Then you can run plasmic fix-imports, which will fix the import references in Plasmic* files
