From 5f2c5208ec7394555839609e3f1e055db14d661d Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Sun, 11 Jun 2023 05:22:23 +0900 Subject: [PATCH] convert useSlot --- packages/components/src/slot-fill/context.ts | 4 +-- .../components/src/slot-fill/provider.tsx | 29 ++++++++++++---- packages/components/src/slot-fill/types.ts | 34 ++++++++++++++----- .../slot-fill/{use-slot.js => use-slot.ts} | 12 ++++--- 4 files changed, 58 insertions(+), 21 deletions(-) rename packages/components/src/slot-fill/{use-slot.js => use-slot.ts} (67%) diff --git a/packages/components/src/slot-fill/context.ts b/packages/components/src/slot-fill/context.ts index 9df4b9898b05f..c4839462fbce0 100644 --- a/packages/components/src/slot-fill/context.ts +++ b/packages/components/src/slot-fill/context.ts @@ -12,8 +12,8 @@ const initialValue: BaseSlotFillContext = { unregisterSlot: () => {}, registerFill: () => {}, unregisterFill: () => {}, - getSlot: () => {}, - getFills: () => {}, + getSlot: () => undefined, + getFills: () => [], subscribe: () => () => {}, }; export const SlotFillContext = createContext( initialValue ); diff --git a/packages/components/src/slot-fill/provider.tsx b/packages/components/src/slot-fill/provider.tsx index 1ca8a63d28f4e..659ec667e6991 100644 --- a/packages/components/src/slot-fill/provider.tsx +++ b/packages/components/src/slot-fill/provider.tsx @@ -7,7 +7,11 @@ import type { Component } from '@wordpress/element'; * Internal dependencies */ import SlotFillContext from './context'; -import type { BaseFillObject, BaseSlotFillContext } from './types'; +import type { + BaseFillObject, + BaseSlotFillContext, + SlotComponentProps, +} from './types'; import { useState } from '@wordpress/element'; /** * External dependencies @@ -15,11 +19,14 @@ import { useState } from '@wordpress/element'; import type { ReactNode } from 'react'; export function createSlotRegistory(): BaseSlotFillContext { - const slots: Record< string, Component > = {}; - const fills: Record< string, unknown[] > = {}; + const slots: Record< string, Component< SlotComponentProps > > = {}; + const fills: Record< string, BaseFillObject[] > = {}; let listeners: Array< () => void > = []; - function registerSlot( name: string, slot: Component ) { + function registerSlot( + name: string, + slot: Component< SlotComponentProps > + ) { const previousSlot = slots[ name ]; slots[ name ] = slot; triggerListeners(); @@ -42,7 +49,10 @@ export function createSlotRegistory(): BaseSlotFillContext { forceUpdateSlot( name ); } - function unregisterSlot( name: string, instance: Component ) { + 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. @@ -60,11 +70,16 @@ export function createSlotRegistory(): BaseSlotFillContext { forceUpdateSlot( name ); } - function getSlot( name: string ) { + function getSlot( + name: string + ): Component< SlotComponentProps > | undefined { return slots[ name ]; } - function getFills( name: string, slotInstance: Component ) { + 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 ) { diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts index 8a5d97dd2730f..51ee54b9dc158 100644 --- a/packages/components/src/slot-fill/types.ts +++ b/packages/components/src/slot-fill/types.ts @@ -4,13 +4,22 @@ import type { Component, ReactNode, ReactElement } from 'react'; export type BaseSlotFillContext = { - registerSlot: ( name: string, slot: Component ) => void; - unregisterSlot: ( name: string, slot: Component ) => void; + registerSlot: ( + name: string, + slot: Component< SlotComponentProps > + ) => void; + unregisterSlot: ( + name: string, + slot: Component< SlotComponentProps > + ) => void; registerFill: ( name: string, instance: BaseFillObject ) => void; unregisterFill: ( name: string, instance: BaseFillObject ) => void; - getSlot: ( name: string ) => any; - getFills: ( name: string, slotInstance: any ) => any; - subscribe: ( listener: () => {} ) => () => void; + getSlot: ( name: string ) => Component< SlotComponentProps > | undefined; + getFills: ( + name: string, + slotInstance: Component< SlotComponentProps > + ) => BaseFillObject[]; + subscribe: ( listener: () => void ) => () => void; }; export type BaseSlotProps = { @@ -20,9 +29,18 @@ export type BaseSlotProps = { }; export type SlotComponentProps = { - registerSlot: ( name: string, slot: Component ) => void; - unregisterSlot: ( name: string, slot: Component ) => void; - getFills: ( name: string, slotInstance: Component ) => BaseFillObject[]; + registerSlot: ( + name: string, + slot: Component< SlotComponentProps > + ) => void; + unregisterSlot: ( + name: string, + slot: Component< SlotComponentProps > + ) => void; + getFills: ( + name: string, + slotInstance: Component< SlotComponentProps > + ) => BaseFillObject[]; } & BaseSlotProps; export type BaseFillObject = { diff --git a/packages/components/src/slot-fill/use-slot.js b/packages/components/src/slot-fill/use-slot.ts similarity index 67% rename from packages/components/src/slot-fill/use-slot.js rename to packages/components/src/slot-fill/use-slot.ts index fce7c651495d5..0cc2163ff3fd4 100644 --- a/packages/components/src/slot-fill/use-slot.js +++ b/packages/components/src/slot-fill/use-slot.ts @@ -1,4 +1,8 @@ -// @ts-nocheck +/** + * External dependencies + */ +import type { Component } from 'react'; + /** * WordPress dependencies */ @@ -13,11 +17,11 @@ import SlotFillContext from './context'; * React hook returning the active slot given a name. * * @param {string} name Slot name. - * @return {Object} Slot object. + * @return {Component|undefined} Slot object. */ -const useSlot = ( name ) => { +const useSlot = ( name: string ) => { const { getSlot, subscribe } = useContext( SlotFillContext ); - return useSyncExternalStore( + return useSyncExternalStore< Component | undefined >( subscribe, () => getSlot( name ), () => getSlot( name )