Edit in GitHubLog an issue

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.

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

NameTypeDescription
elementstringMatch an existing JSX component in the file
classNamestringNew 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

NameTypeDefaultDescription
modulePathstringResolvable path to the module to import.
[localName]stringComponentOptional human-readable name for debugging.

Append a JSX element to the children of element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file
newChildstringNew element to insert, as a string.
[options]JSXModifierOptions

Insert a JSX element after element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file
newSiblingstringNew element to insert, as a string.
[options]JSXModifierOptions

Insert a JSX element before element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file
newSiblingstringNew element to insert, as a string.
[options]JSXModifierOptions

Prepend a JSX element to the children of element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file
newChildstringNew element to insert, as a string.
[options]JSXModifierOptions

Remove the JSX node matched by 'element'.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch 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

NameTypeDescription
elementstringMatch an existing JSX component in the file.
propNamesArray.<string>An array of names of props to remove.
[options]JSXModifierOptions

Replace a JSX element with different code.

Chainable
Returns: Parameters

NameTypeDescription
jsxstringA JSX element matching the one in the source code to modify. Use a JSX opening element or a self-closing element, like <Route path="/">.
replacementstringReplacement code as a string.
[options]JSXModifierOptions

Set JSX props on a JSX element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file.
propsobjectA 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

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

Wrap a JSX element in an outer element.

Chainable
Returns: Parameters

NameTypeDescription
elementstringMatch an existing JSX component in the file.
newParentstringThe 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.

Copied to your clipboard
1const { Targetables } = require("@magento/pwa-buildpack");
2
3module.exports = (targets) => {
4 const targetables = Targetables.using(targets);
5
6 // Create a TargetableReactComponent linked to the `main.js` file
7 const MainComponent = targetables.reactComponent(
8 "@magento/venia-ui/lib/components/Main/main.js"
9 );
10
11 // Add an import statement for Venia's Button component
12 const Button = MainComponent.addImport(
13 "Button from '@magento/venia-ui/lib/components/Button'"
14 );
15
16 // Use method chaining to call chainable functions one after the other
17 MainComponent.appendJSX(
18 "div className={pageClass}",
19 "<span>appendJSX succeeded!</span>"
20 )
21 .addJSXClassName("div className={pageClass}", "newClass")
22 .addJSXClassName("Header", '"anotherClass"')
23 .insertAfterJSX(
24 "<Footer/>",
25 `<${Button} type="button" priority="high">insertAfterJSX succeeded!</${Button}>`
26 )
27 .insertBeforeJSX("<Header />", "<span>insertBeforeJSX succeeded!</span>")
28 .replaceJSX("span id={`${dot.path}`}", "<span>replaceJSX worked</span>")
29 .prependJSX("div", "<>prependJSX succeeded!</>")
30 .removeJSX('span className="busted"')
31 .setJSXProps("Footer", {
32 "aria-role": '"footer"',
33 "data-set-jsx-props-succeeded": true,
34 })
35 .surroundJSX(
36 "Header",
37 `div style={{ filter: "blur(1px)", outline: "2px dashed red" }}`
38 )
39 .insertBeforeJSX(
40 'Footer aria-role="footer"',
41 "<span>Cumulative select worked</span>"
42 );
43};
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.