TargetableSet | Magento PWA Documentation

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.

TargetableSet
- instance
  - .module(modulePath, [publisher]) ⇒ TargetableModule
  - .esModule(modulePath, [publisher]) ⇒ TargetableESModule
  - .esModuleArray(modulePath, [publisher]) ⇒ TargetableESModuleArray
  - .esModuleObject(modulePath, [publisher]) ⇒ TargetableESModuleObject
  - .reactComponent(modulePath, [publisher]) ⇒ TargetableReactComponent
  - .setSpecialFeatures(…Feature)
  - .defineEnvVars(sectionName, variables)
- static
  - .using(targets) ⇒ TargetableSet

**Returns: ** TargetableModule — Returns an instance of TargetableModule.

Parameters

Name	Type	Description
modulePath	`string`	Path to the module file this Targetable represents.
[publisher]	`TargetablePublisher`	Callback 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

Name	Type	Description
modulePath	`string`	Path to the module file this Targetable represents.
[publisher]	`TargetablePublisher`	Callback 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

Name	Type	Description
modulePath	`string`	Path to the module file this Targetable represents.
[publisher]	`TargetablePublisher`	Callback 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

Name	Type	Description
modulePath	`string`	Path to the module file this Targetable represents.
[publisher]	`TargetablePublisher`	Callback 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

Name	Type	Description
modulePath	`string`	Path to the module file this Targetable represents.
[publisher]	`TargetablePublisher`	Callback 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

Name	Type	Description
…Feature	`string` \| `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

Name	Type	Description
sectionName	`string`	Human-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.
variables	`Array.<EnvVarDefinition>`	List of variables to add.

Creates a new TargetableSet bound to a TargetProvider

Returns: ** **Parameters

Name	Type	Description
targets	`TargetProvider`	TargetProvider 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

Name	Type	Description
self	`TargetableModule`	The 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.

// The `TargetableSet` class is exported from `@magento/pwa-buildpack` as `Targetables`
const { 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.

// The `TargetableSet` class is exported from `@magento/pwa-buildpack` as `Targetables`
const { Targetables } = require('@magento/pwa-buildpack')

module.exports = targets => {
    const targetables = Targetables.using(targets);
}

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.

const { Targetables } = require('@magento/pwa-buildpack')

module.exports = targets => {
    const targetables = Targetables.using(targets);

    const MainComponent = targetables.module(
        '@magento/venia-ui/lib/components/Main/main.js'
    );

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.

targets.of('@magento/pwa-buildpack').specialFeatures.tap(features => {
  features[targets.name] = {
    esModules: true,
    graphqlQueries: true,
    upward: true
  };
});

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

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.

targets.of('@magento/pwa-buildpack').envVarDefinitions.tap(defs => {
  defs.sections.push({
    name: 'Support Chat',
    variables: [
      {
        name: 'SUPPORT_CHAT_API_KEY',
        type: 'str',
        desc: 'API key for the chat service'
      }
    ]
  })
});

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

targetables.defineEnvVars('Support Chat', [{
  name: 'SUPPORT_CHAT_API_KEY',
  type: 'str',
  desc: 'API key for the chat service'
}])

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