Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert plugin to ESM and split large files #533

Merged
merged 11 commits into from
Jan 23, 2023
Merged

Conversation

jackbrewer
Copy link
Contributor

@jackbrewer jackbrewer commented Jan 16, 2023

This PR starts modernising the plugin by switching to ES Modules, and splitting some of the larger files into smaller discrete function files. In theory, there are no functional changes, but a lot of files have been touched.

These changes should allow easier test authoring, and allows us to switch out express for netlify dev in a more controlled way.

Using ESM is the recommended Netlify way: https://docs.netlify.com/integrations/build-plugins/create-plugins/#es-modules.

Example site deploy using modernized version:

image

  • Bottom (earlier) deploy uses commit before the changes – `@netlify/plugin-lighthouse@4.0.1
  • Top (later) deploy uses this branch as the plugin version – netlify/netlify-plugin-lighthouse#jbr/modernizing

Summary of changes

  1. Split most functions from index.js to standalone directories
  2. Switch from require to import/export
    • To avoid needing to add Babel, we import files directly e.g. src/directory/index.js (to match the spec) rather than importing src/directory directly and relying on Babels's file resolving. Happy to change this in future if we find additional uses for transpiling.
  3. Update eslint to v8 and tweak setup to work with ESM
  4. Add eslint-plugin-import to enforce filename based imports (and import order for tidyness)
  5. Update Jest setup to work with ESM
  6. Update Cypress setup files to ESM

Test plan

  • All tests/linting should pass
  • Sites deployed with this version of the plugin should still report results as expected
  • Plugin should be able to be run locally using yarn local

BEGIN_COMMIT_OVERRIDE
chore: internal refactor to use ES modules #533
END_COMMIT_OVERRIDE

@netlify
Copy link

netlify bot commented Jan 16, 2023

👷 Deploy Preview for plugin-lighthouse processing.

Name Link
🔨 Latest commit f1f1715
🔍 Latest deploy log https://app.netlify.com/sites/plugin-lighthouse/deploys/63c6cde13e17940008df5a78

@jackbrewer jackbrewer self-assigned this Jan 17, 2023
const { getSettings } = require('./settings');
const { getBrowserPath, runLighthouse } = require('./lighthouse');
const { formatResults } = require('./format');
import chalk from 'chalk';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the main file where functions were cut from

jest.spyOn(console, 'warn').mockImplementation(() => {});
jest.mock('chalk', () => {
jest.unstable_mockModule('chalk', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jest isn't quite there with ESM. Mocking a module being one outstanding pain point. Based on a few recommendations, we use this module-specific mock (available since Jest v27), then lazy import the file we want to test after the mock is in place.

https://www.sitepen.com/blog/jest-esm-almost-there

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[dust] It might be nice to add this link in a wee comment here, in case anyone wonders in future!

@jackbrewer jackbrewer marked this pull request as ready for review January 17, 2023 16:39
@jackbrewer jackbrewer requested review from a team and aitchiss January 17, 2023 16:39
Copy link
Contributor

@aitchiss aitchiss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woooo this is a really quality improvement! ✨

I've run this locally and with a test site (inc with some paths that should generate lighthouse failures) and all seems to be working as before 👍

jest.spyOn(console, 'warn').mockImplementation(() => {});
jest.mock('chalk', () => {
jest.unstable_mockModule('chalk', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[dust] It might be nice to add this link in a wee comment here, in case anyone wonders in future!

@jackbrewer jackbrewer merged commit bbb55c9 into main Jan 23, 2023
@jackbrewer jackbrewer deleted the jbr/modernizing branch January 23, 2023 10:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants