-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
app.js
235 lines (206 loc) · 7.1 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
import React from "react"
import ReactDOM from "react-dom"
import domReady from "@mikaelkristiansson/domready"
import io from "socket.io-client"
import socketIo from "./socketIo"
import emitter from "./emitter"
import { apiRunner, apiRunnerAsync } from "./api-runner-browser"
import { setLoader, publicLoader } from "./loader"
import { Indicator } from "./loading-indicator/indicator"
import DevLoader from "./dev-loader"
import asyncRequires from "$virtual/async-requires"
// Generated during bootstrap
import matchPaths from "$virtual/match-paths.json"
import { LoadingIndicatorEventHandler } from "./loading-indicator"
import Root from "./root"
import { init as navigationInit } from "./navigation"
// ensure in develop we have at least some .css (even if it's empty).
// this is so there is no warning about not matching content-type when site doesn't include any regular css (for example when css-in-js is used)
// this also make sure that if all css is removed in develop we are not left with stale commons.css that have stale content
import "./blank.css"
// Enable fast-refresh for virtual sync-requires, gatsby-browser & navigation
// To ensure that our <Root /> component can hot reload in case anything below doesn't
// satisfy fast-refresh constraints
module.hot.accept([
`$virtual/async-requires`,
`./api-runner-browser`,
`./navigation`,
])
window.___emitter = emitter
const loader = new DevLoader(asyncRequires, matchPaths)
setLoader(loader)
loader.setApiRunner(apiRunner)
window.___loader = publicLoader
// Do dummy dynamic import so the jsonp __webpack_require__.e is added to the commons.js
// bundle. This ensures hot reloading doesn't break when someone first adds
// a dynamic import.
//
// Without this, the runtime breaks with a
// "TypeError: __webpack_require__.e is not a function"
// error.
export function notCalledFunction() {
return import(`./dummy`)
}
// Let the site/plugins run code very early.
apiRunnerAsync(`onClientEntry`).then(() => {
// Hook up the client to socket.io on server
const socket = socketIo()
if (socket) {
socket.on(`reload`, () => {
window.location.reload()
})
}
fetch(`/___services`)
.then(res => res.json())
.then(services => {
if (services.developstatusserver) {
let isRestarting = false
const parentSocket = io(
`${window.location.protocol}//${window.location.hostname}:${services.developstatusserver.port}`
)
parentSocket.on(`structured-log`, msg => {
if (
!isRestarting &&
msg.type === `LOG_ACTION` &&
msg.action.type === `DEVELOP` &&
msg.action.payload === `RESTART_REQUIRED` &&
window.confirm(
`The develop process needs to be restarted for the changes to ${msg.action.dirtyFile} to be applied.\nDo you want to restart the develop process now?`
)
) {
isRestarting = true
parentSocket.emit(`develop:restart`, () => {
window.location.reload()
})
}
if (
isRestarting &&
msg.type === `LOG_ACTION` &&
msg.action.type === `SET_STATUS` &&
msg.action.payload === `SUCCESS`
) {
isRestarting = false
window.location.reload()
}
})
// Prevents certain browsers spamming XHR 'ERR_CONNECTION_REFUSED'
// errors within the console, such as when exiting the develop process.
parentSocket.on(`disconnect`, () => {
console.warn(
`[socket.io] Disconnected. Unable to perform health-check.`
)
parentSocket.close()
})
}
})
/**
* Service Workers are persistent by nature. They stick around,
* serving a cached version of the site if they aren't removed.
* This is especially frustrating when you need to test the
* production build on your local machine.
*
* Let's warn if we find service workers in development.
*/
if (`serviceWorker` in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
if (registrations.length > 0)
console.warn(
`Warning: found one or more service workers present.`,
`If your site isn't behaving as expected, you might want to remove these.`,
registrations
)
})
}
const rootElement = document.getElementById(`___gatsby`)
const focusEl = document.getElementById(`gatsby-focus-wrapper`)
// Client only pages have any empty body so we just do a normal
// render to avoid React complaining about hydration mis-matches.
let defaultRenderer = ReactDOM.render
if (focusEl && focusEl.children.length) {
if (ReactDOM.createRoot) {
defaultRenderer = ReactDOM.createRoot
} else {
defaultRenderer = ReactDOM.hydrate
}
}
const renderer = apiRunner(
`replaceHydrateFunction`,
undefined,
defaultRenderer
)[0]
let dismissLoadingIndicator
if (
process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`
) {
let indicatorMountElement
const showIndicatorTimeout = setTimeout(() => {
indicatorMountElement = document.createElement(
`first-render-loading-indicator`
)
document.body.append(indicatorMountElement)
ReactDOM.render(<Indicator />, indicatorMountElement)
}, 1000)
dismissLoadingIndicator = () => {
clearTimeout(showIndicatorTimeout)
if (indicatorMountElement) {
ReactDOM.unmountComponentAtNode(indicatorMountElement)
indicatorMountElement.remove()
}
}
}
Promise.all([
loader.loadPage(`/dev-404-page/`),
loader.loadPage(`/404.html`),
loader.loadPage(window.location.pathname),
]).then(() => {
navigationInit()
function onHydrated() {
apiRunner(`onInitialClientRender`)
// Render query on demand overlay
if (
process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR &&
process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`
) {
const indicatorMountElement = document.createElement(`div`)
indicatorMountElement.setAttribute(
`id`,
`query-on-demand-indicator-element`
)
document.body.append(indicatorMountElement)
if (renderer === ReactDOM.createRoot) {
renderer(indicatorMountElement).render(
<LoadingIndicatorEventHandler />
)
} else {
ReactDOM.render(
<LoadingIndicatorEventHandler />,
indicatorMountElement
)
}
}
}
function App() {
const onClientEntryRanRef = React.useRef(false)
React.useEffect(() => {
if (!onClientEntryRanRef.current) {
onClientEntryRanRef.current = true
onHydrated()
}
}, [])
return <Root />
}
domReady(() => {
if (dismissLoadingIndicator) {
dismissLoadingIndicator()
}
if (renderer === ReactDOM.createRoot) {
renderer(rootElement, {
hydrate: true,
}).render(<App />)
} else {
renderer(<App />, rootElement)
}
})
})
})