Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v2] Migration guide updates #5661

Merged
merged 27 commits into from
Jun 5, 2018
Merged

[v2] Migration guide updates #5661

Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
ddd19d6
Remove yarn examples for consistency with other docs
m-allanson Jun 1, 2018
8718398
Add rename responsive image queries section
m-allanson Jun 1, 2018
bf0a458
Add postcss plugins section
m-allanson Jun 1, 2018
231184a
Remove checklist (moved to issue 3986)
m-allanson Jun 1, 2018
00d68ee
Add mixed CommonJS/ES6 section
m-allanson Jun 1, 2018
8053835
Link to Gatsby webpack docs
m-allanson Jun 1, 2018
bb64597
Add node id section
m-allanson Jun 1, 2018
7afa9d9
Add section: remove explicit polyfills
m-allanson Jun 1, 2018
f616086
Add section: Change modifyBabelrc to onCreateBabelConfig
m-allanson Jun 1, 2018
163d7ea
Add section: Change `modifyWebpackConfig` to `onCreateWebpackConfig`
m-allanson Jun 1, 2018
e54d5f9
Add section: CSS is inlined automatically
m-allanson Jun 1, 2018
5413b73
Add introduction and small tweaks
m-allanson Jun 1, 2018
d10adad
Correct line numbers
m-allanson Jun 1, 2018
ca6d375
Improve explanation around movement of libs to peerDependencies
KyleAMathews Jun 1, 2018
433833a
chore: minor capitalization tweak
jlengstorf Jun 1, 2018
05b1e85
Add edit link
m-allanson Jun 4, 2018
d0cebc7
Split peer dep updates into two sections
m-allanson Jun 4, 2018
9124ad1
Declarative headings
m-allanson Jun 4, 2018
c5e1c15
Add table of contents
m-allanson Jun 4, 2018
2be2dca
Use neater Fragment syntax
m-allanson Jun 4, 2018
b8c4860
More detail on deprecation note
m-allanson Jun 4, 2018
405073e
Inline comments on code examples
m-allanson Jun 4, 2018
bfc9301
Add Jason's node ID query example
m-allanson Jun 4, 2018
6af965a
merge origin/v2-migration-guide
m-allanson Jun 4, 2018
d5beb1b
Use markdown diff syntax for before / after examples
m-allanson Jun 4, 2018
ad47463
Add 'in-progress' note about babel polyfills
m-allanson Jun 4, 2018
ed23990
Add instructions on how to install Gatsby v2
m-allanson Jun 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add section: remove explicit polyfills
  • Loading branch information
@m-allanson
m-allanson committed Jun 1, 2018
commit 7afa9d9556224e017782b8140921f9030518af0f
9 changes: 6 additions & 3 deletions docs/docs/migrating-from-v1-to-v2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,9 +248,7 @@ Note: there will be a `postcss` plugin that allows you to configure postcss from

## Files mixing CommonJS with ES6 modules won't compile
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this to something declarative, eg -- "Convert to either pure CommonJS or pure ES6"?


Gatsby v2 uses a version 7 of [babel](https://babeljs.io/) which is stricter about parsing files with mixed JS styles.

> TODO: link to babel docs here?
Gatsby v2 uses babel 7 which is stricter about parsing files with mixed JS styles.

ES6 Modules are ok:

Expand Down Expand Up @@ -278,6 +276,8 @@ import foo from "foo"
module.exports = foo;
```

See [Gatsby's babel docs for more details](/docs/babel).

## Don't query nodes by ID
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps eg "Rewrite node ID queries"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm I think @m-allanson original wording is correct. There aren't "node ID queries" just queries that might try to query nodes by ID.


Source and transformer plugins now use UUIDs for IDs. If you used glob or regex to query nodes by id then you'll need to query something else.
Expand All @@ -286,3 +286,6 @@ Source and transformer plugins now use UUIDs for IDs. If you used glob or regex

> TODO: add example
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a real example from one of my projects. 😄

  query MyImageQuery {
    allImageSharp(filter: {
-     id: {regex: "/default.jpg/"}
+     sizes: {originalName: {regex: "/default.jpg/"}}
    }) {
      edges {
        node {
          id
          sizes(maxWidth: 660) {
            src
          }
        }
      }
    }
  }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks :)


## Remove explicit polyfills

If your Gatsby v1 site included any polyfills, you can remove them. Gatsby v2 ships with babel 7 and is configured to automatically include polyfills for your code. See [Gatsby's babel docs for more details](/docs/babel).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't appear to be actually true, or I'm misunderstanding. I had to ship an IntersectionObserver polyfill for marisamorby.com:

https://github.com/jlengstorf/marisamorby.com/pull/8/files#diff-3863fe9c963d5c58d29a7f5af77e6480

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gatsby isn't yet compiling code in node_modules so code there won't be polyfilled yet. See bullet number 5 #3870