@shopify/cli 3.63.2 → 3.64.0

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -130,7 +130,7 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
   };
 }
 
-function Layout({children}: {children?: React.ReactNode}) {
+export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
   const data = useRouteLoaderData<RootLoader>('root');
 
@@ -162,11 +162,7 @@ function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
+  return <Outlet />;
 }
 
 export function ErrorBoundary() {
@@ -182,16 +178,14 @@ export function ErrorBoundary() {
   }
 
   return (
-    <Layout>
-      <div className="route-error">
-        <h1>Oops</h1>
-        <h2>{errorStatus}</h2>
-        {errorMessage && (
-          <fieldset>
-            <pre>{errorMessage}</pre>
-          </fieldset>
-        )}
-      </div>
-    </Layout>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }

package/dist/assets/hydrogen/starter/app/routes/cart.tsx

@@ -3,7 +3,7 @@ import {Suspense} from 'react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
-import {CartMain} from '~/components/Cart';
+import {CartMain} from '~/components/CartMain';
 import type {RootLoader} from '~/root';
 
 export const meta: MetaFunction = () => {
@@ -93,7 +93,7 @@ export default function Cart() {
           errorElement={<div>An error occurred</div>}
         >
           {(cart) => {
-            return <CartMain layout="page" cart={cart} />;
+            return <CartMain layout="page" cart={cart!} />;
           }}
         </Await>
       </Suspense>

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -1,32 +1,17 @@
 import {Suspense} from 'react';
 import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
+import type {ProductFragment} from 'storefrontapi.generated';
 import {
-  Await,
-  Link,
-  useLoaderData,
-  type MetaFunction,
-  type FetcherWithComponents,
-} from '@remix-run/react';
-import type {
-  ProductFragment,
-  ProductVariantsQuery,
-  ProductVariantFragment,
-} from 'storefrontapi.generated';
-import {
-  Image,
-  Money,
-  VariantSelector,
-  type VariantOption,
   getSelectedProductOptions,
-  CartForm,
-  type OptimisticCartLine,
   Analytics,
-  type CartViewPayload,
-  useAnalytics,
+  useOptimisticVariant,
 } from '@shopify/hydrogen';
 import type {SelectedOption} from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/lib/variants';
-import {useAside} from '~/components/Aside';
+import {ProductPrice} from '~/components/ProductPrice';
+import {ProductImage} from '~/components/ProductImage';
+import {ProductForm} from '~/components/ProductForm';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
@@ -143,15 +128,54 @@ function redirectToFirstVariant({
 
 export default function Product() {
   const {product, variants} = useLoaderData<typeof loader>();
-  const {selectedVariant} = product;
+  const selectedVariant = useOptimisticVariant(
+    product.selectedVariant,
+    variants,
+  );
+
+  const {title, descriptionHtml} = product;
+
   return (
     <div className="product">
       <ProductImage image={selectedVariant?.image} />
-      <ProductMain
-        selectedVariant={selectedVariant}
-        product={product}
-        variants={variants}
-      />
+      <div className="product-main">
+        <h1>{title}</h1>
+        <ProductPrice
+          price={selectedVariant?.price}
+          compareAtPrice={selectedVariant?.compareAtPrice}
+        />
+        <br />
+        <Suspense
+          fallback={
+            <ProductForm
+              product={product}
+              selectedVariant={selectedVariant}
+              variants={[]}
+            />
+          }
+        >
+          <Await
+            errorElement="There was a problem loading product variants"
+            resolve={variants}
+          >
+            {(data) => (
+              <ProductForm
+                product={product}
+                selectedVariant={selectedVariant}
+                variants={data?.product?.variants.nodes || []}
+              />
+            )}
+          </Await>
+        </Suspense>
+        <br />
+        <br />
+        <p>
+          <strong>Description</strong>
+        </p>
+        <br />
+        <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
+        <br />
+      </div>
       <Analytics.ProductView
         data={{
           products: [
@@ -171,211 +195,6 @@ export default function Product() {
   );
 }
 
-function ProductImage({image}: {image: ProductVariantFragment['image']}) {
-  if (!image) {
-    return <div className="product-image" />;
-  }
-  return (
-    <div className="product-image">
-      <Image
-        alt={image.altText || 'Product Image'}
-        aspectRatio="1/1"
-        data={image}
-        key={image.id}
-        sizes="(min-width: 45em) 50vw, 100vw"
-      />
-    </div>
-  );
-}
-
-function ProductMain({
-  selectedVariant,
-  product,
-  variants,
-}: {
-  product: ProductFragment;
-  selectedVariant: ProductFragment['selectedVariant'];
-  variants: Promise<ProductVariantsQuery | null>;
-}) {
-  const {title, descriptionHtml} = product;
-  return (
-    <div className="product-main">
-      <h1>{title}</h1>
-      <ProductPrice selectedVariant={selectedVariant} />
-      <br />
-      <Suspense
-        fallback={
-          <ProductForm
-            product={product}
-            selectedVariant={selectedVariant}
-            variants={[]}
-          />
-        }
-      >
-        <Await
-          errorElement="There was a problem loading product variants"
-          resolve={variants}
-        >
-          {(data) => (
-            <ProductForm
-              product={product}
-              selectedVariant={selectedVariant}
-              variants={data?.product?.variants.nodes || []}
-            />
-          )}
-        </Await>
-      </Suspense>
-      <br />
-      <br />
-      <p>
-        <strong>Description</strong>
-      </p>
-      <br />
-      <div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
-      <br />
-    </div>
-  );
-}
-
-function ProductPrice({
-  selectedVariant,
-}: {
-  selectedVariant: ProductFragment['selectedVariant'];
-}) {
-  return (
-    <div className="product-price">
-      {selectedVariant?.compareAtPrice ? (
-        <>
-          <p>Sale</p>
-          <br />
-          <div className="product-price-on-sale">
-            {selectedVariant ? <Money data={selectedVariant.price} /> : null}
-            <s>
-              <Money data={selectedVariant.compareAtPrice} />
-            </s>
-          </div>
-        </>
-      ) : (
-        selectedVariant?.price && <Money data={selectedVariant?.price} />
-      )}
-    </div>
-  );
-}
-
-function ProductForm({
-  product,
-  selectedVariant,
-  variants,
-}: {
-  product: ProductFragment;
-  selectedVariant: ProductFragment['selectedVariant'];
-  variants: Array<ProductVariantFragment>;
-}) {
-  const {open} = useAside();
-  const {publish, shop, cart, prevCart} = useAnalytics();
-  return (
-    <div className="product-form">
-      <VariantSelector
-        handle={product.handle}
-        options={product.options}
-        variants={variants}
-      >
-        {({option}) => <ProductOptions key={option.name} option={option} />}
-      </VariantSelector>
-      <br />
-      <AddToCartButton
-        disabled={!selectedVariant || !selectedVariant.availableForSale}
-        onClick={() => {
-          open('cart');
-          publish('cart_viewed', {
-            cart,
-            prevCart,
-            shop,
-            url: window.location.href || '',
-          } as CartViewPayload);
-        }}
-        lines={
-          selectedVariant
-            ? [
-                {
-                  merchandiseId: selectedVariant.id,
-                  quantity: 1,
-                  selectedVariant,
-                },
-              ]
-            : []
-        }
-      >
-        {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
-      </AddToCartButton>
-    </div>
-  );
-}
-
-function ProductOptions({option}: {option: VariantOption}) {
-  return (
-    <div className="product-options" key={option.name}>
-      <h5>{option.name}</h5>
-      <div className="product-options-grid">
-        {option.values.map(({value, isAvailable, isActive, to}) => {
-          return (
-            <Link
-              className="product-options-item"
-              key={option.name + value}
-              prefetch="intent"
-              preventScrollReset
-              replace
-              to={to}
-              style={{
-                border: isActive ? '1px solid black' : '1px solid transparent',
-                opacity: isAvailable ? 1 : 0.3,
-              }}
-            >
-              {value}
-            </Link>
-          );
-        })}
-      </div>
-      <br />
-    </div>
-  );
-}
-
-function AddToCartButton({
-  analytics,
-  children,
-  disabled,
-  lines,
-  onClick,
-}: {
-  analytics?: unknown;
-  children: React.ReactNode;
-  disabled?: boolean;
-  lines: Array<OptimisticCartLine>;
-  onClick?: () => void;
-}) {
-  return (
-    <CartForm route="/cart" inputs={{lines}} action={CartForm.ACTIONS.LinesAdd}>
-      {(fetcher: FetcherWithComponents<any>) => (
-        <>
-          <input
-            name="analytics"
-            type="hidden"
-            value={JSON.stringify(analytics)}
-          />
-          <button
-            type="submit"
-            onClick={onClick}
-            disabled={disabled ?? fetcher.state !== 'idle'}
-          >
-            {children}
-          </button>
-        </>
-      )}
-    </CartForm>
-  );
-}
-
 const PRODUCT_VARIANT_FRAGMENT = `#graphql
   fragment ProductVariant on ProductVariant {
     availableForSale

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "0.0.0-next-9eb60d7-20240607102913",
+  "version": "0.0.0-next-18e76ba-20240708092928",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,11 +14,11 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.9.2",
-    "@remix-run/server-runtime": "^2.9.2",
-    "@shopify/cli": "3.61.0",
-    "@shopify/hydrogen": "0.0.0-next-9eb60d7-20240607102913",
-    "@shopify/remix-oxygen": "0.0.0-next-9eb60d7-20240607102913",
+    "@remix-run/react": "^2.10.1",
+    "@remix-run/server-runtime": "^2.10.1",
+    "@shopify/cli": "^3.63.2",
+    "@shopify/hydrogen": "0.0.0-next-18e76ba-20240708092928",
+    "@shopify/remix-oxygen": "0.0.0-next-18e76ba-20240708092928",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
@@ -27,11 +27,11 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
-    "@remix-run/dev": "^2.9.2",
-    "@remix-run/eslint-config": "^2.9.2",
-    "@shopify/hydrogen-codegen": "0.0.0-next-9eb60d7-20240607102913",
-    "@shopify/mini-oxygen": "^3.0.3",
-    "@shopify/oxygen-workers-types": "^4.0.0",
+    "@remix-run/dev": "^2.10.1",
+    "@remix-run/eslint-config": "^2.10.1",
+    "@shopify/hydrogen-codegen": "0.0.0-next-18e76ba-20240708092928",
+    "@shopify/mini-oxygen": "0.0.0-next-18e76ba-20240708092928",
+    "@shopify/oxygen-workers-types": "^4.1.2",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",

package/dist/assets/hydrogen/tailwind/package.json

@@ -3,11 +3,6 @@
     "defaults"
   ],
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "postcss": "^8.4.21",
-    "postcss-import": "^15.1.0",
-    "postcss-preset-env": "^8.2.0",
-    "tailwindcss": "^3.3.0"
+    "@tailwindcss/vite": "4.0.0-alpha.17"
   }
 }

package/dist/assets/hydrogen/tailwind/tailwind.css

@@ -1,3 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/**
+ * Configure Tailwind v4 in this file using CSS variables and directives:
+ * https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration 
+ */
+
+@import 'tailwindcss';

package/dist/assets/hydrogen/vanilla-extract/package.json

@@ -1,9 +1,8 @@
 {
-  "comment": "Remix version is automatically updated by the CLI",
   "dependencies": {
-    "@remix-run/css-bundle": "^1"
+    "@vanilla-extract/css": "^1.15.2"
   },
   "devDependencies": {
-    "@vanilla-extract/css": "^1.11.0"
+    "@vanilla-extract/vite-plugin": "^4.0.10"
   }
 }

package/dist/assets/hydrogen/virtual-routes/components/{Layout.jsx → PageLayout.jsx}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-function Layout(props) {
+function PageLayout(props) {
   return /* @__PURE__ */ jsx("div", { className: "hydrogen-virtual-route", children: props.children });
 }
 export {
-  Layout
+  PageLayout
 };

package/dist/assets/hydrogen/virtual-routes/virtual-root.jsx

@@ -2,14 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Links,
   Meta,
-  Outlet,
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteError
 } from "@remix-run/react";
 import favicon from "./assets/favicon.svg";
-import { Layout } from "./components/Layout.jsx";
+import { PageLayout } from "./components/PageLayout.jsx";
 import { useNonce } from "@shopify/hydrogen";
 import styles from "./assets/styles.css?url";
 const links = () => {
@@ -18,7 +17,7 @@ const links = () => {
     { rel: "icon", type: "image/svg+xml", href: favicon }
   ];
 };
-function App() {
+function Layout({ children }) {
   const nonce = useNonce();
   return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
     /* @__PURE__ */ jsxs("head", { children: [
@@ -36,14 +35,13 @@ function App() {
       /* @__PURE__ */ jsx(Links, {})
     ] }),
     /* @__PURE__ */ jsxs("body", { children: [
-      /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Outlet, {}) }),
+      /* @__PURE__ */ jsx(PageLayout, { children }),
       /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
       /* @__PURE__ */ jsx(Scripts, { nonce })
     ] })
   ] });
 }
 function ErrorBoundary() {
-  const nonce = useNonce();
   const error = useRouteError();
   let errorMessage = "Unknown error";
   let errorStatus = 500;
@@ -53,34 +51,14 @@ function ErrorBoundary() {
   } else if (error instanceof Error) {
     errorMessage = error.message;
   }
-  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
-    /* @__PURE__ */ jsxs("head", { children: [
-      /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }),
-      /* @__PURE__ */ jsx("title", { children: "Hydrogen" }),
-      /* @__PURE__ */ jsx(
-        "meta",
-        {
-          name: "description",
-          content: "A custom storefront powered by Hydrogen"
-        }
-      ),
-      /* @__PURE__ */ jsx(Meta, {}),
-      /* @__PURE__ */ jsx(Links, {})
-    ] }),
-    /* @__PURE__ */ jsxs("body", { children: [
-      /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
-        /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
-        /* @__PURE__ */ jsx("h2", { children: errorStatus }),
-        errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(ScrollRestoration, { nonce }),
-      /* @__PURE__ */ jsx(Scripts, { nonce })
-    ] })
+  return /* @__PURE__ */ jsxs("div", { className: "route-error", children: [
+    /* @__PURE__ */ jsx("h1", { children: "Please report this error" }),
+    /* @__PURE__ */ jsx("h2", { children: errorStatus }),
+    errorMessage && /* @__PURE__ */ jsx("fieldset", { children: /* @__PURE__ */ jsx("pre", { children: errorMessage }) })
   ] });
 }
 export {
   ErrorBoundary,
-  App as default,
+  Layout,
   links
 };

package/dist/{chunk-K3CVGV3F.js → chunk-2TZRSXDZ.js}

@@ -5,7 +5,7 @@ import {
   renderDangerousConfirmationPrompt,
   renderSelectPrompt,
   renderTextPrompt
-} from "./chunk-3MDI6LZT.js";
+} from "./chunk-6TPBPH6V.js";
 import {
   init_cjs_shims
 } from "./chunk-ZPL24Y2D.js";
@@ -13,7 +13,7 @@ import {
 // src/cli/services/kitchen-sink/prompts.ts
 init_cjs_shims();
 
-// ../cli-kit/src/public/node/figures.ts
+// ../cli-kit/dist/public/node/figures.js
 init_cjs_shims();
 
 // src/cli/services/kitchen-sink/prompts.ts
@@ -181,4 +181,4 @@ async function prompts() {
 export {
   prompts
 };
-//# sourceMappingURL=chunk-K3CVGV3F.js.map
+//# sourceMappingURL=chunk-2TZRSXDZ.js.map