Skip to content

use react-server condition? #1

@dai-shi

Description

@dai-shi

This seems like an interesting library.
How about using "react-server" condition instead of a hack to detect server.

Here's a rough idea, untested:

diff --git a/package.json b/package.json
index 0650839..df494be 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,14 @@
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
   "exports": {
-    "require": "./dist/cjs/index.js",
-    "import": "./dist/esm/index.js"
+    "require": {
+      "react-server": "./dist/cjs/server.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "import": {
+      "react-server": "./dist/esm/server.js",
+      "default": "./dist/esm/index.js"
+    }
   },
   "author": "SoraKumo <[email protected]>",
   "license": "MIT",
diff --git a/src/index.ts b/src/index.ts
index 50734af..22d1eca 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,27 +1,12 @@
-export { createMixServerContext } from "./server";
-export * from "./server.js";
 export * from "./client.js";
 
-import React, { use } from "react";
 import { useClientContext } from "./client";
-import { context, createMixServerContext } from "./server";
-
-export const getComponentType = () =>
-  !React["useState"]
-    ? "Server"
-    : React["createServerContext"] || !React["useOptimistic"]
-    ? "Pages"
-    : "Client";
 
 export const useMixContext = <T>({ name }: { name: string; type: T }) => {
-  if (getComponentType() === "Server") return use(context().get<T>(name));
   return useClientContext<T>(name);
 };
 
-export const createMixContext = <T>(name: string) => {
-  const context =
-    getComponentType() === "Server"
-      ? createMixServerContext<T>(name)
-      : { name };
-  return context as ReturnType<typeof createMixServerContext<T>> & { type: T };
+export const createMixContext = (name: string) => {
+  const context = { name };
+  return context;
 };
diff --git a/src/server.tsx b/src/server.tsx
index 14ed952..1dee434 100644
--- a/src/server.tsx
+++ b/src/server.tsx
@@ -1,5 +1,5 @@
 "use server";
-import { ReactNode, cache } from "react";
+import { ReactNode, cache, use } from "react";
 import { ClientProvider } from "./client.js";
 
 export const context = cache(() => {
@@ -47,3 +47,7 @@ export const createMixServerContext = <T,>(name: string = "") => {
 };
 
 export const getMixContext = <T,>(name: string = "") => context().get<T>(name);
+
+export const useMixContext = <T,>({ name }: { name: string; type: T }) => {
+  return use(context().get<T>(name));
+};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions