JSX, JSDoc and HTML minification crash :/

[Ivan Dalmet]

Hi,
Your project is very great (you can see how we use it here --> http://go.saagie.com/design-system).

But I have a little problem with Swanky and swanky-processor-jsdoc.
We try to add documentation about React components from JSDoc comments.
But If we use the following JSDoc comment in our JSX component, swanky crash :/ (because of quotes).

...
 * @example
 * <Badge modifiers={['primary']}>My badge</Badge>
...

Output:

Html Webpack Plugin:
  Error: Child compilation failed:
  Module build failed: Error: Parse Error: My badge        

If we disable the HTML minification in webpack.config.js file in swanky module, swanky don't crash anymore.

      new webpack.LoaderOptionsPlugin({
        options: {
          context: path.resolve(path.join(SWANKY_CONFIG.meta.theme, DEFAULTS.CSS_THEME_FOLDER)),
          htmlLoader: {
            minimize: true, // Change this to false and it works
            removeAttributeQuotes: false,
            caseSensitive: true,
            customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
            customAttrAssign: [ /\)?\]?=/ ]
          },
          swankyDocs: {
            sections: SECTIONS_CONFIG
          }
        }
      })

But how can we override this in our project without changing the swanky package ?

Thanks for your time :)

[Rodney Leviton]

Hi @ivan-dalmet I must say you have done an outstanding job with your design system!

I will do my best to take a look at the issue this weekend. In saying that, Swanky does take a configFn option that allows you to override the webpack configuration (I don't think this has been documented). The API is a little tricky but basically involves writing a function that takes the swanky webpack config and adds/removes/mutates parts that you need. So in your case you could simply delete the htmlLoader config and return the rest.

References:
https://github.com/swanky-docs/swanky/blob/master/src/index.js#L17
https://github.com/swanky-docs/swanky/blob/master/src/config/build/build.js#L23

[Ivan Dalmet]

Hi @rodleviton thanks for the tips!

I have manage to change the minimize param to false in serve.dev.js and build.prod.js (in config folder) with this code:

...
  configFn: (conf) => {
    // Disable HTML minification to prevent swanky to crash when documenting JSX components.
    conf.plugins[1].options.options.htmlLoader.minimize = false;
    return conf;
  },
...

It's not the perfect solution but it works! 🎉

Thanks a lot for your help! 👍

[Rodney Leviton]

Thanks @ivan-dalmet. Looks like your work-around will suffice for the time being but this looks like a bug that I will try and find a more permanent solution for.

Would I be able to list the public link to your design system as a featured implementation of the Swanky tool?

[Ivan Dalmet]

Yes @rodleviton, the work-around is enough for us right now :)

And yes, you can link our Design System but use this link -> http://go.saagie.com/design-system (in case we change the full url in the future).

Again thanks for your time !