Edit in GitHubLog an issue

TargetableSet

Classes

TargetableSet

A factory and manager for Targetable instances. This class wraps around a TargetProvider, which identifies it as "your" Targetable and enables automatic interception of targets.

Typedefs

TargetablePublisher : function

Callback function which runs before committing this module's list of requested transforms to the build. Invoked as an intercept to builtins.transformModules, this is the typical time to invoke your own target with your custom API.

A factory and manager for Targetable instances. This class wraps around a TargetProvider, which identifies it as "your" Targetable and enables automatic interception of targets.

Returns: TargetableModule — Returns an instance of TargetableModule.

Parameters

NameTypeDescription
modulePathstringPath to the module file this Targetable represents.
[publisher]TargetablePublisherCallback function to execute when this module is about to commit its requested transforms to a build. If this function is passed, the module will automatically bind to builtins.transformModules.

Returns: TargetableESModule — Returns an instance of TargetableESModule.

Parameters

NameTypeDescription
modulePathstringPath to the module file this Targetable represents.
[publisher]TargetablePublisherCallback function to execute when this module is about to commit its requested transforms to a build. If this function is passed, the module will automatically bind to builtins.transformModules.

Returns: TargetableESModuleArray — Returns an instance of TargetableESModuleArray.

Parameters

NameTypeDescription
modulePathstringPath to the module file this Targetable represents.
[publisher]TargetablePublisherCallback function to execute when this module is about to commit its requested transforms to a build. If this function is passed, the module will automatically bind to builtins.transformModules.

Returns: TargetableESModuleObject — Returns an instance of TargetableESModuleObject.

Parameters

NameTypeDescription
modulePathstringPath to the module file this Targetable represents.
[publisher]TargetablePublisherCallback function to execute when this module is about to commit its requested transforms to a build. If this function is passed, the module will automatically bind to builtins.transformModules.

Returns: TargetableReactComponent — Returns an instance of TargetableReactComponent

Parameters

NameTypeDescription
modulePathstringPath to the module file this Targetable represents.
[publisher]TargetablePublisherCallback function to execute when this module is about to commit its requested transforms to a build. If this function is passed, the module will automatically bind to builtins.transformModules.

Taps the builtin specialFeatures target and sets the supplied feature flags.

Parameters

NameTypeDescription
...Featurestring | Array.<string> | object.<string, boolean>flags to set, as either string arguments, an array of string arguments, or an object of flags.

Tap the builtin envVarDefinitions target to define new environment variables.

Parameters

NameTypeDescription
sectionNamestringHuman-readable name of section. If a section with this name exists already, variables will be added to it instead o a new section being created.
variablesArray.<EnvVarDefinition>List of variables to add.

Creates a new TargetableSet bound to a TargetProvider

Returns: Parameters

NameTypeDescription
targetsTargetProviderTargetProvider for the curent dependency. This is the object passed by BuildBus to an intercept function.

Callback function which runs before committing this module's list of requested transforms to the build. Invoked as an intercept to builtins.transformModules, this is the typical time to invoke your own target with your custom API.

this: {TargetableModule}
Parameters

NameTypeDescription
selfTargetableModuleThe TargetableModule instance (for use if this is not available)

Source Code: pwa-studio/packages/pwa-buildpack/lib/WebpackTools/targetables/TargetableSet.js

Examples#

Code examples for using the TargetableSet class.

Import the class#

This class is available as a named import from @magento/pwa-buildpack.

Copied to your clipboard
1// The `TargetableSet` class is exported from `@magento/pwa-buildpack` as `Targetables`
2const { Targetables } = require("@magento/pwa-buildpack");

Create a bound instance#

Use the TargetProvider instance passed to your intercept function to create a TargetableSet instance bound to that TargetProvider.

Copied to your clipboard
1// The `TargetableSet` class is exported from `@magento/pwa-buildpack` as `Targetables`
2const { Targetables } = require("@magento/pwa-buildpack");
3
4module.exports = (targets) => {
5 const targetables = Targetables.using(targets);
6};

Create a Targetable object#

Use a bound TargetableSet instance to create a Targetable object given the module path (modulePath). This path can be module-resolveable (e.g. "@magento/venia-ui/lib/components/Button") or module-root-relative (e.g. "lib/components/Button").

NOTE: If the value is module-root-relative, the current module name is added automatically.

Copied to your clipboard
1const { Targetables } = require('@magento/pwa-buildpack')
2
3module.exports = targets => {
4 const targetables = Targetables.using(targets);
5
6 const MainComponent = targetables.module(
7 '@magento/venia-ui/lib/components/Main/main.js'
8 );

Set special features#

Extensions with special files, like ES Modules, CSS Modules, GraphQL queries, and others, need to set feature flags in the build so their code is loaded correctly. To do this, they can tap the builtin specialFeatures target.

Copied to your clipboard
1targets.of("@magento/pwa-buildpack").specialFeatures.tap((features) => {
2 features[targets.name] = {
3 esModules: true,
4 graphqlQueries: true,
5 upward: true,
6 };
7});

You can use a bound TargetableSet instance to do the same thing with less code using the setSpecialFeatures() function.

Copied to your clipboard
targetables.setSpecialFeatures("esModules", "graphqlQueries", "upward");

Define environment variables#

Extensions can add custom environment configuration settings to a storefront. To do this, they can tap the builtin envVarDefinitions target.

Copied to your clipboard
1targets.of("@magento/pwa-buildpack").envVarDefinitions.tap((defs) => {
2 defs.sections.push({
3 name: "Support Chat",
4 variables: [
5 {
6 name: "SUPPORT_CHAT_API_KEY",
7 type: "str",
8 desc: "API key for the chat service",
9 },
10 ],
11 });
12});

You can use a bound TargetableSet instance to do the same with less code using the defineEnvVars() function.

Copied to your clipboard
1targetables.defineEnvVars("Support Chat", [
2 {
3 name: "SUPPORT_CHAT_API_KEY",
4 type: "str",
5 desc: "API key for the chat service",
6 },
7]);

This method also accepts an array of flag names, a flags object with boolean values, or a mixture of these as arguments.

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