MEP Next v1#6201
Conversation
Pure rename to preserve git history under the new mep-next/ structure. Import path updates follow in the next commit.
Clears the path so the upcoming `git mv preview.js → mep-next.js` will be detected as a rename rather than a modification.
Pure rename to preserve full git history under mep-next/. The empty mep-next.js placeholder was removed in the prior commit so git detects this as a clean rename (100% similarity), not a modification. Import path updates follow in the next commit.
Updates 5 external callers + the moved files' own relative paths after moving preview.js/.css/.test to libs/features/mep/mep-next/mep-next.{js,css,test.js}.
Splits the 466-line M@S section (MAS_OSI_SELECTOR, market detection, card action stacks, badge injection, content observer) module. mep-next.js shrinks from 1805 → 1340 lines.
Extracts the 54-line CaaS section (CAAS_BADGE_CLASS, derivePathsForCards, injectCaasBadges, removeCaasBadges, caasObserver, watchForCaasBlocks, unwatchForCaasBlocks) into its own module. mep-next.js shrinks from 1340 → 1286 lines. Preview-host rewrite helpers (PREVIEW_HOST_RE, BLOG_PATH_RE, PREVIEW_REPO_HOST_RE, rewriteForPreviewHost, rewriteBlogPreviewHost) stay in mep-next.js — they were physically adjacent to CaaS code but are shared utilities used by the popup logic elsewhere in the file. Imports: - mep-next.js: drops mepCaasConfigUrls (only used in CaaS); adds import block from ./mep-caas.js for the 4 identifiers still referenced (injectCaasBadges, removeCaasBadges, watchForCaasBlocks, unwatchForCaasBlocks) - mep-caas.js: imports createTag from utils and mepCaasConfigUrls from caas/utils Single commit so `git log -C --find-copies-harder mep-caas.js` traces provenance back through mep-next.js → preview.js. Tests: no test file changes needed (no test references CaaS internals). mep-next (118), mep-mas-subcollection (34), and mmm tests all pass.
Adds sidekick-auth.js composable that walks nested shadow DOMs to detect env-switcher presence and notifies subscribers when auth resolves. Overlay shows a sign-in prompt when unauthed and swaps to the full drawer in-place (no close/reopen) when auth state changes mid-session.
…ighlight. Update utils to replace mep next call.
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
Commits
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -1,3 +1,5 @@ | |||
| import init from './image-video-link.js'; | |||
There was a problem hiding this comment.
🚫 [eslint] <no-unused-vars> reported by reviewdog 🐶
'init' is defined but never used.
| function setHighlightData(manifests) { | ||
| const { mep } = getConfig(); | ||
| if (!mep?.experiments) return; | ||
|
|
||
| manifests.forEach(({ selectedVariant, manifest }) => { |
There was a problem hiding this comment.
manifests is undefined here and mep.experiments is always at least [] (initialized in personalization.js), so the guard never short-circuits and this throws. That aborts init() before setDefaultFragments() runs — which is why the default fragment badges do not currently render.
| function setHighlightData(manifests) { | |
| const { mep } = getConfig(); | |
| if (!mep?.experiments) return; | |
| manifests.forEach(({ selectedVariant, manifest }) => { | |
| function setHighlightData() { | |
| const { mep } = getConfig(); | |
| if (!mep?.experiments) return; | |
| mep.experiments.forEach(({ selectedVariant, manifest }) => { |
| }); | ||
| } | ||
|
|
||
| function setBadgeHandlers() { |
There was a problem hiding this comment.
setBadgeHandlers here duplicates setBadgeEventListeners above (same selector, same ::before visibility check, same window.open on click) -- both end up attached to document.body. Today it's masked by the setHighlightData crash aborting init() before this line runs, so only one handler is registered. Once that's fixed, both will fire on every badge click and open the fragment in two tabs(tested locally to confirm). Want to pick one and drop the other before this lands.
| onSidekickAuth(async (isAuthed) => { | ||
| const mockAuth = new URLSearchParams(window.location.search).get('mock-auth'); | ||
| const finalAuth = mockAuth !== null ? mockAuth === 'true' : isAuthed; | ||
| // eslint-disable-next-line no-console | ||
| console.log('[mep-overlay] sidekick auth state:', finalAuth, mockAuth !== null ? '(mocked)' : ''); | ||
| if (finalAuth === authenticated) return; | ||
| authenticated = finalAuth; | ||
|
|
||
| const drawerEl = document.querySelector('#mep-drawer'); | ||
| const contentEl = drawerEl?.querySelector('.mep-tab-content[data-tab="0"]'); | ||
| if (!contentEl) return; | ||
|
|
||
| if (!authenticated) { | ||
| contentEl.replaceChildren(buildLoginCard()); | ||
| drawerEl.querySelector('.mep-footer')?.remove(); | ||
| return; | ||
| } | ||
|
|
||
| const cards = buildActionsContent(svgData, pageId); | ||
| contentEl.replaceChildren(...cards); | ||
| drawerEl.appendChild(buildFooter()); | ||
| await Promise.all(cards.map((c) => c.ready).filter(Boolean)); | ||
| setDefaultValues(); | ||
| setPreviewButton(); | ||
| }, { envs: ['prod', 'stage'] }); |
There was a problem hiding this comment.
The following were marked TEMP in the original mep-next-v1-auth-updates commits: the envs: ['prod',
'stage'] expansion (your line 418), the mock-auth override block, and the console.log here. Each had a "remove before merge" comment explaining it was test scaffolding. Those comments got dropped during integration but the code stayed. Can we tighten envs back to ['prod'] and drop the mock-auth block + console.log before this is merged?
| }); | ||
| } | ||
|
|
||
| export function getPageUpdates(label) { |
There was a problem hiding this comment.
The body + subtree pattern itself isn't new — caasObserver and masObserver in mep-caas.js/mep-mas.js (carried over from preview.js) already use it, but they have an unwatch* teardown and an enable-guard inside the callback. What's new here is that getPageUpdates creates a fresh observer per call and gets invoked 4× from CARD_DATA.actions (MEP, Caas, M@S, Other Fragments) -- 4 perpetual document-wide observers with no teardown and no enable guard. Can they reuse the existing watchers, or scope to the drawer count nodes and disconnect when the drawer closes?
| }; | ||
|
|
||
| let debounceTimer; | ||
| const observer = new MutationObserver((mutations) => { |
There was a problem hiding this comment.
This is a second M@S observer doing what watchForMasContent (in mep-mas.js) already does -- same body + subtree, same M@S targets. Can the summary refresh hook into the existing watcher instead of starting a parallel one?
| import { | ||
| } from '../mep-caas.js'; |
| @@ -1780,7 +1226,7 @@ export async function saveToMmm() { | |||
| } | |||
| export default async function decoratePreviewMode() { | |||
There was a problem hiding this comment.
After utils.js switched the preview entry to mep-overlay-highlight.js + mep-overlay.js, decoratePreviewMode here is no longer reachable in production -- and most of the helpers only it calls go with it:
Dead (delete):
- createPreviewPill
- addHighlightData (duplicate of setHighlightData in mep-overlay-highlight.js)
- markDefaultFragments (duplicate of setDefaultFragments)
- addFragmentBadgeClickHandlers (duplicate of the badge-click handler in mep-overlay-highlight.js)
Not replicated in the new overlay -- needs porting before delete:
- adjustBadgesForZeroHeightSections and adjustStackedBadges. These write --badge-top-offset, which the new overlay
reads (mep-overlay-highlight.js:221, mep-overlay-highlight.css:196) but never writes. They handle badges in zero-height sections and stacked display: contents badges -- both currently broken on the new path (false-green tests mask this since they exercise decoratePreviewMode).
Duplicated and still in use -- maybe consolidate to one home:
- API_URLS, parseMepConfig, parsePageAndUrl (also defined in mep-overlay-logic.js; reached by mmm.js through this
file, so the surviving copy needs to live somewhere both paths can import from)
Live, unchanged: getMepPopup, saveToMmm, escapeHtml, mep-next.css (for mmm.js/personalization.js).
Can decoratePreviewMode + the dead helpers be deleted, the two adjust-badge functions ported to the new overlay init, and the duplicates consolidated?
There was a problem hiding this comment.
This file's 118 tests are all run against decoratePreviewMode from mep-next.js, which is no longer the production preview path — utils.js now loads mep-overlay-highlight.js + mep-overlay.js. The live mep-overlay-* path has zero coverage, so green CI here doesn't tell us whether the new overlay works.
Can the tests be retargeted at the live entry points before this merges?
|
A couple CI items:
|
|
This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR. |
2 participants
This is a complete rewrite of the MEP button.
The primary objective is to clean up the code base, decouple functions and maintain readability for future edits while implementing new features. All overlay code should live in the mep-overlay folder with shared functions eventually being moved into mep-next.js as needed.
GENERAL
AUTHENTICATION
Logged in
Logged out
MEP TAB
DRAWER
Mep Logo
Close Icon
Tabs
ACTIONS
MEP Manifest List
Highlight Toggles
Toggles
Spoof Geo
Load Manifest
Preview button
SUMMARY
Should have Page, Consent, Lingo, M@S and CaaS cards with the following data.
Page
Consent
Lingo
Resolves: MWPW-195019
Test URLs:
(Any Milo page, compare old MEP button to new MEP button.)
Psi: https://mep-next-v1--milo--adobecom.aem.page/?martech=off