@uniformdev/next-app-router-client 20.7.1-alpha.118

package/dist/index.js

@@ -0,0 +1,550 @@
+"use strict";
+"use client";
+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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ClientContextTestTransfer: () => ClientContextTestTransfer,
+  ClientUniformText: () => ClientUniformText,
+  ContextUpdateTransfer: () => ContextUpdateTransfer,
+  DefaultUniformClientContext: () => DefaultUniformClientContext,
+  Personalize: () => Personalize,
+  UniformScript: () => UniformScript,
+  VisibilityRulesWrapperClient: () => VisibilityRulesWrapperClient,
+  createClientUniformContext: () => createClientUniformContext,
+  useInitUniformContext: () => useInitUniformContext,
+  useQuirks: () => useQuirks,
+  useScores: () => useScores,
+  useUniformContext: () => useUniformContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/ClientContextTestTransfer.tsx
+var import_react3 = require("react");
+
+// src/hooks/useStableValue.ts
+var import_react = require("react");
+var useStableValue = (value, isValid) => {
+  const previousRef = (0, import_react.useRef)(null);
+  const [stableValue, setStableValue] = (0, import_react.useState)(void 0);
+  (0, import_react.useEffect)(() => {
+    const serialized = JSON.stringify(value);
+    const valid = isValid ? isValid(value) : true;
+    if (serialized !== previousRef.current && valid) {
+      previousRef.current = serialized;
+      setStableValue(value);
+    }
+  }, [value]);
+  return stableValue;
+};
+
+// src/hooks/useUniformContext.ts
+var import_react2 = require("react");
+var useUniformContext = () => {
+  const [context, setContext] = (0, import_react2.useState)(
+    typeof window !== "undefined" ? window.__UNIFORM_CONTEXT__ : void 0
+  );
+  useInterval(
+    () => {
+      if (context) {
+        return;
+      }
+      if (window.__UNIFORM_CONTEXT__) {
+        setContext(window.__UNIFORM_CONTEXT__);
+      }
+    },
+    100,
+    !context
+  );
+  return {
+    context
+  };
+};
+var useInterval = (callback, delay, enabled) => {
+  const intervalRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      return;
+    }
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [callback, delay, enabled]);
+};
+
+// src/components/ClientContextTestTransfer.tsx
+var hasVariantId = (event) => Boolean(event.variantId);
+var ClientContextTestTransfer = ({ event }) => {
+  const { context } = useUniformContext();
+  const stableEvent = useStableValue(event, hasVariantId);
+  (0, import_react3.useEffect)(() => {
+    if (context && stableEvent) {
+      context.internal_processTestEvent(stableEvent);
+    }
+  }, [context, stableEvent]);
+  return null;
+};
+
+// src/components/ClientUniformText.tsx
+var import_canvas = require("@uniformdev/canvas");
+var import_react5 = require("react");
+
+// src/hooks/useQuirks.ts
+var import_react4 = require("react");
+function useQuirks() {
+  var _a;
+  const { context } = useUniformContext();
+  const [quirks, setQuirks] = (0, import_react4.useState)((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
+  (0, import_react4.useEffect)(() => {
+    if (!context) {
+      return;
+    }
+    const quirkChangeListener = (updatedQuirks) => {
+      setQuirks(updatedQuirks);
+    };
+    setQuirks(context.quirks);
+    context == null ? void 0 : context.events.on("quirksUpdated", quirkChangeListener);
+    return () => {
+      context == null ? void 0 : context.events.off("quirksUpdated", quirkChangeListener);
+    };
+  }, [context]);
+  return quirks;
+}
+
+// src/components/ClientUniformText.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ClientUniformText = ({
+  as,
+  component,
+  parameter: providedParameter,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value != null ? value : "",
+  ...props
+}) => {
+  const parameter = providedParameter;
+  const quirks = useQuirks();
+  const rules = (0, import_react5.useMemo)(() => {
+    return {
+      ...(0, import_canvas.createQuirksVisibilityRule)(quirks)
+    };
+  }, [quirks]);
+  const currentValue = (0, import_react5.useMemo)(() => {
+    var _a;
+    if (!parameter) {
+      return void 0;
+    }
+    if (!rules.length || !((_a = parameter.conditions) == null ? void 0 : _a.length)) {
+      return parameter.value;
+    }
+    const match = (0, import_canvas.evaluatePropertyCriteria)({
+      baseValue: parameter.value,
+      conditionalValues: parameter.conditions,
+      rules
+    });
+    if (typeof match.currentValue === "string") {
+      return match.currentValue;
+    }
+    return parameter.value;
+  }, [rules, parameter]);
+  if (!parameter || parameter.type !== "text") {
+    return null;
+  }
+  const Tag = as || "span";
+  const parameterId = parameter.parameterId;
+  const isContextualEditing = Boolean(parameter._contextualEditing);
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props, children: render(currentValue) });
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Tag,
+    {
+      ...props,
+      ...getParameterAttributes({
+        component,
+        parameter,
+        placeholder: computedPlaceholder,
+        isMultiline
+      }),
+      "data-uniform-parameter-type": "text",
+      "data-uniform-placeholder": computedPlaceholder,
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
+      children: isContextualEditing ? currentValue : render(currentValue)
+    }
+  );
+};
+var getParameterAttributes = ({
+  component,
+  parameter,
+  placeholder,
+  isMultiline = false
+}) => {
+  var _a, _b;
+  const value = parameter == null ? void 0 : parameter.value;
+  const type = parameter == null ? void 0 : parameter.type;
+  const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  return {
+    [import_canvas.ATTRIBUTE_COMPONENT_ID]: component._id,
+    [import_canvas.ATTRIBUTE_PARAMETER_ID]: parameter.parameterId,
+    [import_canvas.ATTRIBUTE_PARAMETER_VALUE]: String(value != null ? value : ""),
+    [import_canvas.ATTRIBUTE_PARAMETER_TYPE]: type,
+    [import_canvas.ATTRIBUTE_PLACEHOLDER]: placeholder,
+    [import_canvas.ATTRIBUTE_MULTILINE]: isMultiline,
+    contentEditable: isEditable,
+    suppressContentEditableWarning: true
+  };
+};
+
+// src/components/ContextUpdateTransfer.tsx
+var import_react6 = require("react");
+var hasKeys = (obj) => Object.keys(obj).length > 0;
+var ContextUpdateTransfer = ({ update }) => {
+  const { context } = useUniformContext();
+  const stableUpdate = useStableValue(update, hasKeys);
+  (0, import_react6.useEffect)(() => {
+    if (context && stableUpdate) {
+      context.update(stableUpdate);
+    }
+  }, [context, stableUpdate]);
+  return null;
+};
+
+// src/components/DefaultUniformClientContext.tsx
+var import_context3 = require("@uniformdev/context");
+var import_navigation2 = require("next/navigation");
+
+// src/context/createUniformContext.ts
+var import_context = require("@uniformdev/context");
+var createUniformContext = ({
+  serverCookieValue,
+  quirkCookieValue,
+  experimental_quirksEnabled,
+  cookieAttributes,
+  ...rest
+}) => {
+  const context = new import_context.Context({
+    ...rest,
+    transitionStore: new import_context.CookieTransitionDataStore({
+      serverCookieValue,
+      quirkCookieValue,
+      cookieAttributes,
+      experimental_quirksEnabled
+    })
+  });
+  return context;
+};
+
+// src/context/createClientUniformContext.ts
+var createClientUniformContext = (options) => {
+  return createUniformContext({
+    ...options,
+    serverCookieValue: void 0
+  });
+};
+
+// src/hooks/useInitUniformContext.ts
+var import_context2 = require("@uniformdev/context");
+var import_next_app_router_shared = require("@uniformdev/next-app-router-shared");
+var import_js_cookie = __toESM(require("js-cookie"));
+var import_navigation = require("next/navigation");
+var import_react7 = require("react");
+var useInitUniformContext = (callback, compositionMetadata) => {
+  const path = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const context = (0, import_react7.useRef)(void 0);
+  if (typeof window !== "undefined" && context.current === void 0) {
+    context.current = callback();
+  }
+  (0, import_react7.useEffect)(() => {
+    var _a;
+    if (typeof window === "undefined" || typeof window.__UNIFORM_CONTEXT__ !== "undefined") {
+      return;
+    }
+    const url = new URL(path, "https://example.com");
+    searchParams.forEach((value, key) => {
+      url.searchParams.set(key, value);
+    });
+    const scoreCookie = import_js_cookie.default.get(import_next_app_router_shared.UNIFORM_MIDDLEWARE_SCORE_COOKIE_NAME);
+    const quirkCookie = import_js_cookie.default.get(import_next_app_router_shared.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
+    const scoreCookieData = (0, import_context2.parseScoreCookie)(scoreCookie, quirkCookie);
+    import_js_cookie.default.remove(import_next_app_router_shared.UNIFORM_MIDDLEWARE_SCORE_COOKIE_NAME);
+    import_js_cookie.default.remove(import_next_app_router_shared.UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
+    context.current.update({
+      url,
+      compositionMetadata,
+      quirks: (_a = scoreCookieData == null ? void 0 : scoreCookieData.quirks) != null ? _a : {}
+    });
+    if (!window.__UNIFORM_CONTEXT__) {
+      window.__UNIFORM_CONTEXT__ = context.current;
+    }
+  }, [path, searchParams, compositionMetadata]);
+};
+
+// src/components/DefaultUniformClientContext.tsx
+var DefaultUniformClientContext = ({
+  manifest,
+  disableDevTools,
+  defaultConsent,
+  experimentalQuirkSerialization,
+  compositionMetadata
+}) => {
+  const router = (0, import_navigation2.useRouter)();
+  useInitUniformContext(() => {
+    const plugins = [];
+    if (!disableDevTools) {
+      plugins.push(
+        (0, import_context3.enableContextDevTools)({
+          onAfterMessageReceived: () => {
+            router.refresh();
+          }
+        })
+      );
+    }
+    return createClientUniformContext({
+      manifest,
+      plugins,
+      defaultConsent,
+      experimental_quirksEnabled: experimentalQuirkSerialization
+    });
+  }, compositionMetadata);
+  return null;
+};
+
+// src/components/Personalize.tsx
+var import_canvas2 = require("@uniformdev/canvas");
+var import_next_app_router_shared2 = require("@uniformdev/next-app-router-shared");
+var import_react9 = require("react");
+
+// src/hooks/useScores.ts
+var import_react8 = require("react");
+function useScores() {
+  const { context } = useUniformContext();
+  const [scores, setScores] = (0, import_react8.useState)(context == null ? void 0 : context.scores);
+  (0, import_react8.useEffect)(() => {
+    if (!context) {
+      return;
+    }
+    const scoringChangeListener = (updatedScores) => {
+      setScores(updatedScores);
+    };
+    setScores(context.scores);
+    context.events.on("scoresUpdated", scoringChangeListener);
+    return () => {
+      context.events.off("scoresUpdated", scoringChangeListener);
+    };
+  }, [context]);
+  return scores;
+}
+
+// src/components/Personalize.tsx
+var Personalize = ({
+  parameters,
+  indexes,
+  slots,
+  context: compositionContext
+}) => {
+  var _a, _b;
+  const trackingEventName = (_a = parameters.trackingEventName) == null ? void 0 : _a.value;
+  const algorithm = (_b = parameters.algorithm) == null ? void 0 : _b.value;
+  const personalizationSlot = slots[import_canvas2.CANVAS_PERSONALIZE_SLOT];
+  const { context } = useUniformContext();
+  const scores = useScores();
+  const quirks = useQuirks();
+  const [indexesToShow, setIndexesToShow] = (0, import_react9.useState)(indexes);
+  (0, import_react9.useEffect)(() => {
+    if (typeof context === "undefined" || !personalizationSlot) {
+      return;
+    }
+    const result = (0, import_next_app_router_shared2.evaluatePersonalization)({
+      context,
+      compositionContext,
+      personalization: {
+        name: trackingEventName != null ? trackingEventName : "unknown",
+        algorithm,
+        variations: personalizationSlot.items.filter(Boolean).map((item, index) => {
+          var _a2;
+          return {
+            index,
+            id: (_a2 = item.variantId) != null ? _a2 : item._id,
+            pz: item.$pzCrit,
+            componentId: item._id
+          };
+        }),
+        compositionMetadata: {
+          compositionId: compositionContext._id,
+          matchedRoute: compositionContext.matchedRoute,
+          dynamicInputs: compositionContext.dynamicInputs
+        }
+      }
+    });
+    if (JSON.stringify(result.indexes) !== JSON.stringify(indexesToShow)) {
+      setIndexesToShow(result.indexes);
+    }
+  }, [
+    trackingEventName,
+    context,
+    personalizationSlot,
+    algorithm,
+    compositionContext,
+    scores,
+    quirks,
+    indexesToShow
+  ]);
+  const slotsToShow = (0, import_react9.useMemo)(() => {
+    return indexesToShow.map((key) => {
+      var _a2;
+      return (_a2 = personalizationSlot == null ? void 0 : personalizationSlot.items[key]) == null ? void 0 : _a2.component;
+    });
+  }, [indexesToShow, personalizationSlot]);
+  return (0, import_react9.createElement)(import_react9.Fragment, void 0, slotsToShow);
+};
+
+// src/components/UniformScript.tsx
+var import_canvas3 = require("@uniformdev/canvas");
+var import_navigation3 = require("next/navigation");
+var import_react10 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UniformScript = () => {
+  const router = (0, import_navigation3.useRouter)();
+  const needsToRefreshRef = (0, import_react10.useRef)(false);
+  const channel = (0, import_react10.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_react10.useEffect)(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribeFromEditorUpdates = channel.on("editor-state-updated", () => {
+      const el = document.activeElement;
+      const isActiveElementEditable = el == null ? void 0 : el.isContentEditable;
+      if (!isActiveElementEditable) {
+        router.refresh();
+      } else {
+        needsToRefreshRef.current = true;
+      }
+    });
+    return () => {
+      unsubscribeFromEditorUpdates();
+    };
+  }, [channel, router]);
+  (0, import_react10.useEffect)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const existing = document.getElementById("uniform-script");
+    if (!existing) {
+      const textHost = (0, import_canvas3.isAllowedReferrer)(window.document.referrer) ? window.document.referrer : "https://uniform.app/";
+      window.__UNIFORM_CONTEXTUAL_EDITING__ = {
+        framework: "React",
+        version: 2
+      };
+      const bundleHost = new URL(textHost);
+      bundleHost.pathname = "/files/canvas-in-context-embed/index.js";
+      const script = document.createElement("script");
+      script.id = "uniform-script";
+      script.setAttribute("data-rsc", "true");
+      script.src = bundleHost.toString();
+      script.async = true;
+      document.head.appendChild(script);
+    }
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    const handleBlurChange = () => {
+      if (needsToRefreshRef.current) {
+        router.refresh();
+        needsToRefreshRef.current = false;
+      }
+    };
+    document.addEventListener("blur", handleBlurChange, true);
+    return () => {
+      document.removeEventListener("focus", handleBlurChange, true);
+    };
+  }, [router]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+};
+
+// src/components/VisibilityRulesWrapperClient.tsx
+var import_canvas4 = require("@uniformdev/canvas");
+var import_react11 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var VisibilityRulesWrapperClient = ({
+  parameter,
+  initialIsVisible,
+  children
+}) => {
+  const [isVisible, setIsVisible] = (0, import_react11.useState)(initialIsVisible);
+  const [visibleSource, setVisibleSource] = (0, import_react11.useState)(
+    initialIsVisible === null ? "unknown" : "server"
+  );
+  const quirks = useQuirks();
+  const rules = (0, import_react11.useMemo)(() => {
+    return {
+      ...(0, import_canvas4.createQuirksVisibilityRule)(quirks)
+    };
+  }, [quirks]);
+  (0, import_react11.useEffect)(() => {
+    const result = (0, import_canvas4.evaluateNodeVisibilityParameter)({
+      rules,
+      parameter
+    });
+    if (visibleSource === "server" && initialIsVisible && !result) {
+      return;
+    }
+    setIsVisible(result);
+    setVisibleSource("client");
+  }, [initialIsVisible, visibleSource, parameter, rules]);
+  return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClientContextTestTransfer,
+  ClientUniformText,
+  ContextUpdateTransfer,
+  DefaultUniformClientContext,
+  Personalize,
+  UniformScript,
+  VisibilityRulesWrapperClient,
+  createClientUniformContext,
+  useInitUniformContext,
+  useQuirks,
+  useScores,
+  useUniformContext
+});