TargetableReactComponent

Edit on GitHub Log an Issue

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

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}'
})

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>'
        );

}
© 2021 Adobe. All rights reserved.