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
file
string
Path to the underlying source file.
trackingOwner
Trackable
Parent 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
type
TransformType
Transform type
transformModule
string
The Node module that runs the transform, such as a Webpack loader for type source or a Babel plugin for type babel.
options
Object
Configuration 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
after
string
Text string in the module code to place the new content after.
insert
string
Text to insert after the search string.
[options]
Object
Additional loader options.
[options.remove]
number
Number 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
before
string
Text string in the module code to place the new content before.
insert
string
Text to insert before the search string.
[options]
Object
Additional loader options.
[options.remove]
number
Number of characters to delete forward, after the search string.

Add text to the beginning of a file.

Chainable
Returns: Parameters

NameTypeDescription
insert
string
Text to insert up top

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

Chainable
Returns: Parameters

NameTypeDescription
instruction
object
Splice 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
const { Targetables } = require("@magento/pwa-buildpack");
module.exports = (targets) => {
const targetableFactory = Targetables.using(targets);
// Create a TargetableModule instance that points to the main.js source
const MainComponent = targetables.module(
"@magento/venia-ui/lib/components/Main/main.js"
);
// Insert a console log message in the source
MainComponent.insertAfterSource(
"const Main = props => {\n",
'\tconsole.log("Hello World");\n'
);
};

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

Copied to your clipboard
const Main = props => {
+ console.log("Hello World");
const { children, isMasked } = props;
const classes = mergeClasses(defaultClasses, props.classes);
const rootClass = isMasked ? classes.root_masked : classes.root;
const pageClass = isMasked ? classes.page_masked : classes.page;
useScrollLock(isMasked);
return (
<main className={rootClass}>
<Header />
<div className={pageClass}>{children}</div>
<Footer />
</main>
);
};
  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.