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

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

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

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

Chainable
Returns: Parameters

Add text to the beginning of a file.

Chainable
Returns: Parameters

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

Chainable
Returns: Parameters

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.

Copy
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'
  );
};
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:

Copy
  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>
      );
  };
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>
      );
  };

Related content

• Transform Requests

Last updated 9/13/2023

Was this helpful?

Yes

No