@preprio/toolkit 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.3";
+var VERSION = "0.1.0-beta.5";
 
 // 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,8 +1,28 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Nuxt, Astro, SvelteKit and Express",
-  "license": "MIT",
+  "license": "Apache-2.0",
+  "author": "Prepr B.V. (https://prepr.io)",
+  "keywords": [
+    "prepr",
+    "cms",
+    "headless-cms",
+    "personalization",
+    "ab-testing",
+    "preview",
+    "visual-editing",
+    "nextjs",
+    "nuxt",
+    "astro",
+    "sveltekit"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.17"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/preprio/prepr-toolkit.git",
@@ -23,6 +43,16 @@
       "import": "./dist/nextjs/index.js",
       "require": "./dist/nextjs/index.cjs"
     },
+    "./json-script": {
+      "types": "./dist/json-script.d.ts",
+      "import": "./dist/json-script.js",
+      "require": "./dist/json-script.cjs"
+    },
+    "./nextjs/components": {
+      "types": "./dist/nextjs/components.d.ts",
+      "import": "./dist/nextjs/components.js",
+      "require": "./dist/nextjs/components.cjs"
+    },
     "./nextjs/image-loader": {
       "types": "./dist/nextjs/image-loader.d.ts",
       "import": "./dist/nextjs/image-loader.js",
@@ -53,6 +83,16 @@
     "src/sveltekit/*.svelte",
     "src/nuxt/*.vue"
   ],
+  "scripts": {
+    "gen:css": "node scripts/compile-css.mjs",
+    "prebuild": "rm -rf dist && pnpm gen:css && node scripts/check-version.mjs",
+    "pretest": "pnpm gen:css",
+    "pretypecheck": "pnpm gen:css",
+    "build": "tsup",
+    "postbuild": "node scripts/check-exports.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
     "@vercel/stega": "^1.1.0",
     "preact": "^10.29.7"
@@ -60,7 +100,9 @@
   "peerDependencies": {
     "next": ">=13",
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "svelte": ">=4",
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -71,6 +113,12 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -86,15 +134,5 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10"
-  },
-  "scripts": {
-    "gen:css": "node scripts/compile-css.mjs",
-    "prebuild": "rm -rf dist && pnpm gen:css && node scripts/check-version.mjs",
-    "pretest": "pnpm gen:css",
-    "pretypecheck": "pnpm gen:css",
-    "build": "tsup",
-    "postbuild": "node scripts/check-exports.mjs",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/astro/PreprToolbar.astro

@@ -29,6 +29,7 @@
  * data shape of primitives/arrays.)
  */
 import type { PreprToolbarProps } from '@preprio/toolkit';
+import { serializeForScriptTag } from '@preprio/toolkit/json-script';
 
 type Props = PreprToolbarProps;
 
@@ -40,7 +41,7 @@ const props = { activeSegment, activeVariant, segments: segments ?? data ?? [] }
 <script
   type="application/json"
   data-prepr-toolbar-props
-  set:html={JSON.stringify(props)}
+  set:html={serializeForScriptTag(props)}
 />
 
 <script>

package/src/astro/PreprTrackingPixel.astro

@@ -14,6 +14,8 @@
  * from '@preprio/toolkit'` would fail to resolve in the browser. See
  * `PreprToolbar.astro` for the full explanation.
  */
+import { serializeForScriptTag } from '@preprio/toolkit/json-script';
+
 interface Props {
   id: string;
   config?: {
@@ -34,7 +36,7 @@ const payload = { id, config };
 <script
   type="application/json"
   data-prepr-pixel-props
-  set:html={JSON.stringify(payload)}
+  set:html={serializeForScriptTag(payload)}
 />
 
 <script>