FastStore Release Notes - September 2021

Full Changelog

Can you believe we are on the third edition of Release Notes? 😮 🎂
That happened in the blink of an eye!

While August looked like the longest month of the year, the icing on the cake is our team news for these Release Notes. Take a look at our edition's highlights:

• 🚀 Badge component - create badges on top of your products.

• 💥 Deprecated folders removed - Who doesn't like a tidy house?

Get your birthday hat, and shall we check this edition?

Table of contents:

• Features 🚀
• Bug Fixes 🐛
• Breaking Changes 💥
• Improvements ✔️
• Documentation 📑

Features 🚀

• Select Atom #876: We have added to Store UI the Select atom, which generates a select component, as you can see below.

To check other options and see the code, go to Select Atom on Store UI.

• Badge component #894: a badge component is a great alternative when you want to create a discount badge (or any highlighted property) and add them on top of
  your product.

  For example, a discount badge on top of some ProductSummary components:

  

  Explore more of this component in Store UI and the FastStore repo.

• Icon Button #900: one more feature for your store is the Icon Button, which adds a Shopping cart icon to it. Take a look at the Store UI IconButton and also the repo.

• Agnostic store sdk analytics #903: Anyone, including non-VTEX developers, can now use store-sdk to implement their analytics layer with the guarantee that it'll be fully integrated with Google Analytics 4.

Bug Fixes 🐛

• Warnings and incremental builds - gatsby-plugin-graphql #889: While using gatsby-plugin-graphql, you could get warnings to prevent adding two different queries with the same name.

  With this fix it tracks the filename of the query and only warns when two queries of the same name in different files are created.

• Spread routes support - gatsby-plugin-nginx #895: Before any page created was available at, and only at /:slug/. If the user entered in /:slug it will receive a 404.
  Now, we make the route /{StoreCollection.slug}/, for example, also respond at /:slug. Check more details in the Spread routes support PR.

• Preventing stores from building - gatsby-plugin-cms#921: Stores no longer break the build when remote nodes are null.

Breaking Changes 💥

• Deprecated folders #927: We are keeping "our house" tidy, and that's why we are removing all deprecated folders. From now on, the old state will be on the branch legacy. Also, it reduces the store-ui size to 10kb maximum.

Improvements ✔️

• Upgrade Gatsby #887: Upgrading gatsby on each store could lead to some errors on theme-store and plugin-performance. Now, the packages are fixed while upgrading gatsby.

• Remove gatsby-config.js from theme-store #888:
  To use different styling systems on different stores, we have removed gatsby-config from theme-store, virtually making it a plugin.

• Upgrade Storybook version #905: Upgrades are always welcoming, mainly when we are talking about bugs! To fix bugs in some storybook versions we have upgrade the package version.

That's all, folks, for our Release Notes. It should be a cakewalk to keep up the good work!

Make sure to star the repo so you keep your eyes on our next Release Notes.
See you next month 👋🚀

FastStore Release Notes - August 2021

Full Changelog

Gather around, people! FastStore Release Notes are back for the 2nd edition. 🎊

Before we check out what our first-class team has prepared this past month (I really do mean it), Let's take a moment to praise you. Yes, you. Bold enough to be part of this transformation with us. Thank you!

Now, shall we started it? 🚀

Table of contents:

• Features 🚀
• Bug Fixes 🐛
• Breaking Changes 💥
• Improvements ✔️
• Documentation 📑

Features 🚀

• CHANGELOG.MD #790: Keep the changelog up-to-date does not need to be a roadblock in your routine. CHANGELOG.md is automatically generated from your commit message. For a better way to create an explicit commit history, the commit merge messages need to follow the conventional commits.

  For example, if your change is about a fix, create a commit with the following message:

  fix: describe what you are fixing here

  The PR title will become the merge commit message and will be used to generate the changelog.
  

• Product page incremental builds #793: Sourcing data does not need to be painful and brings problems when using Gatsby's incremental builds. Using gatsby-graphql-toolkit for sourcing data and using the declarative Gatsby File System API for declaratively create product pages can solve those issues.

  Also, If you want to refresh the products, run the following command to clear the cache with Gatsby's cache:

  yarn clean
  

  Do not hesitate to check out the Gatsby GraphQL Source Toolkit for more information.

• Product view - gatsby-theme-store ##803: We are one step closer to make gatsby-theme-store in gatsby-plugin-store since now it removes product view from gatsby-theme-store and create basic build blocks to drop shadow on product pages.

  Also, to understand better about shadowing, see the shadowing documentation.

Bug Fixes 🐛

• Using origin vtex #797: No data trust issues around here, folks! To source product changes with the right values, now we use productOriginVtex option in the search query

• Page size - gatsby-source-vtex #799: Weep no more for 404 errors while fetching products: we fix it! Also, gatsby-source-vtexadds an option to fetch fewer products for testing purposes.

• Zipcode persistence throughout the checkout flow#802: Setting the zip code on the order form requires creating a new address for the user. However, the isDIsposable field should be set to true for this use case. Otherwise the behavior is not well defined.

• Missing GraphQL error messages#804: An error like the one below does not say much.

That's why we fixed GraphQL error messages, so now you can see something like the following:

• Fix undefined host in canonical tags of product pages#814: to solve the problem of product pages having invalid canonicals, we generate relative canonical tags with /<pathname> during SSR and hydrate it with https://<host>/<pathname> once the React hydration kicks in.

• Fix proxy pass when toPath has port numbers on it#830: To avoid to broke a new test, this Nginx plugin is replacing port number and not only :splat or :* values.

-           "https://mylogs-proxy.endpoint.com:8088/logs$is_args$args",
+           "https://mylogs-proxy.endpoint.com$1/logs$is_args$args",

• Prevent building twice#872: This fix improves build time on the FastStore monorepo.

Breaking Changes 💥

• Add next/prev links in search page's infinite scroll. #811: Our Search page's template uses infinite scroll, which helps improve the UX. However, it can cause problems for machines. Now the template has a load more button element, as shown in the picture below:

To make search engines understand pagination and keep the page's relevance, we replace the load more button with an anchor tag <a/> linking to the next page in the infinite scroll. Also, add another anchor tag pointing to previous pages. As a final result, you have something similar to the next example:

Improvements ✔️

• Improve atoms pattern consistency #819: We are always improving Store UI and this time, We have added ComponentArgTypes type to improve the typescript check when typing argtypes from components:
  

Any other improvements in atoms pattern consistency? Yes, let's see the following:

-Input and TextArea atoms state to variant.
-Deprecated Checkbox export name to UICheckbox, also add new Checkbox atom.
-Molecules and Atoms argtypes to improve typescript errors.
-Checkbox export Prop name to CheckboxProps.

• Improve CMS GraphQL types generation [#865](#865. In other words, it improves GraphQL type generation for the cms plugin.

This is an architectural-only change. No feature on the website should be changed. For this, make sure all content on the website stays the same from master.

For example, we have the following contentType written in Json Schema:

{
  homePage: {
    blocks: {
      banner: {
        type: 'object',
        properties: {
          imageUrl: {
            type: "string",
          }
        }
      }
    },
    extraBlocks: {
      seo: {
        tags: {
          type: 'object'
          properties: {
            title: {
              type: 'string'
            },
            description: {
              type: 'string'
            }
          }
        }
      }
    }
  }
}

Which will generate the following type on the gatsby's graphql layer:

type Block = {
  name: string
  props: any
}

type CmsHomePage = {
  sections: Block[]
  seo: {
    tags: {
       title: string
       description: string
    }
  }
}

And then query this data on React components by writting the following graphql query:

query HomePageQuery {
  cmsHomePage {
    sections: {
      name
      props
    }
    seo {
      tags {
        title
        description
      }
    }
  }
}

Documentation 📑

• How to implement the Search Banner Feature #812
• Update - CONTRIBUTING.md #816

Now that you are up-to-date with the release notes, I hope you feel energized to keep up the good work! Make sure to star the repo, so you keep your eyes on our next Release Notes.
See you next month 👋

FastStore Release Notes - July 2021

Full Changelog

Roll out the welcome mat, team, for FastStore Release Notes! 🎉

We are excited to bring the latest key changes on our platform from last June and make sure you're up-to-date with:

• Features on point
• Bugs? Not on my watch!
• Improvements to take you to the next level
• Breaking changes
• Documentation to guide you
• And a special thanks to our folks!

Our team has prepared thrilling releases which will brighten your day. Lay back, spread the word, and let's check it! 🚀

Table of contents:

• Features 🚀
• Bug Fixes 🐛
• Breaking Changes 💥
• Improvements ✔️
• Documentation 📑
• Praises ✨

Features 🚀

• We've added the Thumbor plugin #750, so you can integrate gatsby-plugin-image with thumbor, and make your own smart image handling service. How cool is that, right?

  Thumbor is an open-source image processing service that enables you to process any image on the web. Check out the documentation and get more details on how to use it.

• Renovate preset configuration #754 a preset configuration for Renovate app, so stores can use the same configuration source for their Renovate configuration.

• Price atom: #760: Let's imagine you want to render some prices, like the following:

  

  With the Price atom, you can now show prices in your storefront. Take a look at the Price package

• MDX story: #762: We brought MDX, so you can get the best of both worlds: writing documentation with Markdown syntax and embed JSX component blocks on the same document. Check the following example to see how it works:

  

  

  It's an accessible way to collaborate on suggestions or add more information to our components. Easy-peasy, yet powerful!

Bug Fixes 🐛

• CI/CD #680: changing CI/CD solves two issues on master: building twice the same code and running the CI workflow twice.

• Source products using Intelligent Search #738: previously, to speed up the search for products, it was possible to paginate the search and search the pages in parallel. However, the API would return duplicate products between pages which caused an unreliable build, where consecutive builds would generate a different amount of pages. To fix this issue, we have Intelligent Search (IS).

• Handle chunkLoadError #771: After an error, if the page got refreshed way too fast or if the file was not available on the server anymore, webpack would throw a ChunkLoadError, and then you would be redirected to the 500 page. This solves the problem by refreshing the page when a chunkLoadError happens on the React tree.

• Replace on personalized search redirect #780:
  When redirect, use replace instead push to replace the URL to personalized search.

Breaking Changes 💥

• Storybook #776: we're excited to announce the Store UI, a store component library for building your next digital experience.
  Make sure to explore it and take a look in here to follow the improvements and see how can you contribute.

Improvements ✔️

• gatsby-plugin-nginx configurability #747: Now, gatsby-plugin-nginx configurability can add custom server block options, add custom HTTP block options, and create redirects with more than one variable.

• React version #753: with this improvement, we upgrade it to add support for React 18.

• CONTRIBUTING.md #775: We've added a bot to include the commands to release the application, so CONTRIBUTING.md doesn't need to do this service from now.

Documentation 📑

• Move faststore docs to a folder inside Store Framework #685 - documentation
• Choosing Static Paths #791 - documentation

Praises ✨

• @leomp12
• @cameronbraid

Thank you all 💪

Bravo to you for coming this far! 👏 Thank you so much for being so supportive, and make sure to stay tuned for next month's Release Notes!

Release 0.312.1-changelog.0

Added

• CHANGELOG.md