storysource: Add default parser option. Support prettier v1.13.0

[isoppp]

Issue: #3657

What I did

Add default parser option for prettier v1.13.0 in storysource

How to test

Is this testable with Jest or Chromatic screenshots?

Probably can't.

Does this need a new example in the kitchen sink apps?

No.

Does this need an update to the documentation?

No.

Note

I tried add parser: 'babylon' in default option. And it works.
But I do not know if this modification alone is enough.

I try to make a PR of this comment on the ticket

[Hypnosphi]

Looks like it doesn't recognize typescript now:

[12:02:47][Step 2/2]   ● inject-decorator › positive - ts › encountered a declaration exception
[12:02:47][Step 2/2] 
[12:02:47][Step 2/2]     SyntaxError: Unexpected token (10:11)
[12:02:47][Step 2/2]        8 | })
[12:02:47][Step 2/2]        9 | class WithStoreComponent {
[12:02:47][Step 2/2]     > 10 |   private store: Store<any>;
[12:02:47][Step 2/2]          |           ^
[12:02:47][Step 2/2]       11 | 
[12:02:47][Step 2/2]       12 |   constructor(store: Store<any>) {
[12:02:47][Step 2/2]       13 |     this.store = store;
[12:02:47][Step 2/2] 
[12:02:47][Step 2/2]       65 | }
[12:02:47][Step 2/2]       66 | 
[12:02:47][Step 2/2]     > 67 | export function generateStorySource({ source, ...options }) {
[12:02:47][Step 2/2]       68 |   let storySource = source;
[12:02:47][Step 2/2]       69 | 
[12:02:47][Step 2/2]       70 |   storySource = generateSourceWithoutUglyComments(storySource, options);

CC @igor-dv

[Hypnosphi]

We actually add parser option on call site

So, when parser === 'javascript' we should add parser: 'babylon' instead of skipping this part

But I think a more elegant solution would be to pass filepath option to prettier so that it could infer the correct parser from extension. You can get file path in transform function as this.resourcePath, add it to options object, and then pass to prettier instead of parser

[Hypnosphi]

Both solutions would fix #3660 (comment)

[isoppp]

Thank you for information! I will try it.

[isoppp]

I fixed this.
Pass this.resourcePath to prettier config.

Thank you for telling me the information.
It was very helpful in fixing it.

[codecov]

Codecov Report

Merging #3660 into master will decrease coverage by 0.01%.
The diff coverage is 70%.

@@            Coverage Diff             @@
##           master    #3660      +/-   ##
==========================================
- Coverage   41.55%   41.54%   -0.02%     
==========================================
  Files         458      458              
  Lines        5058     5062       +4     
  Branches      849      851       +2     
==========================================
+ Hits         2102     2103       +1     
- Misses       2451     2453       +2     
- Partials      505      506       +1

Impacted Files	Coverage Δ
addons/storysource/src/loader/index.js	0% <0%> (ø)	⬆️
addons/storysource/src/loader/parsers/parser-js.js	100% <100%> (ø)	⬆️
addons/storysource/src/loader/inject-decorator.js	100% <100%> (ø)	⬆️
addons/storysource/src/loader/parsers/parser-ts.js	100% <100%> (ø)	⬆️
addons/storysource/src/loader/generate-helpers.js	90.62% <66.66%> (-9.38%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dd867d2...6ac4983. Read the comment docs.

[isoppp]

I fixed one point with additional.
Since Prettie's parser was similarly changed in version 1.13.0,
( see: prettier/prettier@52a2a46 )
When the test was executed, the function called in parser-js.js etc outputted not function error.

And I did not do the test locally. I'm sorry.
In this time, we confirmed that errors are not generated by executing the test locally.

However, it seems that errors occur in places which are not touched by CircleCI.
How can i solve this?
Tell me if you have a good idea.

[Hypnosphi]

Please update it to latest version: looks like we don't support 1.12 after change in parser imports

[isoppp]

That is true
I changed to ^1.13.3

[Hypnosphi]

Not needed anymore, filepath is enough

[isoppp]

I thought the same.
But in this test , if the extension is txt and the contents are something else, prettier does not support to txt file, so it gets an error.

error:

No parser could be inferred for file: (LOCAL_PATH)/addons/storysource/src/loader/__mocks__/inject-decorator.stories.txt

Should i change the test?
I think that probably this is a rare case, so I think that do not have to deal with it unless need it.

[Hypnosphi]

After giving it a second thought, we probably should always pass parser to prettier when user specifies it explicitly, which is exactly what we do now. So let's keep it as is

[Hypnosphi]

But we probably should put else if (filepath) inside if (!config.parser), to cover cases when parser is not passed

[Hypnosphi]

Or maybe we should just pass babylon when parser isn't set explicitly, because this is what we use by default ourselves. In this case, filepath will be never needed

[isoppp]

Thank you for review. I tried fixing it.

And, i read Prettier code a little.
Prettier gives priority to parser over filepath.
If both are empty we gave babylon as Prettier will output errors in the future.

[Hypnosphi]

let's put ...prettierConfig after this line, so that it wouldn't override explicitly passed prettierConfig.parser

This is why there was !config.parser check before

[isoppp]

I made a slight change to the beginning of this function.
When prettierConfig.parser is explicitly set return will be done at this point

if (prettierConfig.parser) return prettier.format(source, prettierConfig);

After this processing, shoud not set prettierConfig.parser.
So I do not think it is necessary to change it

[isoppp]

But, if this code is not good, I think it can try changes.

[Hypnosphi]

I don't feel really good about this double prettier.format call in different logical branches. Let's maybe revert it to how it was, with if (!prettier config.parser) check?

[isoppp]

OK, I understood.
Many thanks for having you review it over and over. And, sorry...

I reverted before commit.
After, modified to make parser or filepath always specified
If the parser and file path are empty, set the parser babylon