@cedarjs/web 0.0.4

package/dist/cjs/components/cell/createCell.test.js

@@ -0,0 +1,351 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_react = __toESM(require("react"), 1);
+var import_react2 = require("@testing-library/react");
+var import_vitest = require("vitest");
+var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
+var import_createCell = require("./createCell.js");
+(0, import_vitest.describe)("createCell", () => {
+  (0, import_vitest.beforeAll)(() => {
+    globalThis.RWJS_ENV = {
+      RWJS_EXP_STREAMING_SSR: false
+    };
+  });
+  (0, import_vitest.test)("Renders a static Success component", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!")
+    });
+    const myUseQueryHook = () => ({ data: {} });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Great success!$/);
+  });
+  (0, import_vitest.test)("Renders Success with data", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: ({ answer }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("dl", null, /* @__PURE__ */ import_react.default.createElement("dt", null, "What's the meaning of life?"), /* @__PURE__ */ import_react.default.createElement("dd", null, answer)))
+    });
+    const myUseQueryHook = () => {
+      return { data: { answer: 42 } };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^What's the meaning of life\?$/);
+    import_react2.screen.getByText(/^42$/);
+  });
+  (0, import_vitest.test)("Renders Success if any of the fields have data (i.e. not just the first)", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { users { name } posts { title } }",
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No users or posts"),
+      Success: ({ users, posts }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", null, users.length > 0 ? /* @__PURE__ */ import_react.default.createElement("ul", null, users.map(({ name }) => /* @__PURE__ */ import_react.default.createElement("li", { key: name }, name))) : "no users"), /* @__PURE__ */ import_react.default.createElement("div", null, posts.length > 0 ? /* @__PURE__ */ import_react.default.createElement("ul", null, posts.map(({ title }) => /* @__PURE__ */ import_react.default.createElement("li", { key: title }, title))) : "no posts"))
+    });
+    const myUseQueryHook = () => {
+      return {
+        data: {
+          users: [],
+          posts: [{ title: "bazinga" }, { title: "kittens" }]
+        }
+      };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/bazinga/);
+    import_react2.screen.getByText(/kittens/);
+  });
+  (0, import_vitest.test)("Renders default Loading when there is no data", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!")
+    });
+    const myUseQueryHook = () => ({ loading: true });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Loading...$/);
+  });
+  (0, import_vitest.test)("Renders custom Loading when there is no data", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ loading: true });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Fetching answer...$/);
+  });
+  (0, import_vitest.test)("Renders Success even when `loading` is true if there is data", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ loading: true, data: {} });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Great success!$/);
+  });
+  (0, import_vitest.test)("Renders Empty if available, and data field is null", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No one knows")
+    });
+    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^No one knows$/);
+  });
+  (0, import_vitest.test)("Renders Empty if available, and data field is an empty array", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answers }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "No one knows")
+    });
+    const myUseQueryHook = () => ({ loading: true, data: { answers: [] } });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^No one knows$/);
+  });
+  (0, import_vitest.test)("Renders Success even if data is empty when no Empty is available", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Empty success")
+    });
+    const myUseQueryHook = () => ({ loading: true, data: { answer: null } });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Empty success$/);
+  });
+  (0, import_vitest.test)("Allows passing children to Success", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Look at my beautiful ", children)
+    });
+    const myUseQueryHook = () => ({ data: {} });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "\u{1F986}")))
+    );
+    import_react2.screen.getByText(/^Look at my beautiful$/);
+    import_react2.screen.getByText(/^🦆$/);
+  });
+  (0, import_vitest.test)("Cell props are passed to the query as variables", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: `query Greet($name: String!) {
+        greet(name: $name) {
+          greeting
+        }
+      }`,
+      Success: ({ greeting }) => /* @__PURE__ */ import_react.default.createElement("p", null, greeting)
+    });
+    const myUseQueryHook = (_query, options) => {
+      return { data: { greeting: `Hello ${options.variables.name}!` } };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { name: "Bob" }))
+    );
+    import_react2.screen.getByText(/^Hello Bob!$/);
+  });
+  (0, import_vitest.test)("Allows QUERY to be a function", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: ({ variables }) => {
+        if (variables.character === "BEAST") {
+          return "query BeastQuery { name }";
+        }
+        return "query HeroQuery { name }";
+      },
+      Success: ({ name }) => /* @__PURE__ */ import_react.default.createElement("p", null, "Call me ", name)
+    });
+    const myUseQueryHook = (query) => {
+      if (query.includes("BeastQuery")) {
+        return { data: { name: "Boogeyman" } };
+      } else if (query.includes("HeroQuery")) {
+        return { data: { name: "Lara Croft" } };
+      }
+      return { data: { name: "John Doe" } };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "BEAST" }), /* @__PURE__ */ import_react.default.createElement(TestCell, { character: "HERO" }))
+    );
+    import_react2.screen.getByText(/^Call me Boogeyman$/);
+    import_react2.screen.getByText(/^Call me Lara Croft$/);
+  });
+  (0, import_vitest.test)("Renders Failure when there is an error", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Sad face :("),
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ error: true });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Sad face :\($/);
+  });
+  (0, import_vitest.test)("Passes error to Failure component", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ error }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, JSON.stringify(error)),
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ error: { msg: "System malfunction" } });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^{"msg":"System malfunction"}$/);
+  });
+  (0, import_vitest.test)("Passes error and errorCode to Failure component", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ error, errorCode }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, JSON.stringify(error), ",code:", errorCode),
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({
+      error: { msg: "System malfunction" },
+      errorCode: "SIMON_SAYS_NO"
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^{"msg":"System malfunction"},code:SIMON_SAYS_NO$/);
+  });
+  (0, import_vitest.test)("Passes children to Failure", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Failure: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "I'm a failure ", children)
+    });
+    const myUseQueryHook = () => ({ error: {} });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null, /* @__PURE__ */ import_react.default.createElement("div", null, "Child")))
+    );
+    import_react2.screen.getByText(/^I'm a failure$/);
+    import_react2.screen.getByText(/^Child$/);
+  });
+  (0, import_vitest.test)("Throws an error when there is an error if no Failure component exists", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Loading: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Fetching answer...")
+    });
+    const myUseQueryHook = () => ({ error: { message: "200 GraphQL" } });
+    const err = console.error;
+    console.error = import_vitest.vi.fn();
+    let error;
+    try {
+      (0, import_react2.render)(
+        /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+      );
+    } catch (e) {
+      error = e;
+    }
+    (0, import_vitest.expect)(error.message).toEqual("200 GraphQL");
+    console.error = err;
+  });
+  (0, import_vitest.test)("Allows overriding of default isDataEmpty", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Got nothing"),
+      isEmpty: () => true
+    });
+    const myUseQueryHook = () => ({
+      data: {},
+      loading: false
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Got nothing$/);
+  });
+  (0, import_vitest.test)("Allows mixing isDataEmpty with custom logic", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: "query TestQuery { answer }",
+      Success: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Great success!"),
+      Empty: () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "Got nothing"),
+      isEmpty: (data, { isDataEmpty }) => isDataEmpty(data) || data.answer === "0"
+    });
+    const myUseQueryHook = () => ({
+      data: { answer: "0" },
+      loading: false
+    });
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Got nothing$/);
+  });
+  (0, import_vitest.test)("Allows overriding variables in beforeQuery", () => {
+    const TestCell = (0, import_createCell.createCell)({
+      // @ts-expect-error - Purposefully using a plain string here.
+      QUERY: `query Greet($name: String!) {
+        greet(name: $name) {
+          greeting
+        }
+      }`,
+      Success: ({ greeting }) => /* @__PURE__ */ import_react.default.createElement("p", null, greeting),
+      beforeQuery: () => ({
+        variables: {
+          name: "Bob"
+        }
+      })
+    });
+    const myUseQueryHook = (_query, options) => {
+      return { data: { greeting: `Hello ${options.variables.name}!` } };
+    };
+    (0, import_react2.render)(
+      /* @__PURE__ */ import_react.default.createElement(import_GraphQLHooksProvider.GraphQLHooksProvider, { useQuery: myUseQueryHook, useMutation: null }, /* @__PURE__ */ import_react.default.createElement(TestCell, null))
+    );
+    import_react2.screen.getByText(/^Hello Bob!$/);
+  });
+});

package/dist/cjs/components/cell/createServerCell.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CreateCellProps } from './cellTypes.js';
+type CreateServerCellProps<CellProps, CellVariables> = Omit<CreateCellProps<CellProps, CellVariables>, 'QUERY' | 'Failure'> & {
+    data: (variables?: AnyObj) => any;
+    Failure?: React.ComponentType<{
+        error: unknown;
+        queryResult: {
+            refetch: (variables: CellProps) => AnyObj;
+        };
+    }>;
+};
+type AnyObj = Record<string, unknown>;
+export declare function createServerCell<CellProps extends AnyObj, CellVariables extends AnyObj>(createCellProps: CreateServerCellProps<CellProps, CellVariables>): React.FC<CellProps>;
+export {};
+//# sourceMappingURL=createServerCell.d.ts.map

package/dist/cjs/components/cell/createServerCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createServerCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createServerCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAIrD,KAAK,qBAAqB,CAAC,SAAS,EAAE,aAAa,IAAI,IAAI,CACzD,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,EACzC,OAAO,GAAG,SAAS,CACpB,GAAG;IACF,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,GAAG,CAAA;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,KAAK,EAAE,OAAO,CAAA;QACd,WAAW,EAAE;YAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,MAAM,CAAA;SAAE,CAAA;KAC3D,CAAC,CAAA;CACH,CAAA;AAED,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAErC,wBAAgB,gBAAgB,CAC9B,SAAS,SAAS,MAAM,EACxB,aAAa,SAAS,MAAM,EAE5B,eAAe,EAAE,qBAAqB,CAAC,SAAS,EAAE,aAAa,CAAC,GAC/D,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CA2ErB"}

package/dist/cjs/components/cell/createServerCell.js

@@ -0,0 +1,91 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createServerCell_exports = {};
+__export(createServerCell_exports, {
+  createServerCell: () => createServerCell
+});
+module.exports = __toCommonJS(createServerCell_exports);
+var import_react = __toESM(require("react"), 1);
+var import_isCellEmpty = require("./isCellEmpty.js");
+function createServerCell(createCellProps) {
+  const {
+    data: dataFn,
+    isEmpty = import_isCellEmpty.isDataEmpty,
+    Loading,
+    Failure,
+    Empty,
+    Success,
+    displayName = "Cell"
+  } = createCellProps;
+  async function SuspendingSuccess(props) {
+    const { children: _, ...variables } = props;
+    const FailureComponent = ({ error }) => {
+      if (!Failure) {
+        throw error;
+      }
+      const queryResultWithRefetch = {
+        refetch: (variables2) => {
+          return dataFn(variables2);
+        }
+      };
+      return /* @__PURE__ */ import_react.default.createElement(Failure, { error, queryResult: queryResultWithRefetch });
+    };
+    try {
+      const data = await dataFn(variables);
+      if (isEmpty(data, { isDataEmpty: import_isCellEmpty.isDataEmpty }) && Empty) {
+        return /* @__PURE__ */ import_react.default.createElement(Empty, { ...props, ...data });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(Success, { ...data, ...props });
+    } catch (error) {
+      return /* @__PURE__ */ import_react.default.createElement(FailureComponent, { error });
+    }
+  }
+  SuspendingSuccess.displayName = displayName;
+  return (props) => {
+    const wrapInSuspenseIfLoadingPresent = (suspendingSuccessElement, LoadingComponent) => {
+      if (!LoadingComponent) {
+        return suspendingSuccessElement;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.Suspense, { fallback: /* @__PURE__ */ import_react.default.createElement(LoadingComponent, { ...props }) }, suspendingSuccessElement);
+    };
+    return (
+      // TODO(RSC): Do we always want a client side error boundary? If so, this
+      // is where we'd add it
+      // <CellErrorBoundary renderFallback={FailureComponent}>
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, wrapInSuspenseIfLoadingPresent(
+        /* @__PURE__ */ import_react.default.createElement(SuspendingSuccess, { ...props }),
+        Loading
+      ))
+    );
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createServerCell
+});

package/dist/cjs/components/cell/createSuspendingCell.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CreateCellProps } from './cellTypes.js';
+type AnyObj = Record<string, unknown>;
+/**
+ * Creates a Cell ~~ with Apollo Client only ~~
+ * using the hooks useBackgroundQuery and useReadQuery
+ *
+ */
+export declare function createSuspendingCell<CellProps extends AnyObj, CellVariables extends AnyObj>(createCellProps: CreateCellProps<AnyObj, CellVariables>): React.FC<CellProps>;
+export {};
+//# sourceMappingURL=createSuspendingCell.d.ts.map

package/dist/cjs/components/cell/createSuspendingCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSuspendingCell.d.ts","sourceRoot":"","sources":["../../../../src/components/cell/createSuspendingCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,gBAAgB,CAAA;AAGvB,KAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACrC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,SAAS,MAAM,EACxB,aAAa,SAAS,MAAM,EAE5B,eAAe,EAAE,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,GACtD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAqIrB"}

package/dist/cjs/components/cell/createSuspendingCell.js

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createSuspendingCell_exports = {};
+__export(createSuspendingCell_exports, {
+  createSuspendingCell: () => createSuspendingCell
+});
+module.exports = __toCommonJS(createSuspendingCell_exports);
+var import_react = __toESM(require("react"), 1);
+var import_hooks = require("@apollo/client/react/hooks/hooks.cjs");
+var import_GraphQLHooksProvider = require("../GraphQLHooksProvider.js");
+var import_CellErrorBoundary = require("./CellErrorBoundary.js");
+var import_isCellEmpty = require("./isCellEmpty.js");
+function createSuspendingCell(createCellProps) {
+  const {
+    QUERY,
+    beforeQuery = (props) => ({
+      // By default, we assume that the props are the gql-variables.
+      variables: props,
+      /**
+       * We're duplicating these props here due to a suspected bug in Apollo Client v3.5.4
+       * (it doesn't seem to be respecting `defaultOptions` in `RedwoodApolloProvider`.)
+       *
+       * @see {@link https://github.com/apollographql/apollo-client/issues/9105}
+       */
+      fetchPolicy: "cache-and-network",
+      notifyOnNetworkStatusChange: true
+    }),
+    afterQuery = (data) => ({ ...data }),
+    isEmpty = import_isCellEmpty.isDataEmpty,
+    Loading,
+    Failure,
+    Empty,
+    Success,
+    displayName = "Cell"
+  } = createCellProps;
+  function SuspendingSuccess(props) {
+    const { queryRef, suspenseQueryResult, userProps } = props;
+    const { data, networkStatus } = (0, import_GraphQLHooksProvider.useReadQuery)(queryRef);
+    const afterQueryData = afterQuery(data);
+    const queryResultWithNetworkStatus = {
+      ...suspenseQueryResult,
+      networkStatus
+    };
+    if (isEmpty(data, { isDataEmpty: import_isCellEmpty.isDataEmpty }) && Empty) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        Empty,
+        {
+          ...userProps,
+          ...afterQueryData,
+          queryResult: queryResultWithNetworkStatus
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      Success,
+      {
+        ...afterQueryData,
+        ...userProps,
+        queryResult: queryResultWithNetworkStatus
+      }
+    );
+  }
+  SuspendingSuccess.displayName = displayName;
+  return (props) => {
+    const { children: _, ...variables } = props;
+    const options = beforeQuery(variables);
+    const query = typeof QUERY === "function" ? QUERY(options) : QUERY;
+    const [queryRef, other] = (0, import_GraphQLHooksProvider.useBackgroundQuery)(query, options);
+    const client = (0, import_hooks.useApolloClient)();
+    const suspenseQueryResult = {
+      client,
+      ...other,
+      called: !!queryRef
+    };
+    const FailureComponent = ({ error, resetErrorBoundary }) => {
+      if (!Failure) {
+        if (error) {
+          throw error;
+        }
+        throw new Error("Unreachable code: FailureComponent without a Failure");
+      }
+      const queryResultWithErrorReset = {
+        ...suspenseQueryResult,
+        refetch: (variables2) => {
+          resetErrorBoundary();
+          return suspenseQueryResult.refetch?.(variables2);
+        }
+      };
+      return /* @__PURE__ */ import_react.default.createElement(
+        Failure,
+        {
+          error,
+          errorCode: error?.graphQLErrors?.[0]?.extensions?.["code"],
+          queryResult: queryResultWithErrorReset
+        }
+      );
+    };
+    const wrapInSuspenseIfLoadingPresent = (suspendingSuccessElement, LoadingComponent) => {
+      if (!LoadingComponent) {
+        return suspendingSuccessElement;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_react.Suspense,
+        {
+          fallback: /* @__PURE__ */ import_react.default.createElement(LoadingComponent, { ...props, queryResult: suspenseQueryResult })
+        },
+        suspendingSuccessElement
+      );
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_CellErrorBoundary.CellErrorBoundary, { renderFallback: FailureComponent }, wrapInSuspenseIfLoadingPresent(
+      /* @__PURE__ */ import_react.default.createElement(
+        SuspendingSuccess,
+        {
+          userProps: props,
+          queryRef,
+          suspenseQueryResult
+        }
+      ),
+      Loading
+    ));
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createSuspendingCell
+});