Edit in GitHubLog an issue


An ECMAScript module that can be changed by a third party.

This class presents a convenient API for consumers to add common transforms to ES Modules in a semantic way.

Adds a static import statement to the module source code, thus importing a new dependency.

This method automatically deduplicates attempts to add imports that would override earlier import bindings. If a collision is detected, it renames the binding before inserting it.

Returns: SingleImportStatement — An instance of the SingleImportStatement class.


statementstring | SingleImportStatementA string representing the import statement, or a SingleImportStatement representing it.

Generates a unique identifier for a given binding. Not guaranteed safe, but good enough in a pinch.

Returns: Parameters

bindingstringThe binding to change.

Pass exports of this module through a wrapper module.

Returns: Parameters

[exportName]stringName of export to wrap. If not provided, will wrap the default export.
wrapperModulestringPackage-absolute import path to the wrapper module.

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


Code examples for the TargetableESModule class.

Add and use import statements#

Calling the addImport() function returns a SingleImportStatement object. Use this object to refer to the component in your code.

Copied to your clipboard
1const logger = esModule.addImport('import logger from "./logger"');
2esModule.insertAfterSource("./logger';\n", `${logger.binding}('startup')`);

The SingleImportStatement class overrides its toString() method to return the value of its .binding property, so you can use the object itself in your templates

Copied to your clipboard
1const logger = esModule.addImport('import logger from "./logger"');
2esModule.insertAfterSource("./logger';\n", `${logger}('startup')`);

Import statement limits#

The addImport() function can only handle import statements with a single binding.

For example, the following code is allowed because it only binds VeniaButton in the statement:

Copied to your clipboard
import { Button as VeniaButton } from "@magento/venia/lib/components/Button";

The following would not be allowed, since it adds two bindings (VeniaButton and Carousel):

Copied to your clipboard
import { Button as VeniaButton, Carousel } from "@magento/venia";

Import conflicts#

A conflict occcurs when an import statement uses a binding that already belongs to another existing import statement. For example, you add the logger import statement in a previous example to a file that already imports another logger module. When this happens, the TargetableESModule class rebinds the logger object to a different, unique name, such as logger$$2.

Wrap a module#

Use the wrapWithFile() function to wrap an exported module with another module from a specified file.

Copied to your clipboard
1// Create a TargetableESModule linked to the useProductFullDetail.js file
2const useProductFullDetails = targetables.esModule(
3 "@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js"
6// Wrap the `useProductFullDetail` named export from the file with
7// the default export of `src/targets/wrapper.js` in the `myExtension` package.
9 "useProductFullDetail",
10 "myExtension/src/targets/wrapper"
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.