@faststore/core 3.0.130 → 3.0.131

package/.turbo/turbo-build.log

@@ -65,8 +65,8 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              93.8 kB
   ├ chunks/framework-8e279965036b6169.js   45.4 kB
   ├ chunks/main-029f1328cfee9686.js        33.1 kB
-  ├ chunks/pages/_app-ed807a0c1aebeb38.js  9.87 kB
-  ├ chunks/webpack-904b033805de64d4.js     2.45 kB
+  ├ chunks/pages/_app-cb1c3a94f987c5c8.js  9.87 kB
+  ├ chunks/webpack-ca5fe5a8d57b1bda.js     2.45 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/server/cms/index.test.ts (33.424 s)
-PASS test/utils/multipleTemplates.test.ts (33.735 s)
-PASS test/server/index.test.ts (38.039 s)
+PASS test/utils/multipleTemplates.test.ts (33.901 s)
+PASS test/server/cms/index.test.ts (34.829 s)
+PASS test/server/index.test.ts (38.864 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.212 s
+Time:        40.098 s
 Ran all test suites.

package/discovery.config.default.js

@@ -100,5 +100,6 @@ module.exports = {
     cypressVersion: 12,
     enableCypressExtension: false,
     noRobots: false,
+    preact: false,
   },
 }

package/next.config.js

@@ -46,6 +46,16 @@ const nextConfig = {
       config.optimization.splitChunks.maxInitialRequests = 1
     }
 
+    if (storeConfig.experimental.preact && !isServer && !dev) {
+      Object.assign(config.resolve.alias, {
+        react: 'preact/compat',
+
+        'react-dom/test-utils': 'preact/test-utils',
+
+        'react-dom': 'preact/compat',
+      })
+    }
+
     return config
   },
   redirects: storeConfig.redirects,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.130",
+  "version": "3.0.131",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,12 +43,12 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.0.130",
-    "@faststore/components": "^3.0.116",
-    "@faststore/graphql-utils": "^3.0.116",
-    "@faststore/lighthouse": "^3.0.116",
-    "@faststore/sdk": "^3.0.120",
-    "@faststore/ui": "^3.0.116",
+    "@faststore/api": "^3.0.131",
+    "@faststore/components": "^3.0.131",
+    "@faststore/graphql-utils": "^3.0.131",
+    "@faststore/lighthouse": "^3.0.131",
+    "@faststore/sdk": "^3.0.131",
+    "@faststore/ui": "^3.0.131",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -87,7 +87,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/eslint-config": "^3.0.116",
+    "@faststore/eslint-config": "^3.0.131",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "397a6ee1653fd5c8b42bd46429be651a95646ccc"
+  "gitHead": "79ad36cd135fc1f9bacd3224b33b4e5f7c4323da"
 }

package/src/components/cms/ViewportObserver.tsx

@@ -0,0 +1,88 @@
+import type { PropsWithChildren } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// Mobile height to prevent sections outside the viewport from being rendered initially.
+// We are using the Moto G Power device measurement as a reference, as used by PageSpeed Insights.
+const VIEWPORT_SIZE = 823
+
+type ViewportObserverProps = {
+  /**
+   * Identify the store section
+   */
+  sectionName?: string
+  /**
+   * Debug/test purposes: enables visual debugging to identify the visibility of the section.
+   */
+  debug?: boolean
+} & IntersectionObserverInit
+
+function ViewportObserver({
+  sectionName = '',
+  threshold = 0,
+  root = null,
+  rootMargin,
+  children,
+  debug = false,
+}: PropsWithChildren<ViewportObserverProps>) {
+  const [isVisible, setVisible] = useState(false)
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const observerCallback = useCallback(
+    ([entry]: IntersectionObserverEntry[], obs: IntersectionObserver) => {
+      if (entry.isIntersecting) {
+        if (debug) {
+          console.log(`section '${sectionName}' VISIBLE`)
+          document.body.style.border = '2px solid green'
+        }
+        setVisible(true)
+        if (ref.current) {
+          obs.unobserve(ref.current)
+        }
+      } else {
+        setVisible(false)
+        if (debug) {
+          console.log(`section '${sectionName}' NOT VISIBLE`)
+          document.body.style.border = '2px solid red'
+          document.body.style.height = `${VIEWPORT_SIZE}px`
+          document.body.style.boxSizing = 'border-box'
+        }
+      }
+    },
+    [debug, sectionName]
+  )
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(observerCallback, {
+      root,
+      rootMargin,
+      threshold,
+    })
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => observer.disconnect()
+  }, [observerCallback, root, rootMargin, threshold])
+
+  return (
+    <>
+      {!isVisible && (
+        <div
+          data-store-section-name={sectionName}
+          ref={ref}
+          style={{
+            border: debug ? '2px solid red' : undefined,
+            backgroundColor: debug ? 'red' : undefined,
+            height: VIEWPORT_SIZE, // required to make sections out of the viewport to be rendered on demand
+            width: '100%',
+          }}
+        ></div>
+      )}
+
+      {isVisible && children}
+    </>
+  )
+}
+
+export default ViewportObserver

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -7,6 +7,7 @@ import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import { ProductCardProps } from '../ProductCard'
 
 import { memo } from 'react'
+import ViewportObserver from 'src/components/cms/ViewportObserver'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 interface Props {
@@ -26,6 +27,10 @@ interface Props {
     ProductCardProps,
     'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
   >
+  /**
+   * Identify the number of firstPage
+   */
+  firstPage?: number
 }
 
 function ProductGrid({
@@ -33,38 +38,94 @@ function ProductGrid({
   page,
   pageSize,
   productCard: { showDiscountBadge, bordered, taxesConfiguration } = {},
+  firstPage,
 }: Props) {
   const { __experimentalProductCard: ProductCard } =
     useOverrideComponents<'ProductGallery'>()
   const aspectRatio = 1
 
+  // TODO: Check if is also isMobile
+  const isFirstPage = firstPage === page
+
   return (
     <ProductGridSkeleton
       aspectRatio={aspectRatio}
       loading={products.length === 0}
     >
       <UIProductGrid>
-        {products.map(({ node: product }, idx) => (
-          <UIProductGridItem key={`${product.id}`}>
-            <ProductCard.Component
-              aspectRatio={aspectRatio}
-              imgProps={{
-                width: 150,
-                height: 150,
-                sizes: '30vw',
-                loading: idx === 0 ? 'eager' : 'lazy',
-              }}
-              {...ProductCard.props}
-              bordered={bordered ?? ProductCard.props.bordered}
-              showDiscountBadge={
-                showDiscountBadge ?? ProductCard.props.showDiscountBadge
-              }
-              product={product}
-              index={pageSize * page + idx + 1}
-              taxesConfiguration={taxesConfiguration}
-            />
-          </UIProductGridItem>
-        ))}
+        {isFirstPage ? (
+          <>
+            {products.slice(0, 2).map(({ node: product }, idx) => (
+              <UIProductGridItem key={`${product.id}`}>
+                <ProductCard.Component
+                  aspectRatio={aspectRatio}
+                  imgProps={{
+                    width: 150,
+                    height: 150,
+                    sizes: '30vw',
+                    loading: 'eager',
+                  }}
+                  {...ProductCard.props}
+                  bordered={bordered ?? ProductCard.props.bordered}
+                  showDiscountBadge={
+                    showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                  }
+                  product={product}
+                  index={pageSize * page + idx + 1}
+                  taxesConfiguration={taxesConfiguration}
+                />
+              </UIProductGridItem>
+            ))}
+            <></>
+            <ViewportObserver sectionName="UIProductGrid-out-viewport">
+              {products.slice(2).map(({ node: product }, idx) => (
+                <UIProductGridItem key={`${product.id}`}>
+                  <ProductCard.Component
+                    aspectRatio={aspectRatio}
+                    imgProps={{
+                      width: 150,
+                      height: 150,
+                      sizes: '30vw',
+                      loading: 'lazy',
+                    }}
+                    {...ProductCard.props}
+                    bordered={bordered ?? ProductCard.props.bordered}
+                    showDiscountBadge={
+                      showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                    }
+                    product={product}
+                    index={pageSize * page + idx + 1}
+                    taxesConfiguration={taxesConfiguration}
+                  />
+                </UIProductGridItem>
+              ))}
+            </ViewportObserver>
+          </>
+        ) : (
+          <>
+            {products.map(({ node: product }, idx) => (
+              <UIProductGridItem key={`${product.id}`}>
+                <ProductCard.Component
+                  aspectRatio={aspectRatio}
+                  imgProps={{
+                    width: 150,
+                    height: 150,
+                    sizes: '30vw',
+                    loading: idx === 0 ? 'eager' : 'lazy',
+                  }}
+                  {...ProductCard.props}
+                  bordered={bordered ?? ProductCard.props.bordered}
+                  showDiscountBadge={
+                    showDiscountBadge ?? ProductCard.props.showDiscountBadge
+                  }
+                  product={product}
+                  index={pageSize * page + idx + 1}
+                  taxesConfiguration={taxesConfiguration}
+                />
+              </UIProductGridItem>
+            ))}
+          </>
+        )}
       </UIProductGrid>
     </ProductGridSkeleton>
   )

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -12,15 +12,15 @@ import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import { ProductCardProps } from 'src/components/product/ProductCard'
 import { FilterSliderProps } from 'src/components/search/Filter/FilterSlider'
 import { SortProps } from 'src/components/search/Sort/Sort'
-import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
-import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import {
   PLPContext,
   SearchPageContext,
   usePage,
 } from 'src/sdk/overrides/PageProvider'
 import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
+import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const GalleryPageSkeleton = <ProductGridSkeleton loading />
@@ -237,6 +237,7 @@ function ProductGallery({
                   title={title}
                   productCard={productCard}
                   itemsPerPage={itemsPerPage}
+                  firstPage={pages[0]}
                 />
               ))}
             </Suspense>

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -1,8 +1,8 @@
 import ProductGrid from 'src/components/product/ProductGrid'
 import Sentinel from 'src/sdk/search/Sentinel'
 
-import { ProductCardProps } from 'src/components/product/ProductCard'
 import { memo } from 'react'
+import { ProductCardProps } from 'src/components/product/ProductCard'
 import { useGalleryPage } from 'src/sdk/product/usePageProductsQuery'
 
 interface Props {
@@ -13,9 +13,16 @@ interface Props {
     'showDiscountBadge' | 'bordered' | 'taxesConfiguration'
   >
   itemsPerPage: number
+  firstPage: number
 }
 
-function ProductGalleryPage({ page, title, productCard, itemsPerPage }: Props) {
+function ProductGalleryPage({
+  page,
+  title,
+  productCard,
+  itemsPerPage,
+  firstPage,
+}: Props) {
   const { data } = useGalleryPage(page)
 
   const products = data?.search?.products?.edges ?? []
@@ -33,6 +40,7 @@ function ProductGalleryPage({ page, title, productCard, itemsPerPage }: Props) {
         page={page}
         pageSize={itemsPerPage}
         productCard={productCard}
+        firstPage={firstPage}
       />
     </>
   )

package/.next/static/chunks/758.829db9862d9c4add.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[758],{5758:function(e,r,t){t.r(r),t.d(r,{default:function(){return j}});var n=t(9499),o=t(2784);let a=(0,o.forwardRef)(function({testId:e="fs-product-grid",children:r,...t},n){return o.createElement("ul",{ref:n,"data-fs-product-grid":!0,...t},r)}),c=(0,o.forwardRef)(function({testId:e="fs-product-grid-item",children:r,...t},n){return o.createElement("li",{ref:n,"data-fs-product-grid-item":!0,...t},r)});var i=t(4548),s=t(4329),u=t(2322);function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){(0,n.Z)(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var d=(0,o.memo)(function(e){var{products:r,page:t,pageSize:n,productCard:{showDiscountBadge:o,bordered:d,taxesConfiguration:l}={}}=e,{__experimentalProductCard:p}=(0,s.r3)();return(0,u.jsx)(i.Z,{aspectRatio:1,loading:0===r.length,children:(0,u.jsx)(a,{children:r.map((e,r)=>{var{node:a}=e;return(0,u.jsx)(c,{children:(0,u.jsx)(p.Component,_objectSpread(_objectSpread({aspectRatio:1,imgProps:{width:150,height:150,sizes:"30vw",loading:0===r?"eager":"lazy"}},p.props),{},{bordered:null!=d?d:p.props.bordered,showDiscountBadge:null!=o?o:p.props.showDiscountBadge,product:a,index:n*t+r+1,taxesConfiguration:l}))},"".concat(a.id))})})})}),l=t(9029),p=t(7704),f=t(1163),g=t(6414),replacePagination=(e,r)=>{var t=new URL(window.location.href);t.searchParams.get("page")!==e&&(t.searchParams.set("page",e),r.replace(t,void 0,{shallow:!0,scroll:!1}))},search_Sentinel=function(e){var{page:r,pageSize:t,products:n,title:a}=e,c=(0,o.useRef)(!1),{ref:i,inView:s}=(0,p.YD)(),{pages:d}=(0,l.R)(),h=(0,f.useRouter)(),{sendViewItemListEvent:j}=(0,g.m)({products:n,title:a,page:r,pageSize:t});return(0,o.useEffect)(()=>{s&&d.length>1&&replacePagination(r.toString(),h),s&&!c.current&&n.length&&(j(),c.current=!0)},[d.length,s,r,h,j,n.length]),(0,u.jsx)("div",{ref:i})},h=t(7171),j=(0,o.memo)(function(e){var r,t,n,{page:o,title:a,productCard:c,itemsPerPage:i}=e,{data:s}=(0,h.__)(o),l=null!==(r=null==s?void 0:null===(t=s.search)||void 0===t?void 0:null===(n=t.products)||void 0===n?void 0:n.edges)&&void 0!==r?r:[];return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(search_Sentinel,{products:l,page:o,pageSize:i,title:a}),(0,u.jsx)(d,{products:l,page:o,pageSize:i,productCard:c})]})})}}]);