fix: add useDataSet hook to react-renderer

packages/@atjson/renderer-react/src/index.ts

@@ -46,6 +46,16 @@ const SliceContext = React.createContext<{
   schema: AnnotationConstructor<any, any>[];
 }>({ slices: new Map(), schema: [] });
 
+export type DataSetAttrs = {
+  name?: string;
+  schema: Record<string, string>;
+  records: Array<Record<string, { slice: string; jsonValue: any }>>;
+};
+
+const DataSetContext = React.createContext<Map<string, DataSetAttrs>>(
+  new Map()
+);
+
 export const ReactRendererContext = React.createContext<{
   [key: string]: ComponentType<any>;
 }>(EMPTY_COMPONENT_MAP);
@@ -200,6 +210,11 @@ function render(
   });
   let tree = createTree(doc);
   let schema = (props.document.constructor as typeof Document).schema;
+  let dataSets = new Map(
+    doc.blocks
+      .filter((block) => block.type === "data-set")
+      .map((dataSet) => [dataSet.id, dataSet.attributes as DataSetAttrs])
+  );
 
   return createElement(
     SliceContext.Provider,
@@ -210,13 +225,17 @@ function render(
       },
     },
     createElement(
-      Fragment,
-      {},
-      renderNode({
-        id: ROOT,
-        tree,
-        schema,
-      })
+      DataSetContext.Provider,
+      { value: dataSets },
+      createElement(
+        Fragment,
+        {},
+        renderNode({
+          id: ROOT,
+          tree,
+          schema,
+        })
+      )
     )
   );
 }
@@ -254,6 +273,10 @@ export function Slice(props: {
 }
 Slice.displayName = "Slice";
 
+export function useDataSet(id: string) {
+  return useContext(DataSetContext).get(id);
+}
+
 export default {
   render,
 };

packages/@atjson/renderer-react/test/react-renderer.test.tsx

@@ -1,24 +1,33 @@
 import {
+  AttributesOf,
   ObjectAnnotation,
   ParseAnnotation,
   SliceAnnotation,
 } from "@atjson/document";
 import OffsetSource, {
   Bold,
   CaptionSource,
+  ColumnType,
+  DataSet,
   GiphyEmbed,
   IframeEmbed,
   Italic,
   LineBreak,
   Link,
   Paragraph,
+  Table,
   VideoEmbed,
   VideoURLs,
 } from "@atjson/offset-annotations";
 import * as React from "react";
 import { createElement, Fragment, ReactNode } from "react";
 import * as ReactDOMServer from "react-dom/server";
-import ReactRenderer, { PropsOf, ReactRendererProvider, Slice } from "../src";
+import ReactRenderer, {
+  PropsOf,
+  ReactRendererProvider,
+  Slice,
+  useDataSet,
+} from "../src";
 
 function renderDocument(
   doc: OffsetSource,
@@ -141,6 +150,26 @@ function IframeComponentWithProvider(props: PropsOf<IframeEmbed>) {
   );
 }
 
+function TableComponent(props: AttributesOf<Table>) {
+  let data = useDataSet(props.dataSet);
+
+  return (
+    <table>
+      <tbody>
+        {data?.records.map((row) => (
+          <tr>
+            {props.columns.map(({ columnName }) => (
+              <td>
+                <Slice value={row[columnName].slice} />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 describe("ReactRenderer", () => {
   it("renders simple components", () => {
     let document = new OffsetSource({
@@ -379,4 +408,68 @@ describe("ReactRenderer", () => {
       );
     });
   });
+
+  describe("useDataSet hook", () => {
+    it("can be used to render tables", () => {
+      const doc = new OffsetSource({
+        content: "foo bar baz",
+        annotations: [
+          new DataSet({
+            id: "DS1",
+            start: 0,
+            end: 11,
+            attributes: {
+              records: [
+                {
+                  foo: { slice: "S1", jsonValue: "foo" },
+                  bar: { slice: "S2", jsonValue: "bar" },
+                  baz: { slice: "S3", jsonValue: "baz" },
+                },
+              ],
+              schema: {
+                foo: ColumnType.STRING,
+                bar: ColumnType.STRING,
+                baz: ColumnType.STRING,
+              },
+            },
+          }),
+          new Table({
+            start: 0,
+            end: 11,
+            attributes: {
+              dataSet: "DS1",
+              columns: [
+                { columnName: "foo" },
+                { columnName: "bar" },
+                { columnName: "baz" },
+              ],
+            },
+          }),
+          new SliceAnnotation({
+            id: "S1",
+            start: 0,
+            end: 3,
+          }),
+          new SliceAnnotation({
+            id: "S2",
+            start: 4,
+            end: 7,
+          }),
+          new SliceAnnotation({
+            id: "S3",
+            start: 8,
+            end: 11,
+          }),
+        ],
+      });
+
+      expect(
+        renderDocument(doc, {
+          Table: TableComponent,
+        })
+      ).toBe(
+        "<table><tbody><tr><td>foo</td><td>bar</td><td>baz</td></tr></tbody></table>"
+      );
+    });
+  });
 });