Release: 3.x #2214
Merged
Release: 3.x #2214
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# This PR includes Breaking changes. ## What's the purpose of this pull request? This PR aims to enable the Next 13 versions in FastStore V2 after cicd platform supports it. ## How to test it? use starter.store's preview. ### Starters Deploy Preview - vtex-sites/starter.store#360
…verride (#2184) # This approach introduces Breaking Changes ## What's the purpose of this pull request? `EmptyState` is a complex section that is being used directly (without CMS) on the error 500, error 404, and login pages. While we've been doing section override 2.0, we've seen that it wouldn't be possible without bringing this section to the CMS and making it more generic (without direct use on the pages). So, the idea we discussed is to create three new content-types (login, 500, and 404) and use the EmptyState section on these pages. - [x] Adapts login page to use CMS with `EmptyState` - [x] Adapts error 500 page to use CMS with `EmptyState` - [x] Adapts error 404 page to use CMS with `EmptyState` - [x] This PR also adapts `EmptyState` to use Section Override API v2. ## How to test it? 1. Use the workspace https://formspacefs1239--storeframework.myvtex.com/admin/headless-cms/faststore 2. Change the API workspace to `formspacefs1239` in the `faststore.config.default.js` file. 3. run this project locally with `yarn dev`. 4. confirm if the new content types are in the cms like in the image below <img width="1217" alt="Screenshot 2023-12-28 at 19 25 23" src="https://github.com/vtex/faststore/assets/11325562/d7de163e-09c6-4845-a60f-b7f99da5bcfa"> If they are not created, you should run in the workspace formspacefs1239 the commands: ```sh vtex switch storeframework vtex use formspacefs1239 vtex cms sync faststore ``` Also, add the `EmptyState` section to every page. 5. You can test each page: - login (before redirect): http://localhost:3000/login - error 500: http://localhost:3000/500?errorId=123456&fromUrl=/office - error 404: http://localhost:3000/non-existing-page |Page|| |-|-| |login|<img width="400" alt="Screenshot 2023-12-28 at 19 16 33" src="https://github.com/vtex/faststore/assets/11325562/10672370-c128-49f1-8b8d-c1c2372c0bd0">| |error 500|<img width="400" alt="Screenshot 2023-12-28 at 19 19 26" src="https://github.com/vtex/faststore/assets/11325562/0b60a25b-2f08-4afc-ad04-757cd2c9433b">| |error 404|<img width="400" alt="Screenshot 2023-12-28 at 19 14 06" src="https://github.com/vtex/faststore/assets/11325562/05b639c4-f0c6-4a4e-96e9-44ea5ccdb170">| - Starter PR should be opened after emerging this PR and publishing the content types. ## References - #2091 - vtex-sites/starter.store#246 --------- Co-authored-by: Fanny <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
eduardoformiga
added
the
breaking changes
## What's the purpose of this pull request? This PR makes `@faststore/core` compatible with SWC by dropping the `@faststore/graphql-utils` package, meaning we don't depend on a babel-only plugin built by us. ## How it works? ### Why we did it [SWC](https://swc.rs/) is a compiler and bundler used by Next.js. It is the default bundler since Next.js 12 the default code minifier since Next.js 13. It promises considerable **performance** improvements when compared to [babel](https://babeljs.io/), its main competitor. Our use of a custom babel plugin - made available through `@faststore/graphql-utils` - made us unable to use SWC, since babel plugins are not compatible with SWC. This plugin helped us optimize GraphQL queries, improve security of queries and mutations and handle GraphQL operations definitions. When this plugin was first introduced, there wasn't a solution that could useful to us at the community, so we had to develop it ourselves. Now, The Guild's [client-preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client) does exactly what we need. It provides a all-in-one tool for handling persisted queries (optimization & security) and a GraphQL helper (`gql`) for defining operations, among other things we already used as standalone solutions, like type generation for the schema. By using `client-preset` we're no longer bound to babel or SWC exclusively, as their solution doesn't rely on any of them. There are recommended plugins for both platforms, as it helps reduce bundle sizes. We also helps reduce the code we have to maintain, adopt community standards and get up do date in terms of bundling and compilation tools. ### Results After the store was migrated to use `client-preset`, I ran a few builds to see if there would be any difference in bundle size. The results were not great, as the SWC version increased the bundle size considerably while reducing the build time in a negligible way (~5s reduction, although ~20% reduction percentage wise). I wasn't able to make the SWC plugin work, and I think that's because we're on Next 12. The support for SWC plugins within Next.js is still experimental (even in Next.js 13) and these errors are expected. It will probably work when we migrate to it, tho. I also ran a comparison considering the client-preset with the community babel plugin, and the results were comparable to the ones we had before, time-wise as well. **Click on the images** to read the data. | Before (babel, custom plugin) | After (SWC, no plugins) | After (babel, community plugin) | | ------------- | ------------- | ------------- | | <img src="https://github.com/vtex/faststore/assets/8127610/3c2b5dc1-e4ce-41b1-86fa-6e21d933c67a" width="400"> |<img src="https://github.com/vtex/faststore/assets/8127610/38a72e9f-f19c-487d-8124-f668b4c011a6" width="400"> | <img src="https://github.com/vtex/faststore/assets/8127610/b5064fd9-6de2-4cd1-8880-e7b570dc2a05" width="400"> |  |  |  | ### Implementation details #### operationName We previously used the operation name to identify queries and mutations on the backend. `client-preset` creates hashes based on the operation name to do the same thing. I updated the code to comply with this change, but added the operation name to the query arguments so 1. It could be provided to `envelop` on the `execute` function 2. It could be used for debugging when inspecting network calls using the browser dev tools To do that, I used `client-preset` `onExecutableDocumentNode` hook and extracted it manually at the `codegen.ts` config file. #### @generated dir Previously, the schema and other GraphQL files were inside the `@generated/graphql` folder. I changed it to `@generated` directly so `@generated/graphql` imports wouldn't break. It would be a pain to change all files, and we don't currently have other generated files other than graphql files, so it made sense to change it. #### SWC minification I enabled SWC minification at `next.config.js` since it is already the default minification tool Next 13. It provided awesome results, decreasing the build time in 10s to 15s. ## How to test it? This is a breaking change, as we know use the `gql` helper function and how to use it. We already exported it from `@faststore/core/api`, but it was possible to import it from `@faststore/graphql-utils` as well. Importing it from `@faststore/core/api` is the only possible and recommended way from now on. At the code, users also have to change the `gql` call to an actual function call: ```ts // Before const query = gql`query here` // After const query = gql(`query here`) ``` This change only affects stores containing API Extensions. Users shouldn't feel anything different when browsing the website. ### Starters Deploy Preview vtex-sites/starter.store#334 ## References https://the-guild.dev/graphql/codegen/plugins/presets/preset-client https://the-guild.dev/blog/optimize-bundle-size-with-swc-and-graphql-codegen I read this code a bunch to figure out how client-preset worked and how to use the options: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/client/src/index.ts https://nextjs.org/docs/messages/swc-minify-enabled https://nextjs.org/docs/architecture/nextjs-compiler dotansimha/graphql-code-generator#9057 --------- Co-authored-by: Mariana Caetano Pereira <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit b392fb7:
|
eduardoformiga
requested review from
gvc and
Gmantiqueira
and removed request for
a team
## What's the purpose of this pull request? Moves api extensions improvements guide to api-extensions folder Docs Preview: https://faststore-site-git-docs-rename-guide-faststore.vercel.app/docs/api-extensions/api-extensions-improvements
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
lucasfp13
approved these changes
Jan 31, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
This PR holds the PRs that will be available in 3.x version:
EmptyStatesection override #2184Preview PR
More info: v.3.0.0 Release Note