Boost: add URL-pattern exclusions to Defer Non-Essential JavaScript

projects/plugins/boost/app/assets/src/js/features/render-blocking-js/render-blocking-js-meta.module.scss

@@ -0,0 +1,66 @@
+@use "$css/main/variables";
+
+.wrapper {
+	font-size: 14px;
+	line-height: 22px;
+
+	:global(button ~ button) {
+		margin-left: 20px !important;
+	}
+
+	.summary {
+		flex-grow: 1;
+	}
+
+	.section {
+		margin-top: 16px;
+		margin-bottom: 16px;
+		padding: 16px;
+		border-radius: 4px;
+		background-color: var(--gray-0);
+
+		.title {
+			margin-bottom: 16px;
+			font-size: 16px;
+			line-height: 1;
+			font-weight: 600;
+		}
+	}
+
+	.description {
+		margin-top: 8px;
+		font-size: 14px;
+		line-height: 1.5;
+		color: var(--gray-60);
+		font-weight: 400;
+	}
+
+	.button {
+		margin-top: 16px;
+	}
+
+	.manage-excludes label {
+		display: block;
+		margin-bottom: 16px;
+		line-height: 1.5;
+	}
+
+	.manage-excludes input[type="text"] {
+		width: 100%;
+		padding: 10px;
+		border-radius: 4px;
+		border: 1px solid variables.$gray_10;
+	}
+
+	.edit-button svg {
+		fill: var(--wp-admin-theme-color);
+	}
+
+	.sub-header {
+		font-size: 16px;
+		line-height: 1;
+		color: var(--gray-60);
+		font-weight: 400;
+		padding-bottom: 2px;
+	}
+}

projects/plugins/boost/app/assets/src/js/features/render-blocking-js/render-blocking-js-meta.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { Button } from '@automattic/jetpack-components';
+import { useDataSync } from '@automattic/jetpack-react-data-sync-client';
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { z } from 'zod';
+import { recordBoostEvent } from '$lib/utils/analytics';
+import styles from './render-blocking-js-meta.module.scss';
+import CollapsibleMeta from '$features/ui/collapsible-meta/collapsible-meta';
+import { useNotices } from '$features/notice/context';
+
+const datasyncKey = 'render_blocking_js_excludes';
+
+const useExcludesQuery = ( onSuccess?: ( newState: string[] ) => void ) => {
+	const [ { data }, { mutate } ] = useDataSync(
+		'jetpack_boost_ds',
+		datasyncKey,
+		z.array( z.string() )
+	);
+
+	function updateValues( text: string ) {
+		mutate(
+			text.split( ',' ).map( item => item.trim() ),
+			{
+				onSuccess: newState => {
+					// Run the passed on callbacks after the mutation has been applied
+					onSuccess?.( newState );
+				},
+			}
+		);
+	}
+
+	return [ data || [], updateValues ] as const;
+};
+
+const RenderBlockingJsMeta = () => {
+	const noticeId = `render-blocking-js-meta-${ datasyncKey }`;
+
+	const [ values, updateValues ] = useExcludesQuery( newState => {
+		setInputValue( newState.join( ', ' ) );
+		setNotice( {
+			id: noticeId,
+			type: 'success',
+			message: __( 'Changes saved', 'jetpack-boost' ),
+		} );
+	} );
+	const [ inputValue, setInputValue ] = useState( () => values.join( ', ' ) );
+	const { setNotice } = useNotices();
+
+	const onToggleHandler = ( isExpanded: boolean ) => {
+		if ( ! isExpanded ) {
+			setInputValue( values.join( ', ' ) );
+		}
+	};
+
+	function save() {
+		recordBoostEvent( 'defer_js_exceptions_save_clicked', {} );
+
+		// Show saving notice
+		setNotice( {
+			id: noticeId,
+			type: 'pending',
+			message: __( 'Saving…', 'jetpack-boost' ),
+		} );
+
+		updateValues( inputValue );
+	}
+
+	const htmlId = `jb-render-blocking-js-meta-${ datasyncKey }`;
+
+	// Be explicit about this because the optimizer breaks the linter otherwise.
+	let summary;
+	if ( values.length > 0 ) {
+		/* Translators: %s refers to the list of excluded items. */
+		summary = sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) );
+	}
+
+	if ( values.length === 0 ) {
+		summary = __( 'No exceptions.', 'jetpack-boost' );
+	}
+
+	const content = (
+		<div className={ styles.body }>
+			<div className={ styles.section }>
+				<div className={ styles.title }>{ __( 'Exceptions', 'jetpack-boost' ) }</div>
+				<div className={ styles[ 'manage-excludes' ] }>
+					<label className={ styles[ 'sub-header' ] } htmlFor={ htmlId }>
+						{ __( 'Exclude URL patterns:', 'jetpack-boost' ) }
+					</label>
+					<input
+						type="text"
+						value={ inputValue }
+						placeholder={ __(
+							'Comma-separated list of URL patterns to exclude, e.g.: checkout, gallery/(.*)',
+							'jetpack-boost'
+						) }
+						id={ htmlId }
+						onChange={ e => setInputValue( e.target.value ) }
+						onKeyDown={ e => {
+							if ( e.key === 'Enter' || e.key === 'NumpadEnter' ) {
+								save();
+							}
+						} }
+					/>
+					<div className={ styles.description }>
+						{ __(
+							'JavaScript will not be deferred on pages matching these URL patterns. Use a comma (,) to separate the patterns. Use (.*) to address multiple URLs under a given path.',
+							'jetpack-boost'
+						) }
+						<br />
+						{ createInterpolateElement(
+							__(
+								'To keep a single script in place on every page instead, add the <code>data-jetpack-boost="ignore"</code> attribute to its script tag.',
+								'jetpack-boost'
+							),
+							{
+								code: <code />,
+							}
+						) }
+					</div>
+					<Button
+						disabled={ values.join( ', ' ) === inputValue }
+						className={ styles.button }
+						onClick={ save }
+					>
+						{ __( 'Save', 'jetpack-boost' ) }
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+
+	return (
+		<div className={ styles.wrapper } data-testid={ `meta-${ datasyncKey }` }>
+			<CollapsibleMeta
+				headerText={ summary }
+				toggleText={ __( 'Exclude URL patterns', 'jetpack-boost' ) }
+				tracksEvent="defer_js_excludes_panel_toggle"
+				onToggleHandler={ onToggleHandler }
+			>
+				{ content }
+			</CollapsibleMeta>
+		</div>
+	);
+};
+
+export default RenderBlockingJsMeta;

projects/plugins/boost/app/assets/src/js/pages/index/index.tsx

@@ -9,6 +9,7 @@ import MinifyJs from '$features/minify-js/minify-js';
 import { useSingleModuleState } from '$features/module/lib/stores';
 import Module from '$features/module/module';
 import PageCacheModule from '$features/page-cache/page-cache';
+import RenderBlockingJsMeta from '$features/render-blocking-js/render-blocking-js-meta';
 import PremiumTooltip from '$features/premium-tooltip/premium-tooltip';
 import Upgraded from '$features/ui/upgraded/upgraded';
 import InterstitialModalCTA from '$features/upgrade-cta/interstitial-modal-cta';
@@ -153,7 +154,9 @@ const Index = () => {
 						) }
 					</p>
 				}
-			></Module>
+			>
+				<RenderBlockingJsMeta />
+			</Module>
 			<MinifyJs />
 			<MinifyCss />
 			<Module