Edit in GitHubLog an issue

Peregrine targets

Peregrine targets provide access to the custom React hooks and talons used in UI components.

Accessing the Peregrine targets#

Access these targets in your intercept files by calling targets.of('@magento/peregrine') on the TargetProvider object.

Copied to your clipboard
1/* my-custom-interceptors.js */
2module.exports = (targets) => {
3 const peregrineTargets = targets.of("@magento/peregrine");
4};

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

Wrapper modules#

You can extend the functionality of Peregrine's custom hooks and talons by applying wrapper modules.

The talon.wrapWith(module) method is simlar to the interceptor pattern used in Magento backend plugins. Peregrine will dynamically inject the code from the passed module "around" the implementation of a talon, by passing the talon function through the wrapper function before exporting it.

See the Modify talon results tutorial for step-by-step instructions on working with wrapper modules.

Requirements#

Wrapper modules for Peregrine must:

  • be implemented in a separate file from the build-time Target code
  • be accessible in frontend code via an import
  • be a valid ES Module
  • export one default function that implements the same interface, i.e. it receives the original talon function as its parameter and must return a new talon function

Extensions which use wrapper modules must also intercept the Buildpack specialFeatures target and set the feature flag esModule: true.

Members

hooks : tapable.AsyncSeriesHook

Provides access to Peregrine React hooks.

This target collects requests to intercept and "wrap" individual Peregrine hooks in decorator functions.

Use this target to run custom code whenever the application calls a Peregrine hook. You can also use this target to modify the behavior or output returned by a hook.

talons : tapable.AsyncSeriesHook

Provides access to Peregrine talon wrappers.

This target collects requests to intercept and "wrap" individual Peregrine talons in decorator functions.

Use this target to run custom code whenever the application calls a Peregrine talon. You can also use this target to modify the behavior or output returned by a talon.

Typedefs

hookInterceptFunction : function

Intercept function signature for the talons and hooks targets.

Interceptors of hooks should call wrapWith on the individual hooks in the provided HookInterceptorSet object.

Provides access to Peregrine React hooks.

This target collects requests to intercept and "wrap" individual Peregrine hooks in decorator functions.

Use this target to run custom code whenever the application calls a Peregrine hook. You can also use this target to modify the behavior or output returned by a hook.

See: Intercept function signature
Example (Access the tapable object)

Copied to your clipboard
1const peregrineTargets = targets.of('@magento/peregrine');
2const hooksTarget = peregrineTargets.hooks;

Example (Wrap the `useAwaitQuery()` hook with a logging extension)

Copied to your clipboard
1
2hooksTargets.tap( => {
3 hook.useAwaitQuery.wrapWith('@my-extensions/log-wrapper');
4})

Provides access to Peregrine talon wrappers.

This target collects requests to intercept and "wrap" individual Peregrine talons in decorator functions.

Use this target to run custom code whenever the application calls a Peregrine talon. You can also use this target to modify the behavior or output returned by a talon.

See: Intercept function signature
Example (Access the tapable object)

Copied to your clipboard
1const peregrineTargets = targets.of('@magento/peregrine');
2const talonsTarget = peregrineTargets.talons;

Example (Wrap the `useApp()` hook with a logging extension)

Copied to your clipboard
1
2talonsTarget.tap(talons => {
3 talons.App.useApp.wrapWith('@my-extensions/log-wrapper');
4})

Intercept function signature for the talons and hooks targets.

Interceptors of hooks should call wrapWith on the individual hooks in the provided HookInterceptorSet object.

Parameters

NameTypeDescription
hookInterceptorsHookInterceptorSetRegistry of wrappable hook namespaces

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

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.