The third minor version of Agrippa, the React component CLI, is finally out!
Since v1.2.0 came out, Agrippa has seen tremendous growth - counting the difference in stars on the GitHub repo, for example, we've grown by 120% (154 stars) over the course of just over 40 days!
More issues are also being opened (and closed!) on GitHub, too.
This is a good opportunity to say that I'm truly grateful for everyone who have tried Agrippa out and joined the community; I'm delighted to see Agrippa growing and being used, and I'm super excited for it to grow and improve further in the future.
So, thanks everyone!
If you're not using Agrippa, join us! Get started here.
As for the new version, this one was in the works for longer than the previous two; integration tests, in particular, were a challenge to implement.
Version 1.3.0 brings the following changes:
The separate-index scheme: Agrippa's default component directories structure now separates the main component file, which contains the component's declaration and logic, from the
index
file, which is the component directory's entry point. Previously, Agrippa placed the component logic under theindex
file, which resulted in less files overall - but made it harder to distinguish between components in IDEs, which hurt the developer experience. Generated components should be easier to work with now! Many thanks to @wickedpuppy for suggesting this feature.
For more info, check outseparate-index
on Agrippa's docs.Support for React Native: Agrippa now supports React Native projects!
Furthermore, it can auto-detect a react native project by having thereact-native
dependency in itspackage.json
,so you don't really need to configure anything in a typical project! Of course, styling with React Native'sStyleSheets
is also supported (and, for React Native projects, also enforced).
For more info, check outreactNative
on Agrippa's docs.Agrippa is now covered by integration tests, as well as more unit tests.
Integration tests were a challenge - since Agrippa is all about reading and writing files automatically, testing it effectively requires setting up and running in a completely isolated environment! We ended up combining Docker, Jest and some custom code to create a pretty sophisticated solution, and it works quite well.
More tests are on the way, but the tool already has pretty good coverage.-
Tweaks & Bug fixes:
-
props
=ts
can no longer be used without thetypescript
flag; additionally, thetypescript
flag now implies thatprops
=ts
(of course, this is overridden by any value set by the user). - The
allowOutsideBase
check is now skipped ifbaseDir
is not specified. - Fixed a bug where
--children
would generate<div>children</div>
instead of<div>{children}</div>
in the JSX template.
-
Your thoughts and feedback, as always, are most welcome.
If you've found a bug with this release, or want to suggest a new feature, please submit an issue.
Have a great week!
Top comments (17)
Why use this over VS Code snippets? It seems to me that VS Code snippets give you more flexibility and a quicker generation.
Well, if most of your projects are built using similar stacks and you have a few good snippets, snippets might work for you.
However, to cover the different tools, patterns and ways people write React components with you'd need tons of snippets!
Just as a simple example, say you have four different styling solutions you come across, two different declaration methods (as a
const
or as afunction
), two different export schemes (named vs. default export), as well as support for Typescript projects. All combinations of these four parameters exist in the wild, so to account for all of them you'd need 4*2*2*2 = 32 different snippets! And that's not a comprehensive list of options, even.Sure, if you create more generic snippets you can get around with a smaller number of them, but then they become non-ideal - you need to "fix" every component generated with a snippet, so that it actually fits into the projects' stack.
Also, I disagree with your point about generation with snippets being quicker - in most projects that have Agrippa configured correctly, generating a component consists of typing three words into the command line -
agrippa gen xxx
. This command creates a directory for the component, 1-3 files according to the configuration (e.g. main component file, styles file and anindex
entrypoint) with the needed boilerplate, and optionally also opens them in your IDE. I'd argue that this is much quicker than creating all of these manually, and using a snippet for the component's declaration. And, as Agrippa grows, this difference will only get bigger.(Keep in mind I haven't used aggripa I've just read a bit) If you are working on various projects I guess one advantage to Aggripa Is that projects can have an aggripa config so you don't need to make your own snippet every time you work on a new codebase (if the project itself has a config).
I could see how it could be faster to generate in some cases for aggripa (when there are multiple files created). The only downside is you have to navigate in your terminal to the spot you want vs. doing a couple clicks in the UI and hit create file.
Thanks for the response and your input. 🙂
Cheers!
(p.s, as for navigation, both post-commands and baseDir & dest might help)
As a final point, Agrippa takes some inspiration from Angular's CLI. Angular and React are two different beasts, and not everything that works for Angular would work for React - but the convenience and developer experience Angular's CLI bring to Angular developers is immense, and I think React devs could benefit from something similar as well.
Looks Amazing! It's obvious from all the newly added features and bug fixes that you have worked hard to made it all possible and it is very appreciated. Can't wait to see what agrippa has in store for us in the future...😀
🤤🤤🤤🤤
Hi there! I have a small blog about ancient Rome, apart from my main IT activity - can I ask why have you named your utility Agrippa? Is it because Agrippa was very helpful to emperor Augustus? Thanks! :)
Hi!
That's actually exactly it!
I started working on Agrippa a short while after I had started listening to Mike Duncan's The History of Rome podcast, and the names & stories were always at the back of my mind at the time. So, when it came time to pick a name - I immediately drifted there.
I'm actually really glad that some people get it!
Can you link your blog please? I'll take a look!
Bella!
A perfect tool from a great mind 💥💥💥
Carry on with the good work.
I have not come across this until now, what a great idea. Will check it out, many thanks for making and sharing this.
Thank you!!!
Good article, please fix the github repo link!
Fixed! Thanks a lot for bringing this to my attention!
Looks pretty good! And also quite greeky with the name lol.
Thanks! When I chose the name I was at the peak of my Roman history phase 😂
wow, everything is interesting to me :) , I will study