adobe/reactor-bridge

Communication API between the Tags UI (Lens) and extension views.

Adobe Experience Platform Tags Extension Bridge

Adobe Experience Platform Tags is a next-generation tag management solution enabling simplified deployment of marketing technologies. For more information regarding Experience Platform Tags, please visit our product website.

When a Tags user configures extensions, rules, and data elements within the Tags UI, the UI presents an extension's view within an iframe. This project provides the communication layer between the Tags UI and extension views for storage and retrieval of settings, validation, etc. It does so by exposing a simplified, abstracted API while leveraging the native postMessage browser API under the hood.

For more information about developing an extension for Experience Platform Tags, please visit our extension development guide.

Usage

The Tags UI consumes the bridge via the @adobe/reactor-bridge npm package while extension views consume the bridge by loading a CDN-hosted script as described in the extension development guide.

The communication layer consists three different pieces:

• Parent (lib/parent.js): This is the portion of the communication layer that the Tags UI uses. The Tags UI uses this by importing it directly:

  import { loadIframe } from '@adobe/reactor-bridge';

  The arguments, return value, and behavior of loadIframe can be found within the code documentation in parent.js.

• Child (dist/extensionbridge-child.js): This is the portion of the communication layer that extension views use, though extension views don't load it directly (see Child Loader). This file is hosted by the Tags UI which means it may be different based on the environment. This is important since it needs to be compatible with the Parent that is being used by the Tags UI in the same environment.

• Child Loader (dist/extensionbridge.js): This loads Child. Child Loader will be loaded by extensions via a script tag. Extensions will always load the same Child Loader regardless of the environment they are running in. Child Loader then loads the environment-specific Child.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

To get started:

1. Install node.js.
2. Clone the repository.
3. After navigating into the project directory, install project dependencies by running npm install.

Scripts

To run tests a single time, run the following command:

npm run test

To run tests continually while developing, run the following command:

npm run test:watch

To run a sandbox where you can manually test your changes (manipulate the sandbox directory as desired), run the following command:

npm run sandbox

To create a build, run the following command:

npm run build

Browser Support

The extension bridge supports the following browsers:

• Chrome (latest)
• Safari (latest)
• Firefox (latest)
• Edge (latest)

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

reactor-bridge's Issues

openCodeEditor resolves promise when clicking on Cancel button

"Moving" adobe/reactor-turbine#156 to this repo.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

extensionBridge.register() don't handle class instances

I don't know if it's something desired, but if you provide a class instance for extension bridge registration this doesn't work as expected.

class ExtensionView{
  constructor(vueSettings) {
    //...
  }
  init({extensionSettings}) {
    //...
  }

  getSettings() {
    //...
  }

  validate() {
    return false;
  }
}
class SomeExtensionView extends ExtensionView {
  constructor(vueSettings) {
    super(vueSettings);
  }
}

extensionBridge.register(new SomeExtensionView(someSettings));

You will get the error:

Unable to call init on the extension. The extension must register a init function using extensionBridge.register().

Only methods defined by the object itself are kept, inherited aren't, which is the case when you use class/prototype

The bridge child script when the extension is registered:

reactor-bridge/src/child.js

Lines 105 to 108 in 30ca5c4

	register(methods) {
	extensionViewMethods = {
	...methods
	};

And later when the method is called:

reactor-bridge/src/child.js

Lines 27 to 30 in 30ca5c4

	const getExtensionViewMethod = (methodName) => {
	const method = extensionViewMethods[methodName];
	if (method) {
	return method.bind(extensionViewMethods);

upgrade reactor-bridge CI github actions flows

Node 14 is EOL April 30, 2023 and any plugins/custom logic using ::set-output is EOL in GH Actions May 31, 2023.

upgrade to:

• actions/checkout@v3
• actions/setup-node@v3
• saucelabs/sauce-connect-action@v2

Remove:

• actions/cache@v2

use:

• Node 16