CI Updates and Backend Refactoring

[heatherbarney]

This PR is BIG!! Goal is to not have PR’s of this size in the future….

One thing to note right off the bat is that Github says this can't be auto-merged, so there will need to be a little bit of manual merging. We can walk through this together if necessary. I am 99% sure this will be pretty minor - I believe this issue is that my versions of the StateChart.svelte and FileStructure.svelte files don't include the comments you added in the PR you made in February that I just approved. So those will need to be checked by hand, but hopefully will just take a few minutes.

There were two main goals for the changes reflected here: first, to set up a CI pipeline to run various checks for code quality and functionality before commits and/or PR’s are accepted; second, to begin refactoring some of the most obnoxious issues on the backend!

Quick summary of changes you’ll see in files that fall into each category…

CI Stuff:

• Added various packages and related files for CI process:

  • .github/workflows/test.yml creates Github Actions workflow to run checks on PR’s
  • Various new Husky script files create pre-commit hooks
  • Lintstaged configs ensure pre-commit hook checks run only on committed files.
  • Commitlint config enforces linting rules for commit messages.

• Deleted travis.yml. Originally I’d tried to set up a CI pipeline using TravisCI, but they started wanting to charge me a fee if we exceeded a certain number of builds a month, so I switched to Github Actions instead because it’s free.

• Package.json updates reflect new dev dependencies for CI. Also updates to package name, new script for “prepare” (to set up Husky hooks) and removal of script for “dev” since we never actually use dev mode!

• Updated various ignore files to facilitate CI process and keep Github repo clean.

• Changed file name for SvelteSlicer logo as a hack to get build process working in Github Actions workflow (and related changes on import statement in App.svelte).

• Added a handful of unit tests for injected.js file in injected.test.js.

• Minor formatting updates from Prettier and ESLint in panel.html, FileStructure.svelte, StateChart.svelte, webpack.config.js, index.js.

Refactoring:

• Lots of changes in injected.js - most are either formatting (looks like Prettier went nuts fixing my indentation!) or renaming functions to try to provide more clarity on what’s doing what. One VERY small change with actual functional repercussions - added a property to MutationObserver instantiation that allows us to capture changes to properties or attributes of nodes already on the DOM.

• Renamed background.js to backgroundScript.js and listener.js to contentScript.js for greater clarity.

• Updated manifest.js to reflect name changes of background script and content script, and to allow access to injected.js file for fetching.

• Updated a utility function in store.js that creates a flattened tree structure to directly accumulate and return output via a recursive helper function rather than working through side effects on a global variable.

[AnchiTeng]

Thanks for your efforts. I had tested it on my end and it all works properly. I am not familiar with the CI pipeline we use here but I had set up the Github CI. Please walk me through when you have time.

I think the merging was blocked because we set up it needs to be merged with 1 approving review.