@uniformdev/canvas-next-rsc-client 19.55.2-alpha.14

package/LICENSE.txt

@@ -0,0 +1,2 @@
+© 2023 Uniform Systems, Inc. All Rights Reserved.
+See details of Uniform Systems, Inc. Master Subscription Agreement here: https://uniform.dev/eula

package/README.md

@@ -0,0 +1,5 @@
+Next.js RSC SDK for Uniform Canvas
+
+**Note:** This package is in public preview.
+
+part of the [Uniform Platform](https://uniform.app). See our [documentation](https://docs.uniform.app) for more details.

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { AppDirectoryContextState, ComponentProps, PersonalizeProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ContextUpdateTransferClient: ({ update, ts, }: {
+    update: Partial<AppDirectoryContextState>;
+    ts: number;
+}) => null;
+
+declare const PersonalizeClient: (props: ComponentProps<PersonalizeProps>) => react.FunctionComponentElement<{
+    children?: react.ReactNode;
+}>;
+
+declare const TestClient: (props: ComponentProps<TestProps>) => react.FunctionComponentElement<{
+    children?: react.ReactNode;
+}> | null;
+
+declare const UniformScript: () => react_jsx_runtime.JSX.Element;
+
+declare const useInitUniformContext: (callback: () => AppDirectoryContext) => void;
+
+declare global {
+    interface Window {
+        __UNIFORM_CONTEXT__: AppDirectoryContext | undefined;
+    }
+}
+declare const useUniformContext: () => {
+    context: AppDirectoryContext | undefined;
+};
+
+export { ContextUpdateTransferClient, PersonalizeClient, TestClient, UniformScript, useInitUniformContext, useUniformContext };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { AppDirectoryContextState, ComponentProps, PersonalizeProps, TestProps, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ContextUpdateTransferClient: ({ update, ts, }: {
+    update: Partial<AppDirectoryContextState>;
+    ts: number;
+}) => null;
+
+declare const PersonalizeClient: (props: ComponentProps<PersonalizeProps>) => react.FunctionComponentElement<{
+    children?: react.ReactNode;
+}>;
+
+declare const TestClient: (props: ComponentProps<TestProps>) => react.FunctionComponentElement<{
+    children?: react.ReactNode;
+}> | null;
+
+declare const UniformScript: () => react_jsx_runtime.JSX.Element;
+
+declare const useInitUniformContext: (callback: () => AppDirectoryContext) => void;
+
+declare global {
+    interface Window {
+        __UNIFORM_CONTEXT__: AppDirectoryContext | undefined;
+    }
+}
+declare const useUniformContext: () => {
+    context: AppDirectoryContext | undefined;
+};
+
+export { ContextUpdateTransferClient, PersonalizeClient, TestClient, UniformScript, useInitUniformContext, useUniformContext };

package/dist/index.esm.js

@@ -0,0 +1,158 @@
+"use client";
+
+// src/components/ContextUpdateTransferClient.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useUniformContext.ts
+import { useEffect, useState } from "react";
+var useUniformContext = () => {
+  const [context, setContext] = useState(
+    typeof window !== "undefined" ? window.__UNIFORM_CONTEXT__ : void 0
+  );
+  useEffect(() => {
+    const listener = () => {
+      setContext(window.__UNIFORM_CONTEXT__);
+    };
+    window.addEventListener("uniform.context.loaded", listener);
+    return () => {
+      window.removeEventListener("uniform.context.loaded", listener);
+    };
+  }, []);
+  return {
+    context
+  };
+};
+
+// src/components/ContextUpdateTransferClient.tsx
+var ContextUpdateTransferClient = ({
+  update,
+  ts
+}) => {
+  const { context } = useUniformContext();
+  const [lastLogged, setLastLogged] = useState2(void 0);
+  useEffect2(() => {
+    const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
+    const hasContext = typeof context !== "undefined";
+    if (shouldBeLogged && hasContext) {
+      setLastLogged(ts);
+      context.update(update);
+    }
+  }, [context, update, lastLogged, ts]);
+  return null;
+};
+
+// src/components/PersonalizeClient.ts
+import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
+import { runPersonalization } from "@uniformdev/canvas-next-rsc-shared";
+import { createElement, Fragment, useMemo } from "react";
+var PersonalizeClient = (props) => {
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const indexes = useMemo(() => {
+    const result = runPersonalization({
+      ...props,
+      contextInstance: context
+    });
+    return result.indexes;
+  }, [props, context]);
+  const slotsToShow = indexes.map((key) => {
+    var _a;
+    return (_a = slots[CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
+  });
+  return createElement(Fragment, void 0, slotsToShow);
+};
+
+// src/components/TestClient.ts
+import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
+import { runTest } from "@uniformdev/canvas-next-rsc-shared";
+import { createElement as createElement2, Fragment as Fragment2, useMemo as useMemo2 } from "react";
+var TestClient = (props) => {
+  var _a;
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const index = useMemo2(() => {
+    const result = runTest({
+      ...props,
+      contextInstance: context
+    });
+    return result.index;
+  }, [props, context]);
+  if (typeof index !== "number") {
+    return null;
+  }
+  return createElement2(Fragment2, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+};
+
+// src/components/UniformScriptClient.tsx
+import { createCanvasChannel, IN_CONTEXT_EDITOR_QUERY_STRING_PARAM } from "@uniformdev/canvas";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, jsx } from "react/jsx-runtime";
+var UniformScript = () => {
+  const router = useRouter();
+  const params = useSearchParams();
+  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  const channel = useMemo3(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const instance = createCanvasChannel({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return instance;
+  }, []);
+  useEffect3(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
+      router.refresh();
+    });
+    return () => {
+      unsubscribeFromEditorUpdates();
+    };
+  }, [channel, router]);
+  useEffect3(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const existing = document.getElementById("uniform-script");
+    if (enabled) {
+      if (!existing) {
+        const script = document.createElement("script");
+        script.id = "uniform-script";
+        script.src = `https://uniform.app/files/canvas-in-context-embed/index.js`;
+        script.async = true;
+        document.head.appendChild(script);
+      }
+    } else if (existing) {
+      existing.remove();
+    }
+  }, [enabled]);
+  return /* @__PURE__ */ jsx(Fragment3, {});
+};
+
+// src/hooks/useInitUniformContext.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+var useInitUniformContext = (callback) => {
+  const [called, setCalled] = useState3(false);
+  useEffect4(() => {
+    if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
+      return;
+    }
+    window.__UNIFORM_CONTEXT__ = callback();
+    setCalled(true);
+    const event = new Event("uniform.context.loaded");
+    window.dispatchEvent(event);
+  }, [called, callback]);
+};
+export {
+  ContextUpdateTransferClient,
+  PersonalizeClient,
+  TestClient,
+  UniformScript,
+  useInitUniformContext,
+  useUniformContext
+};

package/dist/index.js

@@ -0,0 +1,189 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ContextUpdateTransferClient: () => ContextUpdateTransferClient,
+  PersonalizeClient: () => PersonalizeClient,
+  TestClient: () => TestClient,
+  UniformScript: () => UniformScript,
+  useInitUniformContext: () => useInitUniformContext,
+  useUniformContext: () => useUniformContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/ContextUpdateTransferClient.tsx
+var import_react2 = require("react");
+
+// src/hooks/useUniformContext.ts
+var import_react = require("react");
+var useUniformContext = () => {
+  const [context, setContext] = (0, import_react.useState)(
+    typeof window !== "undefined" ? window.__UNIFORM_CONTEXT__ : void 0
+  );
+  (0, import_react.useEffect)(() => {
+    const listener = () => {
+      setContext(window.__UNIFORM_CONTEXT__);
+    };
+    window.addEventListener("uniform.context.loaded", listener);
+    return () => {
+      window.removeEventListener("uniform.context.loaded", listener);
+    };
+  }, []);
+  return {
+    context
+  };
+};
+
+// src/components/ContextUpdateTransferClient.tsx
+var ContextUpdateTransferClient = ({
+  update,
+  ts
+}) => {
+  const { context } = useUniformContext();
+  const [lastLogged, setLastLogged] = (0, import_react2.useState)(void 0);
+  (0, import_react2.useEffect)(() => {
+    const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
+    const hasContext = typeof context !== "undefined";
+    if (shouldBeLogged && hasContext) {
+      setLastLogged(ts);
+      context.update(update);
+    }
+  }, [context, update, lastLogged, ts]);
+  return null;
+};
+
+// src/components/PersonalizeClient.ts
+var import_canvas = require("@uniformdev/canvas");
+var import_canvas_next_rsc_shared = require("@uniformdev/canvas-next-rsc-shared");
+var import_react3 = require("react");
+var PersonalizeClient = (props) => {
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const indexes = (0, import_react3.useMemo)(() => {
+    const result = (0, import_canvas_next_rsc_shared.runPersonalization)({
+      ...props,
+      contextInstance: context
+    });
+    return result.indexes;
+  }, [props, context]);
+  const slotsToShow = indexes.map((key) => {
+    var _a;
+    return (_a = slots[import_canvas.CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
+  });
+  return (0, import_react3.createElement)(import_react3.Fragment, void 0, slotsToShow);
+};
+
+// src/components/TestClient.ts
+var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas_next_rsc_shared2 = require("@uniformdev/canvas-next-rsc-shared");
+var import_react4 = require("react");
+var TestClient = (props) => {
+  var _a;
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const index = (0, import_react4.useMemo)(() => {
+    const result = (0, import_canvas_next_rsc_shared2.runTest)({
+      ...props,
+      contextInstance: context
+    });
+    return result.index;
+  }, [props, context]);
+  if (typeof index !== "number") {
+    return null;
+  }
+  return (0, import_react4.createElement)(import_react4.Fragment, void 0, (_a = slots == null ? void 0 : slots[import_canvas2.CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+};
+
+// src/components/UniformScriptClient.tsx
+var import_canvas3 = require("@uniformdev/canvas");
+var import_navigation = require("next/navigation");
+var import_react5 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var UniformScript = () => {
+  const router = (0, import_navigation.useRouter)();
+  const params = (0, import_navigation.useSearchParams)();
+  const enabled = params.get(import_canvas3.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  const channel = (0, import_react5.useMemo)(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const instance = (0, import_canvas3.createCanvasChannel)({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return instance;
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
+      router.refresh();
+    });
+    return () => {
+      unsubscribeFromEditorUpdates();
+    };
+  }, [channel, router]);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const existing = document.getElementById("uniform-script");
+    if (enabled) {
+      if (!existing) {
+        const script = document.createElement("script");
+        script.id = "uniform-script";
+        script.src = `https://uniform.app/files/canvas-in-context-embed/index.js`;
+        script.async = true;
+        document.head.appendChild(script);
+      }
+    } else if (existing) {
+      existing.remove();
+    }
+  }, [enabled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+};
+
+// src/hooks/useInitUniformContext.ts
+var import_react6 = require("react");
+var useInitUniformContext = (callback) => {
+  const [called, setCalled] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
+      return;
+    }
+    window.__UNIFORM_CONTEXT__ = callback();
+    setCalled(true);
+    const event = new Event("uniform.context.loaded");
+    window.dispatchEvent(event);
+  }, [called, callback]);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ContextUpdateTransferClient,
+  PersonalizeClient,
+  TestClient,
+  UniformScript,
+  useInitUniformContext,
+  useUniformContext
+});

package/dist/index.mjs

@@ -0,0 +1,158 @@
+"use client";
+
+// src/components/ContextUpdateTransferClient.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useUniformContext.ts
+import { useEffect, useState } from "react";
+var useUniformContext = () => {
+  const [context, setContext] = useState(
+    typeof window !== "undefined" ? window.__UNIFORM_CONTEXT__ : void 0
+  );
+  useEffect(() => {
+    const listener = () => {
+      setContext(window.__UNIFORM_CONTEXT__);
+    };
+    window.addEventListener("uniform.context.loaded", listener);
+    return () => {
+      window.removeEventListener("uniform.context.loaded", listener);
+    };
+  }, []);
+  return {
+    context
+  };
+};
+
+// src/components/ContextUpdateTransferClient.tsx
+var ContextUpdateTransferClient = ({
+  update,
+  ts
+}) => {
+  const { context } = useUniformContext();
+  const [lastLogged, setLastLogged] = useState2(void 0);
+  useEffect2(() => {
+    const shouldBeLogged = (!ts || lastLogged !== ts) && Object.keys(update).length > 0;
+    const hasContext = typeof context !== "undefined";
+    if (shouldBeLogged && hasContext) {
+      setLastLogged(ts);
+      context.update(update);
+    }
+  }, [context, update, lastLogged, ts]);
+  return null;
+};
+
+// src/components/PersonalizeClient.ts
+import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
+import { runPersonalization } from "@uniformdev/canvas-next-rsc-shared";
+import { createElement, Fragment, useMemo } from "react";
+var PersonalizeClient = (props) => {
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const indexes = useMemo(() => {
+    const result = runPersonalization({
+      ...props,
+      contextInstance: context
+    });
+    return result.indexes;
+  }, [props, context]);
+  const slotsToShow = indexes.map((key) => {
+    var _a;
+    return (_a = slots[CANVAS_PERSONALIZE_SLOT]) == null ? void 0 : _a.items[key];
+  });
+  return createElement(Fragment, void 0, slotsToShow);
+};
+
+// src/components/TestClient.ts
+import { CANVAS_TEST_SLOT } from "@uniformdev/canvas";
+import { runTest } from "@uniformdev/canvas-next-rsc-shared";
+import { createElement as createElement2, Fragment as Fragment2, useMemo as useMemo2 } from "react";
+var TestClient = (props) => {
+  var _a;
+  const { slots } = props;
+  const { context } = useUniformContext();
+  const index = useMemo2(() => {
+    const result = runTest({
+      ...props,
+      contextInstance: context
+    });
+    return result.index;
+  }, [props, context]);
+  if (typeof index !== "number") {
+    return null;
+  }
+  return createElement2(Fragment2, void 0, (_a = slots == null ? void 0 : slots[CANVAS_TEST_SLOT]) == null ? void 0 : _a.items[index]);
+};
+
+// src/components/UniformScriptClient.tsx
+import { createCanvasChannel, IN_CONTEXT_EDITOR_QUERY_STRING_PARAM } from "@uniformdev/canvas";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, jsx } from "react/jsx-runtime";
+var UniformScript = () => {
+  const router = useRouter();
+  const params = useSearchParams();
+  const enabled = params.get(IN_CONTEXT_EDITOR_QUERY_STRING_PARAM) === "true";
+  const channel = useMemo3(() => {
+    var _a;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const instance = createCanvasChannel({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return instance;
+  }, []);
+  useEffect3(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
+      router.refresh();
+    });
+    return () => {
+      unsubscribeFromEditorUpdates();
+    };
+  }, [channel, router]);
+  useEffect3(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const existing = document.getElementById("uniform-script");
+    if (enabled) {
+      if (!existing) {
+        const script = document.createElement("script");
+        script.id = "uniform-script";
+        script.src = `https://uniform.app/files/canvas-in-context-embed/index.js`;
+        script.async = true;
+        document.head.appendChild(script);
+      }
+    } else if (existing) {
+      existing.remove();
+    }
+  }, [enabled]);
+  return /* @__PURE__ */ jsx(Fragment3, {});
+};
+
+// src/hooks/useInitUniformContext.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+var useInitUniformContext = (callback) => {
+  const [called, setCalled] = useState3(false);
+  useEffect4(() => {
+    if (typeof window === "undefined" || called || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
+      return;
+    }
+    window.__UNIFORM_CONTEXT__ = callback();
+    setCalled(true);
+    const event = new Event("uniform.context.loaded");
+    window.dispatchEvent(event);
+  }, [called, callback]);
+};
+export {
+  ContextUpdateTransferClient,
+  PersonalizeClient,
+  TestClient,
+  UniformScript,
+  useInitUniformContext,
+  useUniformContext
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@uniformdev/canvas-next-rsc-client",
+  "version": "19.55.2-alpha.14+9b75d5322",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"**/*.{ts,tsx}\" --fix",
+    "test": "jest --maxWorkers=1 --passWithNoTests"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "node": "./dist/index.mjs",
+      "default": "./dist/index.esm.js"
+    },
+    "require": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.2.20",
+    "eslint": "^8.11.0",
+    "next": "^13.4.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@uniformdev/canvas": "19.55.2-alpha.14+9b75d5322",
+    "@uniformdev/canvas-next-rsc-shared": "^19.55.2-alpha.14+9b75d5322"
+  },
+  "engines": {
+    "node": ">=16.14.0"
+  },
+  "peerDependencies": {
+    "next": ">=13.4.7",
+    "react": ">=18.2",
+    "react-dom": ">=18.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9b75d5322988b2a8c59e7e1b641fb0c8cb7ad301"
+}