🚑 Fix case when Slot appears later

README.md

@@ -8,7 +8,7 @@ A super lightweight modern alternative to [`react-slot-fill`](https://github.com
 - [x] Tested with [`testing-library`](https://testing-library.com)
 - [x] Written in TypeScript
 - [x] Zero dependencies
-- [x] Only ~396 B
+- [x] Only ~383 B
 
 ## 📦 Install
 

src/index.test.tsx

@@ -36,6 +36,22 @@ const List = ({ children }: { children: React.ReactNode }) => (
  </ul>
 )
 
+function Hidden({ children }: { children: React.ReactNode }) {
+ const [visible, setVisible] = useState<boolean>(false)
+ return (
+ <SlotsProvider>
+ {children}
+ <ul>
+ <li>
+ <Slot name="foo" />
+ </li>
+ <li>{visible && <Slot name="foo" />}</li>
+ </ul>
+ <button onClick={() => setVisible(true)}>Show</button>
+ </SlotsProvider>
+ )
+}
+
 const Parent = ({ children }: { children: React.ReactNode }) => (
  <SlotsProvider>
  <ul>
@@ -141,7 +157,7 @@ test('render nested node in multiple places', () => {
  defaultTest()
 })
 
-test('hydrate without errors on server render', async () => {
+test('hydrate without errors on server render', () => {
  isServer = true
 
  const root = document.createElement('div')
@@ -166,7 +182,7 @@ test('hydrate without errors on server render', async () => {
  unmountComponentAtNode(root)
 })
 
-test('create isolated context with specified types', async () => {
+test('create isolated context with specified types', () => {
  render(
  <NS.Provider>
  <List>
@@ -183,7 +199,7 @@ test('create isolated context with specified types', async () => {
  expect(items[2]).toHaveTextContent('Baz Fallback')
 })
 
-test('isolated context without provider', async () => {
+test('isolated context without provider', () => {
  render(
  <List>
  <NS.Fill name="foo">Foo</NS.Fill>
@@ -196,3 +212,21 @@ test('isolated context without provider', async () => {
  expect(items[0]).toHaveTextContent('Foo')
  expect(items[1]).toHaveTextContent('Bar')
 })
+
+test('use saved node when slot rendered later', async () => {
+ render(
+ <Hidden>
+ <Fill name="foo">Foo</Fill>
+ </Hidden>
+ )
+
+ const items = screen.getAllByRole('listitem')
+
+ expect(items[0]).toHaveTextContent('Foo')
+ expect(items[1]).toHaveTextContent('')
+
+ screen.getByRole('button', { name: 'Show' }).click()
+
+ expect(items[0]).toHaveTextContent('Foo')
+ expect(items[1]).toHaveTextContent('Foo')
+})

src/index.tsx

@@ -3,7 +3,6 @@ import {
  createElement as h,
  useContext,
  useLayoutEffect,
- useRef,
  useState,
  Fragment,
 } from 'react'
@@ -14,8 +13,9 @@ type Unsubscribe = () => void
 type Callback = (node: React.ReactNode) => void
 
 interface Emitter<Names extends PropertyKey> {
- emit(event: Names, node: React.ReactNode): void
  on(event: Names, cb: Callback): Unsubscribe
+ get(event: Names): React.ReactNode
+ emit(event: Names, node: React.ReactNode): Unsubscribe
 }
 
 export interface ProviderProps {
@@ -50,30 +50,22 @@ export default function createSlots<Names extends PropertyKey>() {
  }
 
  function Slot(props: SlotProps<Names>) {
- const [state, setState] = useState<React.ReactNode>()
  const emitter = useContext(SlotsContext)
- const ref = useRef<Unsubscribe | null>()
-
- if (ref.current === undefined) {
- ref.current = emitter.on(props.name, setState)
- }
+ const [node, setNode] = useState<React.ReactNode>()
 
  useUniversalEffect(() => {
- if (ref.current) {
- ref.current()
- ref.current = null
- }
- return emitter.on(props.name, setState)
+ setNode(emitter.get(props.name))
+ return emitter.on(props.name, setNode)
  }, [emitter, props.name])
 
- return <Fragment>{state === undefined ? props.children : state}</Fragment>
+ return <Fragment>{node === undefined ? props.children : node}</Fragment>
  }
 
  function Fill(props: FillProps<Names>) {
  const emitter = useContext(SlotsContext)
 
  useUniversalEffect(() => {
- emitter.emit(props.name, props.children)
+ return emitter.emit(props.name, props.children)
  }, [emitter, props.name, props.children])
 
  return null
@@ -87,12 +79,21 @@ export default function createSlots<Names extends PropertyKey>() {
 }
 
 function createEmitter<Names extends PropertyKey>(): Emitter<Names> {
- const events: { [K in Names]?: Callback[] } = {}
+ const cache: Partial<Record<Names, React.ReactNode>> = {}
+ const events: Partial<Record<Names, Callback[]>> = {}
 
  return {
  emit(event, node) {
  const source = events[event]
  if (source) source.forEach((cb) => cb(node))
+
+ cache[event] = node
+ return () => {
+ cache[event] = undefined
+ }
+ },
+ get(event) {
+ return cache[event]
  },
  on(event, cb) {
  const source = (events[event] = events[event] || [])!
@@ -108,10 +109,7 @@ function useUniversalEffect(
  effect: React.EffectCallback,
  deps: React.DependencyList
 ) {
- if (isServer()) {
- const cleanup = effect()
- if (cleanup) cleanup()
- } else {
+ if (!isServer()) {
  useLayoutEffect(effect, deps)
  }
 }