Merge pull request #1813 from CondeNast/react-dataset-hook

feat: useDataSet hook in the react renderer

packages/@atjson/react/src/contexts/DataSet.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+export type DataSetAttrs = {
+  name?: string;
+  schema: Record<string, string>;
+  records: Array<Record<string, { slice: string; jsonValue: any }>>;
+};
+
+export const DataSetContext = createContext(new Map<string, DataSetAttrs>());

packages/@atjson/react/src/hooks/useDataSet.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { DataSetContext } from "../contexts/DataSet";
+
+export function useDataSet(dataSetId: string) {
+  return useContext(DataSetContext).get(dataSetId);
+}

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

@@ -3,8 +3,10 @@ import { ROOT, createTree, extractSlices } from "@atjson/util";
 import { ComponentContext, ComponentProvider, SliceContext } from "./contexts";
 import { Node, Slice } from "./components";
 import { useMemo, createElement, Fragment } from "react";
+import { DataSetContext, DataSetAttrs } from "./contexts/DataSet";
+import { useDataSet } from "./hooks/useDataSet";
 
-export { ComponentContext, ComponentProvider, Slice };
+export { ComponentContext, ComponentProvider, Slice, useDataSet };
 
 export default function Text(props: {
   value: {
@@ -13,13 +15,19 @@ export default function Text(props: {
     blocks?: Block[];
   };
 }) {
-  let [tree, slices] = useMemo(() => {
+  let [tree, slices, dataSets] = useMemo(() => {
     let [doc, slices] = extractSlices({
       text: props.value.text,
       blocks: props.value.blocks ?? [],
       marks: props.value.marks ?? [],
     });
-    return [createTree(doc), slices] as const;
+
+    let dataSets = new Map(
+      doc.blocks
+        .filter((block) => block.type === "data-set")
+        .map((dataSet) => [dataSet.id, dataSet.attributes as DataSetAttrs])
+    );
+    return [createTree(doc), slices, dataSets] as const;
   }, [props.value]);
 
   let children = useMemo(() => {
@@ -33,14 +41,22 @@ export default function Text(props: {
     SliceContext.Provider,
     { value: slices },
     createElement(
-      Fragment,
-      {},
-      children.map((child) => {
-        if (typeof child === "string") {
-          return child;
-        }
-        return createElement(Node, { value: child, map: tree, key: child.id });
-      })
+      DataSetContext.Provider,
+      { value: dataSets },
+      createElement(
+        Fragment,
+        {},
+        children.map((child) => {
+          if (typeof child === "string") {
+            return child;
+          }
+          return createElement(Node, {
+            value: child,
+            map: tree,
+            key: child.id,
+          });
+        })
+      )
     )
   );
 }

packages/@atjson/react/test/data-set.test.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import Text, { ComponentProvider, Slice, useDataSet } from "../src";
+
+describe("useDataSet", () => {
+  test("referencing a dataset", () => {
+    expect(
+      ReactDOMServer.renderToStaticMarkup(
+        <ComponentProvider
+          value={{
+            blocks: {
+              foos({ dataSet }) {
+                let values = useDataSet(dataSet);
+                if (!values) return null;
+
+                return values.records.map(({ foo }) => (
+                  <>
+                    foo: <Slice value={foo?.slice} />
+                  </>
+                ));
+              },
+            },
+            marks: {},
+          }}
+        >
+          <Text
+            value={{
+              text: "\uFFFC\uFFFChello",
+              blocks: [
+                {
+                  id: "B1",
+                  type: "foos",
+                  parents: [],
+                  selfClosing: true,
+                  attributes: {
+                    dataSet: "B0",
+                  },
+                },
+                {
+                  id: "B0",
+                  type: "data-set",
+                  parents: [],
+                  selfClosing: true,
+                  attributes: {
+                    name: "test",
+                    schema: { foo: "peritext" },
+                    records: [{ foo: { slice: "M0", jsonValue: "hello" } }],
+                  },
+                },
+              ],
+
+              marks: [
+                {
+                  id: "M0",
+                  type: "slice",
+                  range: "[2..7]",
+                  attributes: {},
+                },
+              ],
+            }}
+          />
+        </ComponentProvider>
+      )
+    ).toMatchInlineSnapshot(`"foo: hello"`);
+  });
+});