Theme inclusion of Prettier

[rob-howells]

Background / Motivation

• There is an opportunity to improve code consistency and formatting by using Prettier
• This work follows on from previous work on enhancing the theme build tools (https://github.com/accessdigital/wilson/pull/18)

Approach

• Installed Prettier package and created a new prettier script to update JS files in the src directory (using default Prettier config)
• Added environment check, which only runs Prettier in production mode. This is to prevent Prettier changes from triggering a second onchange event in the watch:scripts task (once Prettier changes had be automatically applied)
• Updated readme with additional tool information

Additional work

• Fixed warning about missing react version in eslint
• Updated eslint ignore

[rob-howells]

Have you tested this config with BLT at all? That runs some commands on commit (mostly Twig/YAML file linting I think), but it also runs commands during builds, for example here (if you can see Wave builds): https://app.travis-ci.com/github/accessdigital/wave/builds/246695376#L1004

This is interesting and definitely something I would like to explore further. At the moment I haven't tested it with any CI tools. I know on beechfield there are some Github actions which run the theme gulp build command. So it would be great to test it out something similar using the new npm scripts. RAF uses Travis, although I'm not sure we have a theme building on there. I don't know if there is a consensus about whether Github actions or Travis is the preferred way forward? I know there have been some issues with the latter. But either way it would be good to test this out within some sort of CI build step.

I realise that this is a theme starter kit, not actually attached to any builds or anything (though I wonder if we could add some front-end tests to it? 🤔)

This is also I would like to try adding in. Where you referring to tests for the build within the CI? Or tests of the front end code itself? Or both? I'm keen to explore both. Mark W has mentioned the possibility of integrating Cypress - have you been using that on Wave?

@iamsophiesk

[iamsophiesk]

I know on beechfield there are some Github actions which run the theme gulp build command.

I'm not sure where we stand on Github Actions vs Travis either, but for Wave, Travis triggers the BLT command blt source:build:frontend, which runs:

$ npm install && ./node_modules/.bin/bower install
$ ./node_modules/.bin/gulp build

... the build task which runs:

gulp.task(
  'default',
  gulp.series(
    'bower',
    gulp.parallel('lint', 'styles', 'scripts')
  )
);

Which is pretty similar to what you've mentioned I think. I suspect it'd be pretty straightforward to swap that out, apart from Bower, which gives us Susy and an old, rickety grid :D

Interestingly it runs the front-end build twice, once to test and once to build/deploy the artifact, so it would be interesting to add tests to the first run (run it in dev mode or something).

have you been using that on Wave?

No, but I know Lewis has been looking into Cypress on Business Stream. I've dabbled a bit with Cypress in the past, and we had just got it running on pull requests using CircleCI at my last place. It'd be super interesting to see how we could plug it in to GHA/Travis.

[mangyfox]

For reference, we are using github actions to run the CI on Edrington. This installs all the composer dependencies then runs various blt commands to do the frontend builds and run tests etc. For non-deployed branches, the frontend and test are run separately, but for deployed branches they are taken care of by the blt deploy script.

I would share the code but we can't see each others' projects 😄