@shopify/hydrogen 2023.1.0-alpha.2 → 2023.1.0

package/dist/development/{chunk-5MQMAYYE.js → chunk-ZH7BOJHC.js}

@@ -66,4 +66,4 @@ function logSeoTags(headTags) {
 
 export { Logger, __commonJS, __toESM, logSeoTags };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-5MQMAYYE.js.map
+//# sourceMappingURL=chunk-ZH7BOJHC.js.map

package/dist/development/chunk-ZH7BOJHC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/seo/log-seo-tags.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEe,SAAR,OAAwB,EAAC,SAAQ,GAAsC;AAC5E,aAAW,QAAQ;AAEnB,SAAO;AACT;AAEO,SAAS,WAAW,UAAiC;AAC1D,QAAM,QAAQ;AACd,QAAM,SACJ;AAEF,UAAQ,IAAI,GAAG;AACf,UAAQ,IAAI,mBAAmB,GAAG,QAAQ;AAC1C,UAAQ,IAAI,GAAG;AAEf,WAAS,QAAQ,CAAC,QAAQ;AACxB,QAAI,IAAI,QAAQ,UAAU;AACxB,cAAQ,IAAI,qBAAgB,KAAK;AAEjC,UAAI,IAAI,UAAU;AAChB,YAAI;AACF,kBAAQ,MAAM,KAAK,MAAM,IAAI,QAAQ,GAAG,CAAC,QAAQ,SAAS,CAAC;AAAA,QAC7D,QAAE;AACA,kBAAQ,IAAI,IAAI,QAAQ;AAAA,QAC1B;AAAA,MACF;AAAA,IACF,OAAO;AACL,cAAQ,IAAI,YAAO,IAAI,QAAQ,KAAK;AAEpC,UAAI,IAAI,UAAU;AAChB,YAAI,OAAO,IAAI,aAAa,UAAU;AACpC,kBAAQ,IAAI,UAAK,IAAI,UAAU;AAAA,QACjC,OAAO;AACL,cAAI;AACF,mBAAO,QAAQ,KAAK,MAAM,IAAI,QAAQ,CAAC,EAAE;AAAA,cAAI,CAAC,CAAC,KAAK,GAAG,MACrD,QAAQ,IAAI,UAAK,KAAK;AAAA,YACxB;AAAA,UACF,QAAE;AACA,oBAAQ,IAAI,IAAI,QAAQ;AAAA,UAC1B;AAAA,QACF;AAAA,MACF;AAEA,aAAO,QAAQ,IAAI,KAAK,EAAE;AAAA,QAAI,CAAC,CAAC,KAAK,GAAG,MACtC,QAAQ,IAAI,UAAK,cAAS,KAAK;AAAA,MACjC;AAAA,IACF;AACA,YAAQ,IAAI,GAAG;AAAA,EACjB,CAAC;AACH","sourcesContent":["import {CustomHeadTagObject} from './generate-seo-tags';\n\nexport default function Logger({headTags}: {headTags: CustomHeadTagObject[]}) {\n  logSeoTags(headTags);\n\n  return null;\n}\n\nexport function logSeoTags(headTags: CustomHeadTagObject[]) {\n  const style = 'text-transform: uppercase;';\n  const style2 =\n    'text-transform: uppercase; font-weight: bold; text-transform: uppercase;font-weight: bold';\n\n  console.log(' ');\n  console.log('%cSEO Meta Tags', `${style2}`);\n  console.log(' ');\n\n  headTags.forEach((tag) => {\n    if (tag.tag === 'script') {\n      console.log(`%c• JSON LD `, style);\n\n      if (tag.children) {\n        try {\n          console.table(JSON.parse(tag.children), ['name', 'content']);\n        } catch {\n          console.log(tag.children);\n        }\n      }\n    } else {\n      console.log(`%c• ${tag.tag} `, style);\n\n      if (tag.children) {\n        if (typeof tag.children === 'string') {\n          console.log(`↳ ${tag.children}`);\n        } else {\n          try {\n            Object.entries(JSON.parse(tag.children)).map(([key, val]) =>\n              console.log(`↳ ${val}`),\n            );\n          } catch {\n            console.log(tag.children);\n          }\n        }\n      }\n\n      Object.entries(tag.props).map(([key, val]) =>\n        console.log(`↳ ${key} → ${val}`),\n      );\n    }\n    console.log(' ');\n  });\n}\n"]}

package/dist/development/index.cjs

@@ -2162,6 +2162,7 @@ async function fetchWithServerCache(url, requestInit, {
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
 var STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
+var STOREFRONT_ID_HEADER = "Shopify-Storefront-Id";
 
 // src/utils/uuid.ts
 function generateUUID() {
@@ -2207,7 +2208,8 @@ function createStorefrontClient({
   waitUntil,
   buyerIp,
   i18n,
-  requestGroupId = generateUUID(),
+  requestGroupId,
+  storefrontId,
   ...clientOptions
 }) {
   if (!cache) {
@@ -2223,9 +2225,11 @@ function createStorefrontClient({
   } = hydrogenReact.createStorefrontClient(clientOptions);
   const getHeaders = clientOptions.privateStorefrontToken ? getPrivateTokenHeaders : getPublicTokenHeaders;
   const defaultHeaders = getHeaders({ contentType: "json" });
-  defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = requestGroupId;
+  defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = requestGroupId || generateUUID();
   if (buyerIp)
     defaultHeaders[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+  if (storefrontId)
+    defaultHeaders[STOREFRONT_ID_HEADER] = storefrontId;
   async function fetchStorefrontApi({
     query,
     mutation,
@@ -2521,120 +2525,148 @@ function graphiqlLoader({ context } = {}) {
     { status: 200, headers: { "content-type": "text/html" } }
   );
 }
-function useDataFromMatches(dataKey) {
-  const matches = react.useMatches();
-  const data = {};
-  matches.forEach((event) => {
-    const eventData = event?.data;
-    if (eventData && eventData[dataKey]) {
-      Object.assign(data, eventData[dataKey]);
-    }
-  });
-  return data;
-}
-function useDataFromFetchers({
-  formDataKey,
-  formDataValue,
-  dataKey
-}) {
-  const fetchers = react.useFetchers();
-  const data = {};
-  for (const fetcher of fetchers) {
-    const formData = fetcher.submission?.formData;
-    const fetcherData = fetcher.data;
-    if (formData && formData.get(formDataKey) === formDataValue && fetcherData && fetcherData[dataKey]) {
-      Object.assign(data, fetcherData[dataKey]);
-      try {
-        if (formData.get(dataKey)) {
-          const dataInForm = JSON.parse(String(formData.get(dataKey)));
-          Object.assign(data, dataInForm);
-        }
-      } catch {
-      }
-    }
-  }
-  return Object.keys(data).length ? data : void 0;
-}
 
 // src/seo/seo.ts
-var import_react2 = __toESM(require_react(), 1);
+var import_react = __toESM(require_react(), 1);
 
 // src/seo/generate-seo-tags.ts
-function generateSeoTags(input) {
+var ERROR_PREFIX = "Error in SEO input: ";
+var schema = {
+  title: {
+    validate: (value) => {
+      if (typeof value === "string" && value.length > 120) {
+        throw new Error(
+          ERROR_PREFIX.concat(
+            "`title` should not be longer than 120 characters"
+          )
+        );
+      }
+      return value;
+    }
+  },
+  description: {
+    validate: (value) => {
+      if (typeof value === "string" && value.length > 155) {
+        throw new Error(
+          ERROR_PREFIX.concat(
+            "`description` should not be longer than 155 characters"
+          )
+        );
+      }
+      return value;
+    }
+  },
+  url: {
+    validate: (value) => {
+      if (typeof value === "string" && !value.startsWith("http")) {
+        throw new Error(ERROR_PREFIX.concat("`url` should be a valid URL"));
+      }
+      return value;
+    }
+  },
+  handle: {
+    validate: (value) => {
+      if (typeof value === "string" && !value.startsWith("@")) {
+        throw new Error(ERROR_PREFIX.concat("`handle` should start with `@`"));
+      }
+      return value;
+    }
+  }
+};
+function generateSeoTags(seoInput) {
   const output = [];
-  let ldJson = {
+  let jsonLd = {
     "@context": "https://schema.org",
     "@type": "Thing"
   };
-  for (const tag of Object.keys(input)) {
-    const values = Array.isArray(input[tag]) ? input[tag] : [input[tag]];
+  for (const seoKey of Object.keys(seoInput)) {
+    const values = ensureArray(seoInput[seoKey]);
+    let content;
+    if (!values) {
+      return [];
+    }
     const tags = values.map((value) => {
       const tagResults = [];
       if (!value) {
         return tagResults;
       }
-      switch (tag) {
-        case "title":
-          const title = renderTitle(input.titleTemplate, value);
+      switch (seoKey) {
+        case "title": {
+          content = validate(schema.title, value);
+          const title = renderTitle(seoInput?.titleTemplate, content);
           tagResults.push(
-            generateTag("title", title),
+            generateTag("title", { title }),
             generateTag("meta", { property: "og:title", content: title }),
             generateTag("meta", { name: "twitter:title", content: title })
           );
-          ldJson.name = title;
+          jsonLd.name = content;
           break;
+        }
         case "description":
+          content = validate(schema.description, value);
           tagResults.push(
-            generateTag("meta", { name: "description", content: value }),
-            generateTag("meta", { property: "og:description", content: value }),
-            generateTag("meta", { name: "twitter:description", content: value })
+            generateTag("meta", {
+              name: "description",
+              content
+            }),
+            generateTag("meta", {
+              property: "og:description",
+              content
+            }),
+            generateTag("meta", {
+              name: "twitter:description",
+              content
+            })
           );
-          ldJson.description = value;
+          jsonLd.description = content;
           break;
         case "url":
+          content = validate(schema.url, value);
           tagResults.push(
-            generateTag("meta", { property: "og:url", content: value }),
-            generateTag("link", { rel: "canonical", href: value })
+            generateTag("meta", { property: "og:url", content }),
+            generateTag("link", { rel: "canonical", href: content })
           );
-          ldJson.url = value;
-          ldJson["@type"] = inferSchemaType(value);
+          jsonLd.url = content;
+          jsonLd["@type"] = inferSchemaType(content);
           break;
         case "handle":
+          content = validate(schema.handle, value);
           tagResults.push(
-            generateTag("meta", { name: "twitter:site", content: value }),
-            generateTag("meta", { name: "twitter:creator", content: value })
+            generateTag("meta", { name: "twitter:site", content }),
+            generateTag("meta", { name: "twitter:creator", content })
           );
           break;
-        case "ldJson":
-          ldJson = { ...ldJson, ...value };
+        case "jsonLd":
+          jsonLd = { ...jsonLd, ...value };
           break;
-        case "media":
-          const values2 = Array.isArray(value) ? value : [value];
+        case "media": {
+          const values2 = ensureArray(value);
           for (const media of values2) {
             if (typeof media === "string") {
               tagResults.push(
-                generateTag("meta", { name: "og:image", content: value })
+                generateTag("meta", { name: "og:image", content: media })
               );
-              ldJson.image = value;
+              jsonLd.image = media;
             }
             if (media && typeof media === "object") {
               const type = media.type || "image";
               const normalizedMedia = media ? {
                 url: media?.url,
                 secure_url: media?.url,
-                type: inferMimeType(media?.url),
+                type: inferMimeType(media.url),
                 width: media?.width,
                 height: media?.height,
                 alt: media?.altText
               } : {};
               for (const key of Object.keys(normalizedMedia)) {
                 if (normalizedMedia[key]) {
+                  content = normalizedMedia[key];
                   tagResults.push(
                     generateTag(
                       "meta",
                       {
                         property: `og:${type}:${key}`,
-                        content: normalizedMedia[key]
+                        content
                       },
                       normalizedMedia.url
                     )
@@ -2644,26 +2676,25 @@ function generateSeoTags(input) {
             }
           }
           break;
-        case "alternates":
-          const alternates = Array.isArray(value) ? value : [value];
+        }
+        case "alternates": {
+          const alternates = ensureArray(value);
           for (const alternate of alternates) {
-            const {
-              language,
-              media,
-              url,
-              default: defaultLang
-            } = alternate;
-            const hreflang = language ? `${language}${defaultLang ? "-default" : ""}` : void 0;
+            if (!alternate) {
+              continue;
+            }
+            const { language, url, default: defaultLang } = alternate;
+            const hrefLang = language ? `${language}${defaultLang ? "-default" : ""}` : void 0;
             tagResults.push(
               generateTag("link", {
                 rel: "alternate",
-                hreflang,
-                media,
+                hrefLang,
                 href: url
               })
             );
           }
           break;
+        }
       }
       return tagResults;
     });
@@ -2682,19 +2713,19 @@ function generateSeoTags(input) {
   return [...output, ...additionalTags].flat().sort((a, b) => a.key.localeCompare(b.key)).concat(
     generateTag("script", {
       type: "application/ld+json",
-      children: JSON.stringify(ldJson)
+      children: jsonLd
     })
   ).flat();
 }
 function generateTag(tagName, input, group) {
-  const tag = { tag: tagName, props: {} };
+  const tag = { tag: tagName, props: {}, key: "" };
   if (tagName === "title") {
-    tag.children = input;
+    tag.children = input.title;
     tag.key = generateKey(tag);
     return tag;
   }
   if (tagName === "script") {
-    tag.children = input.children;
+    tag.children = JSON.stringify(input.children);
     delete input.children;
   }
   tag.props = input;
@@ -2710,12 +2741,12 @@ function generateKey(tag, group) {
     return "0-title";
   }
   if (tagName === "meta") {
-    const priority = props.content === group && !props.property.endsWith("secure_url") && "0";
+    const priority = props.content === group && typeof props.property === "string" && !props.property.endsWith("secure_url") && "0";
     const groupName = [group, priority];
     return [tagName, ...groupName, props.property || props.name].filter((x) => x).join("-");
   }
   if (tagName === "link") {
-    const key = [tagName, props.rel, props.hreflang || props.media].filter((x) => x).join("-");
+    const key = [tagName, props.rel, props.hrefLang || props.media].filter((x) => x).join("-");
     return key.replace(/\s+/g, "-");
   }
   return `${tagName}-${props.type}`;
@@ -2730,7 +2761,7 @@ function renderTitle(template, title) {
   return template.replace("%s", title ?? "");
 }
 function inferMimeType(url) {
-  const ext = url.split(".").pop();
+  const ext = url && url.split(".").pop();
   if (ext === "svg") {
     return "image/svg+xml";
   }
@@ -2753,6 +2784,9 @@ function inferMimeType(url) {
 }
 function inferSchemaType(url) {
   const defaultType = "Thing";
+  if (!url) {
+    return defaultType;
+  }
   const routes = [
     {
       type: "WebSite",
@@ -2768,19 +2802,19 @@ function inferSchemaType(url) {
     },
     {
       type: "ItemList",
-      pattern: /\/collections\/([^\/]+)/
+      pattern: /\/collections\/([^/]+)/
     },
     {
       type: "WebPage",
-      pattern: /\/pages\/([^\/]+)/
+      pattern: /\/pages\/([^/]+)/
     },
     {
       type: "WebSite",
-      pattern: /\/blogs\/([^\/]+)/
+      pattern: /\/blogs\/([^/]+)/
     },
     {
       type: "BlogPosting",
-      pattern: /\/blogs\/([^\/]+)\/([^\/]+)/
+      pattern: /\/blogs\/([^/]+)\/([^/]+)/
     },
     {
       type: "Organization",
@@ -2788,7 +2822,7 @@ function inferSchemaType(url) {
     },
     {
       type: "Organization",
-      pattern: /\/policies\/([^\/]+)/
+      pattern: /\/policies\/([^/]+)/
     }
   ];
   const typeMatches = routes.filter((route) => {
@@ -2798,10 +2832,22 @@ function inferSchemaType(url) {
   });
   return typeMatches.length > 0 ? typeMatches[typeMatches.length - 1].type : defaultType;
 }
+function ensureArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
+function validate(schema2, data) {
+  try {
+    return schema2.validate(data);
+  } catch (error) {
+    const message = error.message;
+    console.warn(message);
+    return data;
+  }
+}
 
 // src/seo/seo.ts
 init_log_seo_tags();
-var SeoLogger = import_react2.default.lazy(() => Promise.resolve().then(() => (init_log_seo_tags(), log_seo_tags_exports)));
+var SeoLogger = import_react.default.lazy(() => Promise.resolve().then(() => (init_log_seo_tags(), log_seo_tags_exports)));
 function Seo({ debug }) {
   const matches = react.useMatches();
   const location = react.useLocation();
@@ -2823,24 +2869,24 @@ function Seo({ debug }) {
     logSeoTags(headTags);
   const html = headTags.map((tag) => {
     if (tag.tag === "script") {
-      return import_react2.default.createElement(tag.tag, {
+      return import_react.default.createElement(tag.tag, {
         ...tag.props,
         key: tag.key,
         dangerouslySetInnerHTML: { __html: tag.children }
       });
     }
-    return import_react2.default.createElement(
+    return import_react.default.createElement(
       tag.tag,
       { ...tag.props, key: tag.key },
       tag.children
     );
   });
-  const loggerMarkup = import_react2.default.createElement(
-    import_react2.default.Suspense,
+  const loggerMarkup = import_react.default.createElement(
+    import_react.default.Suspense,
     { fallback: null },
-    import_react2.default.createElement(SeoLogger, { headTags })
+    import_react.default.createElement(SeoLogger, { headTags })
   );
-  return import_react2.default.createElement(import_react2.default.Fragment, null, html, debug && loggerMarkup);
+  return import_react.default.createElement(import_react.default.Fragment, null, html, debug && loggerMarkup);
 }
 function recursivelyInvokeOrReturn(value, ...rest) {
   if (value instanceof Function) {
@@ -2955,7 +3001,5 @@ exports.generateCacheControlHeader = generateCacheControlHeader;
 exports.graphiqlLoader = graphiqlLoader;
 exports.isStorefrontApiError = isStorefrontApiError;
 exports.storefrontRedirect = storefrontRedirect;
-exports.useDataFromFetchers = useDataFromFetchers;
-exports.useDataFromMatches = useDataFromMatches;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map