@preprio/toolkit 0.1.0-beta.1 → 0.1.0-beta.4

package/dist/nuxt/index.js

@@ -0,0 +1,362 @@
+// src/version.ts
+var VERSION = "0.1.0-beta.4";
+
+// src/core/constants.ts
+var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
+var COOKIE_SEGMENT = "Prepr-Segments";
+var COOKIE_VARIANT = "Prepr-ABtesting";
+var COOKIE_UID = "__prepr_uid";
+var COOKIE_HUBSPOT = "hubspotutk";
+var PARAM_SEGMENT = "prepr_preview_segment";
+var PARAM_VARIANT = "prepr_preview_ab";
+var PARAM_HIDE_BAR = "prepr_hide_bar";
+var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+
+// src/core/middleware.ts
+var UTM_PARAMS = [
+  "utm_source",
+  "utm_medium",
+  "utm_term",
+  "utm_content",
+  "utm_campaign"
+];
+function serializeCookie(cookie) {
+  const parts = [
+    `${cookie.name}=${encodeURIComponent(cookie.value)}`,
+    `Max-Age=${cookie.maxAge}`,
+    `Path=${cookie.path}`
+  ];
+  if (cookie.sameSite) {
+    parts.push(`SameSite=${cookie.sameSite}`);
+  }
+  if (cookie.secure) {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
+function parseCookies(request) {
+  const cookies = /* @__PURE__ */ new Map();
+  const header = request.headers.get("cookie");
+  if (!header) return cookies;
+  for (const part of header.split(";")) {
+    const eq = part.indexOf("=");
+    if (eq === -1) continue;
+    const name = part.slice(0, eq).trim();
+    const value = part.slice(eq + 1).trim();
+    if (!name) continue;
+    cookies.set(name, decodeURIComponent(value));
+  }
+  return cookies;
+}
+function processPreprRequest(request, opts) {
+  const requestHeaders = new Headers(request.headers);
+  const responseCookies = [];
+  const requestCookies = parseCookies(request);
+  const url = new URL(request.url);
+  const searchParams = url.searchParams;
+  const forwardedProto = request.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
+  const isSecure = forwardedProto ? forwardedProto === "https" : url.protocol === "https:";
+  const crossSite = isSecure ? { sameSite: "None", secure: true } : {};
+  for (const key of UTM_PARAMS) {
+    const value = searchParams.get(key);
+    if (value !== null) {
+      requestHeaders.set(`Prepr-Context-${key}`, value);
+    }
+  }
+  const referer = request.headers.get("referer");
+  if (referer) {
+    requestHeaders.set("Prepr-Context-initial_referral", referer);
+  }
+  const userAgent = request.headers.get("user-agent");
+  if (userAgent) {
+    requestHeaders.set("Prepr-User-Agent", userAgent);
+  }
+  requestHeaders.set("Prepr-Package", `@preprio/toolkit@${opts?.version ?? VERSION}`);
+  const ip = request.headers.get("Cf-Connecting-Ip") ?? request.headers.get("x-real-ip");
+  if (ip) {
+    requestHeaders.set("Prepr-Visitor-IP", ip);
+  }
+  const hutkCookie = requestCookies.get(COOKIE_HUBSPOT);
+  if (hutkCookie) {
+    requestHeaders.set("Prepr-Hubspot-Id", hutkCookie);
+  }
+  let uid = requestCookies.get(COOKIE_UID);
+  if (!uid) {
+    uid = crypto.randomUUID();
+    responseCookies.push({
+      name: COOKIE_UID,
+      value: uid,
+      maxAge: ONE_YEAR_SECONDS,
+      path: "/"
+    });
+    requestHeaders.set("Prepr-Customer-Id-Created", "true");
+  }
+  requestHeaders.set("Prepr-Customer-Id", uid);
+  if (!opts?.preview) {
+    return { requestHeaders, responseCookies };
+  }
+  const hasPreviewParams = searchParams.has(PARAM_SEGMENT) || searchParams.has(PARAM_VARIANT);
+  if (!hasPreviewParams) {
+    const previewModeCookie = requestCookies.get(COOKIE_PREVIEW_MODE);
+    const previewModeEnabled = previewModeCookie !== "false";
+    if (!previewModeEnabled) {
+      return { requestHeaders, responseCookies };
+    }
+  }
+  requestHeaders.set("Prepr-Preview-Bar", "true");
+  const isLivePreview = searchParams.get(PARAM_HIDE_BAR) === "true";
+  if (!isLivePreview && !requestCookies.has(COOKIE_PREVIEW_MODE)) {
+    responseCookies.push({
+      name: COOKIE_PREVIEW_MODE,
+      value: "true",
+      maxAge: ONE_YEAR_SECONDS,
+      path: "/",
+      ...crossSite
+    });
+  }
+  if (!isLivePreview) {
+    const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
+    if (segmentCookie) {
+      requestHeaders.set("Prepr-Segments", segmentCookie);
+    }
+    const abCookie = requestCookies.get(COOKIE_VARIANT);
+    if (abCookie) {
+      requestHeaders.set("Prepr-ABtesting", abCookie);
+    }
+  }
+  const previewAb = searchParams.get(PARAM_VARIANT);
+  if (previewAb !== null) {
+    requestHeaders.set("Prepr-ABtesting", previewAb);
+    if (!isLivePreview) {
+      responseCookies.push({
+        name: COOKIE_VARIANT,
+        value: previewAb,
+        maxAge: ONE_YEAR_SECONDS,
+        path: "/",
+        ...crossSite
+      });
+    }
+  }
+  const previewSegment = searchParams.get(PARAM_SEGMENT);
+  if (previewSegment !== null) {
+    requestHeaders.set("Prepr-Segments", previewSegment);
+    if (!isLivePreview) {
+      responseCookies.push({
+        name: COOKIE_SEGMENT,
+        value: previewSegment,
+        maxAge: ONE_YEAR_SECONDS,
+        path: "/",
+        ...crossSite
+      });
+    }
+  }
+  return { requestHeaders, responseCookies };
+}
+
+// src/nuxt/middleware.ts
+var PREPR_CONTEXT_KEY = "prepr";
+function handlePreprRequest(event, options) {
+  const req = event.node.req;
+  const host = typeof req.headers.host === "string" ? req.headers.host : "localhost";
+  const request = new Request(`http://${host}${req.url ?? "/"}`);
+  for (const [key, value] of Object.entries(req.headers)) {
+    if (typeof value === "string") {
+      request.headers.set(key, value);
+    } else if (Array.isArray(value)) {
+      request.headers.set(key, value.join(", "));
+    }
+  }
+  const { requestHeaders, responseCookies } = processPreprRequest(request, options);
+  requestHeaders.forEach((value, key) => {
+    req.headers[key.toLowerCase()] = value;
+  });
+  event.context[PREPR_CONTEXT_KEY] = requestHeaders;
+  for (const cookie of responseCookies) {
+    event.node.res.appendHeader("Set-Cookie", serializeCookie(cookie));
+  }
+}
+function getPreprHeadersFromEvent(event) {
+  const headers = event.context[PREPR_CONTEXT_KEY];
+  return headers instanceof Headers ? headers : new Headers();
+}
+
+// src/core/server.ts
+var PreprError = class extends Error {
+  constructor(message, code, context, originalError) {
+    super(message);
+    this.code = code;
+    this.context = context;
+    this.originalError = originalError;
+    this.name = "PreprError";
+  }
+};
+function getPreprUUIDFromHeaders(headers) {
+  return headers.get("prepr-customer-id");
+}
+function getActiveSegmentFromHeaders(headers) {
+  return headers.get("Prepr-Segments");
+}
+function getActiveVariantFromHeaders(headers) {
+  return headers.get("Prepr-ABtesting");
+}
+var PREPR_HEADER_KEYS = [
+  "prepr-customer-id",
+  "Prepr-Segments",
+  "Prepr-ABtesting",
+  "Prepr-Preview-Bar",
+  "Prepr-Context-utm_source",
+  "Prepr-Context-utm_medium",
+  "Prepr-Context-utm_term",
+  "Prepr-Context-utm_content",
+  "Prepr-Context-utm_campaign",
+  "Prepr-Context-initial_referral",
+  "Prepr-Visitor-IP",
+  "Prepr-Hubspot-Id",
+  "Prepr-Customer-Id-Created",
+  "Prepr-User-Agent"
+];
+function getPreprHeadersFromHeaders(headers) {
+  const preprHeaders = {};
+  const copy = (key) => {
+    const value = headers.get(key);
+    if (value !== null) {
+      preprHeaders[key] = value;
+    }
+  };
+  for (const key of PREPR_HEADER_KEYS) {
+    copy(key);
+  }
+  return preprHeaders;
+}
+function validatePreprToken(token) {
+  if (!token) {
+    throw new PreprError("Token is required", "MISSING_TOKEN", "validatePreprToken");
+  }
+  if (!token.startsWith("https://")) {
+    throw new PreprError(
+      "Token must be a valid HTTPS URL",
+      "INVALID_TOKEN",
+      "validatePreprToken"
+    );
+  }
+}
+function extractAccessToken(graphqlUrl) {
+  let url;
+  try {
+    url = new URL(graphqlUrl);
+  } catch (error) {
+    throw new PreprError(
+      "Token must be a valid URL",
+      "INVALID_TOKEN",
+      "extractAccessToken",
+      error instanceof Error ? error : new Error(String(error))
+    );
+  }
+  if (url.hostname !== "graphql.prepr.io") {
+    throw new PreprError(
+      "Token must be a graphql.prepr.io URL",
+      "INVALID_TOKEN",
+      "extractAccessToken"
+    );
+  }
+  const pathParts = url.pathname.split("/");
+  const token = pathParts[pathParts.length - 1];
+  if (!token) {
+    throw new PreprError(
+      "Token URL is missing an access token segment",
+      "INVALID_TOKEN",
+      "extractAccessToken"
+    );
+  }
+  return token;
+}
+async function getPreprEnvironmentSegments(token) {
+  validatePreprToken(token);
+  try {
+    const response = await fetch(token, {
+      headers: {
+        "User-Agent": `Prepr-Preview-Bar/${VERSION}`,
+        "Content-Type": "application/json"
+      },
+      method: "POST",
+      body: JSON.stringify({
+        query: `{
+                _Segments {
+                    _id
+                    name
+                }
+            }`
+      })
+    });
+    if (!response.ok) {
+      throw new PreprError(
+        `HTTP ${response.status}: ${response.statusText}`,
+        "HTTP_ERROR",
+        "getPreprEnvironmentSegments"
+      );
+    }
+    const json = await response.json();
+    if (!json || !json.data || !json.data._Segments) {
+      throw new PreprError(
+        "Invalid response format from Prepr API",
+        "INVALID_RESPONSE",
+        "getPreprEnvironmentSegments"
+      );
+    }
+    return json.data._Segments;
+  } catch (error) {
+    if (error instanceof PreprError) {
+      throw error;
+    }
+    throw new PreprError(
+      "Failed to fetch segments from Prepr API",
+      "FETCH_ERROR",
+      "getPreprEnvironmentSegments",
+      error instanceof Error ? error : new Error(String(error))
+    );
+  }
+}
+async function getToolbarPropsFromHeaders(headers, token) {
+  let segments = [];
+  try {
+    segments = await getPreprEnvironmentSegments(token);
+  } catch {
+    segments = [];
+  }
+  return {
+    activeSegment: getActiveSegmentFromHeaders(headers),
+    activeVariant: getActiveVariantFromHeaders(headers),
+    segments,
+    data: segments
+  };
+}
+
+// src/nuxt/server.ts
+function getPreprUUID(headers) {
+  return getPreprUUIDFromHeaders(headers);
+}
+function getActiveSegment(headers) {
+  return getActiveSegmentFromHeaders(headers);
+}
+function getActiveVariant(headers) {
+  return getActiveVariantFromHeaders(headers);
+}
+function getPreprHeaders(headers) {
+  return getPreprHeadersFromHeaders(headers);
+}
+async function getToolbarProps(headers, token) {
+  return getToolbarPropsFromHeaders(headers, token);
+}
+export {
+  PREPR_CONTEXT_KEY,
+  PreprError,
+  extractAccessToken,
+  getActiveSegment,
+  getActiveVariant,
+  getPreprHeaders,
+  getPreprHeadersFromEvent,
+  getPreprUUID,
+  getToolbarProps,
+  handlePreprRequest,
+  validatePreprToken
+};

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.1";
+var VERSION = "0.1.0-beta.4";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -56,6 +56,20 @@ var UTM_PARAMS = [
   "utm_content",
   "utm_campaign"
 ];
+function serializeCookie(cookie) {
+  const parts = [
+    `${cookie.name}=${encodeURIComponent(cookie.value)}`,
+    `Max-Age=${cookie.maxAge}`,
+    `Path=${cookie.path}`
+  ];
+  if (cookie.sameSite) {
+    parts.push(`SameSite=${cookie.sameSite}`);
+  }
+  if (cookie.secure) {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
 function parseCookies(request) {
   const cookies = /* @__PURE__ */ new Map();
   const header = request.headers.get("cookie");
@@ -74,7 +88,11 @@ function processPreprRequest(request, opts) {
   const requestHeaders = new Headers(request.headers);
   const responseCookies = [];
   const requestCookies = parseCookies(request);
-  const searchParams = new URL(request.url).searchParams;
+  const url = new URL(request.url);
+  const searchParams = url.searchParams;
+  const forwardedProto = request.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
+  const isSecure = forwardedProto ? forwardedProto === "https" : url.protocol === "https:";
+  const crossSite = isSecure ? { sameSite: "None", secure: true } : {};
   for (const key of UTM_PARAMS) {
     const value = searchParams.get(key);
     if (value !== null) {
@@ -123,6 +141,15 @@ function processPreprRequest(request, opts) {
   }
   requestHeaders.set("Prepr-Preview-Bar", "true");
   const isLivePreview = searchParams.get(PARAM_HIDE_BAR) === "true";
+  if (!isLivePreview && !requestCookies.has(COOKIE_PREVIEW_MODE)) {
+    responseCookies.push({
+      name: COOKIE_PREVIEW_MODE,
+      value: "true",
+      maxAge: ONE_YEAR_SECONDS,
+      path: "/",
+      ...crossSite
+    });
+  }
   if (!isLivePreview) {
     const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
     if (segmentCookie) {
@@ -141,7 +168,8 @@ function processPreprRequest(request, opts) {
         name: COOKIE_VARIANT,
         value: previewAb,
         maxAge: ONE_YEAR_SECONDS,
-        path: "/"
+        path: "/",
+        ...crossSite
       });
     }
   }
@@ -153,7 +181,8 @@ function processPreprRequest(request, opts) {
         name: COOKIE_SEGMENT,
         value: previewSegment,
         maxAge: ONE_YEAR_SECONDS,
-        path: "/"
+        path: "/",
+        ...crossSite
       });
     }
   }
@@ -173,12 +202,7 @@ function preprHandle(options) {
     }
     const response = await resolve(event);
     for (const cookie of responseCookies) {
-      const parts = [
-        `${cookie.name}=${encodeURIComponent(cookie.value)}`,
-        `Max-Age=${cookie.maxAge}`,
-        `Path=${cookie.path}`
-      ];
-      response.headers.append("Set-Cookie", parts.join("; "));
+      response.headers.append("Set-Cookie", serializeCookie(cookie));
     }
     return response;
   };

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.1";
+var VERSION = "0.1.0-beta.4";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
@@ -20,6 +20,20 @@ var UTM_PARAMS = [
   "utm_content",
   "utm_campaign"
 ];
+function serializeCookie(cookie) {
+  const parts = [
+    `${cookie.name}=${encodeURIComponent(cookie.value)}`,
+    `Max-Age=${cookie.maxAge}`,
+    `Path=${cookie.path}`
+  ];
+  if (cookie.sameSite) {
+    parts.push(`SameSite=${cookie.sameSite}`);
+  }
+  if (cookie.secure) {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
 function parseCookies(request) {
   const cookies = /* @__PURE__ */ new Map();
   const header = request.headers.get("cookie");
@@ -38,7 +52,11 @@ function processPreprRequest(request, opts) {
   const requestHeaders = new Headers(request.headers);
   const responseCookies = [];
   const requestCookies = parseCookies(request);
-  const searchParams = new URL(request.url).searchParams;
+  const url = new URL(request.url);
+  const searchParams = url.searchParams;
+  const forwardedProto = request.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
+  const isSecure = forwardedProto ? forwardedProto === "https" : url.protocol === "https:";
+  const crossSite = isSecure ? { sameSite: "None", secure: true } : {};
   for (const key of UTM_PARAMS) {
     const value = searchParams.get(key);
     if (value !== null) {
@@ -87,6 +105,15 @@ function processPreprRequest(request, opts) {
   }
   requestHeaders.set("Prepr-Preview-Bar", "true");
   const isLivePreview = searchParams.get(PARAM_HIDE_BAR) === "true";
+  if (!isLivePreview && !requestCookies.has(COOKIE_PREVIEW_MODE)) {
+    responseCookies.push({
+      name: COOKIE_PREVIEW_MODE,
+      value: "true",
+      maxAge: ONE_YEAR_SECONDS,
+      path: "/",
+      ...crossSite
+    });
+  }
   if (!isLivePreview) {
     const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
     if (segmentCookie) {
@@ -105,7 +132,8 @@ function processPreprRequest(request, opts) {
         name: COOKIE_VARIANT,
         value: previewAb,
         maxAge: ONE_YEAR_SECONDS,
-        path: "/"
+        path: "/",
+        ...crossSite
       });
     }
   }
@@ -117,7 +145,8 @@ function processPreprRequest(request, opts) {
         name: COOKIE_SEGMENT,
         value: previewSegment,
         maxAge: ONE_YEAR_SECONDS,
-        path: "/"
+        path: "/",
+        ...crossSite
       });
     }
   }
@@ -137,12 +166,7 @@ function preprHandle(options) {
     }
     const response = await resolve(event);
     for (const cookie of responseCookies) {
-      const parts = [
-        `${cookie.name}=${encodeURIComponent(cookie.value)}`,
-        `Max-Age=${cookie.maxAge}`,
-        `Path=${cookie.path}`
-      ];
-      response.headers.append("Set-Cookie", parts.join("; "));
+      response.headers.append("Set-Cookie", serializeCookie(cookie));
     }
     return response;
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.1.0-beta.1",
-  "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Astro, SvelteKit and Express",
+  "version": "0.1.0-beta.4",
+  "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Nuxt, Astro, SvelteKit and Express",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,12 +39,19 @@
       "import": "./dist/sveltekit/index.js",
       "require": "./dist/sveltekit/index.cjs"
     },
-    "./sveltekit/components/*": "./src/sveltekit/*.svelte"
+    "./sveltekit/components/*": "./src/sveltekit/*.svelte",
+    "./nuxt": {
+      "types": "./dist/nuxt/index.d.ts",
+      "import": "./dist/nuxt/index.js",
+      "require": "./dist/nuxt/index.cjs"
+    },
+    "./nuxt/components/*": "./src/nuxt/*.vue"
   },
   "files": [
     "dist",
     "src/astro/*.astro",
-    "src/sveltekit/*.svelte"
+    "src/sveltekit/*.svelte",
+    "src/nuxt/*.vue"
   ],
   "dependencies": {
     "@vercel/stega": "^1.1.0",

package/src/nuxt/PreprToolbar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * Mounts the Prepr toolbar custom element (and stega edit mode); renders
+ * nothing itself. `onMounted` keeps it off the SSR path.
+ *
+ * Ships as source — the consumer's Vite/Vue pipeline compiles this, not our
+ * tsup build. See the `./nuxt/components/*` export in package.json.
+ */
+import { onMounted, onUnmounted } from 'vue';
+import { createPreprToolbar } from '@preprio/toolkit';
+import type { PreprToolbarProps } from '@preprio/toolkit';
+
+const props = defineProps<{
+  activeSegment: PreprToolbarProps['activeSegment'];
+  activeVariant: PreprToolbarProps['activeVariant'];
+  segments?: PreprToolbarProps['segments'];
+  data?: PreprToolbarProps['data'];
+}>();
+
+let controller: ReturnType<typeof createPreprToolbar> | null = null;
+
+onMounted(() => {
+  controller = createPreprToolbar({
+    props: {
+      activeSegment: props.activeSegment,
+      activeVariant: props.activeVariant,
+      segments: props.segments,
+      data: props.data,
+    },
+  });
+});
+
+onUnmounted(() => controller?.destroy());
+</script>
+
+<template>
+  <!-- renders nothing; the toolbar is a custom element mounted imperatively -->
+</template>

package/src/nuxt/PreprTrackingPixel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Loads Prepr's CDN tracking pixel client-side via `loadTrackingPixel`
+ * (core). Renders nothing visible. Ships as SOURCE — see PreprToolbar.vue.
+ */
+import { onMounted } from 'vue';
+import { loadTrackingPixel } from '@preprio/toolkit';
+
+const props = defineProps<{
+  id: string;
+  config?: {
+    destinations?: { googleTagManager?: boolean };
+    variantImpressionThreshold?: number;
+  };
+}>();
+
+onMounted(() => {
+  loadTrackingPixel(props.id, props.config ?? undefined);
+});
+</script>
+
+<template>
+  <!-- renders nothing; the pixel is injected as a script tag -->
+</template>