fix ssr testing

Author: chaance

apps/ssr-testing/app/document-context/child.tsx

@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import { DocumentContext } from 'radix-ui/internal';
+
+export function Child() {
+  const document = DocumentContext.useDocument();
+  React.useEffect(() => {
+    console.log(document);
+  }, [document]);
+  return <p>Open the console to see the document context.</p>;
+}

apps/ssr-testing/app/document-context/page.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 
-import * as DocumentContext from '@radix-ui/react-document-context';
+import { Parent } from './parent';
+import { Child } from './child';
 
 export default function Page() {
-  return <DocumentContext.DocumentProvider>Document Context</DocumentContext.DocumentProvider>;
+  return (
+    <Parent>
+      <h1>Document Context</h1>
+      <Child />
+    </Parent>
+  );
 }

apps/ssr-testing/app/document-context/parent.tsx

@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { DocumentContext } from 'radix-ui/internal';
+
+export function Parent({ children }: { children: React.ReactNode }) {
+  const [document, setDocument] = React.useState<Document | null>(null);
+  React.useEffect(() => {
+    console.log(document);
+  }, [document]);
+  return (
+    <DocumentContext.DocumentProvider document={document}>
+      {children}
+      <div>
+        <iframe
+          onLoad={(event) => {
+            const iframeDocument = event.currentTarget.contentDocument;
+            setDocument(iframeDocument);
+          }}
+          title="Radix UI webiste"
+          src="https://www.radix-ui.com"
+          style={{
+            width: '100%',
+            height: '1000px',
+          }}
+        />
+      </div>
+    </DocumentContext.DocumentProvider>
+  );
+}

packages/react/document-context/src/document-context.tsx

@@ -6,7 +6,7 @@ const DocumentContext = React.createContext<Document | null>(null);
 DocumentContext.displayName = 'DocumentContext';
 
 interface DocumentProviderProps {
-  document: Document;
+  document: Document | null;
   children: React.ReactNode;
 }