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
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);
}
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
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
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
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
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
Param | Type | Description |
---|---|---|
renderers | RichContentRendererList |
The list of renderers registered so far in the build. |
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
Param | Type | Description |
---|---|---|
routes | Array.<RouteDefinition> |
Array of registered routes |
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
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. |
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
Param | Type | Description |
---|---|---|
renderers | CheckoutPaymentTypesDefinition |
The list of payments registered so far in the build. |
CheckoutPaymentDefinition : Object
A payment definition object that describes a checkout page payment in your storefront.
Kind: global typedef
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'
}
savedPaymentInterceptFunction : function
Intercept function signature for the savedPaymentTypes
target.
Interceptors of savedPaymentTypes
should call .add
on the provided payment list.
Kind: global typedef
Param | Type | Description |
---|---|---|
renderers | SavedPaymentTypesDefinition |
The list of saved payments registered so far in the build. |
SavedPaymentDefinition : Object
A payment definition object that describes a saved payment in your storefront.
Kind: global typedef
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'
}
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.
richContentRendererList.add(strategy)
Add a rendering strategy to the RichContent component.
Kind: instance method of RichContentRendererList
Param | 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. |
For implementation details View Source.