@faststore/core 2.0.80-alpha.0 → 2.0.81-alpha.0

package/.turbo/turbo-build.log

@@ -21,13 +21,13 @@ info  - Generating static pages (13/13)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.85 kB         124 kB
+┌ ● /                                      2.83 kB         127 kB
 ├   └ css/43d61b402f41569b.css             1.84 kB
 ├   /_app                                  0 B             100 kB
-├ ● /[...slug]                             6.86 kB         128 kB
+├ ● /[...slug]                             6.82 kB         131 kB
 ├   └ css/430b8cafbf7c23c1.css             2.53 kB
-├ ● /[slug]/p                              11.7 kB         133 kB
-├   └ css/e63697a078fd522e.css             3.87 kB
+├ ● /[slug]/p                              11.7 kB         135 kB
+├   └ css/9e7c9877b9f78c63.css             3.87 kB
 ├ ○ /404                                   431 B           106 kB
 ├ ○ /500                                   439 B           106 kB
 ├ ○ /account                               369 B           106 kB
@@ -40,9 +40,9 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-9cc7312632f19e94.js  28.9 kB
-  ├ chunks/webpack-8649a0a6a4495828.js     2.21 kB
-  └ css/14ebc84fc6d6c80c.css               19.9 kB
+  ├ chunks/pages/_app-81a4a14c7f15c641.js  28.9 kB
+  ├ chunks/webpack-1352532ac51c6a2d.js     2.23 kB
+  └ css/9e8d9784094a047f.css               19.9 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.81-alpha.0](https://github.com/vtex/faststore/compare/v2.0.80-alpha.0...v2.0.81-alpha.0) (2023-03-16)
+
+### Features
+
+- Image using next/future/image + new Thumbor URL ([#1661](https://github.com/vtex/faststore/issues/1661)) ([8b9a33b](https://github.com/vtex/faststore/commit/8b9a33bf2ce1d671498785a9a35db881c40fcf8e))
+
 ## [2.0.80-alpha.0](https://github.com/vtex/faststore/compare/v2.0.79-alpha.0...v2.0.80-alpha.0) (2023-03-15)
 
 ### Bug Fixes

package/next.config.js

@@ -1,10 +1,14 @@
 // @ts-check
+const storeConfig = require('./faststore.config')
 
 /**
  * @type {import('next').NextConfig}
  * */
 const nextConfig = {
   /* config options here */
+  images: {
+    domains: [`${storeConfig.api.storeId}.vtexassets.com`],
+  },
   i18n: {
     locales: ['en-US'],
     defaultLocale: 'en-US',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.80-alpha.0",
+  "version": "2.0.81-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -33,7 +33,7 @@
     "@faststore/components": "^2.0.80-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.79-alpha.0",
+    "@faststore/ui": "^2.0.81-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -51,6 +51,7 @@
     "react-intersection-observer": "^8.32.5",
     "sass": "^1.44.0",
     "sass-loader": "^12.6.0",
+    "sharp": "^0.31.3",
     "style-loader": "^3.3.1",
     "swr": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
@@ -107,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "f34f2ebca04e5c97d12a33ba41bcd7dac7105756"
+  "gitHead": "ee2d29df5f4f3e0ca97cc16e86f5ca5182a7be5e"
 }

package/src/components/sections/Hero/Hero.tsx

@@ -40,9 +40,8 @@ const Hero = ({
       <UIHero>
         <UIHeroImage data-fs-hero-image>
           <Image
-            preload
             loading="eager"
-            fetchPriority="high"
+            priority
             src={imageSrc}
             alt={imageAlt}
             width={360}

package/src/components/ui/Image/Image.tsx

@@ -1,59 +1,33 @@
-import { forwardRef, memo } from 'react'
-import Head from 'next/head'
+import { memo } from 'react'
 
+import NextImage, { ImageProps } from 'next/future/image'
+import { ThumborOptions } from './thumborUrlBuilder'
 import { useImage } from './useImage'
-import type { ImageOptions } from './useImage'
 
-// React still don't have imageSizes declared on its types. Somehow,
-// it generated the right html
-declare module 'react' {
-  interface ImgHTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    fetchpriority?: string
-  }
+// Next loader function does not handle all props as height and options,
+// so we use the useImage hook to handle the custom thumbor loader (VTEX CDN) along with unoptimized prop
+// https://nextjs.org/docs/api-reference/next/image#loader
+function Image({ src, width, height, quality, ...otherProps }: ImageProps) {
+  const { src: thumborSrc, alt } = useImage({
+    src: String(src),
+    width: Number(width),
+    height: Number(height),
+    options: quality ? ({ filters: { quality } } as ThumborOptions) : undefined,
+    ...otherProps,
+  })
 
-  interface LinkHTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    imageSizes?: string
-    fetchpriority?: string
-  }
+  return (
+    <NextImage
+      data-fs-image
+      unoptimized
+      src={thumborSrc}
+      width={width}
+      height={height}
+      alt={alt}
+      {...otherProps}
+    />
+  )
 }
 
-interface Props extends ImageOptions {
-  preload?: boolean
-  fetchPriority?: string
-}
-
-// TODO: Replace this component by next/image
-const Image = forwardRef<HTMLImageElement, Props>(
-  ({ preload = false, fetchPriority, ...otherProps }, ref) => {
-    const imgProps = useImage(otherProps)
-    const { src, sizes = '100vw', srcSet } = imgProps
-
-    return (
-      <>
-        {preload && (
-          <Head>
-            <link
-              as="image"
-              rel="preload"
-              href={src}
-              imageSrcSet={srcSet}
-              imageSizes={sizes}
-              fetchpriority={fetchPriority}
-            />
-          </Head>
-        )}
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          ref={ref}
-          data-fs-image
-          {...imgProps}
-          alt={imgProps.alt}
-          fetchpriority={fetchPriority}
-        />
-      </>
-    )
-  }
-)
-
 Image.displayName = 'Image'
 export default memo(Image)

package/src/components/ui/Image/thumborUrlBuilder.ts

@@ -1,3 +1,5 @@
+import storeConfig from 'faststore.config'
+
 export type FilterValue = boolean | string | string[] | number[]
 
 export interface Box {
@@ -19,7 +21,7 @@ export interface ThumborOptions {
   manualCrop?: Box | false
 }
 
-const THUMBOR_SERVER = 'https://assets.vtex.app'
+const THUMBOR_SERVER = `https://${storeConfig.api.storeId}.vtexassets.com`
 
 const cropSection = ({ left, top, right, bottom }: Box) =>
   `${left}x${top}:${right}x${bottom}`

package/src/components/ui/ImageGallery/ImageGallery.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import type { HTMLAttributes } from 'react'
+import { useState } from 'react'
 
 import { Image } from 'src/components/ui/Image'
 import styles from 'src/components/ui/ImageGallery/image-gallery.module.scss'
@@ -34,7 +34,7 @@ function ImageGallery({ images, ...otherProps }: ImageGalleryProps) {
           width={804}
           height={804 * (3 / 4)}
           loading="eager"
-          fetchPriority="high"
+          priority
         />
       </ImageZoom>
       {hasSelector && (

package/src/components/ui/ImageGallery/ImageGallerySelector.tsx

@@ -1,5 +1,5 @@
-import { useRef } from 'react'
 import { Button as UIButton, IconButton as UIIconButton } from '@faststore/ui'
+import { useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import Icon from 'src/components/ui/Icon'
@@ -89,7 +89,9 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
               }
             >
               <Image
-                ref={ref}
+                onLoadingComplete={(img) => {
+                  if (ref) ref(img)
+                }}
                 src={image.url}
                 alt={image.alternateName}
                 loading={idx === 0 ? 'eager' : 'lazy'}

package/src/components/ui/ImageGallery/image-gallery-selector.module.scss

@@ -96,7 +96,7 @@
       color: var(--fs-color-text-display);
     }
 
-    span {
+    [data-fs-icon]span {
       display: flex;
       height: fit-content;
       padding: var(--fs-spacing-1);
@@ -124,7 +124,7 @@
       width: 100%;
       background: linear-gradient(180deg, var(--fs-color-body-bkg) 55%, transparent);
 
-      span {
+      [data-fs-icon]span {
         transform: rotate(90deg);
       }
 

package/src/styles/global/layout.scss

@@ -71,10 +71,3 @@ main,
     visibility: hidden;
   }
 }
-
-// Image
-[data-fs-image] {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/.next/BUILD_ID

@@ -1 +0,0 @@
-aek2NDV1vh2ZKaUTiqnby

package/.next/build-manifest.json

@@ -1,103 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/aek2NDV1vh2ZKaUTiqnby/_buildManifest.js",
-    "static/aek2NDV1vh2ZKaUTiqnby/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/817-728f854c2948afc0.js",
-      "static/css/43d61b402f41569b.css",
-      "static/chunks/pages/index-6717326cc207d674.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/404-ba608a2a9f0c420a.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/500-910883c20541d9ce.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/337-4b719ca7a86d8d8c.js",
-      "static/css/430b8cafbf7c23c1.css",
-      "static/chunks/pages/[...slug]-9443b18a60d89746.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/260-994385416f68673d.js",
-      "static/chunks/817-728f854c2948afc0.js",
-      "static/css/e63697a078fd522e.css",
-      "static/chunks/pages/[slug]/p-cb8ef12f6449cf26.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/css/14ebc84fc6d6c80c.css",
-      "static/chunks/pages/_app-9cc7312632f19e94.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/account-f19102933e6fd84c.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/checkout-f8cb7cb22225ef9d.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/pages/login-0b9ea80d9fa0f91b.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-8649a0a6a4495828.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-9746772201fe3ac1.js",
-      "static/chunks/351-a4e28d64f48c5269.js",
-      "static/chunks/153-a20e3f2da180607e.js",
-      "static/chunks/337-4b719ca7a86d8d8c.js",
-      "static/css/9dd1d1084d254c66.css",
-      "static/chunks/pages/s-86fe1e3303388123.js"
-    ]
-  },
-  "ampFirstPages": []
-}