feat(react): extract common runtime code into reusable components

Author: maxprilutskiy

packages/react/src/shared/chunk.tsx

@@ -0,0 +1,24 @@
+export type ReplexicaBaseChunkProps = ReplexicaChunkSelector & {
+  data: any;
+};
+
+export function ReplexicaBaseChunk(props: ReplexicaBaseChunkProps) {
+  return resolveChunkValue(props.data, {
+    fileId: props.fileId,
+    scopeId: props.scopeId,
+    chunkId: props.chunkId,
+  });
+}
+
+export type ReplexicaChunkSelector = {
+  fileId: string;
+  scopeId: string;
+  chunkId: string;
+};
+
+export function resolveChunkValue(data: any, selector: ReplexicaChunkSelector) {
+  const { fileId, scopeId, chunkId } = selector;
+  const text = data?.[fileId]?.[scopeId]?.[chunkId];
+  const fallback = `${fileId}.${scopeId}.${chunkId}`;
+  return text || fallback;
+}

packages/react/src/shared/index.ts

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

packages/react/src/shared/proxy.tsx

@@ -0,0 +1,33 @@
+import { createElement } from "react";
+import { ReplexicaBaseChunkProps, resolveChunkValue } from "./chunk";
+
+export type ReplexicaBaseProxyProps<P extends {}> = P & {
+  data: any;
+  _ReplexicaComponent: string | React.ComponentType<P>;
+  _ReplexicaAttributes: Record<keyof P, Omit<ReplexicaBaseChunkProps, 'data'>>;
+};
+
+export function ReplexicaBaseProxy<P extends {}>(props: ReplexicaBaseProxyProps<P>) {
+  const { _ReplexicaAttributes, _ReplexicaComponent, data, ...originalProps } = props;
+  let propsPatch: Partial<P> = {};
+
+  for (const [key, value] of Object.entries(_ReplexicaAttributes || {})) {
+    const selector = value as Omit<ReplexicaBaseChunkProps, 'data'>;
+    const result = resolveChunkValue(data, selector);
+
+    propsPatch = {
+      ...propsPatch,
+      [key]: result,
+    };
+  }
+
+  const modifiedProps: P = {
+    ...originalProps,
+    ...propsPatch,
+  } as any;
+
+  return createElement(
+    _ReplexicaComponent,
+    modifiedProps,
+  );
+}