@salesforce/afv-skills 1.56.0 → 1.57.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/commerce-b2b-open-code-components-integrate/SKILL.md +1 -1
- package/skills/commerce-b2b-open-code-components-replace/SKILL.md +16 -16
- package/skills/dx-devops-project-manage/SKILL.md +1 -1
- package/skills/experience-cms-content-generate/SKILL.md +1 -1
- package/skills/experience-cms-content-render/SKILL.md +3 -3
- package/skills/experience-cms-content-render/assets/angular/MediaRenderer.component.ts +35 -7
- package/skills/experience-cms-content-render/assets/angular/cms-item.service.ts +13 -4
- package/skills/experience-cms-content-render/assets/react/MediaRenderer.tsx +30 -8
- package/skills/experience-cms-content-render/assets/react/useCmsItem.ts +14 -4
- package/skills/experience-cms-content-render/assets/shared/cmsCore.types.ts +11 -1
- package/skills/experience-cms-content-render/assets/shared/externalRefs.ts +1 -1
- package/skills/experience-cms-content-render/assets/shared/mediaLabels.ts +62 -0
- package/skills/experience-cms-content-render/references/init-scaffold.md +13 -6
- package/skills/experience-content-media-stock-image-search/SKILL.md +0 -1
- package/skills/experience-lwc-design-generate/SKILL.md +1 -1
- package/skills/experience-lwc-legacy-migrate/SKILL.md +212 -0
- package/skills/experience-lwc-legacy-migrate/assets/lo20-host-page-template.html +192 -0
- package/skills/experience-lwc-legacy-migrate/references/aura-to-lwc-completeness-checklist.md +188 -0
- package/skills/experience-lwc-legacy-migrate/references/lightning-out-2-system-reference.md +495 -0
- package/skills/experience-lwc-legacy-migrate/references/lightning-out-beta-to-2-migration.md +824 -0
- package/skills/experience-lwc-legacy-migrate/scripts/convert-lo-names.py +94 -0
- package/skills/experience-lwc-legacy-migrate/scripts/validate-lo20-page.py +133 -0
- package/skills/experience-ui-bundle-project-generate/SKILL.md +1 -1
- package/skills/integration-connectivity-connected-app-configure/SKILL.md +5 -5
- package/skills/integration-connectivity-generate/SKILL.md +10 -10
- package/skills/integration-connectivity-generate/scripts/configure-named-credential.sh +2 -2
- package/skills/platform-apex-test-generate/SKILL.md +1 -1
- package/skills/platform-apex-test-run/SKILL.md +1 -1
- package/skills/platform-custom-field-generate/SKILL.md +1 -1
- package/skills/platform-custom-lightning-type-generate/SKILL.md +1 -1
- package/skills/platform-custom-metadata-type-generate/SKILL.md +1 -1
- package/skills/platform-custom-object-generate/SKILL.md +1 -1
- package/skills/platform-custom-report-type-generate/SKILL.md +1 -1
- package/skills/platform-custom-setting-generate/SKILL.md +1 -1
- package/skills/platform-data-and-tooling-api-context-get/SKILL.md +1 -1
- package/skills/platform-data-manage/SKILL.md +10 -10
- package/skills/platform-flexipage-generate/SKILL.md +1 -1
- package/skills/platform-lightning-app-coordinate/SKILL.md +1 -1
- package/skills/platform-metadata-api-context-get/SKILL.md +1 -1
- package/skills/platform-metadata-retrieve/SKILL.md +1 -1
- package/skills/platform-permission-set-generate/SKILL.md +1 -1
- package/skills/platform-report-generate/SKILL.md +1 -1
- package/skills/platform-salesforce-connect-adapter-generate/SKILL.md +4 -4
- package/skills/platform-sharing-owd-configure/SKILL.md +1 -1
- package/skills/platform-sharing-rules-generate/SKILL.md +1 -1
- package/skills/platform-soql-query/SKILL.md +1 -1
- package/skills/platform-value-set-generate/SKILL.md +1 -1
- package/skills/service-agentforce-human-escalation-configure/SKILL.md +4 -0
- package/skills/service-agentforce-human-escalation-configure/scripts/tests/_bootstrap.py +26 -6
- package/skills/service-agentforce-human-escalation-configure/scripts/tests/test_escalation_contracts.py +5 -4
- package/skills/service-de-waba-integrate/SKILL.md +2 -1
- package/skills/service-digital-engagement-deployment-configure/SKILL.md +2 -0
- package/skills/service-digital-engagement-deployment-configure/scripts/check-api-version.sh +29 -0
- package/skills/service-email-to-case-configure/SKILL.md +1 -1
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: experience-lwc-legacy-migrate
|
|
3
|
+
description: "Migrate legacy Salesforce UI stacks onto modern LWC — Aura → LWC conversion completeness verification and Lightning Out Beta → Lightning Out 2.0 host-page migration. TRIGGER on \"verify Aura to LWC migration completeness\", \"migrate Lightning Out Beta to LO 2.0\", \"upgrade $Lightning.use() to <lightning-out-application>\", \"replace hardcoded LO tokens with OAuth PKCE\", \"write an LO 2.0 host page\", or an external Lightning Out page that stopped rendering; also `.cmp`/`.js-meta.xml` files alongside LWC. DO NOT TRIGGER for the initial Aura-to-LWC conversion (use experience-aura-lwc-migrate), a React-to-LWC migration, or building a new LWC (use experience-lwc-design-generate)."
|
|
4
|
+
metadata:
|
|
5
|
+
version: "1.0"
|
|
6
|
+
domains: ["Experience"]
|
|
7
|
+
relatedSkills:
|
|
8
|
+
- "experience-aura-lwc-migrate"
|
|
9
|
+
- "experience-lwc-design-generate"
|
|
10
|
+
cliTools:
|
|
11
|
+
- tool: ["python3"]
|
|
12
|
+
semver: ">=3.8"
|
|
13
|
+
---
|
|
14
|
+
<!-- adk-managed-skill -->
|
|
15
|
+
|
|
16
|
+
# Migrating Legacy LWC Stacks
|
|
17
|
+
|
|
18
|
+
Two distinct migration workflows live here because users in the middle of
|
|
19
|
+
migrating Aura components are often also migrating Lightning Out host pages
|
|
20
|
+
— they benefit from one skill that knows both.
|
|
21
|
+
|
|
22
|
+
| Migration | Use when | Reference |
|
|
23
|
+
|------------------------------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------------|
|
|
24
|
+
| Aura → LWC completeness check | An Aura component was converted, verify nothing is lost | [aura-to-lwc-completeness-checklist.md](references/aura-to-lwc-completeness-checklist.md) |
|
|
25
|
+
| Lightning Out Beta → LO 2.0 | Migrating an external host page off `lightning.out.js` | [lightning-out-beta-to-2-migration.md](references/lightning-out-beta-to-2-migration.md) |
|
|
26
|
+
|
|
27
|
+
## When to Use This Skill
|
|
28
|
+
|
|
29
|
+
- User has already converted an Aura component to LWC and wants a structured
|
|
30
|
+
completeness check.
|
|
31
|
+
- User has a non-Salesforce host page that embeds Salesforce LWC via
|
|
32
|
+
Lightning Out Beta and needs to move to LO 2.0.
|
|
33
|
+
- User is upgrading `$Lightning.use()` / `$Lightning.createComponent()` calls
|
|
34
|
+
to the `<lightning-out-application>` web component pattern.
|
|
35
|
+
- User needs to replace a hardcoded LO auth token with OAuth PKCE + front-door
|
|
36
|
+
flow.
|
|
37
|
+
|
|
38
|
+
If the user wants to build a brand-new LO 2.0 host page from scratch (no Beta
|
|
39
|
+
code to migrate), the LO 2.0 system reference inside this skill is still the
|
|
40
|
+
right source of truth — point them at it directly.
|
|
41
|
+
|
|
42
|
+
## Prerequisites
|
|
43
|
+
|
|
44
|
+
- Access to the source (Aura component files or Beta host page).
|
|
45
|
+
- For LO 2.0 migration: ability to create an External Client App (ECA) in
|
|
46
|
+
Salesforce Setup (Consumer Key required) and optionally a Lightning Out 2.0
|
|
47
|
+
App (18-char App ID).
|
|
48
|
+
- For Aura migration: access to the LWC conversion, including any `__tests__`
|
|
49
|
+
(Jest) and `__utam__` (UTAM) folders if they exist.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## Workflow A — Aura → LWC Completeness Check
|
|
53
|
+
|
|
54
|
+
Goal: rate an already-done Aura-to-LWC conversion across 12 dimensions and
|
|
55
|
+
produce actionable recommendations.
|
|
56
|
+
|
|
57
|
+
### Step A1 — Identify the component
|
|
58
|
+
|
|
59
|
+
Ask the user for the component name (e.g. `accountTile`). Locate the Aura
|
|
60
|
+
source (`{componentName}.cmp`, controller, helper, CSS) and the LWC output
|
|
61
|
+
(`{componentName}.html`, `.js`, `.css`, `.js-meta.xml`).
|
|
62
|
+
|
|
63
|
+
### Step A2 — Run the checklist
|
|
64
|
+
|
|
65
|
+
Follow [aura-to-lwc-completeness-checklist.md](references/aura-to-lwc-completeness-checklist.md)
|
|
66
|
+
verbatim:
|
|
67
|
+
|
|
68
|
+
- Score the conversion on all 12 metrics (Functional Parity, Event Handling,
|
|
69
|
+
Data Binding & State, UI/UX Parity, Extensibility & Modularity, Error
|
|
70
|
+
Handling, Localization, Security & Access Control, Performance, Salesforce
|
|
71
|
+
Best Practices, Jest Test Coverage, UTAM Page Objects).
|
|
72
|
+
- Use the six-rating scale: Excellent / Good / Satisfactory / Limited / Poor
|
|
73
|
+
/ Missing.
|
|
74
|
+
- Present the output as a list (not a table), per the reference.
|
|
75
|
+
|
|
76
|
+
### Step A3 — Summarize + recommend
|
|
77
|
+
|
|
78
|
+
End with an overall confidence statement and a prioritized list of specific,
|
|
79
|
+
actionable recommendations (what to fix, in what order).
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
## Workflow B — Lightning Out Beta → LO 2.0
|
|
83
|
+
|
|
84
|
+
Goal: transform a Lightning Out Beta host page into a Lightning Out 2.0 host
|
|
85
|
+
page while leaving the customer's HTML structure, styling, and business logic
|
|
86
|
+
intact.
|
|
87
|
+
|
|
88
|
+
### Step B1 — Read the LO 2.0 mental model
|
|
89
|
+
|
|
90
|
+
Internalize the architecture *before* editing code:
|
|
91
|
+
[lightning-out-2-system-reference.md](references/lightning-out-2-system-reference.md).
|
|
92
|
+
|
|
93
|
+
Key takeaway: LO 2.0 is not a library upgrade. It runs the LWC inside an
|
|
94
|
+
iframe with a closed shadow DOM — host-page JS cannot touch the LWC and
|
|
95
|
+
vice versa, and host-page CSS does not cascade in.
|
|
96
|
+
|
|
97
|
+
### Step B2 — Identify Beta patterns
|
|
98
|
+
|
|
99
|
+
Use Phase 1 of the migration guide to locate:
|
|
100
|
+
|
|
101
|
+
- **Pattern A** — Script tag loading `lightning.out.js` (extract the domain).
|
|
102
|
+
- **Pattern B** — Config variables (endpoint, Aura app, component, token).
|
|
103
|
+
- **Pattern C** — `$Lightning.use(...)` call.
|
|
104
|
+
- **Pattern D** — `$Lightning.createComponent(...)` call.
|
|
105
|
+
- **Pattern E** — DOM target element referenced by the 3rd arg of Pattern D.
|
|
106
|
+
|
|
107
|
+
See [lightning-out-beta-to-2-migration.md § Phase 1](references/lightning-out-beta-to-2-migration.md).
|
|
108
|
+
|
|
109
|
+
### Step B3 — Apply transformations
|
|
110
|
+
|
|
111
|
+
The script-tag URL, the component tag name, and the attribute names are
|
|
112
|
+
**deterministic** conversions — derive them with the helper script so they are
|
|
113
|
+
exact every time (namespace preserved, camelCase → kebab-case, Beta host →
|
|
114
|
+
versioned LO 2.0 library URL):
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
python3 scripts/convert-lo-names.py \
|
|
118
|
+
--component c:myComponent \
|
|
119
|
+
--attributes recordId,ownerId \
|
|
120
|
+
--my-domain https://<DOMAIN>.lightning.force.com
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
It prints the `<c-...>` tag, the kebab-case attributes, and the versioned LO
|
|
124
|
+
2.0 library URL. Then work through Phase 2 of the guide:
|
|
125
|
+
|
|
126
|
+
1. **Script tag** — use the `library-url` the script prints; add `async`.
|
|
127
|
+
2. **Component name / attributes** — use the `component-tag` and kebab-case
|
|
128
|
+
attributes the script prints.
|
|
129
|
+
3. **Component tag** — add the `<c-...>` tag directly in HTML at the target
|
|
130
|
+
location (a judgement call — place it where the Beta render target was).
|
|
131
|
+
4. **Replace the `$Lightning` block** — delete it entirely and start from
|
|
132
|
+
[assets/lo20-host-page-template.html](assets/lo20-host-page-template.html),
|
|
133
|
+
filling in the config constants; it already includes the helper functions,
|
|
134
|
+
`mountLo20(frontdoorUrl, orgUrl)`, `boot()`, and the OAuth listeners.
|
|
135
|
+
|
|
136
|
+
### Step B4 — Six non-negotiable rules
|
|
137
|
+
|
|
138
|
+
These rules cause silent runtime failures if violated, and every one is a
|
|
139
|
+
deterministic code-structure check. Enforce them with the validator script
|
|
140
|
+
rather than by eye — run it against the migrated page and fix every FAIL:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
python3 scripts/validate-lo20-page.py <migrated-page.html>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
It prints a PASS/FAIL line per rule (plus the LO 2.0 library and Beta-removal
|
|
147
|
+
checks) and exits non-zero if any rule fails. The six rules it enforces:
|
|
148
|
+
|
|
149
|
+
1. `customElements.whenDefined(...)` must receive a **literal string**, not
|
|
150
|
+
the `components` variable.
|
|
151
|
+
2. `mountLo20(frontdoorUrl, orgUrl)` must accept two parameters.
|
|
152
|
+
3. Call `clearCachedResult()` before every `mountLo20(...)`.
|
|
153
|
+
4. Always pass both parameters when calling `mountLo20(...)`, even if
|
|
154
|
+
`orgUrl` is undefined.
|
|
155
|
+
5. Wrap all initialization in `boot()` and call `boot()` at the end.
|
|
156
|
+
6. The component tag has **no inline `display:none`** — control visibility
|
|
157
|
+
via the loading indicator.
|
|
158
|
+
|
|
159
|
+
### Step B5 — Salesforce setup
|
|
160
|
+
|
|
161
|
+
- **External Client App (ECA)** — Setup → App Manager → New Connected App →
|
|
162
|
+
External Client App. Enable OAuth with PKCE. Copy the Consumer Key.
|
|
163
|
+
- **Lightning Out 2.0 App** — apply this decision before continuing:
|
|
164
|
+
|
|
165
|
+
| Condition | Action |
|
|
166
|
+
|---|---|
|
|
167
|
+
| Host page sets `app-id="..."` | Setup → Lightning Out → New LO App; copy the 18-character App ID into the host page's `app-id` attribute |
|
|
168
|
+
| Host page embeds LWC directly (no `app-id`) | Skip the LO App entirely |
|
|
169
|
+
- Helper files the migration assumes exist alongside the host page:
|
|
170
|
+
`frontdoor-url.html` (OAuth callback) and `utils/LightningOutAuth.js`
|
|
171
|
+
(PKCE implementation).
|
|
172
|
+
|
|
173
|
+
### Step B6 — Run the LO 2.0 verification checklist
|
|
174
|
+
|
|
175
|
+
First run `python3 scripts/validate-lo20-page.py <migrated-page.html>` to clear
|
|
176
|
+
the mechanical checks, then walk the remaining manual items in the full
|
|
177
|
+
post-migration checklist — cover every item before declaring the migration
|
|
178
|
+
done. See the "Verification Checklist" section at the end of
|
|
179
|
+
[lightning-out-beta-to-2-migration.md](references/lightning-out-beta-to-2-migration.md).
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
## Verification Checklist (high level)
|
|
183
|
+
|
|
184
|
+
For Aura → LWC:
|
|
185
|
+
- [ ] All 12 completeness metrics rated with a justification.
|
|
186
|
+
- [ ] Output in list form (not table), per the reference.
|
|
187
|
+
- [ ] Overall confidence statement present.
|
|
188
|
+
- [ ] Concrete, prioritized recommendations listed.
|
|
189
|
+
|
|
190
|
+
For LO Beta → LO 2.0:
|
|
191
|
+
- [ ] Script tag uses `.my.salesforce.com/lightning/lightning.out.latest/index.iife.prod.js` with `async`.
|
|
192
|
+
- [ ] No references to `$Lightning.use` / `$Lightning.createComponent` remain.
|
|
193
|
+
- [ ] Component name is kebab-case; attributes are kebab-case.
|
|
194
|
+
- [ ] `mountLo20(frontdoorUrl, orgUrl)` takes two parameters.
|
|
195
|
+
- [ ] `customElements.whenDefined(...)` uses a literal string.
|
|
196
|
+
- [ ] All initialization wrapped in `boot()` and `boot()` is called once.
|
|
197
|
+
- [ ] OAuth PKCE flow replaces hardcoded token; postMessage, BroadcastChannel,
|
|
198
|
+
and storage listeners all present and defensively coded.
|
|
199
|
+
- [ ] Component tag has no inline `display:none`.
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
## Troubleshooting
|
|
203
|
+
|
|
204
|
+
- **LO 2.0 mount hangs** — custom element not registered. Verify the library
|
|
205
|
+
script tag URL and that the `app-id` / `frontdoor-url` values are correct.
|
|
206
|
+
- **Component renders empty** — attributes probably still in camelCase. LO 2.0
|
|
207
|
+
reads HTML attributes which must be kebab-case.
|
|
208
|
+
- **OAuth callback never fires** — one of postMessage / BroadcastChannel /
|
|
209
|
+
storage listeners was dropped. LO 2.0 needs all three.
|
|
210
|
+
- **Aura checklist scored "Missing" on UTAM or Jest** — may be acceptable if
|
|
211
|
+
the team has an alternative test strategy; flag in recommendations rather
|
|
212
|
+
than block.
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--
|
|
3
|
+
Lightning Out 2.0 host-page template.
|
|
4
|
+
|
|
5
|
+
Copy this file as the starting point for a migrated host page, then fill in
|
|
6
|
+
the CONFIGURATION constants and replace `c-your-component` with the migrated
|
|
7
|
+
component tag + its kebab-case attributes. This template already satisfies the
|
|
8
|
+
six non-negotiable LO 2.0 rules; run scripts/validate-lo20-page.py against your
|
|
9
|
+
filled-in copy to confirm nothing regressed.
|
|
10
|
+
|
|
11
|
+
Placeholders to replace:
|
|
12
|
+
YOUR_ORG -> your org My Domain host (…my.salesforce.com)
|
|
13
|
+
YOUR_ECA_CONSUMER_KEY, YOUR_18_CHAR_APP_ID (optional)
|
|
14
|
+
c-your-component -> the migrated component tag (see scripts/convert-lo-names.py)
|
|
15
|
+
/lo20.html -> this page's own filename (lo2_returnTo)
|
|
16
|
+
-->
|
|
17
|
+
<html lang="en">
|
|
18
|
+
<head>
|
|
19
|
+
<meta charset="utf-8" />
|
|
20
|
+
<title>Your Page Title</title>
|
|
21
|
+
<style>
|
|
22
|
+
.card { border: 1px solid #d8dde6; padding: 16px; border-radius: 4px; }
|
|
23
|
+
.muted { color: #706e6b; font-size: 0.8rem; }
|
|
24
|
+
</style>
|
|
25
|
+
<!-- LO 2.0 library: My Domain host, versioned path, loaded async -->
|
|
26
|
+
<script async src="https://YOUR_ORG.my.salesforce.com/lightning/lightning.out.latest/index.iife.prod.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<h1>Your Page Title</h1>
|
|
30
|
+
|
|
31
|
+
<div class="card">
|
|
32
|
+
<div id="loading" role="status" aria-live="polite">
|
|
33
|
+
<div><strong>Loading…</strong></div>
|
|
34
|
+
<div class="muted">
|
|
35
|
+
If this hangs, confirm your <code>app-id</code> and <code>frontdoor-url</code> values.
|
|
36
|
+
</div>
|
|
37
|
+
<div style="margin-top: 10px">
|
|
38
|
+
<button id="connectBtn" type="button">Connect to Salesforce</button>
|
|
39
|
+
<span class="muted" style="margin-left: 8px">(opens auth in this tab)</span>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- LO 2.0 mount point -->
|
|
44
|
+
<div id="loAppMount"></div>
|
|
45
|
+
|
|
46
|
+
<!-- Component tag (NO inline display style on the tag itself) -->
|
|
47
|
+
<c-your-component></c-your-component>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
// ======= 1. CONFIGURATION =======
|
|
52
|
+
const ECA_CONSUMER_KEY = "YOUR_ECA_CONSUMER_KEY";
|
|
53
|
+
const LO_APP_ID = "YOUR_18_CHAR_APP_ID"; // Optional — empty string if not required
|
|
54
|
+
const ORG_MYDOMAIN_URL = "https://YOUR_ORG.my.salesforce.com";
|
|
55
|
+
const components = "c-your-component";
|
|
56
|
+
|
|
57
|
+
// ======= 2. DOM REFERENCES =======
|
|
58
|
+
const loadingEl = document.getElementById('loading');
|
|
59
|
+
const connectBtn = document.getElementById('connectBtn');
|
|
60
|
+
const loAppMount = document.getElementById('loAppMount');
|
|
61
|
+
|
|
62
|
+
// ======= 3. HELPER FUNCTIONS =======
|
|
63
|
+
function setLoading(text) {
|
|
64
|
+
const strong = loadingEl?.querySelector?.('div strong');
|
|
65
|
+
if (strong) strong.textContent = text;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function showError(msg) {
|
|
69
|
+
console.error('LO 2.0 Error:', msg);
|
|
70
|
+
if (loadingEl) {
|
|
71
|
+
loadingEl.innerHTML = "<strong>Failed to start LO 2.0.</strong><div class='muted'>" + msg + '</div>';
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function readCachedResult() {
|
|
76
|
+
try {
|
|
77
|
+
const raw = localStorage.getItem('lo2_frontdoor_result');
|
|
78
|
+
if (!raw) return null;
|
|
79
|
+
return JSON.parse(raw);
|
|
80
|
+
} catch {
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function clearCachedResult() {
|
|
86
|
+
try {
|
|
87
|
+
localStorage.removeItem('lo2_frontdoor_result');
|
|
88
|
+
} catch {
|
|
89
|
+
// ignore
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// ======= 4. MOUNT FUNCTION (two parameters) =======
|
|
94
|
+
function mountLo20(frontdoorUrl, orgUrl) {
|
|
95
|
+
setLoading('Initializing Lightning Out 2.0…');
|
|
96
|
+
|
|
97
|
+
// Prevent duplicate mounts
|
|
98
|
+
if (loAppMount && loAppMount.querySelector('lightning-out-application')) return;
|
|
99
|
+
|
|
100
|
+
function tryMount() {
|
|
101
|
+
if (!customElements?.get?.('lightning-out-application')) return false;
|
|
102
|
+
|
|
103
|
+
const el = document.createElement('lightning-out-application');
|
|
104
|
+
el.setAttribute('components', components);
|
|
105
|
+
if (LO_APP_ID) el.setAttribute('app-id', LO_APP_ID);
|
|
106
|
+
el.setAttribute('frontdoor-url', frontdoorUrl);
|
|
107
|
+
|
|
108
|
+
(loAppMount || document.body).appendChild(el);
|
|
109
|
+
return true;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
const start = Date.now();
|
|
113
|
+
(function tick() {
|
|
114
|
+
if (tryMount()) return;
|
|
115
|
+
if (Date.now() - start > 15000) {
|
|
116
|
+
showError('Failed to initialize Lightning Out 2.0 (custom element not registered).');
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
setTimeout(tick, 50);
|
|
120
|
+
})();
|
|
121
|
+
|
|
122
|
+
// Rule 1: literal string, NOT the `components` variable
|
|
123
|
+
customElements.whenDefined('c-your-component').then(() => {
|
|
124
|
+
if (loadingEl) loadingEl.style.display = 'none';
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// ======= 5. BOOT FUNCTION (ALL INIT LOGIC) =======
|
|
129
|
+
function boot() {
|
|
130
|
+
try {
|
|
131
|
+
setLoading('Ready to authenticate.');
|
|
132
|
+
|
|
133
|
+
// Store config for the callback page
|
|
134
|
+
localStorage.setItem('orgMyDomainURL', ORG_MYDOMAIN_URL);
|
|
135
|
+
localStorage.setItem('loAppID', LO_APP_ID);
|
|
136
|
+
localStorage.setItem('loECAKey', ECA_CONSUMER_KEY);
|
|
137
|
+
localStorage.setItem('lo2_returnTo', '/lo20.html'); // this page's filename
|
|
138
|
+
|
|
139
|
+
// Listen for callback results by multiple mechanisms
|
|
140
|
+
window.addEventListener('message', (evt) => {
|
|
141
|
+
const data = evt?.data;
|
|
142
|
+
if (!data) return;
|
|
143
|
+
if (data.error) return showError(`Auth error: ${data.error}`);
|
|
144
|
+
if (!data.frontdoorUrl) return;
|
|
145
|
+
clearCachedResult();
|
|
146
|
+
mountLo20(data.frontdoorUrl, data.orgUrl);
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
try {
|
|
150
|
+
const bc = new BroadcastChannel('lo2auth');
|
|
151
|
+
bc.onmessage = (evt) => {
|
|
152
|
+
const data = evt?.data;
|
|
153
|
+
if (!data) return;
|
|
154
|
+
if (data.error) return showError(`Auth error: ${data.error}`);
|
|
155
|
+
if (!data.frontdoorUrl) return;
|
|
156
|
+
clearCachedResult();
|
|
157
|
+
mountLo20(data.frontdoorUrl, data.orgUrl);
|
|
158
|
+
};
|
|
159
|
+
} catch (e) {
|
|
160
|
+
// BroadcastChannel not supported, ignore
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
window.addEventListener('storage', (evt) => {
|
|
164
|
+
if (evt.key !== 'lo2_frontdoor_result') return;
|
|
165
|
+
const data = readCachedResult();
|
|
166
|
+
if (!data) return;
|
|
167
|
+
if (data.error) return showError(`Auth error: ${data.error}`);
|
|
168
|
+
if (!data.frontdoorUrl) return;
|
|
169
|
+
mountLo20(data.frontdoorUrl, data.orgUrl);
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
// If the user already completed auth in another tab, pick up the cached result
|
|
173
|
+
const cached = readCachedResult();
|
|
174
|
+
if (cached?.frontdoorUrl) {
|
|
175
|
+
mountLo20(cached.frontdoorUrl, cached.orgUrl);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
connectBtn?.addEventListener('click', () => {
|
|
179
|
+
clearCachedResult();
|
|
180
|
+
setLoading('Redirecting to OAuth…');
|
|
181
|
+
window.location.assign('/frontdoor-url.html');
|
|
182
|
+
});
|
|
183
|
+
} catch (e) {
|
|
184
|
+
showError((e && (e.stack || e.message)) || String(e));
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// ======= 6. CALL BOOT =======
|
|
189
|
+
boot();
|
|
190
|
+
</script>
|
|
191
|
+
</body>
|
|
192
|
+
</html>
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# Aura to LWC Conversion Completeness Checklist
|
|
2
|
+
|
|
3
|
+
You are a Salesforce principal architect. Your task is to help a developer verify whether their conversion of a Salesforce Aura component to a Lightning Web Component (LWC) is truly complete. This is a developer-focused self-checklist, not a platform evaluation or LLM-as-judge scenario. The goal is to provide confidence and clarity for the developer, not to benchmark platform performance.
|
|
4
|
+
|
|
5
|
+
## Instructions
|
|
6
|
+
|
|
7
|
+
1. **Review the Completeness Metrics:**
|
|
8
|
+
For each of the following metrics, use the provided rating to assess the LWC conversion. For each metric, select one of the following qualitative ratings:
|
|
9
|
+
|
|
10
|
+
- **Excellent**: Perfect or near-perfect match in understanding and detail
|
|
11
|
+
- **Good**: Strong understanding with minor differences
|
|
12
|
+
- **Satisfactory**: Adequate understanding with some notable differences
|
|
13
|
+
- **Limited**: Basic understanding with significant gaps
|
|
14
|
+
- **Poor**: Major misunderstandings or omissions
|
|
15
|
+
- **Missing**: Issue completely overlooked or fatally misunderstood
|
|
16
|
+
|
|
17
|
+
2. **For Each Metric:**
|
|
18
|
+
|
|
19
|
+
- State the metric and its description
|
|
20
|
+
- Assign a rating (from the list above)
|
|
21
|
+
- Provide a brief justification for the rating
|
|
22
|
+
- Optionally, add one or two sentences explaining any gaps, strengths, or issues
|
|
23
|
+
|
|
24
|
+
3. **Checklist Output:**
|
|
25
|
+
|
|
26
|
+
- Present your results as a list, not a table
|
|
27
|
+
- For each metric, include:
|
|
28
|
+
- Metric name
|
|
29
|
+
- Description
|
|
30
|
+
- Rating
|
|
31
|
+
- Justification/comments
|
|
32
|
+
|
|
33
|
+
4. **Summary and Recommendations:**
|
|
34
|
+
|
|
35
|
+
- At the end, summarize your overall confidence in the conversion's completeness
|
|
36
|
+
- List specific, actionable recommendations to address any gaps or issues
|
|
37
|
+
|
|
38
|
+
5. **Context:**
|
|
39
|
+
|
|
40
|
+
- The component name is: `{{componentName}}`
|
|
41
|
+
- The Aura component file is: `{{componentName}}.cmp`
|
|
42
|
+
- The LWC template file is: `{{componentName}}.html`
|
|
43
|
+
- You have access to supporting files such as controllers, helpers, CSS, blueprints, Jest tests (in `__tests__`), and UTAM page objects (in `__utam__`).
|
|
44
|
+
|
|
45
|
+
6. **Important Notes:**
|
|
46
|
+
- This checklist is a comprehensive aid for developers to verify their work, not a judge of platform performance.
|
|
47
|
+
- The resulting ratings are confidence measures for the developer, not benchmarks.
|
|
48
|
+
- Each metric could, in the future, have a more detailed, dedicated tool for finer-grained verification, but avoid duplicating existing tools unless a true gap is identified.
|
|
49
|
+
- If you find that guidance is unclear or tools are not being applied consistently, note this as a potential process/tooling gap.
|
|
50
|
+
|
|
51
|
+
## Completeness Metrics and Scoring
|
|
52
|
+
|
|
53
|
+
- **Functional Parity**: Are all user-facing features, states, and flows from the Aura component present in the LWC?
|
|
54
|
+
|
|
55
|
+
- _Excellent_: All features and flows are present and work as intended.
|
|
56
|
+
- _Good_: Minor features or flows are missing or slightly altered.
|
|
57
|
+
- _Satisfactory_: Most features are present, but some notable differences exist.
|
|
58
|
+
- _Limited_: Several important features are missing or incomplete.
|
|
59
|
+
- _Poor_: Major features are missing or broken.
|
|
60
|
+
- _Missing_: No attempt at parity.
|
|
61
|
+
|
|
62
|
+
- **Event Handling**: Are all events (custom, platform, UI) handled equivalently in the LWC?
|
|
63
|
+
|
|
64
|
+
- _Excellent_: All events are handled as in Aura.
|
|
65
|
+
- _Good_: Minor event handling differences.
|
|
66
|
+
- _Satisfactory_: Most events handled, some notable gaps.
|
|
67
|
+
- _Limited_: Several events missing or mishandled.
|
|
68
|
+
- _Poor_: Major event handling missing.
|
|
69
|
+
- _Missing_: No event handling present.
|
|
70
|
+
|
|
71
|
+
- **Data Binding & State**: Are all data flows, attributes, and state transitions preserved and correctly mapped?
|
|
72
|
+
|
|
73
|
+
- _Excellent_: All data/state flows are preserved and correct.
|
|
74
|
+
- _Good_: Minor data/state differences.
|
|
75
|
+
- _Satisfactory_: Most data/state flows present, some gaps.
|
|
76
|
+
- _Limited_: Several data/state flows missing.
|
|
77
|
+
- _Poor_: Major data/state issues.
|
|
78
|
+
- _Missing_: No data/state mapping.
|
|
79
|
+
|
|
80
|
+
- **UI/UX Parity**: Is the user interface (including accessibility, responsiveness, and SLDS usage) equivalent?
|
|
81
|
+
|
|
82
|
+
- _Excellent_: UI/UX matches or improves on Aura.
|
|
83
|
+
- _Good_: Minor UI/UX differences.
|
|
84
|
+
- _Satisfactory_: Most UI/UX present, some gaps.
|
|
85
|
+
- _Limited_: Several UI/UX issues.
|
|
86
|
+
- _Poor_: Major UI/UX issues.
|
|
87
|
+
- _Missing_: No UI/UX parity.
|
|
88
|
+
|
|
89
|
+
- **Extensibility & Modularity**: Is the LWC designed for maintainability and future extension?
|
|
90
|
+
|
|
91
|
+
- _Excellent_: Highly modular and extensible.
|
|
92
|
+
- _Good_: Minor modularity/extensibility issues.
|
|
93
|
+
- _Satisfactory_: Adequate, but some concerns.
|
|
94
|
+
- _Limited_: Several modularity/extensibility issues.
|
|
95
|
+
- _Poor_: Major issues.
|
|
96
|
+
- _Missing_: Not modular/extensible.
|
|
97
|
+
|
|
98
|
+
- **Error Handling**: Are all error states and recovery actions present and clear in the LWC?
|
|
99
|
+
|
|
100
|
+
- _Excellent_: All error handling present and clear.
|
|
101
|
+
- _Good_: Minor error handling gaps.
|
|
102
|
+
- _Satisfactory_: Most error handling present, some gaps.
|
|
103
|
+
- _Limited_: Several error handling issues.
|
|
104
|
+
- _Poor_: Major error handling missing.
|
|
105
|
+
- _Missing_: No error handling.
|
|
106
|
+
|
|
107
|
+
- **Localization**: Are all labels/messages localized as in Aura?
|
|
108
|
+
|
|
109
|
+
- _Excellent_: All localization present.
|
|
110
|
+
- _Good_: Minor localization gaps.
|
|
111
|
+
- _Satisfactory_: Most localization present, some gaps.
|
|
112
|
+
- _Limited_: Several localization issues.
|
|
113
|
+
- _Poor_: Major localization missing.
|
|
114
|
+
- _Missing_: No localization.
|
|
115
|
+
|
|
116
|
+
- **Security & Access Control**: Are there any regressions in data access or exposure?
|
|
117
|
+
|
|
118
|
+
- _Excellent_: No regressions, all controls present.
|
|
119
|
+
- _Good_: Minor security/access gaps.
|
|
120
|
+
- _Satisfactory_: Most controls present, some gaps.
|
|
121
|
+
- _Limited_: Several security/access issues.
|
|
122
|
+
- _Poor_: Major security/access issues.
|
|
123
|
+
- _Missing_: No security/access controls.
|
|
124
|
+
|
|
125
|
+
- **Performance**: Is the LWC at least as performant, or improved, compared to Aura?
|
|
126
|
+
|
|
127
|
+
- _Excellent_: Performance matches or improves on Aura.
|
|
128
|
+
- _Good_: Minor performance differences.
|
|
129
|
+
- _Satisfactory_: Most performance present, some gaps.
|
|
130
|
+
- _Limited_: Several performance issues.
|
|
131
|
+
- _Poor_: Major performance issues.
|
|
132
|
+
- _Missing_: No performance consideration.
|
|
133
|
+
|
|
134
|
+
- **Salesforce Best Practices**: Does the LWC follow modern Salesforce LWC and SLDS guidelines?
|
|
135
|
+
|
|
136
|
+
- _Excellent_: All best practices followed.
|
|
137
|
+
- _Good_: Minor best practice gaps.
|
|
138
|
+
- _Satisfactory_: Most best practices followed, some gaps.
|
|
139
|
+
- _Limited_: Several best practice issues.
|
|
140
|
+
- _Poor_: Major best practice issues.
|
|
141
|
+
- _Missing_: No best practices followed.
|
|
142
|
+
|
|
143
|
+
- **Jest Test Coverage**: Are Jest unit tests present (usually in a `__tests__` folder) and do they cover key logic?
|
|
144
|
+
|
|
145
|
+
- _Excellent_: Comprehensive test coverage.
|
|
146
|
+
- _Good_: Minor test coverage gaps.
|
|
147
|
+
- _Satisfactory_: Most key logic covered, some gaps.
|
|
148
|
+
- _Limited_: Several test coverage issues.
|
|
149
|
+
- _Poor_: Major test coverage missing.
|
|
150
|
+
- _Missing_: No tests present.
|
|
151
|
+
|
|
152
|
+
- **UTAM Page Objects**: Are UTAM page objects generated (usually in a `__utam__` folder) for UI automation?
|
|
153
|
+
- _Excellent_: Comprehensive UTAM coverage.
|
|
154
|
+
- _Good_: Minor UTAM coverage gaps.
|
|
155
|
+
- _Satisfactory_: Most key UI flows covered, some gaps.
|
|
156
|
+
- _Limited_: Several UTAM coverage issues.
|
|
157
|
+
- _Poor_: Major UTAM coverage missing.
|
|
158
|
+
- _Missing_: No UTAM page objects present.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Example Output Structure
|
|
163
|
+
|
|
164
|
+
```markdown
|
|
165
|
+
# Aura to LWC Conversion Completeness Checklist
|
|
166
|
+
|
|
167
|
+
- **Functional Parity**
|
|
168
|
+
- Description: Are all user-facing features, states, and flows from the Aura component present in the LWC?
|
|
169
|
+
- Rating: Good
|
|
170
|
+
- Justification: All major features are present, but one minor flow is missing.
|
|
171
|
+
- Comments: The save flow is slightly different, but overall parity is strong.
|
|
172
|
+
|
|
173
|
+
- **Event Handling**
|
|
174
|
+
- Description: Are all events (custom, platform, UI) handled equivalently in the LWC?
|
|
175
|
+
- Rating: Excellent
|
|
176
|
+
- Justification: All events are handled as in Aura.
|
|
177
|
+
|
|
178
|
+
... (repeat for each metric)
|
|
179
|
+
|
|
180
|
+
# Summary
|
|
181
|
+
|
|
182
|
+
Overall, the conversion is strong, with only minor gaps in functional parity and localization. Confidence in completeness is high.
|
|
183
|
+
|
|
184
|
+
# Recommendations
|
|
185
|
+
|
|
186
|
+
- Address the missing flow in functional parity.
|
|
187
|
+
- Improve localization for error messages.
|
|
188
|
+
```
|