Yoast / Yoast/wordpress-seo

Plugin JavaScript cleanup / refactor chores

Open
#15,744 1 comment 0 reactions 0 assignees View on GitHub

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 camelCase and snake_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-redux and redux-thunk as dependencies.
  • 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 use kebab-case.
  • Use booleans everywhere instead of 0|1 in localized data.
  • Remove material-ui from the plugin as a dependency.
  • Upgrade babel and remove obsolete dependencies. Move babel config to ./config/babel
  • Remove lodash as a dependency (we already use the external).
  • Replace jed with @wordpress/i18n everywhere and remove the dependency.
  • Remove unused classnames and dom-scroll-into-view dependencies.
  • Replace a11y-speak with @wordpress/a11y everywhere and remove the dependency.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.