Plugin JavaScript cleanup / refactor chores
Open
Nobody has claimed this yet.
technical-debt
type: development
- Dominant language
- JavaScript
- Stars
- 2k
- Forks
- 975
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 36
Description
The JavaScript in Yoast SEO has accumulated quite some technical debt. In this issue we can keep track of refactor chores we can do to improve consistency in the JS code base.
- Consistent casing of localized variables. Currently localized variables use both
camelCaseandsnake_case. This should be consistent. - Use wp.data everywhere. We currently use Redux thunk in some places and wp.data in other places to map state and actions to components. This should only be wp.data (with selectors).
- Remove
redux,react-reduxandredux-thunkas dependencies.
- Remove
- Stop using localized variables directly in code that has access to the store. Currently, we access localized variables anywhere in the code, making our code strongly coupled to the presence of these variables. Instead we should select this data via the store and populate the store with the right data on initialization.
- Consistent casing of filenames. Some file names use
camelCase, others usekebab-case. - Use booleans everywhere instead of
0|1in localized data. - Remove
material-uifrom the plugin as a dependency. - Upgrade babel and remove obsolete dependencies. Move babel config to
./config/babel - Remove
lodashas a dependency (we already use the external). - Replace
jedwith@wordpress/i18neverywhere and remove the dependency. - Remove unused
classnamesanddom-scroll-into-viewdependencies. - Replace
a11y-speakwith@wordpress/a11yeverywhere and remove the dependency.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue is a checklist of broad JavaScript refactor chores, but it names no specific files or tests. Start by choosing one unchecked item and tracing its current usage in the JavaScript codebase and dependency configuration. Done means the selected migration or cleanup is complete, its old dependency or pattern is removed where requested, and relevant checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, react, redux, wordpress
- Domain
- frontend, tooling
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100