bitttttten / jest-transformer-mdx

A jest transformer for MDX with frontMatter support
12 stars 6 forks source link

Add option for naming export #8

Closed ccesare closed 4 years ago

ccesare commented 4 years ago

Thank you so much for this transformer! I had been trying to produce this for a day, but I kept getting lost in deciding which packages to mix and match. It looks like babel-jest was the missing link, which in retrospect should have been obvious.

In my webpack build, I export the frontmatter as export const meta = { ... }. Would you consider adding support for an option, maybe frontMatterName that would get passed into parseFrontMatter() in the Jest config file? (Transformers support options, a la https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object.)

I did some initial digging and found where the options are accessible from inside a transformer, but it isn't pretty. The ...rest parameter expands to: filename, config, and transformOptions. config.transform comes directly from the Jest config file. Here's mine:

transform: {
    "^.+\\.jsx?$": "babel-jest",
    ".mdx?$": ["jest-transformer-mdx", {frontMatterName: "meta"}]
}

I don't know how reliable the ordering is, but in my quick test the config.transform array kept this order. So the second element in config.transform is where the option can be found.

Since it won't be in the same place in general, one way to do this programmatically is to look through the config.transform array with a RegEx (/jest-transformer-mdx/) and pull the frontMatterName option out.

It seems pretty clunky, but there's some evidence that this is how Jest does it internally (https://github.com/facebook/jest/blob/b502c07e4b5f24f491f6bf840bdf298a979ec0e7/packages/jest-runtime/src/script_transformer.js#L137).

I'll submit a PR that does this, and you can decide if it's something you're willing to support.

Thanks again!

bitttttten commented 4 years ago

Oh this looks cool, and totally a valid use case. And very willing to support this as it makes the transformer way more flexible. You can see that I only really wrote it for myself :, )

Glad the transformer helped, I also spent a fair time setting it up so I had to get it out to help others. Nice to hear you came across it :)

I'll run the code tomorrow but it pretty much LGTM.

ccesare commented 4 years ago

Great! One thing I didn't consider is guarding against passing something that isn't a string or, alternatively a string that will cause a syntax error. Either way, I guess babel should throw an error, so maybe this module doesn't really need to worry about those issues.

bitttttten commented 4 years ago

Yeah, I am sure there is a way to validate the config being passed through but I am happy to leave that out before shipping this feature.

If you pass in an object ala "^.+\\.(md|mdx)$": [path.resolve(__dirname, "index.js"), {frontMatterName: {}}], you'll end up with naming the frontMatter "[object Object]" 😄

 FAIL  ./test.user-settings.js
  ● Test suite failed to run

    SyntaxError: unknown: Unexpected token, expected "," (1:21)

    > 1 | export const [object Object] = {
        |                      ^
      2 |       title: 'Jest Transformer MD',
      3 |       from: 'Batman',

So definitely a valid case to validate the config, but I am happy to release this feature now and then pick up validation later!

bitttttten commented 4 years ago

Going to close in favour of https://github.com/bitttttten/jest-transformer-mdx/pull/10