e2e: get Core e2e tests passing under Gutenberg nightly - #65324

// Consumer-side guard that restores the non-enumerable `__esModule` flag when it's
// missing on an externalized `window.wp.*` module. Gutenberg's esbuild build pipeline
// (WordPress/gutenberg#78697) appends `wp.X = Object.assign({}, wp.X)` to every
// `window.wp.*` global to flatten getter-based exports; `Object.assign` only copies
// enumerable own properties, so the non-enumerable `__esModule` marker is dropped.
// Webpack's default-import interop helper (`__webpack_require__.n`) keys off that
// marker — without it, default imports of any `@wordpress/*` package with a default
// export resolve to the namespace object instead of `.default` and crash at the call
// site. We restore the flag in place on the same object Gutenberg shipped, which is
// equivalent to undoing the strip that the upstream pipeline introduced. Runtime is
// a no-op when the flag is already present, when the module has no `default`
// property, or when the module isn't an object.
const RESTORE_ESM_HELPER = `(function (m) {
	if (m && typeof m === 'object' && 'default' in m && !m.__esModule) {
		Object.defineProperty(m, '__esModule', { value: true });
	}
	return m;
})`;

/**
 * Build the JS expression that materializes a `window`-style external for the
 * non-module ('var' externalsType) path. For `@wordpress/*` requests the
 * expression is wrapped with RESTORE_ESM_HELPER to restore the `__esModule`
 * flag stripped by Gutenberg's esbuild pipeline; for everything else the
 * expression is the byte-equivalent property-walk that externalsType 'window'
 * would have produced (`window["seg1"]["seg2"]...`).
 *
 * Returns `undefined` when the request shouldn't be externalized, mirroring
 * the upstream callback contract.
 *
 * @param {string}                        request The original import string (e.g. `'@wordpress/is-shallow-equal'`).
 * @param {string | string[] | undefined} result  The value resolved by `externalizeWpDeps`.
 * @return {string | undefined} The JS expression to emit, or `undefined` if not externalized.
 */
const buildExternalExpression = ( request, result ) => {
	if ( result === undefined ) {
		return undefined;
	}
	const segments = Array.isArray( result ) ? result : [ result ];
	const expression =
		'window' +
		segments
			.map( ( segment ) => `[${ JSON.stringify( segment ) }]` )
			.join( '' );
	if ( request.startsWith( '@wordpress/' ) ) {
		return `${ RESTORE_ESM_HELPER }(${ expression })`;
	}
	return expression;
};

if ( this.useModules ) {
	// Script-modules output: externals resolve to ESM specifiers and consumers use direct
	// binding (not `__webpack_require__.n`), so the Gutenberg `__esModule`-strip regression
	// doesn't apply. Pass through to the parent's behavior unmodified.
	this.externalsPlugin = new compiler.webpack.ExternalsPlugin(
		'import',
		this.externalizeWpDeps.bind( this )
	);
} else {
	// Script (non-module) output: externals materialize as `window.wp.*` reads and consumers
	// route default imports through `__webpack_require__.n`, which keys off `__esModule`. We
	// switch externalsType from 'window' to 'var' so we can wrap each `@wordpress/*` external
	// with RESTORE_ESM_HELPER. See the helper definition above for the upstream Gutenberg
	// regression this works around. Non-`@wordpress/*` externals emit the byte-identical
	// `window[seg]...` access they would have under externalsType 'window'.
	this.externalsPlugin = new compiler.webpack.ExternalsPlugin(
		'var',
		( data, externalsCallback ) => {
			this.externalizeWpDeps( data, ( err, result ) => {
				if ( err ) {
					return externalsCallback( err );
				}
				externalsCallback(
					null,
					buildExternalExpression( data.request, result )
				);
			} );
		}
	);
}

const { __test__ } = require( '../index' );

const { buildExternalExpression, RESTORE_ESM_HELPER } = __test__;

describe( 'buildExternalExpression', () => {
	describe( '@wordpress/* externals (wrapped with RESTORE_ESM_HELPER)', () => {
		it( 'wraps a two-segment @wordpress/* path', () => {
			expect(
				buildExternalExpression( '@wordpress/is-shallow-equal', [
					'wp',
					'isShallowEqual',
				] )
			).toBe(
				`${ RESTORE_ESM_HELPER }(window["wp"]["isShallowEqual"])`
			);
		} );

		it( 'wraps a single-segment @wordpress/* result', () => {
			expect(
				buildExternalExpression( '@wordpress/foo', 'wpFoo' )
			).toBe( `${ RESTORE_ESM_HELPER }(window["wpFoo"])` );
		} );

		it( 'each wrap begins with the same RESTORE_ESM_HELPER prefix', () => {
			const wrapped = buildExternalExpression(
				'@wordpress/is-shallow-equal',
				[ 'wp', 'isShallowEqual' ]
			);
			expect( wrapped.startsWith( RESTORE_ESM_HELPER + '(' ) ).toBe(
				true
			);
		} );
	} );

	describe( 'non-@wordpress externals (byte-equivalent to externalsType "window")', () => {
		it( 'emits a plain window[seg1][seg2] walk for @woocommerce/* paths', () => {
			expect(
				buildExternalExpression( '@woocommerce/blocks-checkout', [
					'wc',
					'blocksCheckout',
				] )
			).toBe( 'window["wc"]["blocksCheckout"]' );
		} );

		it( 'emits a single property access for single-string results', () => {
			expect( buildExternalExpression( 'jquery', 'jQuery' ) ).toBe(
				'window["jQuery"]'
			);
		} );

		it( 'JSON-escapes segments containing special characters', () => {
			expect(
				buildExternalExpression( 'weird', [ 'a', 'b"c', 'd\\e' ] )
			).toBe( 'window["a"]["b\\"c"]["d\\\\e"]' );
		} );

		it( 'does not wrap requests in other @-namespaces', () => {
			expect(
				buildExternalExpression( '@scoped/some-pkg', [ 'X', 'Y' ] )
			).toBe( 'window["X"]["Y"]' );
		} );
	} );

	describe( 'non-externalized requests', () => {
		it( 'returns undefined when result is undefined', () => {
			expect(
				buildExternalExpression( '@wordpress/is-shallow-equal', undefined )
			).toBeUndefined();
			expect(
				buildExternalExpression( 'unrelated-package', undefined )
			).toBeUndefined();
		} );
	} );
} );

describe( 'RESTORE_ESM_HELPER (runtime semantics)', () => {
	// Construct the actual function from the emitted string so we can exercise
	// it directly. This is what the bundle's external module would do at runtime.
	const helper = eval( RESTORE_ESM_HELPER ); // eslint-disable-line no-eval

	it( 'is a no-op when __esModule is already true', () => {
		const moduleObj = Object.defineProperty(
			{ default: () => 'ok' },
			'__esModule',
			{ value: true }
		);
		const result = helper( moduleObj );
		expect( result ).toBe( moduleObj );
		expect( result.__esModule ).toBe( true );
	} );

	it( 'restores __esModule in place when missing on a module with default export', () => {
		const moduleObj = { default: () => 'ok' };
		const result = helper( moduleObj );
		expect( result ).toBe( moduleObj ); // same reference, mutated in place
		expect( result.__esModule ).toBe( true );
	} );

	it( 'does not touch modules without a default export', () => {
		const moduleObj = { isShallowEqual: () => 'ok' };
		const result = helper( moduleObj );
		expect( result ).toBe( moduleObj );
		expect( '__esModule' in result ).toBe( false );
	} );

	it( 'returns non-object values unchanged', () => {
		expect( helper( null ) ).toBe( null );
		expect( helper( undefined ) ).toBe( undefined );
		const fn = function () {};
		expect( helper( fn ) ).toBe( fn );
	} );

	it( 'sets __esModule non-enumerable so it survives a subsequent spread', () => {
		const moduleObj = { default: () => 'ok' };
		helper( moduleObj );
		expect( Object.keys( moduleObj ) ).not.toContain( '__esModule' );
		expect(
			Object.getOwnPropertyDescriptor( moduleObj, '__esModule' )
				.enumerable
		).toBe( false );
	} );
} );