BUGFIX: Create worker url server side

This is to prevent issues with custom static resource url generation in some projects

Author: Sebobo

Classes/Controller/DataController.php

@@ -18,6 +18,7 @@
 use Neos\Flow\Annotations as Flow;
 use Neos\Flow\Mvc\Controller\ActionController;
 use Neos\Flow\Mvc\View\JsonView;
+use Neos\Flow\ResourceManagement\ResourceManager;
 use Neos\Neos\Service\UserService;
 
 class DataController extends ActionController
@@ -63,6 +64,12 @@ class DataController extends ActionController
      */
     protected $translationCache;
 
+    /**
+     * @Flow\Inject
+     * @var ResourceManager
+     */
+    protected $resourceManager;
+
     /**
      * Returns json data containing the Yoast SEO translations for the current users backend language
      *
@@ -97,6 +104,13 @@ public function fetchTranslationsAction(): void
         }
     }
 
+    public function fetchConfigurationAction(): void
+    {
+        $this->view->assign('value', [
+            'workerUrl' => $this->resourceManager->getPublicPackageResourceUriByPath('resource://Yoast.YoastSeoForNeos/Public/Assets/webWorker.js'),
+        ]);
+    }
+
     /**
      * Returns a locale based on the given interface language
      *

Resources/Private/Scripts/neos-ui-plugin/src/YoastInfoView.js

@@ -36,17 +36,21 @@ const iconRatingMapping = {
     good: 'smile',
 };
 
+const WORKER_FALLBACK_URL = '/_Resources/Static/Packages/Yoast.YoastSeoForNeos/Assets/webWorker.js';
+
 @connect(
     (state) => ({
         focusedNodeContextPath: selectors.CR.Nodes.focusedNodePathSelector(state),
         getNodeByContextPath: selectors.CR.Nodes.nodeByContextPath(state),
         worker: yoastSelectors.worker(state),
         translations: yoastSelectors.translations(state),
+        configuration: yoastSelectors.configuration(state),
         analysis: yoastSelectors.analysis(state),
     }),
     {
         setWorker: yoastActions.setWorker,
         setTranslations: yoastActions.setTranslations,
+        setConfiguration: yoastActions.setConfiguration,
         setAnalysis: yoastActions.setAnalysis,
     }
 )
@@ -66,6 +70,7 @@ export default class YoastInfoView extends PureComponent {
     static propTypes = {
         worker: PropTypes.object,
         translations: PropTypes.object,
+        configuration: PropTypes.object,
         analysis: PropTypes.object,
         canvasSrc: PropTypes.string,
         contextPath: PropTypes.string,
@@ -74,18 +79,14 @@ export default class YoastInfoView extends PureComponent {
         focusedNodeContextPath: PropTypes.string,
         getNodeByContextPath: PropTypes.func.isRequired,
         setTranslations: PropTypes.func.isRequired,
+        setConfiguration: PropTypes.func.isRequired,
         setWorker: PropTypes.func.isRequired,
         setAnalysis: PropTypes.func.isRequired,
-        workerUrl: PropTypes.string,
         options: PropTypes.shape({
             defaultEditPreviewMode: PropTypes.string,
         }),
     };
 
-    static defaultProps = {
-        workerUrl: '/_Resources/Static/Packages/Yoast.YoastSeoForNeos/Assets/webWorker.js', // TODO: Resolve path via Neos api
-    };
-
     constructor(props) {
         super(props);
         const { documentNodePath, getNodeByContextPath } = this.props;
@@ -102,12 +103,13 @@ export default class YoastInfoView extends PureComponent {
                 isAnalyzing: false,
                 locale: 'en_US',
             },
-            i18n: {},
+            i18n: {}
         };
     }
 
     componentDidMount() {
         this.fetchTranslations();
+        this.fetchConfiguration();
 
         // Check if we can reuse that last analysis that ran if we are on the same page
         const { analysis } = this.props;
@@ -141,6 +143,35 @@ export default class YoastInfoView extends PureComponent {
         );
     };
 
+    fetchConfiguration = () => {
+        if (this.props.configuration) {
+            return;
+        }
+
+        fetchWithErrorHandling
+            .withCsrfToken((csrfToken) => ({
+                url: '/neosyoastseo/data/fetchConfiguration',
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'X-Flow-Csrftoken': csrfToken,
+                    'Content-Type': 'application/json',
+                },
+            }))
+            .then((response) => response && response.json())
+            .then((configuration) => {
+                if (configuration && !configuration.error) {
+                    this.props.setConfiguration(configuration);
+                }
+            })
+            .catch(() => {
+                console.error('[Yoast SEO] Error fetching configuration - applying defaults');
+                this.props.setConfiguration({
+                    workerUrl: WORKER_FALLBACK_URL,
+                });
+            });
+    }
+
     /**
      * Fetch new translations from the backend.
      */
@@ -260,7 +291,7 @@ export default class YoastInfoView extends PureComponent {
     initializeWorker = () => {
         let { worker } = this.props;
         if (!worker) {
-            worker = new AnalysisWorkerWrapper(createWorker(this.props.workerUrl));
+            worker = new AnalysisWorkerWrapper(createWorker(this.props.configuration.workerUrl));
             this.props.setWorker(worker);
         }
         return worker.initialize({

Resources/Private/Scripts/neos-ui-plugin/src/actions/index.js

@@ -3,6 +3,7 @@ import {createAction} from 'redux-actions';
 
 export const defaultState = {
     translations: null,
+    configuration: null,
     worker: null,
     analysis: {
         seo: {
@@ -16,16 +17,19 @@ export const defaultState = {
 
 export const actionTypes = {
     SET_TRANSLATIONS: 'SET_TRANSLATIONS',
+    SET_CONFIGURATION: 'SET_CONFIGURATION',
     SET_WORKER: 'SET_WORKER',
     SET_ANALYSIS: 'SET_ANALYSIS'
 };
 
 const setTranslations = createAction(actionTypes.SET_TRANSLATIONS);
+const setConfiguration = createAction(actionTypes.SET_CONFIGURATION);
 const setWorker = createAction(actionTypes.SET_WORKER);
 const setAnalysis = createAction(actionTypes.SET_ANALYSIS);
 
 export const actions = {
     setTranslations,
+    setConfiguration,
     setWorker,
     setAnalysis
 };
@@ -45,6 +49,10 @@ export const reducer = (state = defaultState, action) => produce(state, draft =>
             draft.plugins.yoastInfoView.translations = action.payload;
             break;
         }
+        case actionTypes.SET_CONFIGURATION: {
+            draft.plugins.yoastInfoView.configuration = action.payload;
+            break;
+        }
         case actionTypes.SET_WORKER: {
             draft.plugins.yoastInfoView.worker = action.payload;
             break;
@@ -60,6 +68,7 @@ export const reducer = (state = defaultState, action) => produce(state, draft =>
 
 export const selectors = {
     translations: state => (((state || {}).plugins || {}).yoastInfoView || {}).translations,
+    configuration: state => (((state || {}).plugins || {}).yoastInfoView || {}).configuration,
     worker: state => (((state || {}).plugins || {}).yoastInfoView || {}).worker,
     analysis: state => (((state || {}).plugins || {}).yoastInfoView || {}).analysis
 };