[FEATURE] Updated all underlying Yoast libraries, added script to fet…

…ch translations and updated all json files, moved all build related files to the Build directory

.gitignore

@@ -6,11 +6,12 @@ grunt/node_modules
 vendor
 composer.lock
 .php-cs-fixer.cache
-yarn.lock
 .Build
 Documentation-GENERATED-temp
 /public
 .phplint.cache
 .cache
 composer.json.testing
-var
+var
+*.map
+plugin.css

Build/resources/.nvmrc

@@ -0,0 +1 @@
+18

Build/resources/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [ "@yoast/babel-preset" ],
+};

Resources/Public/JavaScript/Components/Analysis.js → Build/resources/javascript/Components/Analysis.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {connect} from 'react-redux';
 import LoadingIndicator from './LoadingIndicator';
-import YoastContentAnalysis from 'yoast-components/composites/Plugin/ContentAnalysis/components/ContentAnalysis';
+import YoastContentAnalysis from '@yoast/analysis-report/ContentAnalysis';
 import {mapResults} from "../helpers/mapResults";
 import getResult from '../helpers/getResult';
 

Resources/Public/JavaScript/Components/DescriptionProgressBar.js → Build/resources/javascript/Components/DescriptionProgressBar.js

@@ -1,8 +1,8 @@
 import React, {useEffect, useState} from 'react';
 import {connect} from 'react-redux';
-import ProgressBar from '@yoast/components/ProgressBar';
+import { ProgressBar } from '@yoast/components';
 import getProgressColor from '../helpers/progressColor';
-import MetaDescriptionLengthAssessment from 'yoastseo/src/assessments/seo/MetaDescriptionLengthAssessment';
+import { assessments } from 'yoastseo';
 
 /**
  * Gets the description progress.
@@ -19,7 +19,7 @@ const getDescriptionProgress = (description, date) => {
     if (date !== "" && descriptionLength > 0) {
         descriptionLength += date.length + 3;
     }
-    const metaDescriptionLengthAssessment = new MetaDescriptionLengthAssessment();
+    const metaDescriptionLengthAssessment = new assessments.seo.MetaDescriptionLengthAssessment();
     const score = metaDescriptionLengthAssessment.calculateScore(descriptionLength);
     const maximumLength = metaDescriptionLengthAssessment.getMaximumLength();
 
@@ -48,8 +48,7 @@ const DescriptionProgressBar = ({description = '', date = ''}) => {
     }, [description]);
 
     if (descriptionProgress.progress !== null) {
-        return <ProgressBar max={descriptionProgress.progress.max} value={descriptionProgress.progress.actual}
-                            progressColor={getProgressColor(descriptionProgress.progress.score)} />
+        return <ProgressBar min={0} max={descriptionProgress.progress.max} value={descriptionProgress.progress.actual} progressColor={getProgressColor(descriptionProgress.progress.score)} />
     }
     return <></>
 }

Resources/Public/JavaScript/Components/SnippetPreview.js → Build/resources/javascript/Components/SnippetPreview.js

@@ -2,9 +2,9 @@ import React, {useState} from 'react';
 import { connect } from 'react-redux';
 import LoadingIndicator from './LoadingIndicator';
 import SnippetPreviewError from './SnippetPreviewError';
-import YoastSnippetPreview from '@yoast/search-metadata-previews/snippet-preview/SnippetPreview';
+import { SnippetPreview as YoastSnippetPreview } from '@yoast/search-metadata-previews';
 import ModeSwitcher from './ModeSwitcher';
-import {DEFAULT_MODE} from '@yoast/search-metadata-previews/snippet-preview/constants';
+import {DEFAULT_MODE} from '@yoast/search-metadata-previews/build/snippet-preview/constants';
 
 const SnippetPreview = ({isFetching, title, url, faviconSrc, wordsToHighlight, description, locale}) => {
     const [mode, setMode] = useState(DEFAULT_MODE);
@@ -15,7 +15,7 @@ const SnippetPreview = ({isFetching, title, url, faviconSrc, wordsToHighlight, d
         }
         return <>
             <ModeSwitcher onChange={(newMode) => setMode(newMode)} active={mode}/>
-            <YoastSnippetPreview title={title} url={url} description={description} faviconSrc={faviconSrc} wordsToHighlight={wordsToHighlight} locale={locale} mode={mode} onMouseUp={() => {}} />
+            <YoastSnippetPreview siteName="" title={title} url={url} description={description} faviconSrc={faviconSrc} wordsToHighlight={wordsToHighlight} locale={locale} mode={mode} onMouseUp={() => {}} />
         </>
     }
     return <LoadingIndicator />

Resources/Public/JavaScript/Components/StatusIcon.js → Build/resources/javascript/Components/StatusIcon.js

@@ -1,27 +1,27 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import SvgIcon from '@yoast/components/SvgIcon'
+import { SvgIcon } from '@yoast/components';
 
-import { getIconForScore, getTextForScore } from "../helpers/mapResults";
-import { helpers } from "yoastseo";
+import {getIconForScore, getTextForScore, getTypeLabelForScore} from "../helpers/mapResults";
+import { interpreters } from "yoastseo";
 import getResult from "../helpers/getResult";
 
 const StatusIcon = ({content, analysis, resultType, resultSubtype, text}) => {
-    const { scoreToRating } = helpers;
+    const { scoreToRating } = interpreters;
 
     if (content.isFetching === false && analysis.isAnalyzing === false && getResult(analysis, resultType, resultSubtype)) {
         let score = getResult(analysis, resultType, resultSubtype).score / 10;
         let iconForScore = getIconForScore(scoreToRating(score));
 
         return <>
             <SvgIcon icon={iconForScore.icon} color={iconForScore.color} />{' '}
-            {text === 'true' ? getTextForScore(resultType, scoreToRating(score)) : ''}
+            {text === 'true' ? <><span className={`score-label-${resultType}`}>{getTypeLabelForScore(resultType)}</span> <span>{getTextForScore(scoreToRating(score))}</span></> : ''}
         </>
     } else {
         return <>
             <SvgIcon icon='circle' color='#bebebe' />{' '}
-            {text === 'true' ? getTextForScore(resultType, '') : ''}
+            {text === 'true' ? <span className={`score-label-${resultType}`}>{getTypeLabelForScore(resultType)}</span> : ''}
         </>
     }
 }

Resources/Public/JavaScript/Components/TitleProgressBar.js → Build/resources/javascript/Components/TitleProgressBar.js

@@ -1,13 +1,13 @@
 import React, {useEffect, useState} from 'react';
 import {connect} from 'react-redux';
-import ProgressBar from '@yoast/components/ProgressBar';
+import { ProgressBar } from '@yoast/components';
 import getProgressColor from '../helpers/progressColor';
 import measureTextWidth from '../helpers/measureTextWidth';
-import PageTitleWidthAssessment from 'yoastseo/src/assessments/seo/PageTitleWidthAssessment';
+import { assessments } from 'yoastseo';
 
 const getTitleProgress = (title) => {
     const titleWidth = measureTextWidth(title);
-    const pageTitleWidthAssessment = new PageTitleWidthAssessment();
+    const pageTitleWidthAssessment = new assessments.seo.PageTitleWidthAssessment();
     const score = pageTitleWidthAssessment.calculateScore(titleWidth);
     const maximumLength = pageTitleWidthAssessment.getMaximumLength();
 
@@ -36,7 +36,7 @@ const TitleProgressBar = ({title = ''}) => {
     }, [title]);
 
     if (titleProgress.progress !== null) {
-        return <ProgressBar max={titleProgress.progress.max} value={titleProgress.progress.actual}
+        return <ProgressBar min={0} max={titleProgress.progress.max} value={titleProgress.progress.actual}
                             progressColor={getProgressColor(titleProgress.progress.score)} />
     }
     return <></>

Resources/Public/JavaScript/analysis/createAnalysisWorker.js → Build/resources/javascript/analysis/createAnalysisWorker.js

@@ -10,7 +10,8 @@ export default function createAnalysisWorker(useCornerstone, locale) {
         useKeywordDistribution: true,
         useCornerstone: useCornerstone,
         logLevel: "ERROR",
-        translations: YoastConfig.translations
+        translations: YoastConfig.translations,
+        defaultQueryParams: null
     });
 
     return worker;

Resources/Public/JavaScript/helpers/mapResults.js → Build/resources/javascript/helpers/mapResults.js

@@ -1,7 +1,8 @@
-import { helpers } from "yoastseo";
+import { interpreters } from "yoastseo";
 import { default as colors } from "../colors.json";
+import { __ } from "@wordpress/i18n";
 
-const { scoreToRating } = helpers;
+const { scoreToRating } = interpreters;
 
 /**
  * Mapped result definition.
@@ -111,36 +112,46 @@ export function getIconForScore( score ) {
 }
 
 /**
- * @param {string} type
  * @param {string} score
  *
  * @returns {string}
  */
-export function getTextForScore( type, score ) {
+export function getTextForScore( score ) {
     let scoreText = '-';
-    let scoreLabel = '';
 
-    switch (type) {
-        case "readability":
-            scoreLabel = YoastConfig.labels.readability;
-            break;
-        case "seo":
-            scoreLabel = YoastConfig.labels.seo;
-            break;
-    }
     switch ( score ) {
         case "good":
-            scoreText = YoastConfig.labels.good;
+            scoreText = __( "Good", "wordpress-seo" );
             break;
         case "ok":
-            scoreText = YoastConfig.labels.ok;
+            scoreText = __( "OK", "wordpress-seo" );
             break;
         case "bad":
-            scoreText = YoastConfig.labels.bad;
+            scoreText = __( "Needs improvement", "wordpress-seo" );
+            break;
+    }
+
+    return scoreText;
+}
+
+/**
+ * @param {string} type
+ *
+ * @returns {string}
+ */
+export function getTypeLabelForScore( type ) {
+    let scoreLabel = '';
+
+    switch (type) {
+        case "readability":
+            scoreLabel = __( "Readability analysis:", "wordpress-seo" );
+            break;
+        case "seo":
+            scoreLabel = __( "SEO analysis:", "wordpress-seo" );
             break;
     }
 
-    return scoreLabel + ': ' + scoreText;
+    return scoreLabel;
 }
 
 /**

Resources/Public/JavaScript/helpers/measureTextWidth.js → Build/resources/javascript/helpers/measureTextWidth.js

@@ -34,6 +34,6 @@ export default function measureTextWidth( text ) {
     if ( ! element ) {
         element = createMeasurementElement();
     }
-    element.innerHTML = text;
+    element.innerText = text;
     return element.offsetWidth;
 }

Build/resources/javascript/packages/combine-reducers/index.js

@@ -0,0 +1,3 @@
+import { combineReducers } from 'redux';
+
+export default combineReducers;

Build/resources/javascript/packages/combine-reducers/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "combine-reducers",
+  "version": "1.0.0",
+  "description": "Combine reducers for CSP",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

Resources/Public/JavaScript/plugin.js → Build/resources/javascript/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {Provider} from 'react-redux';
 import {debounce} from 'lodash';
 
@@ -49,6 +49,17 @@ let YoastTypo3 = {
         YoastTypo3._yoastWorker = createAnalysisWorker(cornerstone, locale);
     },
 
+    setLocales: function () {
+        setLocaleData({'': {'yoast-components': {}}}, 'yoast-components');
+        if (YoastConfig.translations) {
+            for (let translation of YoastConfig.translations) {
+                setLocaleData(translation.locale_data['wordpress-seo'], translation.domain);
+            }
+        } else {
+            setLocaleData({'': {'wordpress-seo': {}}}, 'wordpress-seo');
+        }
+    },
+
     postRequest: (url, data) => {
         return fetch(url, {
             method: 'POST',
@@ -64,7 +75,7 @@ let YoastTypo3 = {
 let YoastPlugin = {
     init: () => {
         YoastTypo3.setWorker(YoastConfig.isCornerstoneContent);
-        setLocaleData({'': {'yoast-components': {}}}, 'yoast-components');
+        YoastTypo3.setLocales();
 
         store.dispatch(setFocusKeyword(YoastConfig.focusKeyphrase.keyword));
         store.dispatch(setFocusKeywordSynonyms(YoastConfig.focusKeyphrase.synonyms));
@@ -97,7 +108,8 @@ let YoastPlugin = {
                         config.resultSubtype = container.getAttribute('data-yoast-subtype');
                     }
 
-                    ReactDOM.render(<Provider store={store}><Analysis {...config} /></Provider>, container);
+                    const root = createRoot(container);
+                    root.render(<Provider store={store}><Analysis {...config} /></Provider>);
                 });
                 store.dispatch(saveRelevantWords(store.getState().relevantWords, YoastConfig.data.uid, YoastConfig.data.pid, YoastConfig.data.languageId, YoastConfig.data.table, YoastConfig.urls.prominentWords));
             });
@@ -133,7 +145,8 @@ let YoastPlugin = {
                 config.resultSubtype = container.getAttribute('data-yoast-subtype');
             }
 
-            ReactDOM.render(<Provider store={store}><StatusIcon {...config} text="false" /></Provider>, iconContainer);
+            const iconRoot = createRoot(iconContainer);
+            iconRoot.render(<Provider store={store}><StatusIcon {...config} text="false" /></Provider>);
         });
     },
 
@@ -147,14 +160,16 @@ let YoastPlugin = {
             configSeo.resultType = 'seo';
             configSeo.resultSubtype = '';
 
+            const seoScoreContainer = createRoot(container);
+
             if (type === 'readability') {
-                ReactDOM.render(<Provider store={store}><StatusIcon {...configReadability}
-                                                                    text="true" /></Provider>, container);
+                seoScoreContainer.render(<Provider store={store}><StatusIcon {...configReadability}
+                                                                    text="true" /></Provider>);
             }
 
             if (type === 'seo') {
-                ReactDOM.render(<Provider store={store}><StatusIcon {...configSeo}
-                                                                    text="true" /></Provider>, container);
+                seoScoreContainer.render(<Provider store={store}><StatusIcon {...configSeo}
+                                                                    text="true" /></Provider>);
             }
         });
     },
@@ -189,19 +204,23 @@ let YoastPlugin = {
 
             container.parentNode.insertBefore(scoreBar, container.nextSibling);
 
-            ReactDOM.render(<Provider store={store}><StatusIcon {...configReadability}
-                                                                text="true" /></Provider>, readabilityContainer);
-            ReactDOM.render(<Provider store={store}><StatusIcon {...configSeo} text="true" /></Provider>, seoContainer);
+            const readabilityRoot = createRoot(readabilityContainer);
+            readabilityRoot.render(<Provider store={store}><StatusIcon {...configReadability}
+                                                                text="true" /></Provider>);
+            const seoRoot = createRoot(seoContainer);
+            seoRoot.render(<Provider store={store}><StatusIcon {...configSeo} text="true" /></Provider>);
         });
     },
 
     initSnippetPreviewAndInsights: () => {
         document.querySelectorAll('[data-yoast-snippetpreview]').forEach(container => {
-            ReactDOM.render(<Provider store={store}><SnippetPreview /></Provider>, container);
+            const snippetRoot = createRoot(container);
+            snippetRoot.render(<Provider store={store}><SnippetPreview /></Provider>);
         });
 
         document.querySelectorAll('[data-yoast-insights]').forEach(container => {
-            ReactDOM.render(<Provider store={store}><Insights /></Provider>, container);
+            const insightsRoot = createRoot(container);
+            insightsRoot.render(<Provider store={store}><Insights /></Provider>);
         });
     },
 
@@ -257,7 +276,8 @@ let YoastPlugin = {
                     YoastPlugin.refreshAnalysis();
                 });
 
-                ReactDOM.render(<Provider store={store}>{item.component}</Provider>, container);
+                const progressBarRoot = createRoot(container);
+                progressBarRoot.render(<Provider store={store}>{item.component}</Provider>);
             }
         });
     },
@@ -316,7 +336,8 @@ let YoastPlugin = {
                         config.resultSubtype = container.getAttribute('data-yoast-subtype');
                     }
 
-                    ReactDOM.render(<Provider store={store}><Analysis {...config} /></Provider>, container);
+                    const relatedRoot = createRoot(container);
+                    relatedRoot.render(<Provider store={store}><Analysis {...config} /></Provider>);
                 });
             }, 2000));
         });
@@ -433,7 +454,8 @@ let YoastLinkingSuggestions = {
         YoastTypo3.setWorker(false, YoastConfig.linkingSuggestions.locale);
 
         document.querySelectorAll('[data-yoast-linking-suggestions]').forEach(container => {
-            ReactDOM.render(<Provider store={store}><LinkingSuggestions /></Provider>, container);
+            const linkingSuggestionsRoot = createRoot(container);
+            linkingSuggestionsRoot.render(<Provider store={store}><LinkingSuggestions /></Provider>);
         });
 
         YoastLinkingSuggestions._updateInterval = setInterval(() => {
@@ -591,7 +613,7 @@ let YoastCrawler = {
             description: response.description,
             locale: response.locale
         });
-        return YoastTypo3._yoastWorker.runResearch('prominentWordsForInternalLinking', paper)
+        return YoastTypo3._yoastWorker.runResearch('getProminentWordsForInternalLinking', paper)
             .then(async (results) => {
                 await YoastCrawler.saveRelevantWords(page, language, results);
             });