TargetableModule
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.
Kind: global class
- TargetableModule
- new TargetableModule(file, trackingOwner)
- .addTransform(type, transformModule, options) ⇒
this
- .flush() ⇒
Array.<TransformRequest>
- .insertAfterSource(after, insert, [options]) ⇒
this
- .insertBeforeSource(before, insert, [options]) ⇒
this
- .prependSource(insert) ⇒
this
- .spliceSource(instruction) ⇒
this
new TargetableModule(file, trackingOwner)
Create a TargetableModule representing a file.
Param | Type | Description |
---|---|---|
file | string |
Path to the underlying source file. |
trackingOwner | Trackable |
Parent object for debugging purposes. |
targetableModule.addTransform(type, transformModule, options) ⇒ this
Add a transform request to this module’s queue. The fileToTransform
of
the transform request is automatically set to this module’s filename.
Kind: instance method of TargetableModule
Chainable
Param | Type | Description |
---|---|---|
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. |
targetableModule.flush() ⇒ Array.<TransformRequest>
Empty this module’s queue of transforms, returning them as an array.
Kind: instance method of TargetableModule
Returns: Array.<TransformRequest>
- An array of Transform requests.
targetableModule.insertAfterSource(after, insert, [options]) ⇒ this
Insert text into the module contents, immediately following the location of the search string if it is found.
Kind: instance method of TargetableModule
Chainable
Param | Type | Description |
---|---|---|
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. |
targetableModule.insertBeforeSource(before, insert, [options]) ⇒ this
Insert text into the module contents, immediately before the location of the search string if it is found.
Kind: instance method of TargetableModule
Chainable
Param | Type | Description |
---|---|---|
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. |
targetableModule.prependSource(insert) ⇒ this
Add text to the beginning of a file.
Kind: instance method of TargetableModule
Chainable
Param | Type | Description |
---|---|---|
insert | string |
Text to insert up top |
targetableModule.spliceSource(instruction) ⇒ this
Do any splice operation supported by splice-source-loader
.
Kind: instance method of TargetableModule
Chainable
Param | Type | Description |
---|---|---|
instruction | object |
Splice instruction. |
For implementation details View Source.
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.
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:
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>
);
};