feat(react): add runtime client components

Author: maxprilutskiy

packages/react/src/client/chunk.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useContext } from "react";
+import { replexicaContext } from "./context";
+import { ReplexicaChunkGetterArgs, ReplexicaChunkProps } from "../types";
+
+export function ReplexicaClientChunk(props: ReplexicaChunkProps) {
+  const r = useContext(replexicaContext)!;
+
+  const result = getReplexicaChunkContent({
+    data: r.data,
+    selector: props,
+  });
+
+  return result;
+}
+
+export function getReplexicaChunkContent(args: ReplexicaChunkGetterArgs) {
+  const fileData = args.data?.[args.selector.fileId];
+  const scopeData = fileData?.[args.selector.scopeId];
+  const chunkData = scopeData?.[args.selector.chunkId];
+
+  const fallback = `chunk#${args.selector.fileId}:${args.selector.scopeId}.${args.selector.chunkId}`;
+
+  const result = chunkData || fallback;
+
+  return result;
+}

packages/react/src/client/context.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { createContext } from "react";
+
+export type ReplexicaIntlContext = {
+  data: any;
+};
+
+export const replexicaContext = createContext<ReplexicaIntlContext | null>(null);

packages/react/src/client/index.ts

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

packages/react/src/client/provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useMemo } from "react";
+import { replexicaContext } from './context';
+
+export type ReplexicaIntlProviderProps = {
+  data: any;
+  children?: React.ReactNode;
+};
+
+export function ReplexicaIntlProvider(props: ReplexicaIntlProviderProps) {
+  const value = useMemo(getReplexicaValue, [props.data]);
+  return (
+    <replexicaContext.Provider value={value}>
+      {props.children}
+    </replexicaContext.Provider>
+  );
+
+  function getReplexicaValue() {
+    return {
+      data: props.data,
+    };
+  }
+}

packages/react/src/client/proxy.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { createElement, useContext } from "react";
+import { ReplexicaChunkSelector, ReplexicaProxyProps } from "../types";
+import { replexicaContext } from "./context";
+import { getReplexicaChunkContent } from "./chunk";
+
+export function ReplexicaClientProxy<P extends {}>(props: ReplexicaProxyProps<P>) {
+  // const r = useContext(replexicaContext)!;
+  // const data = r.data;
+
+  // const propsPatch: Partial<P> = Object
+  //   .entries(props.attributes || {})
+  //   .reduce((acc, [key, value]) => {
+  //     const result = getReplexicaChunkContent({
+  //       data: data,
+  //       selector: value as ReplexicaChunkSelector,
+  //     });
+
+  //     return {
+  //       ...acc,
+  //       [key]: result,
+  //     };
+  //   }, {});
+
+  // const modifiedProps: P = {
+  //   ...props.targetProps,
+  //   ...propsPatch,
+  // };
+
+  // return createElement(
+  //   props.target,
+  //   modifiedProps,
+  // );
+  return null;
+}

packages/react/src/index.ts

@@ -0,0 +1 @@
+export const value = 42;

packages/react/src/index.tsx

@@ -0,0 +1,17 @@
+export type ReplexicaChunkSelector = {
+  fileId: string;
+  scopeId: string;
+  chunkId: string;
+};
+
+export type ReplexicaChunkProps = ReplexicaChunkSelector;
+
+export type ReplexicaChunkGetterArgs = {
+  data: any;
+  selector: ReplexicaChunkSelector;
+};
+
+export type ReplexicaProxyProps<P extends {}> = P & {
+  __ReplexixcaComponent: string | React.ComponentType<P>;
+  __ReplexicaAttributes: Record<keyof P, ReplexicaChunkSelector>;
+};