Internal: Extract Web-CLI to external module [ED-6114] (elementor#17912)

.grunt-config/webpack.alias.js

@@ -6,7 +6,7 @@ module.exports = {
 			'elementor': path.resolve( __dirname, '../' ),
 			'elementor-app': path.resolve( __dirname, '../core/app/assets/js' ),
 			'elementor-admin': path.resolve( __dirname, '../assets/dev/js/admin' ),
-			'elementor-api': path.resolve( __dirname, '../core/common/assets/js/api' ),
+			'elementor-api': path.resolve( __dirname, '../modules/web-cli/assets/js/' ),
 			'elementor-assets-js': path.resolve( __dirname, '../assets/dev/js' ),
 			'elementor-behaviors': path.resolve( __dirname, '../assets/dev/js/editor/elements/views/behaviors' ),
 			'elementor-common': path.resolve( __dirname, '../core/common/assets/js' ),

.grunt-config/webpack.js

@@ -102,6 +102,7 @@ const entry = {
 	'qunit-tests': path.resolve( __dirname, '../tests/qunit/main.js' ),
 	'admin-top-bar': path.resolve( __dirname, '../modules/admin-top-bar/assets/js/admin.js' ),
 	'container-converter': path.resolve( __dirname, '../modules/container-converter/assets/js/editor/module.js' ),
+	'web-cli': path.resolve( __dirname, '../modules/web-cli/assets/js/index.js' ),
 };
 
 const frontendEntries = {

core/common/app.php

@@ -138,6 +138,7 @@ public function register_scripts() {
 				'backbone-marionette',
 				'backbone-radio',
 				'elementor-common-modules',
+				'elementor-web-cli',
 				'elementor-dialog',
 				'wp-api-request',
 			],

core/common/assets/js/common.js

@@ -4,10 +4,9 @@ import Debug from './utils/debug';
 import Ajax from 'elementor-common-modules/ajax/assets/js/ajax';
 import Finder from 'elementor-common-modules/finder/assets/js/finder';
 import Connect from 'elementor-common-modules/connect/assets/js/connect';
-import API from './api/';
-import WordpressComponent from 'elementor-api/components/wordpress/component';
 //import EventsDispatcherComponent from 'elementor-common-modules/event-tracker/assets/js/data/component';
 import events from 'elementor-common-modules/event-tracker/assets/js/events';
+import WordpressComponent from './components/wordpress/component';
 
 class ElementorCommonApp extends elementorModules.ViewModule {
 	setMarionetteTemplateCompiler() {
@@ -41,7 +40,7 @@ class ElementorCommonApp extends elementorModules.ViewModule {
 
 		this.dialogsManager = new DialogsManager.Instance();
 
-		this.api = new API();
+		this.api = window.$e;
 
 		// TODO: UNCOMMENT
 		//$e.components.register( new EventsDispatcherComponent() );

core/common/assets/js/modules.js

@@ -1,8 +1,8 @@
 import elementorModules from 'elementor-assets-js/modules/modules';
 import ModalLayout from './views/modal/layout';
-import ComponentBase from './api/modules/component-base';
+import ComponentBase from 'elementor-api/modules/component-base';
 import ComponentModalBase from 'elementor-api/modules/component-modal-base';
-import HookBreak from './api/modules/hook-break';
+import HookBreak from 'elementor-api/modules/hook-break';
 
 elementorModules.common = {
 	get Component() {

core/modules-manager.php

@@ -95,6 +95,7 @@ public function get_modules_names() {
 			'favorites',
 			'admin-top-bar',
 			'container-converter',
+			'web-cli',
 		];
 	}
 

karma.conf.js

@@ -34,8 +34,10 @@ module.exports = function( config ) {
 
 			// Elementor Common.
 			'tests/qunit/setup/elementor-common.js',
+			'tests/qunit/setup/web-cli.js',
 			'assets/lib/dialog/dialog.js',
 			'assets/js/common-modules.js',
+			'assets/js/web-cli.js',
 			'assets/js/common.js',
 
 			// Editor Fixtures.

core/common/assets/js/api/index.js → modules/web-cli/assets/js/api.js

@@ -27,8 +27,6 @@ export default class API {
 	 * Create's 'elementor' api.
 	 */
 	constructor() {
-		window.$e = this;
-
 		this.components = new Components();
 
 		this.commands = new Commands();

core/common/assets/js/api/core/backwards-compatibility/commands.js → modules/web-cli/assets/js/core/backwards-compatibility/commands.js

@@ -1,4 +1,7 @@
-export default class CommandsBackwardsCompatibility extends elementorModules.Module {
+import Helpers from 'elementor-api/utils/helpers';
+import Module from 'elementor-assets-js/modules/imports/module.js';
+
+export default class CommandsBackwardsCompatibility extends Module {
 	__construct() {
 		this.onOrig = this.on;
 	}
@@ -10,7 +13,7 @@ export default class CommandsBackwardsCompatibility extends elementorModules.Mod
 			// Regex takes the first letter and convert it to lower case.
 			componentName = componentName.replace( /^./, ( val ) => val.toLowerCase() );
 
-			elementorCommon.helpers.softDeprecated(
+			Helpers.softDeprecated(
 				`$e.${ componentName }.on( 'run', ... )`,
 				'3.0.0',
 				`$e.${ componentName }.on( 'run:before', ... )`

core/common/assets/js/api/core/components.js → modules/web-cli/assets/js/core/components.js

@@ -1,4 +1,6 @@
-export default class extends elementorModules.Module {
+import Module from 'elementor-assets-js/modules/imports/module.js';
+
+export default class extends Module {
 	constructor( ...args ) {
 		super( ...args );
 

core/common/assets/js/api/core/data.js → modules/web-cli/assets/js/core/data.js

@@ -41,7 +41,7 @@ export default class Data extends Commands {
 		this.args = Object.assign( args, {
 			namespace: 'elementor',
 			version: '1',
-			baseEndpointURL: elementorCommon.config.urls.rest,
+			baseEndpointURL: elementorWebCliConfig.urls.rest,
 		} );
 
 		this.cache = new Cache( this );
@@ -286,9 +286,8 @@ export default class Data extends Commands {
 	 * @returns {{}} params
 	 */
 	prepareHeaders( requestData ) {
-		/* global wpApiSettings */
 		const type = requestData.type,
-			nonce = wpApiSettings.nonce,
+			nonce = elementorWebCliConfig.nonce,
 			params = {
 				signal: requestData.args?.options?.signal,
 				credentials: 'include', // cookies is required for wp reset.

core/common/assets/js/api/core/data/errors/base-error.js → modules/web-cli/assets/js/core/data/errors/base-error.js

@@ -1,3 +1,6 @@
+import Helpers from 'elementor-api/utils/helpers';
+import ForceMethodImplementation from '../../../utils/force-method-implementation';
+
 export default class BaseError extends Error {
 	/**
 	 * The server error code.
@@ -29,7 +32,7 @@ export default class BaseError extends Error {
 	 * Returns the status code of the error.
 	 */
 	static getHTTPErrorCode() {
-		elementorModules.ForceMethodImplementation();
+		ForceMethodImplementation();
 	}
 
 	/**
@@ -50,6 +53,6 @@ export default class BaseError extends Error {
 	 * Notify a message when the error occurs.
 	 */
 	notify() {
-		elementorCommon.helpers.consoleError( { message: this.message, ...this } );
+		Helpers.consoleError( { message: this.message, ...this } );
 	}
 }

core/common/assets/js/api/core/data/errors/error-404.js → modules/web-cli/assets/js/core/data/errors/error-404.js

@@ -1,12 +1,13 @@
 import BaseError from './base-error';
+import Helpers from 'elementor-api/utils/helpers';
 
 export class Error404 extends BaseError {
 	static getHTTPErrorCode() {
 		return 404;
 	}
 
 	notify() {
-		elementorCommon.helpers.consoleWarn( this.message );
+		Helpers.consoleWarn( this.message );
 	}
 }
 

core/common/assets/js/api/core/hooks/base.js → modules/web-cli/assets/js/core/hooks/base.js

@@ -1,4 +1,8 @@
-export default class HooksBase extends elementorModules.Module {
+import Helpers from 'elementor-api/utils/helpers';
+import Module from 'elementor-assets-js/modules/imports/module.js';
+import forceMethodImplementation from '../../utils/force-method-implementation';
+
+export default class HooksBase extends Module {
 	/**
 	 * Function constructor().
 	 *
@@ -66,7 +70,7 @@ export default class HooksBase extends elementorModules.Module {
 	 * @returns {string} type
 	 */
 	getType() {
-		elementorModules.forceMethodImplementation();
+		forceMethodImplementation();
 	}
 
 	get( id ) {
@@ -367,7 +371,7 @@ export default class HooksBase extends elementorModules.Module {
 						throw e;
 					}
 
-					elementorCommon.helpers.consoleError( e );
+					Helpers.consoleError( e );
 				}
 			}
 
@@ -392,7 +396,7 @@ export default class HooksBase extends elementorModules.Module {
 	 * @throw {Error}
 	 */
 	runCallback( event, callback, args, result ) { // eslint-disable-line no-unused-vars
-		elementorModules.forceMethodImplementation();
+		forceMethodImplementation();
 	}
 
 	/**
@@ -407,7 +411,7 @@ export default class HooksBase extends elementorModules.Module {
 	 * @throw {Error}
 	 */
 	onRun( command, args, event ) { // eslint-disable-line no-unused-vars
-		elementorModules.forceMethodImplementation();
+		forceMethodImplementation();
 	}
 
 	/**
@@ -423,6 +427,6 @@ export default class HooksBase extends elementorModules.Module {
 	 * @throw {Error}
 	 */
 	onCallback( command, args, event, id ) { // eslint-disable-line no-unused-vars
-		elementorModules.forceMethodImplementation();
+		forceMethodImplementation();
 	}
 }

core/common/assets/js/api/core/shortcuts.js → modules/web-cli/assets/js/core/shortcuts.js

@@ -1,4 +1,5 @@
-import environment from 'elementor-common/utils/environment';
+import environment from 'elementor-api/utils/environment';
+import Helpers from 'elementor-api/utils/helpers';
 
 export default class Shortcuts {
 	constructor( $window ) {
@@ -93,8 +94,8 @@ export default class Shortcuts {
 			return;
 		}
 
-		if ( 1 < filteredHandlers.length && elementorCommon.config.isDebug ) {
-			elementorCommon.helpers.consoleWarn( 'Multiple handlers for shortcut.', filteredHandlers, event );
+		if ( 1 < filteredHandlers.length && elementorWebCliConfig.isDebug ) {
+			Helpers.consoleWarn( 'Multiple handlers for shortcut.', filteredHandlers, event );
 		}
 
 		event.preventDefault();

core/common/assets/js/api/core/states/ui-state-base.js → modules/web-cli/assets/js/core/states/ui-state-base.js

@@ -1,3 +1,5 @@
+import forceMethodImplementation from '../../utils/force-method-implementation';
+
 export default class UiStateBase {
 	/**
 	 * Initialize the state object.
@@ -56,7 +58,7 @@ export default class UiStateBase {
 	 * @return {string}
 	 */
 	getId() {
-		elementorModules.forceMethodImplementation();
+		forceMethodImplementation();
 	}
 
 	/**

core/common/assets/js/api/extras/hash-commands.js → modules/web-cli/assets/js/extras/hash-commands.js

@@ -4,20 +4,21 @@
  * @property {string} command
  * @property {object} args
  */
+import Helpers from 'elementor-api/utils/helpers';
 
 export default class HashCommands {
 	/**
 	 * Cannot be static since it uses callback(s) that are available only after '$e' is initialized.
 	 */
 	dispatchersList = {
 		'e:run': {
-			runner: $e.run,
+			runner: () => $e.run,
 			isSafe: ( command ) => $e.commands.getCommandClass( command )?.getInfo().isSafe,
 			isSafeWithArgs: ( command ) => $e.commands.getCommandClass( command )?.getInfo().isSafeWithArgs,
 		},
 
 		'e:route': {
-			runner: $e.route,
+			runner: () => $e.route,
 			isSafe: () => true,
 			isSafeWithArgs: () => false,
 		},
@@ -103,7 +104,7 @@ export default class HashCommands {
 		for ( const hashCommand of commands ) {
 			const dispatcher = this.dispatchersList[ hashCommand.method ];
 
-			await dispatcher.runner(
+			await dispatcher.runner()(
 				hashCommand.command,
 				dispatcher.isSafeWithArgs( hashCommand.command ) ? hashCommand.args : undefined
 			);
@@ -133,7 +134,7 @@ export default class HashCommands {
 				decodeURI( rawArgs || '{}' ),
 			);
 		} catch ( e ) {
-			elementorCommon.helpers.consoleWarn( 'Hash commands JSON args cannot be parsed. \n\n', e );
+			Helpers.consoleWarn( 'Hash commands JSON args cannot be parsed. \n\n', e );
 
 			return {};
 		}

modules/web-cli/assets/js/index.js

@@ -0,0 +1,3 @@
+import API from './api';
+
+window.$e = new API();

core/common/assets/js/api/modules/command-base.js → modules/web-cli/assets/js/modules/command-base.js

@@ -1,4 +1,6 @@
 import ArgsObject from 'elementor-assets-js/modules/imports/args-object';
+import Helpers from 'elementor-api/utils/helpers';
+import ForceMethodImplementation from '../utils/force-method-implementation';
 
 export default class CommandBase extends ArgsObject {
 	static getInstanceType() {
@@ -114,7 +116,7 @@ export default class CommandBase extends ArgsObject {
 	 * @returns {*}
 	 */
 	apply( args = {} ) { // eslint-disable-line no-unused-vars
-		elementorModules.ForceMethodImplementation();
+		ForceMethodImplementation();
 	}
 
 	/**
@@ -265,6 +267,6 @@ export default class CommandBase extends ArgsObject {
 	onCatchApply( e ) {
 		this.runCatchHooks( e );
 
-		elementorCommon.helpers.consoleError( e );
+		Helpers.consoleError( e );
 	}
 }

core/common/assets/js/api/modules/command-data.js → modules/web-cli/assets/js/modules/command-data.js

@@ -1,5 +1,6 @@
 import CommandBase from './command-base';
 import * as errors from '../core/data/errors/';
+import Helpers from 'elementor-api/utils/helpers';
 
 export default class CommandData extends CommandBase {
 	/**
@@ -89,7 +90,7 @@ export default class CommandData extends CommandBase {
 			type: this.type,
 			args: this.args,
 			timestamp: new Date().getTime(),
-			endpoint: $e.data.commandToEndpoint( this.currentCommand, elementorCommon.helpers.cloneObject( this.args ), this.constructor.getEndpointFormat() ),
+			endpoint: $e.data.commandToEndpoint( this.currentCommand, Helpers.cloneObject( this.args ), this.constructor.getEndpointFormat() ),
 		};
 	}
 

core/common/assets/js/api/modules/component-base.js → modules/web-cli/assets/js/modules/component-base.js

@@ -1,6 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
+import Module from 'elementor-assets-js/modules/imports/module.js';
+import ForceMethodImplementation from '../utils/force-method-implementation';
 
-export default class ComponentBase extends elementorModules.Module {
+export default class ComponentBase extends Module {
 	__construct( args = {} ) {
 		if ( args.manager ) {
 			this.manager = args.manager;
@@ -43,7 +45,7 @@ export default class ComponentBase extends elementorModules.Module {
 	 * @returns {string}
 	 */
 	getNamespace() {
-		elementorModules.ForceMethodImplementation();
+		ForceMethodImplementation();
 	}
 
 	getRootContainer() {
@@ -400,10 +402,10 @@ export default class ComponentBase extends elementorModules.Module {
 	}
 
 	toggleRouteClass( route, state ) {
-		elementorCommon.elements.$body.toggleClass( this.getBodyClass( route ), state );
+		document.body.classList.toggle( this.getBodyClass( route ), state );
 	}
 
 	toggleHistoryClass() {
-		elementorCommon.elements.$body.toggleClass( 'e-routes-has-history', !! $e.routes.getHistory( this.getRootContainer() ).length );
+		document.body.classList.toggle( 'e-routes-has-history', !! $e.routes.getHistory( this.getRootContainer() ).length );
 	}
 }

core/common/assets/js/api/modules/component-modal-base.js → modules/web-cli/assets/js/modules/component-modal-base.js

@@ -1,5 +1,6 @@
 import ComponentBase from './component-base';
 import * as commands from './commands/';
+import ForceMethodImplementation from '../utils/force-method-implementation';
 
 export default class ComponentModalBase extends ComponentBase {
 	registerAPI() {
@@ -45,6 +46,6 @@ export default class ComponentModalBase extends ComponentBase {
 	}
 
 	getModalLayout() {
-		elementorModules.ForceMethodImplementation();
+		ForceMethodImplementation();
 	}
 }