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.

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

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)

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

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

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

hooksTargets.tap( => {
  hook.useAwaitQuery.wrapWith('@my-extensions/log-wrapper');
})

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)

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

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

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

talonsTarget.tap(talons => {
  talons.App.useApp.wrapWith('@my-extensions/log-wrapper');
})

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

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

Last updated 9/13/2023

Was this helpful?

Yes

No