From f4f346fdbeb66720b214b08fc84085ecb8d2b0fa Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 12 Nov 2024 15:24:08 +0330 Subject: [PATCH] perf: improved the registeration unstable breakpoints location to optimized performance --- .../php/Providers/EditorAssetsProvider.php | 100 ++++++++++++------ .../js/style-engine/components/state-style.js | 21 +--- packages/wordpress/php/AssetsLoader.php | 37 +++++-- 3 files changed, 98 insertions(+), 60 deletions(-) diff --git a/packages/blockera/php/Providers/EditorAssetsProvider.php b/packages/blockera/php/Providers/EditorAssetsProvider.php index 0261e865e..c1b3542c0 100644 --- a/packages/blockera/php/Providers/EditorAssetsProvider.php +++ b/packages/blockera/php/Providers/EditorAssetsProvider.php @@ -28,7 +28,7 @@ public function getId(): string { * * @return string the handler name. */ - public function getHandler():string { + public function getHandler(): string { return '@blockera/blockera'; } @@ -41,8 +41,9 @@ public function getHandler():string { */ public function boot(): void { - add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script', [ $this, 'createInlineScript' ] ); add_filter( 'blockera/wordpress/' . $this->getId() . '/handle/inline-script', [ $this, 'getHandler' ] ); + add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script/before', [ $this, 'beforeInlineScript' ] ); + add_filter( 'blockera/wordpress/' . $this->getId() . '/inline-script/after', [ $this, 'afterInlineScript' ] ); $this->app->make( $this->getId(), @@ -63,37 +64,90 @@ public function boot(): void { } /** - * Create inline script for blockera editor handler. + * @return string + */ + protected function getEditorObject(): string { + + $editor_package_file = blockera_core_config( 'app.root_path' ) . 'vendor/blockera/editor/package.json'; + + if ( ! file_exists( $editor_package_file ) ) { + + return ''; + } + + ob_start(); + require $editor_package_file; + $editor_package = json_decode( ob_get_clean(), true ); + $editor_version = str_replace( '.', '_', $editor_package['version'] ); + + return 'blockeraEditor_' . $editor_version; + } + + /** + * Create before inline script for blockera editor handler. * * @param string $inline_script the previous inline script. * - * @hooked 'blockera/wordpress/{$this->getId()}/inline-script' + * @hooked 'blockera/wordpress/{$this->getId()}/inline-script/before' * - * @throws BindingResolutionException BindingResolutionException to handle errors. * @return string the inline script for initialize blockera some package's configuration. */ - public function createInlineScript( string $inline_script ): string { + public function beforeInlineScript( string $inline_script ): string { if ( ! $this->app instanceof Blockera ) { return $inline_script; } - $editor_package_file = blockera_core_config( 'app.root_path' ) . 'vendor/blockera/editor/package.json'; + $editor_object = $this->getEditorObject(); - if ( ! file_exists( $editor_package_file ) ) { + if ( empty( $editor_object ) ) { return $inline_script; } - ob_start(); - require $editor_package_file; - $editor_package = json_decode( ob_get_clean(), true ); - $editor_version = str_replace( '.', '_', $editor_package['version'] ); - $editor_object = 'blockeraEditor_' . $editor_version; - $dynamic_value_bootstrapper = $editor_object . '.coreData.unstableBootstrapServerSideDynamicValueDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'dynamic-value', false ) ) . ');'; + $script = 'window.onload = () => { + ' . $editor_object . '.coreData.unstableBootstrapServerSideEntities(' . wp_json_encode( $this->app->getEntities() ) . '); + ' . $editor_object . '.editor.unstableBootstrapServerSideBreakpointDefinitions(' . wp_json_encode( $this->app->getEntity( 'breakpoints' ) ) . '); + ' . $editor_object . '.coreData.unstableBootstrapServerSideVariableDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'variable', false ) ) . '); + ' . $editor_object . '.editor.init(); + ' . ( blockera_get_experimental( [ 'data', 'dynamicValue' ] ) ? $dynamic_value_bootstrapper : '' ) . ' + };'; + + if ( false !== strpos( $inline_script, $script ) ) { + + return $inline_script; + } + + return sprintf( '%s%s', $inline_script . PHP_EOL, $script ); + } + + /** + * Create after inline script for blockera editor handler. + * + * @param string $inline_script the previous inline script. + * + * @hooked 'blockera/wordpress/{$this->getId()}/inline-script/after' + * + * @throws BindingResolutionException BindingResolutionException to handle errors. + * @return string the inline script for initialize blockera some package's configuration. + */ + public function afterInlineScript( string $inline_script ): string { + + if ( ! $this->app instanceof Blockera ) { + + return $inline_script; + } + + $editor_object = $this->getEditorObject(); + + if ( empty( $editor_object ) ) { + + return $inline_script; + } + /** * Filterable shared block attributes, * For external developers to extending blockera shared block attributes. @@ -123,22 +177,8 @@ function ( string $block_type ) use ( $editor_object, $app ): string { apply_filters( 'blockera/assets/provider/inline-script/register/3rd-party-blocks/attributes', [] ) ); - $script = implode( ";\n", $blocks_attributes_scripts ) . ' - ' . $editor_object . '.editor.unstableRegistrationSharedBlockAttributes(' . wp_json_encode( $shared_block_attributes ) . '); - window.onload = () => { - ' . $editor_object . '.coreData.unstableBootstrapServerSideEntities(' . wp_json_encode( $this->app->getEntities() ) . '); - ' . $editor_object . '.editor.unstableBootstrapServerSideBreakpointDefinitions(' . wp_json_encode( $this->app->getEntity( 'breakpoints' ) ) . '); - ' . $editor_object . '.coreData.unstableBootstrapServerSideVariableDefinitions(' . wp_json_encode( $this->app->getRegisteredValueAddons( 'variable', false ) ) . '); - ' . $editor_object . '.editor.init(); - ' . ( blockera_get_experimental( [ 'data', 'dynamicValue' ] ) ? $dynamic_value_bootstrapper : '' ) . ' - };'; - - if ( false !== strpos( $inline_script, $script ) ) { - - return $inline_script; - } - - return sprintf( '%s%s', $inline_script . PHP_EOL, $script ); + return implode( ";\n", $blocks_attributes_scripts ) . ' + ' . $editor_object . '.editor.unstableRegistrationSharedBlockAttributes(' . wp_json_encode( $shared_block_attributes ) . ');'; } /** diff --git a/packages/editor/js/style-engine/components/state-style.js b/packages/editor/js/style-engine/components/state-style.js index a59c1d9a4..34af2aa43 100644 --- a/packages/editor/js/style-engine/components/state-style.js +++ b/packages/editor/js/style-engine/components/state-style.js @@ -6,7 +6,7 @@ import { select } from '@wordpress/data'; import type { MixedElement } from 'react'; import { applyFilters } from '@wordpress/hooks'; -import { useId, useMemo, useState, useEffect } from '@wordpress/element'; +import { useId, useMemo } from '@wordpress/element'; /** * Blockera dependencies @@ -80,24 +80,7 @@ export const StateStyle = ( ); const { getBreakpoints } = select('blockera/editor'); - - const [breakpoints, setBreakpoints] = useState([]); - - // Because we registering breakpoints after loaded all assets in front-end pages, - // We should in each interval time, try to set breakpoints into native state. - // FIXME: in this useEffect is performance bottleneck! please implements infrastructure to able remove it. - useEffect(() => { - const intervalId = setInterval(() => { - if (!breakpoints.length) { - setBreakpoints(getBreakpoints()); - } - }, 1000); - - return () => { - clearInterval(intervalId); - }; - // eslint-disable-next-line - }, []); + const breakpoints = getBreakpoints(); return Object.entries(breakpoints).map( ([, breakpoint]: [string, BreakpointTypes], index: number): any => { diff --git a/packages/wordpress/php/AssetsLoader.php b/packages/wordpress/php/AssetsLoader.php index 82c00a07d..6e59ce3c0 100644 --- a/packages/wordpress/php/AssetsLoader.php +++ b/packages/wordpress/php/AssetsLoader.php @@ -157,12 +157,20 @@ function ( array $asset ): void { ); /** - * This filter for extendable inline script from internal or third-party developers. + * This filter for extendable before inline script from internal or third-party developers. * - * @hook 'blockera/wordpress/{$this->id}/inline-script' + * @hook 'blockera/wordpress/{$this->id}/inline-script/before' * @since 1.0.0 */ - $inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script', '' ); + $before_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script/before', '' ); + + /** + * This filter for extendable after inline script from internal or third-party developers. + * + * @hook 'blockera/wordpress/{$this->id}/inline-script/after' + * @since 1.0.0 + */ + $after_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/inline-script/after', '' ); /** * This filter for change handle name for inline script from internal or third-party developers. @@ -172,17 +180,24 @@ function ( array $asset ): void { */ $handle_inline_script = apply_filters( 'blockera/wordpress/' . $this->id . '/handle/inline-script', '' ); - if ( empty( $inline_script ) || empty( $handle_inline_script ) ) { + if ( !empty( $before_inline_script ) && !empty( $handle_inline_script ) ) { - return; + // blockera server side before scripts. + wp_add_inline_script( + $handle_inline_script, + $before_inline_script, + 'before' + ); } - // blockera server side definitions. - wp_add_inline_script( - $handle_inline_script, - $inline_script, - 'after' - ); + if ( !empty( $after_inline_script ) && !empty( $handle_inline_script ) ) { + + // blockera server side before scripts. + wp_add_inline_script( + $handle_inline_script, + $after_inline_script, + ); + } } /**