PageModel.GetXpmMarkup() should be split XPM page markup and the script

[jhorsman]

Sdl.Web.Common.Models.PageModel.GetXpmMarkup() has too many responsibilities. It should be split into three public methods:

• GetXpmPageMarkup()
• GetXpmScriptMarkup()
• GetXpmScriptUrl()

This is because the XPM page markup i.e. <!-- Page Settings: {"PageID":"tcm:59-758-64","PageModified":"2017-04-25T14:18:34","PageTemplateID":"tcm:59-585-128","PageTemplateModified":"2017-08-23T10:09:38"} --> and the script i.e. <script type="text/javascript" language="javascript" defer="defer" src="https://dev/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" id="tridion.siteedit"></script> are two distinct things.

HtmlHelperExtensions.DxaPageMarkup() should separately call page.GetXpmPageMarkup() and page.GetXpmScriptMarkup() to render both.

GetXpmScriptMarkup() will in turn call GetXpmScriptUrl() to get the URL.

By making those changes an implementor can extend the way the Page Markup and the script markup is rendered on the page. This is useful when for example delay loading the XPM initialization.

[rpannekoek]

Can you elaborate on the use cases for customizing the XPM markup? Given your proposed design, it seems you have several use cases in mind. Would it be an option to let PageModel.GetXpmMarkup() call GetXpmScriptMarkup(), which calls GetXpmScriptUrl() in turn (and let DxaPageMarkup() only call PageModel.GetXpmMarkup()) ?

[jhorsman]

A customization I am working now is to delay loading the XPM script.

Usually the XPM script loads after the page is parsed using <script type="text/javascript" language="javascript" defer="defer" src="https://server/WebUI/Editors/SiteEdit/Views/Bootstrap/Bootstrap.aspx?mode=js" id="tridion.siteedit"></script>. We are using Vue (a frontend scripting framework) to render some views on the frontend. To make sure that XPM components and fields which are inside those Vue views are rendered correctly, we load the XPM script when Vue has rendered all Vue components and the mounted() hook is called.

The XPM page metadata (the XPM HTML comments) can be loaded like usual, but the XPM JavaScript script cannot be loaded with the <script> tag outputted by GetXpmMarkup(). For now I have a custom view helper which renders just the XPM page metadata. A PageModel extension provides the XPM script URL which is passed to the Vue configuration.

[jhorsman]

@rpannekoek: about the DxaPageMarkup() and other methods. Why not separate the XPM page metadata and the script tag? They do not have to be rendered by the same helper method because they are separate things. The XPM page metadata is similar to the XPM component metadata, it is fine to leave it to the page view or the _Layout view. The XPM script tag could be loaded elsewhere, depending on the implementation.

• The XPM page markup will be generated by the DxaPageMarkup() helper, calling PageModel.GetXpmMarkup()
• The XPM script markup will be generated by the DxaScriptMarkup() helper, calling PageModel.GetXpmScriptMarkup(), which calls PageModel.GetXpmScriptUrl()

[tommyturkijevic]

Has there been any resolution to this issue/suggestion or is this fixed in DXA 2.0 or will it be in DXA 2.1 ?