@pack/hydrogen 0.1.1 → 0.1.3-ab-beta.2.0

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.
@@ -0,0 +1,4 @@
1
+ export declare const PACK_COOKIE_ID = "__pack";
2
+ export declare const PACK_USER_CONSENT_COOKIE_ID = "__pack_user_consent";
3
+ export declare const PACK_COOKIE_MAX_AGE: number;
4
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,WAAW,CAAC;AACvC,eAAO,MAAM,2BAA2B,wBAAwB,CAAC;AACjE,eAAO,MAAM,mBAAmB,QAAqB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export const PACK_COOKIE_ID = "__pack";
2
+ export const PACK_USER_CONSENT_COOKIE_ID = "__pack_user_consent";
3
+ export const PACK_COOKIE_MAX_AGE = 60 * 60 * 24 * 360; // 1 year
@@ -1,7 +1,8 @@
1
1
  /// <reference types="@shopify/oxygen-workers-types" />
2
2
  import { PackClient } from "@pack/client";
3
3
  import { CacheCustom } from "@shopify/hydrogen";
4
- import { PreviewSession } from "./preview/preview-session";
4
+ import { PackSession } from "./session/session";
5
+ import { Test, TestInput } from "./tests/test";
5
6
  /** @see https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/cache#caching-strategies */
6
7
  type CachingStrategy = ReturnType<typeof CacheCustom>;
7
8
  interface EnvironmentOptions {
@@ -18,16 +19,21 @@ interface EnvironmentOptions {
18
19
  }
19
20
  interface CreatePackClientOptions extends EnvironmentOptions {
20
21
  apiUrl?: string;
21
- token: string;
22
+ token?: string;
23
+ storeId?: string;
24
+ session: PackSession;
22
25
  preview?: {
23
- session: PreviewSession;
26
+ session: PackSession;
24
27
  };
25
28
  contentEnvironment?: string;
29
+ /** Default theme data to use when no token is provided */
30
+ defaultThemeData?: DefaultThemeData;
26
31
  }
27
32
  type Variables = Record<string, any>;
28
33
  interface QueryOptions {
29
34
  variables?: Variables;
30
35
  cache?: CachingStrategy;
36
+ test?: TestInput;
31
37
  }
32
38
  interface QueryError {
33
39
  message: string;
@@ -41,11 +47,24 @@ interface QueryResponse<T> {
41
47
  }
42
48
  export interface Pack {
43
49
  isPreviewModeEnabled: () => boolean;
50
+ session: PackSession;
44
51
  preview?: {
45
- session: PreviewSession;
52
+ session: PackSession;
46
53
  };
54
+ abTest: Test | null | undefined;
55
+ setRequestAbTest: (request: Request) => void;
47
56
  query: <T = any>(query: string, options?: QueryOptions) => Promise<QueryResponse<T>>;
48
57
  isValidEditToken: PackClient["isValidEditToken"];
58
+ getPackSessionData(): {
59
+ storeId: string;
60
+ sessionId: string;
61
+ abTest: Test | null | undefined;
62
+ isPreviewModeEnabled: boolean;
63
+ customizerMeta: any;
64
+ };
65
+ }
66
+ interface DefaultThemeData {
67
+ data: Record<string, any>;
49
68
  }
50
69
  export declare function createPackClient(options: CreatePackClientOptions): Pack;
51
70
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"create-pack-client.d.ts","sourceRoot":"","sources":["../src/create-pack-client.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,uGAAuG;AACvG,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;IACb;;;OAGG;IACH,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,cAAc,CAAC;KACzB,CAAC;IACF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,IAAI;IACnB,oBAAoB,EAAE,MAAM,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,cAAc,CAAC;KACzB,CAAC;IACF,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG,EACb,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,gBAAgB,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAClD;AAmCD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAuDvE"}
1
+ {"version":3,"file":"create-pack-client.d.ts","sourceRoot":"","sources":["../src/create-pack-client.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAKL,IAAI,EACJ,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,uGAAuG;AACvG,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAEtD,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;IACb;;;OAGG;IACH,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,WAAW,CAAC;KACtB,CAAC;IACF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,aAAa,CAAC,CAAC;IACvB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,IAAI;IACnB,oBAAoB,EAAE,MAAM,OAAO,CAAC;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,WAAW,CAAC;KACtB,CAAC;IACF,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,KAAK,EAAE,CAAC,CAAC,GAAG,GAAG,EACb,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/B,gBAAgB,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACjD,kBAAkB,IAAI;QACpB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;QAChC,oBAAoB,EAAE,OAAO,CAAC;QAC9B,cAAc,EAAE,GAAG,CAAC;KACrB,CAAC;CACH;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC3B;AA2FD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAoKvE"}
@@ -1,5 +1,6 @@
1
1
  import { PackClient } from "@pack/client";
2
2
  import { CacheCustom, createWithCache } from "@shopify/hydrogen";
3
+ import { getTestInfo, getTestSession, setRequestAbTest, setTestHeaders, } from "./tests/test";
3
4
  /**
4
5
  * Create an SHA-256 hash as a hex string
5
6
  * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
@@ -18,10 +19,12 @@ async function sha256(message) {
18
19
  * Hash query and its parameters for use as cache key.
19
20
  * NOTE: Oxygen deployment will break if the cache key is long or contains `\n`
20
21
  */
21
- function hashQuery(query, variables) {
22
+ function hashQuery(query, variables, headers) {
22
23
  let hash = query;
23
24
  if (variables !== null)
24
25
  hash += JSON.stringify(variables);
26
+ if (headers !== null)
27
+ hash += JSON.stringify(headers);
25
28
  return sha256(hash);
26
29
  }
27
30
  // Extends the CacheLong strategy with a stale-if-error policy
@@ -30,26 +33,132 @@ const cacheCustom = CacheCustom({
30
33
  staleWhileRevalidate: 82800,
31
34
  staleIfError: 86400, // 1 day
32
35
  });
36
+ /** Resolves the default data for a given query based on the theme config */
37
+ function resolveQuery({ query, variables, defaultThemeData, }) {
38
+ const queryField = extractTopLevelField(query);
39
+ const identifier = variables?.handle || variables?.id;
40
+ const defaultDataForField = defaultThemeData.data[queryField];
41
+ if (!defaultDataForField) {
42
+ return null;
43
+ }
44
+ return {
45
+ [queryField]: identifier
46
+ ? defaultDataForField[identifier]
47
+ : defaultDataForField,
48
+ };
49
+ }
50
+ /**
51
+ * Extracts the top-level field from a GraphQL query string.
52
+ *
53
+ * The function assumes that the query follows the standard GraphQL syntax
54
+ * and expects the top-level field to be the first field in the query.
55
+ *
56
+ * @example
57
+ * const query = `
58
+ * query GetProduct($id: ID!) {
59
+ * product(id: $id) {
60
+ * id
61
+ * name
62
+ * }
63
+ * }
64
+ * `;
65
+ * const topLevelField = extractTopLevelField(query);
66
+ * console.log(topLevelField); // Output: "product"
67
+ */
68
+ function extractTopLevelField(query) {
69
+ const match = query.match(/\{[^{]*?\w+(?=\(|:|\s*\{)/);
70
+ if (match) {
71
+ return match[0].slice(1).trim();
72
+ }
73
+ return "";
74
+ }
33
75
  export function createPackClient(options) {
34
- const { cache, waitUntil, preview, contentEnvironment, token, apiUrl } = options;
76
+ const { cache, waitUntil, session, preview, contentEnvironment, storeId, token, apiUrl, defaultThemeData, } = options;
35
77
  const previewEnabled = !!preview?.session.get("enabled");
36
78
  const previewEnvironment = preview?.session.get("environment");
37
79
  const clientContentEnvironment = previewEnvironment || contentEnvironment;
80
+ let requestAbTest = null;
81
+ if (!token && !defaultThemeData) {
82
+ throw new Error("The Pack client token is missing or empty. Please provide a valid token or default theme data.");
83
+ }
84
+ if (!storeId) {
85
+ throw new Error("The Pack Store ID is missing or empty. Please provide a valid Store ID.");
86
+ }
87
+ if (!token) {
88
+ return {
89
+ session,
90
+ preview,
91
+ abTest: getTestSession(session, requestAbTest, previewEnabled),
92
+ setRequestAbTest: (request) => {
93
+ requestAbTest = setRequestAbTest(request);
94
+ },
95
+ isPreviewModeEnabled: () => previewEnabled,
96
+ async query(query, { variables } = {}) {
97
+ if (!defaultThemeData?.data) {
98
+ console.warn("Invalid default theme data provided to Pack client.");
99
+ return { data: null, error: null };
100
+ }
101
+ const data = resolveQuery({ query, variables, defaultThemeData });
102
+ return { data: data, error: null };
103
+ },
104
+ isValidEditToken: () => new Promise(() => false),
105
+ getPackSessionData: () => {
106
+ return {
107
+ storeId: storeId,
108
+ sessionId: session.id,
109
+ abTest: getTestSession(session, requestAbTest, previewEnabled),
110
+ isPreviewModeEnabled: previewEnabled,
111
+ customizerMeta: preview?.session.get("customizerMeta"),
112
+ };
113
+ },
114
+ };
115
+ }
38
116
  const packClient = new PackClient({
39
- // Use live API URL if preview mode is enabled always
40
- apiUrl: previewEnabled ? "https://app.packdigital.com/graphql" : apiUrl,
117
+ // Use apiUrl, it is configured
118
+ // Use active API URL if preview mode is enabled
119
+ // Otherwise, Live PackClient uses its internal configuration
120
+ apiUrl: apiUrl
121
+ ? apiUrl
122
+ : previewEnabled
123
+ ? "https://app.packdigital.com/graphql"
124
+ : undefined,
125
+ storeId,
41
126
  token,
42
127
  contentEnvironment: clientContentEnvironment,
128
+ sessionId: session.id,
129
+ });
130
+ const getTestVariantPromise = getTestInfo({
131
+ packClient,
132
+ session,
43
133
  });
44
134
  return {
135
+ session,
45
136
  preview,
137
+ abTest: getTestSession(session, requestAbTest, previewEnabled),
138
+ setRequestAbTest: (request) => {
139
+ requestAbTest = setRequestAbTest(request);
140
+ },
46
141
  isPreviewModeEnabled: () => previewEnabled,
47
- async query(query, { variables, cache: strategy = cacheCustom } = {}) {
48
- const queryHash = await hashQuery(query, variables);
142
+ async query(query, { variables, cache: strategy = cacheCustom, test } = {}) {
49
143
  const withCache = createWithCache({
50
144
  cache,
51
145
  waitUntil,
52
146
  });
147
+ let headers = {};
148
+ headers = await setTestHeaders(headers, {
149
+ test: requestAbTest || test,
150
+ previewEnabled,
151
+ sessionTest: await (async () => {
152
+ try {
153
+ return await getTestVariantPromise;
154
+ }
155
+ catch (e) {
156
+ console.error(e);
157
+ }
158
+ return undefined;
159
+ })(),
160
+ });
161
+ const queryHash = await hashQuery(query, variables, headers);
53
162
  const queryVariables = variables ? { ...variables } : {};
54
163
  if (previewEnabled) {
55
164
  queryVariables.version = "CURRENT";
@@ -60,7 +169,10 @@ export function createPackClient(options) {
60
169
  // Preview mode always bypasses the cache
61
170
  if (previewEnabled) {
62
171
  try {
63
- return await packClient.fetch(query, { variables: queryVariables });
172
+ return await packClient.fetch(query, {
173
+ variables: queryVariables,
174
+ headers: headers,
175
+ });
64
176
  }
65
177
  catch (error) {
66
178
  return { error, data: {} };
@@ -68,7 +180,10 @@ export function createPackClient(options) {
68
180
  }
69
181
  return withCache(queryHash, strategy, async () => {
70
182
  try {
71
- return await packClient.fetch(query, { variables: queryVariables });
183
+ return await packClient.fetch(query, {
184
+ variables: queryVariables,
185
+ headers: headers,
186
+ });
72
187
  }
73
188
  catch (error) {
74
189
  return { error, data: {} };
@@ -76,5 +191,14 @@ export function createPackClient(options) {
76
191
  });
77
192
  },
78
193
  isValidEditToken: (token) => packClient.isValidEditToken(token),
194
+ getPackSessionData: () => {
195
+ return {
196
+ storeId: storeId,
197
+ sessionId: session.id,
198
+ abTest: getTestSession(session, requestAbTest, previewEnabled),
199
+ isPreviewModeEnabled: previewEnabled,
200
+ customizerMeta: preview?.session.get("customizerMeta"),
201
+ };
202
+ },
79
203
  };
80
204
  }
@@ -0,0 +1,3 @@
1
+ import { Pack } from "./create-pack-client";
2
+ export declare function handleRequest(pack: Pack, request: Request, handleRequest: (request: Request) => Promise<Response>): Promise<Response>;
3
+ //# sourceMappingURL=handle-request.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"handle-request.d.ts","sourceRoot":"","sources":["../src/handle-request.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI5C,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,GACrD,OAAO,CAAC,QAAQ,CAAC,CAenB"}
@@ -0,0 +1,15 @@
1
+ import { packlytics } from "@pack/packlytics";
2
+ import { setRequestAbTest } from "./tests/test";
3
+ export async function handleRequest(pack, request, handleRequest) {
4
+ setRequestAbTest(request);
5
+ const [response, _] = await Promise.all([
6
+ handleRequest(request),
7
+ packlytics(request, pack.session, {
8
+ storeFrontId: pack.getPackSessionData().storeId,
9
+ sessionSecret: pack.session.secret,
10
+ }),
11
+ ]);
12
+ response.headers.append("powered-by", "Shopify, Hydrogen + Pack Digital");
13
+ response.headers.append("Set-Cookie", await pack.session.commit());
14
+ return response;
15
+ }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
- import { Pack, createPackClient } from "./create-pack-client";
2
- import { PreviewSession } from "./preview/preview-session";
1
+ import { handleRequest } from "./handle-request";
2
+ import { usePackCookies } from "./session/usePackCookies";
3
+ import { PackSession } from "./session/session";
4
+ import { createPackClient } from "./create-pack-client";
3
5
  import { action as previewModeAction, loader as previewModeLoader } from "./preview/preview-mode";
4
- export { type Pack, createPackClient, PreviewSession, previewModeAction, previewModeLoader, };
6
+ import { useAbTest, useAbTestHandle, useAbTestId, useAbTestSessionId, useAbTestVariantHandle, useAbTestVariantId } from "./tests/testHooks";
7
+ export { PackSession, createPackClient, handleRequest, previewModeAction, previewModeLoader, usePackCookies, useAbTest, useAbTestId, useAbTestHandle, useAbTestSessionId, useAbTestVariantId, useAbTestVariantHandle, };
5
8
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,MAAM,IAAI,iBAAiB,EAC3B,MAAM,IAAI,iBAAiB,EAC5B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,IAAI,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,MAAM,IAAI,iBAAiB,EAC3B,MAAM,IAAI,iBAAiB,EAC5B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,SAAS,EACT,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,GACvB,CAAC"}
package/dist/index.js CHANGED
@@ -1,4 +1,7 @@
1
+ import { handleRequest } from "./handle-request";
2
+ import { usePackCookies } from "./session/usePackCookies";
3
+ import { PackSession } from "./session/session";
1
4
  import { createPackClient } from "./create-pack-client";
2
- import { PreviewSession } from "./preview/preview-session";
3
5
  import { action as previewModeAction, loader as previewModeLoader, } from "./preview/preview-mode";
4
- export { createPackClient, PreviewSession, previewModeAction, previewModeLoader, };
6
+ import { useAbTest, useAbTestHandle, useAbTestId, useAbTestSessionId, useAbTestVariantHandle, useAbTestVariantId, } from "./tests/testHooks";
7
+ export { PackSession, createPackClient, handleRequest, previewModeAction, previewModeLoader, usePackCookies, useAbTest, useAbTestId, useAbTestHandle, useAbTestSessionId, useAbTestVariantId, useAbTestVariantHandle, };
@@ -0,0 +1,13 @@
1
+ export declare function hasUserConsent(request: Request): boolean;
2
+ /**
3
+ * This will generate a random UUID
4
+ * This is not based on user data,
5
+ * This is based on a random number generator using crypto or math.random
6
+ *
7
+ * This UUID is used to generate a session ID for the session cookie
8
+ *
9
+ * We can never use this id to trace back users for GDPR compliance.
10
+ *
11
+ */
12
+ export declare function buildRandomUUID(): string;
13
+ //# sourceMappingURL=cookies-utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cookies-utils.d.ts","sourceRoot":"","sources":["../../src/session/cookies-utils.tsx"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,WAM9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,MAAM,CA8BxC"}
@@ -0,0 +1,66 @@
1
+ import { PACK_USER_CONSENT_COOKIE_ID } from "../constants";
2
+ const cookie = require("cookie");
3
+ const tokenHash = "xxxx-4xxx-xxxx-xxxxxxxxxxxx";
4
+ export function hasUserConsent(request) {
5
+ const cookies = cookie.parse(request.headers.get("Cookie"));
6
+ return cookies[PACK_USER_CONSENT_COOKIE_ID]
7
+ ? cookies[PACK_USER_CONSENT_COOKIE_ID] === "true"
8
+ : true;
9
+ }
10
+ /**
11
+ * This will generate a random UUID
12
+ * This is not based on user data,
13
+ * This is based on a random number generator using crypto or math.random
14
+ *
15
+ * This UUID is used to generate a session ID for the session cookie
16
+ *
17
+ * We can never use this id to trace back users for GDPR compliance.
18
+ *
19
+ */
20
+ export function buildRandomUUID() {
21
+ let hash = "";
22
+ try {
23
+ const crypto = window.crypto;
24
+ const randomValuesArray = new Uint16Array(31);
25
+ crypto.getRandomValues(randomValuesArray);
26
+ // Generate a strong UUID
27
+ let i = 0;
28
+ hash = tokenHash
29
+ .replace(/[x]/g, (c) => {
30
+ const r = randomValuesArray[i] % 16;
31
+ const v = c === "x" ? r : (r & 0x3) | 0x8;
32
+ i++;
33
+ return v.toString(16);
34
+ })
35
+ .toUpperCase();
36
+ }
37
+ catch (err) {
38
+ // crypto not available, generate weak UUID
39
+ hash = tokenHash
40
+ .replace(/[x]/g, (c) => {
41
+ const r = (Math.random() * 16) | 0;
42
+ const v = c === "x" ? r : (r & 0x3) | 0x8;
43
+ return v.toString(16);
44
+ })
45
+ .toUpperCase();
46
+ }
47
+ return `${hexTime()}-${hash}`;
48
+ }
49
+ function hexTime() {
50
+ // 32 bit representations of new Date().getTime() and performance.now()
51
+ let dateNumber = 0;
52
+ let perfNumber = 0;
53
+ // Result of zero-fill right shift is always positive
54
+ dateNumber = new Date().getTime() >>> 0;
55
+ try {
56
+ perfNumber = performance.now() >>> 0;
57
+ }
58
+ catch (err) {
59
+ perfNumber = 0;
60
+ }
61
+ const output = Math.abs(dateNumber + perfNumber)
62
+ .toString(16)
63
+ .toLowerCase();
64
+ // Ensure the output is exactly 8 characters
65
+ return output.padStart(8, "0");
66
+ }
@@ -0,0 +1,14 @@
1
+ import { type Session, type SessionStorage } from "@shopify/remix-oxygen";
2
+ export declare class PackSession {
3
+ #private;
4
+ readonly id: string;
5
+ readonly secret: string;
6
+ constructor(id: string, secret: string, sessionStorage: SessionStorage, session: Session);
7
+ static init(request: Request, secrets: string[]): Promise<PackSession>;
8
+ has(key: string): boolean;
9
+ get(key: string): any;
10
+ destroy(): Promise<string>;
11
+ set(key: string, value: any): void;
12
+ commit(): Promise<string>;
13
+ }
14
+ //# sourceMappingURL=session.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../src/session/session.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAI/B,qBAAa,WAAW;;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAEpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;gBAOtB,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO;WAQL,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC;IAsB5E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIzB,GAAG,CAAC,GAAG,EAAE,MAAM;IAIf,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAI1B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIlC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAG1B"}
@@ -0,0 +1,47 @@
1
+ import { createCookie, createCookieSessionStorage, } from "@shopify/remix-oxygen";
2
+ import { PACK_COOKIE_ID, PACK_COOKIE_MAX_AGE } from "../constants";
3
+ import { buildRandomUUID, hasUserConsent } from "./cookies-utils";
4
+ export class PackSession {
5
+ id;
6
+ secret;
7
+ #session;
8
+ #sessionStorage;
9
+ constructor(id, secret, sessionStorage, session) {
10
+ this.id = id;
11
+ this.secret = secret;
12
+ this.#session = session;
13
+ this.#sessionStorage = sessionStorage;
14
+ }
15
+ static async init(request, secrets) {
16
+ const storage = createCookieSessionStorage({
17
+ cookie: createCookie(PACK_COOKIE_ID, {
18
+ secure: true,
19
+ secrets,
20
+ sameSite: "none",
21
+ maxAge: PACK_COOKIE_MAX_AGE,
22
+ }),
23
+ });
24
+ const session = await storage.getSession(request.headers.get("Cookie"));
25
+ let sessionId = session.get("session_id");
26
+ if (!sessionId || !hasUserConsent(request)) {
27
+ sessionId = buildRandomUUID();
28
+ session.set("session_id", sessionId);
29
+ }
30
+ return new this(sessionId, secrets[0], storage, session);
31
+ }
32
+ has(key) {
33
+ return this.#session.has(key);
34
+ }
35
+ get(key) {
36
+ return this.#session.get(key);
37
+ }
38
+ destroy() {
39
+ return this.#sessionStorage.destroySession(this.#session);
40
+ }
41
+ set(key, value) {
42
+ this.#session.set(key, value);
43
+ }
44
+ commit() {
45
+ return this.#sessionStorage.commitSession(this.#session);
46
+ }
47
+ }
@@ -0,0 +1,15 @@
1
+ type UsePackCookiesOptions = {
2
+ /**
3
+ * If set to `false`, Shopify cookies will be removed.
4
+ * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
5
+ * Defaults to false.
6
+ **/
7
+ hasUserConsent?: boolean;
8
+ /**
9
+ * The domain scope of the cookie. Defaults to empty string.
10
+ **/
11
+ domain?: string;
12
+ };
13
+ export declare function usePackCookies(options?: UsePackCookiesOptions): void;
14
+ export {};
15
+ //# sourceMappingURL=usePackCookies.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePackCookies.d.ts","sourceRoot":"","sources":["../../src/session/usePackCookies.ts"],"names":[],"mappings":"AAIA,KAAK,qBAAqB,GAAG;IAC3B;;;;QAII;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;QAEI;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAWpE"}
@@ -0,0 +1,17 @@
1
+ import { useEffect } from "react";
2
+ import { stringify } from "worktop/cookie";
3
+ import { PACK_COOKIE_MAX_AGE, PACK_USER_CONSENT_COOKIE_ID } from "../constants";
4
+ export function usePackCookies(options) {
5
+ const { hasUserConsent = true, domain = "" } = options || {};
6
+ useEffect(() => {
7
+ setCookie(PACK_USER_CONSENT_COOKIE_ID, hasUserConsent ? "true" : "false", PACK_COOKIE_MAX_AGE, domain);
8
+ }, [hasUserConsent]);
9
+ }
10
+ function setCookie(name, value, maxage, domain) {
11
+ document.cookie = stringify(name, value, {
12
+ maxage,
13
+ domain,
14
+ samesite: "Lax",
15
+ path: "/",
16
+ });
17
+ }
@@ -0,0 +1,33 @@
1
+ import { PackClient } from "@pack/client";
2
+ import { PackSession } from "../session/session";
3
+ export interface TestInput {
4
+ testId?: string;
5
+ testHandle?: string;
6
+ testVariantId?: string;
7
+ testVariantHandle?: string;
8
+ }
9
+ export interface Test {
10
+ id: string;
11
+ handle: string;
12
+ TestVariant: {
13
+ id: string;
14
+ handle: string;
15
+ };
16
+ }
17
+ export declare function getTestInfo({ packClient, session, }: {
18
+ packClient: PackClient;
19
+ session: PackSession | undefined;
20
+ }): Promise<Test | undefined>;
21
+ export declare function getTestSession(session: PackSession | undefined, requestAbTest: TestInput | null, previewEnabled: boolean): Test | null | undefined;
22
+ export declare function setRequestAbTest(request: Request): {
23
+ testId: string;
24
+ testHandle: string;
25
+ testVariantId: string;
26
+ testVariantHandle: string;
27
+ } | null;
28
+ export declare function setTestHeaders(headers: any, options: {
29
+ test: TestInput | null | undefined;
30
+ previewEnabled: boolean;
31
+ sessionTest: Test | undefined;
32
+ }): any;
33
+ //# sourceMappingURL=test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../../src/tests/test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE;QACX,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAeD,wBAAsB,WAAW,CAAC,EAChC,UAAU,EACV,OAAO,GACR,EAAE;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;CAClC,GAAG,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CA2C5B;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,WAAW,GAAG,SAAS,EAChC,aAAa,EAAE,SAAS,GAAG,IAAI,EAC/B,cAAc,EAAE,OAAO,GACtB,IAAI,GAAG,IAAI,GAAG,SAAS,CA8BzB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO;;;;;SAmBhD;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE;IACP,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,IAAI,GAAG,SAAS,CAAC;CAC/B,OA8BF"}
@@ -0,0 +1,112 @@
1
+ const QUERY_TEST = `#graphql
2
+ query TestCurrent {
3
+ testCurrent {
4
+ id
5
+ handle
6
+ TestVariant {
7
+ id
8
+ handle
9
+ }
10
+ }
11
+ }
12
+ `;
13
+ export async function getTestInfo({ packClient, session, }) {
14
+ if (!session) {
15
+ return undefined;
16
+ }
17
+ const testSession = session.get("test");
18
+ let test = testSession?.data || undefined;
19
+ if (!testSession ||
20
+ (testSession && new Date(testSession.expire_at) < new Date())) {
21
+ // Request directly to API if it is using CDN to reduce latency
22
+ let usingCdn = false;
23
+ if (packClient.apiUrl == "https://apicdn.packdigital.com/graphql") {
24
+ packClient.apiUrl = "https://api.packdigital.com/graphql";
25
+ usingCdn = true;
26
+ }
27
+ const packClientFetch = packClient.fetch(QUERY_TEST, {});
28
+ if (usingCdn) {
29
+ // Return to CDN
30
+ packClient.apiUrl = "https://apicdn.packdigital.com/graphql";
31
+ }
32
+ const resp = await packClientFetch;
33
+ test = resp.data?.testCurrent;
34
+ // Expire on 24 hours the test cache
35
+ const expire_at = new Date();
36
+ expire_at.setHours(expire_at.getHours() + 24);
37
+ session.set("test", {
38
+ data: test || null,
39
+ expire_at: expire_at,
40
+ });
41
+ }
42
+ return test;
43
+ }
44
+ export function getTestSession(session, requestAbTest, previewEnabled) {
45
+ if (!session) {
46
+ return undefined;
47
+ }
48
+ if (requestAbTest) {
49
+ return {
50
+ id: requestAbTest.testId || "",
51
+ handle: requestAbTest.testHandle || "",
52
+ TestVariant: {
53
+ id: requestAbTest.testVariantId || "",
54
+ handle: requestAbTest.testVariantHandle || "",
55
+ },
56
+ };
57
+ }
58
+ if (previewEnabled) {
59
+ return {
60
+ id: "",
61
+ handle: "isPreview",
62
+ TestVariant: {
63
+ id: "",
64
+ handle: "isPreview",
65
+ },
66
+ };
67
+ }
68
+ const testSession = session.get("test");
69
+ return testSession?.data || null;
70
+ }
71
+ export function setRequestAbTest(request) {
72
+ const requestUrl = new URL(request.url);
73
+ const params = requestUrl.searchParams;
74
+ if (params.has("test_id") ||
75
+ params.has("test_handle") ||
76
+ params.has("test_variant_id") ||
77
+ params.has("test_variant_handle")) {
78
+ return {
79
+ testId: params.get("test_id") || "",
80
+ testHandle: params.get("test_handle") || "",
81
+ testVariantId: params.get("test_variant_id") || "",
82
+ testVariantHandle: params.get("test_variant_handle") || "",
83
+ };
84
+ }
85
+ return null;
86
+ }
87
+ export function setTestHeaders(headers, options) {
88
+ const { test, previewEnabled, sessionTest } = options;
89
+ if (test) {
90
+ if (test.testId) {
91
+ headers["X-Test-Id"] = test.testId;
92
+ }
93
+ if (test.testHandle) {
94
+ headers["X-Test-Handle"] = test.testHandle;
95
+ }
96
+ if (test.testVariantId) {
97
+ headers["X-Test-Variant-Id"] = test.testVariantId;
98
+ }
99
+ if (test.testVariantHandle) {
100
+ headers["X-Test-Variant-Handle"] = test.testVariantHandle;
101
+ }
102
+ }
103
+ else {
104
+ if (!previewEnabled && sessionTest) {
105
+ headers = {
106
+ "X-Test-Id": sessionTest?.id,
107
+ "X-Test-Variant-Id": sessionTest?.TestVariant?.id,
108
+ };
109
+ }
110
+ }
111
+ return headers;
112
+ }
@@ -0,0 +1,8 @@
1
+ import { Test } from "./test";
2
+ export declare function useAbTest(): Test | null;
3
+ export declare function useAbTestSessionId(): string;
4
+ export declare function useAbTestId(): string | undefined;
5
+ export declare function useAbTestHandle(): string | undefined;
6
+ export declare function useAbTestVariantId(): string | undefined;
7
+ export declare function useAbTestVariantHandle(): string | undefined;
8
+ //# sourceMappingURL=testHooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"testHooks.d.ts","sourceRoot":"","sources":["../../src/tests/testHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,wBAAgB,SAAS,IAAI,IAAI,GAAG,IAAI,CAWvC;AAED,wBAAgB,kBAAkB,IAAI,MAAM,CAW3C;AAED,wBAAgB,WAAW,IAAI,MAAM,GAAG,SAAS,CAIhD;AAED,wBAAgB,eAAe,IAAI,MAAM,GAAG,SAAS,CAIpD;AAED,wBAAgB,kBAAkB,IAAI,MAAM,GAAG,SAAS,CAIvD;AAED,wBAAgB,sBAAsB,IAAI,MAAM,GAAG,SAAS,CAI3D"}
@@ -0,0 +1,33 @@
1
+ import { useRouteLoaderData } from "@remix-run/react";
2
+ export function useAbTest() {
3
+ // @ts-ignore
4
+ const { abTest: test } = useRouteLoaderData("root");
5
+ if (test === undefined) {
6
+ throw new Error("No A/B test found, are you sure you have call ...pack.getPackSessionData() on root loader return?");
7
+ }
8
+ return test;
9
+ }
10
+ export function useAbTestSessionId() {
11
+ // @ts-ignore
12
+ const { sessionId } = useRouteLoaderData("root");
13
+ if (!sessionId) {
14
+ throw new Error("No Session ID found, are you sure you have call ...pack.getPackSessionData() on root loader return?");
15
+ }
16
+ return sessionId;
17
+ }
18
+ export function useAbTestId() {
19
+ const test = useAbTest();
20
+ return test?.id;
21
+ }
22
+ export function useAbTestHandle() {
23
+ const test = useAbTest();
24
+ return test?.handle;
25
+ }
26
+ export function useAbTestVariantId() {
27
+ const test = useAbTest();
28
+ return test?.TestVariant?.id;
29
+ }
30
+ export function useAbTestVariantHandle() {
31
+ const test = useAbTest();
32
+ return test?.TestVariant?.handle;
33
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pack/hydrogen",
3
3
  "description": "Pack Hydrogen",
4
- "version": "0.1.1",
4
+ "version": "0.1.3-ab-beta.2.0",
5
5
  "exports": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
7
7
  "engines": {
@@ -22,13 +22,15 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@pack/client": "^0.0.7",
25
+ "@pack/client": "^0.0.8-ab-beta.2.0",
26
+ "@pack/packlytics": "^0.0.1-ab-beta.2.0",
26
27
  "@shopify/hydrogen": "^2023.10.2"
27
28
  },
28
29
  "devDependencies": {
29
30
  "@remix-run/server-runtime": "^2.0.0",
30
31
  "@shopify/oxygen-workers-types": "^4.0.0",
31
- "@shopify/remix-oxygen": "^2.0.1"
32
+ "@shopify/remix-oxygen": "^2.0.1",
33
+ "@types/node": "^20.11.17"
32
34
  },
33
35
  "peerDependencies": {
34
36
  "react": "^18.0.0"
@@ -1,12 +0,0 @@
1
- import { type Session, type SessionStorage } from '@shopify/remix-oxygen';
2
- export declare class PreviewSession {
3
- #private;
4
- constructor(sessionStorage: SessionStorage, session: Session);
5
- static init(request: Request, secrets: string[]): Promise<PreviewSession>;
6
- has(key: string): boolean;
7
- get(key: string): any;
8
- destroy(): Promise<string>;
9
- set(key: string, value: any): void;
10
- commit(): Promise<string>;
11
- }
12
- //# sourceMappingURL=preview-session.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"preview-session.d.ts","sourceRoot":"","sources":["../../src/preview/preview-session.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,OAAO,EACZ,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAA;AAE9B,qBAAa,cAAc;;gBAIb,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO;WAK/C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC;IAe/E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIzB,GAAG,CAAC,GAAG,EAAE,MAAM;IAIf,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAI1B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAIlC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAG1B"}
@@ -1,36 +0,0 @@
1
- import { createCookieSessionStorage, } from '@shopify/remix-oxygen';
2
- export class PreviewSession {
3
- #sessionStorage;
4
- #session;
5
- constructor(sessionStorage, session) {
6
- this.#sessionStorage = sessionStorage;
7
- this.#session = session;
8
- }
9
- static async init(request, secrets) {
10
- const storage = createCookieSessionStorage({
11
- cookie: {
12
- name: '__preview',
13
- sameSite: 'none',
14
- secure: true,
15
- secrets,
16
- },
17
- });
18
- const session = await storage.getSession(request.headers.get('Cookie'));
19
- return new this(storage, session);
20
- }
21
- has(key) {
22
- return this.#session.has(key);
23
- }
24
- get(key) {
25
- return this.#session.get(key);
26
- }
27
- destroy() {
28
- return this.#sessionStorage.destroySession(this.#session);
29
- }
30
- set(key, value) {
31
- this.#session.set(key, value);
32
- }
33
- commit() {
34
- return this.#sessionStorage.commitSession(this.#session);
35
- }
36
- }