TargetableReactComponent

An ECMAScript module containing a React component with JSX to render it.

Presents a convenient API for consumers to add common transforms to React components and the JSX in them, in a semantic way.

TargetableReactComponent
- .addJSXClassName(element, className, [options]) ⇒ this
- .addReactLazyImport(modulePath, [localName]) ⇒ string
- .appendJSX(element, newChild, [options]) ⇒ this
- .insertAfterJSX(element, newSibling, [options]) ⇒ this
- .insertBeforeJSX(element, newSibling, [options]) ⇒ this
- .prependJSX(element, newChild, [options]) ⇒ this
- .removeJSX(element, [options]) ⇒ this
- .removeJSXProps(element, propNames, [options]) ⇒ this
- .replaceJSX(jsx, replacement, [options]) ⇒ this
- .setJSXProps(element, props, [options]) ⇒ this
- .surroundJSX(element, newParent, [options]) ⇒ this

Add a CSS classname to a JSX element. Unlike setting the className prop, this is non-destructive. It will append the classname to any existing classnames, instead of replacing it.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file
className	`string`	New classname to insert. This will be interpolated; to add a string literal classname, set this to '"classname"'. Passing 'classname' will add the value of a local variable `classname` in the file. If that identifier doesn't exist, it'll cause a ReferenceError.
[options]	`JSXModifierOptions`

Add a new named dynamic import of another React component, using the lazy wrapper for use with React.Suspense.

Returns: string — Name of the local binding of the element, to be used in JSX operations.

Parameters

Name	Type	Default	Description
modulePath	`string`		Resolvable path to the module to import.
[localName]	`string`	`Component`	Optional human-readable name for debugging.

Append a JSX element to the children of element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file
newChild	`string`	New element to insert, as a string.
[options]	`JSXModifierOptions`

Insert a JSX element after element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file
newSibling	`string`	New element to insert, as a string.
[options]	`JSXModifierOptions`

Insert a JSX element before element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file
newSibling	`string`	New element to insert, as a string.
[options]	`JSXModifierOptions`

Prepend a JSX element to the children of element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file
newChild	`string`	New element to insert, as a string.
[options]	`JSXModifierOptions`

Remove the JSX node matched by 'element'.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file and remove it
[options]	`JSXModifierOptions`

Remove JSX props from the element if they match one of the list of names.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file.
propNames	`Array.<string>`	An array of names of props to remove.
[options]	`JSXModifierOptions`

Replace a JSX element with different code.

Chainable
Returns: Parameters

Name	Type	Description
jsx	`string`	A JSX element matching the one in the source code to modify. Use a JSX opening element or a self-closing element, like `<Route path="/">`.
replacement	`string`	Replacement code as a string.
[options]	`JSXModifierOptions`

Set JSX props on a JSX element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file.
props	`object`	A simple object representing the props. Keys should be prop names, and values should be raw strings representing the value in JSX text.
[options]	`JSXModifierOptions`

Example

file.setJSXProps('Tab colorScheme="dark"', {
  colorScheme: '"light"',
  className: '{classes.tabs}'
})
Copied to your clipboard
file.setJSXProps('Tab colorScheme="dark"', {
  colorScheme: '"light"',
  className: '{classes.tabs}'
})

Wrap a JSX element in an outer element.

Chainable
Returns: Parameters

Name	Type	Description
element	`string`	Match an existing JSX component in the file.
newParent	`string`	The wrapper element as a JSX string. It must be one and only one JSX element with no children; the matching element will be the only child of the new wrapper.
[options]	`JSXModifierOptions`

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

Examples

Code examples for the TargetableReactComponent class.

Modify Venia's Main component

The TargetableReactComponent class provides functions that change the JSX structure a React component returns. The following example uses some of these functions to make changes to Venia's Main component. It uses JSX strings found in the main.js file to specify where these changes should happen.

const { Targetables } = require("@magento/pwa-buildpack");

module.exports = (targets) => {
  const targetables = Targetables.using(targets);

  // Create a TargetableReactComponent linked to the `main.js` file
  const MainComponent = targetables.reactComponent(
    "@magento/venia-ui/lib/components/Main/main.js"
  );

  // Add an import statement for Venia's Button component
  const Button = MainComponent.addImport(
    "Button from '@magento/venia-ui/lib/components/Button'"
  );

  // Use method chaining to call chainable functions one after the other
  MainComponent.appendJSX(
    "div className={pageClass}",
    "<span>appendJSX succeeded!</span>"
  )
    .addJSXClassName("div className={pageClass}", "newClass")
    .addJSXClassName("Header", '"anotherClass"')
    .insertAfterJSX(
      "<Footer/>",
      `<${Button} type="button" priority="high">insertAfterJSX succeeded!</${Button}>`
    )
    .insertBeforeJSX("<Header />", "<span>insertBeforeJSX succeeded!</span>")
    .replaceJSX("span id={`${dot.path}`}", "<span>replaceJSX worked</span>")
    .prependJSX("div", "<>prependJSX succeeded!</>")
    .removeJSX('span className="busted"')
    .setJSXProps("Footer", {
      "aria-role": '"footer"',
      "data-set-jsx-props-succeeded": true,
    })
    .surroundJSX(
      "Header",
      `div style={{ filter: "blur(1px)", outline: "2px dashed red" }}`
    )
    .insertBeforeJSX(
      'Footer aria-role="footer"',
      "<span>Cumulative select worked</span>"
    );
};
Copied to your clipboard
const { Targetables } = require("@magento/pwa-buildpack");

module.exports = (targets) => {
  const targetables = Targetables.using(targets);

  // Create a TargetableReactComponent linked to the `main.js` file
  const MainComponent = targetables.reactComponent(
    "@magento/venia-ui/lib/components/Main/main.js"
  );

  // Add an import statement for Venia's Button component
  const Button = MainComponent.addImport(
    "Button from '@magento/venia-ui/lib/components/Button'"
  );

  // Use method chaining to call chainable functions one after the other
  MainComponent.appendJSX(
    "div className={pageClass}",
    "<span>appendJSX succeeded!</span>"
  )
    .addJSXClassName("div className={pageClass}", "newClass")
    .addJSXClassName("Header", '"anotherClass"')
    .insertAfterJSX(
      "<Footer/>",
      `<${Button} type="button" priority="high">insertAfterJSX succeeded!</${Button}>`
    )
    .insertBeforeJSX("<Header />", "<span>insertBeforeJSX succeeded!</span>")
    .replaceJSX("span id={`${dot.path}`}", "<span>replaceJSX worked</span>")
    .prependJSX("div", "<>prependJSX succeeded!</>")
    .removeJSX('span className="busted"')
    .setJSXProps("Footer", {
      "aria-role": '"footer"',
      "data-set-jsx-props-succeeded": true,
    })
    .surroundJSX(
      "Header",
      `div style={{ filter: "blur(1px)", outline: "2px dashed red" }}`
    )
    .insertBeforeJSX(
      'Footer aria-role="footer"',
      "<span>Cumulative select worked</span>"
    );
};

TargetableESModuleObject

TargetableSet

Last updated 9/13/2023

Was this helpful?

Yes

TargetableReactComponent

Examples.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Modify Venia's Main component.css-jmmyhj{margin-left:var(--spectrum-global-dimension-size-50);}

Examples

Modify Venia's Main component