Venia UI Extensibility Targets

This page lists the Targets declared in the Venia UI package. Access these in your intercept files by calling targets.of('@magento/venia-ui') on the TargetProvider object.

/* my-custom-interceptors.js */

module.exports = targets => {
    const veniaTargets = targets.of('@magento/venia-ui')
}

See the PWA Studio Target Experiments project repository for documented examples of extensions that use PWA Studio’s extensibility framework.

Members

richContentRenderers : tapable.SyncHook

Provides access to the list of rendering strategies used by the RichContent component.

This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia's RichContent component uses to try and render a block of "rich" content, such as HTML.

Use this target if your backend system uses a customized content storage format instead of plain HTML in "rich content" fields such as product descriptions and CMS blocks.

routes : tapable.AsyncSeriesWaterfall

Provides access to Venia's routing table.

This target lets you add new routes to your storefronts. You can also modify Venia's existing client-side routes, such as cart or checkout URLs.

NOTE: This target does not include routes controlled by the Magento admin, such as CMS or catalog URLs.

checkoutPagePaymentTypes : tapable.SyncHook

Provides access to Venia's checkout page payment methods

This target lets you add new checkout page payment to your storefronts.

savedPaymentTypes : tapable.SyncHook

Provides access to Venia's saved payment methods

This target lets you add new saved payment method to your storefronts.

Typedefs

rendererInterceptFunction : function

Intercept function signature for the richContentRenderers target.

Interceptors of richContentRenderers should call .add on the provided renderer list.

routesInterceptFunction ⇒ Array.<RouteDefinition>

Intercept function signature for the routes target.

Interceptors of routes receive an array of RouteDefinition objects, which Venia will use to generate React Router <Route /> in the final bundle.

Interceptors must return an array of RouteDefinitions, either by mutating and then returning the array they received, or by returning a new array of RouteDefinitions.

RouteDefinition : Object

A route definition object that describes a route in your storefront.

paymentInterceptFunction : function

Intercept function signature for the checkoutPagePaymentTypes target.

Interceptors of checkoutPagePaymentTypes should call .add on the provided payment list.

CheckoutPaymentDefinition : Object

A payment definition object that describes a checkout page payment in your storefront.

savedPaymentInterceptFunction : function

Intercept function signature for the savedPaymentTypes target.

Interceptors of savedPaymentTypes should call .add on the provided payment list.

SavedPaymentDefinition : Object

A payment definition object that describes a saved payment in your storefront.

Interfaces

RichContentRenderer : Object

Rich content renderers for the RichContent component must implement this interface. Should be written as an ES Module—a module that exports functions with these names, rather than an object with these functions as properties.

RichContentRenderer : Object

Rich content renderers for the RichContent component must implement this interface. Should be written as an ES Module—a module that exports functions with these names, rather than an object with these functions as properties.

Kind: global interface
Properties

Example (A renderer that can render any content containing the string "honk")

import React from 'react';
import PlainHtmlRenderer from '@magento/venia-ui/components/richContent/plainHtmlRenderer';

function GooseRenderer(props) {
  const html = props.html.replace(/honk/gim, '<strong>HONK!🦢</strong>');
  return <PlainHtmlRenderer html={html} />;
}
export const Component = GooseRenderer;

export function canRender(content) {
  return /honk/gim.test(content);
}

richContentRenderers : tapable.SyncHook

Provides access to the list of rendering strategies used by the RichContent component.

This target collects a list of RichContentRenderer modules. It builds an array of these renderers, which Venia’s RichContent component uses to try and render a block of “rich” content, such as HTML.

Use this target if your backend system uses a customized content storage format instead of plain HTML in “rich content” fields such as product descriptions and CMS blocks.

Kind: global variable
See

• Intercept function signature
• RichContentRendererList
• RichContentRenderer

Example (Add a renderer)

targets.of('@magento/venia-ui').richContentRenderers.tap(
  renderers => renderers.add({
    componentName: 'AdobeXM',
    importPath: '@adobe/xm-components/xm-renderer'
  })
);

routes : tapable.AsyncSeriesWaterfall

Provides access to Venia’s routing table.

This target lets you add new routes to your storefronts. You can also modify Venia’s existing client-side routes, such as cart or checkout URLs.

NOTE: This target does not include routes controlled by the Magento admin, such as CMS or catalog URLs.

Kind: global variable
See

• Intercept function signature
• Route definition object

Example (Add a custom route for a blog module)

const veniaTargets = targets.of('@magento/venia-ui')
const routes = veniaTargets.routes
routes.tap(
  routesArray => {
     routesArray.push({
         name: 'Blog',
         pattern: '/blog/:slug/:id',
         path: '@partner/pwa-studio-blog'
     });
     return routesArray;
  })

checkoutPagePaymentTypes : tapable.SyncHook

Provides access to Venia’s checkout page payment methods

This target lets you add new checkout page payment to your storefronts.

Kind: global variable
See

• Intercept function signature
• CheckoutPaymentTypes
• CheckoutPayment definition object

Example (Add a payment)

targets.of('@magento/venia-ui').checkoutPagePaymentTypes.tap(
  checkoutPagePaymentTypes => checkoutPagePaymentTypes.add({
    paymentCode: 'braintree',
    importPath: '@magento/braintree_payment'
  })
);

savedPaymentTypes : tapable.SyncHook

Provides access to Venia’s saved payment methods

This target lets you add new saved payment method to your storefronts.

Kind: global variable
See

• Intercept function signature
• SavedPaymentTypes
• SavedPayment definition object

Example (Add a payment)

targets.of('@magento/venia-ui').savedPaymentTypes.tap(
  savedPaymentTypes => savedPaymentTypes.add({
    paymentCode: 'braintree',
    importPath: '@magento/braintree_payment'
  })
);

rendererInterceptFunction : function

Intercept function signature for the richContentRenderers target.

Interceptors of richContentRenderers should call .add on the provided renderer list.

Kind: global typedef

routesInterceptFunction ⇒ Array.<RouteDefinition>

Intercept function signature for the routes target.

Interceptors of routes receive an array of RouteDefinition objects, which Venia will use to generate React Router <Route /> in the final bundle.

Interceptors must return an array of RouteDefinitions, either by mutating and then returning the array they received, or by returning a new array of RouteDefinitions.

Kind: global typedef
Returns: Array.<RouteDefinition> - Your function must return the modified array, or a new array you have constructed

Example

const intercept = routesArray => {
     return [
       { name: 'Backstop', pattern: '*', path: '@my-components/backstop' },
       ...routesArray
     ]
}

RouteDefinition : Object

A route definition object that describes a route in your storefront.

Kind: global typedef
Properties

Example (A custom route with a URL parameter)

const myCustomRoute = {
     name: 'MyRoute',
     pattern: '/my-route/:myRouteParam',
     path: '@my-components/my-route-component'
}

paymentInterceptFunction : function

Intercept function signature for the checkoutPagePaymentTypes target.

Interceptors of checkoutPagePaymentTypes should call .add on the provided payment list.

Kind: global typedef

CheckoutPaymentDefinition : Object

A payment definition object that describes a checkout page payment in your storefront.

Kind: global typedef
Properties

Example (A custom payment method)

const myCustomPayment = {
     paymentCode: 'cc',
    importPath: '@partner/module/path_to_your_component'
}

savedPaymentInterceptFunction : function

Intercept function signature for the savedPaymentTypes target.

Interceptors of savedPaymentTypes should call .add on the provided payment list.

Kind: global typedef

SavedPaymentDefinition : Object

A payment definition object that describes a saved payment in your storefront.

Kind: global typedef
Properties

Example (A custom payment method)

const myCustomPayment = {
     paymentCode: 'cc',
     importPath: '@partner/module/path_to_your_component'
}

For implementation details View Source.

RichContentRendererList

Implementation of our ‘richContentRenderers’ target. This will gather RichContentRenderer declarations { importPath, componentName } from all interceptors, and then tap builtins.transformModules to inject a module transform into the build which is configured to generate an array of modules to be imported and then exported.

An instance of this class is made available when you use VeniaUI’s richContentRenderers target.

Kind: global class

richContentRendererList.add(strategy)

Add a rendering strategy to the RichContent component.

Kind: instance method of RichContentRendererList

For implementation details View Source.