chore: add more test packages (#664)

packages/react-server/examples/basic/deps/cjs/README.md

@@ -0,0 +1,17 @@
+```jsx
+// in server component
+import { TestServer } from "@hiogawa/test-dep-cjs/server"
+
+export default function Page() {
+  return <TestServer /> // should show [ok]
+}
+```
+
+```jsx
+// in server component
+import { TestServer } from "@hiogawa/test-dep-cjs/server2"
+
+export default function Page() {
+  return <TestServer /> // should show [ok]
+}
+```

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

@@ -0,0 +1 @@
+exports.test = "[ok]";

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

@@ -0,0 +1,8 @@
+"use client";
+
+import React from "react";
+import dep from "./client-dep.cjs";
+
+export function TestClient() {
+  return React.createElement("span", null, dep.test);
+}

packages/react-server/examples/basic/deps/cjs/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@hiogawa/test-dep-cjs",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server.js",
+    "./server2": "./server2.js",
+    "./client": "./client.js"
+  },
+  "dependencies": {
+    "react": "*"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+// when consuming client component internally,
+// this cannot be optimized and thus cjs dep fails.
+import { TestClient } from "./client.js";
+
+export function TestServer() {
+  return React.createElement(TestClient);
+}

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

@@ -0,0 +1,6 @@
+import { TestClient } from "@hiogawa/test-dep-cjs/client";
+import React from "react";
+
+export function TestServer() {
+  return React.createElement(TestClient);
+}

packages/react-server/examples/basic/deps/context/README.md

@@ -0,0 +1,21 @@
+```jsx
+// in server component
+
+import { TestServer } from "@hiogawa/test-dep-context/server"
+import { TestClient } from "@hiogawa/test-dep-context/client"
+
+export default function Page() {
+  return <TestServer><TestClient/></TestServer> // should show [ok]
+}
+```
+
+```jsx
+// in server component
+
+import { TestServer } from "@hiogawa/test-dep-context/server2"
+import { TestClient } from "@hiogawa/test-dep-context/client"
+
+export default function Page() {
+  return <TestServer><TestClient/></TestServer> // should show [ok]
+}
+```

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

@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+
+const MyContext = React.createContext("not-ok");
+
+export function MyContextProvider(props) {
+  return React.createElement(
+    MyContext.Provider,
+    { value: "ok" },
+    props.children,
+  );
+}
+
+// consume own context in client entry
+export function TestClient() {
+  const value = React.useContext(MyContext);
+  return React.createElement("span", null, `[context: ${value}]`);
+}

packages/react-server/examples/basic/deps/context/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@hiogawa/test-dep-context",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server.js",
+    "./server2": "./server2.js",
+    "./client": "./client.js"
+  },
+  "dependencies": {
+    "react": "*"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

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

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

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

@@ -0,0 +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 React from "react";
+
+// consume own provider in server entr
+export function TestServer(props) {
+  return React.createElement(MyContextProvider, null, props.children);
+}

packages/react-server/examples/basic/package.json

@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "@hiogawa/react-server": "latest",
+    "@hiogawa/test-dep-cjs": "file:deps/cjs",
+    "@hiogawa/test-dep-context": "file:deps/context",
     "@hiogawa/test-dep-mixed": "file:deps/mixed",
     "@hiogawa/test-dep-server-component": "file:deps/server-component",
     "@hiogawa/test-dep-use-client": "file:deps/use-client",

packages/react-server/examples/basic/src/routes/test/deps/examples/cjs/page.tsx

@@ -0,0 +1,10 @@
+// @ts-ignore
+import { TestServer } from "@hiogawa/test-dep-cjs/server";
+
+export default function Page() {
+  return (
+    <div>
+      <TestServer />
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/deps/examples/cjs2/page.tsx

@@ -0,0 +1,10 @@
+// @ts-ignore
+import { TestServer } from "@hiogawa/test-dep-cjs/server2";
+
+export default function Page() {
+  return (
+    <div>
+      <TestServer />
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/deps/examples/context/page.tsx

@@ -0,0 +1,12 @@
+// @ts-ignore
+import { TestClient } from "@hiogawa/test-dep-context/client";
+// @ts-ignore
+import { TestServer } from "@hiogawa/test-dep-context/server";
+
+export default function Page() {
+  return (
+    <TestServer>
+      <TestClient />
+    </TestServer>
+  );
+}

packages/react-server/examples/basic/src/routes/test/deps/examples/context2/page.tsx

@@ -0,0 +1,14 @@
+// @ts-ignore
+import { TestClient } from "@hiogawa/test-dep-context/client";
+// @ts-ignore
+import { TestServer } from "@hiogawa/test-dep-context/server2";
+
+export default function Page() {
+  return (
+    <div>
+      <TestServer>
+        <TestClient />
+      </TestServer>
+    </div>
+  );
+}

packages/react-server/examples/basic/src/routes/test/deps/layout.tsx

@@ -5,7 +5,16 @@ export default function Layout(props: LayoutProps) {
   return (
     <div className="flex flex-col gap-2 p-2">
       <h4 className="font-bold">Test Dependencies</h4>
-      <NavMenu links={["/test/deps", "/test/deps/react-tweet"]} />
+      <NavMenu
+        links={[
+          "/test/deps",
+          "/test/deps/react-tweet",
+          "/test/deps/examples/cjs",
+          "/test/deps/examples/cjs2",
+          "/test/deps/examples/context",
+          "/test/deps/examples/context2",
+        ]}
+      />
       {props.children}
     </div>
   );