@shopify/cli-hydrogen 3.26.0 → 4.0.0-alpha.1

package/dist/templates/demo-store/app/lib/seo/debugger.tsx

@@ -0,0 +1,175 @@
+import {Link, useLocation, type RouteMatch} from '@remix-run/react';
+import {useSeoConfig, useHeadTags, recursivelyInvokeOrReturn} from './common';
+import {renderToString} from 'react-dom/server';
+
+const LABEL_MAP = {
+  twitterTags: 'Twitter',
+  ogTags: 'Open graph',
+  links: 'Links',
+  tags: 'Meta',
+  LdJson: 'Structured data',
+};
+
+function Badge() {
+  return (
+    <div className="fixed bottom-5 right-5 divide-y rounded-md bg-white">
+      <div className="flex gap-2 px-3 py-3 items-center px-5 py-3">
+        <Link
+          to="?debug=true"
+          reloadDocument
+          className="flex-1 text-sm font-bold text-gray-600"
+        >
+          SEO
+        </Link>
+        <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring ring-white"></span>
+      </div>
+    </div>
+  );
+}
+
+export function Debugger() {
+  const {seo, matches} = useSeoConfig();
+
+  const tags = useHeadTags(seo);
+  const location = useLocation();
+  const debug = new URLSearchParams(location.search).get('debug');
+  const debuggerOpen = Boolean(
+    debug === 'false' ? false : debug === '' || debug,
+  );
+
+  return debuggerOpen ? (
+    <Panel>
+      <>
+        <span className="font-bold block text-sm py-4 px-4">Config</span>
+        {Object.entries(seo).flatMap(([property, value]) => {
+          if (typeof value !== 'string') {
+            return null;
+          }
+          return (
+            <Item
+              key={`${property}${value}`}
+              property={property}
+              value={value}
+            />
+          );
+        })}
+
+        <div className="py-4 px-4 space-y-4">
+          {matches.map(({id, handle, data}: RouteMatch, index: number) => (
+            <div key={id}>
+              <div className="font-bold text-xs pb-2 ">{id}</div>
+              <pre className="overflow-x-scroll whitespace-pre font-mono rounded-sm bg-gray-100  text-[10px] px-4 py-2">
+                {JSON.stringify(
+                  recursivelyInvokeOrReturn(handle?.seo, data),
+                  null,
+                  2,
+                )}
+              </pre>
+            </div>
+          ))}
+        </div>
+
+        <span className="font-bold block text-sm py-4 px-4">Tags</span>
+
+        {Object.entries(tags).map(([label, entries]) => {
+          if (entries.length < 1) {
+            return null;
+          }
+          return (
+            <div key={label} className="font-bold text-sm py-4 px-4">
+              <div className="font-bold text-xs pb-2">
+                {LABEL_MAP[label as keyof typeof LABEL_MAP]}
+              </div>
+              <pre className="overflow-x-scroll whitespace-pre font-mono rounded-sm bg-gray-100  text-[10px] px-4 py-2">
+                {label === 'LdJson'
+                  ? JSON.stringify(entries, null, 2)
+                  : entries.map(
+                      (entry: React.ReactElement, index: number) =>
+                        renderToString(entry) + '\n',
+                    )}
+              </pre>
+            </div>
+          );
+        })}
+      </>
+    </Panel>
+  ) : (
+    <Badge />
+  );
+}
+
+function Panel({children}: {children?: React.ReactNode}) {
+  return (
+    <div className="overflow-y-scroll height max-h-full z-40 fixed w-96 bottom-5 top-5 right-5 divide-y rounded-md bg-white  text-gray-600">
+      <div className="flex items-center px-4 py-3  ">
+        <span className="flex-1 text-sm font-bold text-gray-600">SEO</span>
+        <Link to="?" reloadDocument className="text-sm font-bold text-gray-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            className="h-5 w-5"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Link>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function Item({
+  pass,
+  value,
+  property,
+}: {
+  pass?: boolean;
+  value: string;
+  property: string;
+}) {
+  const icon =
+    pass !== false ? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-5 h-5 top-0.5 relative text-blue-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+          clipRule="evenodd"
+        />
+      </svg>
+    ) : (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-5 h-5 top-0.5 relative text-red-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+
+  return (
+    <div className="flex items-end px-4 py-3 ">
+      {icon}
+      <span className="font-mono flex-1 mx-1 text-gray-900 text-[10px]">
+        <span className="px-2 py-1 rounded-sm bg-gray-100">{property}</span>
+      </span>
+      <span className="pl-8 text-right text-xs text-gray-900 text-ellipsis overflow-hidden whitespace-nowrap max-w-full">
+        {value}
+      </span>
+    </div>
+  );
+}

package/dist/templates/demo-store/app/lib/seo/image.tsx

@@ -0,0 +1,32 @@
+import {renderToString} from 'react-dom/server';
+
+export async function getShareableImage(
+  component: React.ReactElement<any, 'svg'>,
+) {
+  try {
+    const svg = renderToString(component);
+    return new Response(svg, {
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Cache-Control': 'public, s-maxage=60',
+      },
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to render Share Image:', component, error);
+
+    return new Response(
+      renderToString(
+        <svg>
+          <text>Default share image</text>
+        </svg>,
+      ),
+      {
+        headers: {
+          'Content-Type': 'image/svg+xml',
+          'Cache-Control': 'public, s-maxage=60',
+        },
+      },
+    );
+  }
+}

package/dist/templates/demo-store/app/lib/seo/index.ts

@@ -0,0 +1,4 @@
+export {Seo} from './seo';
+export {Debugger} from './debugger';
+
+export * from './types';

package/dist/templates/demo-store/app/lib/seo/seo.tsx

@@ -0,0 +1,24 @@
+import {useSeoConfig, useHeadTags} from './common';
+
+export function Seo() {
+  const {seo} = useSeoConfig();
+  const {tags, ogTags, twitterTags, links, LdJson} = useHeadTags(seo);
+  const structuredContent = (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(LdJson),
+      }}
+    />
+  );
+
+  return (
+    <>
+      {tags}
+      {ogTags}
+      {twitterTags}
+      {links}
+      {structuredContent}
+    </>
+  );
+}

package/dist/templates/demo-store/app/lib/seo/types.ts

@@ -0,0 +1,70 @@
+export type SeoDescriptor = {
+  type: 'product' | 'article' | 'page' | 'collection' | 'blog' | 'root';
+  site: string;
+  title: string;
+  titleTemplate?: string;
+  bypassTitleTemplate?: boolean;
+  defaultTitle: string;
+  description: string;
+  noindex: boolean;
+  nofollow: boolean;
+  url: string;
+  twitter: Partial<TwitterOptions>;
+  openGraph: Partial<OpenGraphOptions>;
+  images: Partial<ImageOptions>[];
+  alternates: Partial<AlternateOptions>[];
+  tags: string[];
+  robots: Partial<RobotsOptions>;
+};
+
+export interface TwitterOptions {
+  card: string;
+  site: string;
+  description: string;
+  handle: string;
+}
+
+export interface OpenGraphOptions {
+  url: string;
+  type: string;
+  title: string;
+  description: string;
+  site: string;
+  locale: string;
+}
+
+export interface OpenGraphProfileOptions {
+  firstName: string;
+  lastName: string;
+  username: string;
+  gender: string;
+}
+
+export interface OpenGraphArticleOptions {
+  publishedTime: Date;
+  modifiedTime: Date;
+  expirationTime: Date;
+  authors: string[];
+  section: string;
+  tags: string;
+}
+
+export interface RobotsOptions {
+  noArchive: boolean;
+  noSnippet: boolean;
+  maxSnippet: number;
+  unAvailableAfter: string;
+}
+
+export interface AlternateOptions {
+  url: string;
+  media: string;
+  lang: string;
+}
+
+export interface ImageOptions {
+  url: string;
+  width: number;
+  height: number;
+  alt: string;
+}

package/dist/templates/demo-store/app/lib/session.server.ts

@@ -0,0 +1,57 @@
+import {
+  createCookieSessionStorage,
+  type SessionStorage,
+  type Session,
+} from '@shopify/remix-oxygen';
+
+/**
+ * This is a custom session implementation for your Hydrogen shop.
+ * Feel free to customize it to your needs, add helper methods, or
+ * swap out the cookie-based implementation with something else!
+ */
+export class HydrogenSession {
+  constructor(
+    private sessionStorage: SessionStorage,
+    private session: Session,
+  ) {}
+
+  static async init(request: Request, secrets: string[]) {
+    const storage = createCookieSessionStorage({
+      cookie: {
+        name: 'session',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets,
+      },
+    });
+
+    const session = await storage.getSession(request.headers.get('Cookie'));
+
+    return new this(storage, session);
+  }
+
+  get(key: string) {
+    return this.session.get(key);
+  }
+
+  destroy() {
+    return this.sessionStorage.destroySession(this.session);
+  }
+
+  flash(key: string, value: any) {
+    this.session.flash(key, value);
+  }
+
+  unset(key: string) {
+    this.session.unset(key);
+  }
+
+  set(key: string, value: any) {
+    this.session.set(key, value);
+  }
+
+  commit() {
+    return this.sessionStorage.commitSession(this.session);
+  }
+}

package/dist/templates/demo-store/app/lib/type.ts

@@ -0,0 +1,21 @@
+import {
+  CountryCode,
+  LanguageCode,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+export type Locale = {
+  label?: string;
+  language: LanguageCode;
+  country: CountryCode;
+};
+
+export type Localizations = Record<string, Locale>;
+
+export enum CartAction {
+  ADD_TO_CART = 'ADD_TO_CART',
+  REMOVE_FROM_CART = 'REMOVE_FROM_CART',
+  UPDATE_CART = 'UPDATE_CART',
+  UPDATE_DISCOUNT = 'UPDATE_DISCOUNT',
+  UPDATE_BUYER_IDENTITY = 'UPDATE_BUYER_IDENTITY',
+}
+export type CartActions = keyof typeof CartAction;

package/dist/templates/demo-store/app/lib/utils.ts

@@ -0,0 +1,310 @@
+import {useLocation, useMatches} from '@remix-run/react';
+import type {
+  MenuItem,
+  Menu,
+  MoneyV2,
+} from '@shopify/hydrogen-react/storefront-api-types';
+
+// @ts-expect-error types not available
+import typographicBase from 'typographic-base';
+import {countries} from '~/data/countries';
+import {Locale} from './type';
+
+export interface EnhancedMenuItem extends MenuItem {
+  to: string;
+  target: string;
+  isExternal?: boolean;
+  items: EnhancedMenuItem[];
+}
+
+export interface EnhancedMenu extends Menu {
+  items: EnhancedMenuItem[];
+}
+
+export function missingClass(string?: string, prefix?: string) {
+  if (!string) {
+    return true;
+  }
+
+  const regex = new RegExp(` ?${prefix}`, 'g');
+  return string.match(regex) === null;
+}
+
+export function formatText(input?: string | React.ReactNode) {
+  if (!input) {
+    return;
+  }
+
+  if (typeof input !== 'string') {
+    return input;
+  }
+
+  return typographicBase(input, {locale: 'en-us'}).replace(
+    /\s([^\s<]+)\s*$/g,
+    '\u00A0$1',
+  );
+}
+
+export function getExcerpt(text: string) {
+  const regex = /<p.*>(.*?)<\/p>/;
+  const match = regex.exec(text);
+  return match?.length ? match[0] : text;
+}
+
+export function isNewArrival(date: string, daysOld = 30) {
+  return (
+    new Date(date).valueOf() >
+    new Date().setDate(new Date().getDate() - daysOld).valueOf()
+  );
+}
+
+export function isDiscounted(price: MoneyV2, compareAtPrice: MoneyV2) {
+  if (compareAtPrice?.amount > price?.amount) {
+    return true;
+  }
+  return false;
+}
+
+function resolveToFromType(
+  {
+    customPrefixes,
+    pathname,
+    type,
+  }: {
+    customPrefixes: Record<string, string>;
+    pathname?: string;
+    type?: string;
+  } = {
+    customPrefixes: {},
+  },
+) {
+  if (!pathname || !type) return '';
+
+  /*
+    MenuItemType enum
+    @see: https://shopify.dev/api/storefront/unstable/enums/MenuItemType
+  */
+  const defaultPrefixes = {
+    BLOG: 'blogs',
+    COLLECTION: 'collections',
+    COLLECTIONS: 'collections', // Collections All (not documented)
+    FRONTPAGE: 'frontpage',
+    HTTP: '',
+    PAGE: 'pages',
+    CATALOG: 'collections/all', // Products All
+    PRODUCT: 'products',
+    SEARCH: 'search',
+    SHOP_POLICY: 'policies',
+  };
+
+  const pathParts = pathname.split('/');
+  const handle = pathParts.pop() || '';
+  const routePrefix: Record<string, string> = {
+    ...defaultPrefixes,
+    ...customPrefixes,
+  };
+
+  switch (true) {
+    // special cases
+    case type === 'FRONTPAGE':
+      return '/';
+
+    case type === 'ARTICLE': {
+      const blogHandle = pathParts.pop();
+      return routePrefix.BLOG
+        ? `/${routePrefix.BLOG}/${blogHandle}/${handle}/`
+        : `/${blogHandle}/${handle}/`;
+    }
+
+    case type === 'COLLECTIONS':
+      return `/${routePrefix.COLLECTIONS}`;
+
+    case type === 'SEARCH':
+      return `/${routePrefix.SEARCH}`;
+
+    case type === 'CATALOG':
+      return `/${routePrefix.CATALOG}`;
+
+    // common cases: BLOG, PAGE, COLLECTION, PRODUCT, SHOP_POLICY, HTTP
+    default:
+      return routePrefix[type]
+        ? `/${routePrefix[type]}/${handle}`
+        : `/${handle}`;
+  }
+}
+
+/*
+  Parse each menu link and adding, isExternal, to and target
+*/
+function parseItem(customPrefixes = {}) {
+  return function (item: MenuItem): EnhancedMenuItem {
+    if (!item?.url || !item?.type) {
+      // eslint-disable-next-line no-console
+      console.warn('Invalid menu item.  Must include a url and type.');
+      // @ts-ignore
+      return;
+    }
+
+    // extract path from url because we don't need the origin on internal to attributes
+    const {pathname} = new URL(item.url);
+
+    /*
+      Currently the MenuAPI only returns online store urls e.g — xyz.myshopify.com/..
+      Note: update logic when API is updated to include the active qualified domain
+    */
+    const isInternalLink = /\.myshopify\.com/g.test(item.url);
+
+    const parsedItem = isInternalLink
+      ? // internal links
+        {
+          ...item,
+          isExternal: false,
+          target: '_self',
+          to: resolveToFromType({type: item.type, customPrefixes, pathname}),
+        }
+      : // external links
+        {
+          ...item,
+          isExternal: true,
+          target: '_blank',
+          to: item.url,
+        };
+
+    return {
+      ...parsedItem,
+      items: item.items?.map(parseItem(customPrefixes)),
+    };
+  };
+}
+
+/*
+  Recursively adds `to` and `target` attributes to links based on their url
+  and resource type.
+  It optionally overwrites url paths based on item.type
+*/
+export function parseMenu(menu: Menu, customPrefixes = {}): EnhancedMenu {
+  if (!menu?.items) {
+    // eslint-disable-next-line no-console
+    console.warn('Invalid menu passed to parseMenu');
+    // @ts-ignore
+    return menu;
+  }
+
+  return {
+    ...menu,
+    items: menu.items.map(parseItem(customPrefixes)),
+  };
+}
+
+export const INPUT_STYLE_CLASSES =
+  'appearance-none rounded dark:bg-transparent border focus:border-primary/50 focus:ring-0 w-full py-2 px-3 text-primary/90 placeholder:text-primary/50 leading-tight focus:shadow-outline';
+
+export const getInputStyleClasses = (isError?: string | null) => {
+  return `${INPUT_STYLE_CLASSES} ${
+    isError ? 'border-red-500' : 'border-primary/20'
+  }`;
+};
+
+export function statusMessage(status: string) {
+  const translations: Record<string, string> = {
+    ATTEMPTED_DELIVERY: 'Attempted delivery',
+    CANCELED: 'Canceled',
+    CONFIRMED: 'Confirmed',
+    DELIVERED: 'Delivered',
+    FAILURE: 'Failure',
+    FULFILLED: 'Fulfilled',
+    IN_PROGRESS: 'In Progress',
+    IN_TRANSIT: 'In transit',
+    LABEL_PRINTED: 'Label printed',
+    LABEL_PURCHASED: 'Label purchased',
+    LABEL_VOIDED: 'Label voided',
+    MARKED_AS_FULFILLED: 'Marked as fulfilled',
+    NOT_DELIVERED: 'Not delivered',
+    ON_HOLD: 'On Hold',
+    OPEN: 'Open',
+    OUT_FOR_DELIVERY: 'Out for delivery',
+    PARTIALLY_FULFILLED: 'Partially Fulfilled',
+    PENDING_FULFILLMENT: 'Pending',
+    PICKED_UP: 'Displayed as Picked up',
+    READY_FOR_PICKUP: 'Ready for pickup',
+    RESTOCKED: 'Restocked',
+    SCHEDULED: 'Scheduled',
+    SUBMITTED: 'Submitted',
+    UNFULFILLED: 'Unfulfilled',
+  };
+  try {
+    return translations?.[status];
+  } catch (error) {
+    return status;
+  }
+}
+
+/**
+ * Errors can exist in an errors object, or nested in a data field.
+ */
+export function assertApiErrors(data: Record<string, any> | null | undefined) {
+  const errorMessage = data?.customerUserErrors?.[0]?.message;
+  if (errorMessage) {
+    throw new Error(errorMessage);
+  }
+}
+
+export const DEFAULT_LOCALE: Locale & {pathPrefix: string} = Object.freeze({
+  ...countries.default,
+  pathPrefix: '',
+});
+
+export function getLocaleFromRequest(request: Request): Locale & {
+  pathPrefix: string;
+} {
+  const url = new URL(request.url);
+  const firstPathPart =
+    '/' + url.pathname.substring(1).split('/')[0].toLowerCase();
+
+  return countries[firstPathPart]
+    ? {
+        ...countries[firstPathPart],
+        pathPrefix: firstPathPart,
+      }
+    : {
+        ...countries['default'],
+        pathPrefix: '',
+      };
+}
+
+export function usePrefixPathWithLocale(path: string) {
+  const [root] = useMatches();
+  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+
+  return `${selectedLocale.pathPrefix}${
+    path.startsWith('/') ? path : '/' + path
+  }`;
+}
+
+export function useIsHomePath() {
+  const {pathname} = useLocation();
+  const [root] = useMatches();
+  const selectedLocale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  const strippedPathname = pathname.replace(selectedLocale.pathPrefix, '');
+  return strippedPathname === '/';
+}
+
+/**
+ * Validates that a url is local
+ * @param url
+ * @returns `true` if local `false`if external domain
+ */
+export function isLocalPath(url: string) {
+  try {
+    // We don't want to redirect cross domain,
+    // doing so could create fishing vulnerability
+    // If `new URL()` succeeds, it's a fully qualified
+    // url which is cross domain. If it fails, it's just
+    // a path, which will be the current domain.
+    new URL(url);
+  } catch (e) {
+    return true;
+  }
+
+  return false;
+}