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

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.