DEV Community

Cover image for Agrippa 1.3 is out 🎉🎉🎉
Nitzan Hen
Nitzan Hen

Posted on

Agrippa 1.3 is out 🎉🎉🎉

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 the index 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 out separate-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 the react-native dependency in its package.json,so you don't really need to configure anything in a typical project! Of course, styling with React Native's StyleSheets is also supported (and, for React Native projects, also enforced).
    For more info, check out reactNative 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 the typescript flag; additionally, the typescript flag now implies that props=ts (of course, this is overridden by any value set by the user).
    • The allowOutsideBase check is now skipped if baseDir 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!

Discussion (17)

Collapse
penguinshade profile image
Christian Burke

Why use this over VS Code snippets? It seems to me that VS Code snippets give you more flexibility and a quicker generation.

Collapse
nitzanhen profile image
Nitzan Hen Author

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 a function), 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 an index 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.

Collapse
penguinshade profile image
Christian Burke

(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. 🙂

Thread Thread
nitzanhen profile image
Nitzan Hen Author

Cheers!

(p.s, as for navigation, both post-commands and baseDir & dest might help)

Collapse
nitzanhen profile image
Nitzan Hen Author

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.

Collapse
liorvainer profile image
LiorVainer

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...😀

Collapse
itaylisaey profile image
ItayLisaey

🤤🤤🤤🤤

Collapse
llidd profile image
llidd

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! :)

Collapse
nitzanhen profile image
Nitzan Hen Author

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!

Collapse
alxizr profile image
alxizr

Bella!

A perfect tool from a great mind 💥💥💥
Carry on with the good work.

Collapse
peterwitham profile image
Peter Witham

I have not come across this until now, what a great idea. Will check it out, many thanks for making and sharing this.

Collapse
nitzanhen profile image
Nitzan Hen Author

Thank you!!!

Collapse
momosetti profile image
Momo Setti

Good article, please fix the github repo link!

Collapse
nitzanhen profile image
Nitzan Hen Author

Fixed! Thanks a lot for bringing this to my attention!

Collapse
juanfrank77 profile image
Juan F Gonzalez

Looks pretty good! And also quite greeky with the name lol.

Collapse
nitzanhen profile image
Nitzan Hen Author

Thanks! When I chose the name I was at the peak of my Roman history phase 😂

Collapse
marielletrivett profile image
Игровой автомат Book Of Ra

wow, everything is interesting to me  :) , I will study