From a55831382907c94f9130bb87c05c42f14ea15dea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yann=20=E3=82=A4=E3=83=BC=E3=83=99=E3=82=B9=20Eves?= Date: Fri, 22 Jul 2022 11:12:28 +0100 Subject: [PATCH 01/23] fix(gatsby): Allow `export { default }` named exports in page templates (#29553) Co-authored-by: Lennart --- .../limited-exports-page-templates.ts | 24 +++++++++++++++++++ .../limited-exports-page-templates.ts | 13 +++++----- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/packages/gatsby/src/utils/eslint-rules/__tests__/limited-exports-page-templates.ts b/packages/gatsby/src/utils/eslint-rules/__tests__/limited-exports-page-templates.ts index 6789f8b73dafd..d351df15ada85 100644 --- a/packages/gatsby/src/utils/eslint-rules/__tests__/limited-exports-page-templates.ts +++ b/packages/gatsby/src/utils/eslint-rules/__tests__/limited-exports-page-templates.ts @@ -52,6 +52,18 @@ describe(`no-anonymous-exports-page-templates`, () => { test({ code: `import { graphql } from "gatsby"\nconst Template = () => {}\nconst query = graphql\`test\`\nexport { query }\nexport default Template`, }), + test({ + code: `import { graphql } from "gatsby"\nimport Template from './Template'\nconst query = graphql\`test\`\nexport { query }\nexport default Template`, + }), + test({ + code: `import { graphql } from "gatsby"\nexport { default } from './Template'\nexport const query = graphql\`test\``, + }), + test({ + code: `import { graphql } from "gatsby"\nconst query = graphql\`test\`\nexport { query }\nexport { default } from './Template'`, + }), + test({ + code: `import { graphql } from "gatsby"\nexport { Template as default } from './Template'\nexport const query = graphql\`test\``, + }), // getServerData test({ code: `import { graphql, Link } from "gatsby"\nconst Template = () => {}\nexport const query = graphql\`test\`\nexport default Template\nexport function getServerData() { return { props: { foo: "bar" }}}`, @@ -121,6 +133,18 @@ describe(`no-anonymous-exports-page-templates`, () => { code: `import { graphql } from "gatsby"\nconst Template = () => {}\nexport const hello = 10, query = graphql\`test\`\nexport default Template`, errors: [{ messageId: `limitedExportsPageTemplates` }], }), + test({ + code: `import { graphql } from "gatsby"\nexport { default } from './Template'\nexport const hello = 10, query = graphql\`test\``, + errors: [{ messageId: `limitedExportsPageTemplates` }], + }), + test({ + code: `import { graphql } from "gatsby"\nconst query = graphql\`test\`\nexport { query }\nexport { default } from './Template'\nexport function Test() {}`, + errors: [{ messageId: `limitedExportsPageTemplates` }], + }), + test({ + code: `import { graphql } from "gatsby"\nexport { Template as default } from './Template'\nexport const query = graphql\`test\`\nexport function Test() {}`, + errors: [{ messageId: `limitedExportsPageTemplates` }], + }), test({ code: `import { graphql, Link } from "gatsby"\nconst Template = () => {}\nexport const query = graphql\`test\`\nexport default Template\nexport class NotHead extends React.Component { render() { return null } }`, errors: [{ messageId: `limitedExportsPageTemplates` }], diff --git a/packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts b/packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts index 7cabcbcce82ff..2fad780ffe59c 100644 --- a/packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts +++ b/packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts @@ -75,15 +75,14 @@ function hasOneValidNamedDeclaration( // Checks for: // const query = graphql`` // export { query } - if ( - node.type === `ExportNamedDeclaration` && - node.declaration === null && - varName - ) { + if (node.type === `ExportNamedDeclaration` && node.declaration === null) { // For export { foobar, query } the declaration will be null and specifiers exists // For { foobar, query } it'll return true, for { query } it'll return false - const nonQueryExports = node.specifiers.some( - e => e.exported.name !== varName + // It will ignore any { default } declarations since these are allowed + const nonQueryExports = node.specifiers.some(e => + varName + ? e.exported.name !== varName && e.exported.name !== `default` + : e.exported.name !== `default` ) return !nonQueryExports } From 45bb97ab545e7e597123cac14331e3633d719d63 Mon Sep 17 00:00:00 2001 From: Robin <1105080+openscript@users.noreply.github.com> Date: Fri, 22 Jul 2022 12:49:01 +0200 Subject: [PATCH 02/23] chore(docs): Add dependency for TypeScript testing (#36050) --- docs/docs/how-to/testing/unit-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md index 1f7582bb464b7..5505169e71539 100644 --- a/docs/docs/how-to/testing/unit-testing.md +++ b/docs/docs/how-to/testing/unit-testing.md @@ -237,7 +237,7 @@ 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 +npm install --save-dev @types/jest @types/react-test-renderer @babel/preset-typescript ``` Update the transform in `jest.config.js` to run `jest-preprocess` on files in your project's root directory. From 8767b627598df2cae517438ad6da9f6de95d2e61 Mon Sep 17 00:00:00 2001 From: Hunta88 Date: Sat, 23 Jul 2022 12:33:06 -0600 Subject: [PATCH 03/23] Grammar typo fixed (#36219) Corrected text that says "It may useful for..." to "It may be useful for ..." --- docs/docs/tutorial/part-1/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/part-1/index.mdx index 52062338c353c..b1ca895d414d6 100644 --- a/docs/docs/tutorial/part-1/index.mdx +++ b/docs/docs/tutorial/part-1/index.mdx @@ -309,7 +309,7 @@ To connect your code on GitHub to your Gatsby Cloud account, do the following: ![The new fields. "Base Branch" is set to "main", "Base Directory" is set to "/", and "Site Name" is set to "my-first-gatsby-site-main".](./05-add-site-details.png) -1. Gatsby Cloud will ask you if you want to add any integrations to your site. For future projects, this might be useful if you want to use a CMS. Gatsby Cloud will also ask if you want to add any environment variables. Again, this may useful for future projects, but for now, scroll past and click the **"Build Site"** button. +1. Gatsby Cloud will ask you if you want to add any integrations to your site. For future projects, this might be useful if you want to use a CMS. Gatsby Cloud will also ask if you want to add any environment variables. Again, this may be useful for future projects, but for now, scroll past and click the **"Build Site"** button. ![The "Integrations" tab of the "Add a site" screen.](./06-integrations-and-environment-variables.png) From 9a583e7c6901198388e4df0c09c2b8c5420d0c31 Mon Sep 17 00:00:00 2001 From: Shubhdeep Chhabra <43654389+Shubhdeep12@users.noreply.github.com> Date: Mon, 25 Jul 2022 12:16:43 +0530 Subject: [PATCH 04/23] chore(docs): Typo fix in debugging-html-builds (#36228) --- docs/docs/debugging-html-builds.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/debugging-html-builds.md b/docs/docs/debugging-html-builds.md index 6833c58aa146d..915980b30cabf 100644 --- a/docs/docs/debugging-html-builds.md +++ b/docs/docs/debugging-html-builds.md @@ -50,7 +50,7 @@ const isBrowser = typeof window !== "undefined" export default function MyComponent() { let loggedIn = false if (isBrowser) { - window.localstorage.getItem("isLoggedIn") === "true" + window.localStorage.getItem("isLoggedIn") === "true" } return
Am I logged in? {loggedIn}
From 1fe77587da5a67961914dd5b5067f083ee5c808a Mon Sep 17 00:00:00 2001 From: Ed Lucas <1424108+edlucas@users.noreply.github.com> Date: Mon, 25 Jul 2022 06:50:02 +0000 Subject: [PATCH 05/23] chore(docs): Clarify note in "local font" how-to (#36224) --- docs/docs/how-to/styling/using-local-fonts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/how-to/styling/using-local-fonts.md b/docs/docs/how-to/styling/using-local-fonts.md index dc45361dbb157..160ad93962f51 100644 --- a/docs/docs/how-to/styling/using-local-fonts.md +++ b/docs/docs/how-to/styling/using-local-fonts.md @@ -12,7 +12,7 @@ This guide uses the Gatsby [default starter](https://github.com/gatsbyjs/gatsby- Get started by using local fonts by adding them to your project. Copy the font file into your Gatsby project, for example, `src/fonts/fontname.woff2`. -**NOTE:** It’s recommended to limit custom font usage to only the essential needed for performance. +**NOTE:** For performance reasons, it’s recommended to limit the number of custom fonts added. The Gatsby default starter project adds [browser safe font](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Default_fonts) styling in the `layout.css` file. From 64f73eb9a96c17acc7771532eb8184411bb66cbd Mon Sep 17 00:00:00 2001 From: Trang Le Date: Mon, 25 Jul 2022 14:05:13 +0700 Subject: [PATCH 06/23] chore(docs): Instruct to install v2 of `unist-util-visit` in remark tutorial (#36221) Co-authored-by: Lennart --- docs/tutorial/remark-plugin-tutorial.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/tutorial/remark-plugin-tutorial.md b/docs/tutorial/remark-plugin-tutorial.md index f4bbe8b1e2a92..ffda091fae469 100644 --- a/docs/tutorial/remark-plugin-tutorial.md +++ b/docs/tutorial/remark-plugin-tutorial.md @@ -189,7 +189,7 @@ However, if the sub-plugin is published and installed via npm, simply refer to i When modifying nodes, you'll want to walk the tree and then implement new functionality on specific nodes. -A node module to help with is [unist-util-visit](https://github.com/syntax-tree/unist-util-visit), a walker for `unist` nodes. For reference, Unist (Unified Syntax Tree) is a standard for Markdown syntax trees and parsers that include well known parsers in the Gatsby world like Remark and MDX. +A node module to help with this is [unist-util-visit](https://github.com/syntax-tree/unist-util-visit), a walker for `unist` nodes. For reference, Unist (Unified Syntax Tree) is a standard for Markdown syntax trees and parsers that include well known parsers in the Gatsby world like Remark and MDX. As an example from `unist-util-visit`'s README file, it allows for an interface to visit particular nodes based on a particular type: @@ -208,6 +208,14 @@ function visitor(node) { Here, it finds all text nodes and will `console.log` the nodes. The second argument can be replaced with any type described in Unist's [Markdown AST (mdast) specification](https://github.com/syntax-tree/mdast#nodes) including types such as `paragraph`, `blockquote`, `link`, `image` or in our usecase, `heading`. +To be able to use `unist-util-visit`, install it into your plugin: + +```shell +npm install unist-util-visit@^2 +``` + +**Please note**: You're installing v2 of `unist-util-visit` as newer major versions are ESM and Gatsby doesn't fully support that yet. + With this technique in mind, you can similarly traverse the AST from your plugin and add additional functionality, like so: ```js:title=plugins/gatsby-remark-purple-headers/index.js From b22c2bfe5fb1a1a2b04f8fd23f9a28baf44d2e33 Mon Sep 17 00:00:00 2001 From: Dan <35927536+dan-mba@users.noreply.github.com> Date: Mon, 25 Jul 2022 03:06:59 -0400 Subject: [PATCH 07/23] chore(docs): Add `react-helmet` note in Gatsby Head reference (#36216) --- docs/docs/reference/built-in-components/gatsby-head.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/reference/built-in-components/gatsby-head.md b/docs/docs/reference/built-in-components/gatsby-head.md index 1b0c7abbf356d..5304406ba5915 100644 --- a/docs/docs/reference/built-in-components/gatsby-head.md +++ b/docs/docs/reference/built-in-components/gatsby-head.md @@ -88,6 +88,7 @@ You'll need to be aware of these things when using Gatsby Head: - The `Head` function needs to return valid JSX. - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`. - Data block `