refactor(react): update client runtime components to use base components

Author: maxprilutskiy

packages/react/src/client/chunk.tsx

@@ -2,27 +2,20 @@
 
 import { useContext } from "react";
 import { replexicaContext } from "./context";
-import { ReplexicaChunkGetterArgs, ReplexicaChunkProps } from "../types";
+import { ReplexicaBaseChunk, ReplexicaBaseChunkProps } from "../shared";
 
-export function ReplexicaClientChunk(props: ReplexicaChunkProps) {
-  const r = useContext(replexicaContext)!;
-
-  const result = getReplexicaChunkContent({
-    data: r.data,
-    selector: props,
-  });
+export type ReplexicaChunkProps = Omit<ReplexicaBaseChunkProps, 'data'>;
 
-  return result;
+export function ReplexicaClientChunk(props: ReplexicaChunkProps) {
+  const r = useContext(replexicaContext);
+  const data = r?.data || {};
+
+  return (
+    <ReplexicaBaseChunk
+      data={data}
+      fileId={props.fileId}
+      scopeId={props.scopeId}
+      chunkId={props.chunkId}
+    />
+  );
 }
-
-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/proxy.tsx

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

packages/react/src/index.ts

@@ -1 +1 @@
-export const value = 42;
+export {};