Aside from the fact that it’s both magical and amazing, it also enables you to easily do a couple things:
1) If you get onboarded to a project with a horrific looking codebase with nightmarish formatting, you can fix that by running a single command on the entire thing to fix it. This saves you what would otherwise take dozens if not hundreds of hours of time
2) If you are on a large team of developers and you want your code to all look the same (at least on your commit to your codebase), you can create one code style configuration file and distribute it to the entire team for use. This way your code all looks and reads the same which makes everything just a little bit nicer to deal with.
There are other reasons but those are the two major ones I can come up with off the top of my head here, lol.
Why use Uncrustify for auto-code formatting?
I like Uncrustify for automatic code formatting because it has so many configuration options, 735 in fact! It allows you to configure how you like your code to look as opposed to many other popular auto-code formatting tools that are “opinionated” that don’t give you that flexibility.
How to Setup Uncrustify
To utilize Uncrustify with your Salesforce projects in Visual Studio Code you need to do the following (Github wiki is here):
1) Install Uncrustify locally on your machine. I would suggest installing it via a package manager like chocolatey or npm if you are using a windows machine (you may need to download npm or chocolatey if you haven’t already)
3) In Visual Studio Code press Ctrl + Shift + P to bring up the command palette and then type the following command: Preferences: Open Settings (JSON). This should bring up a JSON file with your VS Code settings.
4) Inside the settings.json file you opened in the last step, add the following lines:
6) Press Ctrl + Shift + P to bring up the command palette again and enter the following command: Uncrustify: Create Default Config. After running this command you should see an uncrustify.cfg file in your VS Code project
7) Open the uncrustify.cfg file and update all your settings in it (This is just a nice UI with a ton of different options, so nothing complicated here). Make sure to hit the save button in the top right corner when you are done!
8) Once you finished open a file you would like to have code formatting done to and press Alt+Shift+F
And that’s it boiz and gurlz! Enjoy your auto-formatted code!
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Why Would You Want to Communicate Between Component Types?
There are a bunch of reasons it’s beneficial to communicate between component types but the most common ones that I have found are the following:
1) You’re building a new component and realize you need functionality that only Aura Components support, but it’s a very small piece of the component. Instead of building the entire thing in an outdated and much less performant Aura Component, you build most of it in an LWC and just communicate to a small Aura component to do the function only it can do.
2) You’re staffed in an Aura heavy org and when you start building new things for the existing Aura components you should build them in LWC. You can easily do this, but you need to know how the communication channels work between component types.
Once you see how easy it is to communicate between components it’ll be much easier to switch to LWC’s to do development for everything moving forward.
How to Communicate from an LWC to an Aura Component
This is super simple but it’s confusing if you’ve never done it before. We’re basically just gonna create a custom event in our LWC and handle that event in the Aura Component. Let’s check out the code and then I’ll explain it a bit:
<!--This is the LWC HTML-->
<template>
<lightning-input class="dataToSend" placeholder="Enter text to transfer">
</lightning-input>
<lightning-button variant="brand" label="Pass data to Aura Component"
onclick={communicateToAura} ></lightning-button>
</template>
//This is the LWC JS Controller
import {LightningElement} from 'lwc';
export default class LwcCommunication extends LightningElement
{
//This method creates a custom event that dispatches itself.
//The Aura component then handles this event
communicateToAura()
{
console.log('Communicating to Aura ::: ');
//We are grabbing the value from the lightning input field that has the dataToSend
//class
let dataToSend = this.template.querySelector(".dataToSend").value;
//We are creating a custom event named senddata and passing a value in the detail
//portion of the custom event
const sendDataEvent = new CustomEvent('senddata', {
detail: {dataToSend}
});
//Actually dispatching the event that we created above.
this.dispatchEvent(sendDataEvent);
}
}
<!--This is the Aura Component HTML-->
<aura:component description="Aura_Communication">
<aura:attribute name="dataReceived" type="String"/>
<!--The onsenddata is what handles the custom event we made in our LWC-->
<c:lwc_Communication onsenddata="{!c.receiveLWCData}" aura:id="lwcComp" />
<p>This is the data receieved from our LWC: {!v.dataReceived}</p>
</aura:component>
({
//This is the Aura JS Controller
//This method receives data from our LWC and sets the dataReceived
//Aura attribute with the events dataToSend parameter (this is the name of the
//variable we send in the LWC)
receiveLWCData : function(component, event, helper)
{
component.set("v.dataReceived", event.getParam("dataToSend"));
}
});
Alright so now that you’ve checked out the code let’s go over this just a lil bit. In the communicateToAura method above you can see that we create a CustomEvent object and we give it the name ‘senddata’, we also pass some data in the custom event by using the detail property of our Javascript custom event object.
Then in the Aura component’s html we can see that we import our lightning web component using this line:
You can see that when we import our lightning web component that we have an onsenddata event that calls a method in the Aura Components javascript controller called receiveLWCData. When you dispatch your senddata event in your lightning web component the Aura component handles it with the onsenddata event attached to the lightning web component.
Finally you can see that we get the data from the event that was passed to us in the receieveLWCData in the Aura Components JS controller. The most important part of the method is the event.getParam(“dataToSend”). You are grabbing the variable that you passed into the detail property of your CustomEvent object in your LWC. Let me put them side by side so you see exactly what I mean:
And believe it or not it’s really that simple. You have successfully passed data from your LWC to your Aura component. Now let’s figure out how to do this in reverse.
How to Communicate from an Aura Component to an LWC
Alright so how do we do the exact opposite of what we did above?? It’s pretty simple but we need to leverage the wonderful @api decorator for lightning web components to make this work as opposed to Aura event communication. Alright so let’s check out the code below and then I’ll go over it a bit more in detail:
<!--This is the LWC Template/HTML-->
<template>
<p>This is the data received from the Aura Component: {dataReceived}</p>
</template>
//This is the LWC JS Controller
import {LightningElement, api, track} from 'lwc';
export default class LwcCommunication extends LightningElement
{
//Tracked variables ensure that they are refreshed on the page when their values are
//updated in the code
@track dataReceived;
//The api decorator makes this a public method that any component that houses this
//component can access/call
@api receiveData(data)
{
this.dataReceived = data;
}
}
<!--Aura Component HTML-->
<aura:component description="Aura_Communication">
<!--The onsenddata is what handles the custom event we made in our LWC-->
<c:lwc_Communication aura:id="lwcComp" />
<lightning:input aura:id="dataToPass" />
<lightning:button label="Pass data to LWC" onclick="{!c.passDataToLWC}"/>
</aura:component>
({
//This is the Aura Component JS Controller
//This method sends out data to our LWC from the Aura component.
passDataToLWC : function(component, event, helper)
{
let stringToSend = component.find("dataToPass").get("v.value");
//We are calling the receieveData method in our Lightning Web Component here
component.find("lwcComp").receiveData(stringToSend);
}
});
Alright, so as you can see nothing super complicated just some weird stuff you may not be super comfortable with yet. There are two very important pieces to making the passage of data between components possible.
The first is the @api method in the LWC. The receiveData method has the @api decorator in front of it. This makes the method public available to its parent component regardless of what component type it is.
The second is the component.find(“lwcComp”).receiveData(stringToSend) line in the passDataToLWC method in the Aura Components Javascript controller. This is finding the lwc that we imported into our Aura Component by its aura:id and then calling the receiveData method in the LWC (the method with the @api decorator) and passing it data.
This is surprisingly simple thankfully, no weird hacky tricks necessary just a few lines of code and we’re all good to go! If any of this is super confusing please check out the video above. I go over every aspect of the code in great detail.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
