@zalify/storefront-kit 0.1.0 → 0.1.2

package/dist/react/components/ProductCard.js

@@ -95,7 +95,7 @@ export function ProductCard({ product, loading = 'lazy' }) {
     const extraCount = pickerOption
         ? pickerOption.optionValues.length - valueLimit
         : 0;
-    return (_jsxs("div", { className: "product-card", children: [_jsxs("div", { className: "product-card__frame", children: [_jsxs(Link, { to: url, className: "product-card__media", "aria-label": product.title, children: [featuredImage ? (_jsxs(_Fragment, { children: [_jsx("img", { className: "product-card__image", src: imageUrl(featuredImage.url, 800), srcSet: cardSrcSet(featuredImage.url), sizes: CARD_SIZES, loading: loading, alt: featuredImage.altText ?? '', width: featuredImage.width ?? undefined, height: featuredImage.height ?? undefined }), secondaryImage ? (_jsx("img", { className: "product-card__image product-card__image--hover", src: imageUrl(secondaryImage.url, 800), srcSet: cardSrcSet(secondaryImage.url), sizes: CARD_SIZES, loading: "lazy", alt: "", "aria-hidden": "true", width: secondaryImage.width ?? undefined, height: secondaryImage.height ?? undefined })) : null] })) : (_jsx(PlaceholderSvg, { className: "product-card__placeholder" })), preview ? (_jsx("img", { className: `product-card__image product-card__image--preview${preview.visible ? ' is-visible' : ''}`, src: preview.src, alt: "", "aria-hidden": "true", onLoad: () => setPreview((previous) => previous ? { ...previous, visible: true } : previous) })) : null, badgePosition === 'corner' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null] }), showQuickAdd ? (_jsx("div", { className: "product-card__quick product-card__quick--overlay", children: quickAdd })) : null] }), _jsxs("div", { className: "product-card__info stack", style: { '--stack-gap': 'var(--space-2xs)' }, children: [badgePosition === 'below' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null, _jsx("h3", { className: "product-card__title", children: _jsx(Link, { to: url, children: product.title }) }), _jsx(Price, { price: product.priceRange?.minVariantPrice, compareAt: product.compareAtPriceRange?.minVariantPrice, unitPrice: product.selectedOrFirstAvailableVariant?.unitPrice, unitPriceMeasurement: product.selectedOrFirstAvailableVariant?.unitPriceMeasurement }), themeSettings.card_show_rating ? _jsx(Rating, { product: product }) : null, pickerOption ? (_jsxs("div", { className: "product-card__swatches", onMouseOut: onSwatchLeave, children: [pickerOption.optionValues.slice(0, valueLimit).map((value) => {
+    return (_jsxs("div", { className: "product-card", children: [_jsxs("div", { className: "product-card__frame", children: [_jsxs(Link, { to: url, className: "product-card__media", "aria-label": product.title, children: [featuredImage ? (_jsxs(_Fragment, { children: [_jsx("img", { className: "product-card__image", src: imageUrl(featuredImage.url, 800), srcSet: cardSrcSet(featuredImage.url), sizes: CARD_SIZES, loading: loading, ...(loading === 'eager' ? { fetchpriority: 'high' } : null), alt: featuredImage.altText ?? '', width: featuredImage.width ?? undefined, height: featuredImage.height ?? undefined }), secondaryImage ? (_jsx("img", { className: "product-card__image product-card__image--hover", src: imageUrl(secondaryImage.url, 800), srcSet: cardSrcSet(secondaryImage.url), sizes: CARD_SIZES, loading: "lazy", alt: "", "aria-hidden": "true", width: secondaryImage.width ?? undefined, height: secondaryImage.height ?? undefined })) : null] })) : (_jsx(PlaceholderSvg, { className: "product-card__placeholder" })), preview ? (_jsx("img", { className: `product-card__image product-card__image--preview${preview.visible ? ' is-visible' : ''}`, src: preview.src, alt: "", "aria-hidden": "true", onLoad: () => setPreview((previous) => previous ? { ...previous, visible: true } : previous) })) : null, badgePosition === 'corner' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null] }), showQuickAdd ? (_jsx("div", { className: "product-card__quick product-card__quick--overlay", children: quickAdd })) : null] }), _jsxs("div", { className: "product-card__info stack", style: { '--stack-gap': 'var(--space-2xs)' }, children: [badgePosition === 'below' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null, _jsx("h3", { className: "product-card__title", children: _jsx(Link, { to: url, children: product.title }) }), _jsx(Price, { price: product.priceRange?.minVariantPrice, compareAt: product.compareAtPriceRange?.minVariantPrice, unitPrice: product.selectedOrFirstAvailableVariant?.unitPrice, unitPriceMeasurement: product.selectedOrFirstAvailableVariant?.unitPriceMeasurement }), themeSettings.card_show_rating ? _jsx(Rating, { product: product }) : null, pickerOption ? (_jsxs("div", { className: "product-card__swatches", onMouseOut: onSwatchLeave, children: [pickerOption.optionValues.slice(0, valueLimit).map((value) => {
                                 const targetVariant = targetVariantFor(product, pickerOption, value.name);
                                 const valueUrl = targetVariant
                                     ? `${url}?variant=${numericId(targetVariant.id)}`

package/dist/react/engine/CssVariables.d.ts

@@ -1 +1,3 @@
-export declare function CssVariables(): import("react").JSX.Element;
+export declare function CssVariables({ nonce }?: {
+    nonce?: string;
+}): import("react").JSX.Element;

package/dist/react/engine/CssVariables.js

@@ -99,7 +99,17 @@ function fontLinks() {
         hrefs.push(googleFontsHref(monoGoogle, 'wght@400;500'));
     return hrefs;
 }
-export function CssVariables() {
+// Promotes the preloaded font stylesheets to real stylesheets. Runs
+// inline so the fonts start applying as soon as the HTML streams in,
+// without the external CSS ever blocking first paint (display=swap
+// keeps text visible on the fallback font meanwhile).
+const FONT_CSS_LOADER = [
+    "for(var l=document.querySelectorAll('link[data-zfy-font-css]'),i=0;i<l.length;i++){",
+    "var s=document.createElement('link');",
+    "s.rel='stylesheet';s.href=l[i].href;",
+    'document.head.appendChild(s)}',
+].join('');
+export function CssVariables({ nonce } = {}) {
     const { css, links } = useMemo(() => ({ css: buildCss(), links: fontLinks() }), []);
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: "preload", as: "style", href: href, "data-zfy-font-css": "" }, href))), _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: FONT_CSS_LOADER } }), _jsx("noscript", { children: links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))) }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }

package/dist/react/engine/fonts.js

@@ -29,5 +29,10 @@ export function parseFontHandle(handle) {
 }
 export function googleFontsHref(family, axes = 'ital,wght@0,400;0,500;0,700;1,400') {
     const param = family.trim().replace(/ /g, '+');
-    return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+    // display=optional: the font never swaps in after first paint, so a
+    // late-arriving font file can't reflow text (zero font CLS). With the
+    // stylesheet loaded async (CssVariables), swap would otherwise shift
+    // layout on every cold load; optional shows the fallback first visit
+    // and the brand font from the cache on later views.
+    return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/react/components/ProductCard.tsx

@@ -176,6 +176,9 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
                 srcSet={cardSrcSet(featuredImage.url)}
                 sizes={CARD_SIZES}
                 loading={loading}
+                // Above-the-fold cards are LCP candidates on collection
+                // pages; lowercase attribute keeps React 18 compatible.
+                {...(loading === 'eager' ? {fetchpriority: 'high'} : null)}
                 alt={featuredImage.altText ?? ''}
                 width={featuredImage.width ?? undefined}
                 height={featuredImage.height ?? undefined}

package/src/react/engine/CssVariables.tsx

@@ -120,7 +120,18 @@ function fontLinks(): string[] {
   return hrefs;
 }
 
-export function CssVariables() {
+// Promotes the preloaded font stylesheets to real stylesheets. Runs
+// inline so the fonts start applying as soon as the HTML streams in,
+// without the external CSS ever blocking first paint (display=swap
+// keeps text visible on the fallback font meanwhile).
+const FONT_CSS_LOADER = [
+  "for(var l=document.querySelectorAll('link[data-zfy-font-css]'),i=0;i<l.length;i++){",
+  "var s=document.createElement('link');",
+  "s.rel='stylesheet';s.href=l[i].href;",
+  'document.head.appendChild(s)}',
+].join('');
+
+export function CssVariables({nonce}: {nonce?: string} = {}) {
   const {css, links} = useMemo(
     () => ({css: buildCss(), links: fontLinks()}),
     [],
@@ -134,8 +145,20 @@ export function CssVariables() {
         crossOrigin="anonymous"
       />
       {links.map((href) => (
-        <link key={href} rel="stylesheet" href={href} />
+        <link
+          key={href}
+          rel="preload"
+          as="style"
+          href={href}
+          data-zfy-font-css=""
+        />
       ))}
+      <script nonce={nonce} dangerouslySetInnerHTML={{__html: FONT_CSS_LOADER}} />
+      <noscript>
+        {links.map((href) => (
+          <link key={href} rel="stylesheet" href={href} />
+        ))}
+      </noscript>
       <style dangerouslySetInnerHTML={{__html: css}} />
     </>
   );

package/src/react/engine/fonts.ts

@@ -38,5 +38,10 @@ export function googleFontsHref(
   axes = 'ital,wght@0,400;0,500;0,700;1,400',
 ): string {
   const param = family.trim().replace(/ /g, '+');
-  return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+  // display=optional: the font never swaps in after first paint, so a
+  // late-arriving font file can't reflow text (zero font CLS). With the
+  // stylesheet loaded async (CssVariables), swap would otherwise shift
+  // layout on every cold load; optional shows the fallback first visit
+  // and the brand font from the cache on later views.
+  return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
 }