chore: improve test-dep-cjs (#665)

packages/react-server/examples/basic/deps/cjs/client.js

@@ -4,5 +4,13 @@ import React from "react";
 import dep from "./client-dep.cjs";
 
 export function TestClient() {
-  return React.createElement("span", null, dep.test);
+  return React.createElement("span", null, useHydrated() ? dep.test : "[...]");
+}
+
+function useHydrated() {
+  return React.useSyncExternalStore(
+    React.useCallback(() => () => {}, []),
+    () => true,
+    () => false,
+  );
 }

packages/react-server/examples/basic/deps/context/client.js

@@ -4,7 +4,7 @@ import React from "react";
 
 const MyContext = React.createContext("not-ok");
 
-export function MyContextProvider(props) {
+export function TestClientProvider(props) {
   return React.createElement(
     MyContext.Provider,
     { value: "ok" },

packages/react-server/examples/basic/deps/context/server.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { MyContextProvider } from "./client.js";
+import { TestClientProvider } from "./client.js";
 
 export function TestServer(props) {
-  return React.createElement(MyContextProvider, null, props.children);
+  return React.createElement(TestClientProvider, null, props.children);
 }

packages/react-server/examples/basic/deps/context/server2.js

@@ -1,10 +1,10 @@
 // difference from `server.js` is that
 // this uses self exports reference `@hiogawa/test-dep-context/client`
 // instead of relative reference `./client.js`
-import { MyContextProvider } from "@hiogawa/test-dep-context/client";
+import { TestClientProvider } from "@hiogawa/test-dep-context/client";
 import React from "react";
 
 // consume own provider in server entr
 export function TestServer(props) {
-  return React.createElement(MyContextProvider, null, props.children);
+  return React.createElement(TestClientProvider, null, props.children);
 }