Make babel plugin for auto generating displayName for components
#722
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/oxidecomputer/console-ui-storybook/Hk24VuahaLAv6CvA5aRCB3h2eCr6 |
|
Preview will be deployed at https://console-git-make-babel-plugin-for-display.internal.oxide.computer |
| + // Switch to cwd so babel plugin will run outside of project root | ||
| + const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(process.cwd() + "/")); |
There was a problem hiding this comment.
Fixing this without a patch (or it being fixed upstream) would require that we change vite's root. Right now it's pointing to app. I tried setting it to the repo root, but it won't work unless the html file is there (that despite also having to configure where the html file is in the config...). So we'd either have to move the html file to a dir which is already crowded (I'm not a fan) or change the directory structure such that app and lib shared a root folder. It could be src/* with src/app, src/libs, etc. Still not incredibly ideal given the churn it'd cause. Due to that, I just decided this was the easiest mechanism for now.
There was a problem hiding this comment.
I wouldn't mind moving stuff under a src dir, that's pretty common. I don't really like changing how Vite works. If anything it's a sign that we're currently Doing It Wrong. However, I'm fine merging this and doing the file shuffle later.
There was a problem hiding this comment.
Yeah, agreed. I think eventually moving things to src is the right move. Then again, there's an issue upstream that could sort this out so if that happens maybe it's completely unncessary.
There was a problem hiding this comment.
It's still probably worth doing. We could move app, types, and libs in there, and we could put the libs top level under src, they don't need to be under a src/libs dir.
| /** | ||
| * Helper to streamline babel transforms | ||
| */ | ||
| function transform(strings: TemplateStringsArray) { |
The goal of this PR is two-fold:
Tabscomponent I was looking at. As you can see above it's easy to tell at a glance which components are ours and where they come from.typeis unreliable in dev mode which really sucks. With the addition of this plugin we can compare first ondisplayNamewhich makes that whole process much easier.I wrote some relatively comprehensive tests for the babel plugin that covers all our main cases. I even added support for generating
displayNamefor our classed components (like theContentPaneabove).I did hit an issue when it came to actually getting the file to run on our components in
libs. Right now vite's react plugin is kind of hard coded to never run babel plugins you give it on files outside of vite's configured root. I tried toying around withincludes, etc but not dice. This was also reported on the vite project (vitejs/vite-plugin-react#16) and there's a PR to resolve it but that seemed like more than I really wanted to get into at the moment. For now I've re-addedpatch-packageand made a tiny change to get this to work.