Lightning Web Components Optimization (Dev Preview)
Use Agentforce agents to quickly refactor your Lightning web component for improved style and accessibility. Agents make your apps more accessible and implement best practices for you.
This feature is available as a developer preview. It isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Don't implement functionality developed with these commands or tools.
| Type of Optimization | Description |
|---|---|
| Accessibility | The Accessibility Agent is your go-to tool for building inclusive digital experiences. It analyzes your LWC bundle against a subset of WCAG Level accessibility standards, offering suggestions to improve usability for everyone. |
| Inline Todos | The Inline Todos Agent is an essential tool for resolving todo comments within your code. It analyzes your LWC bundle, identifying and attempting to address todo items to help speed up your development process. |
| Mobile Offline | The Mobile Offline Agent helps to ensure seamless user experiences in disconnected environments. It analyzes your LWC bundle to identify and optimize components for offline functionality, providing recommendations to improve reliability when internet connectivity is limited or unavailable. |
The Mobile Offline agent is available in v2.6.0 of the Agentforce for Developers extension. Update to the latest version of the Salesforce Extension Pack to access this feature.
This feature is currently in developer preview and needs to be activated. To activate:
- From the command palette, run Preferences
User Settings (JSON) to open your settings.jsonfile. - Update your settings:
To enhance the output accuracy, we recommend running the optimization agents several times. After the initial run, review and accept the suggested changes. Then, run the optimization agents again and accept the new changes. This iterative process helps refine and improve the quality of your output. To optimize your LWC:
- Click the Agentforce: Agents icon in the Activity Bar to open the
Agentspanel. - Navigate to LWC Optimize.
- Choose the Lightning web component that you wish to refactor,then the optimization option(s) you want to apply.
- Click Optimize.
- Once generation is complete, view the updated files.
- Choose to Regenerate, Discard, or Accept the refactoring suggestions, or click on the file name to open the diff view.
The Accessibility Agent attempts to optimize the LWC code based on a subset of the Web Content Accessibility Guidelines (WCAG) 2.2 guidelines and success criteria.
| WCAG Success Criterion | Optimization Goal | Example |
|---|---|---|
| 2.5.2: Pointer Cancellation | Reduce accidental activation of controls by mouse or touch. | Use onclick instead of both onpointerdown and onkeydown to enable user recovery from an accidental click. |
| 2.5.3: Label in Name | For elements with labels that include text or images of text, the accessible name contains the text that is presented visually. | The text inside a button element becomes both its visible label and its accessible name. For example: <button>Submit</button> |
| 4.1.2: Value Analysis | For all user interface components such as form elements and links, the value can be programmatically set. | The <button> element has a valid aria-label value if it doesn't have a visible label. |
While the Accessibility Agent attempts to identify issues in your code that violate the WCAG guidelines, the output can vary and may introduce unintentional changes. Verify your generated output before accepting and using the code. We recommend that you use Lightning base components where applicable. Base components are accessible building blocks that follow WCAG guidelines closely. They also implement Salesforce Lightning Design System styling for a consistent user experience.
The Inline Todos Agent attempts to complete your LWC code by implementing any existing inline todo comments. The todo keyword is not case-sensitive. In HTML code, use the standard inline comment syntax and be descriptive about your goal.
The output may remove your todo comments or replace them with simplified todo comments. An example output looks like this.
In JavaScript code, use the single-line annotation denoted by two forward slashes (//). Alternatively, use the multi-line comment annotation starting with /_ and ending with _/.
An example output looks like this.
While the Inline Todos Agent attempts to implement your todo comments, the output can vary and may introduce unintended code. Verify your generated output before accepting and using the code. For example, the output may include only the label and type attributes on the lightning-input component without including the value attribute depending on your todo comment. The output can variably include elements and markup that use Salesforce Lightning Design System classes.
We recommend that you use Lightning base components where applicable. To work with Salesforce record data easily using a consistent user interface, use base components like lightning-record-form and lightning-record-edit-form. Review available base components before creating your own. For more information, see Data Guidelines.
The Mobile Offline Agent attempts to optimize the LWC code based on mobile offline best practices. This tool helps you build robust applications that can function smoothly even without a constant network connection, making your app more resilient and user-friendly.
The mobile offline best practices are as follows.
| LWC Mobile Offline Best Practice | Optimization Goal | Example |
|---|---|---|
| GraphQL wire adapter | Ensure that the GraphQL wire adapter is called from a getter function defined in the component class and not provided inline with the wire adapter configuration. | See Provide Query and Variables via A Getter Function. |
lwc:if conditional directive | Ensure that if:true and if:false are used instead of lwc:if, lwc:elseif, and lwc:else | Maintains the logic of the JavaScript code while replacing the conditional directives with the offline-friendly alternatives. See Offline Considerations. |
To enhance the output accuracy, we recommend running the optimization agents several times. After the initial run, review and accept the suggested changes. Then, run the optimization agents again and accept the new changes. This iterative process helps refine and improve the quality of your output.
- Agents may not generate optimized code, and instead reformat existing code or remove inline comments. You can reject the proposed changes and run the optimization again.
- The Inline Todos Agent may generate incomplete or inaccurate code. We recommend refining your todo comments to describe your intended output more clearly.
- The Inline Todos Agent doesn't support optimizing for accessibility. You can't add a todo comment to address accessibility.
- The Accessibility Agent may append event handlers to elements or dispatch custom events to address accessibility issues such as a missing keyboard handler. Review the proposed changes before accepting them.
Check out our github repo for issues related to the Agentforce for Developers extension.