Transform Requests | Magento PWA Documentation

The built-in transformModules target is a powerful way to customize the build process for a partiular file or set of files. Many common Targets are implemented using the transformModules target and a custom transformer module.

Interceptors of this target receive a single function as their first argument. This is the addTransform function documented below.

Classes

ModuleTransformConfig: Configuration builder for module transforms. Accepts TransformRequests and emits loader config objects for Buildpack's custom transform loaders. Understands all transform types and normalizes them correctly. Mostly this involves resolving the file paths using Webpack or Node resolution rules. For some special types of transform, ModuleTransformConfig has helpers to apply the requested transforms itself. But `configureWebpack` consumes most of the transforms by calling `transformConfig.collect()` on this object, which yields a structured object that configureWebpack can use to set up loader and plugin configuration.

Typedefs

addTransform ⇒: Add a request to transform a file in the build. This function is passed as the first argument to an interceptor of the `transformModules` target.
TransformRequest : Object: Instruction for configuring Webpack to apply custom transformations to one particular file. The [`configureWebpack()` function](/pwa-buildpack/reference/configure-webpack/) gathers TransformRequests from all interceptors of the `transformModules` target and turns them into a configuration of Webpack [module rules](https://v4.webpack.js.org/configuration/module/#modulerules).

Configuration builder for module transforms. Accepts TransformRequests and emits loader config objects for Buildpack’s custom transform loaders.

Understands all transform types and normalizes them correctly. Mostly this involves resolving the file paths using Webpack or Node resolution rules.

For some special types of transform, ModuleTransformConfig has helpers to apply the requested transforms itself. But configureWebpack consumes most of the transforms by calling transformConfig.collect() on this object, which yields a structured object that configureWebpack can use to set up loader and plugin configuration.

ModuleTransformConfig
- new ModuleTransformConfig(resolver, localProjectName)
- .add()
  - .add ⇒
- .toLoaderOptions() ⇒ object

Parameters

Name	Type	Description
resolver	`MagentoResolver`	Resolver to use when finding real paths of modules requested.
localProjectName	`string`	The name of the PWA project being built, taken from the package.json `name` field.

Add a request to transform a file in the build. This function is passed as the first argument to an interceptor of the transformModules target.

**Returns: ** null

Parameters

Name	Type	Description
req	`TransformRequest`	Instruction object for the requested transform, including the transform to apply, the target source code, and other options.

Resolve paths and emit as JSON.

**Returns: ** object — Configuration object

Properties

Name	Type	Default	Description
source	`string`	source	Process the source code of `fileToTransform` through the `transformModule` as text. When applying a `source` TransformRequest, Buildpack will use the `transformModule` as a Webpack loader, so it must implement that interface. Any Webpack loader can be used as a `transformModule` for `source` TransformRequests. `source` transforms are fast and can run on source code of any language, but they aren’t as precise and safe as AST-type transforms when modifying code.
babel	`string`	babel	Process the abstract syntax tree of the ES module specified by `fileToTransform` through the `transformModule` as a Babel AST. When applying a `babel` TransformRequest, Buildpack will use the `transformModule` as a Babel plugin, so it must implement that interface. Any Babel plugin can be used as a `transformModule` for `babel` TransformRequests. `babel` transforms are powerful and versatile, giving the transformer much more insight into the structure of the source code to modify. However, they are slower than `source` transforms, and they can only work on ES Modules.

Add a request to transform a file in the build. This function is passed as the first argument to an interceptor of the transformModules target.

**Returns: ** null

Parameters

Name	Type	Description
req	`TransformRequest`	Instruction object for the requested transform, including the transform to apply, the target source code, and other options.

Instruction for configuring Webpack to apply custom transformations to one particular file. The configureWebpack() function gathers TransformRequests from all interceptors of the transformModules target and turns them into a configuration of Webpack module rules.

Properties

Name	Type	Description
type	`TransformType`	The type of transformation to apply.
fileToTransform	`string`	Resolvable path to the file to be transformed itself, the same path that you’d use in `import` or `require()`.
transformModule	`string`	Absolute path to the Node module that will actually be doing the transforming. This path may be resolved using different rules at different times, so it’s best for this path to always be absolute.
[options]	`object`	Config values to send to the transform function. Note: Options should be serializable to JSON as Webpack loader options and/or Babel plugin options..

Source Code: pwa-studio/packages/pwa-buildpack/lib/WebpackTools/ModuleTransformConfig.js