hydrogen/docs/contributing/decisions.md

title	sidebar_position
Decision Log	3

This document contains all the decisions that were taken since the beginning of this project. This is a living document and should be updated accordingly.

• Use Vite for the framework. Fast, modern, leans into the ES module support of modern browsers rather than creating a giant bundle a la Webpack.
• Use Tailwind for styles.
• Use urql for making GraphQL queries.
• Avoid creating a custom hydrogen CLI tool for development and building. Instead, use existing vite CLI included with the framework for building, and provide Hydrogen middleware as a plugin.
• Hydrogen React components are exported and usable by other React frameworks, like Next.js and Gatsby.
• Hydrogen React components are specific to Shopify and not generic to web applications. E.g. LayoutGrid would never be a component provided by Hydrogen, but ProductOptions would.
• shopify.config.js is used for Shopify-specific config, like Storefront domain and accelerated checkout options.
• Use a custom Link component wrapped around ReactRouter to fetch props from the server on page navigation.
• ShopifyProvider is a wrapper component providing helpful context to the rest of the application and Hydrogen components.
• Tobi will demo Hydrogen at Unite, but we will not be releasing Hydrogen yet to developers at Unite.
• While Vite is an implementation detail of Hydrogen, we should not define Hydrogen as merely a Vite plugin.
• In our Hydrogen template page components, chunks of GraphQL QUERY will go at the very bottom of each file. This reduces visual noise where the component is defined, and queries do not change as frequently. Additionally, we aren't using dedicated .graphql files in the starter template like we use in larger React projects at Shopify. Keeping the queries directly in the React components keeps the learning curve small.
• We chose to build a custom Codegen plugin to add comments to GraphQL fragment exports containing the contexts of the fragments themselves. This is useful for starter templates and seeing what is contained within a given fragment using VSCode's type helper.
• We will adopt a Server Components strategy for Hydrogen, modeled after React Server Components. We'll ship early with a similar version with plans to adopt the official version when it lands in React.
• We will use @shopify/react-testing instead of React Testing Library because Shopifolk are more familiar with this, and we believe it has more features that we can use out of the box. Additionally, we will name tests <name>.test.ts instead of spec, in a folder tests instead of __tests__.