diff --git a/package.json b/package.json index 8d69850..ab7060c 100644 --- a/package.json +++ b/package.json @@ -77,8 +77,8 @@ "vitest": "^4.1.10" }, "peerDependencies": { - "react": "^19.0.0", - "react-dom": "^19.0.0" + "react": ">=18.0.0", + "react-dom": ">=18.0.0" }, "engines": { "node": ">=22.0.0" diff --git a/src/profiler/StreamdownProfilerProvider.tsx b/src/profiler/StreamdownProfilerProvider.tsx index 21fede1..65fbb21 100644 --- a/src/profiler/StreamdownProfilerProvider.tsx +++ b/src/profiler/StreamdownProfilerProvider.tsx @@ -1,6 +1,6 @@ 'use client'; -import { createContext, memo, type PropsWithChildren, use } from 'react'; +import { createContext, memo, type PropsWithChildren, useContext } from 'react'; import { type StreamdownProfiler } from './profiler'; @@ -12,12 +12,14 @@ export interface StreamdownProfilerProviderProps { export const StreamdownProfilerProvider = memo>( ({ children, profiler = null }) => { - return {children}; + return ( + {children} + ); }, ); StreamdownProfilerProvider.displayName = 'StreamdownProfilerProvider'; export const useStreamdownProfiler = () => { - return use(StreamdownProfilerContext); + return useContext(StreamdownProfilerContext); }; diff --git a/src/profiler/profiler.test.ts b/src/profiler/profiler.test.ts index 1d7df6c..25bffa4 100644 --- a/src/profiler/profiler.test.ts +++ b/src/profiler/profiler.test.ts @@ -1,6 +1,9 @@ +import { createElement, type ReactNode } from 'react'; +import { renderHook } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; import { createStreamdownProfiler } from './profiler'; +import { StreamdownProfilerProvider, useStreamdownProfiler } from './StreamdownProfilerProvider'; describe('createStreamdownProfiler', () => { it('aggregates render and animation samples into a snapshot', () => { @@ -166,3 +169,16 @@ describe('createStreamdownProfiler', () => { } }); }); + +describe('useStreamdownProfiler', () => { + it('reads the profiler through useContext so React 18 can render Streamdown', () => { + const profiler = createStreamdownProfiler({ label: 'react-18', notifyIntervalMs: 0 }); + const { result } = renderHook(() => useStreamdownProfiler(), { + wrapper: ({ children }: { children: ReactNode }) => + createElement(StreamdownProfilerProvider, { profiler }, children), + }); + + expect(result.current).toBe(profiler); + expect(result.current?.getSnapshot().label).toBe('react-18'); + }); +});