Extensibility in PWA - My notes.md

Zetlen has made changes that are not publised yet that make extensibility a piece of cake.

It starts with adding a new target in the declare file.

//We are adding an extension point in the venia UI declare file which an extension developer can use to add JSX to the buttons section of the product details page.

buttonActions: new targets.types.AsyncSeriesWaterfall(['actions'])

Next we add logic in the intercept file which will implement this target.

// Get the transformModules target from the buildpack targets.
const { transformModules } = targets.of('@magento/pwa-buildpack');

// Get the Targetables import from buildpack
const { Targetables } = require('@magento/pwa-buildpack');

// Lets use the targets we are getting from the module export function in the intercept file
const targetables = Targetables.using(targets);

// Lets get the product full detail component
const ProductDetail = targetables.reactComponent(
    '@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js'
);

// Here is the implementation of the target. Here we are using the transformModules target of buildpack and adding a new transform that will apple given transformations on the product details component.
transformModules.tap(async addTransform => {
    // We have to enumerate all the interceptions of the buttonActions target and add them to the product details component. We add them to the section tag that has an attribute called data-targetable-id which is set to actions.
    const list = await targets.own.buttonActions.promise([]);
    list.forEach(t =>
        ProductDetail.prependJSX('section data-targetable-id="actions"', t)
    );

    // Get a list of the transformations of the ProductDetail component by using the flush and run the addTransform function on it to add them to the babel transformation queue.
    ProductDetail.flush().forEach(addTransform);
});

At this point we have declared and defined a target. Lets intercept it.

Lets add an intercept in the page builder package to add a new button called Add to List in the product details page.

// In the intercept file of the pagebuilder package, we are adding an intercept on the buttonActions target of venia-ui package. Since this is an AsyncSeriesWaterfall target, we have to take the results of the other intercepts and append to it then button we want to add to the product page.
targets
    .of('@magento/venia-ui')
    .buttonActions.tap(t => [...t, '<Button> Add to List </Button>']);