React-styleguidist: Babelify everything

[sapegin]

Right now only src folder is compiled with Babel. That's fragile, because we always have to remember that in loaders and scripts folders we can only use language feature supported by the Node version we support. For example, we can't use object spread.

Please make a branch based on the next branch.

• [x] Move the contents of src folder into src/client folder
• [x] Move loaders and scripts into src folder
• [x] Customize Babel config for loaders and scripts folders
  
  
  
  • [x] Enable modules transformation
  
  
  • [x] Set target to Node 6.0
  
  

[smashercosmo]

That's fragile, because we always have to remember

You don't have to remember. You can just use https://github.com/amilajack/eslint-plugin-compat )

[sapegin]

We use it, but it doesn't work well for some reason. Anyway fragility isn't the only reason — more consistent DX and ability to use Flow for scripts and loaders are good reasons too.

[vivek12345]

@sapegin Can I take this up?

[sapegin]

@vivek12345 Sure, would be awesome! Ping me if you have any questions!

[vivek12345]

Thank you @sapegin. For start when I do a npm install and npm start I get this error

 FAIL  Failed to compile

multi ./lib/index ./node_modules/react-dev-utils/webpackHotDevClient.js
Module not found: Can't resolve '/Users/viveknayyar/vivek/react-styleguidist/lib/index' in '/Users/viveknayyar/vivek/react-styleguidist'

Can I please get some help here?

[sapegin]

Looks like you're not running Babel, have a look here:

https://github.com/styleguidist/react-styleguidist/blob/master/.github/Contributing.md#development-workflow

[vivek12345]

@sapegin Thank you. That did help.
I have a question around the lib directory.
So when I compile src directory with client, scripts and loaders, should I put them all inside lib or just the client.
Secondly examples use a path of react-styleguidist/lib/rsg-components if we change from putting rsg-components from being inside lib to being inside client/lib will that be the right way or should we put all client code directly inside lib rather than putting inside lib/client so that our examples continue to work the way they are.

[sapegin]

So when I compile src directory with client, scripts and loaders, should I put them all inside lib or just the client.

Not sure I understand the question, the folder structure should be:

• src/client
• src/loaders
• src/scripts

lib will have the same structure.

Secondly examples use a path of react-styleguidist/lib/rsg-components if we change from putting rsg-components from being inside lib to being inside client/lib will that be the right way or should we put all client code directly inside lib rather than putting inside lib/client so that our examples continue to work the way they are.

Yup, it should be src/client/rsg-components, and we'll need to update a path here:

https://github.com/styleguidist/react-styleguidist/blob/cf7f1efa88d6c83abcb87b5391340d115a4fbf45/scripts/make-webpack-config.js#L18

[vivek12345]

@sapegin Perfect, so yes all those changes are done... :)
The one doubt that I have is on this code

if (config.styleguideComponents) {
        forEach(config.styleguideComponents, (filepath, name) => {
            const fullName = name.match(RENDERER_REGEXP)
                ? `${name.replace(RENDERER_REGEXP, '')}/${name}`
                : name;

            webpackConfig.resolve.alias[`rsg-components/${fullName}`] = filepath;
        });
    }

Should we update the path here as well?

npm run lint throws a lot of error for these like the following:-
Unable to resolve path to module 'rsg-components/Markdown'
Missing file extension for "rsg-components/Welcome/WelcomeRenderer"

[vivek12345]

I think I understood that.
Had to change eslint file
From

"import/resolver": {
    "node": {
    "moduleDirectory": ["src", "node_modules"]
    }
}

TO

"import/resolver": {
    "node": {
    "moduleDirectory": ["src/client", "node_modules"]
     }
}

Please ignore this. I guess this ain't right.

[vivek12345]

@sapegin should I be changing all these references from
import Argument from 'rsg-components/Argument';
to
import Argument from 'client/rsg-components/Argument';