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

Migrate JavaScript to ES2015 classes #3771

Merged
merged 9 commits into from
Jun 12, 2023
Merged

Migrate JavaScript to ES2015 classes #3771

merged 9 commits into from
Jun 12, 2023

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Jun 8, 2023

Now we've added <script type="module"> we can use ES2015 (or ES6) classes for components in #3506

Make sure you view Files changed with "Hide whitespace" ticked as class methods are mostly only indented

Files changed with hide whitespace

@colinrotherham colinrotherham changed the base branch from main to module-eslint-rules June 8, 2023 15:54
@colinrotherham colinrotherham changed the title [WIP] Migrate JavaScript to ES6 classes [WIP] Migrate JavaScript to ES2015 classes Jun 8, 2023
@colinrotherham colinrotherham changed the title [WIP] Migrate JavaScript to ES2015 classes Migrate JavaScript to ES2015 classes Jun 8, 2023
Base automatically changed from module-eslint-rules to main June 8, 2023 16:38
@colinrotherham
Copy link
Contributor Author

colinrotherham commented Jun 8, 2023

Had a few TypeScript checks fail because our tests access @private methods

Assume we're alright doing what we do elsewhere and ignoring known violations?

// @ts-expect-error Parameter 'count' not a number
expect(i18n.getPluralSuffix('test', 'nonsense')).toBe('other')

Note: Ideally we should update our tests to access only public methods, perhaps making getters/setters for things like getCountMessage() instead?

@colinrotherham colinrotherham force-pushed the module-classes branch 2 times, most recently from 69fedde to a44fccd Compare June 9, 2023 10:43
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-br-module-class June 9, 2023 11:25 Inactive
@colinrotherham
Copy link
Contributor Author

Had to make a manual Heroku review app:
https://govuk-frontend-br-module-class.herokuapp.com

Automatic one is still stuck from Heroku downtime yesterday

Review app stuck

Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

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

A couple of minor things but otherwise looks good – exciting stuff! We are truly living in the future 2017.

// Code goes here
}
```

Assign methods to the prototype object. Do not overwrite the prototype with a new object as this makes inheritance impossible.
Add methods to the class. Do not overwrite the prototype with a new object as this makes inheritance impossible.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we can delete this bit as it's no longer relevant?

Suggested change
Add methods to the class. Do not overwrite the prototype with a new object as this makes inheritance impossible.
Add methods to the class.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Left it in as a technicality (still possible I guess?) but also glad to remove!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed it ✅


/** @deprecated Will be made private in v5.0 */
this.$module = $module
export class Details {
Copy link
Contributor

Choose a reason for hiding this comment

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

Worth noting that this file is being deleted in #3766 – could remove the changes relating to this file to avoid potential unnecessary conflicts, unless that makes ESLint unhappy?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm happy to fix conflicts 🤷‍♂️

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's try and merge the other PR first

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As fallback styling for Details in older browsers is still in progress let's switch and merge this first

We prefer named exports over default exports to avoid compatibility issues with transpiler "synthetic default" as discussed in: #2829

See our [coding standards for JavaScript](/docs/contributing/coding-standards/js.md)
This hides them from the generated JSDoc output too
Ideally we should update our tests to access only public methods, perhaps making getters/setters for things like `getCountMessage()` instead?
This is a “just in case” commit where early ES2015 class implementations would return `undefined` in a subclass constructor (extended component) rather than the subclass instance

Might only affect Safari 9

See: #2987 (comment)
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-br-module-class June 12, 2023 08:31 Inactive
@colinrotherham colinrotherham merged commit 5daef48 into main Jun 12, 2023
21 checks passed
@colinrotherham colinrotherham deleted the module-classes branch June 12, 2023 08:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants