feat(react): add runtime server components

Author: maxprilutskiy

packages/react/src/server/chunk.tsx

@@ -0,0 +1,38 @@
+'use server';
+
+import { ReplexicaChunkGetterArgs, ReplexicaChunkProps } from "../types";
+import { cookies } from 'next/headers';
+
+export type ReplexicaServerChunkProps = ReplexicaChunkProps & {
+  strategy?: 'cookie';
+  importer: (locale: string) => ReplexicaChunkGetterArgs['data'];
+};
+
+export async function ReplexicaServerChunk(props: ReplexicaServerChunkProps) {
+  const locale = await getCurrentLocale();
+  console.log(`[ReplexicaServerChunk] locale: ${locale}`);
+  const data = await props.importer(locale);
+  console.log(`[ReplexicaServerChunk] data: ${JSON.stringify(data)}`);
+  const result = await getReplexicaChunkContent({
+    data: data,
+    selector: {
+      fileId: props.fileId,
+      scopeId: props.scopeId,
+      chunkId: props.chunkId,
+    },
+  });
+
+  return result;
+}
+
+export async function getReplexicaChunkContent(args: ReplexicaChunkGetterArgs) {
+  const { fileId, scopeId, chunkId } = args.selector;
+  const text = args.data?.[fileId]?.[scopeId]?.[chunkId];
+  const fallback = `chunk1#${fileId}:${scopeId}.${chunkId}`;
+  return text || fallback;
+}
+
+export async function getCurrentLocale() {
+  const cookieMgr = cookies();
+  return cookieMgr.get('locale')?.value || 'en';
+}

packages/react/src/server/index.ts

@@ -0,0 +1,2 @@
+export * from './chunk';
+export * from './proxy';

packages/react/src/server/proxy.tsx

@@ -0,0 +1,35 @@
+'use server';
+
+import { createElement } from "react";
+import { ReplexicaProxyProps, ReplexicaChunkSelector } from "../types";
+import { getReplexicaChunkContent } from './chunk';
+
+export async function ReplexicaServerProxy<P extends {}>(props: ReplexicaProxyProps<P>) {
+  // const data = {};
+
+  // let propsPatch: Partial<P> = {};
+
+  // for (const [key, value] of Object.entries(props.attributes || {})) {
+  //   const result = await getReplexicaChunkContent({
+  //     data,
+  //     selector: value as ReplexicaChunkSelector,
+  //   });
+
+  //   propsPatch = {
+  //     ...propsPatch,
+  //     [key]: result,
+  //   };
+  // }
+
+  // const modifiedProps: P = {
+  //   ...props.targetProps,
+  //   ...propsPatch,
+  // };
+
+  // return createElement(
+  //   props.target,
+  //   modifiedProps,
+  // );
+
+  return null;
+}