diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md index 65795d38..6d87af9a 100644 --- a/instructions/lwc.instructions.md +++ b/instructions/lwc.instructions.md @@ -1,6 +1,6 @@ --- -description: Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform. -applyTo: 'force-app/main/default/lwc/**' +description: "Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform." +applyTo: "force-app/main/default/lwc/**" --- @@ -17,26 +17,6 @@ applyTo: 'force-app/main/default/lwc/**' - Optional: `myComponent.css` for component-specific styles. - Optional: `myComponent.test.js` for Jest unit tests. -## Development Best Practices -### Component Design -- **Single Responsibility**: Each component should have a single, well-defined purpose. -- **Reusability**: Design components to be reusable across different parts of the application. -- **Composition**: Prefer composing smaller components into larger ones rather than creating monolithic components. -- **Public API**: Use `@api` decorators to expose properties and methods that need to be accessed by parent components. -- **Private State**: Use `@track` for reactive properties that are internal to the component. - -### Performance Optimization -- **Lazy Loading**: Load components only when needed to improve initial load times. -- **Efficient Rendering**: Minimize DOM updates by batching changes and using conditional rendering. -- **Avoid Unnecessary Re-renders**: Use getters and setters wisely to prevent unnecessary re-renders. -- **Use Lightning Data Service (LDS)**: Prefer LDS for data access to leverage built-in caching and performance optimizations. - -### Security Considerations -- **Sanitize Inputs**: Always sanitize user inputs to prevent XSS attacks. -- **Use `@wire`**: Prefer using `@wire` for data access to ensure security and compliance with Salesforce's security model. -- **Avoid Direct DOM Manipulation**: Use LWC's reactive properties and templates instead of manipulating the DOM directly. -# Lightning Web Component (LWC) Development Best Practices - ## Core Principles ### 1. Use Lightning Components Over HTML Tags @@ -139,7 +119,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var ``` -#### Avoid Custom CSS +#### Avoid Custom CSS (Anti-Pattern) ```css /* Don't create custom styles that override SLDS */ .custom-button { @@ -339,10 +319,10 @@ export default class MyComponent extends LightningElement { ``` ## Common Anti-Patterns to Avoid -1. **Direct DOM Manipulation**: Never use `document.querySelector()` or similar -2. **jQuery or External Libraries**: Avoid non-Lightning compatible libraries -3. **Inline Styles**: Use SLDS classes instead of `style` attributes -4. **Global CSS**: All styles should be scoped to the component -5. **Hardcoded Values**: Use custom labels, custom metadata, or constants -6. **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible -7. **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()` +- **Direct DOM Manipulation**: Never use `document.querySelector()` or similar +- **jQuery or External Libraries**: Avoid non-Lightning compatible libraries +- **Inline Styles**: Use SLDS classes instead of `style` attributes +- **Global CSS**: All styles should be scoped to the component +- **Hardcoded Values**: Use custom labels, custom metadata, or constants +- **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible +- **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`