npm - @shopify/cli-hydrogen - Versions diffs - 3.27.0 → 4.0.0-alpha.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/dist/templates/demo-store/app/root.tsx ADDED Viewed

@@ -0,0 +1,282 @@
+import {
+  defer,
+  type LinksFunction,
+  type MetaFunction,
+  type LoaderArgs,
+  type AppLoadContext,
+} from '@shopify/remix-oxygen';
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch,
+  useLoaderData,
+  useMatches,
+} from '@remix-run/react';
+import {Layout} from '~/components';
+import {getLayoutData, type LayoutData} from '~/data';
+import {GenericError} from './components/GenericError';
+import {NotFound} from './components/NotFound';
+import {Seo, Debugger} from './lib/seo';
+import styles from './styles/app.css';
+import favicon from '../public/favicon.svg';
+import {DEFAULT_LOCALE, getLocaleFromRequest} from './lib/utils';
+import invariant from 'tiny-invariant';
+import {Cart} from '@shopify/hydrogen-react/storefront-api-types';
+export const handle = {
+  // @todo - remove any and type the seo callback
+  seo: (data: any) => ({
+    title: data?.layout?.shop?.name,
+    bypassTitleTemplate: true,
+    titleTemplate: `%s | ${data?.layout?.shop?.name}`,
+  }),
+};
+export const links: LinksFunction = () => {
+  return [
+    {rel: 'stylesheet', href: styles},
+    {
+      rel: 'preconnect',
+      href: 'https://cdn.shopify.com',
+    },
+    {
+      rel: 'preconnect',
+      href: 'https://shop.app',
+    },
+    {rel: 'icon', type: 'image/svg+xml', href: favicon},
+  ];
+};
+export const meta: MetaFunction = () => ({
+  charset: 'utf-8',
+  viewport: 'width=device-width,initial-scale=1',
+});
+export async function loader({context, request}: LoaderArgs) {
+  const [cartId, layout, selectedLocale] = await Promise.all([
+    context.session.get('cartId'),
+    getLayoutData(context),
+    getLocaleFromRequest(request),
+  ]);
+  return defer({
+    layout,
+    selectedLocale,
+    cart: cartId ? getCart(context, cartId) : undefined,
+  });
+}
+export default function App() {
+  const data = useLoaderData<typeof loader>();
+  const locale = data.selectedLocale ?? DEFAULT_LOCALE;
+  return (
+    <html lang={locale.language}>
+      <head>
+        <Seo />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Layout
+          layout={data.layout as LayoutData}
+          key={`${locale.language}-${locale.country}`}
+        >
+          <Outlet />
+        </Layout>
+        <Debugger />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+export function CatchBoundary() {
+  const [root] = useMatches();
+  const caught = useCatch();
+  const isNotFound = caught.status === 404;
+  const locale = root.data?.selectedLocale ?? DEFAULT_LOCALE;
+  return (
+    <html lang={locale.language}>
+      <head>
+        <title>{isNotFound ? 'Not found' : 'Error'}</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Layout
+          layout={root?.data?.layout}
+          key={`${locale.language}-${locale.country}`}
+        >
+          {isNotFound ? (
+            <NotFound type={caught.data?.pageType} />
+          ) : (
+            <GenericError
+              error={{message: `${caught.status} ${caught.data}`}}
+            />
+          )}
+        </Layout>
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+export function ErrorBoundary({error}: {error: Error}) {
+  const [root] = useMatches();
+  const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
+  return (
+    <html lang={locale.language}>
+      <head>
+        <title>Error</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Layout layout={root?.data?.layout}>
+          <GenericError error={error} />
+        </Layout>
+        <Scripts />
+        <Debugger />
+      </body>
+    </html>
+  );
+}
+const CART_QUERY = `#graphql
+  query CartQuery($cartId: ID!, $country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    cart(id: $cartId) {
+      ...CartFragment
+    }
+  }
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    totalQuantity
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    lines(first: 100) {
+      edges {
+        node {
+          id
+          quantity
+          attributes {
+            key
+            value
+          }
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+            amountPerQuantity {
+              amount
+              currencyCode
+            }
+            compareAtAmountPerQuantity {
+              amount
+              currencyCode
+            }
+          }
+          merchandise {
+            ... on ProductVariant {
+              id
+              availableForSale
+              compareAtPrice {
+                ...MoneyFragment
+              }
+              price {
+                ...MoneyFragment
+              }
+              requiresShipping
+              title
+              image {
+                ...ImageFragment
+              }
+              product {
+                handle
+                title
+                id
+              }
+              selectedOptions {
+                name
+                value
+              }
+            }
+          }
+        }
+      }
+    }
+    cost {
+      subtotalAmount {
+        ...MoneyFragment
+      }
+      totalAmount {
+        ...MoneyFragment
+      }
+      totalDutyAmount {
+        ...MoneyFragment
+      }
+      totalTaxAmount {
+        ...MoneyFragment
+      }
+    }
+    note
+    attributes {
+      key
+      value
+    }
+    discountCodes {
+      code
+    }
+  }
+  fragment MoneyFragment on MoneyV2 {
+    currencyCode
+    amount
+  }
+  fragment ImageFragment on Image {
+    id
+    url
+    altText
+    width
+    height
+  }
+`;
+export async function getCart({storefront}: AppLoadContext, cartId: string) {
+  invariant(storefront, 'missing storefront client in cart query');
+  const {cart} = await storefront.query<{cart: Cart}>(CART_QUERY, {
+    variables: {
+      cartId,
+      country: storefront.i18n?.country,
+      language: storefront.i18n?.language,
+    },
+    cache: storefront.CacheNone(),
+  });
+  invariant(cart, 'No data returned from Shopify API');
+  return cart;
+}

package/dist/templates/demo-store/app/routes/$.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export async function loader() {
+  throw new Response('Not found', {status: 404});
+}
+export default function Component() {
+  return null;
+}

package/dist/templates/demo-store/app/routes/$lang/$.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader} from '~/routes/$';

package/dist/templates/demo-store/app/routes/$lang/[robots.txt].tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {loader} from '~/routes/[robots.txt]';

package/dist/templates/demo-store/app/routes/$lang/[sitemap.xml].tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {loader} from '~/routes/[sitemap.xml]';

package/dist/templates/demo-store/app/routes/$lang/account/__private/address/$id.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {action, default, handle} from '~/routes/account/__private/address/$id';

package/dist/templates/demo-store/app/routes/$lang/account/__private/edit.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {action, default, handle} from '~/routes/account/__private/edit';

package/dist/templates/demo-store/app/routes/$lang/account/__private/logout.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {action, loader, logout} from '~/routes/account/__private/logout';

package/dist/templates/demo-store/app/routes/$lang/account/__private/orders.$id.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader, meta} from '~/routes/account/__private/orders.$id';

package/dist/templates/demo-store/app/routes/$lang/account/__public/activate.$id.$activationToken.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+  action,
+  default,
+  handle,
+  meta,
+} from '~/routes/account/__public/activate.$id.$activationToken';

package/dist/templates/demo-store/app/routes/$lang/account/__public/login.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export {
+  action,
+  default,
+  handle,
+  loader,
+  meta,
+} from '~/routes/account/__public/login';

package/dist/templates/demo-store/app/routes/$lang/account/__public/recover.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {action, default, loader, meta} from '~/routes/account/__public/recover';

package/dist/templates/demo-store/app/routes/$lang/account/__public/register.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+  action,
+  default,
+  loader,
+  meta,
+} from '~/routes/account/__public/register';

package/dist/templates/demo-store/app/routes/$lang/account/__public/reset.$id.$resetToken.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+export {
+  action,
+  default,
+  meta,
+} from '~/routes/account/__public/reset.$id.$resetToken';

package/dist/templates/demo-store/app/routes/$lang/account.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader} from '~/routes/account';

package/dist/templates/demo-store/app/routes/$lang/api/countries.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader} from '~/routes/api/countries';

package/dist/templates/demo-store/app/routes/$lang/api/products.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader} from '~/routes/api/products';

package/dist/templates/demo-store/app/routes/$lang/cart.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default} from '~/routes/cart';

package/dist/templates/demo-store/app/routes/$lang/collections/$collectionHandle.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+  default,
+  handle,
+  loader,
+  meta,
+} from '~/routes/collections/$collectionHandle';

package/dist/templates/demo-store/app/routes/$lang/collections/all.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {loader} from '~/routes/collections/all';

package/dist/templates/demo-store/app/routes/$lang/collections/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, handle, loader, meta} from '~/routes/collections/index';

package/dist/templates/demo-store/app/routes/$lang/featured-products.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {getFeaturedData, loader} from '~/routes/featured-products';

package/dist/templates/demo-store/app/routes/$lang/index.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export {
+  FEATURED_COLLECTIONS_QUERY,
+  HOMEPAGE_FEATURED_PRODUCTS_QUERY,
+  default,
+  handle,
+  loader,
+} from '~/routes/index';

package/dist/templates/demo-store/app/routes/$lang/journal/$journalHandle.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export {
+  default,
+  handle,
+  links,
+  loader,
+  meta,
+} from '~/routes/journal/$journalHandle';

package/dist/templates/demo-store/app/routes/$lang/journal/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, handle, loader, meta} from '~/routes/journal/index';

package/dist/templates/demo-store/app/routes/$lang/og-image.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {loader} from '~/routes/og-image';

package/dist/templates/demo-store/app/routes/$lang/pages/$pageHandle.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, handle, loader, meta} from '~/routes/pages/$pageHandle';

package/dist/templates/demo-store/app/routes/$lang/policies/$policyHandle.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, loader, meta} from '~/routes/policies/$policyHandle';

package/dist/templates/demo-store/app/routes/$lang/policies/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, handle, loader, meta} from '~/routes/policies/index';

package/dist/templates/demo-store/app/routes/$lang/products/$productHandle.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+  ProductForm,
+  default,
+  handle,
+  loader,
+} from '~/routes/products/$productHandle';

package/dist/templates/demo-store/app/routes/$lang/products/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {default, handle, loader, meta} from '~/routes/products/index';

package/dist/templates/demo-store/app/routes/$lang/search.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+export {
+  default,
+  getNoResultRecommendations,
+  handle,
+  loader,
+} from '~/routes/search';

package/dist/templates/demo-store/app/routes/[robots.txt].tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import {type LoaderArgs} from '@shopify/remix-oxygen';
+export const loader = ({request}: LoaderArgs) => {
+  const url = new URL(request.url);
+  return new Response(robotsTxtData({url: url.origin}), {
+    status: 200,
+    headers: {
+      'content-type': 'text/plain',
+      // Cache for 24 hours
+      'cache-control': `max-age=${60 * 60 * 24}`,
+    },
+  });
+};
+function robotsTxtData({url}: {url: string}) {
+  const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
+  return `
+User-agent: *
+Disallow: /admin
+Disallow: /cart
+Disallow: /orders
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /account
+${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
+# Google adsbot ignores robots.txt unless specifically named!
+User-agent: adsbot-google
+Disallow: /checkouts/
+Disallow: /checkout
+Disallow: /carts
+Disallow: /orders
+User-agent: Pinterest
+Crawl-delay: 1
+`.trim();
+}

package/dist/templates/demo-store/app/routes/[sitemap.xml].tsx ADDED Viewed

@@ -0,0 +1,198 @@
+import {flattenConnection} from '@shopify/hydrogen-react';
+import type {LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  CollectionConnection,
+  PageConnection,
+  ProductConnection,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import invariant from 'tiny-invariant';
+const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time
+interface SitemapQueryData {
+  products: ProductConnection;
+  collections: CollectionConnection;
+  pages: PageConnection;
+}
+interface ProductEntry {
+  url: string;
+  lastMod: string;
+  changeFreq: string;
+  image?: {
+    url: string;
+    title?: string;
+    caption?: string;
+  };
+}
+export async function loader({request, context: {storefront}}: LoaderArgs) {
+  const data = await storefront.query<SitemapQueryData>(SITEMAP_QUERY, {
+    variables: {
+      urlLimits: MAX_URLS,
+      language: storefront.i18n?.language,
+    },
+  });
+  invariant(data, 'Sitemap data is missing');
+  return new Response(
+    shopSitemap({data, baseUrl: new URL(request.url).origin}),
+    {
+      headers: {
+        'content-type': 'application/xml',
+        // Cache for 24 hours
+        'cache-control': `max-age=${60 * 60 * 24}`,
+      },
+    },
+  );
+}
+function shopSitemap({
+  data,
+  baseUrl,
+}: {
+  data: SitemapQueryData;
+  baseUrl: string;
+}) {
+  const productsData = flattenConnection(data.products)
+    .filter((product) => product.onlineStoreUrl)
+    .map((product) => {
+      const url = `${baseUrl}/products/${product.handle}`;
+      const finalObject: ProductEntry = {
+        url,
+        lastMod: product.updatedAt!,
+        changeFreq: 'daily',
+      };
+      if (product.featuredImage?.url) {
+        finalObject.image = {
+          url: product.featuredImage!.url,
+        };
+        if (product.title) {
+          finalObject.image.title = product.title;
+        }
+        if (product.featuredImage!.altText) {
+          finalObject.image.caption = product.featuredImage!.altText;
+        }
+      }
+      return finalObject;
+    });
+  const collectionsData = flattenConnection(data.collections)
+    .filter((collection) => collection.onlineStoreUrl)
+    .map((collection) => {
+      const url = `${baseUrl}/collections/${collection.handle}`;
+      return {
+        url,
+        lastMod: collection.updatedAt,
+        changeFreq: 'daily',
+      };
+    });
+  const pagesData = flattenConnection(data.pages)
+    .filter((page) => page.onlineStoreUrl)
+    .map((page) => {
+      const url = `${baseUrl}/pages/${page.handle}`;
+      return {
+        url,
+        lastMod: page.updatedAt,
+        changeFreq: 'weekly',
+      };
+    });
+  const urlsDatas = [...productsData, ...collectionsData, ...pagesData];
+  return `
+    <urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+    >
+      ${urlsDatas.map((url) => renderUrlTag(url!)).join('')}
+    </urlset>`;
+}
+function renderUrlTag({
+  url,
+  lastMod,
+  changeFreq,
+  image,
+}: {
+  url: string;
+  lastMod?: string;
+  changeFreq?: string;
+  image?: {
+    url: string;
+    title?: string;
+    caption?: string;
+  };
+}) {
+  return `
+    <url>
+      <loc>${url}</loc>
+      <lastmod>${lastMod}</lastmod>
+      <changefreq>${changeFreq}</changefreq>
+      ${
+        image
+          ? `
+        <image:image>
+          <image:loc>${image.url}</image:loc>
+          <image:title>${image.title ?? ''}</image:title>
+          <image:caption>${image.caption ?? ''}</image:caption>
+        </image:image>`
+          : ''
+      }
+    </url>
+  `;
+}
+const SITEMAP_QUERY = `#graphql
+  query sitemaps($urlLimits: Int, $language: LanguageCode)
+  @inContext(language: $language) {
+    products(
+      first: $urlLimits
+      query: "published_status:'online_store:visible'"
+    ) {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+          title
+          featuredImage {
+            url
+            altText
+          }
+        }
+      }
+    }
+    collections(
+      first: $urlLimits
+      query: "published_status:'online_store:visible'"
+    ) {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+        }
+      }
+    }
+    pages(first: $urlLimits, query: "published_status:'published'") {
+      edges {
+        node {
+          updatedAt
+          handle
+          onlineStoreUrl
+        }
+      }
+    }
+  }
+`;