Skip to content

skeleton@2024.7.1

Choose a tag to compare

@shopify-github-actions-access shopify-github-actions-access released this 11 Jul 14:03
· 694 commits to main since this release
5aa0c18

Patch Changes

  • Update @shopify/oxygen-workers-types to fix issues on Windows. (#2252) by @michenly

  • Breaking change by @blittle

    Previously the VariantSelector component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to the VariantSelector component:

     <VariantSelector
       handle={product.handle}
    +  options={product.options.filter((option) => option.values.length > 1)}
    -  options={product.options}
       variants={variants}>
     </VariantSelector>

    Fixes #1198

  • Update remix to v2.10.1 (#2290) by @michenly

  • Update root to use Remix's Layout Export pattern and eliminate the use of useLoaderData in root. (#2292) by @michenly

    The diff below showcase how you can make this refactor in existing application.

    import {
      Outlet,
    -  useLoaderData,
    +  useRouteLoaderData,
    } from '@remix-run/react';
    -import {Layout} from '~/components/Layout';
    +import {PageLayout} from '~/components/PageLayout';
    
    -export default function App() {
    +export function Layout({children}: {children?: React.ReactNode}) {
      const nonce = useNonce();
    -  const data = useLoaderData<typeof loader>();
    +  const data = useRouteLoaderData<typeof loader>('root');
    
      return (
        <html>
        ...
          <body>
    -        <Layout {...data}>
    -          <Outlet />
    -        </Layout>
    +        {data? (
    +          <PageLayout {...data}>{children}</PageLayout>
    +         ) : (
    +          children
    +        )}
          </body>
        </html>
      );
    }
    
    +export default function App() {
    +  return <Outlet />;
    +}
    
    export function ErrorBoundary() {
    - const rootData = useLoaderData<typeof loader>();
    
      return (
    -    <html>
    -    ...
    -      <body>
    -        <Layout {...rootData}>
    -          <div className="route-error">
    -            <h1>Error</h1>
    -            ...
    -          </div>
    -        </Layout>
    -      </body>
    -    </html>
    +    <div className="route-error">
    +      <h1>Error</h1>
    +      ...
    +    </div>
      );
    }
    
  • Refactor the cart and product form components (#2132) by @blittle

  • Remove manual setting of session in headers and recommend setting it in server after response is created. (#2137) by @michenly

    Step 1: Add isPending implementation in session

    // in app/lib/session.ts
    export class AppSession implements HydrogenSession {
    +  public isPending = false;
    
      get unset() {
    +    this.isPending = true;
        return this.#session.unset;
      }
    
      get set() {
    +    this.isPending = true;
        return this.#session.set;
      }
    
      commit() {
    +    this.isPending = false;
        return this.#sessionStorage.commitSession(this.#session);
      }
    }

    Step 2: update response header if session.isPending is true

    // in server.ts
    export default {
      async fetch(request: Request): Promise<Response> {
        try {
          const response = await handleRequest(request);
    
    +      if (session.isPending) {
    +        response.headers.set('Set-Cookie', await session.commit());
    +      }
    
          return response;
        } catch (error) {
          ...
        }
      },
    };

    Step 3: remove setting cookie with session.commit() in routes

    // in route files
    export async function loader({context}: LoaderFunctionArgs) {
      return json({},
    -    {
    -      headers: {
    -        'Set-Cookie': await context.session.commit(),
    -      },
        },
      );
    }
  • Moved @shopify/cli from dependencies to devDependencies. (#2312) by @frandiox

  • The @shopify/cli package now bundles the @shopify/cli-hydrogen plugin. Therefore, you can now remove the latter from your local dependencies: (#2306) by @frandiox

        "@shopify/cli": "3.64.0",
    -   "@shopify/cli-hydrogen": "^8.1.1",
        "@shopify/hydrogen": "2024.7.0",
  • Updated dependencies [a0e84d76, 426bb390, 4337200c, 710625c7, 8b9c726d, 10a419bf, 6a6278bb, 66236ca6, dcbd0bbf, a5e03e2a, c2690653, 54c2f7ad, 4337200c, e96b332b, f3065371, 6cd5554b, 9eb60d73, e432533e, de3f70be, 83cb96f4]: