@shopify/hydrogen 0.11.1-experimental.0 → 0.11.1-experimental.1

package/CHANGELOG.md

@@ -7,10 +7,11 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## [Unreleased] -->
 
-## 0.11.1-experimental.0
+## 0.11.1-experimental.1
 
 ### Patch Changes
 
+- 11426471: Fix issue with components that take in the `as` prop not validating other props when a component is passed to `as`.
 - b96179fd: Ensure ProductSeo knows how to handle `featuredImage = null`
 - 2e487b7e: Switch to using Changesets for changelogs.
 - 2d8ab7e2: Hydrogen docs: Preloaded queries and query timing

package/dist/esnext/components/CartLinePrice/CartLinePrice.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface CartLinePriceProps extends Omit<MoneyProps, 'data'> {
+export interface CartLinePriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
@@ -9,4 +9,4 @@ export interface CartLinePriceProps extends Omit<MoneyProps, 'data'> {
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice<TTag extends ElementType>(props: Props<TTag> & CartLinePriceProps<TTag>): JSX.Element | null;

package/dist/esnext/components/CartLineProductTitle/CartLineProductTitle.client.d.ts

@@ -6,5 +6,5 @@ import { Props } from '../types';
  */
 export declare function CartLineProductTitle<TTag extends ElementType>(props: Props<TTag> & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `span`.  */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element;

package/dist/esnext/components/CartLineQuantity/CartLineQuantity.client.d.ts

@@ -6,5 +6,5 @@ import { Props } from '../types';
  */
 export declare function CartLineQuantity<TTag extends ElementType>(props: Props<TTag> & {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element;

package/dist/esnext/components/Metafield/Metafield.client.d.ts

@@ -1,11 +1,11 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { ParsedMetafield } from '../../types';
-export interface MetafieldProps {
+export interface MetafieldProps<TTag> {
     /** A [Metafield object](/api/storefront/reference/common-objects/metafield) from the Storefront API. */
     data: ParsedMetafield;
     /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](/apps/metafields/types). */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `Metafield` component renders the value of a Storefront
@@ -14,7 +14,7 @@ export interface MetafieldProps {
  * Renders a smart default of the
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
-export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps): JSX.Element | null;
+export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;
 export declare namespace Metafield {
     var Fragment: string;
 }

package/dist/esnext/components/Metafield/components/StarRating/StarRating.d.ts

@@ -3,12 +3,12 @@ import { Props } from '../../../types';
 import { Rating } from '../../../../types';
 export declare const STAR_EMPTY = "\u2606";
 export declare const STAR_FILLED = "\u2605";
-export interface StarRatingProps {
+export interface StarRatingProps<TTag> {
     rating: Rating;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
-export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps): JSX.Element;
+export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps<TTag>): JSX.Element;
 export declare function Star({ percentFilled }: {
     percentFilled: number;
 }): JSX.Element;

package/dist/esnext/components/Money/Money.client.d.ts

@@ -1,9 +1,9 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { MoneyV2 } from '../../graphql/types/types';
-export interface MoneyProps {
+export interface MoneyProps<TTag> {
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
     data: MoneyV2;
 }
@@ -12,7 +12,7 @@ export interface MoneyProps {
  * [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in the `shopify.config.js` file.
  */
-export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps): JSX.Element;
+export declare function Money<TTag extends ElementType>(props: Props<TTag> & MoneyProps<TTag>): JSX.Element;
 export declare namespace Money {
     var Fragment: string;
 }

package/dist/esnext/components/ProductMetafield/ProductMetafield.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { MetafieldProps } from '../Metafield/Metafield.client';
-export interface ProductMetafieldProps extends Omit<MetafieldProps, 'metafield'> {
+export interface ProductMetafieldProps<TTag> extends Omit<MetafieldProps<TTag>, 'metafield'> {
     /** A string corresponding to the [key](/api/storefront/reference/common-objects/metafield) of the product's
      * metafield.
      */
@@ -18,4 +18,4 @@ export interface ProductMetafieldProps extends Omit<MetafieldProps, 'metafield'>
  * [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.
  * It must be a descendent of a `ProductProvider` component.
  */
-export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps, 'data'>): JSX.Element | null;
+export declare function ProductMetafield<TTag extends ElementType>(props: Props<TTag> & Omit<ProductMetafieldProps<TTag>, 'data'>): JSX.Element | null;

package/dist/esnext/components/ProductPrice/ProductPrice.client.d.ts

@@ -1,7 +1,7 @@
 import { ElementType } from 'react';
 import { MoneyProps } from '../Money';
 import { Props } from '../types';
-export interface ProductPriceProps extends Omit<MoneyProps, 'data'> {
+export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -13,4 +13,4 @@ export interface ProductPriceProps extends Omit<MoneyProps, 'data'> {
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps<TTag>): JSX.Element | null;

package/dist/esnext/components/ProductTitle/ProductTitle.client.d.ts

@@ -9,5 +9,5 @@ export declare function ProductTitle<TTag extends ElementType = 'span'>(props: P
     /** An HTML tag to wrap the title. If not specified, then the
      * title is wrapped in a `span` element.
      */
-    as?: ElementType;
+    as?: TTag;
 }): JSX.Element | null;

package/dist/esnext/components/RawHtml/RawHtml.d.ts

@@ -1,12 +1,12 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
-export interface RawHtmlProps {
+export interface RawHtmlProps<TTag> {
     /** An HTML string. */
     string: string;
     /** Whether the HTML string should be sanitized with `isomorphic-dompurify`. */
     unsanitized?: boolean;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `RawHtml` component renders an HTML string as HTML DOM elements. This should be used for
@@ -16,4 +16,4 @@ export interface RawHtmlProps {
  * [isomorphic-dompurify](https://github.com/kkomelin/isomorphic-dompurify) by default.
  * To keep the text unsanitized, set the `unsanitized` prop to `true`.
  */
-export declare function RawHtml<TTag extends ElementType>(props: Props<TTag> & RawHtmlProps): JSX.Element;
+export declare function RawHtml<TTag extends ElementType>(props: Props<TTag> & RawHtmlProps<TTag>): JSX.Element;

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -1,19 +1,19 @@
 import { ElementType } from 'react';
 import { Props } from '../types';
 import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
-export interface UnitPriceProps {
+export interface UnitPriceProps<TTag> {
     /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
     data: MoneyV2;
     /** A [`UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement). */
     measurement: UnitPriceMeasurement;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: ElementType;
+    as?: TTag;
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
  * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  */
-export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps): JSX.Element;
+export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps<TTag>): JSX.Element;
 export declare namespace UnitPrice {
     var Fragment: string;
 }

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.11.1-experimental.0",
+  "version": "0.11.1-experimental.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",