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

package/dist/index.mjs

@@ -0,0 +1,521 @@
+"use client";
+
+// src/components/ClientContextTestTransfer.tsx
+import { useEffect as useEffect3 } from "react";
+
+// src/hooks/useStableValue.ts
+import { useEffect, useRef, useState } from "react";
+var useStableValue = (value, isValid) => {
+  const previousRef = useRef(null);
+  const [stableValue, setStableValue] = useState(void 0);
+  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
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var useUniformContext = () => {
+  const [context, setContext] = useState2(
+    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 = useRef2(null);
+  useEffect2(() => {
+    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);
+  useEffect3(() => {
+    if (context && stableEvent) {
+      context.internal_processTestEvent(stableEvent);
+    }
+  }, [context, stableEvent]);
+  return null;
+};
+
+// src/components/ClientUniformText.tsx
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_MULTILINE,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE,
+  ATTRIBUTE_PARAMETER_VALUE,
+  ATTRIBUTE_PLACEHOLDER,
+  createQuirksVisibilityRule,
+  evaluatePropertyCriteria
+} from "@uniformdev/canvas";
+import { useMemo } from "react";
+
+// src/hooks/useQuirks.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+function useQuirks() {
+  var _a;
+  const { context } = useUniformContext();
+  const [quirks, setQuirks] = useState3((_a = context == null ? void 0 : context.quirks) != null ? _a : {});
+  useEffect4(() => {
+    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
+import { jsx } from "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 = useMemo(() => {
+    return {
+      ...createQuirksVisibilityRule(quirks)
+    };
+  }, [quirks]);
+  const currentValue = useMemo(() => {
+    var _a;
+    if (!parameter) {
+      return void 0;
+    }
+    if (!rules.length || !((_a = parameter.conditions) == null ? void 0 : _a.length)) {
+      return parameter.value;
+    }
+    const match = 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__ */ jsx(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props, children: render(currentValue) });
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  return /* @__PURE__ */ 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 {
+    [ATTRIBUTE_COMPONENT_ID]: component._id,
+    [ATTRIBUTE_PARAMETER_ID]: parameter.parameterId,
+    [ATTRIBUTE_PARAMETER_VALUE]: String(value != null ? value : ""),
+    [ATTRIBUTE_PARAMETER_TYPE]: type,
+    [ATTRIBUTE_PLACEHOLDER]: placeholder,
+    [ATTRIBUTE_MULTILINE]: isMultiline,
+    contentEditable: isEditable,
+    suppressContentEditableWarning: true
+  };
+};
+
+// src/components/ContextUpdateTransfer.tsx
+import { useEffect as useEffect5 } from "react";
+var hasKeys = (obj) => Object.keys(obj).length > 0;
+var ContextUpdateTransfer = ({ update }) => {
+  const { context } = useUniformContext();
+  const stableUpdate = useStableValue(update, hasKeys);
+  useEffect5(() => {
+    if (context && stableUpdate) {
+      context.update(stableUpdate);
+    }
+  }, [context, stableUpdate]);
+  return null;
+};
+
+// src/components/DefaultUniformClientContext.tsx
+import { enableContextDevTools } from "@uniformdev/context";
+import { useRouter } from "next/navigation";
+
+// src/context/createUniformContext.ts
+import {
+  Context,
+  CookieTransitionDataStore
+} from "@uniformdev/context";
+var createUniformContext = ({
+  serverCookieValue,
+  quirkCookieValue,
+  experimental_quirksEnabled,
+  cookieAttributes,
+  ...rest
+}) => {
+  const context = new Context({
+    ...rest,
+    transitionStore: new 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
+import { parseScoreCookie } from "@uniformdev/context";
+import {
+  UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME,
+  UNIFORM_MIDDLEWARE_SCORE_COOKIE_NAME
+} from "@uniformdev/next-app-router-shared";
+import Cookies from "js-cookie";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+var useInitUniformContext = (callback, compositionMetadata) => {
+  const path = usePathname();
+  const searchParams = useSearchParams();
+  const context = useRef3(void 0);
+  if (typeof window !== "undefined" && context.current === void 0) {
+    context.current = callback();
+  }
+  useEffect6(() => {
+    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 = Cookies.get(UNIFORM_MIDDLEWARE_SCORE_COOKIE_NAME);
+    const quirkCookie = Cookies.get(UNIFORM_MIDDLEWARE_QUIRK_COOKIE_NAME);
+    const scoreCookieData = parseScoreCookie(scoreCookie, quirkCookie);
+    Cookies.remove(UNIFORM_MIDDLEWARE_SCORE_COOKIE_NAME);
+    Cookies.remove(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 = useRouter();
+  useInitUniformContext(() => {
+    const plugins = [];
+    if (!disableDevTools) {
+      plugins.push(
+        enableContextDevTools({
+          onAfterMessageReceived: () => {
+            router.refresh();
+          }
+        })
+      );
+    }
+    return createClientUniformContext({
+      manifest,
+      plugins,
+      defaultConsent,
+      experimental_quirksEnabled: experimentalQuirkSerialization
+    });
+  }, compositionMetadata);
+  return null;
+};
+
+// src/components/Personalize.tsx
+import { CANVAS_PERSONALIZE_SLOT } from "@uniformdev/canvas";
+import { evaluatePersonalization } from "@uniformdev/next-app-router-shared";
+import { createElement, Fragment, useEffect as useEffect8, useMemo as useMemo2, useState as useState5 } from "react";
+
+// src/hooks/useScores.ts
+import { useEffect as useEffect7, useState as useState4 } from "react";
+function useScores() {
+  const { context } = useUniformContext();
+  const [scores, setScores] = useState4(context == null ? void 0 : context.scores);
+  useEffect7(() => {
+    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[CANVAS_PERSONALIZE_SLOT];
+  const { context } = useUniformContext();
+  const scores = useScores();
+  const quirks = useQuirks();
+  const [indexesToShow, setIndexesToShow] = useState5(indexes);
+  useEffect8(() => {
+    if (typeof context === "undefined" || !personalizationSlot) {
+      return;
+    }
+    const result = 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 = useMemo2(() => {
+    return indexesToShow.map((key) => {
+      var _a2;
+      return (_a2 = personalizationSlot == null ? void 0 : personalizationSlot.items[key]) == null ? void 0 : _a2.component;
+    });
+  }, [indexesToShow, personalizationSlot]);
+  return createElement(Fragment, void 0, slotsToShow);
+};
+
+// src/components/UniformScript.tsx
+import { createCanvasChannel, isAllowedReferrer } from "@uniformdev/canvas";
+import { useRouter as useRouter2 } from "next/navigation";
+import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var UniformScript = () => {
+  const router = useRouter2();
+  const needsToRefreshRef = useRef4(false);
+  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;
+  }, []);
+  useEffect9(() => {
+    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]);
+  useEffect9(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const existing = document.getElementById("uniform-script");
+    if (!existing) {
+      const textHost = 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);
+    }
+  }, []);
+  useEffect9(() => {
+    const handleBlurChange = () => {
+      if (needsToRefreshRef.current) {
+        router.refresh();
+        needsToRefreshRef.current = false;
+      }
+    };
+    document.addEventListener("blur", handleBlurChange, true);
+    return () => {
+      document.removeEventListener("focus", handleBlurChange, true);
+    };
+  }, [router]);
+  return /* @__PURE__ */ jsx2(Fragment2, {});
+};
+
+// src/components/VisibilityRulesWrapperClient.tsx
+import {
+  createQuirksVisibilityRule as createQuirksVisibilityRule2,
+  evaluateNodeVisibilityParameter
+} from "@uniformdev/canvas";
+import { useEffect as useEffect10, useMemo as useMemo4, useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
+var VisibilityRulesWrapperClient = ({
+  parameter,
+  initialIsVisible,
+  children
+}) => {
+  const [isVisible, setIsVisible] = useState6(initialIsVisible);
+  const [visibleSource, setVisibleSource] = useState6(
+    initialIsVisible === null ? "unknown" : "server"
+  );
+  const quirks = useQuirks();
+  const rules = useMemo4(() => {
+    return {
+      ...createQuirksVisibilityRule2(quirks)
+    };
+  }, [quirks]);
+  useEffect10(() => {
+    const result = evaluateNodeVisibilityParameter({
+      rules,
+      parameter
+    });
+    if (visibleSource === "server" && initialIsVisible && !result) {
+      return;
+    }
+    setIsVisible(result);
+    setVisibleSource("client");
+  }, [initialIsVisible, visibleSource, parameter, rules]);
+  return isVisible ? /* @__PURE__ */ jsx3(Fragment3, { children }) : null;
+};
+export {
+  ClientContextTestTransfer,
+  ClientUniformText,
+  ContextUpdateTransfer,
+  DefaultUniformClientContext,
+  Personalize,
+  UniformScript,
+  VisibilityRulesWrapperClient,
+  createClientUniformContext,
+  useInitUniformContext,
+  useQuirks,
+  useScores,
+  useUniformContext
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@uniformdev/next-app-router-client",
+  "version": "20.7.1-alpha.118+5483f1e4cc",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.{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/js-cookie": "3.0.6",
+    "@types/node": "20.19.25",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "next": "16.0.7",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "typescript": "5.9.2"
+  },
+  "dependencies": {
+    "@uniformdev/canvas": "20.7.1-alpha.118+5483f1e4cc",
+    "@uniformdev/canvas-react": "20.7.1-alpha.118+5483f1e4cc",
+    "@uniformdev/context": "20.7.1-alpha.118+5483f1e4cc",
+    "@uniformdev/next-app-router-shared": "20.7.1-alpha.118+5483f1e4cc",
+    "js-cookie": "3.0.5"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "next": ">=16.0.7",
+    "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+    "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "5483f1e4ccb621d21848f58878cda17f14a86dea"
+}