MWPW-189894: Lingo issue with placeholder fix

io/www/src/fragment/pipeline.js

@@ -143,6 +143,7 @@ async function main(params) {
 }
 
 async function mainProcess(context) {
+    context.requestLocale = context.locale;
     const cachedMetadata = await getRequestMetadata(context);
     const metadataContext = extractContextFromMetadata(cachedMetadata);
     context = { ...context, ...metadataContext };

io/www/src/fragment/transformers/customize.js

@@ -1,7 +1,6 @@
-import { odinReferences, odinUrl } from '../utils/paths.js';
-import { fetch, getFragmentId, getRequestInfos } from '../utils/common.js';
+import { getRequestInfos } from '../utils/common.js';
 import { log, logDebug } from '../utils/log.js';
-import { getDefaultLocaleCode, getLocaleCode, getRegionLocales, parseLocaleCode } from '../locales.js';
+import { computeRegionLocale, getDefaultLanguageVariation } from './fetchFragment.js';
 
 const PZN_FOLDER = '/pzn/';
 
@@ -13,53 +12,16 @@ function skimFragmentFromReferences(fragment) {
     return skimmedFragment;
 }
 
-/**
- * get fragment associated to default language, just returning the body
- * @param {*} context
- *  - 'locale' comes from request parameter, so can be optional
- *  - 'parsedLocale' is the actual location of the fetched fragment
- * @returns null if something wrong, [] if not found, body if found
- */
-async function getDefaultLanguageVariation(context) {
-    let { body } = context;
-    const { surface, locale, fragmentPath, preview, parsedLocale } = context;
-    // if no 'locale' request parameter, serve fragment as is
-    if (!locale) {
-        context.defaultLocale = parsedLocale;
-        return { body, parsedLocale, status: 200 };
-    }
-    const defaultLocale = getDefaultLocaleCode(surface, locale);
-    if (!defaultLocale) {
-        return { status: 400, message: `Default locale not found for requested locale '${locale}'` };
-    }
-    if (defaultLocale !== parsedLocale) {
-        logDebug(() => `Looking for fragment id for ${surface}/${defaultLocale}/${fragmentPath}`, context);
-        const defaultLocaleIdUrl = odinUrl(surface, { locale: defaultLocale, fragmentPath, preview });
-        const { id: defaultLocaleId, status, message } = await getFragmentId(context, defaultLocaleIdUrl, 'default-locale-id');
-        if (status != 200) {
-            return { status, message };
-        }
-        const defaultLocaleUrl = odinReferences(defaultLocaleId, true, preview);
-        const response = await fetch(defaultLocaleUrl, context, 'default-locale-fragment');
-        if (response.status != 200 || !response.body) {
-            /* c8 ignore next */
-            const message = response.message || 'Error fetching default locale fragment';
-            /* c8 ignore next */
-            return { status: response.status || 503, message };
-        }
-        ({ body } = response);
-    }
-    context.defaultLocale = defaultLocale;
-    return { body, defaultLocale, status: 200 };
-}
-
 async function init(context) {
+    if (context?.promises?.fetchFragment) {
+        return await context.promises.fetchFragment;
+    }
     const { body, surface, fragmentPath, parsedLocale } = await getRequestInfos(context);
-    context = { ...context, surface, fragmentPath, parsedLocale, body };
+    const merged = { ...context, surface, fragmentPath, parsedLocale, body };
     if (!surface || !fragmentPath) {
         return { status: 400, message: 'Missing surface or fragmentPath' };
     }
-    return await getDefaultLanguageVariation(context);
+    return await getDefaultLanguageVariation(merged);
 }
 
 function deepMerge(...objects) {
@@ -285,37 +247,6 @@ function customizeTree(root, referencesTree = [], customizeContext) {
     return { fragment: customizedRoot, references: customizeContext.references, referencesTree: adaptedTree };
 }
 
-/**
- * Returns the locale used for regional paths and personalization.
- * If the request uses the default locale code but country differs from that locale's default country and maps to a
- * known region for that language on the surface, returns that regional code (e.g. fr_FR + CA → fr_CA).
- * If the requested locale is already a regional code, it is preserved when no country override applies.
- * @param {*} context
- * @returns {string}
- */
-export function computeRegionLocale(context) {
-    const { locale, defaultLocale: defaultLocaleCode, surface } = context;
-    const country = context.country?.toUpperCase();
-    const [, defaultCountry] = parseLocaleCode(defaultLocaleCode);
-    const defaultCountryUpper = defaultCountry?.toUpperCase();
-    const effectiveCountry = country && defaultCountryUpper != null && country !== defaultCountryUpper ? country : null;
-
-    let regionLocale = locale;
-    if (locale !== defaultLocaleCode || effectiveCountry != null) {
-        const regionObjects = getRegionLocales(surface, defaultLocaleCode, true);
-        const regionLocaleObject =
-            effectiveCountry != null ? regionObjects.find((r) => r.country?.toUpperCase() === effectiveCountry) : null;
-        const mapped = regionLocaleObject ? getLocaleCode(regionLocaleObject) : null;
-        regionLocale = mapped || locale;
-    }
-    logDebug(
-        () =>
-            `Computed region locale '${regionLocale}' for requested locale '${locale}' with country '${country}' on surface '${surface}'`,
-        context,
-    );
-    return regionLocale;
-}
-
 async function customize(context) {
     const { surface } = await getRequestInfos(context);
     const { body, defaultLocale, status, message } = await context.promises?.customize;
@@ -326,7 +257,7 @@ async function customize(context) {
     }
     const baseFragment = skimFragmentFromReferences(body);
     const { references, referencesTree } = body;
-    const regionLocale = computeRegionLocale({ ...context, defaultLocale, surface });
+    const regionLocale = context.regionLocale ?? computeRegionLocale({ ...context, defaultLocale, surface });
     const isRegionLocale = regionLocale !== defaultLocale;
     const customizeContext = {
         ...context,
@@ -347,6 +278,8 @@ async function customize(context) {
         ...context,
         status: 200,
         body: customizedFragment,
+        locale: regionLocale,
+        defaultLocale,
     };
 }
 
@@ -356,3 +289,4 @@ export const transformer = {
     init,
 };
 export { deepMerge };
+export { computeRegionLocale, getDefaultLanguageVariation } from './fetchFragment.js';

io/www/src/fragment/transformers/fetchFragment.js

@@ -1,12 +1,83 @@
-import { fetch } from '../utils/common.js';
-import { getErrorContext } from '../utils/log.js';
-import { PATH_TOKENS, odinReferences } from '../utils/paths.js';
+import { fetch, getFragmentId } from '../utils/common.js';
+import { getErrorContext, logDebug } from '../utils/log.js';
+import { PATH_TOKENS, odinReferences, odinUrl } from '../utils/paths.js';
+import { getDefaultLocaleCode, getLocaleCode, getRegionLocales, parseLocaleCode } from '../locales.js';
+
+/**
+ * get fragment associated to default language, just returning the body
+ * @param {*} context
+ *  - 'locale' comes from request parameter, so can be optional
+ *  - 'parsedLocale' is the actual location of the fetched fragment
+ * @returns null if something wrong, [] if not found, body if found
+ */
+export async function getDefaultLanguageVariation(context) {
+    let { body } = context;
+    const { surface, locale, fragmentPath, preview, parsedLocale } = context;
+    if (!locale) {
+        context.defaultLocale = parsedLocale;
+        return { body, parsedLocale, status: 200 };
+    }
+    const defaultLocale = getDefaultLocaleCode(surface, locale);
+    if (!defaultLocale) {
+        return { status: 400, message: `Default locale not found for requested locale '${locale}'` };
+    }
+    if (defaultLocale !== parsedLocale) {
+        logDebug(() => `Looking for fragment id for ${surface}/${defaultLocale}/${fragmentPath}`, context);
+        const defaultLocaleIdUrl = odinUrl(surface, { locale: defaultLocale, fragmentPath, preview });
+        const { id: defaultLocaleId, status, message } = await getFragmentId(context, defaultLocaleIdUrl, 'default-locale-id');
+        if (status != 200) {
+            return { status, message };
+        }
+        const defaultLocaleUrl = odinReferences(defaultLocaleId, true, preview);
+        const response = await fetch(defaultLocaleUrl, context, 'default-locale-fragment');
+        if (response.status != 200 || !response.body) {
+            /* c8 ignore next */
+            const message = response.message || 'Error fetching default locale fragment';
+            /* c8 ignore next */
+            return { status: response.status || 503, message };
+        }
+        ({ body } = response);
+    }
+    context.defaultLocale = defaultLocale;
+    return { body, defaultLocale, status: 200 };
+}
+
+/**
+ * Returns the locale used for regional paths and personalization.
+ * If the request uses the default locale code but country differs from that locale's default country and maps to a
+ * known region for that language on the surface, returns that regional code (e.g. fr_FR + CA → fr_CA).
+ * If the requested locale is already a regional code, it is preserved when no country override applies.
+ * @param {*} context
+ * @returns {string}
+ */
+export function computeRegionLocale(context) {
+    const { locale, defaultLocale: defaultLocaleCode, surface } = context;
+    const country = context.country?.toUpperCase();
+    const [, defaultCountry] = parseLocaleCode(defaultLocaleCode);
+    const defaultCountryUpper = defaultCountry?.toUpperCase();
+    const effectiveCountry = country && defaultCountryUpper != null && country !== defaultCountryUpper ? country : null;
+
+    let regionLocale = locale;
+    if (locale !== defaultLocaleCode || effectiveCountry != null) {
+        const regionObjects = getRegionLocales(surface, defaultLocaleCode, true);
+        const regionLocaleObject =
+            effectiveCountry != null ? regionObjects.find((r) => r.country?.toUpperCase() === effectiveCountry) : null;
+        const mapped = regionLocaleObject ? getLocaleCode(regionLocaleObject) : null;
+        regionLocale = mapped || locale;
+    }
+    logDebug(
+        () =>
+            `Computed region locale '${regionLocale}' for requested locale '${locale}' with country '${country}' on surface '${surface}'`,
+        context,
+    );
+    return regionLocale;
+}
+
 const TRANSFORMER_NAME = 'fetchFragment';
 
 async function init(initContext) {
     const { id, locale, fragmentsIds, preview } = initContext;
     if (id && locale) {
-        //either we have a default locale id that we can fetch directly or we use the id
         const toFetchId = fragmentsIds?.['default-locale-id'] || id;
         const path = odinReferences(toFetchId, true, preview);
         const response = await fetch(path, initContext, 'fragment');
@@ -22,20 +93,31 @@ async function init(initContext) {
         }
 
         const { parsedLocale, surface, fragmentPath } = match.groups;
+        let context = { ...initContext, body: response.body, parsedLocale, surface, fragmentPath };
+        const variationResult = await getDefaultLanguageVariation(context);
+        /* c8 ignore next 3 — default-locale fetch errors are covered via customize / pipeline */
+        if (variationResult.status != 200) {
+            return variationResult;
+        }
+        context = { ...context, body: variationResult.body };
+        const defaultLocale = context.defaultLocale;
+        const regionLocale = computeRegionLocale({ ...context, defaultLocale });
         return {
             ...initContext,
             status: 200,
-            body: response.body,
+            body: variationResult.body,
             parsedLocale,
             surface,
             fragmentPath,
-        };
-    } else {
-        return {
-            status: 400,
-            message: 'requested parameters id & locale are not present',
+            defaultLocale,
+            locale: regionLocale,
+            regionLocale,
         };
     }
+    return {
+        status: 400,
+        message: 'requested parameters id & locale are not present',
+    };
 }
 
 async function fetchFragment(context) {
@@ -45,7 +127,13 @@ async function fetchFragment(context) {
     }
     return {
         ...context,
-        body: response?.body,
+        body: response.body,
+        parsedLocale: response.parsedLocale,
+        surface: response.surface,
+        fragmentPath: response.fragmentPath,
+        defaultLocale: response.defaultLocale,
+        locale: response.locale,
+        regionLocale: response.regionLocale,
     };
 }
 

io/www/src/fragment/transformers/replace.js

@@ -154,12 +154,9 @@ function replaceValues(input, dictionary, calls) {
 }
 
 async function init(context) {
-    // we fetch dictionary at this stage only if id has already been cached
-    // because we can't know surface of fragment *before* first fetch
-    // if dictionaryId is present in cache - early load dictionary
-    // if nothing in cache - dictionaryId and dictionary itself will be loaded later,
-    // during process
-    return await getDictionary(context);
+    const fetchResult = await context?.promises?.fetchFragment;
+    const merged = fetchResult?.status === 200 ? { ...context, ...fetchResult } : context;
+    return await getDictionary(merged);
 }
 
 async function replace(context) {

io/www/src/fragment/utils/cache.js

@@ -1,6 +1,14 @@
 import { getJsonFromState, mark, measureTiming } from './common.js';
 import { log } from './log.js';
-const getRequestMetadataKey = (context) => `req-${context.id}-${context.locale}`;
+function getRequestMetadataKey(context) {
+    const id = context.id;
+    const locale = (context.requestLocale ?? context.locale) || 'no-locale';
+    const raw = context.country;
+    if (raw != null && String(raw).trim() !== '') {
+        return `req-${id}-${locale}-${String(raw).trim().toUpperCase()}`;
+    }
+    return `req-${id}-${locale}`;
+}
 
 async function getRequestMetadata(context) {
     const requestKey = getRequestMetadataKey(context);

io/www/test/fragment/customize.test.js

@@ -855,6 +855,7 @@ describe('computeRegionLocale', function () {
         expect(computeRegionLocale({ locale: 'fr_FR', country: 'FR', ...CTX })).to.equal('fr_FR');
         expect(computeRegionLocale({ locale: 'fr_FR', country: 'BE', ...CTX })).to.equal('fr_BE');
         expect(computeRegionLocale({ locale: 'fr_FR', country: 'ca', ...CTX })).to.equal('fr_CA');
+        expect(computeRegionLocale({ locale: 'fr_FR', country: 'CH', ...CTX })).to.equal('fr_CH');
         expect(computeRegionLocale({ locale: 'fr_FR', country: 'IN', ...CTX })).to.equal('fr_FR');
         expect(computeRegionLocale({ locale: 'fr_BE', country: undefined, ...CTX })).to.equal('fr_BE');
         expect(computeRegionLocale({ locale: 'fr_BE', country: 'FR', ...CTX })).to.equal('fr_BE');

io/www/test/fragment/pipeline.test.js

@@ -275,8 +275,8 @@ describe('pipeline full use case', () => {
         expect(result.headers).to.have.property('Last-Modified');
         expect(result.headers).to.have.property('ETag');
         expect(Object.keys(state.store).length).to.equal(1);
-        expect(state.store).to.have.property('req-some-en-us-fragment-fr_FR');
-        const json = JSON.parse(state.store['req-some-en-us-fragment-fr_FR']);
+        expect(state.store).to.have.property('req-some-en-us-fragment-fr_FR-CA');
+        const json = JSON.parse(state.store['req-some-en-us-fragment-fr_FR-CA']);
         expect(json.fragmentsIds['dictionary-id']).to.not.equal('sandbox_fr_FR_dictionary');
         expect(json.fragmentsIds['default-locale-id']).to.equal('some-fr-fr-fragment');
     });

io/www/test/fragment/replace.test.js

@@ -102,7 +102,7 @@ describe('replace', () => {
 
     it('returns 200 & no placeholders', async () => {
         const response = await getResponse('foo', 'Buy now');
-        const expected = expectedResponse('foo');
+        const { fragmentsIds: _omit, ...expected } = expectedResponse('foo');
         expect(response).to.deep.include(expected);
     });
     it('returns 200 & replaced entries keys with text', async () => {

studio/src/mas-fragment-editor.js

@@ -701,6 +701,12 @@ export default class MasFragmentEditor extends LitElement {
 
         if (isVariationAfterContext && !skipVariation) {
             await this.#attachParentToCachedVariation(existingStore, fragmentPath);
+            const fragmentLocale = extractLocaleFromPath(fragmentPath);
+            if (fragmentLocale && fragmentLocale !== Store.localeOrRegion()) {
+                Store.search.set((prev) => ({ ...prev, region: fragmentLocale }));
+                await this.repository.loadPreviewPlaceholders();
+                existingStore.resolvePreviewFragment();
+            }
         } else {
             this.localeDefaultFragment = existingStore.parentFragment;
         }
@@ -751,8 +757,6 @@ export default class MasFragmentEditor extends LitElement {
     // Initializes editor state for fragments that are not yet present in list store cache.
     async #initializeFromRepository(fragmentId) {
         try {
-            // Start loading placeholders early
-            const placeholdersPromise = this.repository.loadPreviewPlaceholders().catch(() => null);
             const fragmentData = await this.repository.aem.sites.cf.fragments.getById(fragmentId);
             const fragment = new Fragment(fragmentData);
 
@@ -763,8 +767,14 @@ export default class MasFragmentEditor extends LitElement {
             const parentFragment = await this.#resolveParentForFetchedVariation(fragmentId, fragment, isVariationAfterContext);
             const isVariationForStore = isVariationAfterContext || !!parentFragment;
 
-            // Wait for placeholders before creating stores (needed for preview resolution)
-            await placeholdersPromise;
+            if (isVariationForStore) {
+                const fragmentLocale = extractLocaleFromPath(fragment.path);
+                if (fragmentLocale && fragmentLocale !== Store.localeOrRegion()) {
+                    Store.search.set((prev) => ({ ...prev, region: fragmentLocale }));
+                }
+            }
+
+            await this.repository.loadPreviewPlaceholders();
 
             const fragmentStore = generateFragmentStore(fragment, parentFragment);
             // Only add to main list if not a variation (variations appear under parent's variations panel)
@@ -775,16 +785,6 @@ export default class MasFragmentEditor extends LitElement {
             this.#activateEditorStore(fragmentStore);
             this.dispatchFragmentLoaded();
 
-            // Handle locale-specific placeholder reload for variations
-            if (isVariationForStore) {
-                const fragmentLocale = extractLocaleFromPath(fragment.path);
-                if (fragmentLocale && fragmentLocale !== Store.localeOrRegion()) {
-                    Store.search.set((prev) => ({ ...prev, region: fragmentLocale }));
-                    await this.repository.loadPreviewPlaceholders();
-                    fragmentStore.resolvePreviewFragment();
-                }
-            }
-
             Store.editor.resetChanges();
             this.updateTranslatedLocalesStore(isVariationForStore, fragment.path); // no need to await
             this.#markInitReady();