Add experimentation plugin and metadata helpers

Enable experimentation support: update ESLint ignores to include plugins/, add a sidekick plugin config (tools/sidekick/config.json) and a small sidekick script (scripts/sidekick.js) to toggle the external DA experiment module. Add getAllMetadata helper (scripts/shared.js) to collect scoped metadata, introduce AUDIENCES and an experimentation context in scripts/scripts.js, and dynamically load the plugin's eager/lazy entry points when experimentation metadata or sidekick is present. Also wire sidekick import/sidekick-ready handling and adjust DA preview/experiment import logic.

Author: varunmitra

eslint.config.cjs

@@ -2,7 +2,7 @@ const js = require('@eslint/js');
 const globals = require('globals');
 
 module.exports = [
-  { ignores: ['helix-importer-ui/**', 'tools/**', '.skills/**', '**/*.min.js', '.eslintrc.js', 'eslint.config.cjs'] },
+  { ignores: ['helix-importer-ui/**', 'tools/**', '.skills/**', '**/*.min.js', '.eslintrc.js', 'eslint.config.cjs', 'plugins/**'] },
   js.configs.recommended,
   {
     languageOptions: {

scripts/scripts.js

@@ -12,10 +12,31 @@ import {
   loadSection,
   sampleRUM,
   loadCSS,
+  loadScript,
   getMetadata,
+  toCamelCase,
+  toClassName,
 } from './aem.js';
+import { getAllMetadata } from './shared.js';
 import dynamicBlocks from '../blocks/dynamic/index.js';
 
+const AUDIENCES = {
+  mobile: () => window.innerWidth < 600,
+  desktop: () => window.innerWidth >= 600,
+};
+
+function getExperimentationContext() {
+  return {
+    getAllMetadata, getMetadata, loadCSS, loadScript, sampleRUM, toCamelCase, toClassName,
+  };
+}
+
+function isExperimentationEnabled() {
+  return getMetadata('experiment')
+    || Object.keys(getAllMetadata('campaign')).length
+    || Object.keys(getAllMetadata('audience')).length;
+}
+
 const THEME_STORAGE_KEY = 'diyfire-theme';
 
 function applyTheme(theme) {
@@ -172,6 +193,10 @@ async function loadEager(doc) {
   const main = doc.querySelector('main');
   if (main) {
     if (window.isErrorPage) loadErrorPage(main);
+    if (isExperimentationEnabled()) {
+      const { loadEager: runEager } = await import('../plugins/experimentation/src/index.js');
+      await runEager(document, { audiences: AUDIENCES }, getExperimentationContext());
+    }
     decorateMain(main);
     document.body.classList.add('appear');
     await loadSection(main.querySelector('.section'), async (s) => {
@@ -229,6 +254,11 @@ async function loadLazy(doc) {
   loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
   loadFonts();
 
+  if (isExperimentationEnabled()) {
+    const { loadLazy: runLazy } = await import('../plugins/experimentation/src/index.js');
+    await runLazy(document, { audiences: AUDIENCES }, getExperimentationContext());
+  }
+
   const loadQuickEdit = async (...args) => {
     const { default: initQuickEdit } = await import('../tools/quick-edit/quick-edit.js');
     initQuickEdit(...args);
@@ -279,10 +309,23 @@ if (!window.hlx?.suppressLoadPage) {
   loadPage();
 
   (async function loadDa() {
-    if (!new URL(window.location.href).searchParams.get('dapreview')) return;
-    import('https://da.live/scripts/dapreview.js').then(({ default: daPreview }) => daPreview(loadPage));
+    const { searchParams } = new URL(window.location.href);
+    if (searchParams.get('dapreview')) {
+      import('https://da.live/scripts/dapreview.js').then(({ default: daPreview }) => daPreview(loadPage));
+    }
+    if (searchParams.get('daexperiment')) {
+      import('https://da.live/nx/public/plugins/exp/exp.js');
+    }
   }());
 
+  if (document.querySelector('aem-sidekick')) {
+    import('./sidekick.js');
+  } else {
+    document.addEventListener('sidekick-ready', () => {
+      import('./sidekick.js');
+    }, { once: true });
+  }
+
   window.addEventListener('aem-theme-change', (e) => {
     applyTheme(e.detail?.theme);
   });

scripts/shared.js

@@ -260,6 +260,25 @@ export function createChart(canvas, config) {
   return chart;
 }
 
+/**
+ * Returns all metadata properties matching a given scope/prefix.
+ * Looks for `<meta property="{scope}:…">` and `<meta name="{scope}-…">`.
+ * @param {string} scope The metadata prefix (e.g. 'campaign', 'audience')
+ * @param {Document} [doc=document] Document to query
+ * @returns {Record<string, string>} Key-value pairs of matching metadata (keys in camelCase)
+ */
+export function getAllMetadata(scope, doc = document) {
+  const result = {};
+  const meta = [...doc.head.querySelectorAll(`meta[property^="${scope}:"], meta[name^="${scope}-"]`)];
+  meta.forEach((m) => {
+    const key = m.getAttribute('property')
+      ? m.getAttribute('property').replace(`${scope}:`, '')
+      : m.getAttribute('name').replace(`${scope}-`, '');
+    result[key.replace(/[-:]([a-z])/g, (g) => g[1].toUpperCase())] = m.content;
+  });
+  return result;
+}
+
 /**
  * Check if the current page is in the Universal Editor.
  * @returns {boolean}

scripts/sidekick.js

@@ -0,0 +1,22 @@
+let defined;
+
+function toggleExp() {
+  if (defined) {
+    defined.remove();
+    defined = undefined;
+    return;
+  }
+  import('https://da.live/nx/public/plugins/exp/exp.js').then((mod) => {
+    defined = mod;
+  });
+}
+
+const sk = document.querySelector('aem-sidekick');
+if (sk) {
+  sk.addEventListener('custom:experimentation', toggleExp);
+} else {
+  document.addEventListener('sidekick-ready', () => {
+    document.querySelector('aem-sidekick')
+      .addEventListener('custom:experimentation', toggleExp);
+  }, { once: true });
+}

tools/sidekick/config.json

@@ -0,0 +1,13 @@
+{
+  "project": "DIYFire",
+  "plugins": [
+    {
+      "id": "experimentation",
+      "titleI18n": {
+        "en": "Experimentation"
+      },
+      "environments": ["dev", "preview"],
+      "event": "experimentation"
+    }
+  ]
+}