Venia targets

This page lists the Targets declared in the Venia UI package.

Accessing the targets

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");
};
Copied to your clipboard
/* 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.

editablePaymentTypes : tapable.SyncHook

Provides access to Venia's editable payment methods

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

summaryPagePaymentTypes : tapable.SyncHook

Provides access to Venia's summary page for a payment method.

This target allows you to add custom payment summary rendering for the summary page in the checkout.

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 either generate a custom <AuthRoute /> component or a React Router <Route /> component in the final bundle based on the authed prop.

The AuthRoute will either return a React Router <Route /> component or a <Redirect /> component depending if the user is signed in and if the route needs authentication or not.

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.

editablePaymentInterceptFunction : function

Intercept function signature for the editablePaymentTypes target.

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

EditablePaymentDefinition : Object

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

rootShimmerInterceptFunction : function

Intercept function signature for the rootShimmerTypes target.

Interceptors of rootShimmerTypes should call .add on the provided shimmer list.

RootShimmerTypesDefinition : Object

A root component shimmer object that can be used during page transitions on 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.

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.

Properties

Name	Type	Description
Component	`React.Component`	The React component that does the actual rendering. It will receive the props passed to the RichContent object, including `html`.
canRender	`function`	Function that receives the content to be rendered as a string, and should return `true` if the `Component` can understand and render that content.

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);
}
Copied to your clipboard
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);
}

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.

See

Example (Add a renderer)

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

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.

See

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;
  })
Copied to your clipboard
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;
  })

Provides access to Venia's checkout page payment methods

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

See

Example (Add a payment)

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

Provides access to Venia's saved payment methods

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

See

Example (Add a payment)

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

Provides access to Venia's editable payment methods

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

See

Example (Add a payment)

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

Provides access to Venia's summary page for a payment method.

This target allows you to add custom payment summary rendering for the summary page in the checkout.

See

Example (Add a payment)

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

Intercept function signature for the richContentRenderers target.

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

Parameters

Name	Type	Description
renderers	`RichContentRendererList`	The list of renderers registered so far in the build.

Intercept function signature for the routes target.

The AuthRoute will either return a React Router <Route /> component or a <Redirect /> component depending if the user is signed in and if the route needs authentication or not.

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.

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

Parameters

Name	Type	Description
routes	`Array.<RouteDefinition>`	Array of registered routes

Example

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

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

Properties

Name	Type	Description
name	`string`	Friendly name for the React component
path	`string`	Resolvable path to the component the Route component will render
pattern	`string`	Route pattern. This is used as the `path` prop for the `<Route/>` component.
[exact]	`boolean`	Tells the router whether it should match the route exactly or not. This property is optional.
[authed]	`boolean`	Uses the custom AuthRoute component if the user needs to be signed in to access the route. This property is optional.
[redirectTo]	`string`	Url will be the redirection url when user are not signed in and are trying to access an authed route. This property is optional. Default is "/".

Example (A custom route with a URL parameter)

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

Intercept function signature for the checkoutPagePaymentTypes target.

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

Parameters

Name	Type	Description
renderers	`CheckoutPaymentTypesDefinition`	The list of payments registered so far in the build.

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

Properties

Name	Type	Description
paymentCode	`string`	is use to map your payment
importPath	`string`	Resolvable path to the component the Route component will render

Example (A custom payment method)

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

Intercept function signature for the savedPaymentTypes target.

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

Parameters

Name	Type	Description
renderers	`SavedPaymentTypesDefinition`	The list of saved payments registered so far in the build.

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

Properties

Name	Type	Description
paymentCode	`string`	is use to map your payment
importPath	`string`	Resolvable path to the component the Route component will render

Example (A custom payment method)

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

Intercept function signature for the editablePaymentTypes target.

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

Parameters

Name	Type	Description
renderers	`EditablePaymentTypesDefinition`	so far in the build.

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

Properties

Name	Type	Description
paymentCode	`string`	is use to map your payment
importPath	`string`	Resolvable path to the component the Route component will render

Example (A custom payment method)

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

Intercept function signature for the rootShimmerTypes target.

Interceptors of rootShimmerTypes should call .add on the provided shimmer list.

Parameters

Name	Type	Description
shimmers	`RootShimmerTypesDefinition`	so far in the build.

A root component shimmer object that can be used during page transitions on your storefront

Properties

Name	Type	Description
shimmerType	`string`	is use to map your page type to the component
importPath	`string`	Resolvable path to the component the Shimmer component will render

Example (A CMS Page Shimmer)

const cmsShimmer = {
     shimmerType: 'CMS_PAGE_SHIMMER',
     importPath: '@partner/module/path_to_your_component'
}
Copied to your clipboard
const cmsShimmer = {
     shimmerType: 'CMS_PAGE_SHIMMER',
     importPath: '@partner/module/path_to_your_component'
}

Source Code: pwa-studio/packages/venia-ui/lib/targets/venia-ui-declare.js

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.

Add a rendering strategy to the RichContent component.

Parameters

Name	Type	Description
strategy	`Object`	Describes the rich content renderer to include
strategy.importPath	`string`	Import path to the RichContentRenderer module. Should be package-absolute.
strategy.componentName	`string`	Name that will be given to the imported renderer in generated code. This is used for debugging purposes.

Source Code: pwa-studio/packages/venia-ui/lib/targets/RichContentRendererList.js

Overview

General components

Last updated 9/13/2023

Was this helpful?

Yes

Venia targets

Accessing the targets.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Accessing the targets