Toolbox integration

[alansouzati]

Added two new tasks:

• check: runs jslint, scsslint, and tests.

  You will need to run grommet check in the command line when you install the new cli. This task will run jslint and scsslint in parallel. And after that it will run tests.

  • jslint requires .eslintrc to be present in your project root folder. By default it runs on all javascript files. you can add .eslintignore file to remove it from the analysis. See an example of .eslintrc here and .eslintignore here.
  • scsslint: it uses sass-lint project to evaluate SCSS issues. You need a .sass-lint.yml with the rules. See a sample here.
  • test: runs jest using the configuration inside the package.json.

• pack: prepares the app for distribution/test by coping assets from the public folder, and running webpack in production and development mode, where production is the default.

  It requires a webpack config in the root folder of your project. See a sample here.

  For production run grommet pack or NODE_ENV=production grommet pack.

  The interesting thing about the grommet-sample webpack config is that it serves both production and development. In development mode you need to create a devServer.config file in the root folder of your project. See a sample here.

  For development run NODE_ENV=development grommet pack and a dev server will open automatically. The default port for the server is 3000, to run in a different port you can run NODE_ENV=development PORT=8080 grommet pack

[jaitaiwan]

Looks good!

[coltonw]

I really really like that the configuration for all the tools is the standard configuration rather than a custom grommet-toolbox only configuration.

[coltonw]

One thing I like about grommet-toolbox is that it lints and tests as part of the build. Is that something we are losing with this move? Also, what about cli arguments for eslint and more importantly jest, where you may want --coverage or -u and whatnot. Are we going to be in a situation where you have to run jest itself to get those options or will grommet check forward those?

[alansouzati]

hey @coltonw, grommet pack will not run linting anymore. We had a bunch of requests to remove it. Although it is easy to add, I like the idea of having them separated. grommet check && grommet pack == gulp dist.

I added the grommet check to the npm test script and enabled the pre-commit to run that in the grommet-sample project, check it out: https://github.com/grommet/grommet-sample/blob/CLI_INTEGRATION/package.json#L66

You are correct, if you want to run a specific set of CLI arguments, I would say you are better off using the CLI for each tool separately. We tried to think a way that will be flexible enough to avoid that. For example:

We run eslint at **/*.js and allow files/patterns to be ignored through .eslintignore. This will serve most cases, but in a scenario where you need something different, you can run the CLI for eslint directly. 🎉

The same goes for jest we run tests based on the configuration inside the package.json. We allow one argument in our cli that is -u or --updateSnapshot. For example grommet check -u will update the snapshot of your tests. By default we run the coverage (we added that to the package.json). But again, maybe you want to use some other CLI argument that is specific to your needs, then I would say you better off running jest --watch.

The main difference here is that now all the config files are exposed and you can pretty much decide how to execute your tasks.