Merge commit '6d370f4e342db8abd5cd8dd49f0d119aa9d6e772' into experime…

…ntation-v2-integration

plugins/experimentation/README.md

@@ -168,6 +168,14 @@ runEager.call(document, {
   // See more details on the dedicated Experiments page linked below
   experimentsMetaTagPrefix: 'experiment',
   experimentsQueryParameter: 'experiment',
+
+  /* Fragment experiment needs redecoration */
+  // See more details below
+  decorationFunction: (el) => {
+    /* handle custom decoration here, for example: */
+    buildBlock(el);
+    decorateBlock(el);
+  }
 });
 ```
 
@@ -176,6 +184,13 @@ For detailed implementation instructions on the different features, please read
 - [Campaigns](/documentation/campaigns.md)
 - [Experiments](/documentation/experiments.md)
 
+**Cases of passing `decorationFunction`**
+Fragment replacement is handled by async observer, which may execute before or after default decoration complete. So, you need to provide a decoration method to redecorate. There are several common cases:
+1. Have a selector for an element inside a block and the block needs to be redecorated => sample code above
+2. Have a `.block` selector and  need to redecorate => switch block status to `"loading"` and call `loadBlock(el)`
+3. Have a `.section` selector and need to redecorate => call `decorateBlocks(el)`
+4. Have a `main` selector and need to redecorate => call `decorateMain(el)`
+
 ## Extensibility & integrations
 
 If you need to further integrate the experimentation plugin with custom analytics reporting or other 3rd-party libraries, you can listen for the `aem:experimentation` event:

plugins/experimentation/documentation/experiments.md

@@ -83,7 +83,7 @@ To customize the labels, add a new entry in the page metadata or section metadat
 |---------------------|--------------------------------------------------------------|
 | Experiment          | Hero Test                                                    |
 | Experiment Variants | [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-1](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-2](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-3]() |
-| Experiment Names    |  foo1, foo2, foo3                                                 |
+| Experiment Variant Names    |  foo1, foo2, foo3                                                 |
 
 The names defined will match with the corresponding variants in sequence. If the number of names provided is less than the number of variants, the default naming will be applied for the remaining variants.
 

plugins/experimentation/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@adobe/aem-experimentation",
-  "version": "1.0.0",
-  "main": "src/index.js",
-  "scripts": {
-    "lint:js": "eslint src",
-    "lint:css": "stylelint src/**/*.css",
-    "lint": "npm run lint:js && npm run lint:css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://[email protected]/adobe/aem-experimentation.git"
-  },
-  "author": "Adobe Inc.",
-  "license": "Apache-2.0",
-  "keywords": [
-    "aem",
-    "experimentation",
-    "experience",
-    "decisioning",
-    "plugin",
-    "campaigns",
-    "audiences"
-  ],
-  "bugs": {
-    "url": "https://github.com/adobe/aem-experimentation/issues"
-  },
-  "homepage": "https://github.com/adobe/aem-experimentation#readme",
-  "devDependencies": {
-    "@babel/eslint-parser": "7.22.15",
-    "eslint": "8.48.0",
-    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-plugin-import": "2.28.1",
-    "stylelint": "15.10.3",
-    "stylelint-config-standard": "34.0.0"
-  }
-}

plugins/experimentation/src/index.js

@@ -44,7 +44,8 @@ export const DEFAULT_OPTIONS = {
   experimentsMetaTagPrefix: 'experiment',
   experimentsQueryParameter: 'experiment',
 
-  decorateFunction : () => {},
+  // Redecoration function for fragments
+  decorateFunction: () => {},
 };
 
 /**
@@ -600,8 +601,11 @@ async function getExperimentConfig(pluginOptions, metadata, overrides) {
     label: 'Control',
   };
 
-  // get the custom labels for the variants names
-  const labelNames = stringToArray(metadata.variantName) || stringToArray(metadata.name);
+  // get the customized name for the variant in page metadata and manifest
+  const labelNames = stringToArray(metadata.name)?.length
+    ? stringToArray(metadata.name)
+    : stringToArray(depluralizeProps(metadata, ['variantName']).variantName);
+
   pages.forEach((page, i) => {
     const vname = `challenger-${i + 1}`;
     //  label with custom name or default
@@ -922,7 +926,12 @@ export async function loadLazy(document, options = {}) {
   if (!isDebugEnabled) {
     return;
   }
-  // eslint-disable-next-line import/no-cycle
-  const preview = await import('./preview.js');
-  preview.default(document, pluginOptions);
+  // eslint-disable-next-line import/no-unresolved
+  const preview = await import('https://opensource.adobe.com/aem-experimentation/preview.js');
+  const context = {
+    getMetadata,
+    toClassName,
+    debug,
+  };
+  preview.default.call(context, document, pluginOptions);
 }