@elementor/editor-v1-adapters 0.6.2 → 0.8.0

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

@@ -1,12 +1,13 @@
-import { openRoute, registerRoute, runCommand } from '../index';
-import { ExtendedWindow } from '../types';
+import { openRoute, blockDataCommand, registerRoute, runCommand } from '../index';
+import { DependencyHook, ExtendedWindow } from '../types';
 
 describe( '@elementor/editor-v1-adapters/dispatchers', () => {
-	let eRun: jest.Mock,
-		eRoute: jest.Mock,
-		eRegisterRoute: jest.Mock;
+	let eRun: jest.Mock, eRoute: jest.Mock, eRegisterRoute: jest.Mock, eDependencyRegisterSpy: jest.SpyInstance;
+
+	let hooks: DependencyHook[] = [];
 
 	beforeEach( () => {
+		hooks = [];
 		const extendedWindow = window as unknown as ExtendedWindow;
 
 		extendedWindow.$e = {
@@ -15,11 +16,24 @@ describe( '@elementor/editor-v1-adapters/dispatchers', () => {
 			routes: {
 				register: jest.fn(),
 			},
+			modules: {
+				hookData: {
+					Dependency: class {
+						register() {
+							hooks.push( this as never );
+						}
+					} as typeof DependencyHook,
+				},
+			},
 		};
 
 		eRun = jest.mocked( extendedWindow.$e.run );
 		eRoute = jest.mocked( extendedWindow.$e.route );
 		eRegisterRoute = jest.mocked( extendedWindow.$e?.routes?.register || jest.fn() );
+		eDependencyRegisterSpy = jest.spyOn(
+			extendedWindow.$e?.modules?.hookData?.Dependency?.prototype as DependencyHook,
+			'register'
+		);
 	} );
 
 	it( 'should run a V1 command that returns Promise', () => {
@@ -88,9 +102,7 @@ describe( '@elementor/editor-v1-adapters/dispatchers', () => {
 		} );
 
 		// Act.
-		expect( () => openRoute( route ) )
-			.rejects
-			.toEqual( 'Cannot find test/route' );
+		expect( () => openRoute( route ) ).rejects.toEqual( 'Cannot find test/route' );
 	} );
 
 	it.each( [
@@ -106,23 +118,92 @@ describe( '@elementor/editor-v1-adapters/dispatchers', () => {
 
 	it( 'should throw if trying to register invalid route', () => {
 		// Act & Assert.
-		expect( () => registerRoute( 'test' ) )
-			.rejects
-			.toEqual( '`test` is an invalid route' );
+		expect( () => registerRoute( 'test' ) ).rejects.toEqual( '`test` is an invalid route' );
 	} );
 
 	it.each( [
 		[ '$e.route()', () => openRoute( 'test/route' ) ],
 		[ '$e.run()', () => runCommand( 'editor/documents/open' ) ],
 		[ '$e.routes.register()', () => registerRoute( 'test/route' ) ],
+		[
+			'$e.modules.hookData.Dependency',
+			() =>
+				blockDataCommand( {
+					command: '',
+					condition: () => true,
+				} ),
+		],
 	] )( 'should reject when trying to use V1 and `%s` is unavailable', ( v1Method, action ) => {
 		// Arrange.
 		delete ( window as { $e?: unknown } ).$e;
 
 		// Act & Assert.
-		expect( () => action() )
-			.rejects
-			.toEqual( `\`${ v1Method }\` is not available` );
+		expect( () => action() ).rejects.toEqual( `\`${ v1Method }\` is not available` );
+	} );
+
+	it( 'should register a V1 dependency hook that blocks a V1 command', () => {
+		// Act.
+		const result = blockDataCommand( {
+			command: '',
+			condition: () => true,
+		} );
+
+		// Assert.
+		expect( eDependencyRegisterSpy ).toHaveBeenCalled();
+		expect( result ).toEqual( Promise.resolve() );
+	} );
+
+	it( 'should reject when failing to register a V1 dependency hook that blocks a V1 command', () => {
+		// Arrange.
+		eDependencyRegisterSpy.mockImplementation( () => {
+			throw 'Error';
+		} );
+
+		// Act & Assert.
+		expect( () =>
+			blockDataCommand( {
+				command: '',
+				condition: () => true,
+			} )
+		).rejects.toEqual( 'Error' );
+	} );
+
+	it( 'should get the right command name, id and condition when blocking a v1 command', () => {
+		// Arrange.
+		blockDataCommand( {
+			command: 'editor/documents/open',
+			condition: ( args ) => 'key' in args,
+		} );
+
+		blockDataCommand( {
+			command: 'editor/documents/open',
+			condition: () => false,
+		} );
+
+		blockDataCommand( {
+			command: 'editor/documents/close',
+			condition: () => false,
+		} );
+
+		// Act & Assert.
+		expect( hooks ).toHaveLength( 3 );
+
+		expect( hooks[ 0 ].getCommand() ).toEqual( 'editor/documents/open' );
+		expect( hooks[ 1 ].getCommand() ).toEqual( 'editor/documents/open' );
+		expect( hooks[ 2 ].getCommand() ).toEqual( 'editor/documents/close' );
+
+		const hookId1 = hooks[ 0 ].getId();
+		const hookId2 = hooks[ 1 ].getId();
+		const hookId3 = hooks[ 2 ].getId();
+
+		expect( hookId1 ).not.toEqual( hookId2 );
+
+		expect( hookId1 ).toMatch( /^editor\/documents\/open--block--\d+$/ );
+		expect( hookId2 ).toMatch( /^editor\/documents\/open--block--\d+$/ );
+		expect( hookId3 ).toMatch( /^editor\/documents\/close--block--\d+$/ );
+
+		expect( hooks[ 0 ].apply( { key: 'value' } ) ).toBe( false );
+		expect( hooks[ 0 ].apply( { value: 'value' } ) ).toBe( true );
 	} );
 } );
 

package/src/dispatchers/dispatchers.ts

@@ -29,9 +29,7 @@ export function openRoute( route: string ) {
 	}
 
 	try {
-		return Promise.resolve(
-			extendedWindow.$e.route( route )
-		);
+		return Promise.resolve( extendedWindow.$e.route( route ) );
 	} catch ( e ) {
 		return Promise.reject( e );
 	}
@@ -54,9 +52,52 @@ export function registerRoute( route: string ) {
 	const component = routeParts.join( '/' );
 
 	try {
-		return Promise.resolve(
-			extendedWindow.$e.routes.register( component, componentRoute, () => null )
-		);
+		return Promise.resolve( extendedWindow.$e.routes.register( component, componentRoute, () => null ) );
+	} catch ( e ) {
+		return Promise.reject( e );
+	}
+}
+
+type UnknownArgs = Record< string, unknown >;
+
+let hookId = 0;
+
+export function blockDataCommand( {
+	command,
+	condition,
+}: {
+	command: string;
+	condition: ( args: UnknownArgs ) => boolean;
+} ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const DependencyHook = extendedWindow.$e?.modules?.hookData?.Dependency;
+
+	if ( ! DependencyHook ) {
+		return Promise.reject( '`$e.modules.hookData.Dependency` is not available' );
+	}
+
+	const __hookId = ++hookId;
+
+	const dependencyHook = new ( class extends DependencyHook {
+		getCommand() {
+			return command;
+		}
+
+		getId() {
+			return `${ command }--block--${ __hookId }`;
+		}
+
+		apply( args: UnknownArgs ) {
+			// If the condition is met, we will stop the original command from running.
+			const shouldStopOriginalAction = condition( args );
+
+			// We will return `false` if we want to stop the original action from running.
+			return ! shouldStopOriginalAction;
+		}
+	} )();
+
+	try {
+		return Promise.resolve( dependencyHook.register() );
 	} catch ( e ) {
 		return Promise.reject( e );
 	}

package/src/dispatchers/types.ts

@@ -1,5 +1,5 @@
-export type jQueryDeferred<T> = {
-	then<U>( onFulfill: ( value: T ) => U, onReject?: ( error: unknown ) => U ): jQueryDeferred<U>;
+export type jQueryDeferred< T > = {
+	then< U >( onFulfill: ( value: T ) => U, onReject?: ( error: unknown ) => U ): jQueryDeferred< U >;
 };
 
 export type ExtendedWindow = Window & {
@@ -7,11 +7,19 @@ export type ExtendedWindow = Window & {
 		run: ( command: string, args?: object ) => unknown;
 		route: ( route: string ) => unknown;
 		routes?: {
-			register?: (
-				component: string,
-				route: string,
-				callback: () => unknown
-			) => unknown;
-		}
-	},
+			register?: ( component: string, route: string, callback: () => unknown ) => unknown;
+		};
+		modules?: {
+			hookData?: {
+				Dependency: typeof DependencyHook;
+			};
+		};
+	};
+};
+
+export declare class DependencyHook {
+	getCommand(): string;
+	getId(): string;
+	apply( args: Record< string, unknown > ): boolean;
+	register(): void;
 }

package/src/dispatchers/utils.ts

@@ -1,17 +1,19 @@
 import { jQueryDeferred } from './types';
 
-export function isJQueryDeferred<T>( value: unknown ): value is jQueryDeferred<T> {
+export function isJQueryDeferred< T >( value: unknown ): value is jQueryDeferred< T > {
 	// TODO: Copied from:
 	//  https://github.com/elementor/elementor/blob/6a74fc9/modules/web-cli/assets/js/core/commands.js#L410
 
-	return ( !! value ) &&
+	return (
+		!! value &&
 		'object' === typeof value &&
 		Object.hasOwn( value, 'promise' ) &&
 		Object.hasOwn( value, 'then' ) &&
-		Object.hasOwn( value, 'fail' );
+		Object.hasOwn( value, 'fail' )
+	);
 }
 
-export function promisifyJQueryDeferred<T>( deferred: jQueryDeferred<T> ): Promise<T> {
+export function promisifyJQueryDeferred< T >( deferred: jQueryDeferred< T > ): Promise< T > {
 	return new Promise( ( resolve, reject ) => {
 		deferred.then( resolve, reject );
 	} );

package/src/hooks/__tests__/use-is-preview-mode.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
 import { __privateUseIsPreviewMode as useIsPreviewMode } from '../../index';
-import { dispatchEditModeChange } from '../../__tests__/utils';
+import { dispatchEditModeChange } from 'test-utils';
 import { mockGetCurrentEditMode } from './test-utils';
 
 describe( '@elementor/editor-v1-adapters - useIsPreviewMode', () => {

package/src/hooks/__tests__/use-is-route-active.test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
 import useIsRouteActive from '../use-is-route-active';
-import { dispatchRouteClose, dispatchRouteOpen } from '../../__tests__/utils';
+import { dispatchRouteClose, dispatchRouteOpen } from 'test-utils';
 import { mockIsRouteActive } from './test-utils';
 
 describe( '@elementor/editor-v1-adapters - useIsRouteActive', () => {

package/src/hooks/__tests__/use-route-status.test.ts

@@ -42,20 +42,20 @@ describe( '@elementor/editor-v1-adapters - useRouteStatus', () => {
 			},
 			expected: false,
 		},
-	] )( 'should check if the route is active: isRouteActive = $input.isRouteActive, isPreviewMode = $input.isPreviewMode, options: $input.options', ( {
-		input: { isRouteActive, isKitRouteActive, isPreviewMode, options },
-		expected,
-	} ) => {
-		// Arrange
-		mockIsRouteActive( ( route ) => route === 'panel/global' ? isKitRouteActive : isRouteActive );
-		mockGetCurrentEditMode( () => isPreviewMode ? 'preview' : 'edit' );
+	] )(
+		'should check if the route is active: isRouteActive = $input.isRouteActive, isPreviewMode = $input.isPreviewMode, options: $input.options',
+		( { input: { isRouteActive, isKitRouteActive, isPreviewMode, options }, expected } ) => {
+			// Arrange
+			mockIsRouteActive( ( route ) => ( route === 'panel/global' ? isKitRouteActive : isRouteActive ) );
+			mockGetCurrentEditMode( () => ( isPreviewMode ? 'preview' : 'edit' ) );
 
-		// Act.
-		const { result } = renderHook( () => useRouteStatus( 'panel/page-settings', options ) );
+			// Act.
+			const { result } = renderHook( () => useRouteStatus( 'panel/page-settings', options ) );
 
-		// Assert.
-		expect( result.current.isActive ).toBe( expected );
-	} );
+			// Assert.
+			expect( result.current.isActive ).toBe( expected );
+		}
+	);
 
 	it.each( [
 		{
@@ -107,18 +107,18 @@ describe( '@elementor/editor-v1-adapters - useRouteStatus', () => {
 			},
 			expected: true,
 		},
-	] )( 'should check if the route is blocked: isKitRouteActive = $input.isKitRouteActive, isPreviewMode = $input.isPreviewMode, options: $input.options', ( {
-		input: { isRouteActive, isKitRouteActive, isPreviewMode, options },
-		expected,
-	} ) => {
-		// Arrange
-		mockIsRouteActive( ( route ) => route === 'panel/global' ? isKitRouteActive : isRouteActive );
-		mockGetCurrentEditMode( () => isPreviewMode ? 'preview' : 'edit' );
+	] )(
+		'should check if the route is blocked: isKitRouteActive = $input.isKitRouteActive, isPreviewMode = $input.isPreviewMode, options: $input.options',
+		( { input: { isRouteActive, isKitRouteActive, isPreviewMode, options }, expected } ) => {
+			// Arrange
+			mockIsRouteActive( ( route ) => ( route === 'panel/global' ? isKitRouteActive : isRouteActive ) );
+			mockGetCurrentEditMode( () => ( isPreviewMode ? 'preview' : 'edit' ) );
 
-		// Act.
-		const { result } = renderHook( () => useRouteStatus( 'panel/page-settings', options ) );
+			// Act.
+			const { result } = renderHook( () => useRouteStatus( 'panel/page-settings', options ) );
 
-		// Assert.
-		expect( result.current.isBlocked ).toBe( expected );
-	} );
+			// Assert.
+			expect( result.current.isBlocked ).toBe( expected );
+		}
+	);
 } );

package/src/hooks/use-is-preview-mode.ts

@@ -3,8 +3,5 @@ import { getCurrentEditMode } from '../readers';
 import { editModeChangeEvent } from '../listeners';
 
 export default function useIsPreviewMode() {
-	return useListenTo(
-		editModeChangeEvent(),
-		() => getCurrentEditMode() === 'preview'
-	);
+	return useListenTo( editModeChangeEvent(), () => getCurrentEditMode() === 'preview' );
 }

package/src/hooks/use-is-route-active.ts

@@ -2,13 +2,8 @@ import useListenTo from './use-listen-to';
 import { isRouteActive } from '../readers';
 import { routeCloseEvent, routeOpenEvent, RouteEventDescriptor } from '../listeners';
 
-export default function useIsRouteActive( route: RouteEventDescriptor['name'] ) {
-	return useListenTo(
-		[
-			routeOpenEvent( route ),
-			routeCloseEvent( route ),
-		],
-		() => isRouteActive( route ),
-		[ route ]
-	);
+export default function useIsRouteActive( route: RouteEventDescriptor[ 'name' ] ) {
+	return useListenTo( [ routeOpenEvent( route ), routeCloseEvent( route ) ], () => isRouteActive( route ), [
+		route,
+	] );
 }

package/src/hooks/use-listen-to.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { EventDescriptor, listenTo } from '../listeners';
 
-export default function useListenTo<T>(
+export default function useListenTo< T >(
 	event: EventDescriptor | EventDescriptor[],
 	getSnapshot: () => T,
 	deps: unknown[] = []

package/src/hooks/use-route-status.ts

@@ -3,16 +3,13 @@ import useIsRouteActive from './use-is-route-active';
 import { RouteEventDescriptor } from '../listeners';
 
 type Options = {
-	blockOnKitRoutes?: boolean,
-	blockOnPreviewMode?: boolean,
-}
+	blockOnKitRoutes?: boolean;
+	blockOnPreviewMode?: boolean;
+};
 
 export default function useRouteStatus(
-	route: RouteEventDescriptor['name'],
-	{
-		blockOnKitRoutes = true,
-		blockOnPreviewMode = true,
-	}: Options = {}
+	route: RouteEventDescriptor[ 'name' ],
+	{ blockOnKitRoutes = true, blockOnPreviewMode = true }: Options = {}
 ) {
 	const isRouteActive = useIsRouteActive( route );
 	const isKitRouteActive = useIsRouteActive( 'panel/global' );
@@ -20,10 +17,7 @@ export default function useRouteStatus(
 
 	const isActive = isRouteActive && ! ( blockOnPreviewMode && isPreviewMode );
 
-	const isBlocked = (
-		( blockOnPreviewMode && isPreviewMode ) ||
-		( blockOnKitRoutes && isKitRouteActive )
-	);
+	const isBlocked = ( blockOnPreviewMode && isPreviewMode ) || ( blockOnKitRoutes && isKitRouteActive );
 
 	return {
 		isActive,

package/src/index.ts

@@ -2,6 +2,7 @@ export {
 	runCommand as __privateRunCommand,
 	openRoute as __privateOpenRoute,
 	registerRoute as __privateRegisterRoute,
+	blockDataCommand as __privateBlockDataCommand,
 } from './dispatchers';
 
 export {
@@ -27,7 +28,4 @@ export {
 
 export type * from './listeners';
 
-export {
-	isRouteActive as __privateIsRouteActive,
-	getCurrentEditMode as __privateGetCurrentEditMode,
-} from './readers';
+export { isRouteActive as __privateIsRouteActive, getCurrentEditMode as __privateGetCurrentEditMode } from './readers';

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

@@ -17,7 +17,7 @@ import {
 	dispatchRouteClose,
 	dispatchRouteOpen,
 	dispatchWindowEvent,
-} from '../../__tests__/utils';
+} from 'test-utils';
 
 describe( '@elementor/editor-v1-adapters/listeners', () => {
 	beforeEach( () => {
@@ -35,10 +35,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo(
-			commandStartEvent( commandToListen ),
-			callback
-		);
+		listenTo( commandStartEvent( commandToListen ), callback );
 
 		// Dispatch the command to test.
 		dispatchCommandBefore( commandToListen );
@@ -64,10 +61,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo(
-			commandEndEvent( commandToListen ),
-			callback
-		);
+		listenTo( commandEndEvent( commandToListen ), callback );
 
 		// Dispatch the command to test.
 		dispatchCommandBefore( commandToListen );
@@ -93,10 +87,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo(
-			routeOpenEvent( routeToListen ),
-			callback
-		);
+		listenTo( routeOpenEvent( routeToListen ), callback );
 
 		// Dispatch the route to test.
 		dispatchRouteOpen( routeToListen );
@@ -120,10 +111,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo(
-			routeCloseEvent( routeToListen ),
-			callback
-		);
+		listenTo( routeCloseEvent( routeToListen ), callback );
 
 		// Dispatch the route to test.
 		dispatchRouteClose( routeToListen );
@@ -146,10 +134,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo(
-			windowEvent( event ),
-			callback
-		);
+		listenTo( windowEvent( event ), callback );
 
 		// Dispatch events.
 		dispatchWindowEvent( event );
@@ -170,15 +155,9 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback2 = jest.fn();
 
 		// Act.
-		listenTo(
-			windowEvent( event ),
-			callback1
-		);
+		listenTo( windowEvent( event ), callback1 );
 
-		listenTo(
-			windowEvent( event ),
-			callback2
-		);
+		listenTo( windowEvent( event ), callback2 );
 
 		// Dispatch events.
 		dispatchWindowEvent( event );
@@ -196,11 +175,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback = jest.fn();
 
 		// Act.
-		listenTo( [
-			windowEvent( event ),
-			commandStartEvent( command ),
-			routeOpenEvent( route ),
-		], callback );
+		listenTo( [ windowEvent( event ), commandStartEvent( command ), routeOpenEvent( route ) ], callback );
 
 		// Dispatch events.
 		dispatchCommandBefore( command );
@@ -240,18 +215,9 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 			callback1 = jest.fn(),
 			callback2 = jest.fn();
 
-		const cleanup1 = listenTo(
-			[
-				windowEvent( event1 ),
-				windowEvent( event2 ),
-			],
-			callback1,
-		);
+		const cleanup1 = listenTo( [ windowEvent( event1 ), windowEvent( event2 ) ], callback1 );
 
-		const cleanup2 = listenTo(
-			windowEvent( event1 ),
-			callback2,
-		);
+		const cleanup2 = listenTo( windowEvent( event1 ), callback2 );
 
 		// Act.
 		cleanup1();
@@ -271,10 +237,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 		const event = 'test-event',
 			callback = jest.fn();
 
-		const cleanup = listenTo(
-			windowEvent( event ),
-			callback,
-		);
+		const cleanup = listenTo( windowEvent( event ), callback );
 
 		// Act.
 		cleanup();
@@ -290,17 +253,14 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 	it( 'should trigger v1 ready when v1 is loaded after v2', async () => {
 		// Arrange.
 		const callback = jest.fn();
-		const extendedWindow = ( window as unknown as ExtendedWindow );
+		const extendedWindow = window as unknown as ExtendedWindow;
 
 		extendedWindow.__elementorEditorV1LoadingPromise = new Promise( ( resolve ) => {
 			setTimeout( resolve, 1000 );
 		} );
 
 		// Act.
-		listenTo(
-			v1ReadyEvent(),
-			callback
-		);
+		listenTo( v1ReadyEvent(), callback );
 
 		dispatchReadyEvent();
 
@@ -318,10 +278,7 @@ describe( '@elementor/editor-v1-adapters/listeners', () => {
 		const callback = jest.fn();
 
 		// Act.
-		listenTo(
-			windowEvent( event ),
-			callback
-		);
+		listenTo( windowEvent( event ), callback );
 
 		// Dispatch events.
 		dispatchWindowEvent( event );

package/src/listeners/event-creators.ts

@@ -1,6 +1,6 @@
 import { CommandEventDescriptor, RouteEventDescriptor, WindowEventDescriptor } from './types';
 
-export const commandStartEvent = ( command: CommandEventDescriptor['name'] ): CommandEventDescriptor => {
+export const commandStartEvent = ( command: CommandEventDescriptor[ 'name' ] ): CommandEventDescriptor => {
 	return {
 		type: 'command',
 		name: command,
@@ -8,7 +8,7 @@ export const commandStartEvent = ( command: CommandEventDescriptor['name'] ): Co
 	};
 };
 
-export const commandEndEvent = ( command: CommandEventDescriptor['name'] ): CommandEventDescriptor => {
+export const commandEndEvent = ( command: CommandEventDescriptor[ 'name' ] ): CommandEventDescriptor => {
 	return {
 		type: 'command',
 		name: command,
@@ -16,7 +16,7 @@ export const commandEndEvent = ( command: CommandEventDescriptor['name'] ): Comm
 	};
 };
 
-export const routeOpenEvent = ( route: RouteEventDescriptor['name'] ): RouteEventDescriptor => {
+export const routeOpenEvent = ( route: RouteEventDescriptor[ 'name' ] ): RouteEventDescriptor => {
 	return {
 		type: 'route',
 		name: route,
@@ -24,7 +24,7 @@ export const routeOpenEvent = ( route: RouteEventDescriptor['name'] ): RouteEven
 	};
 };
 
-export const routeCloseEvent = ( route: RouteEventDescriptor['name'] ): RouteEventDescriptor => {
+export const routeCloseEvent = ( route: RouteEventDescriptor[ 'name' ] ): RouteEventDescriptor => {
 	return {
 		type: 'route',
 		name: route,
@@ -32,7 +32,7 @@ export const routeCloseEvent = ( route: RouteEventDescriptor['name'] ): RouteEve
 	};
 };
 
-export const windowEvent = ( event: WindowEventDescriptor['name'] ): WindowEventDescriptor => {
+export const windowEvent = ( event: WindowEventDescriptor[ 'name' ] ): WindowEventDescriptor => {
 	return {
 		type: 'window-event',
 		name: event,