Moving from the Incubator module from Professional Services to the version shipped in the product in 6.2.

You may have used the "headless-renderer" and JS libraries for Angular and React provided as an incubator by the Professional Services Department.

This is not a how-to for how to migrate your project. I just list the major differences here. I think if you look at our shipped demo projects and the documentation, you won't have much trouble. The production libraries are very similar to the incubator ones.

If you do have gotchas or tips, please just share them in this wiki page or as comments.

Biggest differences.

No special extra JAR files are required.
Your JS should reference the new packages published on NPM:
- "@magnolia/react-editor": "1.0.0"
- "@magnolia/angular-editor": "1.0.0"
You now always get the content from a REST delivery endpoint.
- No more loading the content from a window global (window.singlePageConfig.content)
- This is possible as a 'race condition' has been fixed. The SPA calls an mgnlRefresh() method to request the green bars, once it is ready for them.
You now get the template definitions from a new "templateDefinition" endpoint.
- So you'll make one call to a regular 'Delivery endpoint' to get the content for a page, and then with the templateID of the page you'll hit the templateDefinition endpoint to get everything the Page Editor needs to properly build the 'green bars'.
Page Template definitions must specify the exact resources to include (no wildcards), this means that create-react-app projects need to be configured to create the same filenames everytime. (Have a look at the 'deploy' npm script to see how this is done now.)
To get the green bars to draw, or to refresh them if you change the DOM - in your JS code, call "window.parent.mgnlRefresh();"
The libraries work the same in that your components automatically get their content passed into them as 'props'. With these changes:
- React: Everything prefixed with 'jcr', 'mgnl' or '@' is passed in on a 'metadata' prop. All other content comes in directly on props.
- Angular: Everything comes in on a 'content' property.
Environments:
- Nothing crazy here, just good to be aware of.
- React: Have a look at the included '.env' file.
- Angular: Hav a look at the 'angular.json' file and the /src/environments/* files.