JavaScript

Packages

Monorepo for all the JavaScript within Yoast.

javascript/packages

This monorepo includes reusable packages:

• @yoast/analysis-report
  • React components that can be used to visualise the outcome of the Yoast content analysis provided by the yoastseo package.
• @yoast/components
  • All-purpose React components.
• @yoast/configuration-wizard
  • A wizard that guides users trough their initial Yoast SEO plugin setup.
• @yoast/feature-toggle
  • A utility that keeps track of enabled and disabled features.
• @yoast/helpers
  • A set of helper functions that can be used across multiple projects.
• @yoast/replacement-variable-editor
  • The replacement variable editor currently used in the Search Metadata previews. In the future, this component will also be used in the Social Metadata previews.
• @yoast/schema-blocks
  • classes and React components used in generating schema blocks from wordpress posts.
• @yoast/search-metadata-previews
  • React components that can be used to generate a preview of what a page will look like in Google's search results.
• @yoast/social-metadata-forms
  • React components that can be used to render forms for controlling the social preview settings. This includes the redux store.
• @yoast/social-metadata-previews [Will replace yoast-social-previews]
  • React components that can be used to generate a preview of what a page will look like when shared trough Facebook or Twitter.
• @yoast/style-guide
  • A combination of style constants and functions that can be used to conform to the Yoast corporate identity.
• eslint-config-yoast
  • ESLint configuration for Yoast projects.
• yoast-components [deprecated. replaced by @yoast/components]
  • All-purpose React components.
• yoast-social-previews [Will be replaced by @yoast/social-metadata-previews]
  • Classes that can be used to generate a preview of what a page will look like when shared trough Facebook or Twitter.
• yoastseo [Replaces YoastSEO.js]
  • Text analysis and assessment library in JavaScript. This library can generate interesting metrics about a text and assess these metrics to give you an assessment which can be used to improve the text.

All new package should be scoped with @yoast/ , so they can be published as part of the Yoast organisation. When creating a new package with translations, please mind that they need to be added to the pipeline (for context see this issue).

javascript/apps

This monorepo includes apps for testing purposes. These apps are not published. Apps include:

• Components
  • A test application for most @yoast packages.
• Content-analysis
  • A test application for the content analysis.

General file structure of a package

• /src. Source files
• /tests. Unit tests.
• /tools. Tooling necessary to build or test.
• /package.json

Useful commands

The following commands can be executed from the javascript project root:

• yarn install, will install all dependencies for all packages.
• yarn lint, will run linting for all packages.
• yarn test, will run tests for all packages.
• yarn link-all, will run yarn link for all packages.
• yarn unlink-all, will run yarn unlink for all packages.

What lives where?

https://github.com/Yoast/YoastSEO.js moved to packages/yoastseo. https://github.com/Yoast/yoast-components moved to packages/yoast-components.

Moving pull requests & branches

These need to be moved manually. For your convenience the yarn transfer-branch command exists. It has 3 arguments:

• Package: Which package to transfer to/from, has the following options:

  • yoastseo
  • yoast-components

• Base branch: Which branch the branch you want to move is based on. It is the base branch in a pull request.

• Branch to move: The branch you want to move.

These arguments are positional. Think yarn transfer-branch [package] [base-branch] [branch-to-move].

After moving the branch connected to a pull request you need to manually recreate the pull request here. That should be a matter of copy & pasting and linking to the original PR for archive purposes.