@shopify/hydrogen 1.6.5 → 2.0.0-alpha.2

package/dist/development/index.cjs

@@ -0,0 +1,637 @@
+'use strict';
+
+var hydrogenReact = require('@shopify/hydrogen-react');
+var serverRuntime = require('@remix-run/server-runtime');
+
+// src/storefront.ts
+
+// src/utils/hash.ts
+function hashKey(queryKey) {
+  const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
+  let hash = "";
+  for (const key of rawKeys) {
+    if (key != null) {
+      if (typeof key === "object") {
+        if (!!key.body && typeof key.body === "string") {
+          hash += key.body;
+        } else {
+          hash += JSON.stringify(key);
+        }
+      } else {
+        hash += key;
+      }
+    }
+  }
+  return hash;
+}
+
+// src/cache/strategies.ts
+var PUBLIC = "public";
+var PRIVATE = "private";
+var NO_STORE = "no-store";
+var optionMapping = {
+  maxAge: "max-age",
+  staleWhileRevalidate: "stale-while-revalidate",
+  sMaxAge: "s-maxage",
+  staleIfError: "stale-if-error"
+};
+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(", ");
+}
+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'");
+  }
+}
+function CacheShort(overrideOptions) {
+  guardExpirableModeType(overrideOptions);
+  return {
+    mode: PUBLIC,
+    maxAge: 1,
+    staleWhileRevalidate: 9,
+    ...overrideOptions
+  };
+}
+function CacheLong(overrideOptions) {
+  guardExpirableModeType(overrideOptions);
+  return {
+    mode: PUBLIC,
+    maxAge: 3600,
+    staleWhileRevalidate: 82800,
+    ...overrideOptions
+  };
+}
+function CacheCustom(overrideOptions) {
+  return overrideOptions;
+}
+
+// src/cache/api.ts
+function logCacheApiStatus(status, url) {
+}
+function getCacheControlSetting(userCacheOptions, options) {
+  if (userCacheOptions && options) {
+    return {
+      ...userCacheOptions,
+      ...options
+    };
+  } else {
+    return userCacheOptions || CacheShort();
+  }
+}
+function generateDefaultCacheControlHeader(userCacheOptions) {
+  return generateCacheControlHeader(getCacheControlSetting(userCacheOptions));
+}
+async function getItem(cache, request) {
+  if (!cache)
+    return;
+  const response = await cache.match(request);
+  if (!response) {
+    logCacheApiStatus("MISS", request.url);
+    return;
+  }
+  logCacheApiStatus("HIT", request.url);
+  return response;
+}
+async function setItem(cache, request, response, userCacheOptions) {
+  if (!cache)
+    return;
+  const cacheControl = getCacheControlSetting(userCacheOptions);
+  request.headers.set(
+    "cache-control",
+    generateDefaultCacheControlHeader(
+      getCacheControlSetting(cacheControl, {
+        maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0)
+      })
+    )
+  );
+  const cacheControlString = generateDefaultCacheControlHeader(
+    getCacheControlSetting(cacheControl)
+  );
+  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);
+}
+async function deleteItem(cache, request) {
+  if (!cache)
+    return;
+  logCacheApiStatus("DELETE", request.url);
+  await cache.delete(request);
+}
+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 / 1e3;
+  const result = age > responseMaxAge;
+  if (result) {
+    logCacheApiStatus("STALE", request.url);
+  }
+  return result;
+}
+var CacheAPI = {
+  get: getItem,
+  set: setItem,
+  delete: deleteItem,
+  generateDefaultCacheControlHeader,
+  isStale
+};
+
+// src/cache/sub-request.ts
+function getKeyUrl(key) {
+  return `https://shopify.dev/?${key}`;
+}
+function getCacheOption(userCacheOptions) {
+  return userCacheOptions || CacheShort();
+}
+async function getItemFromCache(cache, key) {
+  if (!cache)
+    return;
+  const url = getKeyUrl(key);
+  const request = new Request(url);
+  const response = await CacheAPI.get(cache, request);
+  if (!response) {
+    return;
+  }
+  return [await response.json(), response];
+}
+async function setItemInCache(cache, key, value, userCacheOptions) {
+  if (!cache)
+    return;
+  const url = getKeyUrl(key);
+  const request = new Request(url);
+  const response = new Response(JSON.stringify(value));
+  await CacheAPI.set(
+    cache,
+    request,
+    response,
+    getCacheOption(userCacheOptions)
+  );
+}
+function isStale2(key, response) {
+  return CacheAPI.isStale(new Request(getKeyUrl(key)), response);
+}
+
+// src/cache/fetch.ts
+function serializeResponse(body, response) {
+  return [
+    body,
+    {
+      status: response.status,
+      statusText: response.statusText,
+      headers: Array.from(response.headers.entries())
+    }
+  ];
+}
+var checkGraphQLErrors = (body) => !body?.errors;
+var swrLock = /* @__PURE__ */ new Set();
+async function fetchWithServerCache(url, requestInit, {
+  cacheInstance,
+  cache: cacheOptions,
+  cacheKey = [url, requestInit],
+  shouldCacheResponse = () => true,
+  waitUntil,
+  returnType = "json"
+} = {}) {
+  if (!cacheOptions && (!requestInit.method || requestInit.method === "GET")) {
+    cacheOptions = CacheShort();
+  }
+  const doFetch = async () => {
+    const response2 = await fetch(url, requestInit);
+    let data;
+    try {
+      data = await response2[returnType]();
+    } catch {
+      data = await response2.text();
+    }
+    return [data, response2];
+  };
+  if (!cacheInstance || !cacheKey || !cacheOptions)
+    return doFetch();
+  const key = hashKey([
+    ...typeof cacheKey === "string" ? [cacheKey] : cacheKey
+  ]);
+  const cachedItem = await getItemFromCache(cacheInstance, key);
+  if (cachedItem) {
+    const [cachedValue, cacheInfo] = cachedItem;
+    if (!swrLock.has(key) && isStale2(key, cacheInfo)) {
+      swrLock.add(key);
+      const revalidatingPromise = Promise.resolve().then(async () => {
+        try {
+          const [body3, response2] = await doFetch();
+          if (shouldCacheResponse(body3, response2)) {
+            await setItemInCache(
+              cacheInstance,
+              key,
+              serializeResponse(body3, response2),
+              cacheOptions
+            );
+          }
+        } catch (error) {
+          if (error.message) {
+            error.message = "SWR in sub-request failed: " + error.message;
+          }
+          console.error(error);
+        } finally {
+          swrLock.delete(key);
+        }
+      });
+      waitUntil?.(revalidatingPromise);
+    }
+    const [body2, init] = cachedValue;
+    return [body2, new Response(body2, init)];
+  }
+  const [body, response] = await doFetch();
+  if (shouldCacheResponse(body, response)) {
+    const setItemInCachePromise = setItemInCache(
+      cacheInstance,
+      key,
+      serializeResponse(body, response),
+      cacheOptions
+    );
+    waitUntil?.(setItemInCachePromise);
+  }
+  return [body, response];
+}
+
+// src/constants.ts
+var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
+var STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
+
+// src/utils/uuid.ts
+function generateUUID() {
+  if (typeof crypto !== "undefined" && !!crypto.randomUUID) {
+    return crypto.randomUUID();
+  } else {
+    return `weak-${Math.random().toString(16).substring(2)}`;
+  }
+}
+
+// src/utils/parse-json.ts
+function parseJSON(json) {
+  if (String(json).includes("__proto__"))
+    return JSON.parse(json, noproto);
+  return JSON.parse(json);
+}
+function noproto(k, v) {
+  if (k !== "__proto__")
+    return v;
+}
+
+// src/utils/warning.ts
+var warnings = /* @__PURE__ */ new Set();
+var warnOnce = (string) => {
+  if (!warnings.has(string)) {
+    console.warn(string);
+    warnings.add(string);
+  }
+};
+
+// src/storefront.ts
+var StorefrontApiError = class extends Error {
+};
+var isStorefrontApiError = (error) => error instanceof StorefrontApiError;
+var isQueryRE = /(^|}\s)query[\s({]/im;
+var isMutationRE = /(^|}\s)mutation[\s({]/im;
+function minifyQuery(string) {
+  return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
+}
+function createStorefrontClient({
+  cache,
+  waitUntil,
+  buyerIp,
+  i18n = { language: "EN", country: "US" },
+  requestGroupId = generateUUID(),
+  ...clientOptions
+}) {
+  if (!cache) {
+    warnOnce(
+      "Storefront API client created without a cache instance. This may slow down your sub-requests."
+    );
+  }
+  clientOptions.storeDomain = clientOptions.storeDomain.replace(
+    ".myshopify.com",
+    ""
+  );
+  const {
+    getPublicTokenHeaders,
+    getPrivateTokenHeaders,
+    getStorefrontApiUrl,
+    getShopifyDomain
+  } = hydrogenReact.createStorefrontClient(clientOptions);
+  const getHeaders = clientOptions.privateStorefrontToken ? getPrivateTokenHeaders : getPublicTokenHeaders;
+  const defaultHeaders = getHeaders({ contentType: "json" });
+  defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = requestGroupId;
+  if (buyerIp)
+    defaultHeaders[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+  async function fetchStorefrontApi({
+    query,
+    mutation,
+    variables,
+    cache: cacheOptions,
+    headers = [],
+    storefrontApiVersion
+  }) {
+    const userHeaders = headers instanceof Headers ? Object.fromEntries(headers.entries()) : Array.isArray(headers) ? Object.fromEntries(headers) : headers;
+    query = query ?? mutation;
+    const queryVariables = { ...variables };
+    if (i18n) {
+      if (!variables?.country && /\$country/.test(query)) {
+        queryVariables.country = i18n.country;
+      }
+      if (!variables?.language && /\$language/.test(query)) {
+        queryVariables.language = i18n.language;
+      }
+    }
+    const url = getStorefrontApiUrl({ storefrontApiVersion });
+    const requestInit = {
+      method: "POST",
+      headers: { ...defaultHeaders, ...userHeaders },
+      body: JSON.stringify({
+        query,
+        variables: queryVariables
+      })
+    };
+    const [body, response] = await fetchWithServerCache(url, requestInit, {
+      cacheInstance: mutation ? void 0 : cache,
+      cache: cacheOptions || CacheShort(),
+      shouldCacheResponse: checkGraphQLErrors,
+      waitUntil
+    });
+    if (!response.ok) {
+      let errors2;
+      try {
+        errors2 = parseJSON(body);
+      } catch (_e) {
+        errors2 = [{ message: body }];
+      }
+      throwError(response, errors2);
+    }
+    const { data, errors } = body;
+    if (errors?.length)
+      throwError(response, errors, StorefrontApiError);
+    return data;
+  }
+  return {
+    storefront: {
+      query: (query, payload) => {
+        query = minifyQuery(query);
+        if (isMutationRE.test(query))
+          throw new Error("storefront.query cannot execute mutations");
+        return fetchStorefrontApi({ ...payload, query });
+      },
+      mutate: (mutation, payload) => {
+        mutation = minifyQuery(mutation);
+        if (isQueryRE.test(mutation))
+          throw new Error("storefront.mutate cannot execute queries");
+        return fetchStorefrontApi({ ...payload, mutation });
+      },
+      cache,
+      CacheNone,
+      CacheLong,
+      CacheShort,
+      CacheCustom,
+      generateCacheControlHeader,
+      getPublicTokenHeaders,
+      getPrivateTokenHeaders,
+      getShopifyDomain,
+      getApiUrl: getStorefrontApiUrl,
+      isApiError: isStorefrontApiError,
+      i18n: { pathPrefix: "", ...i18n }
+    }
+  };
+}
+function throwError(response, errors, ErrorConstructor = Error) {
+  const reqId = response.headers.get("x-request-id");
+  const reqIdMessage = reqId ? ` - Request ID: ${reqId}` : "";
+  if (errors) {
+    const errorMessages = typeof errors === "string" ? errors : errors.map((error) => error.message).join("\n");
+    throw new ErrorConstructor(errorMessages + reqIdMessage);
+  }
+  throw new ErrorConstructor(
+    `API response error: ${response.status}` + reqIdMessage
+  );
+}
+
+// src/cache/in-memory.ts
+var InMemoryCache = class {
+  #store;
+  constructor() {
+    this.#store = /* @__PURE__ */ new Map();
+  }
+  add(request) {
+    throw new Error("Method not implemented. Use `put` instead.");
+  }
+  addAll(requests) {
+    throw new Error("Method not implemented. Use `put` instead.");
+  }
+  matchAll(request, options) {
+    throw new Error("Method not implemented. Use `match` instead.");
+  }
+  async put(request, response) {
+    if (request.method !== "GET") {
+      throw new TypeError("Cannot cache response to non-GET request.");
+    }
+    if (response.status === 206) {
+      throw new TypeError(
+        "Cannot cache response to a range request (206 Partial Content)."
+      );
+    }
+    if (response.headers.get("vary")?.includes("*")) {
+      throw new TypeError("Cannot cache response with 'Vary: *' header.");
+    }
+    this.#store.set(request.url, {
+      body: new Uint8Array(await response.arrayBuffer()),
+      status: response.status,
+      headers: [...response.headers],
+      timestamp: Date.now()
+    });
+  }
+  async match(request) {
+    if (request.method !== "GET")
+      return;
+    const match = this.#store.get(request.url);
+    if (!match) {
+      return;
+    }
+    const { body, timestamp, ...metadata } = match;
+    const headers = new Headers(metadata.headers);
+    const cacheControl = headers.get("cache-control") || headers.get("real-cache-control") || "";
+    const maxAge = parseInt(
+      cacheControl.match(/max-age=(\d+)/)?.[1] || "0",
+      10
+    );
+    const swr = parseInt(
+      cacheControl.match(/stale-while-revalidate=(\d+)/)?.[1] || "0",
+      10
+    );
+    const age = (Date.now() - timestamp) / 1e3;
+    const isMiss = age > maxAge + swr;
+    if (isMiss) {
+      this.#store.delete(request.url);
+      return;
+    }
+    const isStale3 = age > maxAge;
+    headers.set("cache", isStale3 ? "STALE" : "HIT");
+    headers.set("date", new Date(timestamp).toUTCString());
+    return new Response(body, {
+      status: metadata.status ?? 200,
+      headers
+    });
+  }
+  async delete(request) {
+    if (this.#store.has(request.url)) {
+      this.#store.delete(request.url);
+      return true;
+    }
+    return false;
+  }
+  keys(request) {
+    const cacheKeys = [];
+    for (const url of this.#store.keys()) {
+      if (!request || request.url === url) {
+        cacheKeys.push(new Request(url));
+      }
+    }
+    return Promise.resolve(cacheKeys);
+  }
+};
+async function storefrontRedirect({
+  storefront,
+  request,
+  response = new Response("Not Found", { status: 404 })
+}) {
+  const { pathname, search } = new URL(request.url);
+  const redirectFrom = pathname + search;
+  try {
+    const { urlRedirects } = await storefront.query(REDIRECT_QUERY, {
+      variables: { query: "path:" + redirectFrom },
+      storefrontApiVersion: "2023-01"
+    });
+    const location = urlRedirects?.edges?.[0]?.node?.target;
+    if (location) {
+      return new Response(null, { status: 302, headers: { location } });
+    }
+    const searchParams = new URLSearchParams(search);
+    const redirectTo = searchParams.get("return_to") || searchParams.get("redirect");
+    if (redirectTo) {
+      if (isLocalPath(redirectTo)) {
+        return serverRuntime.redirect(redirectTo);
+      } else {
+        console.warn(
+          `Cross-domain redirects are not supported. Tried to redirect from ${redirectFrom} to ${redirectTo}`
+        );
+      }
+    }
+  } catch (error) {
+    console.error(
+      `Failed to fetch redirects from Storefront API for route ${redirectFrom}`,
+      error
+    );
+  }
+  return response;
+}
+function isLocalPath(url) {
+  try {
+    new URL(url);
+  } catch (e) {
+    return true;
+  }
+  return false;
+}
+var REDIRECT_QUERY = `#graphql
+  query redirects($query: String) {
+    urlRedirects(first: 1, query: $query) {
+      edges {
+        node {
+          target
+        }
+      }
+    }
+  }
+`;
+
+// src/routing/graphiql.ts
+function graphiqlLoader({ context } = {}) {
+  if (!context?.storefront) {
+    throw new Error(
+      `GraphiQL: Hydrogen's storefront client must be injected in the loader context.`
+    );
+  }
+  const url = context.storefront.getApiUrl();
+  const accessToken = context.storefront.getPublicTokenHeaders()["X-Shopify-Storefront-Access-Token"];
+  return new Response(
+    `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8/>
+  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+  <title>Shopify Storefront API</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
+  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
+  <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"><\/script>
+</head>
+<body>
+  <div id="root"></div>
+  <script>window.addEventListener('load', function (event) {
+    GraphQLPlayground.init(document.getElementById('root'), {
+      endpoint: '${url}',
+      settings:{
+        'request.globalHeaders': {
+          Accept: 'application/json',
+          'Content-Type': 'application/graphql',
+          'X-Shopify-Storefront-Access-Token': '${accessToken}'
+        }
+      },
+      tabs: [{
+        endpoint: '${url}',
+        query: '{ shop { name } }'
+      }]
+    })
+  })<\/script>
+</body>
+</html>
+  `,
+    { status: 200, headers: { "content-type": "text/html" } }
+  );
+}
+
+exports.CacheCustom = CacheCustom;
+exports.CacheLong = CacheLong;
+exports.CacheNone = CacheNone;
+exports.CacheShort = CacheShort;
+exports.InMemoryCache = InMemoryCache;
+exports.createStorefrontClient = createStorefrontClient;
+exports.generateCacheControlHeader = generateCacheControlHeader;
+exports.graphiqlLoader = graphiqlLoader;
+exports.isStorefrontApiError = isStorefrontApiError;
+exports.storefrontRedirect = storefrontRedirect;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map