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.
- 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
Create a TargetableModule representing a file.
Parameters
Name | Type | Description |
---|---|---|
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
Name | 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. |
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
Name | 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. |
Insert text into the module contents, immediately before the location of the search string if it is found.
Chainable
Returns:
Parameters
Name | 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. |
Add text to the beginning of a file.
Chainable
Returns:
Parameters
Name | Type | Description |
---|---|---|
insert | string | Text to insert up top |
Do any splice operation supported by splice-source-loader.
Chainable
Returns:
Parameters
Name | Type | Description |
---|---|---|
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 clipboardconst { Targetables } = require("@magento/pwa-buildpack");module.exports = (targets) => {const targetableFactory = Targetables.using(targets);// Create a TargetableModule instance that points to the main.js sourceconst MainComponent = targetables.module("@magento/venia-ui/lib/components/Main/main.js");// Insert a console log message in the sourceMainComponent.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 clipboardconst 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>);};