@shopify/hydrogen 1.0.0-alpha.22 → 1.0.2

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.d.ts

@@ -0,0 +1,26 @@
+export declare const ShopifyAnalyticsConstants: {
+    pageType: {
+        article: string;
+        blog: string;
+        captcha: string;
+        cart: string;
+        collection: string;
+        customersAccount: string;
+        customersActivateAccount: string;
+        customersAddresses: string;
+        customersLogin: string;
+        customersOrder: string;
+        customersRegister: string;
+        customersResetPassword: string;
+        giftCard: string;
+        home: string;
+        listCollections: string;
+        forbidden: string;
+        notFound: string;
+        page: string;
+        password: string;
+        product: string;
+        policy: string;
+        search: string;
+    };
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/const.js

@@ -0,0 +1,49 @@
+// Shopify analytics constants
+const article = 'article';
+const blog = 'blog';
+const captcha = 'captcha';
+const cart = 'cart';
+const collection = 'collection';
+const customersAccount = 'customers/account';
+const customersActivateAccount = 'customers/activate_account';
+const customersAddresses = 'customers/addresses';
+const customersLogin = 'customers/login';
+const customersOrder = 'customers/order';
+const customersRegister = 'customers/register';
+const customersResetPassword = 'customers/reset_password';
+const giftCard = 'gift_card';
+const home = 'index';
+const listCollections = 'list-collections';
+const forbidden = '403';
+const notFound = '404';
+const page = 'page';
+const password = 'password';
+const product = 'product';
+const policy = 'policy';
+const search = 'search';
+export const ShopifyAnalyticsConstants = {
+    pageType: {
+        article,
+        blog,
+        captcha,
+        cart,
+        collection,
+        customersAccount,
+        customersActivateAccount,
+        customersAddresses,
+        customersLogin,
+        customersOrder,
+        customersRegister,
+        customersResetPassword,
+        giftCard,
+        home,
+        listCollections,
+        forbidden,
+        notFound,
+        page,
+        password,
+        product,
+        policy,
+        search,
+    },
+};

package/dist/esnext/foundation/Analytics/connectors/Shopify/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function buildUUID(): string;
+export declare function hexTime(): string;
+export declare function addDataIf(keyValuePairs: Record<string, string | number | Boolean>, formattedData: any): any;

package/dist/esnext/foundation/Analytics/connectors/Shopify/utils.js

@@ -0,0 +1,56 @@
+const zeros = '00000000';
+const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
+export function buildUUID() {
+    let hash = '';
+    try {
+        const crypto = window.crypto;
+        const randomValuesArray = new Uint16Array(31);
+        crypto.getRandomValues(randomValuesArray);
+        // Generate a strong UUID
+        let i = 0;
+        hash = tokenHash
+            .replace(/[x]/g, (c, ...args) => {
+            const r = randomValuesArray[i] % 16;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            i++;
+            return v.toString(16);
+        })
+            .toUpperCase();
+    }
+    catch (err) {
+        // crypto not available, generate weak UUID
+        hash = tokenHash
+            .replace(/[x]/g, (c, ...args) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        })
+            .toUpperCase();
+    }
+    return `${hexTime()}-${hash}`;
+}
+export function hexTime() {
+    // 32 bit representations of new Date().getTime() and performance.now()
+    let dateNumber = 0;
+    let perfNumber = 0;
+    // Result of zero-fill right shift is always positive
+    dateNumber = new Date().getTime() >>> 0;
+    try {
+        perfNumber = performance.now() >>> 0;
+    }
+    catch (err) {
+        perfNumber = 0;
+    }
+    const output = Math.abs(dateNumber + perfNumber)
+        .toString(16)
+        .toLowerCase();
+    return zeros.substr(0, 8 - output.length) + output;
+}
+export function addDataIf(keyValuePairs, formattedData) {
+    Object.entries(keyValuePairs).forEach(([key, value]) => {
+        if (value) {
+            formattedData[key] = value;
+        }
+    });
+    return formattedData;
+}

package/dist/esnext/foundation/Analytics/const.d.ts

@@ -0,0 +1,9 @@
+export declare const eventNames: {
+    PAGE_VIEW: string;
+    VIEWED_PRODUCT: string;
+    ADD_TO_CART: string;
+    REMOVE_FROM_CART: string;
+    UPDATE_CART: string;
+    DISCOUNT_CODE_UPDATED: string;
+    PERFORMANCE: string;
+};

package/dist/esnext/foundation/Analytics/const.js

@@ -0,0 +1,9 @@
+export const eventNames = {
+    PAGE_VIEW: 'page-view',
+    VIEWED_PRODUCT: 'viewed-product',
+    ADD_TO_CART: 'add-to-cart',
+    REMOVE_FROM_CART: 'remove-from-cart',
+    UPDATE_CART: 'update-cart',
+    DISCOUNT_CODE_UPDATED: 'discount-code-updated',
+    PERFORMANCE: 'performance',
+};

package/dist/esnext/foundation/Analytics/hook.d.ts

@@ -0,0 +1 @@
+export declare function useServerAnalytics(data?: any): any;

package/dist/esnext/foundation/Analytics/hook.js

@@ -0,0 +1,9 @@
+import { useServerRequest } from '../ServerRequestProvider';
+import { mergeDeep } from './utils';
+export function useServerAnalytics(data) {
+    const request = useServerRequest();
+    if (data) {
+        request.ctx.analyticsData = mergeDeep(request.ctx.analyticsData, data);
+    }
+    return request.ctx.analyticsData;
+}

package/dist/esnext/foundation/Analytics/index.d.ts

@@ -0,0 +1 @@
+export { ClientAnalytics } from './ClientAnalytics';

package/dist/esnext/foundation/Analytics/index.js

@@ -0,0 +1 @@
+export { ClientAnalytics } from './ClientAnalytics';

package/dist/esnext/foundation/Analytics/types.d.ts

@@ -0,0 +1,5 @@
+export declare type Subscriber = {
+    unsubscribe: () => void;
+};
+export declare type SubscriberFunction = (payload: any) => void;
+export declare type Subscribers = Record<string, Record<string, SubscriberFunction>>;

package/dist/esnext/foundation/Analytics/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getNamedspacedEventname(eventname: string): string;
+export declare function isObject(item: any): any;
+export declare function mergeDeep(target: any, ...sources: any[]): any;

package/dist/esnext/foundation/Analytics/utils.js

@@ -0,0 +1,29 @@
+import { eventNames } from './const';
+const RESERVED_EVENT_NAMES = Object.values(eventNames);
+export function getNamedspacedEventname(eventname) {
+    // Any event name that is not in the reserved space will be prefix with `c-`
+    return RESERVED_EVENT_NAMES.indexOf(eventname) === -1
+        ? `c-${eventname}`
+        : eventname;
+}
+export function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+export function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    return mergeDeep(target, ...sources);
+}

package/dist/esnext/foundation/AnalyticsErrorBoundary.client.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export default function AnalyticsErrorBoundary({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/dist/esnext/foundation/AnalyticsErrorBoundary.client.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+export default function AnalyticsErrorBoundary({ children, }) {
+    // Analytics fail to load, most likely due to an ad blocker
+    return (React.createElement(ErrorBoundary, { fallbackRender: () => {
+            return null;
+        } }, children));
+}

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.d.ts

@@ -0,0 +1,2 @@
+import { ResourceGetter } from '../../utilities/apiRoutes';
+export declare function getBuiltInRoute(url: URL): ResourceGetter | null;

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.js

@@ -0,0 +1,23 @@
+import { EVENT_PATHNAME, EVENT_PATHNAME_REGEX } from '../../constants';
+import { ServerAnalyticsRoute } from '../Analytics/ServerAnalyticsRoute';
+import { HealthCheck } from './healthCheck';
+const builtInRoutes = [
+    {
+        pathname: EVENT_PATHNAME,
+        regex: EVENT_PATHNAME_REGEX,
+        resource: ServerAnalyticsRoute,
+    },
+    {
+        pathname: '/__health',
+        resource: HealthCheck,
+    },
+];
+export function getBuiltInRoute(url) {
+    for (const route of builtInRoutes) {
+        if (url.pathname === route.pathname ||
+            (route.regex && route.regex.test(url.pathname))) {
+            return route.resource;
+        }
+    }
+    return null;
+}

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.d.ts

@@ -0,0 +1 @@
+export declare function HealthCheck(): Promise<Response>;

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.js

@@ -0,0 +1,3 @@
+export async function HealthCheck() {
+    return new Response(null, { status: 200 });
+}

package/dist/esnext/foundation/Cache/cache-sub-request.d.ts

@@ -0,0 +1,17 @@
+import type { QueryKey, CachingStrategy } from '../../types';
+export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(key: QueryKey, response: Response): boolean;

package/dist/esnext/foundation/Cache/cache-sub-request.js

@@ -0,0 +1,64 @@
+import { getCache } from '../runtime';
+import { hashKey } from '../../utilities/hash';
+import * as CacheApi from './cache';
+import { CacheShort } from './strategies';
+/**
+ * Wrapper Cache functions for sub queries
+ */
+/**
+ * Cache API is weird. We just need a full URL, so we make one up.
+ */
+function getKeyUrl(key) {
+    return `https://shopify.dev/?${key}`;
+}
+function getCacheOption(userCacheOptions) {
+    return userCacheOptions || CacheShort();
+}
+export function generateSubRequestCacheControlHeader(userCacheOptions) {
+    return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));
+}
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export async function getItemFromCache(key) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = await CacheApi.getItemFromCache(request);
+    if (!response) {
+        return;
+    }
+    return [await response.json(), response];
+}
+/**
+ * Put an item into the cache.
+ */
+export async function setItemInCache(key, value, userCacheOptions) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    const response = new Response(JSON.stringify(value));
+    await CacheApi.setItemInCache(request, response, getCacheOption(userCacheOptions));
+}
+export async function deleteItemFromCache(key) {
+    const cache = getCache();
+    if (!cache)
+        return;
+    const url = getKeyUrl(hashKey(key));
+    const request = new Request(url);
+    await CacheApi.deleteItemFromCache(request);
+}
+/**
+ * Manually check the response to see if it's stale.
+ */
+export function isStale(key, response) {
+    return CacheApi.isStale(new Request(getKeyUrl(hashKey(key))), response);
+}

package/dist/esnext/foundation/Cache/cache.d.ts

@@ -0,0 +1,17 @@
+import type { CachingStrategy } from '../../types';
+export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export declare function getItemFromCache(request: Request): Promise<Response | undefined>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(request: Request, response: Response, userCacheOptions: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(request: Request): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(request: Request, response: Response): boolean;

package/dist/esnext/foundation/Cache/cache.js

@@ -0,0 +1,127 @@
+import { getCache } from '../runtime';
+import { CacheShort, generateCacheControlHeader } from './strategies';
+import { logCacheApiStatus } from '../../utilities/log';
+function getCacheControlSetting(userCacheOptions, options) {
+    if (userCacheOptions && options) {
+        return {
+            ...userCacheOptions,
+            ...options,
+        };
+    }
+    else {
+        return userCacheOptions || CacheShort();
+    }
+}
+export function generateDefaultCacheControlHeader(userCacheOptions) {
+    return generateCacheControlHeader(getCacheControlSetting(userCacheOptions));
+}
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+export async function getItemFromCache(request) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    const response = await cache.match(request);
+    if (!response) {
+        logCacheApiStatus('MISS', request.url);
+        return;
+    }
+    logCacheApiStatus('HIT', request.url);
+    return response;
+}
+/**
+ * Put an item into the cache.
+ */
+export async function setItemInCache(request, response, userCacheOptions) {
+    const cache = getCache();
+    if (!cache) {
+        return;
+    }
+    /**
+     * We are manually managing staled request by adding this workaround.
+     * Why? cache control header support is dependent on hosting platform
+     *
+     * For example:
+     *
+     * Cloudflare's Cache API does not support `stale-while-revalidate`.
+     * Cloudflare cache control header has a very odd behaviour.
+     * Say we have the following cache control header on a request:
+     *
+     *   public, max-age=15, stale-while-revalidate=30
+     *
+     * When there is a cache.match HIT, the cache control header would become
+     *
+     *   public, max-age=14400, stale-while-revalidate=30
+     *
+     * == `stale-while-revalidate` workaround ==
+     * Update response max-age so that:
+     *
+     *   max-age = max-age + stale-while-revalidate
+     *
+     * For example:
+     *
+     *   public, max-age=1, stale-while-revalidate=9
+     *                    |
+     *                    V
+     *   public, max-age=10, stale-while-revalidate=9
+     *
+     * Store the following information in the response header:
+     *
+     *   cache-put-date   - UTC time string of when this request is PUT into cache
+     *
+     * Note on `cache-put-date`: The `response.headers.get('date')` isn't static. I am
+     * not positive what date this is returning but it is never over 500 ms
+     * after subtracting from the current timestamp.
+     *
+     * `isStale` function will use the above information to test for stale-ness of a cached response
+     */
+    const cacheControl = getCacheControlSetting(userCacheOptions);
+    // The padded cache-control to mimic stale-while-revalidate
+    request.headers.set('cache-control', generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl, {
+        maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
+    })));
+    // The cache-control we want to set on response
+    const cacheControlString = generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl));
+    // CF will override cache-control, so we need to keep a
+    // non-modified real-cache-control
+    response.headers.set('cache-control', cacheControlString);
+    response.headers.set('real-cache-control', cacheControlString);
+    response.headers.set('cache-put-date', new Date().toUTCString());
+    logCacheApiStatus('PUT', request.url);
+    await cache.put(request, response);
+}
+export async function deleteItemFromCache(request) {
+    const cache = getCache();
+    if (!cache)
+        return;
+    logCacheApiStatus('DELETE', request.url);
+    await cache.delete(request);
+}
+/**
+ * Manually check the response to see if it's stale.
+ */
+export function isStale(request, response) {
+    const responseDate = response.headers.get('cache-put-date');
+    const cacheControl = response.headers.get('real-cache-control');
+    let responseMaxAge = 0;
+    if (cacheControl) {
+        const maxAgeMatch = cacheControl.match(/max-age=(\d*)/);
+        if (maxAgeMatch && maxAgeMatch.length > 1) {
+            responseMaxAge = parseFloat(maxAgeMatch[1]);
+        }
+    }
+    if (!responseDate) {
+        return false;
+    }
+    const ageInMs = new Date().valueOf() - new Date(responseDate).valueOf();
+    const age = ageInMs / 1000;
+    const result = age > responseMaxAge;
+    if (result) {
+        logCacheApiStatus('STALE', request.url);
+    }
+    return result;
+}

package/dist/esnext/foundation/Cache/strategies/index.d.ts

@@ -0,0 +1,7 @@
+import type { CachingStrategy, AllCacheOptions, NoStoreStrategy } from '../../../types';
+export declare const NO_STORE = "no-store";
+export declare function generateCacheControlHeader(cacheOptions: CachingStrategy): string;
+export declare function CacheNone(): NoStoreStrategy;
+export declare function CacheShort(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheLong(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheCustom(overrideOptions: CachingStrategy): AllCacheOptions;

package/dist/esnext/foundation/Cache/strategies/index.js

@@ -0,0 +1,54 @@
+const PUBLIC = 'public';
+const PRIVATE = 'private';
+export const NO_STORE = 'no-store';
+const optionMapping = {
+    maxAge: 'max-age',
+    staleWhileRevalidate: 'stale-while-revalidate',
+    sMaxAge: 's-maxage',
+    staleIfError: 'stale-if-error',
+};
+export function generateCacheControlHeader(cacheOptions) {
+    const cacheControl = [];
+    Object.keys(cacheOptions).forEach((key) => {
+        if (key === 'mode') {
+            cacheControl.push(cacheOptions[key]);
+        }
+        else if (optionMapping[key]) {
+            cacheControl.push(`${optionMapping[key]}=${cacheOptions[key]}`);
+        }
+    });
+    return cacheControl.join(', ');
+}
+export function CacheNone() {
+    return {
+        mode: NO_STORE,
+    };
+}
+function guardExpirableModeType(overrideOptions) {
+    if (overrideOptions?.mode &&
+        overrideOptions?.mode !== PUBLIC &&
+        overrideOptions?.mode !== PRIVATE) {
+        throw Error("'mode' must be either 'public' or 'private'");
+    }
+}
+export function CacheShort(overrideOptions) {
+    guardExpirableModeType(overrideOptions);
+    return {
+        mode: PUBLIC,
+        maxAge: 1,
+        staleWhileRevalidate: 9,
+        ...overrideOptions,
+    };
+}
+export function CacheLong(overrideOptions) {
+    guardExpirableModeType(overrideOptions);
+    return {
+        mode: PUBLIC,
+        maxAge: 3600,
+        staleWhileRevalidate: 82800,
+        ...overrideOptions,
+    };
+}
+export function CacheCustom(overrideOptions) {
+    return overrideOptions;
+}

package/dist/esnext/foundation/Cookie/Cookie.d.ts

@@ -0,0 +1,48 @@
+export declare type CookieOptions = {
+    /** Whether to secure the cookie so that [client-side JavaScript can't read the cookie](https://owasp.org/www-community/HttpOnly).
+     */
+    httpOnly?: boolean;
+    /** Whether to secure the cookie so that the browser only sends the cookie over HTTPS. Some
+     * browsers [don't work with secure cookies on localhost](https://owasp.org/www-community/controls/SecureCookieAttribute).
+     */
+    secure?: boolean;
+    /** Declares that the cookie should be restricted to a first-party
+     * or [same-site](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite) context.
+     */
+    sameSite?: 'Lax' | 'Strict' | 'None';
+    /** Tells the browser that the cookie should only be sent to the server if it's
+     * within the [defined path](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#path_attribute).
+     */
+    path?: string;
+    /** [A date on which the cookie will expire](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#define_the_lifetime_of_a_cookie).
+     * If the date is in the past, then the browser will remove the cookie.
+     */
+    expires?: Date;
+    /** Secures the cookie so that it's only used on [specific domains](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#domain_attribute).
+     */
+    domain?: string;
+    /** The [number of seconds until the cookie expires](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#max-agenumber).
+     * `maxAge` takes precedence over `expires` if both are defined.
+     */
+    maxAge?: number;
+};
+/** The `Cookie` component helps you build your own custom cookie and session implementations. All
+ * [Hydrogen session storage mechanisms](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions#types-of-session-storage) use the
+ * same configuration options as what's available in `Cookie`.
+ */
+export declare class Cookie {
+    /** The name of the cookie stored in the browser. */
+    name: string;
+    /** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+    options?: CookieOptions;
+    data: Record<string, any>;
+    constructor(name: string, options?: CookieOptions);
+    parse(cookie: string): Record<string, any>;
+    set(key: string, value: string): void;
+    setAll(data: Record<string, string>): void;
+    serialize(): string;
+    destroy(): string;
+    get expires(): number;
+    setSessionid(sid: string): void;
+    getSessionId(request: Request): string | null;
+}