Edit in GitHubLog an issue

TargetableModule

A module that third party code can modify.

When Webpack loads a module into its bundles, it processes the source code through a set of rules generated by Buildpack. A TargetableModule is a reference to that source file, meant to be passed to interceptors. Inside interceptors, extensions and projects can configure the TargetableModule to transform it in many ways.

Create a TargetableModule representing a file.

Parameters

NameTypeDescription
filestringPath to the underlying source file.
trackingOwnerTrackableParent object for debugging purposes.

Add a transform request to this module's queue. The fileToTransform of the transform request is automatically set to this module's filename.

Chainable
Returns: Parameters

NameTypeDescription
typeTransformTypeTransform type
transformModulestringThe Node module that runs the transform, such as a Webpack loader for type source or a Babel plugin for type babel.
optionsObjectConfiguration object to send to the transformModule.

Empty this module's queue of transforms, returning them as an array.

Returns: Array.<TransformRequest> — An array of Transform requests.

Insert text into the module contents, immediately following the location of the search string if it is found.

Chainable
Returns: Parameters

NameTypeDescription
afterstringText string in the module code to place the new content after.
insertstringText to insert after the search string.
[options]ObjectAdditional loader options.
[options.remove]numberNumber of characters to delete forward, after the search string.

Insert text into the module contents, immediately before the location of the search string if it is found.

Chainable
Returns: Parameters

NameTypeDescription
beforestringText string in the module code to place the new content before.
insertstringText to insert before the search string.
[options]ObjectAdditional loader options.
[options.remove]numberNumber of characters to delete forward, after the search string.

Add text to the beginning of a file.

Chainable
Returns: Parameters

NameTypeDescription
insertstringText to insert up top

Do any splice operation supported by splice-source-loader.

Chainable
Returns: Parameters

NameTypeDescription
instructionobjectSplice instruction.

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

Examples#

Code examples for using the TargetableModule class.

Insert source code#

The TargetableModule class contains functions that let you insert custom code into different areas in the source code.

Copied to your clipboard
1const { Targetables } = require("@magento/pwa-buildpack");
2
3module.exports = (targets) => {
4 const targetableFactory = Targetables.using(targets);
5
6 // Create a TargetableModule instance that points to the main.js source
7 const MainComponent = targetables.module(
8 "@magento/venia-ui/lib/components/Main/main.js"
9 );
10
11 // Insert a console log message in the source
12 MainComponent.insertAfterSource(
13 "const Main = props => {\n",
14 '\tconsole.log("Hello World");\n'
15 );
16};

The following example makes the following code modifications to main.js for the final bundle:

Copied to your clipboard
1 const Main = props => {
2+ console.log("Hello World");
3 const { children, isMasked } = props;
4 const classes = mergeClasses(defaultClasses, props.classes);
5
6 const rootClass = isMasked ? classes.root_masked : classes.root;
7 const pageClass = isMasked ? classes.page_masked : classes.page;
8
9 useScrollLock(isMasked);
10
11 return (
12 <main className={rootClass}>
13 <Header />
14 <div className={pageClass}>{children}</div>
15 <Footer />
16 </main>
17 );
18 };

Related content#

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