@preprio/toolkit 0.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +903 -0
- package/dist/astro/index.cjs +319 -0
- package/dist/astro/index.d.cts +76 -0
- package/dist/astro/index.d.ts +76 -0
- package/dist/astro/index.js +287 -0
- package/dist/chunk-H7HVQSSF.js +2081 -0
- package/dist/index.cjs +2393 -0
- package/dist/index.d.cts +179 -0
- package/dist/index.d.ts +179 -0
- package/dist/index.js +306 -0
- package/dist/nextjs/components.cjs +2087 -0
- package/dist/nextjs/components.d.cts +17 -0
- package/dist/nextjs/components.d.ts +17 -0
- package/dist/nextjs/components.js +34 -0
- package/dist/nextjs/image-loader.cjs +122 -0
- package/dist/nextjs/image-loader.d.cts +10 -0
- package/dist/nextjs/image-loader.d.ts +10 -0
- package/dist/nextjs/image-loader.js +101 -0
- package/dist/nextjs/index.cjs +386 -0
- package/dist/nextjs/index.d.cts +90 -0
- package/dist/nextjs/index.d.ts +90 -0
- package/dist/nextjs/index.js +352 -0
- package/dist/pixel-DVSJQC0K.d.cts +94 -0
- package/dist/pixel-DVSJQC0K.d.ts +94 -0
- package/dist/sveltekit/index.cjs +371 -0
- package/dist/sveltekit/index.d.cts +117 -0
- package/dist/sveltekit/index.d.ts +117 -0
- package/dist/sveltekit/index.js +334 -0
- package/package.json +93 -0
- package/src/astro/PreprToolbar.astro +53 -0
- package/src/astro/PreprTrackingPixel.astro +48 -0
- package/src/sveltekit/PreprToolbar.svelte +21 -0
- package/src/sveltekit/PreprTrackingPixel.svelte +22 -0
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { NextRequest, NextResponse } from 'next/server';
|
|
2
|
+
export { PreprToolbar, PreprTrackingPixel, PreprTrackingPixelProps } from './components';
|
|
3
|
+
|
|
4
|
+
interface PreprMiddlewareOptions {
|
|
5
|
+
/** Enable preview-mode headers (segment/AB overrides, preview bar). */
|
|
6
|
+
preview?: boolean;
|
|
7
|
+
/** Override the version reported in Prepr-Package (mainly for tests). */
|
|
8
|
+
version?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Next.js middleware entry point. Despite the `create` prefix this runs
|
|
13
|
+
* per-request — it does not return a handler. Pass an existing `NextResponse`
|
|
14
|
+
* as the second argument to chain with other middleware.
|
|
15
|
+
*/
|
|
16
|
+
declare function createPreprMiddleware(request: NextRequest, options?: PreprMiddlewareOptions): NextResponse;
|
|
17
|
+
declare function createPreprMiddleware(request: NextRequest, response: NextResponse, options?: PreprMiddlewareOptions): NextResponse;
|
|
18
|
+
|
|
19
|
+
interface PreprSegment {
|
|
20
|
+
readonly _id: string;
|
|
21
|
+
readonly name: string;
|
|
22
|
+
}
|
|
23
|
+
interface PreprToolbarProps {
|
|
24
|
+
readonly activeSegment: string | null;
|
|
25
|
+
readonly activeVariant: string | null;
|
|
26
|
+
/** Available segments to personalize on. */
|
|
27
|
+
readonly segments?: readonly PreprSegment[];
|
|
28
|
+
/** @deprecated Alias for `segments`. */
|
|
29
|
+
readonly data?: readonly PreprSegment[];
|
|
30
|
+
}
|
|
31
|
+
type PreprVariant = 'A' | 'B';
|
|
32
|
+
interface PreprHeaders {
|
|
33
|
+
readonly 'prepr-customer-id'?: string;
|
|
34
|
+
readonly 'Prepr-Segments'?: string;
|
|
35
|
+
readonly 'Prepr-ABtesting'?: PreprVariant;
|
|
36
|
+
readonly 'Prepr-Preview-Bar'?: 'true';
|
|
37
|
+
readonly 'Prepr-Context-utm_source'?: string;
|
|
38
|
+
readonly 'Prepr-Context-utm_medium'?: string;
|
|
39
|
+
readonly 'Prepr-Context-utm_term'?: string;
|
|
40
|
+
readonly 'Prepr-Context-utm_content'?: string;
|
|
41
|
+
readonly 'Prepr-Context-utm_campaign'?: string;
|
|
42
|
+
readonly 'Prepr-Context-initial_referral'?: string;
|
|
43
|
+
readonly 'Prepr-Visitor-IP'?: string;
|
|
44
|
+
readonly 'Prepr-Hubspot-Id'?: string;
|
|
45
|
+
readonly 'Prepr-Customer-Id-Created'?: 'true';
|
|
46
|
+
readonly 'Prepr-User-Agent'?: string;
|
|
47
|
+
}
|
|
48
|
+
type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
|
|
49
|
+
|
|
50
|
+
/** Prepr Customer ID for the current request. Server-only. */
|
|
51
|
+
declare function getPreprUUID(): Promise<string | null>;
|
|
52
|
+
/** Active segment for the current request. Server-only. */
|
|
53
|
+
declare function getActiveSegment(): Promise<string | null>;
|
|
54
|
+
/** Active A/B variant for the current request. Server-only. */
|
|
55
|
+
declare function getActiveVariant(): Promise<string | null>;
|
|
56
|
+
/** All Prepr headers for the current request, to forward to a GraphQL fetch. Server-only. */
|
|
57
|
+
declare function getPreprHeaders(): Promise<PreprHeaders>;
|
|
58
|
+
/**
|
|
59
|
+
* Props needed to mount `PreprToolbar`, from the current request's headers plus
|
|
60
|
+
* a Prepr GraphQL token.
|
|
61
|
+
*
|
|
62
|
+
* Ungated: call it only when your app is in preview mode. Resolve that however
|
|
63
|
+
* your deployment already does (`VERCEL_ENV`, a branch check, your own flag) —
|
|
64
|
+
* the toolkit reads no environment variables of its own.
|
|
65
|
+
*
|
|
66
|
+
* Never throws: segment-fetch failures degrade to an empty segment list, so a
|
|
67
|
+
* bad or missing token can't crash the host app.
|
|
68
|
+
*/
|
|
69
|
+
declare function getToolbarProps(token: string): Promise<PreprToolbarProps>;
|
|
70
|
+
|
|
71
|
+
/** Error thrown by the token helpers and the segments fetch. */
|
|
72
|
+
declare class PreprError extends Error {
|
|
73
|
+
readonly code: PreprErrorCode;
|
|
74
|
+
readonly context?: string | undefined;
|
|
75
|
+
readonly originalError?: Error | undefined;
|
|
76
|
+
constructor(message: string, code: PreprErrorCode, context?: string | undefined, originalError?: Error | undefined);
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Asserts `token` is the full `https://graphql.prepr.io/<token>` URL.
|
|
80
|
+
* @throws PreprError if the token is missing or not an HTTPS URL.
|
|
81
|
+
*/
|
|
82
|
+
declare function validatePreprToken(token: string): void;
|
|
83
|
+
/**
|
|
84
|
+
* Pulls the access token out of a GraphQL URL: `https://graphql.prepr.io/abc123`
|
|
85
|
+
* -> `abc123`.
|
|
86
|
+
* @throws PreprError if the URL is not a valid `graphql.prepr.io` URL.
|
|
87
|
+
*/
|
|
88
|
+
declare function extractAccessToken(graphqlUrl: string): string;
|
|
89
|
+
|
|
90
|
+
export { PreprError, type PreprMiddlewareOptions, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { NextRequest, NextResponse } from 'next/server';
|
|
2
|
+
export { PreprToolbar, PreprTrackingPixel, PreprTrackingPixelProps } from './components';
|
|
3
|
+
|
|
4
|
+
interface PreprMiddlewareOptions {
|
|
5
|
+
/** Enable preview-mode headers (segment/AB overrides, preview bar). */
|
|
6
|
+
preview?: boolean;
|
|
7
|
+
/** Override the version reported in Prepr-Package (mainly for tests). */
|
|
8
|
+
version?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Next.js middleware entry point. Despite the `create` prefix this runs
|
|
13
|
+
* per-request — it does not return a handler. Pass an existing `NextResponse`
|
|
14
|
+
* as the second argument to chain with other middleware.
|
|
15
|
+
*/
|
|
16
|
+
declare function createPreprMiddleware(request: NextRequest, options?: PreprMiddlewareOptions): NextResponse;
|
|
17
|
+
declare function createPreprMiddleware(request: NextRequest, response: NextResponse, options?: PreprMiddlewareOptions): NextResponse;
|
|
18
|
+
|
|
19
|
+
interface PreprSegment {
|
|
20
|
+
readonly _id: string;
|
|
21
|
+
readonly name: string;
|
|
22
|
+
}
|
|
23
|
+
interface PreprToolbarProps {
|
|
24
|
+
readonly activeSegment: string | null;
|
|
25
|
+
readonly activeVariant: string | null;
|
|
26
|
+
/** Available segments to personalize on. */
|
|
27
|
+
readonly segments?: readonly PreprSegment[];
|
|
28
|
+
/** @deprecated Alias for `segments`. */
|
|
29
|
+
readonly data?: readonly PreprSegment[];
|
|
30
|
+
}
|
|
31
|
+
type PreprVariant = 'A' | 'B';
|
|
32
|
+
interface PreprHeaders {
|
|
33
|
+
readonly 'prepr-customer-id'?: string;
|
|
34
|
+
readonly 'Prepr-Segments'?: string;
|
|
35
|
+
readonly 'Prepr-ABtesting'?: PreprVariant;
|
|
36
|
+
readonly 'Prepr-Preview-Bar'?: 'true';
|
|
37
|
+
readonly 'Prepr-Context-utm_source'?: string;
|
|
38
|
+
readonly 'Prepr-Context-utm_medium'?: string;
|
|
39
|
+
readonly 'Prepr-Context-utm_term'?: string;
|
|
40
|
+
readonly 'Prepr-Context-utm_content'?: string;
|
|
41
|
+
readonly 'Prepr-Context-utm_campaign'?: string;
|
|
42
|
+
readonly 'Prepr-Context-initial_referral'?: string;
|
|
43
|
+
readonly 'Prepr-Visitor-IP'?: string;
|
|
44
|
+
readonly 'Prepr-Hubspot-Id'?: string;
|
|
45
|
+
readonly 'Prepr-Customer-Id-Created'?: 'true';
|
|
46
|
+
readonly 'Prepr-User-Agent'?: string;
|
|
47
|
+
}
|
|
48
|
+
type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
|
|
49
|
+
|
|
50
|
+
/** Prepr Customer ID for the current request. Server-only. */
|
|
51
|
+
declare function getPreprUUID(): Promise<string | null>;
|
|
52
|
+
/** Active segment for the current request. Server-only. */
|
|
53
|
+
declare function getActiveSegment(): Promise<string | null>;
|
|
54
|
+
/** Active A/B variant for the current request. Server-only. */
|
|
55
|
+
declare function getActiveVariant(): Promise<string | null>;
|
|
56
|
+
/** All Prepr headers for the current request, to forward to a GraphQL fetch. Server-only. */
|
|
57
|
+
declare function getPreprHeaders(): Promise<PreprHeaders>;
|
|
58
|
+
/**
|
|
59
|
+
* Props needed to mount `PreprToolbar`, from the current request's headers plus
|
|
60
|
+
* a Prepr GraphQL token.
|
|
61
|
+
*
|
|
62
|
+
* Ungated: call it only when your app is in preview mode. Resolve that however
|
|
63
|
+
* your deployment already does (`VERCEL_ENV`, a branch check, your own flag) —
|
|
64
|
+
* the toolkit reads no environment variables of its own.
|
|
65
|
+
*
|
|
66
|
+
* Never throws: segment-fetch failures degrade to an empty segment list, so a
|
|
67
|
+
* bad or missing token can't crash the host app.
|
|
68
|
+
*/
|
|
69
|
+
declare function getToolbarProps(token: string): Promise<PreprToolbarProps>;
|
|
70
|
+
|
|
71
|
+
/** Error thrown by the token helpers and the segments fetch. */
|
|
72
|
+
declare class PreprError extends Error {
|
|
73
|
+
readonly code: PreprErrorCode;
|
|
74
|
+
readonly context?: string | undefined;
|
|
75
|
+
readonly originalError?: Error | undefined;
|
|
76
|
+
constructor(message: string, code: PreprErrorCode, context?: string | undefined, originalError?: Error | undefined);
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Asserts `token` is the full `https://graphql.prepr.io/<token>` URL.
|
|
80
|
+
* @throws PreprError if the token is missing or not an HTTPS URL.
|
|
81
|
+
*/
|
|
82
|
+
declare function validatePreprToken(token: string): void;
|
|
83
|
+
/**
|
|
84
|
+
* Pulls the access token out of a GraphQL URL: `https://graphql.prepr.io/abc123`
|
|
85
|
+
* -> `abc123`.
|
|
86
|
+
* @throws PreprError if the URL is not a valid `graphql.prepr.io` URL.
|
|
87
|
+
*/
|
|
88
|
+
declare function extractAccessToken(graphqlUrl: string): string;
|
|
89
|
+
|
|
90
|
+
export { PreprError, type PreprMiddlewareOptions, createPreprMiddleware, extractAccessToken, getActiveSegment, getActiveVariant, getPreprHeaders, getPreprUUID, getToolbarProps, validatePreprToken };
|
|
@@ -0,0 +1,352 @@
|
|
|
1
|
+
// src/nextjs/middleware.ts
|
|
2
|
+
import { NextResponse } from "next/server";
|
|
3
|
+
|
|
4
|
+
// src/version.ts
|
|
5
|
+
var VERSION = "0.1.0-beta.1";
|
|
6
|
+
|
|
7
|
+
// src/core/constants.ts
|
|
8
|
+
var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";
|
|
9
|
+
var COOKIE_SEGMENT = "Prepr-Segments";
|
|
10
|
+
var COOKIE_VARIANT = "Prepr-ABtesting";
|
|
11
|
+
var COOKIE_UID = "__prepr_uid";
|
|
12
|
+
var COOKIE_HUBSPOT = "hubspotutk";
|
|
13
|
+
var PARAM_SEGMENT = "prepr_preview_segment";
|
|
14
|
+
var PARAM_VARIANT = "prepr_preview_ab";
|
|
15
|
+
var PARAM_HIDE_BAR = "prepr_hide_bar";
|
|
16
|
+
var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
|
|
17
|
+
|
|
18
|
+
// src/core/middleware.ts
|
|
19
|
+
var UTM_PARAMS = [
|
|
20
|
+
"utm_source",
|
|
21
|
+
"utm_medium",
|
|
22
|
+
"utm_term",
|
|
23
|
+
"utm_content",
|
|
24
|
+
"utm_campaign"
|
|
25
|
+
];
|
|
26
|
+
function parseCookies(request) {
|
|
27
|
+
const cookies = /* @__PURE__ */ new Map();
|
|
28
|
+
const header = request.headers.get("cookie");
|
|
29
|
+
if (!header) return cookies;
|
|
30
|
+
for (const part of header.split(";")) {
|
|
31
|
+
const eq = part.indexOf("=");
|
|
32
|
+
if (eq === -1) continue;
|
|
33
|
+
const name = part.slice(0, eq).trim();
|
|
34
|
+
const value = part.slice(eq + 1).trim();
|
|
35
|
+
if (!name) continue;
|
|
36
|
+
cookies.set(name, decodeURIComponent(value));
|
|
37
|
+
}
|
|
38
|
+
return cookies;
|
|
39
|
+
}
|
|
40
|
+
function processPreprRequest(request, opts) {
|
|
41
|
+
const requestHeaders = new Headers(request.headers);
|
|
42
|
+
const responseCookies = [];
|
|
43
|
+
const requestCookies = parseCookies(request);
|
|
44
|
+
const searchParams = new URL(request.url).searchParams;
|
|
45
|
+
for (const key of UTM_PARAMS) {
|
|
46
|
+
const value = searchParams.get(key);
|
|
47
|
+
if (value !== null) {
|
|
48
|
+
requestHeaders.set(`Prepr-Context-${key}`, value);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
const referer = request.headers.get("referer");
|
|
52
|
+
if (referer) {
|
|
53
|
+
requestHeaders.set("Prepr-Context-initial_referral", referer);
|
|
54
|
+
}
|
|
55
|
+
const userAgent = request.headers.get("user-agent");
|
|
56
|
+
if (userAgent) {
|
|
57
|
+
requestHeaders.set("Prepr-User-Agent", userAgent);
|
|
58
|
+
}
|
|
59
|
+
requestHeaders.set("Prepr-Package", `@preprio/toolkit@${opts?.version ?? VERSION}`);
|
|
60
|
+
const ip = request.headers.get("Cf-Connecting-Ip") ?? request.headers.get("x-real-ip");
|
|
61
|
+
if (ip) {
|
|
62
|
+
requestHeaders.set("Prepr-Visitor-IP", ip);
|
|
63
|
+
}
|
|
64
|
+
const hutkCookie = requestCookies.get(COOKIE_HUBSPOT);
|
|
65
|
+
if (hutkCookie) {
|
|
66
|
+
requestHeaders.set("Prepr-Hubspot-Id", hutkCookie);
|
|
67
|
+
}
|
|
68
|
+
let uid = requestCookies.get(COOKIE_UID);
|
|
69
|
+
if (!uid) {
|
|
70
|
+
uid = crypto.randomUUID();
|
|
71
|
+
responseCookies.push({
|
|
72
|
+
name: COOKIE_UID,
|
|
73
|
+
value: uid,
|
|
74
|
+
maxAge: ONE_YEAR_SECONDS,
|
|
75
|
+
path: "/"
|
|
76
|
+
});
|
|
77
|
+
requestHeaders.set("Prepr-Customer-Id-Created", "true");
|
|
78
|
+
}
|
|
79
|
+
requestHeaders.set("Prepr-Customer-Id", uid);
|
|
80
|
+
if (!opts?.preview) {
|
|
81
|
+
return { requestHeaders, responseCookies };
|
|
82
|
+
}
|
|
83
|
+
const hasPreviewParams = searchParams.has(PARAM_SEGMENT) || searchParams.has(PARAM_VARIANT);
|
|
84
|
+
if (!hasPreviewParams) {
|
|
85
|
+
const previewModeCookie = requestCookies.get(COOKIE_PREVIEW_MODE);
|
|
86
|
+
const previewModeEnabled = previewModeCookie !== "false";
|
|
87
|
+
if (!previewModeEnabled) {
|
|
88
|
+
return { requestHeaders, responseCookies };
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
requestHeaders.set("Prepr-Preview-Bar", "true");
|
|
92
|
+
const isLivePreview = searchParams.get(PARAM_HIDE_BAR) === "true";
|
|
93
|
+
if (!isLivePreview) {
|
|
94
|
+
const segmentCookie = requestCookies.get(COOKIE_SEGMENT);
|
|
95
|
+
if (segmentCookie) {
|
|
96
|
+
requestHeaders.set("Prepr-Segments", segmentCookie);
|
|
97
|
+
}
|
|
98
|
+
const abCookie = requestCookies.get(COOKIE_VARIANT);
|
|
99
|
+
if (abCookie) {
|
|
100
|
+
requestHeaders.set("Prepr-ABtesting", abCookie);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
const previewAb = searchParams.get(PARAM_VARIANT);
|
|
104
|
+
if (previewAb !== null) {
|
|
105
|
+
requestHeaders.set("Prepr-ABtesting", previewAb);
|
|
106
|
+
if (!isLivePreview) {
|
|
107
|
+
responseCookies.push({
|
|
108
|
+
name: COOKIE_VARIANT,
|
|
109
|
+
value: previewAb,
|
|
110
|
+
maxAge: ONE_YEAR_SECONDS,
|
|
111
|
+
path: "/"
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
const previewSegment = searchParams.get(PARAM_SEGMENT);
|
|
116
|
+
if (previewSegment !== null) {
|
|
117
|
+
requestHeaders.set("Prepr-Segments", previewSegment);
|
|
118
|
+
if (!isLivePreview) {
|
|
119
|
+
responseCookies.push({
|
|
120
|
+
name: COOKIE_SEGMENT,
|
|
121
|
+
value: previewSegment,
|
|
122
|
+
maxAge: ONE_YEAR_SECONDS,
|
|
123
|
+
path: "/"
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
return { requestHeaders, responseCookies };
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// src/nextjs/middleware.ts
|
|
131
|
+
function createPreprMiddleware(request, responseOrOptions, maybeOptions) {
|
|
132
|
+
let chainedResponse;
|
|
133
|
+
let options;
|
|
134
|
+
if (responseOrOptions instanceof NextResponse) {
|
|
135
|
+
chainedResponse = responseOrOptions;
|
|
136
|
+
options = maybeOptions;
|
|
137
|
+
} else {
|
|
138
|
+
options = responseOrOptions;
|
|
139
|
+
}
|
|
140
|
+
const { requestHeaders, responseCookies } = processPreprRequest(request, options);
|
|
141
|
+
const response = chainedResponse ?? NextResponse.next({ request: { headers: requestHeaders } });
|
|
142
|
+
if (chainedResponse) {
|
|
143
|
+
requestHeaders.forEach((value, key) => {
|
|
144
|
+
response.headers.set(key, value);
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
for (const cookie of responseCookies) {
|
|
148
|
+
response.cookies.set(cookie.name, cookie.value, {
|
|
149
|
+
maxAge: cookie.maxAge,
|
|
150
|
+
path: cookie.path
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
return response;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// src/nextjs/server.ts
|
|
157
|
+
import { headers } from "next/headers";
|
|
158
|
+
|
|
159
|
+
// src/core/server.ts
|
|
160
|
+
var PreprError = class extends Error {
|
|
161
|
+
constructor(message, code, context, originalError) {
|
|
162
|
+
super(message);
|
|
163
|
+
this.code = code;
|
|
164
|
+
this.context = context;
|
|
165
|
+
this.originalError = originalError;
|
|
166
|
+
this.name = "PreprError";
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
function getPreprUUIDFromHeaders(headers2) {
|
|
170
|
+
return headers2.get("prepr-customer-id");
|
|
171
|
+
}
|
|
172
|
+
function getActiveSegmentFromHeaders(headers2) {
|
|
173
|
+
return headers2.get("Prepr-Segments");
|
|
174
|
+
}
|
|
175
|
+
function getActiveVariantFromHeaders(headers2) {
|
|
176
|
+
return headers2.get("Prepr-ABtesting");
|
|
177
|
+
}
|
|
178
|
+
var PREPR_HEADER_KEYS = [
|
|
179
|
+
"prepr-customer-id",
|
|
180
|
+
"Prepr-Segments",
|
|
181
|
+
"Prepr-ABtesting",
|
|
182
|
+
"Prepr-Preview-Bar",
|
|
183
|
+
"Prepr-Context-utm_source",
|
|
184
|
+
"Prepr-Context-utm_medium",
|
|
185
|
+
"Prepr-Context-utm_term",
|
|
186
|
+
"Prepr-Context-utm_content",
|
|
187
|
+
"Prepr-Context-utm_campaign",
|
|
188
|
+
"Prepr-Context-initial_referral",
|
|
189
|
+
"Prepr-Visitor-IP",
|
|
190
|
+
"Prepr-Hubspot-Id",
|
|
191
|
+
"Prepr-Customer-Id-Created",
|
|
192
|
+
"Prepr-User-Agent"
|
|
193
|
+
];
|
|
194
|
+
function getPreprHeadersFromHeaders(headers2) {
|
|
195
|
+
const preprHeaders = {};
|
|
196
|
+
const copy = (key) => {
|
|
197
|
+
const value = headers2.get(key);
|
|
198
|
+
if (value !== null) {
|
|
199
|
+
preprHeaders[key] = value;
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
for (const key of PREPR_HEADER_KEYS) {
|
|
203
|
+
copy(key);
|
|
204
|
+
}
|
|
205
|
+
return preprHeaders;
|
|
206
|
+
}
|
|
207
|
+
function validatePreprToken(token) {
|
|
208
|
+
if (!token) {
|
|
209
|
+
throw new PreprError("Token is required", "MISSING_TOKEN", "validatePreprToken");
|
|
210
|
+
}
|
|
211
|
+
if (!token.startsWith("https://")) {
|
|
212
|
+
throw new PreprError(
|
|
213
|
+
"Token must be a valid HTTPS URL",
|
|
214
|
+
"INVALID_TOKEN",
|
|
215
|
+
"validatePreprToken"
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
function extractAccessToken(graphqlUrl) {
|
|
220
|
+
let url;
|
|
221
|
+
try {
|
|
222
|
+
url = new URL(graphqlUrl);
|
|
223
|
+
} catch (error) {
|
|
224
|
+
throw new PreprError(
|
|
225
|
+
"Token must be a valid URL",
|
|
226
|
+
"INVALID_TOKEN",
|
|
227
|
+
"extractAccessToken",
|
|
228
|
+
error instanceof Error ? error : new Error(String(error))
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
if (url.hostname !== "graphql.prepr.io") {
|
|
232
|
+
throw new PreprError(
|
|
233
|
+
"Token must be a graphql.prepr.io URL",
|
|
234
|
+
"INVALID_TOKEN",
|
|
235
|
+
"extractAccessToken"
|
|
236
|
+
);
|
|
237
|
+
}
|
|
238
|
+
const pathParts = url.pathname.split("/");
|
|
239
|
+
const token = pathParts[pathParts.length - 1];
|
|
240
|
+
if (!token) {
|
|
241
|
+
throw new PreprError(
|
|
242
|
+
"Token URL is missing an access token segment",
|
|
243
|
+
"INVALID_TOKEN",
|
|
244
|
+
"extractAccessToken"
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
return token;
|
|
248
|
+
}
|
|
249
|
+
async function getPreprEnvironmentSegments(token) {
|
|
250
|
+
validatePreprToken(token);
|
|
251
|
+
try {
|
|
252
|
+
const response = await fetch(token, {
|
|
253
|
+
headers: {
|
|
254
|
+
"User-Agent": `Prepr-Preview-Bar/${VERSION}`,
|
|
255
|
+
"Content-Type": "application/json"
|
|
256
|
+
},
|
|
257
|
+
method: "POST",
|
|
258
|
+
body: JSON.stringify({
|
|
259
|
+
query: `{
|
|
260
|
+
_Segments {
|
|
261
|
+
_id
|
|
262
|
+
name
|
|
263
|
+
}
|
|
264
|
+
}`
|
|
265
|
+
})
|
|
266
|
+
});
|
|
267
|
+
if (!response.ok) {
|
|
268
|
+
throw new PreprError(
|
|
269
|
+
`HTTP ${response.status}: ${response.statusText}`,
|
|
270
|
+
"HTTP_ERROR",
|
|
271
|
+
"getPreprEnvironmentSegments"
|
|
272
|
+
);
|
|
273
|
+
}
|
|
274
|
+
const json = await response.json();
|
|
275
|
+
if (!json || !json.data || !json.data._Segments) {
|
|
276
|
+
throw new PreprError(
|
|
277
|
+
"Invalid response format from Prepr API",
|
|
278
|
+
"INVALID_RESPONSE",
|
|
279
|
+
"getPreprEnvironmentSegments"
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
return json.data._Segments;
|
|
283
|
+
} catch (error) {
|
|
284
|
+
if (error instanceof PreprError) {
|
|
285
|
+
throw error;
|
|
286
|
+
}
|
|
287
|
+
throw new PreprError(
|
|
288
|
+
"Failed to fetch segments from Prepr API",
|
|
289
|
+
"FETCH_ERROR",
|
|
290
|
+
"getPreprEnvironmentSegments",
|
|
291
|
+
error instanceof Error ? error : new Error(String(error))
|
|
292
|
+
);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
async function getToolbarPropsFromHeaders(headers2, token) {
|
|
296
|
+
let segments = [];
|
|
297
|
+
try {
|
|
298
|
+
segments = await getPreprEnvironmentSegments(token);
|
|
299
|
+
} catch {
|
|
300
|
+
segments = [];
|
|
301
|
+
}
|
|
302
|
+
return {
|
|
303
|
+
activeSegment: getActiveSegmentFromHeaders(headers2),
|
|
304
|
+
activeVariant: getActiveVariantFromHeaders(headers2),
|
|
305
|
+
segments,
|
|
306
|
+
data: segments
|
|
307
|
+
};
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// src/nextjs/server.ts
|
|
311
|
+
async function readHeaders() {
|
|
312
|
+
return await headers();
|
|
313
|
+
}
|
|
314
|
+
async function getPreprUUID() {
|
|
315
|
+
const h = await readHeaders();
|
|
316
|
+
return getPreprUUIDFromHeaders(h);
|
|
317
|
+
}
|
|
318
|
+
async function getActiveSegment() {
|
|
319
|
+
const h = await readHeaders();
|
|
320
|
+
return getActiveSegmentFromHeaders(h);
|
|
321
|
+
}
|
|
322
|
+
async function getActiveVariant() {
|
|
323
|
+
const h = await readHeaders();
|
|
324
|
+
return getActiveVariantFromHeaders(h);
|
|
325
|
+
}
|
|
326
|
+
async function getPreprHeaders() {
|
|
327
|
+
const h = await readHeaders();
|
|
328
|
+
return getPreprHeadersFromHeaders(h);
|
|
329
|
+
}
|
|
330
|
+
async function getToolbarProps(token) {
|
|
331
|
+
const h = await readHeaders();
|
|
332
|
+
return getToolbarPropsFromHeaders(h, token);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// src/nextjs/index.ts
|
|
336
|
+
import {
|
|
337
|
+
PreprToolbar,
|
|
338
|
+
PreprTrackingPixel
|
|
339
|
+
} from "./components";
|
|
340
|
+
export {
|
|
341
|
+
PreprError,
|
|
342
|
+
PreprToolbar,
|
|
343
|
+
PreprTrackingPixel,
|
|
344
|
+
createPreprMiddleware,
|
|
345
|
+
extractAccessToken,
|
|
346
|
+
getActiveSegment,
|
|
347
|
+
getActiveVariant,
|
|
348
|
+
getPreprHeaders,
|
|
349
|
+
getPreprUUID,
|
|
350
|
+
getToolbarProps,
|
|
351
|
+
validatePreprToken
|
|
352
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
type Dictionary = Record<string, unknown>;
|
|
2
|
+
declare const dictionaries: {
|
|
3
|
+
en: Dictionary;
|
|
4
|
+
nl: Dictionary;
|
|
5
|
+
};
|
|
6
|
+
type Locale = keyof typeof dictionaries;
|
|
7
|
+
|
|
8
|
+
interface PreprSegment {
|
|
9
|
+
readonly _id: string;
|
|
10
|
+
readonly name: string;
|
|
11
|
+
}
|
|
12
|
+
interface PreprToolbarOptions {
|
|
13
|
+
debug?: boolean;
|
|
14
|
+
locale?: Locale;
|
|
15
|
+
}
|
|
16
|
+
interface PreprToolbarProps {
|
|
17
|
+
readonly activeSegment: string | null;
|
|
18
|
+
readonly activeVariant: string | null;
|
|
19
|
+
/** Available segments to personalize on. */
|
|
20
|
+
readonly segments?: readonly PreprSegment[];
|
|
21
|
+
/** @deprecated Alias for `segments`. */
|
|
22
|
+
readonly data?: readonly PreprSegment[];
|
|
23
|
+
}
|
|
24
|
+
type PreprHeaderName = 'prepr-customer-id' | 'Prepr-Segments' | 'Prepr-ABtesting' | 'Prepr-User-Agent';
|
|
25
|
+
type PreprVariant = 'A' | 'B';
|
|
26
|
+
type PreprEnvironment = 'preview' | 'production';
|
|
27
|
+
type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested';
|
|
28
|
+
interface PreprHeaders {
|
|
29
|
+
readonly 'prepr-customer-id'?: string;
|
|
30
|
+
readonly 'Prepr-Segments'?: string;
|
|
31
|
+
readonly 'Prepr-ABtesting'?: PreprVariant;
|
|
32
|
+
readonly 'Prepr-Preview-Bar'?: 'true';
|
|
33
|
+
readonly 'Prepr-Context-utm_source'?: string;
|
|
34
|
+
readonly 'Prepr-Context-utm_medium'?: string;
|
|
35
|
+
readonly 'Prepr-Context-utm_term'?: string;
|
|
36
|
+
readonly 'Prepr-Context-utm_content'?: string;
|
|
37
|
+
readonly 'Prepr-Context-utm_campaign'?: string;
|
|
38
|
+
readonly 'Prepr-Context-initial_referral'?: string;
|
|
39
|
+
readonly 'Prepr-Visitor-IP'?: string;
|
|
40
|
+
readonly 'Prepr-Hubspot-Id'?: string;
|
|
41
|
+
readonly 'Prepr-Customer-Id-Created'?: 'true';
|
|
42
|
+
readonly 'Prepr-User-Agent'?: string;
|
|
43
|
+
}
|
|
44
|
+
type PreprErrorCode = 'INVALID_TOKEN' | 'MISSING_TOKEN' | 'HTTP_ERROR' | 'FETCH_ERROR' | 'INVALID_RESPONSE' | 'CONTEXT_ERROR';
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Loader + typed facade for Prepr's CDN tracking pixel, so consumers don't have
|
|
48
|
+
* to paste a `<script>` tag. The pixel itself lives on the CDN; this only sets
|
|
49
|
+
* up the handoff.
|
|
50
|
+
*
|
|
51
|
+
* The CDN script expects a queue stub to already exist when it loads, so the
|
|
52
|
+
* contract must be reproduced exactly:
|
|
53
|
+
* - `window.prepr` pushes `arguments` onto `.queue` until the real script
|
|
54
|
+
* lands and replaces `.process`.
|
|
55
|
+
* - `.t` must be a `Date.now()` timestamp.
|
|
56
|
+
* - The tag is inserted async, `src` cache-busted every 24h via
|
|
57
|
+
* `Math.ceil(Date.now() / cacheTime) * cacheTime`.
|
|
58
|
+
*/
|
|
59
|
+
/** Config accepted by the CDN pixel. */
|
|
60
|
+
interface PreprPixelConfig {
|
|
61
|
+
destinations?: {
|
|
62
|
+
googleTagManager?: boolean;
|
|
63
|
+
};
|
|
64
|
+
variantImpressionThreshold?: number;
|
|
65
|
+
}
|
|
66
|
+
type PreprQueueArgs = unknown[];
|
|
67
|
+
interface PreprQueueFn {
|
|
68
|
+
(...args: PreprQueueArgs): void;
|
|
69
|
+
queue: PreprQueueArgs[];
|
|
70
|
+
t: number;
|
|
71
|
+
process?: (...args: PreprQueueArgs) => void;
|
|
72
|
+
}
|
|
73
|
+
declare global {
|
|
74
|
+
interface Window {
|
|
75
|
+
prepr?: PreprQueueFn;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Install the queue stub, inject the pixel script, then queue
|
|
80
|
+
* `('init', trackingId, config?)` and `('event', 'pageload')` in that order.
|
|
81
|
+
*
|
|
82
|
+
* Idempotent, and a no-op outside a browser.
|
|
83
|
+
*/
|
|
84
|
+
declare function loadTrackingPixel(trackingId: string, config?: PreprPixelConfig): void;
|
|
85
|
+
/**
|
|
86
|
+
* Send a tracking event through `window.prepr`. Only depends on `window.prepr`
|
|
87
|
+
* existing, never on how it got installed. Warns once and returns quietly when
|
|
88
|
+
* no pixel is present.
|
|
89
|
+
*/
|
|
90
|
+
declare function trackEvent(name: string, data?: string | Record<string, unknown>): void;
|
|
91
|
+
/** Loader-independent like `trackEvent`; warns once if no pixel is installed. */
|
|
92
|
+
declare function setTrackingParam(key: string, value: string): void;
|
|
93
|
+
|
|
94
|
+
export { type Locale as L, type PreprSegment as P, type PreprVariant as a, type PreprToolbarProps as b, type PreprToolbarOptions as c, type PreprErrorCode as d, type PreprHeaders as e, type PreprEnvironment as f, type PreprEventType as g, type PreprHeaderName as h, type PreprPixelConfig as i, loadTrackingPixel as l, setTrackingParam as s, trackEvent as t };
|