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. |
LWC optimization is available in v1.14.0 of 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 following a subset of the Web Content Accessibility Guidelines (WCAG) 2.2 guidelines and success criteria.
| WCAG Success Criterion | Optimization Goal | Example |
|---|---|---|
| 2.4.6: Headings and Labels | Headings and labels are sufficiently clear or descriptive such that it provides context for finding and navigating content. | Form-related labels clearly convey what type of input is required from the user. |
| 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> |
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.
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.