Feature API - Migration to outputTypeName file format

[matthewroach]

Documented on the Feature API page - https://dev.arcxp.com/pagebuilder-engine/developer-docs/feature-api/
There are two ways to have features set up;

1. /components/features/{featureGroup}/{featureName}.(js|jsx)
2. /components/features/{featureGroup}/{featureName}/{outputTypeName}.(js|jsx)

The primary differences between them is the ability to have a file per output type when you add an additional directory.

If a feature pack has followed the first set up e.g. /components/features/header/default.jsx if we wanted to move to be able to support output type files what would be the best approach to support existing pages and templates?

If we move the 2. set up we are required to move files and PageBuilder isn't able to maintain the reference of the existing component, and we need to go edit every page and template.

[denisemrivera]

Hey @matthewroach!

You can handle this by adding an outputType switch in the file.

Keep your file structure for now as:

/components/features/{featureGroup}/{featureName}.(js|jsx)

Inside {featureName}.(js|jsx), get the outputType from useFusionContext() and use a switch case or if-else statement to handle different output. For example:

if (outputType === 'default') return <BlocksForDefault />;

This approach requires minimal changes.

For a cleaner long-term setup, you could create the new components for each outputType in the separate files under:

/components/features/{featureGroup}/{featureName}/{outputTypeName}.(js|jsx)

Then import them into {featureName}.(js|jsx) as part of the switch. Once you have switched out all the old {featureName}.(js|jsx) with the new {featureName}/{outputTypeName}.(js|jsx) blocks in Editor you can safely remove the old {featureName}.(js|jsx).

During the transition, you’ll briefly have duplicate entries in blocks selection, but that’s temporary and avoids downtime or broken layouts.

[matthewroach]

Thanks for the information @denisemrivera - I should of provided more context as we did try this approach but the outputType from useFusionContext() doesn't work if the outputType file is .js extension.

So if you have the following request http://localhost/homepage?outputType.json and you have a file /components/features/list/default.jsx - the file is never executed as part of the request.

We have a json output type file /output-types/json.js that is to be using for all outputType=json requests - any request through this will not go through the existing .jsx files which means we have to move to the group and name folder structure, but also means we have a migration strategy to plan to update all pages and templates.

The question we are asking; is there no way around the manual migration? and duplicate blocks showing in PageBuilder listing?

[denisemrivera]

I see @matthewroach. My understanding is that with this extension setup, it will require the manual migration but I am confirming and will let you know if there are other ideas.