TargetableModule

Edit on GitHub
Log 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.

Kind: global class

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>
      );
  };
© 2021 Magento. All rights reserved.