feat: add plugin system and experimentation plugin to the site #405

ramboz · 2023-10-26T14:31:23Z

As discussed with @trieloff during our recent workshop, I'm adding the plugin system and the experimentation plugin to the website.

Description

Adds the minimal plugin system proposal from feat: a minimal plugin and template system aem-boilerplate#254
Adds the experimentation plugin from https://github.com/adobe/aem-experience-decisioning/tree/plugin-api
Instrument the existing performance.js as a plugin

Related Issue

adobe/aem-boilerplate#254

Motivation and Context

The goal is to instrument a half-dozen sites so we can validate the current implementation and test it against real use cases in prod.

How Has This Been Tested?

The plugin system has been tested on 2 websites, and the experimentation plugin has a demo site to test the various use cases. I also added a demo experiment in the drafts: https://plugin-system--helix-website--adobe.hlx.page/drafts/ramboz/test-experiment/
It changes the label in the CTA.

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

…xperience-decisioning'

git-subtree-dir: plugins/experience-decisioning git-subtree-split: 72ddbdb84bd53bee39da1a70aa17318065ea481e

…ystem

e6f6479 Merge branch 'main' into plugin-api 9028520 fix: possible css leaking into pill overlay 162aab2 fix: improve anonymization for better gdpr/hippa compliance (#3) git-subtree-dir: plugins/experience-decisioning git-subtree-split: e6f6479ea2b305452ed84bc4cd48f50197d5edb2

aem-code-sync · 2023-10-26T14:31:26Z

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-run PSI Checks

aem-code-sync · 2023-10-26T14:31:48Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

1268232 feat: add possibility to config prod hosts to disable the overlay pill git-subtree-dir: plugins/experience-decisioning git-subtree-split: 126823275dd83b088e5394890cb79d1ed4d76b61

…ystem

ramboz · 2023-10-26T14:33:43Z

scripts/lib-franklin.js

@@ -18,8 +19,7 @@
 export function sampleRUM(checkpoint, data = {}) {


Changes to sampleRUM are just me copying over the latest from the aem boilerplate.

ramboz · 2023-10-26T14:34:25Z

scripts/lib-franklin.js

+ * @param {string} [cssPath] An optional CSS file to load
+ * @param {object[]} [args] Parameters to be passed to the default export when it is called
+ */
+async function loadModule(name, jsPath, cssPath, ...args) {


This is the JS/CSS loading logic from loadBlock, extracted to a dedicated method so the plugins can leverage it as well to load their JS/CSS files as needed

ramboz · 2023-10-26T14:35:10Z

scripts/lib-franklin.js

+ * @param {Element} block The block element
+ * @returns {Object} The block config (blockName, cssPath and jsPath)
+ */
+function getBlockConfig(block) {


This lets us override the default block loading path via methods pushed to window.hlx.patchBlockConfig.
The experimentation plugin expects it to be here to work since it patches the block path for block experiments

ramboz · 2023-10-26T14:36:10Z

scripts/scripts.js

@@ -660,9 +683,3 @@ if (window.location.hostname === 'www.hlx.live') {
 */

 loadPage(document);
-
-if (window.name.includes('performance')) {


This was moved and added as a simple plugin

aem-code-sync · 2023-10-27T09:48:07Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

aem-code-sync · 2023-10-27T10:13:25Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

ramboz · 2023-10-30T07:53:02Z

@trieloff @kptdobe @davidnuescheler Let me know your thoughts on the PR.

aem-code-sync · 2023-10-30T17:32:15Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

git-subtree-dir: plugins/experimentation git-subtree-split: effa50e9905c53d8bc6b99c54277b4f412607af8

…xperimentation'

aem-code-sync · 2023-11-01T08:21:49Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

trieloff

Ok from my side. I'd like to run targeted content that shows 24 hours prior to our Discord events and advertises them.

9d1d32a feat: add support for direct experiment manfiest url in the metadata git-subtree-dir: plugins/experimentation git-subtree-split: 9d1d32a74efefe41a34bcfc0838bfec7ad566268

…ystem

aem-code-sync · 2023-11-06T17:14:24Z

Page	Scores	Audits	Google
/drafts/ramboz/test-experiment/

trieloff

Just a few comments on the plugin system.

trieloff · 2023-11-29T10:42:48Z

scripts/lib-franklin.js

+    [...this.#plugins.entries()]
+      .filter(([, plugin]) => plugin.condition
+      && !plugin.condition(document, plugin.options, executionContext))
+      .map(([id]) => this.#plugins.delete(id));


This is highly unusual: not just does the .map function have a side-effect, it also modifies the very base of its operation.

In this case either a forEach or a reduce (you re-assign the result to this.#plugins) would work better.

That's a good point!

trieloff · 2023-11-29T10:44:02Z

scripts/lib-franklin.js

+      .filter(([, plugin]) => plugin.condition
+      && !plugin.condition(document, plugin.options, executionContext))
+      .map(([id]) => this.#plugins.delete(id));
+    return Promise.all([...this.#plugins.entries()]


Why do you need a Promise.all()?

Because the plugin executions can all be async, so we return a proper promise that you can await in the caller

ramboz added 7 commits October 26, 2023 15:37

Merge commit 'fa783e8e20b56e57faea5a0b667624fb8e302790' as 'plugins/e…

2ae22d0

…xperience-decisioning'

Squashed 'plugins/experience-decisioning/' content from commit 72ddbdb

fa783e8

git-subtree-dir: plugins/experience-decisioning git-subtree-split: 72ddbdb84bd53bee39da1a70aa17318065ea481e

feat: add the plugin system and the experimentation plugin

99410ff

feat: add the plugin system and the experimentation plugin

2fd9164

Merge commit '5c942e61c36e1c4379f43a0e345156bc4d233264' into plugin-s…

3bd9cc8

…ystem

feat: add the plugin system and the experimentation plugin

d438bbd

ramboz changed the title ~~Plugin system~~ feat: add plugin system and experimentation plugin to the site Oct 26, 2023

ramboz added 2 commits October 26, 2023 16:41

Squashed 'plugins/experience-decisioning/' changes from e6f6479..1268232

598f218

1268232 feat: add possibility to config prod hosts to disable the overlay pill git-subtree-dir: plugins/experience-decisioning git-subtree-split: 126823275dd83b088e5394890cb79d1ed4d76b61

Merge commit '598f2189d590247fd79c69a3ff50c4c1e32fcbd2' into plugin-s…

93a51b6

…ystem

ramboz requested review from trieloff, kptdobe and davidnuescheler October 26, 2023 14:42

ramboz commented Oct 26, 2023

View reviewed changes

feat: add the plugin system and the experimentation plugin

c032ffd

fix: explicit plugin phase config

8ec7053

ramboz marked this pull request as ready for review October 30, 2023 07:53

ramboz mentioned this pull request Oct 30, 2023

feat: a minimal plugin and template system adobe/aem-boilerplate#254

Closed

kptdobe approved these changes Oct 30, 2023

View reviewed changes

feat: add the plugin system to the project

24f0841

ramboz added 4 commits November 1, 2023 09:19

chore: rename experimentation plugin

afc8b53

chore: rename experimentation plugin

bca1eaf

Squashed 'plugins/experimentation/' content from commit effa50e

d447454

git-subtree-dir: plugins/experimentation git-subtree-split: effa50e9905c53d8bc6b99c54277b4f412607af8

Merge commit 'd447454e445de1370ec65c531a9819559a3429b1' as 'plugins/e…

c99dcea

…xperimentation'

trieloff approved these changes Nov 6, 2023

View reviewed changes

ramboz added 2 commits November 6, 2023 18:13

Squashed 'plugins/experimentation/' changes from effa50e..9d1d32a

7663046

9d1d32a feat: add support for direct experiment manfiest url in the metadata git-subtree-dir: plugins/experimentation git-subtree-split: 9d1d32a74efefe41a34bcfc0838bfec7ad566268

Merge commit '7663046873490efd10b40933a69122ca7217b7a6' into plugin-s…

8c1fefa

…ystem

ramboz merged commit 9e94f98 into main Nov 6, 2023
3 checks passed

ramboz deleted the plugin-system branch November 6, 2023 17:15

trieloff reviewed Nov 29, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add plugin system and experimentation plugin to the site #405

feat: add plugin system and experimentation plugin to the site #405

ramboz commented Oct 26, 2023 •

edited

Loading

aem-code-sync bot commented Oct 26, 2023

aem-code-sync bot commented Oct 26, 2023

ramboz Oct 26, 2023

ramboz Oct 26, 2023

ramboz Oct 26, 2023

ramboz Oct 26, 2023

aem-code-sync bot commented Oct 27, 2023

aem-code-sync bot commented Oct 27, 2023

ramboz commented Oct 30, 2023

aem-code-sync bot commented Oct 30, 2023

aem-code-sync bot commented Nov 1, 2023

trieloff left a comment

aem-code-sync bot commented Nov 6, 2023

trieloff left a comment

trieloff Nov 29, 2023

ramboz Dec 11, 2023

trieloff Nov 29, 2023

ramboz Dec 11, 2023

		@@ -18,8 +19,7 @@
		export function sampleRUM(checkpoint, data = {}) {

feat: add plugin system and experimentation plugin to the site #405

feat: add plugin system and experimentation plugin to the site #405

Conversation

ramboz commented Oct 26, 2023 • edited Loading

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

aem-code-sync bot commented Oct 26, 2023

aem-code-sync bot commented Oct 26, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aem-code-sync bot commented Oct 27, 2023

aem-code-sync bot commented Oct 27, 2023

ramboz commented Oct 30, 2023

aem-code-sync bot commented Oct 30, 2023

aem-code-sync bot commented Nov 1, 2023

trieloff left a comment

Choose a reason for hiding this comment

aem-code-sync bot commented Nov 6, 2023

trieloff left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramboz commented Oct 26, 2023 •

edited

Loading