TargetableReactComponent

Edit on GitHub
Log 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.

Kind: global class

targetableReactComponent.addJSXClassName(element, className, [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.

Kind: instance method of TargetableReactComponent
Chainable

Param 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  

targetableReactComponent.addReactLazyImport(modulePath, [localName]) ⇒ string

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

Kind: instance method of TargetableReactComponent
Returns: string - Name of the local binding of the element, to be used in JSX operations.

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

targetableReactComponent.appendJSX(element, newChild, [options]) ⇒ this

Append a JSX element to the children of element.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.insertAfterJSX(element, newSibling, [options]) ⇒ this

Insert a JSX element after element.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.insertBeforeJSX(element, newSibling, [options]) ⇒ this

Insert a JSX element before element.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.prependJSX(element, newChild, [options]) ⇒ this

Prepend a JSX element to the children of element.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.removeJSX(element, [options]) ⇒ this

Remove the JSX node matched by ‘element’.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.removeJSXProps(element, propNames, [options]) ⇒ this

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

Kind: instance method of TargetableReactComponent
Chainable

Param 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  

targetableReactComponent.replaceJSX(jsx, replacement, [options]) ⇒ this

Replace a JSX element with different code.

Kind: instance method of TargetableReactComponent
Chainable

Param 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 ‘'.
replacement string Replacement code as a string.
[options] JSXModifierOptions  

targetableReactComponent.setJSXProps(element, props, [options]) ⇒ this

Set JSX props on a JSX element.

Kind: instance method of TargetableReactComponent
Chainable

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

targetableReactComponent.surroundJSX(element, newParent, [options]) ⇒ this

Wrap a JSX element in an outer element.

Kind: instance method of TargetableReactComponent
Chainable

Param 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  

For implementation details View Source.

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 Magento. All rights reserved.