Using AST's to compile meta data about my code

[karismatic-megafauna]

Allo! I use sagas and redux together, and it is getting a little crazy and I want to make a tool (hopefully open source) to help me visualize it.

Here is an example I wrote in AST explorer (has bugs, will need to handle some edge cases): https://astexplorer.net/#/gist/b6fb0895c6e2eba0c39f82a76cf6546f/4f66a69678f0702719b9b67a8264cc37830b2a1e

This AST code works mostly the way I want it to, I just need to loop over the files I want to run this on and have them write to a JSON object in this shape:

[
 {
    sagaName: 'summary', // file name I am on
    listensFor: [ '1', '2', '3'], // actions in the exportDefault
    actionsDispatched: ['a', 'b', 'c']  // arguments for "put"
  },
 {
    sagaName: 'lineItem',
    listensFor: [ '3'],
    actionsDispatched: ['a'],
  }
]

At the end of the day, I just want this JSON object so I can throw some sort of UI on top of it to help me understand what the cuss is going on!

Do you have any suggestions?

Currently gonna start making a small package that uses babylon / node / react to get the data, and display it in some manner. Is there another package that you would suggest? Do you have any good boilerplates for making small asts like this? don't really know where to start with that!

Thanks so much, appreciate the advice :)

[karismatic-megafauna]

Also, just read this -> https://medium.com/@kentcdodds/how-writing-custom-babel-and-eslint-plugins-can-increase-your-productivity-and-improve-user-fd6dd8076e26

I think I am going to start here :) https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-writing-your-first-babel-plugin

[karismatic-megafauna]

After doing more research, i think i might use this! http://sevinf.github.io/blog/2012/09/29/esprima-tutorial/

[kentcdodds]

I'll give you a more full answer when I get the chance, but I just wanted to note that the article you posted is 5 years old. Things have changed and improved since then. I suggest you look at this to start: https://kentcdodds.com/talks/#writing-custom-babel-and-eslint-plugins-with-asts specifically this recording: https://youtu.be/VBscbcm2Mok?list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf

[karismatic-megafauna]

Woot Thanks for the help!

This is how i ended up making my AST parser.

Any suggestions? https://github.com/michaelghinrichs/saga-visualizer/tree/master/src/DataGenerator

thanks so much!

[atticoos]

I just want to say that I like where you seem to be going with this idea. I feel the pain that you describe with redux, sagas, and the rest of the stack. Hard to keep track of what listens/dispatches what.

[karismatic-megafauna]

woot! Thanks @ajwhite! Hopefully i can make a tool generic enough to OS!

[kentcdodds]

Hey @michaelghinrichs,

Thanks for the question! Looks like an interesting problem. I'm not sure what more I can add. Looking at the code it seems pretty simple. You've done a good job :+1:

Good luck!