i18n-calypso: Replace EventEmitter with simplified subscriber callbacks

client/components/calypso-i18n-provider/index.tsx

@@ -19,11 +19,7 @@ const CalypsoI18nProvider: FunctionComponent< { i18n?: I18N; children?: React.Re
 			setLocaleSlug( i18n.getLocaleSlug() );
 		};
 
-		i18n.on( 'change', onChange );
-
-		return () => {
-			i18n.off( 'change', onChange );
-		};
+		return i18n.subscribe( onChange );
 	}, [ i18n ] );
 
 	useEffect( () => {

client/components/community-translator/index.jsx

@@ -31,11 +31,11 @@ class CommunityTranslator extends Component {
 		// callback when translated component changes.
 		// the callback is overwritten by the translator on load/unload, so we're returning it within an anonymous function.
 		i18n.registerComponentUpdateHook( () => {} );
-		i18n.on( 'change', this.refresh );
+		this.i18nUnsubscribe = i18n.subscribe( this.refresh );
 	}
 
 	componentWillUnmount() {
-		i18n.off( 'change', this.refresh );
+		this.i18nUnsubscribe();
 	}
 
 	setLanguage() {

client/layout/community-translator/launcher.jsx

@@ -59,12 +59,12 @@ class TranslatorLauncher extends Component {
 	highlightRef = createRef();
 
 	componentDidMount() {
-		i18n.on( 'change', this.onI18nChange );
+		this.i18nUnsubscribe = i18n.subscribe( this.onI18nChange );
 		window.addEventListener( 'keydown', this.handleKeyDown );
 	}
 
 	componentWillUnmount() {
-		i18n.off( 'change', this.onI18nChange );
+		this.i18nUnsubscribe();
 		window.removeEventListener( 'keydown', this.handleKeyDown );
 	}
 

client/lib/i18n-utils/empathy-mode.js

@@ -3,7 +3,7 @@ import i18n, { I18N, translate } from 'i18n-calypso';
 let defaultUntranslatedPlacehoder = translate( "I don't understand" );
 
 // keep `defaultUntranslatedPlacehoder` in sync with i18n changes
-i18n.on( 'change', () => {
+i18n.subscribe( () => {
 	defaultUntranslatedPlacehoder = translate( "I don't understand" );
 } );
 

client/lib/translator-jumpstart/index.js

@@ -328,6 +328,6 @@ export function trackTranslatorStatus( isTranslatorEnabled ) {
 }
 
 // re-initialize when new locale data is loaded
-i18n.on( 'change', communityTranslatorJumpstart.init.bind( communityTranslatorJumpstart ) );
+i18n.subscribe( communityTranslatorJumpstart.init.bind( communityTranslatorJumpstart ) );
 
 export default communityTranslatorJumpstart;

packages/i18n-calypso/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Trunk
+
+- Breaking: Emitter object replaced with subscriber
+  - Before: `i18n.on( 'change', callback ); i18n.off( 'change', callback );`
+  - After: `const unsubscribe = i18n.subscribe( callback ); unsubscribe();`
+
 ## 7.5.0
 
 - Add `translationOptions` to fixMe so it can work on translations with context.

packages/i18n-calypso/package.json

@@ -29,7 +29,6 @@
 		"@tannin/sprintf": "^1.1.0",
 		"@wordpress/compose": "^7.23.0",
 		"debug": "^4.4.0",
-		"events": "^3.3.0",
 		"hash.js": "^1.1.7",
 		"lru": "^3.1.0",
 		"tannin": "^1.2.0",

packages/i18n-calypso/src/i18n.js

@@ -1,4 +1,3 @@
-import { EventEmitter } from 'events';
 import interpolateComponents from '@automattic/interpolate-components';
 import sprintf from '@tannin/sprintf';
 import debugFactory from 'debug';
@@ -27,6 +26,24 @@ const translationLookup = [
 
 const hashCache = {};
 
+/**
+ * Efficiently removes an item from an array, with the assumption that the item appears only once.
+ * @param {Array<I>} array The array to remove the item from.
+ * @param {I} item The item to remove from the array.
+ * @template I
+ */
+function removeOne( array, item ) {
+	for ( let i = 0; i < array.length; i++ ) {
+		if ( array[ i ] === item ) {
+			for ( ; i < array.length - 1; i++ ) {
+				array[ i ] = array[ i + 1 ];
+			}
+			array.pop();
+			return;
+		}
+	}
+}
+
 // raise a console warning
 function warn() {
 	if ( ! I18N.throwErrors ) {
@@ -145,11 +162,7 @@ function I18N() {
 	};
 	this.componentUpdateHooks = [];
 	this.translateHooks = [];
-	this.stateObserver = new EventEmitter();
-	// Because the higher-order component can wrap a ton of React components,
-	// we need to bump the number of listeners to infinity and beyond
-	// FIXME: still valid?
-	this.stateObserver.setMaxListeners( 0 );
+	this.subscribers = [];
 	// default configuration
 	this.configure();
 }
@@ -191,16 +204,13 @@ I18N.prototype.geolocateCurrencySymbol = async function ( callback ) {
 	callback?.( 'string' === typeof geoData?.country_short ? geoData.country_short : '' );
 };
 
-I18N.prototype.on = function ( ...args ) {
-	this.stateObserver.on( ...args );
-};
-
-I18N.prototype.off = function ( ...args ) {
-	this.stateObserver.off( ...args );
+I18N.prototype.subscribe = function ( callback ) {
+	this.subscribers.push( callback );
+	return () => removeOne( this.subscribers, callback );
 };
 
-I18N.prototype.emit = function ( ...args ) {
-	this.stateObserver.emit( ...args );
+I18N.prototype.emitChange = function () {
+	this.subscribers.forEach( ( callback ) => callback() );
 };
 
 /**
@@ -304,7 +314,7 @@ I18N.prototype.setLocale = function ( localeData ) {
 
 	this.state.tannin = new Tannin( { [ domain_key ]: this.state.locale } );
 
-	this.stateObserver.emit( 'change' );
+	this.emitChange();
 };
 
 I18N.prototype.getLocale = function () {
@@ -347,7 +357,7 @@ I18N.prototype.addTranslations = function ( localeData ) {
 		}
 	}
 
-	this.stateObserver.emit( 'change' );
+	this.emitChange();
 };
 
 /**
@@ -452,7 +462,7 @@ I18N.prototype.translate = function () {
  */
 I18N.prototype.reRenderTranslations = function () {
 	debug( 'Re-rendering all translations due to external request' );
-	this.stateObserver.emit( 'change' );
+	this.emitChange();
 };
 
 I18N.prototype.registerComponentUpdateHook = function ( callback ) {

packages/i18n-calypso/src/index.ts

@@ -24,10 +24,6 @@ export const reRenderTranslations = i18n.reRenderTranslations.bind( i18n );
 export const registerComponentUpdateHook = i18n.registerComponentUpdateHook.bind( i18n );
 export const registerTranslateHook = i18n.registerTranslateHook.bind( i18n );
 export const state = i18n.state;
-export const stateObserver = i18n.stateObserver;
-export const on = i18n.on.bind( i18n );
-export const off = i18n.off.bind( i18n );
-export const emit = i18n.emit.bind( i18n );
 export const fixMe = i18n.fixMe.bind( i18n );
 
 export type * from './types';

packages/i18n-calypso/src/localize.js

@@ -19,8 +19,7 @@ export default function localize( ComposedComponent ) {
 		const [ counter, setCounter ] = useState( 0 );
 		useEffect( () => {
 			const onChange = () => setCounter( ( c ) => c + 1 );
-			i18n.on( 'change', onChange );
-			return () => i18n.off( 'change', onChange );
+			return i18n.subscribe( onChange );
 		}, [ i18n ] );
 
 		const i18nProps = useMemo( () => bindI18nProps( i18n, counter ), [ i18n, counter ] );

packages/i18n-calypso/src/rtl.js

@@ -12,8 +12,7 @@ export function useRtl() {
 				return i18n.isRtl();
 			},
 			subscribe( callback ) {
-				i18n.on( 'change', callback );
-				return () => i18n.off( 'change', callback );
+				return i18n.subscribe( callback );
 			},
 		} ),
 		[ i18n ]
@@ -24,7 +23,7 @@ export function useRtl() {
 
 export const withRtl = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		forwardRef( ( props, ref ) => {
+		forwardRef( function WrappedRtlComponent( props, ref ) {
 			const isRtl = useRtl();
 			return <WrappedComponent { ...props } isRtl={ isRtl } ref={ ref } />;
 		} ),

packages/i18n-calypso/src/test/index.js

@@ -24,6 +24,15 @@ describe( 'I18n', function () {
 	} );
 
 	describe( 'setLocale()', function () {
+		it( 'should emit a change event', () => {
+			const callback = jest.fn();
+			i18n.subscribe( callback );
+
+			i18n.setLocale();
+
+			expect( callback ).toHaveBeenCalled();
+		} );
+
 		describe( 'adding a new locale source from the same language', function () {
 			beforeEach( function () {
 				i18n.setLocale( {
@@ -191,13 +200,23 @@ describe( 'I18n', function () {
 
 				expect( translate( 'test-does-not-exist' ) ).toBe( 'translation3' );
 			} );
+
 			it( 'should return the new translation if it has been overwritten', function () {
 				i18n.addTranslations( {
 					'test-will-overwrite': [ 'not-translation1' ],
 				} );
 
 				expect( translate( 'test-will-overwrite' ) ).toBe( 'not-translation1' );
 			} );
+
+			it( 'should emit a change event', () => {
+				const callback = jest.fn();
+				i18n.subscribe( callback );
+
+				i18n.addTranslations( {} );
+
+				expect( callback ).toHaveBeenCalled();
+			} );
 		} );
 	} );
 
@@ -266,6 +285,72 @@ describe( 'I18n', function () {
 		} );
 	} );
 
+	describe( 'emitChange()', () => {
+		it( 'should call all subscribed callbacks', () => {
+			const callback1 = jest.fn();
+			const callback2 = jest.fn();
+
+			i18n.subscribe( callback1 );
+			i18n.subscribe( callback2 );
+
+			i18n.emitChange();
+
+			expect( callback1 ).toHaveBeenCalled();
+			expect( callback2 ).toHaveBeenCalled();
+		} );
+
+		it( 'should not call unsubscribed callbacks', () => {
+			const callback1 = jest.fn();
+			const callback2 = jest.fn();
+			const callback3 = jest.fn();
+
+			i18n.subscribe( callback1 );
+			const unsubscribe2 = i18n.subscribe( callback2 );
+			i18n.subscribe( callback3 );
+
+			unsubscribe2();
+			i18n.emitChange();
+
+			expect( callback1 ).toHaveBeenCalled();
+			expect( callback2 ).not.toHaveBeenCalled();
+			expect( callback3 ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'reRenderTranslations()', () => {
+		it( 'should call subscriber callback', () => {
+			const callback = jest.fn();
+
+			i18n.subscribe( callback );
+
+			i18n.reRenderTranslations();
+
+			expect( callback ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'subscribe()', () => {
+		it( 'should call the callback whenever a change is emitted', () => {
+			const callback = jest.fn();
+
+			i18n.subscribe( callback );
+			i18n.setLocale();
+
+			expect( callback ).toHaveBeenCalled();
+		} );
+
+		it( 'should return an unsubscribe function', () => {
+			const callback = jest.fn();
+
+			const unsubscribe = i18n.subscribe( callback );
+			unsubscribe();
+
+			i18n.setLocale();
+
+			expect( callback ).not.toHaveBeenCalled();
+		} );
+	} );
+
 	describe( 'hashed locale data', function () {
 		it( 'should find keys when looked up by simple hash', function () {
 			i18n.setLocale( {

packages/i18n-calypso/src/types/index.d.ts

@@ -132,9 +132,8 @@ export interface I18N {
 	registerTranslateHook( hook: TranslateHook ): void;
 	registerComponentUpdateHook( hook: ComponentUpdateHook ): void;
 
-	on( eventName: string, listener: EventListener ): void;
-	off( eventName: string, listener: EventListener ): void;
-	emit( eventName: string, ...payload: any ): void;
+	subscribe( callback: () => any ): () => void;
+	emitChange(): void;
 
 	/**
 	 * Returns `newCopy` if given `text` is translated or locale is English, otherwise returns the `oldCopy`.
@@ -180,9 +179,6 @@ export declare const isRtl: typeof i18n.isRtl;
 export declare const defaultLocaleSlug: typeof i18n.defaultLocaleSlug;
 export declare const registerTranslateHook: typeof i18n.registerTranslateHook;
 export declare const registerComponentUpdateHook: typeof i18n.registerComponentUpdateHook;
-export declare const on: typeof i18n.on;
-export declare const off: typeof i18n.off;
-export declare const emit: typeof i18n.emit;
 export declare const fixMe: typeof i18n.fixMe;
 
 export interface LocalizeProps {

packages/i18n-calypso/src/use-translate.js

@@ -13,8 +13,7 @@ export default function useTranslate() {
 
 	useEffect( () => {
 		const onChange = () => setCounter( ( c ) => c + 1 );
-		i18n.on( 'change', onChange );
-		return () => i18n.off( 'change', onChange );
+		return i18n.subscribe( onChange );
 	}, [ i18n ] );
 
 	return useMemo( () => bindTranslate( i18n, counter ), [ i18n, counter ] );

yarn.lock

@@ -21885,7 +21885,6 @@ __metadata:
     "@types/react": "npm:^18.3.20"
     "@wordpress/compose": "npm:^7.23.0"
     debug: "npm:^4.4.0"
-    events: "npm:^3.3.0"
     hash.js: "npm:^1.1.7"
     lru: "npm:^3.1.0"
     react: "npm:^18.3.1"