@shopify/hydrogen 2023.1.0-alpha.1 → 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

@@ -1,6 +1,6 @@
 'use strict';
 
-var storefrontKitReact = require('@shopify/storefront-kit-react');
+var hydrogenReact = require('@shopify/hydrogen-react');
 var serverRuntime = require('@remix-run/server-runtime');
 var react = require('@remix-run/react');
 
@@ -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() {
@@ -2201,12 +2202,14 @@ var isMutationRE = /(^|}\s)mutation[\s({]/im;
 function minifyQuery(string) {
   return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
 }
+var defaultI18n = { language: "EN", country: "US" };
 function createStorefrontClient({
   cache,
   waitUntil,
   buyerIp,
-  i18n = { language: "EN", country: "US" },
-  requestGroupId = generateUUID(),
+  i18n,
+  requestGroupId,
+  storefrontId,
   ...clientOptions
 }) {
   if (!cache) {
@@ -2219,12 +2222,14 @@ function createStorefrontClient({
     getPrivateTokenHeaders,
     getStorefrontApiUrl,
     getShopifyDomain
-  } = storefrontKitReact.createStorefrontClient(clientOptions);
+  } = 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,
@@ -2298,7 +2303,7 @@ function createStorefrontClient({
       getShopifyDomain,
       getApiUrl: getStorefrontApiUrl,
       isApiError: isStorefrontApiError,
-      i18n: { pathPrefix: "", ...i18n }
+      i18n: i18n ?? defaultI18n
     }
   };
 }
@@ -2525,81 +2530,143 @@ function graphiqlLoader({ context } = {}) {
 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
                     )
@@ -2609,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;
     });
@@ -2647,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;
@@ -2675,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}`;
@@ -2695,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";
   }
@@ -2718,6 +2784,9 @@ function inferMimeType(url) {
 }
 function inferSchemaType(url) {
   const defaultType = "Thing";
+  if (!url) {
+    return defaultType;
+  }
   const routes = [
     {
       type: "WebSite",
@@ -2733,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",
@@ -2753,7 +2822,7 @@ function inferSchemaType(url) {
     },
     {
       type: "Organization",
-      pattern: /\/policies\/([^\/]+)/
+      pattern: /\/policies\/([^/]+)/
     }
   ];
   const typeMatches = routes.filter((route) => {
@@ -2763,6 +2832,18 @@ 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();
@@ -2839,75 +2920,75 @@ function recursivelyInvokeOrReturn(value, ...rest) {
 
 Object.defineProperty(exports, 'AnalyticsEventName', {
   enumerable: true,
-  get: function () { return storefrontKitReact.AnalyticsEventName; }
+  get: function () { return hydrogenReact.AnalyticsEventName; }
 });
 Object.defineProperty(exports, 'AnalyticsPageType', {
   enumerable: true,
-  get: function () { return storefrontKitReact.AnalyticsPageType; }
+  get: function () { return hydrogenReact.AnalyticsPageType; }
 });
 Object.defineProperty(exports, 'ExternalVideo', {
   enumerable: true,
-  get: function () { return storefrontKitReact.ExternalVideo; }
+  get: function () { return hydrogenReact.ExternalVideo; }
 });
 Object.defineProperty(exports, 'Image', {
   enumerable: true,
-  get: function () { return storefrontKitReact.Image; }
+  get: function () { return hydrogenReact.Image; }
 });
 Object.defineProperty(exports, 'MediaFile', {
   enumerable: true,
-  get: function () { return storefrontKitReact.MediaFile; }
+  get: function () { return hydrogenReact.MediaFile; }
 });
 Object.defineProperty(exports, 'ModelViewer', {
   enumerable: true,
-  get: function () { return storefrontKitReact.ModelViewer; }
+  get: function () { return hydrogenReact.ModelViewer; }
 });
 Object.defineProperty(exports, 'Money', {
   enumerable: true,
-  get: function () { return storefrontKitReact.Money; }
+  get: function () { return hydrogenReact.Money; }
 });
 Object.defineProperty(exports, 'ShopPayButton', {
   enumerable: true,
-  get: function () { return storefrontKitReact.ShopPayButton; }
+  get: function () { return hydrogenReact.ShopPayButton; }
 });
-Object.defineProperty(exports, 'ShopifyAppSource', {
+Object.defineProperty(exports, 'ShopifySalesChannel', {
   enumerable: true,
-  get: function () { return storefrontKitReact.ShopifyAppSource; }
+  get: function () { return hydrogenReact.ShopifySalesChannel; }
 });
 Object.defineProperty(exports, 'Video', {
   enumerable: true,
-  get: function () { return storefrontKitReact.Video; }
+  get: function () { return hydrogenReact.Video; }
 });
 Object.defineProperty(exports, 'flattenConnection', {
   enumerable: true,
-  get: function () { return storefrontKitReact.flattenConnection; }
+  get: function () { return hydrogenReact.flattenConnection; }
 });
 Object.defineProperty(exports, 'getClientBrowserParameters', {
   enumerable: true,
-  get: function () { return storefrontKitReact.getClientBrowserParameters; }
+  get: function () { return hydrogenReact.getClientBrowserParameters; }
 });
 Object.defineProperty(exports, 'getShopifyCookies', {
   enumerable: true,
-  get: function () { return storefrontKitReact.getShopifyCookies; }
+  get: function () { return hydrogenReact.getShopifyCookies; }
 });
 Object.defineProperty(exports, 'parseMetafield', {
   enumerable: true,
-  get: function () { return storefrontKitReact.parseMetafield; }
+  get: function () { return hydrogenReact.parseMetafield; }
 });
 Object.defineProperty(exports, 'sendShopifyAnalytics', {
   enumerable: true,
-  get: function () { return storefrontKitReact.sendShopifyAnalytics; }
+  get: function () { return hydrogenReact.sendShopifyAnalytics; }
 });
 Object.defineProperty(exports, 'storefrontApiCustomScalars', {
   enumerable: true,
-  get: function () { return storefrontKitReact.storefrontApiCustomScalars; }
+  get: function () { return hydrogenReact.storefrontApiCustomScalars; }
 });
 Object.defineProperty(exports, 'useMoney', {
   enumerable: true,
-  get: function () { return storefrontKitReact.useMoney; }
+  get: function () { return hydrogenReact.useMoney; }
 });
 Object.defineProperty(exports, 'useShopifyCookies', {
   enumerable: true,
-  get: function () { return storefrontKitReact.useShopifyCookies; }
+  get: function () { return hydrogenReact.useShopifyCookies; }
 });
 exports.CacheCustom = CacheCustom;
 exports.CacheLong = CacheLong;