Skip to content

Commit a5210b2

Browse files
wardpeetwardpeet
authored
feat: remove react-hot-loader (#29540)
1 parent 15b55f0 commit a5210b2

30 files changed

+162
-404
lines changed

‎.circleci/config.yml

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -325,14 +325,6 @@ jobs:
325325
e2e_tests_development_runtime:
326326
<<: *e2e_tests_development_runtime_alias
327327

328-
e2e_tests_development_runtime_fast_refresh:
329-
<<: *e2e_tests_development_runtime_alias
330-
environment:
331-
GATSBY_HOT_LOADER: fast-refresh
332-
CYPRESS_HOT_LOADER: fast-refresh
333-
CYPRESS_PROJECT_ID: 917bea
334-
CYPRESS_RECORD_KEY: 4750fb36-4576-4638-a617-d243a381acef
335-
336328
e2e_tests_development_runtime_with_experimental_react:
337329
<<: *e2e_tests_development_runtime_alias
338330

@@ -616,8 +608,6 @@ workflows:
616608
<<: *e2e-test-workflow
617609
- e2e_tests_development_runtime:
618610
<<: *e2e-test-workflow
619-
- e2e_tests_development_runtime_fast_refresh:
620-
<<: *e2e-test-workflow
621611
- e2e_tests_production_runtime:
622612
<<: *e2e-test-workflow
623613
- themes_e2e_tests_production_runtime:

‎docs/docs/conceptual/gatsby-lifecycle-apis.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ During the main bootstrap sequence, Gatsby (in this order):
4444
- writes page redirects (if any) to `.cache/redirects.json`
4545
- the [onPostBootstrap](/docs/reference/config-files/gatsby-node/#onPostBootstrap) lifecycle is executed
4646

47-
In development this is a running process powered by [webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-hot-loader`](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L104), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded.
47+
In development this is a running process powered by [webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-refresh`](https://github.com/gatsbyjs/gatsby/blob/4dff7550a29f4635bf47a068a05f634470eb9ef1/packages/gatsby/package.json#L134)), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded.
4848

4949
The core of the bootstrap process is the "api-runner", which helps to execute APIs in sequence, with state managed in Redux. Gatsby exposes a number of lifecycle APIs which can either be implemented by you (or any of your configured plugins) in `gatsby-node.js`, `gatsby-browser.js` or `gatsby-ssr.js`.
5050

‎e2e-tests/development-runtime/cypress/integration/eslint-rules/limited-exports-page-templates.js

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1-
if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
2-
describe(`limited-exports-page-templates`, () => {
3-
// Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
4-
it.skip(`should log warning to console for invalid export`, () => {
5-
cy.visit(`/eslint-rules/limited-exports-page-templates`, {
6-
onBeforeLoad(win) {
7-
cy.stub(win.console, "log").as(`consoleLog`)
8-
},
9-
}).waitForRouteChange()
1+
describe(`limited-exports-page-templates`, () => {
2+
// Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
3+
it.skip(`should log warning to console for invalid export`, () => {
4+
cy.visit(`/eslint-rules/limited-exports-page-templates`, {
5+
onBeforeLoad(win) {
6+
cy.stub(win.console, "log").as(`consoleLog`)
7+
},
8+
}).waitForRouteChange()
109

11-
cy.get(`@consoleLog`).should(
12-
`be.calledWithMatch`,
13-
/15:1 warning In page templates only a default export of a valid React component and the named export of a page query is allowed./i
14-
)
15-
cy.get(`@consoleLog`).should(
16-
`not.be.calledWithMatch`,
17-
/17:1 warning In page templates only a default export of a valid React component and the named export of a page query is allowed./i
18-
)
19-
})
10+
cy.get(`@consoleLog`).should(
11+
`be.calledWithMatch`,
12+
/15:1 warning In page templates only a default export of a valid React component and the named export of a page query is allowed./i
13+
)
14+
cy.get(`@consoleLog`).should(
15+
`not.be.calledWithMatch`,
16+
/17:1 warning In page templates only a default export of a valid React component and the named export of a page query is allowed./i
17+
)
2018
})
21-
}
19+
})

‎e2e-tests/development-runtime/cypress/integration/eslint-rules/no-anonymous-exports-page-templates.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
1-
if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
2-
describe(`no-anonymous-exports-page-templates`, () => {
3-
// Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
4-
it.skip(`should log warning to console for arrow functions`, () => {
5-
cy.visit(`/eslint-rules/no-anonymous-exports-page-templates`, {
6-
onBeforeLoad(win) {
7-
cy.stub(win.console, "log").as(`consoleLog`)
8-
},
9-
}).waitForRouteChange()
1+
describe(`no-anonymous-exports-page-templates`, () => {
2+
// Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
3+
it.skip(`should log warning to console for arrow functions`, () => {
4+
cy.visit(`/eslint-rules/no-anonymous-exports-page-templates`, {
5+
onBeforeLoad(win) {
6+
cy.stub(win.console, "log").as(`consoleLog`)
7+
},
8+
}).waitForRouteChange()
109

11-
cy.get(`@consoleLog`).should(
12-
`be.calledWithMatch`,
13-
/Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
14-
)
15-
})
16-
it.skip(`should log warning to console for function declarations`, () => {
17-
cy.visit(`/eslint-rules/no-anonymous-exports-page-templates-function`, {
18-
onBeforeLoad(win) {
19-
cy.stub(win.console, "log").as(`consoleLog`)
20-
},
21-
}).waitForRouteChange()
10+
cy.get(`@consoleLog`).should(
11+
`be.calledWithMatch`,
12+
/Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
13+
)
14+
})
15+
it.skip(`should log warning to console for function declarations`, () => {
16+
cy.visit(`/eslint-rules/no-anonymous-exports-page-templates-function`, {
17+
onBeforeLoad(win) {
18+
cy.stub(win.console, "log").as(`consoleLog`)
19+
},
20+
}).waitForRouteChange()
2221

23-
cy.get(`@consoleLog`).should(
24-
`be.calledWithMatch`,
25-
/Anonymous function declarations cause Fast Refresh to not preserve local component state./i
26-
)
27-
})
22+
cy.get(`@consoleLog`).should(
23+
`be.calledWithMatch`,
24+
/Anonymous function declarations cause Fast Refresh to not preserve local component state./i
25+
)
2826
})
29-
}
27+
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/arrow-functions.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ describe(`hot-reloading anonymous arrow functions`, () => {
1919
`npm run update -- --file src/components/title.tsx --replacements "TITLE:${text}"`
2020
)
2121

22+
cy.waitForHmr()
23+
2224
cy.getTestElement(IDS.title).should(`have.text`, text)
2325
})
2426
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/class-component.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ describe(`reloading class component`, () => {
2323
`npm run update -- --file src/components/class-component.js --replacements "CUSTOM_STATE:${value}"`
2424
)
2525

26+
cy.waitForHmr()
27+
2628
cy.getTestElement(`stateful-${TEST_ID}`).should(
2729
`have.text`,
2830
`Custom Message`

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/hooks.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
const COUNT_ID = `count`
2+
const amount = 100
23

34
describe(`hot-reloading hooks`, () => {
45
beforeEach(() => {
6+
cy.exec(
7+
`npm run update -- --file src/pages/hooks.js --replacements "count + ${amount}:count + 1" --exact`
8+
)
9+
cy.wait(1000)
10+
511
cy.visit(`/hooks`).waitForRouteChange()
612
})
713

8-
it.skip(`can update component`, () => {
9-
const amount = 100
14+
it(`can update component`, () => {
1015
cy.exec(
1116
`npm run update -- --file src/pages/hooks.js --replacements "count + 1:count + ${amount}" --exact`
1217
)
1318

19+
cy.waitForHmr()
20+
1421
cy.getTestElement(`increment`).click()
1522

1623
cy.getTestElement(COUNT_ID).invoke(`text`).should(`eq`, `${amount}`)

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/new-file.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ describe(`hot reloading new page component`, () => {
1818
})
1919

2020
it(`can hot reload a new page file`, () => {
21+
cy.visit(`/sample`).waitForRouteChange()
22+
2123
const text = `World`
2224
cy.exec(
2325
`npm run update -- --file src/pages/sample.js --replacements "REPLACEMENT:${text}"`
2426
)
2527

26-
cy.visit(`/sample`).waitForRouteChange()
28+
cy.waitForHmr()
2729

2830
cy.getTestElement(`message`).invoke(`text`).should(`eq`, `Hello ${text}`)
2931
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/non-js-file.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
const TEMPLATE = `SUB_TITLE`
22
const TEST_ID = `sub-title`
3+
const message = `This is a sub-title`
34

45
describe(`hot reloading non-js file`, () => {
56
beforeEach(() => {
7+
cy.exec(
8+
`npm run update -- --file content/2018-12-14-hello-world.md --replacements "${message}:%${TEMPLATE}%" --exact`
9+
)
10+
cy.wait(1000)
11+
612
cy.visit(`/2018-12-14-hello-world/`).waitForRouteChange()
13+
14+
cy.wait(1000)
715
})
816

917
it(`displays placeholder content on launch`, () => {
1018
cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
1119
})
1220

13-
it.skip(`hot reloads with new content`, () => {
14-
const message = `This is a sub-title`
21+
it(`hot reloads with new content`, () => {
22+
cy.getTestElement(TEST_ID).invoke(`text`).should(`contain`, TEMPLATE)
23+
1524
cy.exec(
1625
`npm run update -- --file content/2018-12-14-hello-world.md --replacements "${TEMPLATE}:${message}"`
1726
)
1827

28+
// wati for socket.io to update
29+
cy.wait(5000)
30+
1931
cy.getTestElement(TEST_ID).invoke(`text`).should(`eq`, message)
2032
})
2133
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/page-component.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ describe(`hot reloading page component`, () => {
1414
`npm run update -- --file src/pages/index.js --replacements "GATSBY_SITE:${text}"`
1515
)
1616

17+
cy.waitForHmr()
18+
1719
cy.getTestElement(TEST_ID).should(`contain.text`, text)
1820
})
1921
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/page-queries.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ describe(`hot-reloading page queries`, () => {
1818
`npm run update -- --file src/pages/page-query.js --replacements "# %AUTHOR%:author" --exact`
1919
)
2020

21+
cy.waitForHmr()
22+
2123
cy.getTestElement(`hot`).invoke(`text`).should(`contain`, author)
2224
})
2325
})

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/static-queries.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ describe(`hot-reloading static queries`, () => {
2929
`npm run update -- --file src/components/static-query/use-static-query/hot.js --replacements "# %AUTHOR%:author" --exact`
3030
)
3131

32+
cy.waitForHmr()
33+
3234
cy.getTestElement(`use-static-query-hot`)
3335
.invoke(`text`)
3436
.should(`contain`, author)

‎e2e-tests/development-runtime/cypress/integration/hot-reloading/template-component.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ describe(`hot reloading template component`, () => {
1515
`npm run update -- --file src/templates/blog-post.js --replacements "${TEMPLATE}:${message}"`
1616
)
1717

18+
cy.waitForHmr()
19+
1820
cy.getTestElement(TEST_ID).should(`have.text`, `Hello ${message}`)
1921
})
2022
})

‎e2e-tests/development-runtime/cypress/integration/navigation/linking.js

Lines changed: 29 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -143,76 +143,36 @@ describe(`navigation`, () => {
143143
})
144144
})
145145

146-
if (Cypress.env("HOT_LOADER") !== `fast-refresh`) {
147-
describe(`All location changes should trigger an effect (react-hot-loader)`, () => {
148-
beforeEach(() => {
149-
cy.visit(`/navigation-effects`).waitForRouteChange()
150-
})
151-
152-
it(`should trigger an effect after a search param has changed`, () => {
153-
cy.findByTestId(`effect-message`).should(
154-
`have.text`,
155-
`Waiting for effect`
156-
)
157-
cy.findByTestId(`send-search-message`).click().waitForRouteChange()
158-
cy.findByTestId(`effect-message`).should(
159-
`have.text`,
160-
`?message=searchParam`
161-
)
162-
})
163-
164-
it(`should trigger an effect after the hash has changed`, () => {
165-
cy.findByTestId(`effect-message`).should(
166-
`have.text`,
167-
`Waiting for effect`
168-
)
169-
cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
170-
cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
171-
})
172-
173-
it(`should trigger an effect after the state has changed`, () => {
174-
cy.findByTestId(`effect-message`).should(`have.text`, ``)
175-
cy.findByTestId(`send-state-message`).click().waitForRouteChange()
176-
cy.findByTestId(`effect-message`).should(
177-
`have.text`,
178-
`this is a message using the state`
179-
)
180-
})
181-
})
182-
}
183-
184146
// TODO: Check if this is the correct behavior
185-
if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
186-
describe(`All location changes should trigger an effect (fast-refresh)`, () => {
187-
beforeEach(() => {
188-
cy.visit(`/navigation-effects`).waitForRouteChange()
189-
})
190-
191-
it(`should trigger an effect after a search param has changed`, () => {
192-
cy.findByTestId(`effect-message`).should(`have.text`, ``)
193-
cy.findByTestId(`send-search-message`).click().waitForRouteChange()
194-
cy.findByTestId(`effect-message`).should(
195-
`have.text`,
196-
`?message=searchParam`
197-
)
198-
})
199-
200-
it(`should trigger an effect after the hash has changed`, () => {
201-
cy.findByTestId(`effect-message`).should(`have.text`, ``)
202-
cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
203-
cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
204-
})
205-
206-
it(`should trigger an effect after the state has changed`, () => {
207-
cy.findByTestId(`effect-message`).should(`have.text`, ``)
208-
cy.findByTestId(`send-state-message`).click().waitForRouteChange()
209-
cy.findByTestId(`effect-message`).should(
210-
`have.text`,
211-
`this is a message using the state`
212-
)
213-
})
214-
})
215-
}
147+
describe(`All location changes should trigger an effect (fast-refresh)`, () => {
148+
beforeEach(() => {
149+
cy.visit(`/navigation-effects`).waitForRouteChange()
150+
})
151+
152+
it(`should trigger an effect after a search param has changed`, () => {
153+
cy.findByTestId(`effect-message`).should(`have.text`, ``)
154+
cy.findByTestId(`send-search-message`).click().waitForRouteChange()
155+
cy.findByTestId(`effect-message`).should(
156+
`have.text`,
157+
`?message=searchParam`
158+
)
159+
})
160+
161+
it(`should trigger an effect after the hash has changed`, () => {
162+
cy.findByTestId(`effect-message`).should(`have.text`, ``)
163+
cy.findByTestId(`send-hash-message`).click().waitForRouteChange()
164+
cy.findByTestId(`effect-message`).should(`have.text`, `#message-hash`)
165+
})
166+
167+
it(`should trigger an effect after the state has changed`, () => {
168+
cy.findByTestId(`effect-message`).should(`have.text`, ``)
169+
cy.findByTestId(`send-state-message`).click().waitForRouteChange()
170+
cy.findByTestId(`effect-message`).should(
171+
`have.text`,
172+
`this is a message using the state`
173+
)
174+
})
175+
})
216176

217177
describe(`Route lifecycle update order`, () => {
218178
it(`calls onPreRouteUpdate, render and onRouteUpdate the correct amount of times on route change`, () => {

0 commit comments

Comments
 (0)