I’m on a project currently where our Tridion templating is done entirely in server-side JavaScript. That’s challenge one.

Challenge two: Get those server-side, JavaScriptified components editable in Experience Manager. Well, turns out, there’s an easy way to do that!

Wait, why would I want server-side-rendered JavaScript templates?

Because that’s how Experience Manager would work!

Whether it’s React, Vue, or Angular, they all come with server-side rendering options. So if you want a client-side framework, you flip it to server-side for Tridion’s preview/staging environments.

More on what this looks like later.

Show me the code

Assuming you’ve got an XpmMetadata property on a JavaScriptified Component (or Entity, if we’re being technical), you can write this function:

function getXpmComponentTag (isXpmEnabled = false, component) {
     const {XpmMetadata} = component;
     let xpmString;

     if (isXpmEnabled && XpmMetadata) {
         xpmString = `<!-- Start Component Presentation: ${JSON.stringify(XpmMetadata)} -->`;
     }
     return xpmString;
};

• Use a default parameter to keep your XPM tags turned off. Have another function look up the state of XPM (optimally from an environment config somewhere).
• Send in the full component object
• Pull out only the XpmMetadata. {XpmMetadata} = component is a destructuring operation; it assigns the value of the left-hand to the value of the property of matching name on the right hand. It’s like writing const XpmMetadata = ('XpmMetadata' in component) ? component['XpmMetadata'] : undefined;
• Check if you’re supposed to be using XPM and if you’ve got XpmMetadata
• If you do, use a template literal and kick out a stringified version (if the data hasn’t been parsed, skip that)
• Return something… hopefully a string!

So, if you’ve got server-side JavaScript, And you’ve got to XPM-ify a component, this one function should make it pretty easy to kick out your component tags.