Improve Slot/Fill performance (#44642)

WordPress · Oct 4, 2022 · 31dad37 · 31dad37
1 parent 154c0ee
commit 31dad37
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/block-controls/slot.js b/packages/block-editor/src/components/block-controls/slot.js
@@ -5,7 +5,7 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 
 /**
@@ -16,8 +16,8 @@ import groups from './groups';
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ].Slot;
-	const slot = useSlot( Slot.__unstableName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( Slot.__unstableName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	PanelBody,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -280,8 +280,8 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 };
 
 const AdvancedControls = () => {
-	const slot = useSlot( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseSlot as useSlot } from '@wordpress/components';
+import {
+	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -18,12 +21,13 @@ export default function InspectorControlsSlot( {
 } ) {
 	const Slot = groups[ group ]?.Slot;
 	const slot = useSlot( Slot?.__unstableName );
+	const fills = useSlotFills( Slot?.__unstableName );
 	if ( ! Slot || ! slot ) {
 		warning( `Unknown InspectorControl group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const hasFills = Boolean( fills && fills.length );
 	if ( ! hasFills ) {
 		return null;
 	}

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -69,7 +69,8 @@
 		"reakit": "^1.3.8",
 		"remove-accents": "^0.4.2",
 		"use-lilius": "^2.0.1",
-		"uuid": "^8.3.0"
+		"uuid": "^8.3.0",
+		"valtio": "^1.7.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0",

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -188,6 +188,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 	useSlot as __experimentalUseSlot,
+	useSlotFills as __experimentalUseSlotFills,
 } from './slot-fill';
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';

diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
@@ -1,13 +1,17 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
 
 const SlotFillContext = createContext( {
-	slots: {},
-	fills: {},
+	slots: proxyMap(),
+	fills: proxyMap(),
 	registerSlot: () => {
 		warning(
 			'Components must be wrapped within `SlotFillProvider`. ' +