Host -> HostSlots

src/__fixtures__/RFCField.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react'
 
-import { createHost, createSlot, getSlot, getLastSlot, getSlots } from '../rfc'
+import {
+  createHost,
+  createSlot,
+  getSlot,
+  getLastSlot,
+  getSlots,
+  getSlotProps,
+} from '../rfc'
 
 const Description = (props: React.ComponentPropsWithoutRef<'span'>) => (
   <span {...props} />
@@ -16,19 +23,23 @@ type FieldProps = React.ComponentPropsWithoutRef<'div'>
 export const Field = (props: FieldProps) => {
   return createHost(props.children, (slots) => {
     const labelSlot = getSlot(slots, FieldLabel)
-    const lastLabelSlot = getLastSlot(slots, FieldLabel)
+    const lastLabelProps = getSlotProps(getLastSlot(slots, FieldLabel))
     const inputSlot = getSlot(slots, FieldInput)
-    const lastInputSlot = getLastSlot(slots, FieldInput)
-    const lastDescriptionSlot = getLastSlot(slots, FieldDescription)
+    const lastInputProps = getSlotProps(getLastSlot(slots, FieldInput))
+    const descriptionSlot = getSlot(slots, FieldDescription)
+    const lastDescriptionProps = getSlotProps(
+      getLastSlot(slots, FieldDescription)
+    )
     const icons = getSlots(slots, FieldIcon)
     return (
       <div {...props}>
-        {lastLabelSlot && <label {...lastLabelSlot.props} />}
-        {lastInputSlot && <input {...lastInputSlot.props} />}
-        {lastDescriptionSlot}
+        {lastLabelProps && <label {...lastLabelProps} />}
+        {lastInputProps && <input {...lastInputProps} />}
+        {lastDescriptionProps && <Description {...lastDescriptionProps} />}
         {icons}
         {labelSlot}
         {inputSlot}
+        {descriptionSlot}
       </div>
     )
   })

src/__tests__/rfc.test.tsx

@@ -280,6 +280,6 @@ test('dev warning', () => {
   )
   expect(warn).toHaveBeenCalledTimes(1)
   expect(warn).toHaveBeenCalledWith(
-    'Unwrapped children found in "Host", either wrap them in subcomponents or remove'
+    'Unwrapped children found in "HostSlots", either wrap them in slots or remove'
   )
 })

src/__tests__/simple.test.tsx

@@ -176,7 +176,7 @@ test('dev warning', () => {
   )
   expect(warn).toHaveBeenCalledTimes(1)
   expect(warn).toHaveBeenCalledWith(
-    'Unwrapped children found in "Host", either wrap them in subcomponents or remove'
+    'Unwrapped children found in "HostSlots", either wrap them in slots or remove'
   )
 })
 

src/rfc/index.tsx

@@ -24,7 +24,7 @@ const createIdGenerator = (prefix: string) => {
 
 const genSlotId = createIdGenerator('s')
 
-export const Host = ({
+export const HostSlots = ({
   children,
   callback,
 }: {
@@ -42,7 +42,7 @@ export const Host = ({
       <SlotsContext.Provider value={Slots}>
         <ScanProvider>
           {process.env.NODE_ENV === 'development' ? (
-            <DevChildren name={'Host'}>{children}</DevChildren>
+            <DevChildren name="HostSlots">{children}</DevChildren>
           ) : (
             children
           )}
@@ -54,7 +54,7 @@ export const Host = ({
 }
 
 export const createHost = (children: React.ReactNode, callback: Callback) => {
-  return <Host children={children} callback={callback} />
+  return <HostSlots children={children} callback={callback} />
 }
 
 export const createSlot = <T extends React.ElementType>(Fallback?: T) => {

src/rfc/utils.ts

@@ -32,3 +32,13 @@ export const getLastSlot = <T extends React.ElementType>(
   }
   return undefined
 }
+
+export const getSlotProps = <T extends SlotElement>(slotElement?: T) => {
+  if (!slotElement) return undefined
+
+  type Props = React.ComponentPropsWithRef<
+    T extends SlotElement<infer P> ? P : never
+  >
+  const { key, ref, props } = slotElement
+  return { ...props, key, ref } as Props
+}

src/simple/index.tsx

@@ -13,7 +13,7 @@ const Template = ({ children }: { children: () => ReturnType<Callback> }) => {
   return children()
 }
 
-export const Host = ({
+export const HostSlots = ({
   children,
   callback,
 }: {
@@ -30,7 +30,7 @@ export const Host = ({
     <>
       <SlotsContext.Provider value={Slots}>
         {process.env.NODE_ENV === 'development' ? (
-          <DevChildren name={'Host'}>{children}</DevChildren>
+          <DevChildren name="HostSlots">{children}</DevChildren>
         ) : (
           children
         )}
@@ -41,7 +41,7 @@ export const Host = ({
 }
 
 export const createHost = (children: React.ReactNode, callback: Callback) => {
-  return <Host children={children} callback={callback} />
+  return <HostSlots children={children} callback={callback} />
 }
 
 export const createSlot = <T extends React.ElementType>(Fallback?: T) => {