Development

Notes about Cylc UI development.

Debugging with an IDE

You should be able to debug the development build (sourcemaps are not present in production) using the debugger statement. But if you use an IDE that supports running the unit tests, or even running the application, or if you connect to a running browser (Firefox has this option), the debugger may not stop in your breakpoints.

This is a known issue with our current sourcemaps configuration. See this note on how to modify one line to get the debugger to work: https://github.com/cylc/cylc-ui/blob/d86f687075b49da1136ff302acbcad58c974d877/vue.config.js#L77-L83

This is useful when you have a unit test and want to set breakpoints in your IDE in some source file like GScan.vue.

Dependabot

At the moment Dependabot is still missing Yarn 2 and Yarn 3 compatibility. We migrated to Yarn 3 due to issues with build & development dependencies (VuePress, Cypress on MacOS), which causes the Dependabot bot to fail to create ready-to-merge pull requests.

To work around this issue, you can do the following:

• Check out the branch from dependabot (there should be a link in the pull request under the title, just click the clipboard/copy icon)
• git checkout master yarn.lock (assuming your master branch is up to date with upstream)
• yarn install
• git commit -am 'Update yarn.lock with Yarn 3'
• git push

Now wait for the bot to pick up your changes, and if CI is OK it should be good to go. There are some dependencies that cannot be updated due to compatibility issues with Vue, Vuetify, Vue-CLI, sass, etc. So waiting for CI before merging is always a good idea.

If the dependency changed is Vue, Vuetify, or another library you consider important or unstable (e.g. version 0.xx) it might be a good idea to check out the pull request locally and try - at least - the yarn run serve command and have a quick navigation in the UI. Look for errors in the browser console too.