refactor(react): add server runtime components

Author: maxprilutskiy

packages/react/src/server/chunk.tsx

@@ -1,38 +1,22 @@
 'use server';
 
-import { ReplexicaChunkGetterArgs, ReplexicaChunkProps } from "../types";
-import { cookies } from 'next/headers';
+import { ReplexicaBaseChunk, ReplexicaBaseChunkProps } from "../shared";
+import { ReplexicaServerProps } from "./types";
 
-export type ReplexicaServerChunkProps = ReplexicaChunkProps & {
-  strategy?: 'cookie';
-  importer: (locale: string) => ReplexicaChunkGetterArgs['data'];
-};
+export type ReplexicaServerChunkProps = 
+  & Omit<ReplexicaBaseChunkProps, 'data'> 
+  & ReplexicaServerProps;
 
 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,
-    },
-  });
+  const locale = await props.loadLocale();
+  const data = await props.loadLocaleData(locale);
 
-  return result;
+  return (
+    <ReplexicaBaseChunk
+      data={data}
+      fileId={props.fileId}
+      scopeId={props.scopeId}
+      chunkId={props.chunkId}
+    />
+  );
 }
-
-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/proxy.tsx

@@ -1,35 +1,22 @@
 '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;
-}
+import { ReplexicaBaseProxy, ReplexicaBaseProxyProps } from "../shared";
+import { ReplexicaServerProps } from "./types";
+
+export type ReplexicaServerProxyProps<P extends {}> =
+  & Omit<ReplexicaBaseProxyProps<P>, 'data'> 
+  & ReplexicaServerProps;
+
+export async function ReplexicaServerProxy<P extends {}>(props: ReplexicaServerProxyProps<P>) {
+  const { loadLocale, loadLocaleData, ...baseProps } = props;
+
+  const locale = await loadLocale();
+  const localeData = await loadLocaleData(locale);
+
+  return (
+    <ReplexicaBaseProxy<P>
+      data={localeData as any}
+      {...baseProps as any}
+    />  
+  );
+}

packages/react/src/server/types.ts

@@ -0,0 +1,4 @@
+export type ReplexicaServerProps = {
+  loadLocale: () => Promise<string>;
+  loadLocaleData: (locale: string) => Promise<any>;
+};