TargetableReactComponent
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
- .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
- .addJSXClassName(element, className, [options]) ⇒
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>'
);
}