Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-23 11:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copilot suggestion updated

Browse Source
This commit is contained in:
Abbas Jafry
2025-12-31 09:34:16 +05:30
parent 996a3571cf
commit 751e36650e
1 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
instructions/lwc.instructions.md
View File

@@ -1,7 +1,6 @@
--- ---
description: "Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform." description: 'Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform.'
applyTo: "force-app/main/default/lwc/**" applyTo: 'force-app/main/default/lwc/**'
--- ---
# LWC Development # LWC Development
@@ -9,7 +8,7 @@ applyTo: "force-app/main/default/lwc/**"
## General Instructions ## General Instructions
- Each LWC should reside in its own folder under `force-app/main/default/lwc/`. - Each LWC should reside in its own folder under `force-app/main/default/lwc/`.
- The folder name should match the component name (e.g., `myComponent` for `myComponent`). - The folder name should match the component name (e.g., `myComponent` folder for the `myComponent` component).
- Each component folder should contain the following files: - Each component folder should contain the following files:
- `myComponent.html`: The HTML template file. - `myComponent.html`: The HTML template file.
- `myComponent.js`: The JavaScript controller file. - `myComponent.js`: The JavaScript controller file.
@@ -276,25 +275,25 @@ export default class MyComponent extends LightningElement {
### 8. Performance Optimization ### 8. Performance Optimization
#### Conditional Rendering #### Conditional Rendering
Prefer `lwc:if`, `lwc:elseif` and `lwc:else` for conditional rendering (API v58.0+). Legacy `if:true` / `if:false` are still supported but should be avoided in new components.
```html ```html
<!-- Use template directives for conditional rendering --> <!-- Use template directives for conditional rendering -->
<template if:true={isLoading}> <template lwc:if={isLoading}>
<lightning-spinner alternative-text="Loading..."></lightning-spinner> <lightning-spinner alternative-text="Loading..."></lightning-spinner>
</template> </template>
<template lwc:elseif={error}>
<template if:false={isLoading}> <div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
{error.message}
</div>
</template>
<template lwc:else>
<template for:each={items} for:item="item"> <template for:each={items} for:item="item">
<div key={item.id} class="slds-var-m-bottom_small"> <div key={item.id} class="slds-var-m-bottom_small">
{item.name} {item.name}
</div> </div>
</template> </template>
</template> </template>
<template if:true={error}>
<div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
{error.message}
</div>
</template>
``` ```
### 9. Accessibility Best Practices ### 9. Accessibility Best Practices