what's the equivalent of helper in LWC?
A "helper" class would be a utility component.
For example, you can write the following code:
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
// This is the testUtil component
function showToast(cmp, inpval) {
const event = new ShowToastEvent({
title: 'Get Help',
message: 'Input val changed.'+ inpval,
});
cmp.dispatchEvent(event);
}
export { showToast }
(Note: this is a complete JS file)
Which you would then use in your other components:
import { LightningComponent } from 'lwc';
import { showToast } from 'c/testUtil';
export default class MyDemo extends LightningComponent {
connectedCallback() {
showToast(this, 'This is a demo toast');
}
}
There is no literal equivalent to helper files in LWC. This design simplifies development and provides an easy way to share functions between components.
Here is how I would do if I feel this function is used only in the current component. The trick here is to use the prefix this.
when invoking functions in the same class.
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class TestLwc extends LightningElement {
hangleChange(evt){
this.showToast('foo');
}
showToast(inpval) {
const event = new ShowToastEvent({
title: 'Get Help',
message: 'Input val changed.'+ inpval,
});
this.dispatchEvent(event);
}
}
Isolating logic outside of the main ES6 module for your component is a good idea, since it can make a complex component's high-level design easier to scan. If you are using Jest and can justify focusing your testing efforts on the helper logic, this approach can also assist in making those tests run much faster, since Jest won't have to load all the child component dependencies referenced in your HTML template.
If you want to reuse the code in multiple components, use @sfdcfox's solution. If not, you can add a helper file to your component bundle and import it.
A helper like this (and yes, this is a complete file)...
// appHelper.js
export const helper = {
addSix(number) {
return number + 6;
},
changeMyNameToBob() {
this.name = 'Bob';
}
}
... can be used in the main module like this...
// app.js
import { LightningElement, track, api } from 'lwc';
import { helper } from './appHelper.js';
export default class App extends LightningElement {
@track name = 'Jim';
@track number;
connectedCallback() {
this.number = helper.addSix(4);
helper.changeMyNameToBob.call(this);
}
}
Note the use of function.prototype.call() to pass the module's this
context into the helper function.
The helper file lives in the same directory as the component's other files, like this:
force-app
└───main
└───default
└───lwc
└───app
| app.html
| app.js
| appHelper.js
See playground link