@elementor/editor-v1-adapters 0.1.0

package/src/listeners/is-ready.ts

@@ -0,0 +1,14 @@
+/**
+ * This file is used to store the state of the isReady variable, which is used to determine
+ * if the adapter is ready to receive events (editor v1 and v2 are loaded).
+ */
+
+let ready = false;
+
+export function isReady() {
+	return ready;
+}
+
+export function setReady( value: boolean ) {
+	ready = value;
+}

package/src/listeners/listeners.ts

@@ -0,0 +1,124 @@
+import { normalizeEvent } from './utils';
+import {
+	CommandEventDescriptor,
+	EventDescriptor,
+	ListenerCallback,
+	RouteEventDescriptor,
+	WindowEventDescriptor,
+} from './types';
+import { isReady, setReady } from './is-ready';
+
+const callbacksByEvent = new Map<EventDescriptor['name'], ListenerCallback[]>();
+let abortController = new AbortController();
+
+export function listenTo(
+	eventDescriptors: EventDescriptor | EventDescriptor[],
+	callback: ListenerCallback
+) {
+	if ( ! Array.isArray( eventDescriptors ) ) {
+		eventDescriptors = [ eventDescriptors ];
+	}
+
+	// @see https://github.com/typescript-eslint/typescript-eslint/issues/2841
+	// eslint-disable-next-line array-callback-return -- Clashes with typescript.
+	const cleanups = eventDescriptors.map( ( event ) => {
+		const { type, name } = event;
+
+		switch ( type ) {
+			case 'command':
+				return registerCommandListener( name, event.state, callback );
+
+			case 'route':
+				return registerRouteListener( name, event.state, callback );
+
+			case 'window-event':
+				return registerWindowEventListener( name, callback );
+		}
+	} );
+
+	return () => {
+		cleanups.forEach( ( cleanup ) => cleanup() );
+	};
+}
+
+export function flushListeners() {
+	abortController.abort();
+	callbacksByEvent.clear();
+	setReady( false );
+
+	abortController = new AbortController();
+}
+
+function registerCommandListener(
+	command: CommandEventDescriptor['name'],
+	state: CommandEventDescriptor['state'],
+	callback: ListenerCallback
+) {
+	return registerWindowEventListener( `elementor/commands/run/${ state }`, ( e ) => {
+		const shouldRunCallback = e.type === 'command' && e.command === command;
+
+		if ( shouldRunCallback ) {
+			callback( e );
+		}
+	} );
+}
+
+function registerRouteListener(
+	route: RouteEventDescriptor['name'],
+	state: RouteEventDescriptor['state'],
+	callback: ListenerCallback
+) {
+	return registerWindowEventListener( `elementor/routes/${ state }`, ( e ) => {
+		const shouldRunCallback = e.type === 'route' && e.route.startsWith( route );
+
+		if ( shouldRunCallback ) {
+			callback( e );
+		}
+	} );
+}
+
+function registerWindowEventListener( event: WindowEventDescriptor['name'], callback: ListenerCallback ) {
+	const isFirstListener = ! callbacksByEvent.has( event );
+
+	if ( isFirstListener ) {
+		callbacksByEvent.set( event, [] );
+
+		addListener( event );
+	}
+
+	callbacksByEvent.get( event )?.push( callback );
+
+	return () => {
+		const callbacks = callbacksByEvent.get( event );
+
+		if ( ! callbacks?.length ) {
+			return;
+		}
+
+		const filtered = callbacks.filter( ( cb ) => cb !== callback );
+
+		callbacksByEvent.set( event, filtered );
+	};
+}
+
+function addListener( event: EventDescriptor['name'] ) {
+	window.addEventListener(
+		event,
+		makeEventHandler( event ),
+		{ signal: abortController.signal }
+	);
+}
+
+function makeEventHandler( event: EventDescriptor['name'] ): EventListener {
+	return ( e ) => {
+		if ( ! isReady() ) {
+			return;
+		}
+
+		const normalizedEvent = normalizeEvent( e );
+
+		callbacksByEvent.get( event )?.forEach( ( callback ) => {
+			callback( normalizedEvent );
+		} );
+	};
+}

package/src/listeners/types.ts

@@ -0,0 +1,45 @@
+export type ExtendedWindow = Window & {
+	__elementorEditorV1LoadingPromise?: Promise<void>;
+};
+
+export type CommandEventDescriptor = {
+	type: 'command',
+	name: string,
+	state: 'before' | 'after',
+};
+
+export type RouteEventDescriptor = {
+	type: 'route',
+	name: string,
+	state: 'open' | 'close',
+};
+
+export type WindowEventDescriptor = {
+	type: 'window-event',
+	name: string,
+};
+
+export type CommandEvent<TArgs extends object = object> = {
+	type: CommandEventDescriptor['type'],
+	command: string,
+	args: TArgs,
+	originalEvent: CustomEvent,
+};
+
+export type RouteEvent = {
+	type: RouteEventDescriptor['type'],
+	route: string,
+	originalEvent: CustomEvent,
+};
+
+export type WindowEvent = {
+	type: WindowEventDescriptor['type'],
+	event: string,
+	originalEvent: Event,
+};
+
+export type EventDescriptor = CommandEventDescriptor | WindowEventDescriptor | RouteEventDescriptor;
+
+export type ListenerEvent = WindowEvent | CommandEvent | RouteEvent;
+
+export type ListenerCallback = ( e: ListenerEvent ) => void;

package/src/listeners/utils.ts

@@ -0,0 +1,44 @@
+import { ExtendedWindow, ListenerEvent } from './types';
+import { setReady } from './is-ready';
+
+export function dispatchReadyEvent() {
+	return getV1LoadingPromise().then( () => {
+		setReady( true );
+		window.dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+	} );
+}
+
+function getV1LoadingPromise() {
+	const v1LoadingPromise = ( window as unknown as ExtendedWindow ).__elementorEditorV1LoadingPromise;
+
+	if ( ! v1LoadingPromise ) {
+		return Promise.reject( 'Elementor Editor V1 is not loaded' );
+	}
+
+	return v1LoadingPromise;
+}
+
+export function normalizeEvent( e: ListenerEvent['originalEvent'] ): ListenerEvent {
+	if ( e instanceof CustomEvent && e.detail?.command ) {
+		return {
+			type: 'command',
+			command: e.detail.command,
+			args: e.detail.args,
+			originalEvent: e,
+		};
+	}
+
+	if ( e instanceof CustomEvent && e.detail?.route ) {
+		return {
+			type: 'route',
+			route: e.detail.route,
+			originalEvent: e,
+		};
+	}
+
+	return {
+		type: 'window-event',
+		event: e.type,
+		originalEvent: e,
+	};
+}

package/src/readers/__tests__/index.test.ts

@@ -0,0 +1,71 @@
+import { isRouteActive, getCurrentEditMode } from '../';
+
+type ExtendedWindow = Window & {
+	$e: {
+		routes: {
+			isPartOf: jest.Mock;
+		}
+	},
+	elementor: {
+		channels: {
+			dataEditMode: {
+				request: jest.Mock;
+			}
+		}
+	}
+}
+
+describe( '@elementor/editor-v1-adapters - Readers', () => {
+	let eIsPartOf: jest.Mock,
+		eGetEditMode: jest.Mock;
+
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.$e = {
+			routes: {
+				isPartOf: jest.fn(),
+			},
+		};
+
+		extendedWindow.elementor = {
+			channels: {
+				dataEditMode: {
+					request: jest.fn(),
+				},
+			},
+		};
+
+		eIsPartOf = extendedWindow.$e.routes.isPartOf;
+		eGetEditMode = extendedWindow.elementor.channels.dataEditMode.request;
+	} );
+
+	it( 'should determine if a route is active', () => {
+		// Arrange.
+		const route = 'test/route';
+
+		eIsPartOf.mockReturnValue( true );
+
+		// Act.
+		const result = isRouteActive( route );
+
+		// Assert.
+		expect( result ).toEqual( true );
+		expect( eIsPartOf ).toHaveBeenCalledTimes( 1 );
+		expect( eIsPartOf ).toHaveBeenCalledWith( route );
+	} );
+
+	it( 'should return the current edit mode', () => {
+		// Arrange.
+		const editMode = 'edit';
+
+		eGetEditMode.mockReturnValue( editMode );
+
+		// Act.
+		const result = getCurrentEditMode();
+
+		// Assert.
+		expect( result ).toEqual( editMode );
+		expect( eGetEditMode ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/readers/index.ts

@@ -0,0 +1,13 @@
+import { ExtendedWindow } from './types';
+
+export function isRouteActive( route: string ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return !! extendedWindow.$e?.routes?.isPartOf( route );
+}
+
+export function getCurrentEditMode() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.channels?.dataEditMode?.request?.( 'activeMode' );
+}

package/src/readers/types.ts

@@ -0,0 +1,16 @@
+export type EditMode = 'edit' | 'preview' | 'picker';
+
+export type ExtendedWindow = Window & {
+	$e: {
+		routes: {
+			isPartOf: ( route: string ) => boolean;
+		}
+	},
+	elementor: {
+		channels: {
+			dataEditMode: {
+				request: ( key: 'activeMode' ) => EditMode;
+			}
+		}
+	}
+}