@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.1

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

@@ -1,175 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,84 +0,0 @@
-export type SeoDescriptor = {
-  type:
-    | 'account'
-    | 'article'
-    | 'blog'
-    | 'cart'
-    | 'collection'
-    | 'collections'
-    | 'home'
-    | 'page'
-    | 'policies'
-    | 'policy'
-    | 'product'
-    | 'root'
-    | 'search'
-    | null;
-  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

@@ -1,57 +0,0 @@
-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

@@ -1,21 +0,0 @@
-import {
-  CountryCode,
-  LanguageCode,
-} from '@shopify/storefront-kit-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

@@ -1,310 +0,0 @@
-import {useLocation, useMatches} from '@remix-run/react';
-import type {
-  MenuItem,
-  Menu,
-  MoneyV2,
-} from '@shopify/storefront-kit-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;
-}