SlotFill: Refactor slotfill base

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+- `SlotFill`: Refactor SlotFill base ([#51385](https://github.com/WordPress/gutenberg/pull/51385)).
+
 ## 25.1.0 (2023-06-07)
 
 ### Enhancements

packages/components/src/slot-fill/context.ts

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { BaseSlotFillContext } from './types';
+
+const initialValue: BaseSlotFillContext = {
+	registerSlot: () => {},
+	unregisterSlot: () => {},
+	registerFill: () => {},
+	unregisterFill: () => {},
+	getSlot: () => undefined,
+	getFills: () => [],
+	subscribe: () => () => {},
+};
+export const SlotFillContext = createContext( initialValue );
+
+export default SlotFillContext;

packages/components/src/slot-fill/fill.js → packages/components/src/slot-fill/fill.ts

@@ -10,8 +10,9 @@ import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
  */
 import SlotFillContext from './context';
 import useSlot from './use-slot';
+import type { FillComponentProps } from './types';
 
-export default function Fill( { name, children } ) {
+export default function Fill( { name, children }: FillComponentProps ) {
 	const { registerFill, unregisterFill } = useContext( SlotFillContext );
 	const slot = useSlot( name );
 

packages/components/src/slot-fill/provider.tsx

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import type { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type {
+	BaseFillObject,
+	BaseSlotFillContext,
+	SlotComponentProps,
+} from './types';
+import { useState } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export function createSlotRegistory(): BaseSlotFillContext {
+	const slots: Record< string, Component< SlotComponentProps > > = {};
+	const fills: Record< string, BaseFillObject[] > = {};
+	let listeners: Array< () => void > = [];
+
+	function registerSlot(
+		name: string,
+		slot: Component< SlotComponentProps >
+	) {
+		const previousSlot = slots[ name ];
+		slots[ name ] = slot;
+		triggerListeners();
+
+		// Sometimes the fills are registered after the initial render of slot
+		// But before the registerSlot call, we need to rerender the slot.
+		forceUpdateSlot( name );
+
+		// If a new instance of a slot is being mounted while another with the
+		// same name exists, force its update _after_ the new slot has been
+		// assigned into the instance, such that its own rendering of children
+		// will be empty (the new Slot will subsume all fills for this name).
+		if ( previousSlot ) {
+			previousSlot.forceUpdate();
+		}
+	}
+
+	function registerFill( name: string, instance: BaseFillObject ) {
+		fills[ name ] = [ ...( fills[ name ] || [] ), instance ];
+		forceUpdateSlot( name );
+	}
+
+	function unregisterSlot(
+		name: string,
+		instance: Component< SlotComponentProps >
+	) {
+		// If a previous instance of a Slot by this name unmounts, do nothing,
+		// as the slot and its fills should only be removed for the current
+		// known instance.
+		if ( slots[ name ] !== instance ) {
+			return;
+		}
+
+		delete slots[ name ];
+		triggerListeners();
+	}
+
+	function unregisterFill( name: string, instance: BaseFillObject ) {
+		fills[ name ] =
+			fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
+		forceUpdateSlot( name );
+	}
+
+	function getSlot(
+		name: string
+	): Component< SlotComponentProps > | undefined {
+		return slots[ name ];
+	}
+
+	function getFills(
+		name: string,
+		slotInstance: Component< SlotComponentProps >
+	): BaseFillObject[] {
+		// Fills should only be returned for the current instance of the slot
+		// in which they occupy.
+		if ( slots[ name ] !== slotInstance ) {
+			return [];
+		}
+		return fills[ name ];
+	}
+
+	function forceUpdateSlot( name: string ) {
+		const slot = getSlot( name );
+
+		if ( slot ) {
+			slot.forceUpdate();
+		}
+	}
+
+	function triggerListeners() {
+		listeners.forEach( ( listener ) => listener() );
+	}
+
+	function subscribe( listener: () => void ) {
+		listeners.push( listener );
+
+		return () => {
+			listeners = listeners.filter( ( l ) => l !== listener );
+		};
+	}
+
+	return {
+		registerSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+		getSlot,
+		getFills,
+		subscribe,
+	};
+}
+
+export function SlotFillProvider( { children }: { children: ReactNode } ) {
+	const [ contextValue ] = useState( createSlotRegistory );
+	return (
+		<SlotFillContext.Provider value={ contextValue }>
+			{ children }
+		</SlotFillContext.Provider>
+	);
+}
+
+export default SlotFillProvider;