diff --git a/.circleci/config.yml b/.circleci/config.yml index b1c1c29d5af16..52481d7f2461f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -277,6 +277,15 @@ jobs: - e2e-test: test_path: integration-tests/ssr + integration_tests_images: + executor: node + steps: + - e2e-test: + test_path: integration-tests/images + test_command: yarn build-and-test + - store_artifacts: + path: integration-tests/images/__diff_output__ + e2e_tests_path-prefix: <<: *e2e-executor environment: @@ -607,6 +616,8 @@ workflows: <<: *e2e-test-workflow - integration_tests_ssr: <<: *e2e-test-workflow + - integration_tests_images: + <<: *e2e-test-workflow - integration_tests_gatsby_cli: requires: - bootstrap diff --git a/.gitignore b/.gitignore index 9cd2fac3b30aa..da929df52405e 100644 --- a/.gitignore +++ b/.gitignore @@ -38,6 +38,7 @@ test/**/public public/ node_modules/ e2e-tests/gatsby-pnp/ +__diff_output__/ .cache/ .netlify .Rhistory diff --git a/dictionary.txt b/dictionary.txt index 4885c918ca694..e12020c82264e 100644 --- a/dictionary.txt +++ b/dictionary.txt @@ -1,24 +1,48 @@ 0BSD +100K +100ms +100px +100s +10k 10KB +10x +11ty 1200px +1280px +128k 1500x1500 1600px +1600x2000 +16k 1GB +1px 1x +2-3x +2000s 200px 20x 21YunBox 21YunBox's +250px 2x +3G +400px 404s 500mb +5X 786px 800px +90s A11y +adblocker Add-ons +add-seo-component +addons +Addy Airbnb Airtable Akamai +Alahmady Algolia Algolia's Amberley @@ -28,8 +52,21 @@ analytics Analytics AniLink animejs +anonymized +apiRunInstance APIs APIs. +AppSync +architecting +Archlinux +arg +args +args. +aspectRatio +AST +async +Async +async-requires auth Auth Auth0 @@ -37,145 +74,305 @@ Auth0's autocomplete autocompletion automagically +autoplay +autoplaying Autoprovisioning +avif +AVIF axe axe-core +axe312ger axios Axios +babylon-traverse backend Backend +backends backticks balancer +balancers barebones +base64 +basepath Başlangıç +Bejamas +BEM +Berners-Lee +Berriman Bhagwat +BigCommerce bikeshed bindActionCreators Bing Bip +Biscardi Bitbucket +Blazingly +blockquote +Blockquote +blockquotes +blogpost blogposts Bölüm bool +booleans Bootcamp +bootup breakpoint Breakpoint Brotli +browserrouter Browserslist +bugfixes +BuilderIO buildpack buildpacks buildwithgatsby Bulma bundler +ButterCMS +C'mon +CaaS cafile Callout +camelCase +cd +CDATA CDN CDNs Cereda's Certbot CFP +chakra +Chakra +chakra-ui +changelog Changelog +cheatsheet +Chedeau's +chunkFilename +chunkGroup +chunkGroups +chunkMapping CICD +CircleCI CLI clientside Clodui Cloudflare CloudFront +Cloudinary +Cloudinary's CMS +CMSes CMSs +CNAME codebase +codebases +Codecademy +Codecademy's CodeCommit +codecs +codemod codeowner codeowners CodePen CodeSandbox colocate Commento +CommerceLayer +CommonJS +CommonMark +comparator +Comparator +comparators +compat compile-to-js +componentChunkName +componentChunkNames +ComponentChunkNames +componentDidMount componentization +componentPath +composable Conf config Config config. configs +const Construye contentDigest contentDigests +contentfield +ContentFields +contentful Contentful +contentful-import Contentstack COVID-19 CPUs +createContentDigest createElement createNode +createNodeField +createNodeFields +createPage +createPageDependency +createpages createPages +createPagesStatefully +createParentChildLink createRedirect +createRemoteFileNode +createResolvers cron +CSP +CSRF +css CSS-in-JS +CSV +Ctrl customizable customizations cypress-axe Dabit +Dalgleish's Dashbored +data.json DataFire datalayer +dataPath +dataPaths +dataPaths. dataset +datasource +datastore Dato +DatoCMS DDoS +de-activate De-Jargonizer +declaratively +deduplicating +defaultDataLayer DefinePlugin dein +Deprecations +Deque destructure destructured destructuring dev Dev DEV +devcert +devcert-cli +devDependencies developMiddleware +Devops +DevOps DevTools +Dgraph DigitalOcean DigitalOcean's dir +disableCorePrefetching discoverability discoverable Disqus +distro +distros +dnf DNS DocSearch +Dodds DOM +DOMPurify +dont dotenv +doubleBind dropdown dropdowns +duotone +DX e2e E2E +eBook +EC2 +ecommerce +eg +Eka EmailCaptureForm +ENOSPC +enqueuedDirtyActions +enqueueing +EnsureResources +entrypoint +enum +enums env Env Erstelle erstellen ES6 Escalade +eslint ESLint +eslint-plugin-jsx-a11y +ETag ETags Etsy +exampleValue executables Expedia +express-graphql +extractQueries +F12 F8 +fallbacks Fastly favicon favicons Feedly +fetchPageResourcesMap +fieldname filepath +filepaths +filesizes +Filestack filesystem +findIdsWithoutDataDependencies +findRootNodeAncestor firebase +Firestore Flexbox +Flickr +Flotiq +Flotiq's +Flowtype +fontsource +Fontsource +FormatJS formatter Formik Formspree Formspree's FOUC *freeCodeCamp +FreeCodeCamp frontend +frontends frontmatter Frontmatter +frontpage +Frontpage +fs +Fujihara +full-throated +fullWidth +Funston +Futura Gatsbot gatsby gatsby-cli @@ -184,292 +381,705 @@ gatsby-default-starter gatsby-dev-cli gatsby-es gatsby-image +gatsby-mdx-embed gatsby-paginated-blog gatsby-plugin-advanced-sitemap +gatsby-plugin-csp +gatsby-plugin-elasticlunr-search gatsby-plugin-feed +gatsby-plugin-glamor +gatsby-plugin-guess-js +gatsby-plugin-mdx gatsby-plugin-netlify gatsby-plugin-offline +gatsby-plugin-postcss gatsby-plugin-s3 gatsby-plugin-sharp gatsby-plugin-sitemap +gatsby-plugin-theme-ui gatsby-remark-prismjs +gatsby-source-cloudinary +Gatsby-source-cloudinary gatsby-source-contentful +gatsby-source-datocms gatsby-source-filesystem +gatsby-source-flotiq +gatsby-source-graphql gatsby-source-sanity gatsby-source-tmdb +gatsby-source-wordpress-experimental +gatsby-source-x-cms gatsby-starter-blog +gatsby-starter-buttercms +gatsby-starter-ecommerce +gatsby-starter-mdx-basic +gatsby-starter-netlify-cms gatsby-starter-prismic +gatsby-transformer-cloudinary +Gatsby-transformer-cloudinary +gatsby-transformer-json gatsby-transformer-remark +gatsby-transformer-yaml gatsbybot Gatsbybot +Gatsbygram gatsbyjs Gatsbyjs GatsbyJS +gatsbytutorial +GatsbyWebpackStatsExtractor GDPR generalistic +Gentics +getExampleValues Getform +getResourcesForPathname +gh-pages +Gienow +gif +GIFs Gitalk Gitee +Github GitLab GitLab's Gitpod +Gitter GitX +glamor Glamor globals +Gmail GoatCounter +Googlebot +GQL +gqlType +GqlType +gqlTypes +GraphCMS GraphiQL +graphql GraphQL +graphql-js +Graphql-js +graphql-reference +graphql-tools GraphQL's +GraphQLObjectType +GraphQLObjectTypes +grayscale +Gruber GSAP +gtag GUID Guidelist GZip h1 H1 +h1s h2 h2-h4 h3 h4 +Hackathon +handleQuery +hardcode hardcoded +hardcoding +HashHistory Hashnode +hashrouter +Hasura +headComponents. +headstart +helpdesk +herecydev heroku heroku-buildpack-static hinzufügen +HOCs +Homebrew +hoo +hoobdeebla +HorizontalNavList +Housecall +html-react-parser +HTML5 +http HTTPS i18n +i18next IaaS +IaC IAM IAM. +id0 +id1 +IDB +ie IE9 iframe IIS ile +ImageModel +Imgur +Imoh impactful +implementers +indexable +IndexedDB +init inkteam inlined +inlining +innerHTML InstantSearch integrations Integrations +internalComponentName +IntersectionObserver +ip IRL +Jaeger +jaeger-client +Jaeger's Jamstack JAMstack +JAMStack +jankiness +Javascript +Javscript +jbampton +joi +Joi +JPG +jQuery JS js-search JS-Search JSON +JSON-LD +jsonName +JSS JSX Julien +jumbotron JWT Kategorien +kebabHash +Kentico *kintoblock KintoBlock +KintoBlock-kintoblock KintoBlocks +kintohub KintoHub KintoHub's +Kontent +Kontent's Kurulum KV LangList +languageKey Lengstorf Lengstorf's Lerna +LibSass +libvips lifecycle Lifecycle +Lifecycles +Linkable +linkedField LinkedIn linter linters +livechat livestream Livestreams localhost +Lodash's +lookups LTS +Macbook macOS +MacOS +Manjaro +matchers +matchPath +matchPaths MathJax Matomo MD5 +mdast +mdast-util-to-string MDN MDX +MDXProvider +Mediacurrent +Mediacurrent's +melty mentorship +MichaelDeBoey +micromatch middleware +migrate-remark-to-mdx +minification +minified Minified +minifies Minifies +minimalistic misconfigured mit +modelling modularity +modularize +modularizing +modyfing +mongodb monorepo monorepos +Moz +MSSQL +muescha multilanguage +Multithreading must-revalidate namespace +namespaced namespaces +Narative natively +nav +navigations Netlify +netlify-cli Netlify's +NewsletterCTA +NextJS Nginx NGINX +Ngo's +nodeId +nodeID +NodeID nodemailer +NodeSchool +non-Prismic non-webpack Nonnenberg npm +npx +npx. +nullability +nullable nutzen +nvm +nvm's +OAuth +oEmbed +offscreen ok Okta Olivas onboarding +onClientEntry +onCreateNode +onCreatePage OneShopper +onPostBootstrap +onPreBootstrap. +onPreExtractQueries +onPreRouteUpdate +onRouteUpdate +onwards +OpenAI +OpenAPI +OpenGraph OpenSSH +opentracing +OpenTracing +Osmani OSS +Otander +OWASP +Packagist +pacman pageContext +pageQuery +PageRenderer +PageRenderer's Palantir's +papercuts +Params +parsers pathname +pathnames pathPrefix pathPrefix. +PCI +PDFs +peerDeps +perf performant performantly +permalink permalinks +personalization Piwik +pluginOption +pluginOptionsSchema +PNG +PokéAPI +PokéAPI's +Pokémon polyfill Polyfill polyfills Polyfills +popNodeQueries +PostCSS +postcss-loader PostHog +postprocessing +PowerShell PPA pre-built +pre-bundle +Pre-cache +pre-caching +Pre-compiled pre-configured +pre-created pre-evaluates +pre-existing +pre-fetching +pre-fill +pre-filled +pre-installed +pre-loading +pre-optimize pre-requisites Pre-requisites prebuilds prebuilt precache +precompiled preconfigured +prefetch +prefetched prefetching +preload +Preload +preloaded +preloading +Preloading +Preloads +prepended prepends +preprocesses +preprocessor +presentational +Prisma's +Prismic +Prismic's +PrismJS +PrivateRoute +profiler +Profiler profilers programmatically Programmatically +PropTypes proxying Proxying +PRPL PRs Publica +pullquotes +PurgeCSS PWA PWAs +QL queryable querying-data-with-graphql Quickstart Rascia +Re-engageable +react-dom +react-fontawesome +react-gif-player react-hmre +react-i18next +React-i18next +react-intl +React-intl +react-intl's +react-konva ReactDOM +ReactDOMServer +ReactiveSearch ReactJS +read-eval-print +readme README +realease reCAPTCHA reconciler +recurse Reddit *redux Redux +ReferenceError +reflow +reformats rehydrate +rehydrated +rehydrates +rehydration reimplement reimplementation reinvoked +relativePath +remoteImages +renderers +RenderProp Repl REPL +replaceComponentQuery repo Repo repo's repos +rerender +rerendered +resave +resolvableExtensions +resolvers +reStructuredText résumé +reusability revalidated +rhodochrosite +RichText +roadmap +Roadmap roadmaps +ROI +rollout Romo +rootNodeMap +RootQueryType +roundtrip +route-api +RouteHandler RSS +rsync +runQueries +runQueriesForPathnames S3 S3. SaaS +Salsify +SameSite +sanitize-html +scaffolded scalable scannability Schau schemas SCSS +SDK +SDL +SDL-defined searchability +searchbar +semver SEO +serializer +serializers serverless Serverless serverside +setFieldsOnGraphQLNodeType +setFileNodeRootType sexualized +SFTP +shadowable +sharable Shopify +shopify-buy +shortcode +shortcodes shortname shouldUpdateScroll +ShouldUpdateScrollArgs +shoxton +signup signups +sitemapSize siteMetadata +SitePage +SitePlugin Sitesi siteUrl +SKU +slugify +Slugify +SMT SnipCard Snipcart Snipcart-specific Snipcart's +Soper sourceNodes spammy +splitChunks +SplitChunks +src +sreehari-sj23 SSL SSR +SSRed +SSRing +startSpan +StaticImage Staticman StaticQuery Stoiber's Strapi Strava +stringified StubList +StyledComponent +Styleguidist +stylesheet stylesheets Stylesheets +stylings +subcomponents subdirectories +subdirectory +subfield +subfields subfolder subheaders submenu +subobject's subpage +subpages subprocesses subscribable +superset Suriano *svg SVG *svgs SVGs +Swartz symlink +syntaxes +Tada TalkYard +templating theming +Timeframes TLS Tolinski toolchain +toolset +TopoJSON +touchNode +touchpoints +tracedSVG tradeoff +tradeoffs transformative TransitionLink transpilation transpile +transpiled +transpiler +transpiles Trello triaging Triaging +TXT +typecheck +typechecking +Typechecking +Typekit +Udacity +ui UI +UIs Uloth Ultra-schnellen +un-transpiled +uncentered +uncheck und +unflagged +unist +Unist +unist-util-visit +Unist's +unmount unmounting +unoptimized +Unsplash unstyled untracked +unvisited +Unvisited +updatedAt upvotes +URI url +urlPath +urls +usecase +useNameForId useStaticQuery +using-gatsby-source-graphql Util +utils +UUID +UUIDs UX v0 +v1 +V1 +v11 v2 V2 v3 +v4 +v5 +v5. +v7 V8 ve Vercel ViennaJS +viewport +Vimeo +VM Voilà VPS +VS2015 +VS201x VSCode Vue +W3C W3C's +Walkthrough +WeakMap. WebAIM WebAIM's +WebAppManifest +WebGL webhook webhooks Webhooks @@ -480,17 +1090,47 @@ webpack's WebpackError webpage webpages +webserver websocket +WebStorm WeChat +Wedekind WeKnow +whacky WhatsApp +whitespace +WooCommerce +Wordpress +Workbox workspaces +wp-graphql +wp-graphql-woocommerce +WPGraphiQL +WPGraphQL +wrapPageElement +wrapRootElement +WSL +WTF www +x64 +Xcode +XD +XSS xyz YAML yay +Yotpo +Youfit Zapier +Zhu +zipkin +Zipkin +zipkin-javascript-opentracing +zipkin-transport-http +Zipkin's +zsh zu +Zuri блог в веб-сайтів diff --git a/docs/docs/conceptual/choosing-a-cms.md b/docs/docs/conceptual/choosing-a-cms.md new file mode 100644 index 0000000000000..5143f5e0d7613 --- /dev/null +++ b/docs/docs/conceptual/choosing-a-cms.md @@ -0,0 +1,88 @@ +--- +title: Choosing Your CMS(s) +--- + +At their core, most medium-sized and large Gatsby websites are backed by a so-called "headless CMS". Headless CMSes excel at allowing content editors to flexibly create a content schema of interrelated content models. + +One of the key questions people ask when building a Gatsby site is "which CMS should I use?" + +## Choosing a Headless CMS + +If you're looking for a primary CMS (general-purpose, flexible content modelling) to power your website, there are three main factors you can use to narrow your search: + +### 1) Popular, first-class Gatsby integrations + +**First**, when possible, we recommend you focus on **top-flight general-purpose CMSs** with **first-class Gatsby integrations** and **high popularity** among Gatsby users. A ["first-class integration"](https://support.gatsbyjs.com/hc/en-us/articles/360052503494-Developing-a-first-class-CMS-integration-for-Gatsby-Cloud) means it supports the main Cloud functionality of Gatsby -- previews and incremental builds. + +In terms of popularity, you can see [top integrations listed by monthly downloads here](https://www.gatsbyjs.com/plugins?=gatsby-source). There are currently (January 2021) eight CMSs used by over 1% of Gatsby users. These are: + +- **five general-purpose headless CMSs:** Contentful, DatoCMS, Prismic, Sanity and Strapi + +- **two general-purpose full-stack CMSs** running in "headless" mode: Drupal and Wordpress + +- **one specialized CMS**: Shopify + +### 2) The right price point + +**Second**, it's important to consider the price point given your budget: + +- If you're working on a personal project or prototype, a few of these have a generous free tier (Contentful, DatoCMS, Prismic, Sanity, Strapi). + +- If you're looking more at "Team", "Pro", or "Business" price points (eg $29, $99, or \$299 per month), the above CMSs are all good options, plus Drupal and Wordpress. + +- If you're looking more at an "enterprise" project in the four digits per month and up, your main options are Contentful, Contentstack, Sanity, and Strapi. + +### 3) Meeting specialized requirements + +**Third,** other project requirements and team preferences will play a role. + +**Contentful** is the most common headless CMS used with Gatsby. As an early player in the space, they've built a fairly mature product in terms of features and revenue and are sometimes seen as the "default" choice. + +Users choosing other CMSs typically have a specific reason for their choice. Some trends we've noticed include: + +- **Contentstack** if they like the editing UI and have an enterprise budget +- **DatoCMS** if they will run into Contentful's model limits and want a lower-priced alternative +- **Drupal** if open-source, configurability, or custom code are important. +- **Prismic** if they like the content editing UI +- **Sanity** or **Strapi** for the developer-friendliness or if they need something on-premise. In addition, Sanity tends to have significantly better build times, which can be a key usability consideration, especially for larger sites (we [benchmark build times by CMS here](https://willit.build/)). +- **Wordpress** when the client or content team is already familiar with the Wordpress UI + +## Using multiple CMS systems together + +There are instances where using only one CMS would feel awkward; for example, if a particular CMS works well for one section of the site but is less good for the rest of the site. + +Gatsby makes it easy to use different CMSs for different parts of the website, what is known as a ["content mesh" approach](https://www.gatsbyjs.com/blog/2018-10-04-journey-to-the-content-mesh/). + +Typically, teams that use multiple CMSs use a specialized CMS for part of the website and a general-purpose CMS for the rest of the website. The two most common examples are: + +- **Using Shopify as an e-commerce system.** + - Shopify has best-in-class e-commerce functionality, but the rest of their interface (for example, their blogs feature) is often seen as subpar compared to other systems. + - As a result, many e-commerce sites use Shopify as the backend for the store, with a general-purpose CMS like Contentful as the backend for the rest of the site. +- **Using WordPress as a blogging tool.** + - WordPress is very familiar to content authors and has a best-in-class content composition experience + - As a result, some teams move the blog portion of the website with Gatsby, and use a flexible content modelling CMS for the rest of the website. + - Apollo does this (source: [tweet from Apollo](https://twitter.com/apollographql/status/1250479066605662210)), as does the [Gatsby blog](gatsbyjs.com/blog). + +### Considerations when using multiple CMSs + +One of the key considerations when using content in multiple systems is that - at some point - one content system often needs to "know about" another system. For example, a landing page with content in Contentful may need to embed information about a specific product SKU from Shopify or blog post in Wordpress. + +The easiest way to create relationship references across CMSs is through one CMS storing unique IDs of content living in another CMS. + +In this case, you'd store an array of Wordpress blog post IDs as a field of the relevant model in Contentful, then pull in the correct data via the appropriate queries in `gatsby-node.js.` + +To make that a bit more concrete, here's a screenshot of what this looks like currently (January 2020) in the Gatsbyjs.com Contentful setup for the [e-commerce use case page](https://www.gatsbyjs.com/use-cases/e-commerce); the model is called `Use Case Landing Page`, the field is called `Blog Posts`, and the items in the array are unique blog post IDs from Wordpress: + +![Screenshot of Gatsbyjs.com Contentful setup](../images/use-case-landing-page-screenshot.jpg) + +## Other non-CMS options + +Finally, there are several options for content composition and management that work well as non-CMS choices. + +- **Markdown** and **MDX** are common choices for documentation and small developer sites, since they are natural composition formats for developers and allow embedding components within your content. There are several guides in our [Routing and Pages documentation](https://www.gatsbyjs.com/docs/how-to/routing/) on using Markdown and MDX. You may also want to consider a git-based CMS like Foresty.io or NetlifyCMS to provide a UI for this workflow. + +- **JSON** or **YAML** is a common choice for hierarchical data (for example, a site navigation tree), especially when the underlying content is stored in Markdown. + +- **Web-based spreadsheets**, like **Airtable** or **Google Sheets**, are common use cases for tabular data. [Impossible Foods used Airtable to power their store locator](https://www.gatsbyjs.com/blog/2020-05-07-gatsby-delivers-impossible-burgers-map/), and [ProPublica used Google sheets as a database](https://www.gatsbyjs.com/blog/2019-03-29-interview-with-david-eads/) for interactive data journalism graphics. + +- Other domain-specific solutions for specific parts of the website (e.g., having a Careers page pull data from Greenhouse or Lever). diff --git a/docs/docs/conditional-page-builds.md b/docs/docs/conditional-page-builds.md index 5054a25ae03cc..64976c60d448a 100644 --- a/docs/docs/conditional-page-builds.md +++ b/docs/docs/conditional-page-builds.md @@ -2,7 +2,7 @@ title: Conditional Page Builds --- -If you have a large site, you may be able to improve build times for data updates by enabling an experimental feature called "conditional page builds". While this is not as fast as true [Incremental Builds](https://support.gatsbyjs.com/hc/en-us/articles/360056151214-Incremental-Builds) available in Gatsby Cloud, it can save time on the HTML-generation step by not re-rendering HTML for pages with unchanged data. This feature is experimental, but _may_ improve build times for sites with a large number of complex pages. Test it thoroughly with your site before deploying to production. +If you have a large site, you may be able to improve build times for data updates by enabling an experimental feature called "conditional page builds". While this is not as fast as true [Incremental Builds](https://support.gatsbyjs.com/hc/en-us/articles/360053099253-Distributed-Builds-and-Incremental-Builds) available in Gatsby Cloud, it can save time on the HTML-generation step by not re-rendering HTML for pages with unchanged data. This feature is experimental, but _may_ improve build times for sites with a large number of complex pages. Test it thoroughly with your site before deploying to production. For more info on the standard build process, please see the [overview of the Gatsby build process](/docs/conceptual/overview-of-the-gatsby-build-process/). diff --git a/docs/docs/creating-a-local-plugin.md b/docs/docs/creating-a-local-plugin.md index b5bd6ad986217..53b5e77cc420b 100644 --- a/docs/docs/creating-a-local-plugin.md +++ b/docs/docs/creating-a-local-plugin.md @@ -72,7 +72,4 @@ This is a similar process to setting up yarn workspaces for development with Gat ## Compilation and processing with Babel -Like all `gatsby-*` files, the code is not processed by Babel. If you want -to use JavaScript syntax which isn't supported by your version of Node.js, you -can place the files in a `src` subfolder and build them to the plugin folder -root. +Except for the `gatsby-browser.js` file, which is processed as a part of the webpack bundling step, the code from all `gatsby-*` files is not processed by babel. If you want to use JavaScript syntax which isn't supported by your version of Node.js, you can place the files in your `src` subfolder and build them to the plugin folder root. diff --git a/docs/docs/debugging-the-build-process.md b/docs/docs/debugging-the-build-process.md index 766c21cec5cea..453f6bd1791cf 100644 --- a/docs/docs/debugging-the-build-process.md +++ b/docs/docs/debugging-the-build-process.md @@ -83,6 +83,36 @@ Using built-in debuggers in code editors is very convenient. You will be able to We won't go in depth here about how to debug in VS Code - for that you can check the [excellent VS Code documentation](https://code.visualstudio.com/docs/editor/debugging). We will however share a launch configuration needed to run and debug Gatsby: +### Linux + +```json:title=launch.json +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Gatsby develop", + "type": "pwa-node", + "request": "launch", + "program": "${workspaceRoot}/node_modules/.bin/gatsby", + "args": ["develop"], + "runtimeArgs": ["--nolazy"], + "console": "integratedTerminal" + }, + { + "name": "Gatsby build", + "type": "pwa-node", + "request": "launch", + "program": "${workspaceRoot}/node_modules/.bin/gatsby", + "args": ["build"], + "runtimeArgs": ["--nolazy"], + "console": "integratedTerminal" + } + ] +} +``` + +### Windows + ```json:title=launch.json { "version": "0.2.0", @@ -92,6 +122,9 @@ We won't go in depth here about how to debug in VS Code - for that you can check "type": "pwa-node", "request": "launch", "program": "${workspaceRoot}/node_modules/.bin/gatsby", + "windows": { + "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby" + }, "args": ["develop"], "runtimeArgs": ["--nolazy"], "console": "integratedTerminal" @@ -101,6 +134,9 @@ We won't go in depth here about how to debug in VS Code - for that you can check "type": "pwa-node", "request": "launch", "program": "${workspaceRoot}/node_modules/.bin/gatsby", + "windows": { + "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby" + }, "args": ["build"], "runtimeArgs": ["--nolazy"], "console": "integratedTerminal" diff --git a/docs/docs/how-to/adding-common-features/add-404-page.md b/docs/docs/how-to/adding-common-features/add-404-page.md index ecab2de217b87..b4d852a680beb 100644 --- a/docs/docs/how-to/adding-common-features/add-404-page.md +++ b/docs/docs/how-to/adding-common-features/add-404-page.md @@ -2,7 +2,7 @@ title: Adding a 404 Page --- -To create a 404 page create a page whose path matches the regex `^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`). Most often you'll want to create a React component page at `src/pages/404.js`. +To create a 404 page create a page whose path matches the regex `^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`), most often you'll want to create a React component page at `src/pages/404.js`. Gatsby ensures that your 404 page is built as `404.html` as many static hosting platforms default to using this as your 404 error page. If you're hosting your site another way you'll need to set up a custom rule to serve this file for 404 errors. diff --git a/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md b/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md new file mode 100644 index 0000000000000..2e59d727e2327 --- /dev/null +++ b/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md @@ -0,0 +1,202 @@ +--- +title: Using the beta Gatsby Image plugin +--- + +Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you! + +Want to learn more about image optimization challenges? Read the Conceptual Guide: [Why Gatsby's Automatic Image Optimizations Matter](docs/conceptual/using-gatsby-image/). For full documentation on all configuration options, see [the reference guide](/docs/reference/built-in-components/gatsby-plugin-image). + +The new Gatsby Image plugin is currently in beta, but you can try it out now and see what it can do for the performance of your site. + +## Getting started + +First you need to install the following packages: + +```shell +npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp +``` + +You then need to add the plugins to your `gatsby-config.js`: + +```js:title=gatsby-config.js +module.exports = { + plugins: [ + `gatsby-plugin-image`, + `gatsby-plugin-sharp`, + `gatsby-source-filesystem`, + `gatsby-transformer-sharp`, + ], +} +``` + +If you already have some of these plugins installed, please check that they're updated to the latest version. + + + +## Using the Gatsby Image components + +### Decide which component to use + +The Gatsby Image plugin includes two image components: one for static and one for dynamic images. The simplest way to decide which you need to is to ask yourself: _"will this image be the same every time the component or template is used?"_. If it will always be the same, then use `StaticImage`. If it will change, whether through data coming from a CMS or different values passed to a component each time you use it, then it is a dynamic image and you should use the `GatsbyImage` component. + +### Static images + +If you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the `StaticImage` component. The image can be either a local file in your project, or an image hosted on a remote server. Any remote images are downloaded and resized at build time. + +1. **Add the image to your project.** + + If you are using a local image, copy it into the project. A folder such as `src/images` is a good choice. + +2. **Add the `StaticImage` component to your template.** + + Import the component, then set the `src` prop to point to the image you added earlier. The path is relative to the source file itself. If your component file was `src/components/dino.js`, then you would load the image like this: + + ```jsx:title=src/components/dino.js + import { StaticImage } from "gatsby-plugin-image" + + export function Dino() { + return + } + ``` + + If you are using a remote image, pass the image URL in the `src` prop: + + ```jsx:title=src/components/kitten.js + import { StaticImage } from "gatsby-plugin-image" + + export function Kitten() { + return + } + ``` + + When you build your site, the `StaticImage` component will load the image from your filesystem or from the remote URL, and it will generate all the sizes and formats that you need to support a responsive image. + + Because the image is loaded at build time, you cannot pass the filename in as a prop, or otherwise generate it outside of the component. It should either be a static string, or a local variable in the component's scope. + + **Important:** Remote images are downloaded and resized at build time. If the image is changed on the other server, it will not be updated on your site until you rebuild. + +3. **Configure the image.** + + You configure the image by passing props to the `` component. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options [in the API docs](/docs/reference/built-in-components/gatsby-plugin-image). + + This component renders a 200px by 200px image of a dinosaur. Before loading it will have a blurred, low-resolution placeholder. It uses the `"fixed"` layout, which means the image does not resize with its container. + + ```jsx:title=src/components/dino.js + import { StaticImage } from "gatsby-plugin-image" + + export function Dino() { + return ( + + ) + } + ``` + +**Note:** There are a few technical restrictions to the way you can pass props into StaticImage. For more information, refer to the Reference Guide: [Gatsby Image plugin](/docs/reference/built-in-components/gatsby-plugin-image#restrictions-on-using-staticimage). If you find yourself wishing you could use a prop for the image `src` then it's likely that you should be using a dynamic image. + +### Dynamic images + +If you need to have dynamic images (such as if they are coming from a CMS), you can load them via GraphQL and display them using the `GatsbyImage` component. + +1. **Add the image to your page query.** + + Any GraphQL File object that includes an image will have a `childImageSharp` field that you can use to query the image data. The exact data structure will vary according to your data source, but the syntax is like this: + + ```graphql:title=src/templates/blogpost.js + query { + blogPost(id: { eq: $Id }) { + title + body + # highlight-start + avatar { + childImageSharp { + gatsbyImageData(width: 200) + } + } + # highlight-end + } + } + ``` + +2. **Configure your image.** + + You configure the image by passing arguments to the `gatsbyImageData` resolver. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options in the API docs. + + ```graphql:title=src/templates/blogpost.js + query { + blogPost(id: { eq: $Id }) { + title + body + author + avatar { + # highlight-start + childImageSharp { + gatsbyImageData( + width: 200 + placeholder: BLURRED + formats: [AUTO, WEBP, AVIF] + ) + } + # highlight-end + } + } + } + ``` + +3. **Display the image.** + + You can then use the `GatbsyImage` component to display the image on the page. The `getImage()` function is an optional helper to make your code easier to read. It takes a `File` and returns `file.childImageSharp.gatsbyImageData`, which can be passed to the `GatsbyImage` component. + + ```jsx:title=src/templates/blogpost.js + import { graphql } from "gatsby" + // highlight-next-line + import { GatsbyImage, getImage } from "gatsby-plugin-image" + + function BlogPost({ data }) { + // highlight-next-line + const image = getImage(data.blogPost.avatar) + return ( +
+

{data.blogPost.title}

+ {/* highlight-next-line */} + +

{data.blogPost.body}

+
+ ) + } + + export const pageQuery = graphql` + query { + blogPost(id: { eq: $Id }) { + title + body + author + avatar { + childImageSharp { + gatsbyImageData( + width: 200 + placeholder: BLURRED + formats: [AUTO, WEBP, AVIF] + ) + } + } + } + } + ` + ``` + +## Migrating + +If your site uses the old `gatsby-image` component, you can use a codemod to help you migrate to the new Gatsby Image components. This can update the code for most sites. To use the codemod, run this command in the root of your site: + +```shell +npx gatsby-codemods gatsby-plugin-image +``` + +This will convert all GraphQL queries and components to use the new plugin. For more information see the full migration guide. diff --git a/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md b/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md index 3fe72ba42b40e..3557a89dee7a8 100644 --- a/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md +++ b/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md @@ -240,13 +240,13 @@ import { testPluginOptionsSchema } from "gatsby-plugin-utils" import { pluginOptionsSchema } from "../gatsby-node" describe(`pluginOptionsSchema`, () => { - it(`should invalidate incorrect options`, () => { + it(`should invalidate incorrect options`, async () => { const options = { optionA: undefined, // Should be a boolean message: 123, // Should be a string optionB: `not a boolean`, // Should be a boolean } - const { isValid, errors } = testPluginOptionsSchema( + const { isValid, errors } = await testPluginOptionsSchema( pluginOptionsSchema, options ) @@ -259,13 +259,13 @@ describe(`pluginOptionsSchema`, () => { ]) }) - it(`should validate correct options`, () => { + it(`should validate correct options`, async () => { const options = { optionA: false, message: "string", optionB: true, } - const { isValid, errors } = testPluginOptionsSchema( + const { isValid, errors } = await testPluginOptionsSchema( pluginOptionsSchema, options ) @@ -281,3 +281,4 @@ describe(`pluginOptionsSchema`, () => { - [Example Gatsby site using plugin options with a local plugin](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-plugin-options) - [Joi API documentation](https://joi.dev/api/) - [`pluginOptionsSchema` for the Contentful source plugin](https://github.com/gatsbyjs/gatsby/blob/af973d4647dc14c85555a2ad8f1aff08028ee3b7/packages/gatsby-source-contentful/src/gatsby-node.js#L75-L159) +- [`pluginOptionsSchema` for the Kontent source plugin](https://github.com/Kentico/kontent-gatsby-packages/blob/master/packages/gatsby-source-kontent/src/pluginOptionsSchema.ts#L2-L35) diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-databases.md b/docs/docs/how-to/sourcing-data/sourcing-from-databases.md index c1c6ade46870a..39c8bb113a26c 100644 --- a/docs/docs/how-to/sourcing-data/sourcing-from-databases.md +++ b/docs/docs/how-to/sourcing-data/sourcing-from-databases.md @@ -4,8 +4,9 @@ title: Sourcing from Databases The Gatsby ecosystem includes built-in connectors to several database systems. These include: -- [PostgreSQL](/plugins/gatsby-source-pg/?=pg) -- [MySQL](/plugins/gatsby-source-mysql/?=mysql) +- [PostgreSQL](/plugins/gatsby-source-pg/) +- [MySQL](/plugins/gatsby-source-mysql/) +- [Cassandra](/plugins/gatsby-source-astra/) - [Amazon Redshift, SQLite3, Oracle and MSSQL](https://github.com/mrfunnyshoes/gatsby-source-sql) - [MongoDB](/plugins/gatsby-source-mongodb/) - [Firebase](/plugins/gatsby-source-firebase/)/[Firestore](/plugins/gatsby-source-firestore/) diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-netlify-cms.md b/docs/docs/how-to/sourcing-data/sourcing-from-netlify-cms.md index b5fbc45c11f6a..9894d6b66c99c 100644 --- a/docs/docs/how-to/sourcing-data/sourcing-from-netlify-cms.md +++ b/docs/docs/how-to/sourcing-data/sourcing-from-netlify-cms.md @@ -140,6 +140,7 @@ forward slash, and then your repository name. If your username is "test-user" an backend: name: github repo: your-username/your-repo-name + branch: your-main-branch ``` Now you can save the `config.yml` file, commit the change, and push it to your GitHub repo. diff --git a/docs/docs/how-to/testing/testing-react-components.md b/docs/docs/how-to/testing/testing-react-components.md index 99978a30821a7..989cb2d5cfcf1 100644 --- a/docs/docs/how-to/testing/testing-react-components.md +++ b/docs/docs/how-to/testing/testing-react-components.md @@ -36,7 +36,7 @@ module.exports = { ## Usage -Let's create a little example test using the newly added library. If you haven't done already read the [unit testing guide](/docs/how-to/testing/unit-testing) — essentially you'll use `@testing-library/react` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`: +Let's create a little example test using the newly added library. If you haven't done so already, read the [unit testing guide](/docs/how-to/testing/unit-testing) — essentially you'll use `@testing-library/react` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`: ```js import React from "react" diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md index 2f78a88fb8c2e..626573afeaa6a 100644 --- a/docs/docs/how-to/testing/unit-testing.md +++ b/docs/docs/how-to/testing/unit-testing.md @@ -217,8 +217,12 @@ by running `npm test -- -u`. ## Using TypeScript -If you are using TypeScript, you need to make two changes to your -config. +If you are using TypeScript, you need to install typings packages and make +two changes to your config. + +```shell +npm install --save-dev @types/jest @types/react-test-renderer +``` Update the transform in `jest.config.js` to run `jest-preprocess` on files in your project's root directory. diff --git a/docs/docs/images/use-case-landing-page-screenshot.jpg b/docs/docs/images/use-case-landing-page-screenshot.jpg new file mode 100644 index 0000000000000..28395e4b4fc7b Binary files /dev/null and b/docs/docs/images/use-case-landing-page-screenshot.jpg differ diff --git a/docs/docs/reference/built-in-components/gatsby-plugin-image.md b/docs/docs/reference/built-in-components/gatsby-plugin-image.md new file mode 100644 index 0000000000000..5d5c33d31a80c --- /dev/null +++ b/docs/docs/reference/built-in-components/gatsby-plugin-image.md @@ -0,0 +1,238 @@ +--- +title: Gatsby Image plugin +--- + +This guide will show you how to configure your images, including choosing layouts, placeholders and image processing options. + +## Components + +The Gatsby Image plugin includes two components to display responsive images on your site, used for static and dynamic images. + +- **[`StaticImage`](#staticimage):** Use this if the image is the same every time the component is used. _Examples: site logo, index page hero image_ +- **[`GatsbyImage`](#gatsbyimage):** Use this if the image is passed into the component as a prop, or otherwise changes. _Examples: Blog post hero image, author avatar_ + +If you would like to learn how to set up the image plugins and use these components on your site, see [the how-to guide](/docs/how-to/images-and-media/using-gatsby-plugin-image). + +These are props that can be passed to the components: + +### Shared props + +The following props can be passed to both `GatsbyImage` and `StaticImage`. You may also use any valid [`` tag props](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes), which are forwarded to the underlying `` element. + +| Prop | Type | Default | Description | +| ----------------- | ------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| `alt` (Required) | `string` | | Alternative text, passed to the `` tag. Required for accessibility. | +| `as` | `ElementType` | `"div"` | The HTML element used for the outer wrapper. | +| `loading` | `"eager" ∣ "lazy"` | `"lazy"` | Loading behavior for the image. You should set this to `"eager"` for above-the-fold images to ensure they start loading before React hydration. | +| `className` | `string` | | CSS class applied to the outer wrapper. | +| `imgClassName` | `string` | | CSS class applied to the `` element. | +| `style` | `CSSProperties` | | Inline styles applied to the outer wrapper. | +| `imgStyle` | `CSSProperties` | | Inline styles applied to the `` element. | +| `backgroundColor` | `string` | `transparent` | Background color applied to the wrapper. | +| `objectFit` | [See MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | `cover` | Resizing behavior for the image within its container. | +| `objectPosition` | [See MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) | `50% 50%` | Position of the image within its container. | + +### `StaticImage` + +The `StaticImage` component can take all [image options](#image-options) as props, as well as all [shared props](#shared-props). Additionally, it takes this prop: + +| Prop | Type | Description | +| ---------------- | -------- | ----------------------------------------------------------------------------------------------------- | +| `src` (Required) | `string` | Source image, processed at build time. Can be a path relative to the source file, or an absolute URL. | + +#### Restrictions on using `StaticImage` + +The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can't pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component's local scope. See the following examples: + +This does not work: + +```js +// ⚠️ Doesn't work + +export function Logo({ logo }) { + // You can't use a prop passed into the parent component + return +} +``` + +...and nor does this: + +```js +// ⚠️ Doesn't work + +export function Dino() { + // Props can't come from function calls + const width = getTheWidthFromSomewhere(); + return +} +``` + +You can use variables and expressions if they're in the scope of the file, e.g.: + +```js +// OK +export function Dino() { + // Local variables are fine + const width = 300 + return +} +``` + +```js +// Also OK + +// A variable in the same file is fine. +const width = 300 + +export function Dino() { + // This works because the value can be statically-analyzed + const height = width * 16 / 9 + return +} +``` + +If you find yourself wishing you could use a prop for the image `src` then it's likely that you should be using a dynamic image. + +### `GatsbyImage` + +This component accepts all [shared props](#shared-props), as well as the one below. These props are passed directly to the component, and are not to be confused with [image options](#all-options), which are passed to the GraphQL resolver when using dynamic images. + +| Prop | Type | Description | +| ------------------ | ----------------- | -------------------------------------------------------------------- | +| `image` (Required) | `GatsbyImageData` | The image data object, returned from the `gatsbyImageData` resolver. | + +## Image options + +There are a few differences between how you specify options for `StaticImage` and `GatsbyImage`: + +1. **How to pass options:** When using `StaticImage`, options are passed as props to the component, whereas for the `GatsbyImage` component they are passed to the `gatsbyImageData` GraphQL resolver. +1. **Option values:** In the `StaticImage` component, props such as `layout` and `placeholder` take a _string_, while the resolver takes a _[a GraphQL enum](https://graphql.org/learn/schema/#enumeration-types)_, which is in upper case by convention and is not quoted like a string. Both syntaxes are shown in the reference below. + +**Note:** It is a very good idea to use [the GraphiQL IDE](/docs/how-to/querying-data/running-queries-with-graphiql) when writing your `gatsbyImageData` queries. It includes auto-complete and inline documentation for all of the options and lets you see the generated image data right inside the IDE. + +Both static and dynamic images have the following options available: + +| Option | Default string/enum value | Description | +| --------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------- | +| [`layout`](#layout) | `"constrained"` / `CONSTRAINED` | Determines the size of the image and its resizing behavior. | +| [`aspectRatio`](#aspectratio) | Source image aspect ratio | Force a specific ratio between the image's width and height. | +| [`width`/`height`](#widthheight) | Source image size | Change the size of the image. | +| [`placeholder`](#placeholder) | `"dominantColor"`/`DOMINANT_COLOR` | Choose the style of temporary image shown while the full image loads. | +| [`formats`](#formats) | `["auto","webp"]`/`[AUTO,WEBP]` | File formats of the images generated. | +| [`transformOptions`](#transformoptions) | `{fit: "cover", cropFocus: "attention"}`/`{fit: COVER, cropFocus: ATTENTION}` | Options to pass to sharp to control cropping and other image manipulations. | + +See [all options](#all-options). + +### `layout` + +The image components support three types of layout, which determine the image sizes that are generated, as well as the resizing behavior of the image itself in the browser. + +| Layout | Component prop value | Resolver prop value | Description | +| ----------- | -------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Constrained | `"constrained"` | `CONSTRAINED` | This is the default layout. It displays the image at the size of the source image, or you can set a maximum size by passing in `width` or `height`). If the screen or container size is less than the width of the image, it scales down to fit, maintaining its aspect ratio. It generates smaller versions of the image so that a mobile browser doesn't need to load the full-size image. | +| Fixed | `"fixed"` | `FIXED` | This is a fixed-size image. It will always display at the same size, and will not shrink to fit its container. This is either the size of the source image, or the size set by the `width` and `height` props. Only use this if you are certain that the container will never need to be narrower than the image. | +| Full width | `"fullWidth"` | `FULL_WIDTH` | Use this for images that are always displayed at the full width of the screen, such as banners or hero images. Like the constrained layout, this resizes to fit the container. However it is not restricted to a maximum size, so will grow to fill the container however large it is, maintaining its aspect ratio. It generates several smaller image sizes for different screen breakpoints, so that the browser only needs to load one large enough to fit the screen. You can pass a `breakpoints` prop if you want to specify the sizes to use, though in most cases you can allow it to use the default. | + +You can compare the layouts in the video below: + + + +To set the layout, pass in the type to the layout prop. e.g. + +```jsx + +``` + +For a dynamic image, pass it to the resolver: + +```graphql +dino { + childImageSharp { + # highlight-next-line + gatsbyImageData(layout: FIXED) + } +} +``` + +### `width`/`height` + +_Layouts: fixed and constrained_ + +Size props are optional in `GatsbyImage` and `StaticImage`. Because the images are processed at build time, the plugin knows the size of the source image and can add the correct width and height to the `` tag, so it displays correctly with no layout jumping. However, if you want to change the display size you can use the size options to do this. + +For a `fixed` layout, these define the size of the image displayed on screen. For a `constrained` image these define the maximum size, as the image will scale down to fit smaller containers if needed. + +If you set just one of these, the source image is resized to that width or height while maintaining aspect ratio. If you include both then it is also cropped if needed to ensure it is that exact size. + +### `aspectRatio` + +_Layouts: fixed, constrained, and fullWidth_ + +The `aspectRatio` prop forces an image to the specified aspect ratio, cropping if needed. The value is a number, but can be clearer to express as a fraction, e.g. `aspectRatio={16/9}` + +For `fixed` and `constrained` images, you can also optionally pass either a `width` or `height`, and it will use that to calculate the other dimension. For example, if you pass `width={800} aspectRatio={4/3}` then `height` will be set to the width divided by the aspect ratio: so `600`. Passing `1` as the aspectRatio will crop the image to a square. If you don't pass a width or height then it will use the source image's width. + +For `fullWidth` images you don't specify width or height, as it resizes to fit the screen width. Passing `aspectRatio` will crop the image if needed, and the height will scale according to the width of the screen. For example, if you set the aspectRatio to `16/9` then when the image is displayed full width on a screen that is 1280px wide, the image will be 720 pixels high. + +**Note:** There are several advanced options that you can pass to control the cropping and resizing behavior. For more details, see the [`transformOptions`](#transformoptions) reference. + +### `placeholder` + +Gatsby image components are lazy-loaded by default, which means that if they are offscreen they are not loaded by the browser until they come into view. To ensure that the layout does not jump around, a placeholder is displayed before the image loads. You can choose one of three types of placeholder (or not use a placeholder at all): + +| Placeholder | Component prop value | Resolver prop value | Description | +| -------------- | -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Dominant color | `"dominantColor"` | `DOMINANT_COLOR` | The default placeholder. This calculates the dominant color of the source image and uses it as a solid background color. | +| Blurred | `"blurred"` | `BLURRED` | This generates a very low-resolution version of the source image and displays it as a blurred background. | +| Traced SVG | `"tracedSVG"` | `TRACED_SVG` | This generates a simplified, flat SVG version of the source image, which it displays as a placeholder. This works well for images with simple shapes or that include transparency. | +| None | `"none"` | `NONE` | No placeholder. You can use the background color option to set a static background if you wish. | + +### `formats` + +_Default component prop value: `["auto", "webp"]`. Default resolver prop value: `[AUTO, WEBP]`_ + +The Gatsby Image plugin supports four output formats: JPEG, PNG, WebP and AVIF. By default, the plugin generates images in the same format as the source image, as well as WebP. For example, if your source image is a PNG, it will generate PNG and WebP images. In most cases, you should not change this. However, in some cases you may need to manually set the formats. One reason for doing so is if you want to enable support for AVIF images. AVIF is a new image format that results in significantly smaller file sizes than alternative formats. It currently has [limited browser support](https://caniuse.com/avif), but this is likely to increase. It is safe to include as long as you also generate fallbacks for other browsers, which the image plugin does automatically by default. + +### `transformOptions` + +These values are passed in as an object to `transformOptions`, either as a prop to `StaticImage`, or to the resolver for dynamic images. They are advanced settings that most people will not need to change. Any provided object is merged with the defaults below. + +| Option name | Default | Description | +| ----------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `grayscale` | `false` | Convert image to grayscale | +| `duotone` | `false` | Add duotone effect. Pass `false`, or options object containing `{highlight: string, shadow: string, opacity: number}` | +| `rotate` | `0` | Rotate the image. Value in degrees. | +| `trim` | `false` | Trim "boring" pixels. See [the sharp documentation](https://sharp.pixelplumbing.com/api-resize#trim). | +| `cropFocus` | `"attention"`/`ATTENTION` | Controls crop behavior. See [the sharp documentation](https://sharp.pixelplumbing.com/api-resize#resize) for strategy, position and gravity. | +| `fit` | `"cover"`/`COVER` | Controls behavior when resizing an image and proving both width and height. See [the sharp documentation.](https://sharp.pixelplumbing.com/api-resize#resize) | + +## All options + +The Gatsby Image plugin uses [sharp](https://sharp.pixelplumbing.org) for image processing, and supports passing through many advanced options, such as those affecting cropping behavior or image effects including grayscale or duotone, as well as options specific to each format. + +| Option | Default | Description | +| --------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`layout`](#layout) | `"constrained"` / `CONSTRAINED` | Determines the size of the image and its resizing behavior. | +| [`width`/`height`](#widthheight) | Source image size | Change the size of the image. | +| [`aspectRatio`](#aspectratio) | Source image aspect ratio | Force a specific ratio between the image's width and height. | +| [`placeholder`](#placeholder) | `"dominantColor"`/`DOMINANT_COLOR` | Choose the style of temporary image shown while the full image loads. | +| [`formats`](#formats) | `["auto","webp"]`/`[AUTO,WEBP]` | File formats of the images generated. | +| [`transformOptions`](#transformoptions) | `{fit: "cover", cropFocus: "attention"}` | Options to pass to sharp to control cropping and other image manipulations. | +| `sizes` | Generated automatically | [The `` `sizes` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes), passed to the img tag. This describes the display size of the image, and does not affect generated images. You are only likely to need to change this if your are using full width images that do not span the full width of the screen. | +| `quality` | `50` | The default image quality generated. This is overridden by any format-specific options | +| `outputPixelDensities` | For fixed images: `[1, 2]`
For constrained: `[0.25, 0.5, 1, 2]` | A list of image pixel densities to generate. It will never generate images larger than the source, and will always include a 1x image. The value is multiplied by the image width, to give the generated sizes. For example, a `400` px wide constrained image would generate `100`, `200`, `400` and `800` px wide images by default. Ignored for full width layout images, which use `breakpoints` instead. | +| `breakpoints` | `[750, 1080, 1366, 1920]` | Output widths to generate for full width images. Default is to generate widths for common device resolutions. It will never generate an image larger than the source image. The browser will automatically choose the most appropriate. | +| `blurredOptions` | None | Options for the low-resolution placeholder image. Ignored unless [`placeholder`](#placeholder) is blurred. | +| `tracedSVGOptions` | None | Options for traced placeholder SVGs. See [potrace options](https://www.npmjs.com/package/potrace#parameters). Ignored unless [`placeholder`](#placeholder) is traced SVG. | +| `jpgOptions` | None | Options to pass to sharp when generating JPG images. | +| `pngOptions` | None | Options to pass to sharp when generating PNG images. | +| `webpOptions` | None | Options to pass to sharp when generating WebP images. | +| `avifOptions` | None | Options to pass to sharp when generating AVIF images. | diff --git a/docs/docs/reference/built-in-components/layouts.mp4 b/docs/docs/reference/built-in-components/layouts.mp4 new file mode 100644 index 0000000000000..a85a57fa5a77d Binary files /dev/null and b/docs/docs/reference/built-in-components/layouts.mp4 differ diff --git a/docs/docs/reference/release-notes/image-migration-guide.md b/docs/docs/reference/release-notes/image-migration-guide.md new file mode 100644 index 0000000000000..e6f3b510b1acf --- /dev/null +++ b/docs/docs/reference/release-notes/image-migration-guide.md @@ -0,0 +1,232 @@ +--- +title: Migrating from gatsby-image to gatsby-plugin-image +--- + +This document is provided to help users of `gatsby-image` migrate to using `gatsby-plugin-image`. + +Note that you can use both packages at the same time. You may need to in situations where you're using a `gatsby-image`-compatible CMS as a data source, and that CMS plugin has not yet updated to a version compatible with the new API. + +If you're looking for other documentation on the new plugin, see: + +- How-To Guide: [Using the beta Gatsby Image plugin](/docs/how-to/images-and-media/using-gatsby-plugin-image/) +- Reference Guide: [Gatsby Image plugin](/docs/reference/built-in-components/gatsby-plugin-image/) + +## What changed? + +### New Syntax + +The new plugin requires significant syntax changes. We've provided a [codemod](#codemod-instructions) to help you migrate, but this section will explain the changes. + +#### Import change + +Previously, `GatsbyImage` was the default export from `gatsby-image`. With `gatsby-plugin-image`, the component is now a named export. + +```javascript +// import Img from "gatsby-image" +import { GatsbyImage } from "gatsby-plugin-image" +``` + +#### GraphQL changes + +This is one of the bigger changes. There are no more fragments to use. Instead, things like `layout` and `format` are passed as arguments to the resolver. + +This is the previous syntax. + +```javascript +import { graphql } from "gatsby" + +export const query = graphql` + { + file(relativePath: { eq: "images/example.jpg" }) { + childImageSharp { + fixed { + ...GatsbyImageSharpFixed + } + } + } + } +` +``` + +The new syntax looks like this. The fragment is removed in favor of `gatsbyImageData`, which is used for all images. Previous configuration options - such as `fixed` vs. `fluid`, WebP generation, and placeholder type - are passed as arguments to the resolver. + +```javascript +import { graphql } from "gatsby" + +export const query = graphql` + { + file(relativePath: { eq: "images/example.jpg" }) { + childImageSharp { + gatsbyImageData(layout: FIXED) + } + } + } +` +``` + +Other changes to the available argument structure are in the section on [API changes](#api-changes). + +#### Component changes + +The last change is to the JSX component. The import name is potentially different, and the query result is also different. + +```javascript +// import Img from "gatsby-image" +import { GatsbyImage } from "gatsby-plugin-image" + +const HomePage = ({ data }) => { + return ( + // + + ) +} +``` + +### API Changes + +In addition to the syntax changes for using `gatsby-plugin-image`, there are also changes to the API that affect the resolver arguments (and the new `StaticImage` component). + +#### fluid + +The `fluid` image type has been deprecated in favor of two alternatives. + +The first is an image type called `fullWidth`. This image is designed to be used for things like hero images that span the full width of the screen, and generates image sizes accordingly. Instead of passing something like `maxWidth`, it takes an array called `breakpoints` that will generate images designed for those screen sizes. In most cases you will not need to provide these, as there are default values that work for most sites. Note that like the old `fluid` layout, `fullWidth` images will expand to fit the width of their container, even if that width is larger than the source image. + +The second is a responsive image type called `constrained` that will shrink with its container and generates smaller images, but nothing larger than the original image source size. Additionally, you can pass `width` and/or `height` to limit the displayed image to that size. In this case, larger images may be generated for high-density screens. + +#### maxWidth + +`maxWidth` and `maxHeight` are deprecated for all image types. For `constrained` and `fixed` images, use `width` and `height`. For `fullWidth` images, look at the `breakpoints` option. + +#### aspectRatio + +`aspectRatio` is a new argument that takes a number (or fraction). If you pass it without also passing in `width` or `height`, it will default to using the source image width and then adjusting the height to the correct aspect ratio. Alternatively, you can pass your own `width` or `height` and it will set the other dimension. Passing both `height` and `width` will cause `aspectRatio` to be ignored in favor of the inferred aspect ratio. + +#### formats + +Previously, images generated their own type by default, e.g. JPG, PNG, etc. You could also generate WebP images when using the appropriate fragment. This is now controlled using the `formats` argument. This field takes an array, `[AUTO, WEBP]` by default, where `AUTO` means the same format as the source image.`AVIF` is now also a valid format. + +#### Options nested inside objects + +Previously, transformations like `grayscale` and quality options such as `pngQuality` were top level query arguments. This has changed. + +`grayscale` now exists within the `transformOptions` argument, and `pngQuality` becomes `quality` inside `pngOptions`. See the [`gatsby-plugin-image` Reference Guide](/docs/reference/built-in-components/gatsby-plugin-image) for specifics. + +### Breaking changes + +Due to the changes to `gatsby-plugin-image`, there is some functionality that is no longer supported. + +1. `GatsbyImage` is no longer a class component and therefore cannot be extended. You can use [composition](https://reactjs.org/docs/composition-vs-inheritance.html) instead. +2. `fluid` images no longer exist, and the `fullWidth` replacement does not take `maxWidth` or `maxHeight`. +3. Art direction is no longer supported. +4. The component no longer takes a decomposed object, and the following code is not valid. You should avoid accessing or changing the contents of the `gatsbyImageData` object, as it is not considered to be a public API, so can be changed without notice. + + ```javascript + // THIS IS NOT VALID + + ``` + +## How to Migrate + +1. Install and update dependencies. + + ```shell + npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp + ``` + +2. Configure plugins. + + ```javascript:title=gatsby-config.js + module.exports = { + plugins: [ + `gatsby-plugin-image`, + `gatsby-plugin-sharp`, + `gatsby-transformer-sharp`, + ], + } + ``` + +3. Run the codemod. + + Note that if you need to do a partial migration, e.g. because you're using a CMS that doesn't yet support the new plugin alongside local image files, you'll want to make use of the `optional-path` to run against individual files. + + ```shell + npx gatsby-codemods gatsby-plugin-image + ``` + + Without an `optional-path`, the codemod will run against all the files in your current directory, so running it in root is recommended. It will ignore `node_modules`, `.cache`, and `public` automatically. It will also respect any local Babel configuration in your project. The codemod is designed to run against files with the extensions `.ts`, `.js`, `.tsx`, and `.jsx`. If this does not cover your project, or you require other customizations, see the section on using [`jscodeshift`](#jscodeshift). + + Due to the API changes, the codemod is not a pure 1:1 mapping. There are some changes introduced. + + - Fluid images will map to either `fullWidth` or `constrained` images. This decision is made based on the existence of `maxWidth` and its value. If `maxWidth` does not exist, it will be a `fullWidth` image. If it does, and the `maxWidth` is less than 1000, it will be a `constrained` image, otherwise a `fullWidth` image. `fullWidth` images do not retain their `maxWidth` or `maxHeight` fields; `constrained` images do, as `width` and `height`. + + - All images will generate WebP. + + The codemod will output warnings in a number of different scenarios and point you to the file in question so you can inspect the changes manually. + +4. Consider manual changes. + +- For images using static query, you should move to use the `StaticImage` component instead. This component takes `src`, which can be a remote image URL or a relative path to an image. Make sure you've installed `gatsby-source-filesystem` if you're going to use this component. + + ```javascript + import { StaticImage } from "gatsby-plugin-image" + + const HomePage = () => ( + + ) + } + ``` + +- You may also consider refactoring code to make use of the `getImage` helper function. + + ```javascript + import { getImage, GatsbyImage } from "gatsby-plugin-image" + + const HomePage = ({ data }) => { + const image = getImage(data.file) + return ( + <> + + + ) + } + ``` + +- Finally, if you were previously using `src`, e.g. for an SEO component, you'll want to use the `getSrc` helper function as the internal structure of the return object has changed. + + ```javascript + import { getSrc } from "gatsby-plugin-image" + + const HomePage = ({ data }) => { + const imagePath = getSrc(data.file) + return ( + <> + + + ) + } + ``` + +## `jscodeshift` + +This section is for people who need to run the codemod with extra flags exposed by `jscodeshift`, e.g. to transform file types other than those with extensions `.js`, `.ts`, `.tsx`, or `.jsx`. + +1. Install `jscodeshift`. + +```shell +npm install --global jscodeshift +``` + +2. Install the codemods package in your project. + +```shell +npm install gatsby-codemods +``` + +3. Run the codemod using `jscodeshift`. + +```shell +jscodeshift -t node_modules/gatsby-codemods/transforms/gatsby-plugin-image.js . +``` + +See the [jscodeshift docs](https://github.com/facebook/jscodeshift) for all the available flags. diff --git a/docs/docs/reference/release-notes/v2.31/index.md b/docs/docs/reference/release-notes/v2.31/index.md new file mode 100644 index 0000000000000..cc3e117e94d7f --- /dev/null +++ b/docs/docs/reference/release-notes/v2.31/index.md @@ -0,0 +1,139 @@ +--- +date: "2021-01-19" +version: "2.31.0" +--- + +# [v2.31](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.31.0-next.0...gatsby@2.31.0) (January 2021 #2) + +--- + +Welcome to `gatsby@2.31.0` release (January 2021 #2) + +Key highlights of this release: + +- [Performance improvements](#performance-improvements) +- [Support for Gatsby's fragments in GraphiQL](#support-for-gatsbys-fragments-in-graphiql) +- [Use Fast Refresh by default for React 17](#fast-refresh-enabled-by-default-for-react-17) +- [Important gatsby-plugin-image updates](#important-gatsby-plugin-image-updates) + +Also check out [notable bugfixes](#notable-bugfixes). + +**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know +if you have any [issues](https://github.com/gatsbyjs/gatsby/issues). + +[Previous release notes](/docs/reference/release-notes/v2.30) + +[Full changelog](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.31.0-next.0...gatsby@2.31.0) + +## Performance improvements + +An improvement to build speed for sites with many (10k+) markdown and images was made in this PR [#28891](https://github.com/gatsbyjs/gatsby/pull/28891). This change especially benefits very large sites—our 16k page markdown/image benchmark site's build time dropped 37% and the 128k pages benchmark dropped 84%. + +In [#28957](https://github.com/gatsbyjs/gatsby/pull/28957) an improvement to `gatsby develop` was made by not using the `debug` config for `bluebird`. This can speed your `source nodes`, especially for sites with larger numbers of pages. + +## Support for Gatsby's fragments in GraphiQL + +The underlying `graphiql` package added support for registering fragments and Gatsby now leverages this new feature! You now get auto-completion for image fragments and any fragments that you added yourself inside GraphiQL: + +![Screenshot showing the GraphiQL IDE with the fragments in auto-completion](https://user-images.githubusercontent.com/419821/103703746-686ce880-4fa8-11eb-852a-8f33f0b5b6b2.png) + +## Fast Refresh enabled by default for React 17 + +With the PRs [#28689](https://github.com/gatsbyjs/gatsby/pull/28689) & [#28930](https://github.com/gatsbyjs/gatsby/pull/28930) merged, Gatsby will now automatically use Fast Refresh if you use React >= 17.0.0 for your site. As you can read in the [release notes for 2.28](/docs/reference/release-notes/v2.28#improved-fast-refresh-integration) we've added support for Fast Refresh giving you a better (and custom) error overlay, quicker error recovery and in general a better `gatsby develop` experience. + +Two ESLint rules that will warn you against anti-patterns in your code were added now: + +- No anonymous default exports +- Page templates must only export one default export (the page) and `query` as a named export + +Please give us your feedback about the Fast Refresh integration in the [umbrella issue](https://github.com/gatsbyjs/gatsby/discussions/28390). Thanks! + +## Important `gatsby-plugin-image` updates + +This release includes important changes to the API of the beta image plugin as well as some new features and some proper docs. These are breaking changes, but should be the final API used in the stable release. + +We've listened to [lots of feedback](https://github.com/gatsbyjs/gatsby/discussions/27950), we've used the components ourselves, and we've performed lots of tests. From that we've made a few changes. + +1. **compat component removed:** + The compat component was a temporary fix to allow people to try out the component without needing to change their data. With the new API changes this was going to be hard to maintain, and the release of the codemod makes it easier to migrate instead. This release removes them entirely, so be aware that if you upgrade you will need to update your resolvers to use the new syntax. +2. **`fluid` layout renamed to `fullWidth`:** + We're renaming the `fluid` layout to `fullWidth`, to better reflect what it's used for. It was called `fluid` before to match the equivalent layout in the old `gatsby-image` component. However this was confusing, because for many of the cases where people used `fluid` before they should be using the new `constrained` layout. This displays the image at the specified width, but allows it to shrink to fit smaller screens. However `fullWidth` images always expand to the full width of their container, even if that means stretching beyond the maximum size of the source image. The main use for these is hero images and other full-width banners. To make that clearer, we changed the name. +3. **Don't use `maxWidth` for `fullWidth` images:** + The old `fluid` resolver allows you to pass a `maxWidth` argument, which we carried-over to the new plugin. Unfortunately it doesn't do what most people think it does. In fact, it's quite hard to explain what it does at all! It doesn't set the actual maximum width of the displayed image: you want constrained for that. It also doesn't set the maximum size of the generated image! It actually sets the size of the `1x` resolution image. The largest image generated would be this value, multiplied by the maximum pixel density! No wonder when we looked at open source projects that use it, almost everyone seems to be misusing the property. Because of this we removed it entirely, along with `maxHeight` (also doesn't do what you'd expect). Its replacement is: +4. **Use breakpoints for `fullWidth` images:** + Previously `fluid` layout generated image resolutions that were based on multiples and fractions of the `maxWidth`, similar to how they are done for `fixed` and `constrained`. This makes sense where they are mostly going to be used for higher-pixel density screens, rather than for displaying the image larger. However for a full width image, the size you want is the width of the screen. We can't generate images for every size, but we can choose a good selection of sizes to cover everything from phones to large monitors. We have chosen a default set based on our usage research, but you can pass your own breakpoints in if you'd prefer. +5. **Change `maxWidth/maxHeight` to `width/height`** + There was no good reason to have `constrained` take `maxWidth/maxHeight`, while fixed took `width/height`. We've changed it so they both take `width/height`. +6. **Add `aspectRatio` prop:** + We realized that lots of people were using hacks to set the aspect ratio of images, because it was hard to do properly, particularly for `fluid` images. We've added a new `aspectRatio` prop that forces the image to that aspect ratio, cropping if needed. If you pass it on its own, it will default to using the source image width, and then adjusting the height to the correct aspect ratio. Alternatively you can pass your own width or height and it will set the other dimension. This works in all layout types. +7. **Remote static images unflagged:** + In the previous version you could pass remote URLs to `StaticImage`, but only if you passed in an environment variable to enable it. In this release we've removed the flag, so try it out! If you use a remote URL it will download that image at build time and then process it in the same way as it would a local one. Bear in mind that because this is done at build time, any updates to the image on the remote server won't show up until you next build. Make sure your server supports ETag headers (most do), otherwise it will need to download them every time. +8. **Automatic `object-fit` polyfill:** + This version includes an automatic polyfill for browsers that don't support the CSS `object-fit` and `object-position` properties. It is lazy-loaded so has no overhead for browsers that don't need it. +9. **New docs are live:** + Want to know more about the plugin, and dive deeper into the options? There are two new pages in the documentation that are all about this plugin: + 1. [A step-by-step how-to guide](/docs/how-to/images-and-media/using-gatsby-plugin-image) + 2. [A detailed reference guide](/docs/reference/built-in-components/gatsby-plugin-image) + +This is likely to be the final minor version before the stable release, but please continue to [share your feedback](https://github.com/gatsbyjs/gatsby/discussions/27950). Meanwhile, watch out for [@laurieontech](https://twitter.com/laurieontech) sharing the new image experience in Gatsby at [Image Ready v2](https://www.meetup.com/JAMstack-Toronto/events/275601729/), hosted by Jamstack Toronto, alongside her counterparts from 11ty and NextJS. + +## Notable bugfixes + +- Extract non-CSS-in-JS CSS and add to `` when SSRing in develop mode (with `DEV_SSR` flag), via [#28471](https://github.com/gatsbyjs/gatsby/pull/28471) +- Show stack trace for non-GraphQL errors, via [#28888](https://github.com/gatsbyjs/gatsby/pull/28888) +- Update vulnerable packages and include React 17 in peerDeps, via [#28545](https://github.com/gatsbyjs/gatsby/pull/28545) + +## Contributors + +A big **Thank You** to [our community who contributed](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.31.0-next.0...gatsby@2.31.0) to this release 💜 + +- [DecliningLotus](https://github.com/DecliningLotus): Update Fontsource Documentation [PR #28750](https://github.com/gatsbyjs/gatsby/pull/28750) +- [saintmalik](https://github.com/saintmalik): chore(docs): fix a broken url [PR #28756](https://github.com/gatsbyjs/gatsby/pull/28756) +- [jbampton](https://github.com/jbampton) + + - chore: Fix spelling [PR #28761](https://github.com/gatsbyjs/gatsby/pull/28761) + - chore(gatsby-transformer-csv): fix whitespace [PR #28763](https://github.com/gatsbyjs/gatsby/pull/28763) + +- [vse-volod](https://github.com/vse-volod): chore(docs): Fixing broken link [PR #28767](https://github.com/gatsbyjs/gatsby/pull/28767) +- [eriklofblad](https://github.com/eriklofblad): chore(docs): Updated Twin + Gatsby + Emotion link [PR #28782](https://github.com/gatsbyjs/gatsby/pull/28782) +- [yonatanLehman](https://github.com/yonatanLehman): chore(docs): Update lighthouse instructions in tutorial [PR #28785](https://github.com/gatsbyjs/gatsby/pull/28785) +- [sreehari-sj23](https://github.com/sreehari-sj23) + + - chore(gatsby): Changed .org to .com [PR #28818](https://github.com/gatsbyjs/gatsby/pull/28818) + - chore(examples): Remove Broken Link [PR #28817](https://github.com/gatsbyjs/gatsby/pull/28817) + +- [takapiro99](https://github.com/takapiro99): chore(docs): Fix all `/packages` links to `/plugins` [PR #28816](https://github.com/gatsbyjs/gatsby/pull/28816) +- [Taremeh](https://github.com/Taremeh): chore(docs): Update migrate-remark-to-mdx [PR #28811](https://github.com/gatsbyjs/gatsby/pull/28811) +- [muescha](https://github.com/muescha) + + - chore(docs): add http to localhost [PR #28896](https://github.com/gatsbyjs/gatsby/pull/28896) + - chore(docs): fix code block language to shell [PR #28895](https://github.com/gatsbyjs/gatsby/pull/28895) + - docs(readme): add file extension, fix code block, fix link, fix code [PR #28905](https://github.com/gatsbyjs/gatsby/pull/28905) + - fix(gatsby-plugin-netlify): fix typo [PR #28907](https://github.com/gatsbyjs/gatsby/pull/28907) + - fix(gatsby-plugin-sass): fix brand name, code block around names [PR #28908](https://github.com/gatsbyjs/gatsby/pull/28908) + - doc(node-creation): fix brand name [PR #28912](https://github.com/gatsbyjs/gatsby/pull/28912) + - chore(docs): plugin contentful - fix brand name, code blocks for names [PR #28915](https://github.com/gatsbyjs/gatsby/pull/28915) + - readme(gatsby-plugin-emotion): fix table [PR #28906](https://github.com/gatsbyjs/gatsby/pull/28906) + - chore(docs): google plugin analytics - upgrade to gtag, fix code [PR #28918](https://github.com/gatsbyjs/gatsby/pull/28918) + - chore(docs): realease notes - code fences, code language [PR #28936](https://github.com/gatsbyjs/gatsby/pull/28936) + - chore(docs): typography - brand name [PR #28931](https://github.com/gatsbyjs/gatsby/pull/28931) + - chore(docs): routing - brand name, code language, code block [PR #28929](https://github.com/gatsbyjs/gatsby/pull/28929) + +- [AlexRAV](https://github.com/AlexRAV): Add avif format support to gatsby remark images package [PR #28927](https://github.com/gatsbyjs/gatsby/pull/28927) +- [nishantwrp](https://github.com/nishantwrp): chore(default-starter): format code using prettier [PR #28958](https://github.com/gatsbyjs/gatsby/pull/28958) +- [GrantHair5](https://github.com/GrantHair5): chore(docs): Change cd path to "my-gatsby-site" [PR #28933](https://github.com/gatsbyjs/gatsby/pull/28933) +- [mrhut10](https://github.com/mrhut10): feat(gatsby-source-shopify): download images option [PR #23840](https://github.com/gatsbyjs/gatsby/pull/23840) +- [andrewmcoupe](https://github.com/andrewmcoupe): chore(gatsby): Improve type safety of ShouldUpdateScrollArgs [PR #28923](https://github.com/gatsbyjs/gatsby/pull/28923) +- [Vishal19111999](https://github.com/Vishal19111999): chore(docs): Add Tina in list of Headless CMS [PR #28981](https://github.com/gatsbyjs/gatsby/pull/28981) +- [ariadne-github](https://github.com/ariadne-github): perf(gatsby-source-contentful): prevent redundant fs/remote fetches for tracedSVG [PR #28926](https://github.com/gatsbyjs/gatsby/pull/28926) +- [RookTKO](https://github.com/RookTKO): chore(docs): Updating Chakra UI docs [PR #29018](https://github.com/gatsbyjs/gatsby/pull/29018) +- [kaneshin](https://github.com/kaneshin): fix(gatsbu-source-contentful): apply useNameForId when creating the graphql schema [PR #28649](https://github.com/gatsbyjs/gatsby/pull/28649) +- [axe312ger](https://github.com/axe312ger) + + - Fix/contentful add header [PR #29028](https://github.com/gatsbyjs/gatsby/pull/29028) + - chore(docs): adjust Contentful Rich Text example codes [PR #29029](https://github.com/gatsbyjs/gatsby/pull/29029) + - fix(gatsby-source-contentful): Improve base64 placeholders [PR #29034](https://github.com/gatsbyjs/gatsby/pull/29034) + +- [nategiraudeau](https://github.com/nategiraudeau): fix(sharp) wrap sharp calls in try/catch to avoid crashing on bad images [PR #28645](https://github.com/gatsbyjs/gatsby/pull/28645) +- [hoobdeebla](https://github.com/hoobdeebla): fix(security): update vulnerable packages, include React 17 in peerDeps [PR #28545](https://github.com/gatsbyjs/gatsby/pull/28545) +- [hasparus](https://github.com/hasparus): fix(gatsby-plugin-typescript): add missing options validations [PR #29066](https://github.com/gatsbyjs/gatsby/pull/29066) diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js index c0119a2c65fd4..907d2f3e3c910 100644 --- a/e2e-tests/development-runtime/gatsby-config.js +++ b/e2e-tests/development-runtime/gatsby-config.js @@ -1,13 +1,3 @@ -// isomorphic-fetch sets global.fetch which seems to conflicts with source-map@<0.8.0 where it does a -// simple browser check if (global.fetch) which is true when isomorphic-fetch is used. This creates an -// exception in react-hot-loader. @see https://github.com/gatsbyjs/gatsby/pull/13713 -// -// This is only necessary if we are testing react < 16.9 or if you are forcing GATSBY_HOT_LOADER=react-hot-loader. -// When we are using fast-refresh we do not need this hack. -// TODO: Remove once fast-refresh is the default -// -require(`isomorphic-fetch`) - module.exports = { siteMetadata: { title: `Gatsby Default Starter`, diff --git a/e2e-tests/development-runtime/package.json b/e2e-tests/development-runtime/package.json index 77b6914a3df2c..8728b24aa482a 100644 --- a/e2e-tests/development-runtime/package.json +++ b/e2e-tests/development-runtime/package.json @@ -16,7 +16,7 @@ "gatsby-transformer-json": "^2.5.0", "gatsby-transformer-remark": "^2.3.12", "gatsby-transformer-sharp": "^2.1.19", - "isomorphic-fetch": "^2.2.1", + "node-fetch": "^2.6.1", "prop-types": "^15.6.2", "react": "16.9.0", "react-dom": "16.9.0", @@ -41,7 +41,7 @@ "update": "node scripts/update.js", "update:webhook": "node scripts/webhook.js", "update:cms-webhook": "node scripts/cms-webhook.js", - "update:preview": "curl -X POST -d '{ \"fake-data-update\": true }' -H \"Content-Type: application/json\" http://localhost:8000/__refresh", + "update:preview": "curl -X POST -d \"{ \\\"fake-data-update\\\": true }\" -H \"Content-Type: application/json\" http://localhost:8000/__refresh", "start-server-and-test": "start-server-and-test develop http://localhost:8000 cy:run", "start-server-and-debug": "start-server-and-test develop http://localhost:8000 cy:open", "cy:open": "cypress open", @@ -65,4 +65,4 @@ "resolutions": { "cypress": "6.1.0" } -} +} \ No newline at end of file diff --git a/e2e-tests/development-runtime/scripts/cms-webhook.js b/e2e-tests/development-runtime/scripts/cms-webhook.js index f97b7ef59cece..d1db96943e794 100644 --- a/e2e-tests/development-runtime/scripts/cms-webhook.js +++ b/e2e-tests/development-runtime/scripts/cms-webhook.js @@ -1,4 +1,4 @@ -require(`isomorphic-fetch`) +const fetch = require(`node-fetch`) fetch(`http://localhost:8000/__refresh/${process.argv[2]}`, { method: `POST`, diff --git a/e2e-tests/development-runtime/scripts/webhook.js b/e2e-tests/development-runtime/scripts/webhook.js index bd219ff9c4267..5df6efda75ead 100644 --- a/e2e-tests/development-runtime/scripts/webhook.js +++ b/e2e-tests/development-runtime/scripts/webhook.js @@ -1,4 +1,4 @@ -require(`isomorphic-fetch`) +const fetch = require(`node-fetch`) fetch(`http://localhost:8000/__refresh`, { method: `POST`, diff --git a/e2e-tests/gatsby-static-image/cypress/integration/image.js b/e2e-tests/gatsby-static-image/cypress/integration/image.js index 5a3b557b98129..3c1d5447b25c2 100644 --- a/e2e-tests/gatsby-static-image/cypress/integration/image.js +++ b/e2e-tests/gatsby-static-image/cypress/integration/image.js @@ -13,13 +13,6 @@ describe(`Production gatsby-image`, () => { .its(`length`) .should(`eq`, 1) }) - - it(`contains position relative`, () => { - cy.getTestElement(fluidTestId) - .find(`.gatsby-image-wrapper`) - .should(`have.attr`, `style`) - .and(`contains`, `position:relative`) - }) }) }) diff --git a/integration-tests/images/LICENSE b/integration-tests/images/LICENSE new file mode 100644 index 0000000000000..996428e740d30 --- /dev/null +++ b/integration-tests/images/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 gatsbyjs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/integration-tests/images/README.md b/integration-tests/images/README.md new file mode 100644 index 0000000000000..d8790d34fb089 --- /dev/null +++ b/integration-tests/images/README.md @@ -0,0 +1,5 @@ +# Image snapshots + +Tests to ensure that different image formats are visually identical. They also snapshot the generated srcsets. + +Photo by [Héctor J. Rivas](https://unsplash.com/@freestocks) on [Unsplash](https://unsplash.com/photos/_IZZKKL0uBs) diff --git a/integration-tests/images/__tests__/__snapshots__/images.ts.snap b/integration-tests/images/__tests__/__snapshots__/images.ts.snap new file mode 100644 index 0000000000000..6de129ef44982 --- /dev/null +++ b/integration-tests/images/__tests__/__snapshots__/images.ts.snap @@ -0,0 +1,565 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`image generation generates the correct images for test image: aspectRatio 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/e260b/sighisoara.jpg", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/49f40/sighisoara.jpg", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/8b0b1/sighisoara.jpg", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/6bc8e/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/775a0/sighisoara.avif", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/0871e/sighisoara.avif", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/88400/sighisoara.avif", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/fd21d/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/e40ff/sighisoara.webp", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/1828c/sighisoara.webp", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/9f72e/sighisoara.webp", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/aa61a/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: constrained 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/99f43/sighisoara.jpg", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/26cfb/sighisoara.jpg", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/1b035/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/ea46c/sighisoara.avif", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/569a0/sighisoara.avif", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/ea316/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/48571/sighisoara.webp", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/921bf/sighisoara.webp", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/b7ef5/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: constrained-square 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/8bb35/sighisoara.jpg", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/f505e/sighisoara.jpg", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/be5ed/sighisoara.jpg", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5a7c3/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/3ebc4/sighisoara.avif", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/a9ff4/sighisoara.avif", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/a61b1/sighisoara.avif", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/9ef3c/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/d66e1/sighisoara.webp", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/e7160/sighisoara.webp", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5f169/sighisoara.webp", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/3cd29/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fixed 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/1b035/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/ea316/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/b7ef5/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fixed-aspectRatio 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/8b0b1/sighisoara.jpg", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/6bc8e/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/88400/sighisoara.avif", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/fd21d/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/9f72e/sighisoara.webp", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/aa61a/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fixed-square 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 300, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/0fdf4/sighisoara.jpg", + }, + Object { + "size": 600, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/a89ca/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 300, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/aa5b9/sighisoara.avif", + }, + Object { + "size": 600, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/0c8d0/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 300, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/078c3/sighisoara.webp", + }, + Object { + "size": 600, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/6d09e/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: forcePNG 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 125, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/8bb35/sighisoara.jpg", + }, + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/f505e/sighisoara.jpg", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/be5ed/sighisoara.jpg", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5a7c3/sighisoara.jpg", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fullWidth-aspectRatio 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5d30b/sighisoara.jpg", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/29c4b/sighisoara.jpg", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/6bfa7/sighisoara.jpg", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/0772e/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/c92f7/sighisoara.avif", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/bd57f/sighisoara.avif", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/d9624/sighisoara.avif", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/fbe86/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/316e8/sighisoara.webp", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/8386b/sighisoara.webp", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/46618/sighisoara.webp", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/15204/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fullwidth 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/7284f/sighisoara.jpg", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/29ba9/sighisoara.jpg", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/c8896/sighisoara.jpg", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5267c/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/b0356/sighisoara.avif", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/48f75/sighisoara.avif", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/a5094/sighisoara.avif", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/f46cf/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/57584/sighisoara.webp", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/984df/sighisoara.webp", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/4a276/sighisoara.webp", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/9c00f/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: fullwidth-bp 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/7284f/sighisoara.jpg", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/29ba9/sighisoara.jpg", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/c8896/sighisoara.jpg", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/5267c/sighisoara.jpg", + }, + ], + }, + Object { + "format": "image/avif", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/b0356/sighisoara.avif", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/48f75/sighisoara.avif", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/a5094/sighisoara.avif", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/f46cf/sighisoara.avif", + }, + ], + }, + Object { + "format": "image/webp", + "srcset": Array [ + Object { + "size": 750, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/57584/sighisoara.webp", + }, + Object { + "size": 1080, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/984df/sighisoara.webp", + }, + Object { + "size": 1366, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/4a276/sighisoara.webp", + }, + Object { + "size": 1920, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/9c00f/sighisoara.webp", + }, + ], + }, +] +`; + +exports[`image generation generates the correct images for test image: no-jpg 1`] = ` +Array [ + Object { + "format": "auto", + "srcset": Array [ + Object { + "size": 250, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/48571/sighisoara.webp", + }, + Object { + "size": 500, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/921bf/sighisoara.webp", + }, + Object { + "size": 1000, + "src": "/static/3dc14781080130c49ec2f3d768d5d244/b7ef5/sighisoara.webp", + }, + ], + }, +] +`; diff --git a/integration-tests/images/__tests__/images.ts b/integration-tests/images/__tests__/images.ts new file mode 100644 index 0000000000000..8c7023698211c --- /dev/null +++ b/integration-tests/images/__tests__/images.ts @@ -0,0 +1,212 @@ +import { readFile, writeFile, ensureDir } from "fs-extra" +import path from "path" +import { JSDOM } from "jsdom" +import sharp from "sharp" +import pixelmatch from "pixelmatch" +import { PNG } from "pngjs" + +type ImgData = { metadata: sharp.Metadata; data: Buffer } + +/** + * Loads an image from disk and converts it to a raw pixel buffer + */ +async function toImageBuffer(imagePath: string): Promise { + const filename = path.join(__dirname, "..", "public", imagePath) + const pipeline = sharp(filename) + const metadata = await pipeline.metadata() + const data = await pipeline.ensureAlpha().raw().toBuffer() + return { metadata, data } +} + +/** + * Extracts image path/size pairs from a srcset + */ +function parseSrcSet(srcset: string): Array<{ src: string; size: number }> { + return srcset.split(",").map(item => { + const [src, size] = item.split(" ") + return { src: src.trim(), size: parseInt(size) } + }) +} + +type Source = { + format: string + srcset: Array<{ src: string; size: number }> +} + +/** + * Loads all image srcsets below the given testId + */ +function getImages(testId: string, dom: HTMLDivElement) { + const node = dom.querySelector(`[data-test-id="${testId}"]`) + + const sources = node?.querySelectorAll("source") + + const img = node?.querySelector("[data-main-image]") + + const srcsets: Array = [] + const imgsrcset = img?.dataset.srcset + + if (imgsrcset) { + srcsets.push({ format: "auto", srcset: parseSrcSet(imgsrcset) }) + } + + sources?.forEach(source => { + const format = source.getAttribute("type") + const srcset = source.getAttribute("srcset") + if (format && srcset) { + srcsets.push({ format, srcset: parseSrcSet(srcset) }) + } + }) + return srcsets +} + +/** + * Performs a pixel-level comparison on two images. Fails if there is more than 1% difference. + * This is enough to catch common errors such as issues with cropping, without tripping on + * differences in image quality, artifacts etc. + */ +async function imageDiff(source: ImgData, target: string): Promise { + const targetData = await toImageBuffer(target) + const { metadata, data } = targetData + + if ( + metadata.width !== source.metadata.width || + metadata.height !== source.metadata.height + ) { + console.warn("Image sizes don't match") + return false + } + + const diffImg = new PNG(metadata) + + const diff = pixelmatch( + data, + source.data, + diffImg.data, + metadata.width, + metadata.height, + { threshold: 0.2 } + ) + + const pass = diff < data.length / 4 / 100 //1% change + + if (!pass) { + const name = `${expect.getState().currentTestName} ${path.basename( + target + )} ${source.metadata.width}x${source.metadata.height}`.replace(/\W+/g, "_") + + await ensureDir("__diff_output__") + await writeFile(`__diff_output__/${name}.png`, PNG.sync.write(diffImg)) + } + + return pass +} + +/** + * Loads an HTML file and returns the root gatsby DOM element + */ +async function loadHTML(pathName): Promise { + const html = await readFile( + path.resolve(__dirname, "..", "public", pathName), + "utf-8" + ) + return new JSDOM(html).window.document.getElementById("___gatsby") +} + +/** + * Given a pair of srcsets, returns an array of mismatching images + */ + +async function compareSrcSets( + main: Source, + other: Source +): Promise> { + const results = await Promise.all( + main.srcset.map( + async ({ src, size }, index): Promise => { + const title = `${path.basename(src)} does not match ${path.basename( + other.srcset[index].src + )} at size ${size}` + const source = await toImageBuffer(src) + const result = await imageDiff(source, other.srcset[index].src) + if (!result) { + return title + } + return null + } + ) + ) + return results.filter(Boolean) as Array +} + +declare global { + namespace jest { + interface VisualMatch extends JestMatchers { + toVisuallyMatchSrcSet: ( + comparison: Source + ) => Promise + } + } +} + +expect.extend({ + toVisuallyMatchSrcSet: async (received: Source, comparison: Source) => { + const results = await compareSrcSets(comparison, received) + if (!results.length) { + return { + pass: true, + message: () => + `expected ${received.format} srcset to not match original`, + } + } + return { + pass: false, + message: () => + `expected ${ + received.format + } srcset to match original:\n\n${results.join( + "\n" + )}\n\nSee "__diff_output__" for comparison`, + } + }, +}) + +let div: HTMLDivElement + +describe("image generation", () => { + beforeAll(async () => { + div = await loadHTML("index.html") + }) + + it("generates the correct images for test image", async () => { + return Promise.all( + [ + "constrained-square", + "forcePNG", + "aspectRatio", + "fullWidth-aspectRatio", + "fixed-aspectRatio", + "fixed", + "fixed-square", + "constrained", + "no-jpg", + "fullwidth", + "fullwidth-bp", + ].map(async testId => { + const images = getImages(testId, div) + + expect(images).toMatchSnapshot(testId) + + const [fallback, ...imgs] = images + + await Promise.all( + imgs.map(img => { + return (expect(img) as jest.VisualMatch).toVisuallyMatchSrcSet( + fallback + ) + }) + ) + }) + ) + }, 60000) +}) diff --git a/integration-tests/images/gatsby-config.js b/integration-tests/images/gatsby-config.js new file mode 100644 index 0000000000000..3ecd9e2d18c46 --- /dev/null +++ b/integration-tests/images/gatsby-config.js @@ -0,0 +1,11 @@ +module.exports = { + siteMetadata: { + title: `Gatsby Plugin Image`, + }, + plugins: [ + `gatsby-plugin-sharp`, + `gatsby-transformer-sharp`, + { resolve: `gatsby-source-filesystem`, options: { path: "./src/images/" } }, + `gatsby-plugin-image`, + ], +} diff --git a/integration-tests/images/package.json b/integration-tests/images/package.json new file mode 100644 index 0000000000000..56e5db3f8d6e7 --- /dev/null +++ b/integration-tests/images/package.json @@ -0,0 +1,26 @@ +{ + "name": "gatsby-image-test", + "description": "Gatsby hello world starter", + "license": "MIT", + "scripts": { + "develop": "gatsby develop", + "build": "gatsby build", + "build-and-test": "yarn build && yarn test", + "test": "jest --config=../jest.config.js images/", + "serve": "gatsby serve" + }, + "dependencies": { + "gatsby": "next", + "gatsby-plugin-image": "next", + "gatsby-plugin-sharp": "next", + "gatsby-source-filesystem": "next", + "gatsby-transformer-sharp": "next", + "react": "^16.8.0", + "react-dom": "^16.8.0" + }, + "devDependencies": { + "jest": "^24.0.0", + "jest-cli": "^24.0.0", + "pixelmatch": "^5.2.1" + } +} diff --git a/integration-tests/images/src/images/sighisoara.jpg b/integration-tests/images/src/images/sighisoara.jpg new file mode 100644 index 0000000000000..0b999a8316127 Binary files /dev/null and b/integration-tests/images/src/images/sighisoara.jpg differ diff --git a/integration-tests/images/src/pages/index.js b/integration-tests/images/src/pages/index.js new file mode 100644 index 0000000000000..7bc9afc3105db --- /dev/null +++ b/integration-tests/images/src/pages/index.js @@ -0,0 +1,108 @@ +import React from "react" +import { StaticImage, GatsbyImage, getImage } from "gatsby-plugin-image" +import { graphql } from "gatsby" + +const IndexPage = ({ data }) => { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+

No jog

+ +

No jog

+
+ +
+ +
+ +
+ +
+
+ ) +} + +export default IndexPage + +export const query = graphql` + query MyQuery { + file(relativePath: { eq: "sighisoara.jpg" }) { + childImageSharp { + gatsbyImageData(layout: FULL_WIDTH, formats: [AUTO, WEBP, AVIF]) + } + } + } +` diff --git a/integration-tests/jest.config.js b/integration-tests/jest.config.js index 2aceb26f26261..77cf00465df54 100644 --- a/integration-tests/jest.config.js +++ b/integration-tests/jest.config.js @@ -16,5 +16,5 @@ module.exports = { `__testfixtures__`, `.cache`, ], - transform: { "^.+\\.js$": `/jest-transformer.js` }, + transform: { "^.+\\.[jt]s$": `/jest-transformer.js` }, } diff --git a/package.json b/package.json index 111227406961e..068015cd926ff 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "babel-eslint": "^10.1.0", "babel-jest": "^24.9.0", "chalk": "^4.1.0", - "chokidar": "^3.4.3", + "chokidar": "^3.5.1", "cross-env": "^7.0.3", "danger": "^10.6.0", "date-fns": "^1.30.1", diff --git a/packages/babel-plugin-remove-graphql-queries/CHANGELOG.md b/packages/babel-plugin-remove-graphql-queries/CHANGELOG.md index 9a539e8ee8001..3d7d3802aa5ca 100644 --- a/packages/babel-plugin-remove-graphql-queries/CHANGELOG.md +++ b/packages/babel-plugin-remove-graphql-queries/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.16.0](https://github.com/gatsbyjs/gatsby/compare/babel-plugin-remove-graphql-queries@2.16.0-next.1...babel-plugin-remove-graphql-queries@2.16.0) (2021-02-02) + +**Note:** Version bump only for package babel-plugin-remove-graphql-queries + +# [2.16.0-next.1](https://github.com/gatsbyjs/gatsby/compare/babel-plugin-remove-graphql-queries@2.16.0-next.0...babel-plugin-remove-graphql-queries@2.16.0-next.1) (2021-01-26) + +### Bug Fixes + +- **babel-plugin-remove-graphql-queries:** make sure imports are posix ([#29144](https://github.com/gatsbyjs/gatsby/issues/29144)) ([3a5a855](https://github.com/gatsbyjs/gatsby/commit/3a5a855ebc16c1cd2e9c1cae1586765591a4b353)) + # [2.16.0-next.0](https://github.com/gatsbyjs/gatsby/compare/babel-plugin-remove-graphql-queries@2.15.0-next.0...babel-plugin-remove-graphql-queries@2.16.0-next.0) (2021-01-18) **Note:** Version bump only for package babel-plugin-remove-graphql-queries diff --git a/packages/babel-plugin-remove-graphql-queries/package.json b/packages/babel-plugin-remove-graphql-queries/package.json index 5b9ab40d79ab1..e377c89962bdd 100644 --- a/packages/babel-plugin-remove-graphql-queries/package.json +++ b/packages/babel-plugin-remove-graphql-queries/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-remove-graphql-queries", - "version": "2.16.0-next.0", + "version": "2.16.0", "author": "Jason Quense ", "repository": { "type": "git", @@ -11,10 +11,12 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", - "cross-env": "^7.0.3" + "babel-preset-gatsby-package": "^0.12.0", + "cross-env": "^7.0.3", + "gatsby-core-utils": "^1.10.0" }, "peerDependencies": { + "@babel/core": "^7.0.0", "gatsby": "^2.0.0" }, "license": "MIT", diff --git a/packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap index f26c8f2c10e3b..121037d5fda6c 100644 --- a/packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap +++ b/packages/babel-plugin-remove-graphql-queries/src/__tests__/__snapshots__/index.js.snap @@ -11,6 +11,31 @@ export default (() => { });" `; +exports[`Allow alternative import of useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var Gatsby = _interopRequireWildcard(require(\\"gatsby\\")); + +var _default = () => { + const query = \\"426988268\\"; + const siteTitle = _.default.data; + return /*#__PURE__*/React.createElement(\\"h1\\", null, siteTitle.site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Doesn't add data import for non static queries 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -26,6 +51,33 @@ export default Test; const fragment = \\"4176178832\\";" `; +exports[`Doesn't add data import for non static queries 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _gatsby = require(\\"gatsby\\"); + +const Test = () => /*#__PURE__*/React.createElement(_gatsby.StaticQuery, { + query: \\"426988268\\", + render: data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title), + data: _.default +}); + +var _default = Test; +exports.default = _default; +const fragment = \\"4176178832\\";" +`; + exports[`Handles closing StaticQuery tag 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -36,6 +88,30 @@ export default (() => /*#__PURE__*/React.createElement(StaticQuery, { }, data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title)));" `; +exports[`Handles closing StaticQuery tag 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _gatsby = require(\\"gatsby\\"); + +var _default = () => /*#__PURE__*/React.createElement(_gatsby.StaticQuery, { + query: \\"426988268\\", + data: _.default +}, data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title)); + +exports.default = _default;" +`; + exports[`Leaves other graphql tags alone 1`] = ` "import * as React from 'react'; import { graphql } from 'relay'; @@ -47,6 +123,29 @@ export const query = graphql\` \`;" `; +exports[`Leaves other graphql tags alone 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +exports.__esModule = true; +exports.query = exports.default = void 0; + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _relay = require(\\"relay\\"); + +var _default = () => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title); + +exports.default = _default; +const query = (0, _relay.graphql)\` + { + site { siteMetadata { title }} + } + \`; +exports.query = query;" +`; + exports[`Only runs transforms if useStaticQuery is imported from gatsby 1`] = ` "import * as React from 'react'; export default (() => { @@ -56,12 +155,44 @@ export default (() => { });" `; +exports[`Only runs transforms if useStaticQuery is imported from gatsby 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +exports.__esModule = true; +exports.default = void 0; + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const query = \\"426988268\\"; + const siteTitle = useStaticQuery(query); + return /*#__PURE__*/React.createElement(\\"h1\\", null, siteTitle.site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Removes all gatsby queries 1`] = ` "export default (() => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title)); const siteMetaQuery = \\"504726680\\"; const query = \\"3211238532\\";" `; +exports[`Removes all gatsby queries 2`] = ` +"\\"use strict\\"; + +exports.__esModule = true; +exports.default = void 0; + +var _default = () => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title); + +exports.default = _default; +const siteMetaQuery = \\"504726680\\"; +const query = \\"3211238532\\";" +`; + exports[`Transformation does not break custom hooks 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import React from \\"react\\"; @@ -77,6 +208,31 @@ export default (() => { });" `; +exports[`Transformation does not break custom hooks 2`] = ` +"\\"use strict\\"; + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var _react = _interopRequireDefault(require(\\"react\\")); + +const useSiteMetadata = () => { + const data = _.default.data; + return data.site.siteMetadata; +}; + +var _default = () => { + const siteMetadata = useSiteMetadata(); + return /*#__PURE__*/_react.default.createElement(\\"h1\\", null, site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Transforms exported queries in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -87,6 +243,30 @@ export default (() => { export const query = \\"426988268\\";" `; +exports[`Transforms exported queries in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.query = exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const data = _.default.data; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\\"h1\\", null, data.site.siteMetadata.title), /*#__PURE__*/React.createElement(\\"p\\", null, data.site.siteMetadata.description)); +}; + +exports.default = _default; +const query = \\"426988268\\"; +exports.query = query;" +`; + exports[`Transforms only the call expression in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import React from \\"react\\"; @@ -101,6 +281,30 @@ export default (() => { });" `; +exports[`Transforms only the call expression in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var _react = _interopRequireDefault(require(\\"react\\")); + +const useSiteMetadata = () => { + return _.default.data.site.siteMetadata; +}; + +var _default = () => { + const siteMetadata = useSiteMetadata(); + return /*#__PURE__*/_react.default.createElement(\\"h1\\", null, siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Transforms queries and preserves destructuring in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -113,6 +317,31 @@ export default (() => { });" `; +exports[`Transforms queries and preserves destructuring in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const query = \\"426988268\\"; + const { + site + } = _.default.data; + return /*#__PURE__*/React.createElement(\\"h1\\", null, site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Transforms queries and preserves variable type in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -125,6 +354,31 @@ export default (() => { });" `; +exports[`Transforms queries and preserves variable type in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const query = \\"426988268\\"; + let { + site + } = _.default.data; + return /*#__PURE__*/React.createElement(\\"h1\\", null, site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Transforms queries defined in own variable in 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -137,6 +391,33 @@ export default (() => /*#__PURE__*/React.createElement(StaticQuery, { }));" `; +exports[`Transforms queries defined in own variable in 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _gatsby = require(\\"gatsby\\"); + +const query = \\"426988268\\"; + +var _default = () => /*#__PURE__*/React.createElement(_gatsby.StaticQuery, { + query: query, + render: data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title), + data: _.default +}); + +exports.default = _default;" +`; + exports[`Transforms queries defined in own variable in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -147,6 +428,29 @@ export default (() => { });" `; +exports[`Transforms queries defined in own variable in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const query = \\"426988268\\"; + const siteTitle = _.default.data; + return /*#__PURE__*/React.createElement(\\"h1\\", null, siteTitle.site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`Transforms queries in 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -158,8 +462,39 @@ export default (() => /*#__PURE__*/React.createElement(StaticQuery, { }));" `; +exports[`Transforms queries in 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _gatsby = require(\\"gatsby\\"); + +var _default = () => /*#__PURE__*/React.createElement(_gatsby.StaticQuery, { + query: \\"426988268\\", + render: data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title), + data: _.default +}); + +exports.default = _default;" +`; + exports[`Transforms queries in page components 1`] = `"const query = \\"426988268\\";"`; +exports[`Transforms queries in page components 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`Transforms queries in useStaticQuery 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -169,8 +504,36 @@ export default (() => { });" `; +exports[`Transforms queries in useStaticQuery 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _default = () => { + const siteTitle = _.default.data; + return /*#__PURE__*/React.createElement(\\"h1\\", null, siteTitle.site.siteMetadata.title); +}; + +exports.default = _default;" +`; + exports[`allows the global tag 1`] = `"const query = \\"426988268\\";"`; +exports[`allows the global tag 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`distinguishes between the right tags 1`] = ` "const foo = styled('div')\` { @@ -198,14 +561,67 @@ const pulse = keyframes\` const query = \\"426988268\\";" `; +exports[`distinguishes between the right tags 2`] = ` +"\\"use strict\\"; + +const foo = styled('div')\` + { + \${foo} + } + \`; +const pulse = keyframes\` + 0% { + transform: scale(1); + animation-timing-function: ease-in; + } + 25% { + animation-timing-function: ease-out; + transform: scale(1.05); + } + 50% { + transform: scale(1.12); + animation-timing-function: ease-in; + } + to { + transform: scale(1); + animation-timing-function: ease-out; + } + \`; +const query = \\"426988268\\";" +`; + exports[`handles import aliasing 1`] = `"const query = \\"426988268\\";"`; +exports[`handles import aliasing 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`handles require 1`] = `"const query = \\"426988268\\";"`; +exports[`handles require 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`handles require alias 1`] = `"const query = \\"426988268\\";"`; +exports[`handles require alias 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`handles require namespace 1`] = `"const query = \\"426988268\\";"`; +exports[`handles require namespace 2`] = ` +"\\"use strict\\"; + +const query = \\"426988268\\";" +`; + exports[`transforms exported variable queries in 1`] = ` "import staticQueryData from \\"public/static/d/426988268.json\\"; import * as React from 'react'; @@ -217,3 +633,31 @@ export default (() => /*#__PURE__*/React.createElement(StaticQuery, { data: staticQueryData }));" `; + +exports[`transforms exported variable queries in 2`] = ` +"\\"use strict\\"; + +var _interopRequireWildcard = require(\\"@babel/runtime/helpers/interopRequireWildcard\\"); + +var _interopRequireDefault = require(\\"@babel/runtime/helpers/interopRequireDefault\\"); + +exports.__esModule = true; +exports.default = exports.query = void 0; + +var _ = _interopRequireDefault(require(\\"../../public/static/d/426988268.json\\")); + +var React = _interopRequireWildcard(require(\\"react\\")); + +var _gatsby = require(\\"gatsby\\"); + +const query = \\"426988268\\"; +exports.query = query; + +var _default = () => /*#__PURE__*/React.createElement(_gatsby.StaticQuery, { + query: query, + render: data => /*#__PURE__*/React.createElement(\\"div\\", null, data.site.siteMetadata.title), + data: _.default +}); + +exports.default = _default;" +`; diff --git a/packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js b/packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js index 8402701319dac..e8554ae56edd3 100644 --- a/packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js +++ b/packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js @@ -2,11 +2,17 @@ const babel = require(`@babel/core`) const plugin = require(`../`) function matchesSnapshot(query) { - const { code } = babel.transform(query, { + const { code: codeWithoutFileName } = babel.transform(query, { presets: [`@babel/preset-react`], plugins: [plugin], }) - expect(code).toMatchSnapshot() + const { code: codeWithFileName } = babel.transform(query, { + presets: [`@babel/preset-react`], + plugins: [plugin], + filename: `src/components/test.js`, + }) + expect(codeWithoutFileName).toMatchSnapshot() + expect(codeWithFileName).toMatchSnapshot() } it.todo( diff --git a/packages/babel-plugin-remove-graphql-queries/src/index.ts b/packages/babel-plugin-remove-graphql-queries/src/index.ts index 76db0f231b019..54475c353254f 100644 --- a/packages/babel-plugin-remove-graphql-queries/src/index.ts +++ b/packages/babel-plugin-remove-graphql-queries/src/index.ts @@ -4,6 +4,7 @@ import graphql from "gatsby/graphql" import { murmurhash } from "./murmur" import nodePath from "path" import { NodePath, PluginObj } from "@babel/core" +import { slash } from "gatsby-core-utils" import { Binding } from "babel__traverse" import { CallExpression, @@ -300,12 +301,14 @@ export default function ({ types: t }): PluginObj { const importDeclaration = t.importDeclaration( [importDefaultSpecifier], t.stringLiteral( - filename - ? nodePath.relative( - nodePath.parse(filename).dir, - resultPath - ) - : shortResultPath + slash( + filename + ? nodePath.relative( + nodePath.dirname(filename), + resultPath + ) + : shortResultPath + ) ) ) path.node.body.unshift(importDeclaration) @@ -361,12 +364,14 @@ export default function ({ types: t }): PluginObj { const importDeclaration = t.importDeclaration( [importDefaultSpecifier], t.stringLiteral( - filename - ? nodePath.relative( - nodePath.parse(filename).dir, - resultPath - ) - : shortResultPath + slash( + filename + ? nodePath.relative( + nodePath.dirname(filename), + resultPath + ) + : shortResultPath + ) ) ) path.node.body.unshift(importDeclaration) diff --git a/packages/babel-preset-gatsby-package/CHANGELOG.md b/packages/babel-preset-gatsby-package/CHANGELOG.md index 988070993b06b..43d04676329b4 100644 --- a/packages/babel-preset-gatsby-package/CHANGELOG.md +++ b/packages/babel-preset-gatsby-package/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.12.0](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby-package@0.12.0-next.0...babel-preset-gatsby-package@0.12.0) (2021-02-02) + +**Note:** Version bump only for package babel-preset-gatsby-package + # [0.12.0-next.0](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby-package@0.11.0-next.0...babel-preset-gatsby-package@0.12.0-next.0) (2021-01-18) **Note:** Version bump only for package babel-preset-gatsby-package diff --git a/packages/babel-preset-gatsby-package/package.json b/packages/babel-preset-gatsby-package/package.json index b31ee0279b763..6d979e6e2a4ed 100644 --- a/packages/babel-preset-gatsby-package/package.json +++ b/packages/babel-preset-gatsby-package/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-gatsby-package", - "version": "0.12.0-next.0", + "version": "0.12.0", "author": "Philipp Spiess ", "repository": { "type": "git", diff --git a/packages/babel-preset-gatsby/CHANGELOG.md b/packages/babel-preset-gatsby/CHANGELOG.md index 68c5d1d055d46..d6b0999e35e64 100644 --- a/packages/babel-preset-gatsby/CHANGELOG.md +++ b/packages/babel-preset-gatsby/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.12.0](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby@0.12.0-next.0...babel-preset-gatsby@0.12.0) (2021-02-02) + +**Note:** Version bump only for package babel-preset-gatsby + # [0.12.0-next.0](https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby@0.11.0-next.0...babel-preset-gatsby@0.12.0-next.0) (2021-01-18) **Note:** Version bump only for package babel-preset-gatsby diff --git a/packages/babel-preset-gatsby/package.json b/packages/babel-preset-gatsby/package.json index b6e6c0b054c32..0935937bcd114 100644 --- a/packages/babel-preset-gatsby/package.json +++ b/packages/babel-preset-gatsby/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-gatsby", - "version": "0.12.0-next.0", + "version": "0.12.0", "author": "Philipp Spiess ", "repository": { "type": "git", @@ -21,8 +21,8 @@ "babel-plugin-dynamic-import-node": "^2.3.3", "babel-plugin-macros": "^2.8.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", - "gatsby-core-utils": "^1.10.0-next.0", - "gatsby-legacy-polyfills": "^0.7.0-next.0" + "gatsby-core-utils": "^1.10.0", + "gatsby-legacy-polyfills": "^0.7.0" }, "peerDependencies": { "@babel/core": "^7.11.6", @@ -37,7 +37,7 @@ }, "devDependencies": { "@babel/cli": "^7.12.1", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "slash": "^3.0.0" }, diff --git a/packages/create-gatsby/CHANGELOG.md b/packages/create-gatsby/CHANGELOG.md index 873d7c619f224..7821ec3643365 100644 --- a/packages/create-gatsby/CHANGELOG.md +++ b/packages/create-gatsby/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.5.0](https://github.com/gatsbyjs/gatsby/compare/create-gatsby@0.5.0-next.0...create-gatsby@0.5.0) (2021-02-02) + +**Note:** Version bump only for package create-gatsby + # [0.5.0-next.0](https://github.com/gatsbyjs/gatsby/compare/create-gatsby@0.4.0-next.1...create-gatsby@0.5.0-next.0) (2021-01-18) **Note:** Version bump only for package create-gatsby diff --git a/packages/create-gatsby/package.json b/packages/create-gatsby/package.json index cdc6697daba42..0a0e287c9c9c0 100644 --- a/packages/create-gatsby/package.json +++ b/packages/create-gatsby/package.json @@ -1,6 +1,6 @@ { "name": "create-gatsby", - "version": "0.5.0-next.0", + "version": "0.5.0", "main": "lib/index.js", "bin": "cli.js", "license": "MIT", @@ -24,10 +24,10 @@ "ansi-wordwrap": "^1.0.2", "common-tags": "^1.8.0", "enquirer": "^2.3.6", - "eslint": "^7.17.0", + "eslint": "^7.18.0", "execa": "^4.1.0", "fs-extra": "^9.0.1", - "gatsby-plugin-utils": "^0.9.0-next.0", + "gatsby-plugin-utils": "^0.9.0", "joi": "^17.2.1", "microbundle": "^0.12.4", "node-fetch": "^2.6.1", diff --git a/packages/gatsby-admin/CHANGELOG.md b/packages/gatsby-admin/CHANGELOG.md index 207fd4c372aa2..36f9706ebf35c 100644 --- a/packages/gatsby-admin/CHANGELOG.md +++ b/packages/gatsby-admin/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.8.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.8.0-next.1...gatsby-admin@0.8.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-admin + +# [0.8.0-next.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.8.0-next.0...gatsby-admin@0.8.0-next.1) (2021-01-26) + +**Note:** Version bump only for package gatsby-admin + # [0.8.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.7.0-next.1...gatsby-admin@0.8.0-next.0) (2021-01-18) ### Bug Fixes diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json index 957e92b000d7a..96c81ed1bc446 100644 --- a/packages/gatsby-admin/package.json +++ b/packages/gatsby-admin/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-admin", - "version": "0.8.0-next.0", + "version": "0.8.0", "main": "index.js", "author": "Max Stoiber", "license": "MIT", @@ -11,42 +11,42 @@ }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-admin#readme", "devDependencies": { - "@emotion/react": "^11.0.0", + "@emotion/react": "^11.1.4", "@emotion/styled": "^11.0.0", - "@feedback-fish/react": "^1.2.0", + "@feedback-fish/react": "^1.2.1", "@types/react-instantsearch-dom": "^5.2.6", - "@types/socket.io-client": "^1.4.34", + "@types/socket.io-client": "^1.4.35", "@typescript-eslint/eslint-plugin": "^2.34.0", "@typescript-eslint/parser": "^2.34.0", - "csstype": "^2.6.13", - "formik": "^2.2.5", - "gatsby": "^2.32.0-next.0", - "gatsby-interface": "^0.0.225", - "gatsby-plugin-typescript": "^2.12.0-next.0", + "csstype": "^2.6.14", + "formik": "^2.2.6", + "gatsby": "^2.32.0", + "gatsby-interface": "^0.0.244", + "gatsby-plugin-typescript": "^2.12.0", "gatsby-plugin-webfonts": "^1.1.4", - "gatsby-source-graphql": "^2.14.0-next.0", + "gatsby-source-graphql": "^2.14.0", "lodash-es": "^4.17.20", "ncp": "^2.0.0", - "nodemon": "^2.0.6", + "nodemon": "^2.0.7", "normalize.css": "^8.0.1", "prism-react-renderer": "^1.1.1", - "query-string": "^6.13.7", + "query-string": "^6.13.8", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-error-boundary": "^3.0.2", + "react-error-boundary": "^3.1.0", "react-helmet": "^6.1.0", "react-icons": "^3.11.0", "react-instantsearch-dom": "^5.7.0", "react-markdown": "^4.3.1", "remove-markdown": "^0.3.0", "rimraf": "^3.0.2", - "socket.io-client": "2.3.1", + "socket.io-client": "2.4.0", "strict-ui": "^0.2.0-0", "subscriptions-transport-ws": "^0.9.18", - "theme-ui": "^0.4.0-rc.8", + "theme-ui": "^0.4.0-rc.14", "typescript": "^3.9.7", - "urql": "^1.11.2", - "yup": "^0.29.3" + "urql": "^1.11.6", + "yup": "^0.32.8" }, "scripts": { "develop": "gatsby develop", diff --git a/packages/gatsby-cli/CHANGELOG.md b/packages/gatsby-cli/CHANGELOG.md index 0918ca82c9589..ff35b7397a006 100644 --- a/packages/gatsby-cli/CHANGELOG.md +++ b/packages/gatsby-cli/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.19.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.19.0-next.1...gatsby-cli@2.19.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-cli + +# [2.19.0-next.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.19.0-next.0...gatsby-cli@2.19.0-next.1) (2021-01-26) + +**Note:** Version bump only for package gatsby-cli + # [2.19.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.18.0-next.1...gatsby-cli@2.19.0-next.0) (2021-01-18) ### Bug Fixes diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json index 6d3ef8ce60369..3d80317d32f5b 100644 --- a/packages/gatsby-cli/package.json +++ b/packages/gatsby-cli/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-cli", "description": "Gatsby command-line interface for creating new sites and running Gatsby commands", - "version": "2.19.0-next.0", + "version": "2.19.0", "author": "Kyle Mathews ", "bin": { "gatsby": "cli.js" @@ -19,14 +19,14 @@ "common-tags": "^1.8.0", "configstore": "^5.0.1", "convert-hrtime": "^3.0.0", - "create-gatsby": "^0.5.0-next.0", + "create-gatsby": "^0.5.0", "envinfo": "^7.7.3", "execa": "^3.4.0", "fs-exists-cached": "^1.0.0", "fs-extra": "^8.1.0", - "gatsby-core-utils": "^1.10.0-next.0", - "gatsby-recipes": "^0.9.0-next.0", - "gatsby-telemetry": "^1.10.0-next.0", + "gatsby-core-utils": "^1.10.0", + "gatsby-recipes": "^0.9.0", + "gatsby-telemetry": "^1.10.0", "hosted-git-info": "^3.0.6", "is-valid-path": "^0.1.1", "lodash": "^4.17.20", @@ -59,7 +59,7 @@ "@rollup/plugin-replace": "^2.3.3", "@types/hosted-git-info": "^3.0.1", "@types/yargs": "^15.0.8", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "ink": "^3.0.8", "ink-spinner": "^4.0.1", diff --git a/packages/gatsby-codemods/CHANGELOG.md b/packages/gatsby-codemods/CHANGELOG.md index 2256b76df7444..c11ae72099631 100644 --- a/packages/gatsby-codemods/CHANGELOG.md +++ b/packages/gatsby-codemods/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-codemods@1.10.0-next.0...gatsby-codemods@1.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-codemods + # [1.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-codemods@1.9.0-next.0...gatsby-codemods@1.10.0-next.0) (2021-01-18) ### Features diff --git a/packages/gatsby-codemods/package.json b/packages/gatsby-codemods/package.json index c1ffef941bf69..d6b2d69387c07 100644 --- a/packages/gatsby-codemods/package.json +++ b/packages/gatsby-codemods/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-codemods", - "version": "1.10.0-next.0", + "version": "1.10.0", "description": "A collection of codemod scripts for use with JSCodeshift that help migrate to newer versions of Gatsby.", "main": "index.js", "scripts": { @@ -36,7 +36,7 @@ }, "devDependencies": { "@babel/cli": "^7.12.1", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "engines": { diff --git a/packages/gatsby-core-utils/CHANGELOG.md b/packages/gatsby-core-utils/CHANGELOG.md index b95d3ff189219..c796b29c7ebc1 100644 --- a/packages/gatsby-core-utils/CHANGELOG.md +++ b/packages/gatsby-core-utils/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-core-utils@1.10.0-next.0...gatsby-core-utils@1.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-core-utils + # [1.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-core-utils@1.9.0-next.0...gatsby-core-utils@1.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-core-utils diff --git a/packages/gatsby-core-utils/package.json b/packages/gatsby-core-utils/package.json index ea2427dfbca7a..196611adef543 100644 --- a/packages/gatsby-core-utils/package.json +++ b/packages/gatsby-core-utils/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-core-utils", - "version": "1.10.0-next.0", + "version": "1.10.0", "description": "A collection of gatsby utils used in different gatsby packages", "keywords": [ "gatsby", @@ -41,7 +41,7 @@ "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@types/ci-info": "2.0.0", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "typescript": "^3.9.7" }, diff --git a/packages/gatsby-cypress/CHANGELOG.md b/packages/gatsby-cypress/CHANGELOG.md index 3640d55ab94e1..d7f98913daba6 100644 --- a/packages/gatsby-cypress/CHANGELOG.md +++ b/packages/gatsby-cypress/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cypress@0.11.0-next.0...gatsby-cypress@0.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-cypress + # [0.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cypress@0.10.0-next.0...gatsby-cypress@0.11.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-cypress diff --git a/packages/gatsby-cypress/package.json b/packages/gatsby-cypress/package.json index 4f7f4424c5992..22ff582598817 100644 --- a/packages/gatsby-cypress/package.json +++ b/packages/gatsby-cypress/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-cypress", - "version": "0.11.0-next.0", + "version": "0.11.0", "description": "Cypress tools for Gatsby projects", "main": "index.js", "repository": { @@ -20,7 +20,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "keywords": [ diff --git a/packages/gatsby-design-tokens/CHANGELOG.md b/packages/gatsby-design-tokens/CHANGELOG.md index 0b13b22e48a86..d646628dc3a9c 100644 --- a/packages/gatsby-design-tokens/CHANGELOG.md +++ b/packages/gatsby-design-tokens/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@2.7.0-next.0...gatsby-design-tokens@2.7.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-design-tokens + # [2.7.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-design-tokens@2.6.0-next.1...gatsby-design-tokens@2.7.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-design-tokens diff --git a/packages/gatsby-design-tokens/package.json b/packages/gatsby-design-tokens/package.json index 21b83147af5bb..dcfc588374e6e 100644 --- a/packages/gatsby-design-tokens/package.json +++ b/packages/gatsby-design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-design-tokens", - "version": "2.7.0-next.0", + "version": "2.7.0", "description": "Gatsby Design Tokens", "main": "dist/index.js", "module": "dist/index.esm.js", diff --git a/packages/gatsby-dev-cli/CHANGELOG.md b/packages/gatsby-dev-cli/CHANGELOG.md index c01c4a399eabc..0ed14798f74e4 100644 --- a/packages/gatsby-dev-cli/CHANGELOG.md +++ b/packages/gatsby-dev-cli/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.14.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-dev-cli@2.14.0-next.0...gatsby-dev-cli@2.14.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-dev-cli + # [2.14.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-dev-cli@2.13.0-next.1...gatsby-dev-cli@2.14.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-dev-cli diff --git a/packages/gatsby-dev-cli/package.json b/packages/gatsby-dev-cli/package.json index 880a6225a2814..4975b67a01327 100644 --- a/packages/gatsby-dev-cli/package.json +++ b/packages/gatsby-dev-cli/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-dev-cli", "description": "CLI helpers for contributors working on Gatsby", - "version": "2.14.0-next.0", + "version": "2.14.0", "author": "Kyle Mathews ", "bin": { "gatsby-dev": "./dist/index.js" @@ -27,7 +27,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-dev-cli#readme", diff --git a/packages/gatsby-graphiql-explorer/CHANGELOG.md b/packages/gatsby-graphiql-explorer/CHANGELOG.md index e3a37923cf71b..01fc6c0bd742d 100644 --- a/packages/gatsby-graphiql-explorer/CHANGELOG.md +++ b/packages/gatsby-graphiql-explorer/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-graphiql-explorer@0.11.0-next.0...gatsby-graphiql-explorer@0.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-graphiql-explorer + # [0.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-graphiql-explorer@0.10.0-next.0...gatsby-graphiql-explorer@0.11.0-next.0) (2021-01-18) ### Features diff --git a/packages/gatsby-graphiql-explorer/package.json b/packages/gatsby-graphiql-explorer/package.json index 8b2a9d93a4297..f8d5d55379cb2 100644 --- a/packages/gatsby-graphiql-explorer/package.json +++ b/packages/gatsby-graphiql-explorer/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-graphiql-explorer", - "version": "0.11.0-next.0", + "version": "0.11.0", "description": "GraphiQL IDE with custom features for Gatsby users", "main": "index.js", "scripts": { @@ -38,7 +38,7 @@ "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.5", "babel-loader": "^8.2.2", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "core-js": "^3.8.1", "cross-env": "^7.0.3", "css-loader": "^1.0.1", diff --git a/packages/gatsby-image/CHANGELOG.md b/packages/gatsby-image/CHANGELOG.md index fd0a69671cceb..26943804de96a 100644 --- a/packages/gatsby-image/CHANGELOG.md +++ b/packages/gatsby-image/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.11.0-next.0...gatsby-image@2.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-image + # [2.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-image@2.10.0-next.1...gatsby-image@2.11.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-image diff --git a/packages/gatsby-image/package.json b/packages/gatsby-image/package.json index 54cbfffdd223e..9b2c91a581db2 100644 --- a/packages/gatsby-image/package.json +++ b/packages/gatsby-image/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-image", "description": "Lazy-loading React image component with optional support for the blur-up effect.", - "version": "2.11.0-next.0", + "version": "2.11.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -15,7 +15,7 @@ "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@testing-library/react": "^9.5.0", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "jest-matchmedia-mock": "^1.1.0" }, diff --git a/packages/gatsby-legacy-polyfills/CHANGELOG.md b/packages/gatsby-legacy-polyfills/CHANGELOG.md index 02a66da200b43..089ae1c7d6a9c 100644 --- a/packages/gatsby-legacy-polyfills/CHANGELOG.md +++ b/packages/gatsby-legacy-polyfills/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-legacy-polyfills@0.7.0-next.0...gatsby-legacy-polyfills@0.7.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-legacy-polyfills + # [0.7.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-legacy-polyfills@0.6.0-next.0...gatsby-legacy-polyfills@0.7.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-legacy-polyfills diff --git a/packages/gatsby-legacy-polyfills/package.json b/packages/gatsby-legacy-polyfills/package.json index ef2f2ffe3328d..a2bd7fcf6ebeb 100644 --- a/packages/gatsby-legacy-polyfills/package.json +++ b/packages/gatsby-legacy-polyfills/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-legacy-polyfills", "description": "Polyfills for legacy browsers", - "version": "0.7.0-next.0", + "version": "0.7.0", "main": "dist/polyfills.js", "author": "Ward Peeters ", "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-legacy-polyfills#readme", diff --git a/packages/gatsby-link/CHANGELOG.md b/packages/gatsby-link/CHANGELOG.md index 036e1d13b5d91..e9e458c8ba0d9 100644 --- a/packages/gatsby-link/CHANGELOG.md +++ b/packages/gatsby-link/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.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-link@2.11.0-next.0...gatsby-link@2.11.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update minor and patch for gatsby-link ([#29175](https://github.com/gatsbyjs/gatsby/issues/29175)) ([7e07e2b](https://github.com/gatsbyjs/gatsby/commit/7e07e2b748c0195fc4a1e2b442c6836338d906dd)) + # [2.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-link@2.10.0-next.1...gatsby-link@2.11.0-next.0) (2021-01-18) ### Bug Fixes diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json index affc0480eb74d..ba30166618b8a 100644 --- a/packages/gatsby-link/package.json +++ b/packages/gatsby-link/package.json @@ -1,21 +1,21 @@ { "name": "gatsby-link", "description": "An enhanced Link component for Gatsby sites with support for resource prefetching", - "version": "2.11.0-next.0", + "version": "2.11.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { "@babel/runtime": "^7.12.5", - "@types/reach__router": "^1.3.6", + "@types/reach__router": "^1.3.7", "prop-types": "^15.7.2" }, "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@testing-library/react": "^9.5.0", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "peerDependencies": { diff --git a/packages/gatsby-page-utils/CHANGELOG.md b/packages/gatsby-page-utils/CHANGELOG.md index 6665ae0cc6eaf..8a8b065097750 100644 --- a/packages/gatsby-page-utils/CHANGELOG.md +++ b/packages/gatsby-page-utils/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. +# [0.9.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-page-utils@0.9.0-next.0...gatsby-page-utils@0.9.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update minor and patch for gatsby-page-utils ([#29176](https://github.com/gatsbyjs/gatsby/issues/29176)) ([3e2084b](https://github.com/gatsbyjs/gatsby/commit/3e2084b1a78339032dbbd31fbe93e7cbfc979cb6)) + # [0.9.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-page-utils@0.8.0-next.0...gatsby-page-utils@0.9.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-page-utils diff --git a/packages/gatsby-page-utils/package.json b/packages/gatsby-page-utils/package.json index fc919154395a7..a2470bff17219 100644 --- a/packages/gatsby-page-utils/package.json +++ b/packages/gatsby-page-utils/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-page-utils", - "version": "0.9.0-next.0", + "version": "0.9.0", "description": "Gatsby library that helps creating pages", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -24,9 +24,9 @@ "dependencies": { "@babel/runtime": "^7.12.5", "bluebird": "^3.7.2", - "chokidar": "^3.4.3", + "chokidar": "^3.5.1", "fs-exists-cached": "^1.0.0", - "gatsby-core-utils": "^1.10.0-next.0", + "gatsby-core-utils": "^1.10.0", "glob": "^7.1.6", "lodash": "^4.17.20", "micromatch": "^4.0.2" @@ -35,7 +35,7 @@ "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@types/micromatch": "^4.0.1", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "rimraf": "^3.0.2", "typescript": "^3.9.7" diff --git a/packages/gatsby-plugin-benchmark-reporting/CHANGELOG.md b/packages/gatsby-plugin-benchmark-reporting/CHANGELOG.md index dec17ed5e1c21..d741afc8750b7 100644 --- a/packages/gatsby-plugin-benchmark-reporting/CHANGELOG.md +++ b/packages/gatsby-plugin-benchmark-reporting/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. +# [0.9.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-benchmark-reporting@0.9.0-next.0...gatsby-plugin-benchmark-reporting@0.9.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update minor and patch for gatsby-plugin-benchmark-reporting ([#29177](https://github.com/gatsbyjs/gatsby/issues/29177)) ([98bb383](https://github.com/gatsbyjs/gatsby/commit/98bb383e1afe7afed60e10c84baab669c6543be2)) + # [0.9.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-benchmark-reporting@0.8.0-next.0...gatsby-plugin-benchmark-reporting@0.9.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-benchmark-reporting diff --git a/packages/gatsby-plugin-benchmark-reporting/package.json b/packages/gatsby-plugin-benchmark-reporting/package.json index e97ce5a3bc13f..20bad5342834c 100644 --- a/packages/gatsby-plugin-benchmark-reporting/package.json +++ b/packages/gatsby-plugin-benchmark-reporting/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-benchmark-reporting", "description": "Gatsby Benchmark Reporting", - "version": "0.9.0-next.0", + "version": "0.9.0", "author": "Peter van der Zee ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -16,10 +16,10 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0" + "babel-preset-gatsby-package": "^0.12.0" }, "dependencies": { - "fast-glob": "^3.2.4", + "fast-glob": "^3.2.5", "node-fetch": "^2.6.1", "uuid": "3.4.0" }, diff --git a/packages/gatsby-plugin-canonical-urls/CHANGELOG.md b/packages/gatsby-plugin-canonical-urls/CHANGELOG.md index a4352b48cc459..fce6b178917c6 100644 --- a/packages/gatsby-plugin-canonical-urls/CHANGELOG.md +++ b/packages/gatsby-plugin-canonical-urls/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-canonical-urls@2.10.0-next.0...gatsby-plugin-canonical-urls@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-canonical-urls + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-canonical-urls@2.9.0-next.0...gatsby-plugin-canonical-urls@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-canonical-urls diff --git a/packages/gatsby-plugin-canonical-urls/package.json b/packages/gatsby-plugin-canonical-urls/package.json index 660ee7802d7ad..c7e30beeac737 100644 --- a/packages/gatsby-plugin-canonical-urls/package.json +++ b/packages/gatsby-plugin-canonical-urls/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-canonical-urls", "description": "Add canonical links to HTML pages Gatsby generates.", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,7 +12,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-canonical-urls#readme", diff --git a/packages/gatsby-plugin-catch-links/CHANGELOG.md b/packages/gatsby-plugin-catch-links/CHANGELOG.md index 25b3ba8751874..d00c3273839b7 100644 --- a/packages/gatsby-plugin-catch-links/CHANGELOG.md +++ b/packages/gatsby-plugin-catch-links/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-catch-links@2.10.0-next.0...gatsby-plugin-catch-links@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-catch-links + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-catch-links@2.9.0-next.1...gatsby-plugin-catch-links@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-catch-links diff --git a/packages/gatsby-plugin-catch-links/package.json b/packages/gatsby-plugin-catch-links/package.json index 1a0ede78dbfc8..f99b0871c8c36 100644 --- a/packages/gatsby-plugin-catch-links/package.json +++ b/packages/gatsby-plugin-catch-links/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-catch-links", "description": "Intercepts local links from markdown and other non-react pages and does a client-side pushState to avoid the browser having to refresh the page.", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -13,7 +13,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-catch-links#readme", diff --git a/packages/gatsby-plugin-coffeescript/CHANGELOG.md b/packages/gatsby-plugin-coffeescript/CHANGELOG.md index 76a0d9a69ce96..66d88cf7bce49 100644 --- a/packages/gatsby-plugin-coffeescript/CHANGELOG.md +++ b/packages/gatsby-plugin-coffeescript/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-coffeescript@2.10.0-next.0...gatsby-plugin-coffeescript@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-coffeescript + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-coffeescript@2.9.0-next.0...gatsby-plugin-coffeescript@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-coffeescript diff --git a/packages/gatsby-plugin-coffeescript/package.json b/packages/gatsby-plugin-coffeescript/package.json index 4fe60d21bcd60..a23489d55800e 100644 --- a/packages/gatsby-plugin-coffeescript/package.json +++ b/packages/gatsby-plugin-coffeescript/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-coffeescript", "description": "Adds CoffeeScript support for Gatsby", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -18,7 +18,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-coffeescript#readme", diff --git a/packages/gatsby-plugin-create-client-paths/CHANGELOG.md b/packages/gatsby-plugin-create-client-paths/CHANGELOG.md index 58cde60a9a84b..ced168828af18 100644 --- a/packages/gatsby-plugin-create-client-paths/CHANGELOG.md +++ b/packages/gatsby-plugin-create-client-paths/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-create-client-paths@2.10.0-next.0...gatsby-plugin-create-client-paths@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-create-client-paths + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-create-client-paths@2.9.0-next.0...gatsby-plugin-create-client-paths@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-create-client-paths diff --git a/packages/gatsby-plugin-create-client-paths/package.json b/packages/gatsby-plugin-create-client-paths/package.json index 68bddfd77790f..486a7295bb3e9 100644 --- a/packages/gatsby-plugin-create-client-paths/package.json +++ b/packages/gatsby-plugin-create-client-paths/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-create-client-paths", "description": "Gatsby-plugin for creating paths that exist only on the client", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "scott.eckenthal@gmail.com", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,7 +12,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-create-client-paths#readme", diff --git a/packages/gatsby-plugin-cxs/CHANGELOG.md b/packages/gatsby-plugin-cxs/CHANGELOG.md index 920daa66e0297..296e500e83594 100644 --- a/packages/gatsby-plugin-cxs/CHANGELOG.md +++ b/packages/gatsby-plugin-cxs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-cxs@2.10.0-next.0...gatsby-plugin-cxs@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-cxs + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-cxs@2.9.0-next.1...gatsby-plugin-cxs@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-cxs diff --git a/packages/gatsby-plugin-cxs/package.json b/packages/gatsby-plugin-cxs/package.json index d9c16e866cd38..9aff6c0b752ca 100644 --- a/packages/gatsby-plugin-cxs/package.json +++ b/packages/gatsby-plugin-cxs/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-cxs", "description": "Gatsby plugin to add SSR support for ctx", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "Chen-Tai Hou ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,10 +12,10 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", "cxs": "^6.2.0", - "gatsby-plugin-utils": "^0.9.0-next.0" + "gatsby-plugin-utils": "^0.9.0" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-cxs#readme", "keywords": [ diff --git a/packages/gatsby-plugin-emotion/CHANGELOG.md b/packages/gatsby-plugin-emotion/CHANGELOG.md index b22ba75d95ce8..19ac556604935 100644 --- a/packages/gatsby-plugin-emotion/CHANGELOG.md +++ b/packages/gatsby-plugin-emotion/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [5.4.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-emotion@5.4.0-next.0...gatsby-plugin-emotion@5.4.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-emotion + # [5.4.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-emotion@5.3.0-next.1...gatsby-plugin-emotion@5.4.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-emotion diff --git a/packages/gatsby-plugin-emotion/package.json b/packages/gatsby-plugin-emotion/package.json index 12f7cccc98227..a6f1cf36c5a8b 100644 --- a/packages/gatsby-plugin-emotion/package.json +++ b/packages/gatsby-plugin-emotion/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-emotion", "description": "Gatsby plugin to add support for Emotion", - "version": "5.4.0-next.0", + "version": "5.4.0", "author": "Tegan Churchill ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -13,7 +13,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "peerDependencies": { diff --git a/packages/gatsby-plugin-facebook-analytics/CHANGELOG.md b/packages/gatsby-plugin-facebook-analytics/CHANGELOG.md index f5233c9c2cbab..475c4298b06a1 100644 --- a/packages/gatsby-plugin-facebook-analytics/CHANGELOG.md +++ b/packages/gatsby-plugin-facebook-analytics/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-facebook-analytics@2.11.0-next.0...gatsby-plugin-facebook-analytics@2.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-facebook-analytics + # [2.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-facebook-analytics@2.10.0-next.0...gatsby-plugin-facebook-analytics@2.11.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-facebook-analytics diff --git a/packages/gatsby-plugin-facebook-analytics/package.json b/packages/gatsby-plugin-facebook-analytics/package.json index 4dcbce8a19618..77de3176f9180 100644 --- a/packages/gatsby-plugin-facebook-analytics/package.json +++ b/packages/gatsby-plugin-facebook-analytics/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-facebook-analytics", "description": "Gatsby plugin to add facebook analytics onto a site", - "version": "2.11.0-next.0", + "version": "2.11.0", "author": "Yeison Daza ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,7 +12,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-facebook-analytics#readme", diff --git a/packages/gatsby-plugin-feed/CHANGELOG.md b/packages/gatsby-plugin-feed/CHANGELOG.md index d4268c4b51ceb..d2d8cbbb954f6 100644 --- a/packages/gatsby-plugin-feed/CHANGELOG.md +++ b/packages/gatsby-plugin-feed/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.13.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-feed@2.13.0-next.0...gatsby-plugin-feed@2.13.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-feed + # [2.13.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-feed@2.12.0-next.1...gatsby-plugin-feed@2.13.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-feed diff --git a/packages/gatsby-plugin-feed/package.json b/packages/gatsby-plugin-feed/package.json index c21389e73caa5..38c64f100048f 100644 --- a/packages/gatsby-plugin-feed/package.json +++ b/packages/gatsby-plugin-feed/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-feed", "description": "Creates an RSS feed for your Gatsby site.", - "version": "2.13.0-next.0", + "version": "2.13.0", "author": "Nicholas Young ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -11,14 +11,14 @@ "@hapi/joi": "^15.1.1", "common-tags": "^1.8.0", "fs-extra": "^8.1.0", - "gatsby-plugin-utils": "^0.9.0-next.0", + "gatsby-plugin-utils": "^0.9.0", "lodash.merge": "^4.6.2", "rss": "^1.2.2" }, "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-feed#readme", diff --git a/packages/gatsby-plugin-flow/CHANGELOG.md b/packages/gatsby-plugin-flow/CHANGELOG.md index 4075ca3010a6f..ebddb03199b13 100644 --- a/packages/gatsby-plugin-flow/CHANGELOG.md +++ b/packages/gatsby-plugin-flow/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-flow@1.10.0-next.0...gatsby-plugin-flow@1.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-flow + # [1.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-flow@1.9.0-next.0...gatsby-plugin-flow@1.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-flow diff --git a/packages/gatsby-plugin-flow/package.json b/packages/gatsby-plugin-flow/package.json index 256f3f04fd5ae..4184f440d2d27 100644 --- a/packages/gatsby-plugin-flow/package.json +++ b/packages/gatsby-plugin-flow/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-plugin-flow", - "version": "1.10.0-next.0", + "version": "1.10.0", "description": "Provides drop-in support for Flow by adding @babel/preset-flow.", "main": "index.js", "scripts": { @@ -30,7 +30,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "engines": { diff --git a/packages/gatsby-plugin-fullstory/CHANGELOG.md b/packages/gatsby-plugin-fullstory/CHANGELOG.md index f1e0ce6b323c0..05129682f37fb 100644 --- a/packages/gatsby-plugin-fullstory/CHANGELOG.md +++ b/packages/gatsby-plugin-fullstory/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-fullstory@2.10.0-next.0...gatsby-plugin-fullstory@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-fullstory + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-fullstory@2.9.0-next.0...gatsby-plugin-fullstory@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-fullstory diff --git a/packages/gatsby-plugin-fullstory/package.json b/packages/gatsby-plugin-fullstory/package.json index 1c595faf00097..2037185eaf24b 100644 --- a/packages/gatsby-plugin-fullstory/package.json +++ b/packages/gatsby-plugin-fullstory/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-plugin-fullstory", - "version": "2.10.0-next.0", + "version": "2.10.0", "description": "Plugin to add the tracking code for Fullstory.com", "main": "index.js", "scripts": { @@ -29,7 +29,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "peerDependencies": { diff --git a/packages/gatsby-plugin-glamor/CHANGELOG.md b/packages/gatsby-plugin-glamor/CHANGELOG.md index 89fc0362e371d..19fc2144769ab 100644 --- a/packages/gatsby-plugin-glamor/CHANGELOG.md +++ b/packages/gatsby-plugin-glamor/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-glamor@2.10.0-next.0...gatsby-plugin-glamor@2.10.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-glamor + # [2.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-glamor@2.9.0-next.1...gatsby-plugin-glamor@2.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-glamor diff --git a/packages/gatsby-plugin-glamor/package.json b/packages/gatsby-plugin-glamor/package.json index 7c5b810d83d58..2d4cd84af9e13 100644 --- a/packages/gatsby-plugin-glamor/package.json +++ b/packages/gatsby-plugin-glamor/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-glamor", "description": "Gatsby plugin to add support for Glamor", - "version": "2.10.0-next.0", + "version": "2.10.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,9 +12,9 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", - "gatsby-plugin-utils": "^0.9.0-next.0" + "gatsby-plugin-utils": "^0.9.0" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-glamor#readme", "keywords": [ diff --git a/packages/gatsby-plugin-google-analytics/CHANGELOG.md b/packages/gatsby-plugin-google-analytics/CHANGELOG.md index cd09920e951a6..2aee9ce318831 100644 --- a/packages/gatsby-plugin-google-analytics/CHANGELOG.md +++ b/packages/gatsby-plugin-google-analytics/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-analytics@2.11.0-next.0...gatsby-plugin-google-analytics@2.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-google-analytics + # [2.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-analytics@2.10.0-next.1...gatsby-plugin-google-analytics@2.11.0-next.0) (2021-01-18) ### Bug Fixes diff --git a/packages/gatsby-plugin-google-analytics/package.json b/packages/gatsby-plugin-google-analytics/package.json index edc34c4bbd0a7..d857073d276fd 100644 --- a/packages/gatsby-plugin-google-analytics/package.json +++ b/packages/gatsby-plugin-google-analytics/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-google-analytics", "description": "Gatsby plugin to add google analytics onto a site", - "version": "2.11.0-next.0", + "version": "2.11.0", "author": "Kyle Mathews ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -14,7 +14,7 @@ "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@testing-library/react": "^9.5.0", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics#readme", diff --git a/packages/gatsby-plugin-google-gtag/CHANGELOG.md b/packages/gatsby-plugin-google-gtag/CHANGELOG.md index e5730293f3c13..6e2898154f30a 100644 --- a/packages/gatsby-plugin-google-gtag/CHANGELOG.md +++ b/packages/gatsby-plugin-google-gtag/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.8.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-gtag@2.8.0-next.0...gatsby-plugin-google-gtag@2.8.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-google-gtag + # [2.8.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-gtag@2.7.0-next.0...gatsby-plugin-google-gtag@2.8.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-google-gtag diff --git a/packages/gatsby-plugin-google-gtag/package.json b/packages/gatsby-plugin-google-gtag/package.json index 29b2b5ec7686b..604aae8b575b3 100644 --- a/packages/gatsby-plugin-google-gtag/package.json +++ b/packages/gatsby-plugin-google-gtag/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-google-gtag", "description": "Gatsby plugin to add google gtag onto a site", - "version": "2.8.0-next.0", + "version": "2.8.0", "author": "Tyler Buchea ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -13,7 +13,7 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-gtag#readme", diff --git a/packages/gatsby-plugin-google-tagmanager/CHANGELOG.md b/packages/gatsby-plugin-google-tagmanager/CHANGELOG.md index 4f864933d388c..f312fe5fdc1f2 100644 --- a/packages/gatsby-plugin-google-tagmanager/CHANGELOG.md +++ b/packages/gatsby-plugin-google-tagmanager/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.11.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-tagmanager@2.11.0-next.0...gatsby-plugin-google-tagmanager@2.11.0) (2021-02-02) + +**Note:** Version bump only for package gatsby-plugin-google-tagmanager + # [2.11.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-google-tagmanager@2.10.0-next.1...gatsby-plugin-google-tagmanager@2.11.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-google-tagmanager diff --git a/packages/gatsby-plugin-google-tagmanager/package.json b/packages/gatsby-plugin-google-tagmanager/package.json index 21d5809cd2944..c7f3cf5f1874d 100644 --- a/packages/gatsby-plugin-google-tagmanager/package.json +++ b/packages/gatsby-plugin-google-tagmanager/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-plugin-google-tagmanager", "description": "Gatsby plugin to add google tagmanager onto a site", - "version": "2.11.0-next.0", + "version": "2.11.0", "author": "Thijs Koerselman ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" @@ -12,9 +12,9 @@ "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3", - "gatsby-plugin-utils": "^0.9.0-next.0" + "gatsby-plugin-utils": "^0.9.0" }, "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-tagmanager#readme", "keywords": [ diff --git a/packages/gatsby-plugin-graphql-config/CHANGELOG.md b/packages/gatsby-plugin-graphql-config/CHANGELOG.md index d3fec2b820ee7..996b42cf55d83 100644 --- a/packages/gatsby-plugin-graphql-config/CHANGELOG.md +++ b/packages/gatsby-plugin-graphql-config/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. +# [0.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-graphql-config@0.7.0-next.0...gatsby-plugin-graphql-config@0.7.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update minor and patch for gatsby-plugin-graphql-config ([#29178](https://github.com/gatsbyjs/gatsby/issues/29178)) ([fcb65e2](https://github.com/gatsbyjs/gatsby/commit/fcb65e2e52135b0866277df35dec40f35f7873d1)) + # [0.7.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-graphql-config@0.6.0-next.0...gatsby-plugin-graphql-config@0.7.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-graphql-config diff --git a/packages/gatsby-plugin-graphql-config/package.json b/packages/gatsby-plugin-graphql-config/package.json index 44713d3986b09..42d1baccdef99 100644 --- a/packages/gatsby-plugin-graphql-config/package.json +++ b/packages/gatsby-plugin-graphql-config/package.json @@ -1,18 +1,18 @@ { "name": "gatsby-plugin-graphql-config", "description": "Gatsby plugin to write out a graphql-config with develop process endpoint configured", - "version": "0.7.0-next.0", + "version": "0.7.0", "author": "Rikki Schulte ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" }, "dependencies": { - "fs-extra": "^9.0.1" + "fs-extra": "^9.1.0" }, "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "peerDependencies": { diff --git a/packages/gatsby-plugin-guess-js/CHANGELOG.md b/packages/gatsby-plugin-guess-js/CHANGELOG.md index 31b882d76ce62..de33133fec615 100644 --- a/packages/gatsby-plugin-guess-js/CHANGELOG.md +++ b/packages/gatsby-plugin-guess-js/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. +# [1.10.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-guess-js@1.10.0-next.0...gatsby-plugin-guess-js@1.10.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update minor and patch for gatsby-plugin-guess-js ([#28712](https://github.com/gatsbyjs/gatsby/issues/28712)) ([0f99174](https://github.com/gatsbyjs/gatsby/commit/0f9917414b828fa6cc1b6b1607ba90b5a07187e7)) + # [1.10.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-guess-js@1.9.0-next.0...gatsby-plugin-guess-js@1.10.0-next.0) (2021-01-18) **Note:** Version bump only for package gatsby-plugin-guess-js diff --git a/packages/gatsby-plugin-guess-js/package.json b/packages/gatsby-plugin-guess-js/package.json index 81f210bc234c4..b5a2970c5c260 100644 --- a/packages/gatsby-plugin-guess-js/package.json +++ b/packages/gatsby-plugin-guess-js/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-plugin-guess-js", - "version": "1.10.0-next.0", + "version": "1.10.0", "description": "Gatsby plugin providing drop-in integration with Guess.js to enabling using machine learning and analytics data to power prefetching", "main": "index.js", "scripts": { @@ -29,12 +29,12 @@ "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.5", - "guess-webpack": "^0.4.20" + "guess-webpack": "^0.4.22" }, "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", - "babel-preset-gatsby-package": "^0.12.0-next.0", + "babel-preset-gatsby-package": "^0.12.0", "cross-env": "^7.0.3" }, "peerDependencies": { diff --git a/packages/gatsby-plugin-image/CHANGELOG.md b/packages/gatsby-plugin-image/CHANGELOG.md index ca2e9ac3e849e..94653707c3c9d 100644 --- a/packages/gatsby-plugin-image/CHANGELOG.md +++ b/packages/gatsby-plugin-image/CHANGELOG.md @@ -3,6 +3,35 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-image@0.7.0-next.1...gatsby-plugin-image@0.7.0) (2021-02-02) + +### Bug Fixes + +- **deps:** update dependency chokidar to ^3.5.1 ([#28970](https://github.com/gatsbyjs/gatsby/issues/28970)) ([c206d66](https://github.com/gatsbyjs/gatsby/commit/c206d66d9e67896ebc85c505ea1a3566f6479f5e)) +- **gatsby-plugin-image:** Correct layout proptypes in StaticImage ([#29298](https://github.com/gatsbyjs/gatsby/issues/29298)) ([#29299](https://github.com/gatsbyjs/gatsby/issues/29299)) ([1dec045](https://github.com/gatsbyjs/gatsby/commit/1dec0452e8ead69e797ced64d562e46c1a1f6772)) +- **gatsby-plugin-image:** Update types ([#29226](https://github.com/gatsbyjs/gatsby/issues/29226)) ([7a589c0](https://github.com/gatsbyjs/gatsby/commit/7a589c0a940fe1859517401a57cf4c22010f2e8e)) +- **gatsby-plugin-image:** Use ESM for gatsby-browser, as CJS was causing errors ([#29235](https://github.com/gatsbyjs/gatsby/issues/29235)) ([552afa9](https://github.com/gatsbyjs/gatsby/commit/552afa930a3d6e4ad719b69605a5eb39359fd7e5)) + +### Features + +- **gatsby-plugin-image:** Add useArtDirection hook ([#29231](https://github.com/gatsbyjs/gatsby/issues/29231)) ([c2f0298](https://github.com/gatsbyjs/gatsby/commit/c2f0298b62d4a27ec6ffb1a93e9a18d7d057e864)) + +# [0.7.0-next.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-image@0.7.0-next.0...gatsby-plugin-image@0.7.0-next.1) (2021-01-26) + +### Bug Fixes + +- **gatsby-plugin-image:** Add missing files ([#29185](https://github.com/gatsbyjs/gatsby/issues/29185)) ([0ac0ac8](https://github.com/gatsbyjs/gatsby/commit/0ac0ac840957b92be447d61e46b1b8bcd2bcfacd)) +- **gatsby-plugin-image:** Fixes to plugin utils types ([#29204](https://github.com/gatsbyjs/gatsby/issues/29204)) ([b236f49](https://github.com/gatsbyjs/gatsby/commit/b236f4916721c8e5fa1465cca7b6c4b8c26170c8)) +- **gatsby-plugin-image:** Handle breakpoints and auto-format in plugin utils ([#29187](https://github.com/gatsbyjs/gatsby/issues/29187)) ([25912f0](https://github.com/gatsbyjs/gatsby/commit/25912f00b452c4df04ba950efa90cdf12e73818e)) +- **gatsby-plugin-image:** pass down missing sizes attribute to ([#29092](https://github.com/gatsbyjs/gatsby/issues/29092)) ([2e42197](https://github.com/gatsbyjs/gatsby/commit/2e42197025e2e1bac06c721c3cc44135bf8ef526)) +- **gatsby-plugin-image:** Pass sizes for source ([#29192](https://github.com/gatsbyjs/gatsby/issues/29192)) ([0ddbbfe](https://github.com/gatsbyjs/gatsby/commit/0ddbbfe7ac03d5e6281b1d5e9f37d7216a48b079)) +- **gatsby-plugin-image:** Use inline-block in class so users can override ([#29148](https://github.com/gatsbyjs/gatsby/issues/29148)) ([f945049](https://github.com/gatsbyjs/gatsby/commit/f9450498daa12921085cf60171f4f45b8012cf5f)) + +### Features + +- **gatsby-plugin-image:** Add support for backgroundColor in sharp ([#29141](https://github.com/gatsbyjs/gatsby/issues/29141)) ([eb2bede](https://github.com/gatsbyjs/gatsby/commit/eb2bede99328e149b34a7e893c870094fc1ae6de)) +- **gatsby-plugin-image:** object-fit polyfill for IE ([#29072](https://github.com/gatsbyjs/gatsby/issues/29072)) ([3b4e8a5](https://github.com/gatsbyjs/gatsby/commit/3b4e8a55b5d1a7d2832f7037390ec447086beb83)) + # [0.7.0-next.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-image@0.6.0-next.1...gatsby-plugin-image@0.7.0-next.0) (2021-01-18) ### Bug Fixes diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md index ba828df196871..601646fb5a518 100644 --- a/packages/gatsby-plugin-image/README.md +++ b/packages/gatsby-plugin-image/README.md @@ -1,356 +1,206 @@ # gatsby-plugin-image (beta) -This plugin is a replacement for gatsby-image. It adds [static images](#staticimage), and a [new higher-performance gatsby-image component](#gatsbyimage). It also adds [a new GraphQL resolver](#graphql-resolver) to gatsby-transformer-sharp. +_The new Gatsby Image plugin is currently in beta, but you can try it out now_ + +Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you! + +For full documentation on all configuration options, see [the Gatsby Image Plugin reference guide](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/) ## Contents -- [StaticImage](#staticimage) - the new static image component -- [GatsbyImage](#gatsbyimage) - a high-performance gatsby-image component -- [gatsbyImageData](#graphql-resolver) - a simpler GraphQL API +- [Installation](#installation) +- [Using the Gatsby Image components](#using-the-gatsby-image-components) + - [Static images](#static-images) + - [Dynamic images](#dynamic-images) +- [Migrating to gatsby-plugin-image](#migrating) -## Usage +## Installation -1. Install `gatsby-plugin-image` and `gatsby-plugin-sharp`: +1. Install `gatsby-plugin-image` and `gatsby-plugin-sharp`. Additionally install `gatsby-source-filesystem` if you are using static images, and `gatsby-transformer-sharp` if you are using dynamic images. ```shell -npm install gatsby-plugin-image gatsby-plugin-sharp +npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp ``` -If you're using the new `GatsbyImage` in addition to `StaticImage`, you'll also want to install `gatsby-transformer-sharp`. - -2. Upgrade `gatsby` to at least `2.24.78`. +1. Upgrade `gatsby` to at least `2.24.78`. -3. Add the plugins to your `gatsby-config.js`: +2. Add the plugins to your `gatsby-config.js`: ```javascript module.exports = { plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp`, - // `gatsby-transformer-sharp` + `gatsby-transformer-sharp`, // Needed for dynamic images ], } ``` -# StaticImage - -This component is a new, simpler way to use Gatsby's image processing tools and components without needing to write GraphQL queries. It is designed for static images such as logos rather than ones loaded dynamically from a CMS. - -```js -import React from "react" -import { StaticImage } from "gatsby-plugin-image" - -export const Dino = () => ( - -) -``` - -The `src` prop is relative to the source file, like in static HTML. - -You can pass the same options as those available via [`gatsbyImageData`](#graphql-resolver) queries: - -```js -import React from "react" -import { StaticImage } from "gatsby-plugin-image" - -export const Dino = () => ( - -) -``` - -### Are there restrictions to how this is used? - -Because the images still need to be resized during build, the props must be able to be statically-analyzed at build time. You can't pass them as props from outside the component, or use the results of function calls, for example. - -This does not work: - -```js -// ⚠️ Doesn't work - -({ logo }) => -``` - -...and nor does this: - -```js -// ⚠️ Doesn't work - -() => { - const width = getTheWidthFromSomewhere(); - return -} -``` - -You can use variables and expressions if they're in the scope of the file, e.g.: - -```js -//OK -() => { - const width = 300 - return -} -``` - -```js -//Also OK - -const width = 300 - -() => { - const height = width * 16 / 9 - return -} -``` - -### API - -The only required prop is `src`. The default type is `constrained`. The other props match those of [the new GatsbyImage component](#gatsbyimage). You can also pass in options which are forwarded to [`gatsbyImageData`](#graphql-resolver). - -## GatsbyImage - -Speedy, optimized images without the work. +## Using the Gatsby Image components -GatsbyImage is a React component specially designed to give your users a great image experience. It combines speed and best practices. +### Deciding which component to use -Note: GatsbyImage is not a drop-in replacement for ``. It's optimized for fixed width/height images and images that stretch the full-width of a container. +The Gatsby Image plugin includes two image components: one for static and one for dynamic images. An effective way to decide which you need to is to ask yourself: _"will this image be the same every time the component or template is used?"_. If it will always be the same, then use `StaticImage`. If it will change, whether through data coming from a CMS or different values passed to a component each time you use it, then it is a dynamic image and you should use the `GatsbyImage` component. -## Table of Contents +### Static images -- [Problem](#problem) -- [Solution](#solution) -- [How to use](#how-to-use) -- [Types of Responsive Images](#three-types-of-responsive-images) -- [Gatsby Image Props](#gatsby-plugin-image-props) +If you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the `StaticImage` component. The image can be a local file in your project or an image hosted on a remote server. Any remote images are downloaded and resized at build time. -## Problem +1. **Add the image to your project.** -Large, unoptimized images dramatically slow down your site. + If you are using a local image, copy it into the project. A folder such as `src/images` is a good choice. -But creating optimized images for websites has long been a thorny problem. -Ideally you would: +2. **Add the `StaticImage` component to your template.** -- Resize large images to the size needed by your design. -- Generate multiple smaller images so smartphones and tablets don't download - desktop-sized images. -- Strip all unnecessary metadata and optimize JPEG and PNG compression. -- Efficiently lazy load images to speed initial page load and save bandwidth. -- Use the "blur-up" technique or a - "[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)" SVG to - show a preview of the image while it loads. -- Hold the image position so your page doesn't jump while images load. + Import the component, then set the `src` prop to point to the image you added earlier. The path is relative to the source file itself. If your component file was `src/components/dino.js`, then you would load the image like this: -Doing this consistently across a site feels like a task that can never be completed. You manually -optimize your images and then… several images are swapped in at the last minute -or a design-tweak shaves 100px of width off your images. + ```jsx + import { StaticImage } from "gatsby-plugin-image" -Most solutions involve a lot of manual labor and bookkeeping to ensure every -image is optimized. + export function Dino() { + return + } + ``` -This isn't ideal. Optimized images should be easy and the default. + If you are using a remote image, pass the image URL in the `src` prop: -## Solution + ```jsx + import { StaticImage } from "gatsby-plugin-image" -With Gatsby, we can make images way _way_ better. + export function Kitten() { + return + } + ``` -`gatsby-plugin-image` is designed to work seamlessly with Gatsby's native image -processing capabilities powered by GraphQL and Sharp. To produce perfect images, -you need only: + When you build your site, the `StaticImage` component will load the image from your filesystem or from the remote URL, and it will generate all the sizes and formats that you need to support a responsive image. -1. Import `{ GatsbyImage } from "gatsby-plugin-image"`. -2. Write a GraphQL query with all necessary fields needed by `gatsby-plugin-image`. + Because the image is loaded at build time, you cannot pass the filename in as a prop, or otherwise generate it outside of the component. It should either be a static string, or a local variable in the component's scope. -The GraphQL query creates multiple thumbnails with optimized JPEG and PNG -compression. The `gatsby-plugin-image` component automatically sets up the "blur-up" -effect as well as lazy loading of images further down the screen. + **Important:** Remote images are downloaded and resized at build time. If the image is changed on the other server, it will not be updated on your site until you rebuild. -Make sure you have set up a source plugin, so your images are available in GraphQL queries. For example, if your images live in a project folder on the local filesystem, you would set up `gatsby-source-filesystem` in `gatsby-config.js` like so: +3. **Configure the image.** -```js -const path = require(`path`) + You configure the image by passing props to the `` component. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options [in the API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image). -module.exports = { - plugins: [ - { - resolve: `gatsby-source-filesystem`, - options: { - name: `images`, - path: path.join(__dirname, `src`, `images`), - }, - }, - `gatsby-plugin-sharp`, - `gatsby-transformer-sharp`, - `gatsby-plugin-image`, - ], -} -``` - -## How to use - -This is what a component using `gatsby-plugin-image` looks like: + ```jsx + import { StaticImage } from "gatsby-plugin-image" -```jsx -import * as React from "react" -import { graphql } from "gatsby" -import { GatsbyImage, getImage } from "gatsby-plugin-image" + export function Dino() { + return ( + + ) + } + ``` -export default ({ data }) => { - // You can use the helper function `getImage`, which is equivalent to: - // const imageData = data.file.childImageSharp.gatsbyImageData - const imageData = getImage(data.file) + This component renders a 200px by 200px image of a dinosaur. Before loading it will have a blurred, low-resolution placeholder. It uses the `"fixed"` layout, which means the image does not resize with its container. - return ( -
-

Hello GatsbyImage

- -
- ) -} - -export const query = graphql` - query { - file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) { - childImageSharp { - gatsbyImageData(layout: FIXED, width: 125, height: 125) - } - } - } -` -``` +#### Restrictions on using `StaticImage` -If you need the image `src` directly you can import the `getSrc` helper function from `gatsby-plugin-image`. That function is equivalent to `data.file.childImageSharp.gatsbyImageData.images.fallback.src`. Note that `src` will be undefined if a .png or .jpg image is not available. +There are a few technical restrictions to the way you can pass props into `StaticImage`. Most importantly, you can't use any of the parent component's props. For more information, refer to the [Gatsby Image plugin reference guide](/docs/reference/built-in-components/gatsby-plugin-image#restrictions-on-using-staticimage). If you find yourself wishing you could use a prop passed from a parent for the image `src` then it's likely that you should be using a dynamic image. -### Upgrading from the gatsby-image@2 +### Dynamic images -We've included a codemod to help you migrate to the new `gatsby-plugin-image` API. +If you need to have dynamic images (such as if they are coming from a CMS), you can load them via GraphQL and display them using the `GatsbyImage` component. -```shell -npx gatsby-codemods gatsby-plugin-image -``` +1. **Add the image to your page query.** -`path` is not required and will default to the directory you're currently in. + Any GraphQL File object that includes an image will have a `childImageSharp` field that you can use to query the image data. The exact data structure will vary according to your data source, but the syntax is like this: -Note that you cannot pass additional flags to this command. It will automatically run the codemod against file extensions `js, jsx, ts, tsx` and ignore the `node_modules`, `.cache` and `public` directories of your project. + ```graphql + query { + blogPost(id: { eq: $Id }) { + title + body + avatar { + childImageSharp { + gatsbyImageData(width: 200) + } + } + } + } + ``` -**If you have a custom babel config for your site, run in the root directory, otherwise `./src` is sufficient.** +2. **Configure your image.** -Note that jscodeshift tries to match the formatting of your existing code, but you may need to use a tool like [prettier](https://prettier.io/) to ensure consistency after running these codemods. + For all the configuration options, see the [Gatsby Image plugin reference guide](/docs/reference/built-in-components/gatsby-plugin-image). -If you need to run with custom flags, you can install [jscodeshift](https://github.com/facebook/jscodeshift) globally and `gatsby-codemods` in your project. Then `jscodeshift -t node_modules/gatsby-codemods/transforms/gatsby-plugin-image.js .` will transform your current directory and you can pass any valid jscodeshift flags. + You configure the image by passing arguments to the `gatsbyImageData` resolver. You can change the size and layout, as well as settings such as the type of placeholder used when lazy loading. There are also advanced image processing options available. You can find the full list of options in the API docs. -After the code is modified, be sure to install and configure everything needed to use `gatsby-plugin-image.` - -1. Install this package + ```graphql + query { + blogPost(id: { eq: $Id }) { + title + body + author + avatar { + childImageSharp { + gatsbyImageData( + width: 200 + placeholder: BLURRED + formats: [AUTO, WEBP, AVIF] + ) + } + } + } + } + ``` + +3. **Display the image.** + + You can then use the `GatbsyImage` component to display the image on the page. The `getImage()` function is an optional helper to make your code easier to read. It takes a `File` and returns `file.childImageSharp.gatsbyImageData`, which can be passed to the `GatsbyImage` component. + + ```jsx + import { graphql } from "gatsby" + import { GatsbyImage, getImage } from "gatsby-plugin-image" + + function BlogPost({ data }) { + const image = getImage(data.blogPost.avatar) + return ( +
+

{data.blogPost.title}

+ +

{data.blogPost.body}

+
+ ) + } + + export const pageQuery = graphql` + query { + blogPost(id: { eq: $Id }) { + title + body + author + avatar { + childImageSharp { + gatsbyImageData( + width: 200 + placeholder: BLURRED + formats: [AUTO, WEBP, AVIF] + ) + } + } + } + } + ` + ``` + +For full APIs, see [Gatsby Image plugin reference guide](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image). + +## Migrating + +_Main article: **[Migrating from gatsby-image to gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide)**_ + +If your site uses the old `gatsby-image` component, you can use a codemod to help you migrate to the new Gatsby Image components. This can update the code for most sites. To use the codemod, run this command in the root of your site: ```shell -npm install gatsby-plugin-image -``` - -2. Add `gatsby-plugin-image` to your `gatsby-config.js` file. - -3. Make sure `gatsby-transformer-sharp` and `gatsby-plugin-sharp` are updated to the latest versions. - -## Three types of responsive images - -There are three types of responsive images supported by gatsby-image. - -1. Images that have a _fixed_ width and height -1. Images that stretch across a _fluid_ container -1. Images that stretch across a container but are _constrained_ to a maximum width - -In the first scenario, you want to vary the image's size for different screen -resolutions -- in other words, create retina images. - -For the second and third scenario, you want to create multiple sizes of thumbnails for -devices with widths stretching from smartphone to wide desktop monitors. - -To decide between the two, ask yourself: "do I know what the exact size of this image -will be?" If yes, it's "fixed". If no and its width and/or height need to -vary depending on the size of the screen, then it's "fullWidth". If you want it to shrink -to fit on smaller screens, but not to expand larger than a maximum, then use "constrained" - -In Gatsby's GraphQL implementation, you specify the type of image with the `layout` argument - -## `GatsbyImage` props - -| Name | Type | Description | -| ----- | --------------- | -------------------------------------------------------------------------------------------------------------------------- | -| image | object | The image data object returned from a GraphQL query | -| alt | string | Passed to the `img` element. Defaults to an empty string | -| sizes | string | An HTML "sizes" argument, which is passed-though to the image. Can be left blank, when it will be calculated automatically | -| as | React Component | The component that wraps the Gatsby Image. Default is `div` | - -# GraphQL resolver - -We have added a new `gatsbyImageData` resolver to the `ImageSharp` node. Unlike the existing `fixed` and `fluid` resolvers, this returns a -JSON type, meaning you don't specify the individual fields, but are instead given the whole object. This is because the object is then passed into the `` component. The API is like this: - -```graphql -coverImage: file(relativePath: { eq: "plant.jpg" }) { - childImageSharp { - gatsbyImageData(width: 720, layout: CONSTRAINED, placeholder: TRACED_SVG) - } -} -``` - -You then use the data like this: - -```jsx -import { GatsbyImage, getImage } from "gatsby-plugin-image" - -export function Plant({ data }) { - const imageData = getImage(data.coverImage) - return -} +npx gatsby-codemods gatsby-plugin-image ``` -The optional helper function `getImage` takes a file node and returns `file?.childImageSharp?.gatsbyImageData` - -## API - -These arguments can be passed to the `gatsbyImageData()` resolver: - -- **width**: The display width of the generated image for layout = FIXED, if layout = CONSTRAINED it's the maximum display width. Ignored for FULL_WIDTH images. -- **height**: If set, the height of the generated image. If omitted, it is calculated from the supplied width, matching the aspect ratio of the source image. Ignored for FULL_WIDTH images. -- **aspectRatio**: Forces an image to the specified aspect ratio, cropping if needed. The value is a number, but can be clearer to express as a fraction, e.g. `aspectRatio={16/9}` -- **placeholder**: Format of generated placeholder image. - - `DOMINANT_COLOR`: (default) A solid color, calculated from the dominant color of the image. - - `BLURRED`: a blurred, low resolution image, encoded as a base64 data URI - - `TRACED_SVG`: a single-color traced SVG of the image. - - `NONE`: no placeholder. Set "background" to use a fixed background color. -- **layout**: The layout for the image. - - `CONSTRAINED`: (default) Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size. - - `FIXED`: A static image size, that does not resize according to the screen width - - `FULL_WIDTH`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen. -- **sizes**: The "[sizes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" attribute, passed to the `` tag. This describes the display size of the image. This does not affect the generated images, but is used by the browser to decide which images to download. You can leave this blank for fixed images, or if the responsive image container will be the full width of the screen. In these cases we will generate an appropriate value. If, however, you are generating responsive images that are not the full width of the screen, you should provide a sizes property for best performance. You can alternatively pass this value to the component. -- **formats**: an array of file formats to generate. The default is `[AUTO, WEBP]`, which means it will generate images in the same format as the source image, as well as in the next-generation [WebP](https://developers.google.com/speed/webp) format. We strongly recommend you do not change this option, as doing so will affect performance scores. -- **quality**: The default quality. This is overridden by any format-specific options -- **outputPixelDensities**: A list of image pixel densities to generate, for high-resolution (retina) screens. It will never generate images larger than the source, and will always include a 1x image. - Default is `[ 0.25, 0.5, 1, 2 ]`, for `CONSTRAINED` images, and `[ 1, 2 ]` for `FIXED`. Ignored for `FULL_WIDTH`, which uses `breakpoints` instead. -- **breakpoints**: Output widths to generate for full width images. Default is `[750, 1080, 1366, 1920]`, which is suitable for most common device resolutions. It will never generate an image larger than the source image. The browser will automatically choose the most appropriate. -- **blurredOptions**: Options for the low-resolution placeholder image. Set placeholder to `BLURRED` to use this - - width - - toFormat -- **tracedSVGOptions**: Options for traced placeholder SVGs. You also should set placeholder to `TRACED_SVG`. -- **jpgOptions**: Options to pass to sharp when generating JPG images. - - quality - - progressive -- **pngOptions**: Options to pass to sharp when generating PNG images. - - quality - - compressionSpeed -- **webpOptions**: Options to pass to sharp when generating WebP images. - - quality -- **transformOptions**: Options to pass to sharp to control cropping and other image manipulations. - - grayscale - - duotone - - rotate - - trim - - cropFocus - - fit -- **background**: Background color applied to the wrapper. Also passed to sharp to use as a background when "letterboxing" an image to another aspect ratio. +This will convert all GraphQL queries and components to use the new plugin. For more details, see [the migration guide](https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide). diff --git a/packages/gatsby-plugin-image/gatsby-browser.js b/packages/gatsby-plugin-image/gatsby-browser.js index 128583a12d676..2e00cd32ff4f0 100644 --- a/packages/gatsby-plugin-image/gatsby-browser.js +++ b/packages/gatsby-plugin-image/gatsby-browser.js @@ -1,11 +1,6 @@ -const React = require("react") +import React from "react" +import { LaterHydrator } from "." -const { LaterHydrator } = require(".") - -exports.wrapRootElement = ({ element }) => { - return ( - - {element} - - ) +export function wrapRootElement({ element }) { + return {element} } \ No newline at end of file diff --git a/packages/gatsby-plugin-image/graphql-utils.d.ts b/packages/gatsby-plugin-image/graphql-utils.d.ts new file mode 100644 index 0000000000000..322c7675a24a9 --- /dev/null +++ b/packages/gatsby-plugin-image/graphql-utils.d.ts @@ -0,0 +1 @@ +export * from "./dist/src/resolver-utils" diff --git a/packages/gatsby-plugin-image/graphql-utils.js b/packages/gatsby-plugin-image/graphql-utils.js index d91f29ee3492b..d026482940c1e 100644 --- a/packages/gatsby-plugin-image/graphql-utils.js +++ b/packages/gatsby-plugin-image/graphql-utils.js @@ -1 +1 @@ -export * from "./dist/resolver-utils" \ No newline at end of file +module.exports = require("./dist/resolver-utils") \ No newline at end of file diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json index 8c942f83e334f..c3d88db89c8fb 100644 --- a/packages/gatsby-plugin-image/package.json +++ b/packages/gatsby-plugin-image/package.json @@ -1,9 +1,9 @@ { "name": "gatsby-plugin-image", - "version": "0.7.0-next.0", + "version": "0.7.0", "scripts": { "build": "npm-run-all -s clean -p build:*", - "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts", + "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts -d --declarationDir dist/src", "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --no-compress --external=common-tags,react --no-sourcemap", "build:server": "microbundle -f cjs,es --jsx React.createElement --define SERVER=true", "build:browser": "microbundle -i src/index.browser.ts -f cjs,modern,es --jsx React.createElement -o dist/gatsby-image.browser --define SERVER=false", @@ -33,7 +33,10 @@ "files": [ "dist/*", "gatsby-node.js", - "gatsby-ssr.js" + "gatsby-ssr.js", + "gatsby-browser.js", + "graphql-utils.js", + "graphql-utils.d.ts" ], "types": "dist/src/index.d.ts", "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image#readme", @@ -42,7 +45,7 @@ "@babel/core": "^7.12.3", "@testing-library/react": "^11.2.2", "@types/babel__core": "^7.1.12", - "@types/babel__traverse": "^7.0.15", + "@types/babel__traverse": "^7.11.0", "@types/fs-extra": "^8.1.1", "@types/node": "^14.10.2", "@types/prop-types": "^15.7.3", @@ -56,7 +59,7 @@ "do-sync": "^2.2.0", "microbundle": "^0.12.4", "npm-run-all": "^4.1.5", - "postcss": "^8.1.6", + "postcss": "^8.2.4", "terser": "^5.3.8", "typescript": "^3.9.7" }, @@ -72,11 +75,12 @@ "@babel/parser": "^7.12.5", "@babel/traverse": "^7.12.5", "babel-jsx-utils": "^1.0.1", - "babel-plugin-remove-graphql-queries": "^2.16.0-next.0", + "babel-plugin-remove-graphql-queries": "^2.16.0", "camelcase": "^5.3.1", - "chokidar": "^3.4.3", + "chokidar": "^3.5.1", "fs-extra": "^8.1.0", - "gatsby-core-utils": "^1.10.0-next.0", + "gatsby-core-utils": "^1.10.0", + "objectFitPolyfill": "^2.3.0", "prop-types": "^15.7.2" }, "repository": { diff --git a/packages/gatsby-plugin-image/src/babel-helpers.ts b/packages/gatsby-plugin-image/src/babel-helpers.ts index 310b5e6242257..da2028a7c0319 100644 --- a/packages/gatsby-plugin-image/src/babel-helpers.ts +++ b/packages/gatsby-plugin-image/src/babel-helpers.ts @@ -21,7 +21,7 @@ export const SHARP_ATTRIBUTES = new Set([ `placeholder`, `tracedSVGOptions`, `sizes`, - `background`, + `backgroundColor`, ]) export function normalizeProps( diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx index 76cc0785cafb7..a2da1d65313a5 100644 --- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx +++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx @@ -36,9 +36,9 @@ describe(`GatsbyImage browser`, () => { beforeHydrationContent = document.createElement(`div`) beforeHydrationContent.innerHTML = `
{ }) describe(`style verifications`, () => { - it(`has a valid style attributes for fullWidth layout`, () => { + it(`has a valid className for fullWidth layout`, () => { const layout = `fullWidth` const image: IGatsbyImageData = { @@ -59,22 +59,9 @@ describe(`GatsbyImage server`, () => { ) const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`) - expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(` - CSSStyleDeclaration { - "0": "position", - "1": "overflow", - "_importants": Object { - "overflow": undefined, - "position": undefined, - }, - "_length": 2, - "_onChange": [Function], - "_values": Object { - "overflow": "hidden", - "position": "relative", - }, - } - `) + expect((wrapper as HTMLElement).className).toMatchInlineSnapshot( + `"gatsby-image-wrapper"` + ) }) it(`has a valid style attributes for fixed layout`, () => { @@ -97,29 +84,23 @@ describe(`GatsbyImage server`, () => { const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`) expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(` CSSStyleDeclaration { - "0": "position", - "1": "overflow", - "2": "width", - "3": "height", + "0": "width", + "1": "height", "_importants": Object { "height": undefined, - "overflow": undefined, - "position": undefined, "width": undefined, }, - "_length": 4, + "_length": 2, "_onChange": [Function], "_values": Object { "height": "100px", - "overflow": "hidden", - "position": "relative", "width": "100px", }, } `) }) - it(`has a valid style attributes for constrained layout`, () => { + it(`has a valid className for constrained layout`, () => { const layout = `constrained` const image: IGatsbyImageData = { @@ -137,25 +118,9 @@ describe(`GatsbyImage server`, () => { ) const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`) - expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(` - CSSStyleDeclaration { - "0": "position", - "1": "overflow", - "2": "display", - "_importants": Object { - "display": undefined, - "overflow": undefined, - "position": undefined, - }, - "_length": 3, - "_onChange": [Function], - "_values": Object { - "display": "inline-block", - "overflow": "hidden", - "position": "relative", - }, - } - `) + expect((wrapper as HTMLElement).className).toMatchInlineSnapshot( + `"gatsby-image-wrapper gatsby-image-wrapper-constrained"` + ) }) }) @@ -332,6 +297,7 @@ icon.svg`, void @@ -42,11 +42,11 @@ export interface GatsbyImageProps export interface IGatsbyImageData { layout: Layout - height?: number + width: number + height: number backgroundColor?: string images: Pick placeholder?: Pick - width?: number } let hasShownWarning = false diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts index 6648d48825d97..276acd94daa46 100644 --- a/packages/gatsby-plugin-image/src/components/hooks.ts +++ b/packages/gatsby-plugin-image/src/components/hooks.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-expressions */ import { useState, CSSProperties, @@ -7,6 +8,7 @@ import { ReactEventHandler, SetStateAction, Dispatch, + RefObject, } from "react" import { Node } from "gatsby" import { PlaceholderProps } from "./placeholder" @@ -16,6 +18,7 @@ import { IGatsbyImageHelperArgs, generateImageData, Layout, + EVERY_BREAKPOINT, } from "../image-utils" const imageCache = new Set() @@ -53,31 +56,44 @@ export function getWrapperProps( ): Pick, "className" | "style"> & { "data-gatsby-image-wrapper": string } { - const wrapperStyle: CSSProperties = { - position: `relative`, - overflow: `hidden`, - } + const wrapperStyle: CSSProperties = {} + + let className = `gatsby-image-wrapper` if (layout === `fixed`) { wrapperStyle.width = width wrapperStyle.height = height } else if (layout === `constrained`) { - wrapperStyle.display = `inline-block` + if (!global.GATSBY___IMAGE) { + wrapperStyle.display = `inline-block` + } + className = `gatsby-image-wrapper gatsby-image-wrapper-constrained` } return { - className: `gatsby-image-wrapper`, + className, "data-gatsby-image-wrapper": ``, style: wrapperStyle, } } +export async function applyPolyfill( + ref: RefObject +): Promise { + if (!(`objectFitPolyfill` in window)) { + await import( + /* webpackChunkName: "gatsby-plugin-image-objectfit-polyfill" */ `objectFitPolyfill` + ) + } + ;(window as any).objectFitPolyfill(ref.current) +} + export function useGatsbyImage({ pluginName = `useGatsbyImage`, + breakpoints = EVERY_BREAKPOINT, ...args }: IGatsbyImageHelperArgs): IGatsbyImageData { - // TODO: use context to get default plugin options and spread them in here - return generateImageData({ pluginName, ...args }) + return generateImageData({ pluginName, breakpoints, ...args }) } export function getMainProps( @@ -85,9 +101,9 @@ export function getMainProps( isLoaded: boolean, images: any, loading?: "eager" | "lazy", - toggleLoaded?: any, + toggleLoaded?: (loaded: boolean) => void, cacheKey?: string, - ref?: any, + ref?: RefObject, style: CSSProperties = {} ): MainImageProps { const onLoad: ReactEventHandler = function (e) { @@ -116,6 +132,13 @@ export function getMainProps( } } + // Polyfill "object-fit" if unsupported (mostly IE) + if (ref?.current && !(`objectFit` in document.documentElement.style)) { + ref.current.dataset.objectFit = style.objectFit ?? `cover` + ref.current.dataset.objectPosition = `${style.objectPosition ?? `50% 50%`}` + applyPolyfill(ref) + } + // fallback when it's not configured in gatsby-config. if (!global.GATSBY___IMAGE) { style = { @@ -261,3 +284,81 @@ export function useImageLoaded( toggleLoaded, } } + +export interface IArtDirectedImage { + media: string + image: IGatsbyImageData +} + +/** + * Generate a Gatsby image data object with multiple, art-directed images that display at different + * resolutions. + * + * @param defaultImage The image displayed when no media query matches. + * It is also used for all other settings applied to the image, such as width, height and layout. + * You should pass a className to the component with media queries to adjust the size of the container, + * as this cannot be adjusted automatically. + * @param artDirected Array of objects which each contains a `media` string which is a media query + * such as `(min-width: 320px)`, and the image object to use when that query matches. + */ +export function useArtDirection( + defaultImage: IGatsbyImageData, + artDirected: Array +): IGatsbyImageData { + const { images, placeholder, ...props } = defaultImage + const output: IGatsbyImageData = { + ...props, + images: { + ...images, + sources: [], + }, + placeholder: placeholder && { + ...placeholder, + sources: [], + }, + } + + artDirected.forEach(({ media, image }) => { + if (!media) { + if (process.env.NODE_ENV === `development`) { + console.warn( + "[gatsby-plugin-image] All art-directed images passed to must have a value set for `media`. Skipping." + ) + } + return + } + + if ( + image.layout !== defaultImage.layout && + process.env.NODE_ENV === `development` + ) { + console.warn( + `[gatsby-plugin-image] Mismatched image layout: expected "${defaultImage.layout}" but received "${image.layout}". All art-directed images use the same layout as the default image` + ) + } + + output.images.sources.push( + ...image.images.sources.map(source => { + return { ...source, media } + }), + { + media, + srcSet: image.images.fallback.srcSet, + } + ) + + if (!output.placeholder) { + return + } + + output.placeholder.sources.push({ + media, + srcSet: image.placeholder.fallback, + }) + }) + output.images.sources.push(...images.sources) + if (placeholder?.sources) { + output.placeholder?.sources.push(...placeholder.sources) + } + return output +} diff --git a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx index 1de40801e58fa..96dcf8a8193b7 100644 --- a/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx +++ b/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx @@ -15,7 +15,7 @@ import { ReactElement } from "react" type LazyHydrateProps = Omit & { isLoading: boolean isLoaded: boolean // alwaystype SetStateAction = S | ((prevState: S) => S); - toggleIsLoaded: Function + toggleIsLoaded: (toggle: boolean) => void ref: MutableRefObject } diff --git a/packages/gatsby-plugin-image/src/components/picture.tsx b/packages/gatsby-plugin-image/src/components/picture.tsx index 91d34040354f7..2ab119eb7589c 100644 --- a/packages/gatsby-plugin-image/src/components/picture.tsx +++ b/packages/gatsby-plugin-image/src/components/picture.tsx @@ -69,8 +69,15 @@ export const Picture = forwardRef( { fallback, sources = [], shouldLoad = true, ...props }, ref ) { + const sizes = props.sizes || fallback?.sizes const fallbackImage = ( - + ) if (!sources.length) { @@ -85,6 +92,7 @@ export const Picture = forwardRef( type={type} media={media} srcSet={srcSet} + sizes={sizes} /> ))} {fallbackImage} diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx index 6f16d23f8cff8..483cf55dba18b 100644 --- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx +++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx @@ -6,7 +6,7 @@ import { ISharpGatsbyImageArgs } from "../image-utils" export interface IStaticImageProps extends Omit, - ISharpGatsbyImageArgs { + Omit { src: string } @@ -91,12 +91,12 @@ export const propTypes = { if (props.layout === undefined) { return undefined } - if (validLayouts.has(props.layout.toLowerCase())) { + if (validLayouts.has(props.layout)) { return undefined } return new Error( - `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "fixed". Valid values are "fixed", "fullWidth" or "constrained".` + `Invalid value ${props.layout}" provided for prop "layout". Defaulting to "constrained". Valid values are "fixed", "fullWidth" or "constrained".` ) }, } diff --git a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx index 97355ef6a3451..90d7b027ada3b 100644 --- a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx +++ b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx @@ -17,6 +17,10 @@ export function onRenderBody({ setHeadComponents }: RenderBodyArgs): void {