chore: removed reference directory (#2800)
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"globals": {
|
||||
"__PATH_PREFIX__": false,
|
||||
"___emitter": false
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
// prefer default export if available
|
||||
const preferDefault = m => (m && m.default) || m
|
||||
|
||||
exports.components = {
|
||||
"component---cache-dev-404-page-js": () => import("./../../dev-404-page.js" /* webpackChunkName: "component---cache-dev-404-page-js" */),
|
||||
"component---src-templates-reference-page-js": () => import("./../../../src/templates/reference-page.js" /* webpackChunkName: "component---src-templates-reference-page-js" */)
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
|
||||
export function isLoadingIndicatorEnabled() {
|
||||
return `Cypress` in window
|
||||
? false
|
||||
: true
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
[]
|
||||
@@ -1,10 +0,0 @@
|
||||
|
||||
// prefer default export if available
|
||||
const preferDefault = m => (m && m.default) || m
|
||||
|
||||
|
||||
exports.ssrComponents = {
|
||||
"component---cache-dev-404-page-js": preferDefault(require("/Users/oliverjuhl/Desktop/medusa/core/www/reference/.cache/dev-404-page.js")),
|
||||
"component---src-templates-reference-page-js": preferDefault(require("/Users/oliverjuhl/Desktop/medusa/core/www/reference/src/templates/reference-page.js"))
|
||||
}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
|
||||
// prefer default export if available
|
||||
const preferDefault = m => (m && m.default) || m
|
||||
|
||||
|
||||
exports.components = {
|
||||
"component---cache-dev-404-page-js": preferDefault(require("/Users/oliverjuhl/Desktop/medusa/core/www/reference/.cache/dev-404-page.js")),
|
||||
"component---src-templates-reference-page-js": preferDefault(require("/Users/oliverjuhl/Desktop/medusa/core/www/reference/src/templates/reference-page.js"))
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
module.exports = [{
|
||||
plugin: require('../node_modules/gatsby-plugin-anchor-links/gatsby-browser.js'),
|
||||
options: {"plugins":[],"offset":-100,"duration":1000},
|
||||
},{
|
||||
plugin: require('../node_modules/gatsby-remark-autolink-headers/gatsby-browser.js'),
|
||||
options: {"plugins":[],"elements":["h2","h3","h4"],"offsetY":0,"className":"anchor"},
|
||||
},{
|
||||
plugin: require('../node_modules/gatsby-plugin-theme-ui/gatsby-browser.js'),
|
||||
options: {"plugins":[]},
|
||||
},{
|
||||
plugin: require('../gatsby-browser.js'),
|
||||
options: {"plugins":[]},
|
||||
}]
|
||||
@@ -1,52 +0,0 @@
|
||||
const plugins = require(`./api-runner-browser-plugins`)
|
||||
const { getResourceURLsForPathname, loadPage, loadPageSync } =
|
||||
require(`./loader`).publicLoader
|
||||
|
||||
exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {
|
||||
// Hooks for gatsby-cypress's API handler
|
||||
if (process.env.CYPRESS_SUPPORT) {
|
||||
if (window.___apiHandler) {
|
||||
window.___apiHandler(api)
|
||||
} else if (window.___resolvedAPIs) {
|
||||
window.___resolvedAPIs.push(api)
|
||||
} else {
|
||||
window.___resolvedAPIs = [api]
|
||||
}
|
||||
}
|
||||
|
||||
let results = plugins.map(plugin => {
|
||||
if (!plugin.plugin[api]) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
args.getResourceURLsForPathname = getResourceURLsForPathname
|
||||
args.loadPage = loadPage
|
||||
args.loadPageSync = loadPageSync
|
||||
|
||||
const result = plugin.plugin[api](args, plugin.options)
|
||||
if (result && argTransform) {
|
||||
args = argTransform({ args, result, plugin })
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
// Filter out undefined results.
|
||||
results = results.filter(result => typeof result !== `undefined`)
|
||||
|
||||
if (results.length > 0) {
|
||||
return results
|
||||
} else if (defaultReturn) {
|
||||
return [defaultReturn]
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
exports.apiRunnerAsync = (api, args, defaultReturn) =>
|
||||
plugins.reduce(
|
||||
(previous, next) =>
|
||||
next.plugin[api]
|
||||
? previous.then(() => next.plugin[api](args, next.options))
|
||||
: previous,
|
||||
Promise.resolve()
|
||||
)
|
||||
@@ -1,105 +0,0 @@
|
||||
var plugins = [{
|
||||
name: 'gatsby-plugin-react-helmet',
|
||||
plugin: require('/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/gatsby-plugin-react-helmet/gatsby-ssr'),
|
||||
options: {"plugins":[]},
|
||||
},{
|
||||
name: 'gatsby-remark-autolink-headers',
|
||||
plugin: require('/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/gatsby-remark-autolink-headers/gatsby-ssr'),
|
||||
options: {"plugins":[],"elements":["h2","h3","h4"],"offsetY":0,"className":"anchor"},
|
||||
},{
|
||||
name: 'gatsby-plugin-theme-ui',
|
||||
plugin: require('/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/gatsby-plugin-theme-ui/gatsby-ssr'),
|
||||
options: {"plugins":[]},
|
||||
},{
|
||||
name: 'default-site-plugin',
|
||||
plugin: require('/Users/oliverjuhl/Desktop/medusa/core/www/reference/gatsby-ssr'),
|
||||
options: {"plugins":[]},
|
||||
}]
|
||||
/* global plugins */
|
||||
// During bootstrap, we write requires at top of this file which looks like:
|
||||
// var plugins = [
|
||||
// {
|
||||
// plugin: require("/path/to/plugin1/gatsby-ssr.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// {
|
||||
// plugin: require("/path/to/plugin2/gatsby-ssr.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// ]
|
||||
|
||||
const apis = require(`./api-ssr-docs`)
|
||||
|
||||
function augmentErrorWithPlugin(plugin, err) {
|
||||
if (plugin.name !== `default-site-plugin`) {
|
||||
// default-site-plugin is user code and will print proper stack trace,
|
||||
// so no point in annotating error message pointing out which plugin is root of the problem
|
||||
err.message += ` (from plugin: ${plugin.name})`
|
||||
}
|
||||
|
||||
throw err
|
||||
}
|
||||
|
||||
export function apiRunner(api, args, defaultReturn, argTransform) {
|
||||
if (!apis[api]) {
|
||||
console.log(`This API doesn't exist`, api)
|
||||
}
|
||||
|
||||
const results = []
|
||||
plugins.forEach(plugin => {
|
||||
const apiFn = plugin.plugin[api]
|
||||
if (!apiFn) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = apiFn(args, plugin.options)
|
||||
|
||||
if (result && argTransform) {
|
||||
args = argTransform({ args, result })
|
||||
}
|
||||
|
||||
// This if case keeps behaviour as before, we should allow undefined here as the api is defined
|
||||
// TODO V4
|
||||
if (typeof result !== `undefined`) {
|
||||
results.push(result)
|
||||
}
|
||||
} catch (e) {
|
||||
augmentErrorWithPlugin(plugin, e)
|
||||
}
|
||||
})
|
||||
|
||||
return results.length ? results : [defaultReturn]
|
||||
}
|
||||
|
||||
export async function apiRunnerAsync(api, args, defaultReturn, argTransform) {
|
||||
if (!apis[api]) {
|
||||
console.log(`This API doesn't exist`, api)
|
||||
}
|
||||
|
||||
const results = []
|
||||
for (const plugin of plugins) {
|
||||
const apiFn = plugin.plugin[api]
|
||||
if (!apiFn) {
|
||||
continue
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await apiFn(args, plugin.options)
|
||||
|
||||
if (result && argTransform) {
|
||||
args = argTransform({ args, result })
|
||||
}
|
||||
|
||||
// This if case keeps behaviour as before, we should allow undefined here as the api is defined
|
||||
// TODO V4
|
||||
if (typeof result !== `undefined`) {
|
||||
results.push(result)
|
||||
}
|
||||
} catch (e) {
|
||||
augmentErrorWithPlugin(plugin, e)
|
||||
}
|
||||
}
|
||||
|
||||
return results.length ? results : [defaultReturn]
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
/**
|
||||
* Object containing options defined in `gatsby-config.js`
|
||||
* @typedef {object} pluginOptions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Replace the default server renderer. This is useful for integration with
|
||||
* Redux, css-in-js libraries, etc. that need custom setups for server
|
||||
* rendering.
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {ReactNode} $0.bodyComponent The React element to be rendered as the page body
|
||||
* @param {function} $0.replaceBodyHTMLString Call this with the HTML string
|
||||
* you render. **WARNING** if multiple plugins implement this API it's the
|
||||
* last plugin that "wins". TODO implement an automated warning against this.
|
||||
* @param {function} $0.setHeadComponents Takes an array of components as its
|
||||
* first argument which are added to the `headComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setHtmlAttributes Takes an object of props which will
|
||||
* spread into the `<html>` component.
|
||||
* @param {function} $0.setBodyAttributes Takes an object of props which will
|
||||
* spread into the `<body>` component.
|
||||
* @param {function} $0.setPreBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setPostBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setBodyProps Takes an object of data which
|
||||
* is merged with other body props and passed to `html.js` as `bodyProps`.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // From gatsby-plugin-glamor
|
||||
* const { renderToString } = require("react-dom/server")
|
||||
* const inline = require("glamor-inline")
|
||||
*
|
||||
* exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
|
||||
* const bodyHTML = renderToString(bodyComponent)
|
||||
* const inlinedHTML = inline(bodyHTML)
|
||||
*
|
||||
* replaceBodyHTMLString(inlinedHTML)
|
||||
* }
|
||||
*/
|
||||
exports.replaceRenderer = true
|
||||
|
||||
/**
|
||||
* Called after every page Gatsby server renders while building HTML so you can
|
||||
* set head and body components to be rendered in your `html.js`.
|
||||
*
|
||||
* Gatsby does a two-pass render for HTML. It loops through your pages first
|
||||
* rendering only the body and then takes the result body HTML string and
|
||||
* passes it as the `body` prop to your `html.js` to complete the render.
|
||||
*
|
||||
* It's often handy to be able to send custom components to your `html.js`.
|
||||
* For example, it's a very common pattern for React.js libraries that
|
||||
* support server rendering to pull out data generated during the render to
|
||||
* add to your HTML.
|
||||
*
|
||||
* Using this API over [`replaceRenderer`](#replaceRenderer) is preferable as
|
||||
* multiple plugins can implement this API where only one plugin can take
|
||||
* over server rendering. However, if your plugin requires taking over server
|
||||
* rendering then that's the one to
|
||||
* use
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {function} $0.setHeadComponents Takes an array of components as its
|
||||
* first argument which are added to the `headComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setHtmlAttributes Takes an object of props which will
|
||||
* spread into the `<html>` component.
|
||||
* @param {function} $0.setBodyAttributes Takes an object of props which will
|
||||
* spread into the `<body>` component.
|
||||
* @param {function} $0.setPreBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setPostBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setBodyProps Takes an object of data which
|
||||
* is merged with other body props and passed to `html.js` as `bodyProps`.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // Import React so that you can use JSX in HeadComponents
|
||||
* const React = require("react")
|
||||
*
|
||||
* const HtmlAttributes = {
|
||||
* lang: "en"
|
||||
* }
|
||||
*
|
||||
* const HeadComponents = [
|
||||
* <script key="my-script" src="https://gatsby.dev/my-script" />
|
||||
* ]
|
||||
*
|
||||
* const BodyAttributes = {
|
||||
* "data-theme": "dark"
|
||||
* }
|
||||
*
|
||||
* exports.onRenderBody = ({
|
||||
* setHeadComponents,
|
||||
* setHtmlAttributes,
|
||||
* setBodyAttributes
|
||||
* }, pluginOptions) => {
|
||||
* setHtmlAttributes(HtmlAttributes)
|
||||
* setHeadComponents(HeadComponents)
|
||||
* setBodyAttributes(BodyAttributes)
|
||||
* }
|
||||
*/
|
||||
exports.onRenderBody = true
|
||||
|
||||
/**
|
||||
* Called after every page Gatsby server renders while building HTML so you can
|
||||
* replace head components to be rendered in your `html.js`. This is useful if
|
||||
* you need to reorder scripts or styles added by other plugins.
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {Array<ReactNode>} $0.getHeadComponents Returns the current `headComponents` array.
|
||||
* @param {function} $0.replaceHeadComponents Takes an array of components as its
|
||||
* first argument which replace the `headComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {Array<ReactNode>} $0.getPreBodyComponents Returns the current `preBodyComponents` array.
|
||||
* @param {function} $0.replacePreBodyComponents Takes an array of components as its
|
||||
* first argument which replace the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {Array<ReactNode>} $0.getPostBodyComponents Returns the current `postBodyComponents` array.
|
||||
* @param {function} $0.replacePostBodyComponents Takes an array of components as its
|
||||
* first argument which replace the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // Move Typography.js styles to the top of the head section so they're loaded first.
|
||||
* exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
|
||||
* const headComponents = getHeadComponents()
|
||||
* headComponents.sort((x, y) => {
|
||||
* if (x.key === 'TypographyStyle') {
|
||||
* return -1
|
||||
* } else if (y.key === 'TypographyStyle') {
|
||||
* return 1
|
||||
* }
|
||||
* return 0
|
||||
* })
|
||||
* replaceHeadComponents(headComponents)
|
||||
* }
|
||||
*/
|
||||
exports.onPreRenderHTML = true
|
||||
|
||||
/**
|
||||
* Allow a plugin to wrap the page element.
|
||||
*
|
||||
* This is useful for setting wrapper components around pages that won't get
|
||||
* unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
|
||||
*
|
||||
* _Note:_
|
||||
* There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement).
|
||||
* It is recommended to use both APIs together.
|
||||
* For example usage, check out [Using i18n](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n).
|
||||
* @param {object} $0
|
||||
* @param {ReactNode} $0.element The "Page" React Element built by Gatsby.
|
||||
* @param {object} $0.props Props object used by page.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @returns {ReactNode} Wrapped element
|
||||
* @example
|
||||
* const React = require("react")
|
||||
* const Layout = require("./src/components/layout").default
|
||||
*
|
||||
* exports.wrapPageElement = ({ element, props }) => {
|
||||
* // props provide same data to Layout as Page element will get
|
||||
* // including location, data, etc - you don't need to pass it
|
||||
* return <Layout {...props}>{element}</Layout>
|
||||
* }
|
||||
*/
|
||||
exports.wrapPageElement = true
|
||||
|
||||
/**
|
||||
* Allow a plugin to wrap the root element.
|
||||
*
|
||||
* This is useful to set up any Provider components that will wrap your application.
|
||||
* For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
|
||||
*
|
||||
* _Note:_
|
||||
* There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapRootElement).
|
||||
* It is recommended to use both APIs together.
|
||||
* For example usage, check out [Using redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux).
|
||||
* @param {object} $0
|
||||
* @param {ReactNode} $0.element The "Root" React Element built by Gatsby.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @returns {ReactNode} Wrapped element
|
||||
* @example
|
||||
* const React = require("react")
|
||||
* const { Provider } = require("react-redux")
|
||||
*
|
||||
* const createStore = require("./src/state/createStore")
|
||||
* const store = createStore()
|
||||
*
|
||||
* exports.wrapRootElement = ({ element }) => {
|
||||
* return (
|
||||
* <Provider store={store}>
|
||||
* {element}
|
||||
* </Provider>
|
||||
* )
|
||||
* }
|
||||
*/
|
||||
exports.wrapRootElement = true
|
||||
@@ -1,257 +0,0 @@
|
||||
import React from "react"
|
||||
import ReactDOM from "react-dom"
|
||||
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`],
|
||||
() => {
|
||||
// asyncRequires should be automatically updated here (due to ESM import and webpack HMR spec),
|
||||
// but loader doesn't know that and needs to be manually nudged
|
||||
loader.updateAsyncRequires(asyncRequires)
|
||||
}
|
||||
)
|
||||
|
||||
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.hydrateRoot) {
|
||||
defaultRenderer = ReactDOM.hydrateRoot
|
||||
} 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.hydrateRoot) {
|
||||
ReactDOM.createRoot(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 />
|
||||
}
|
||||
|
||||
function runRender() {
|
||||
if (dismissLoadingIndicator) {
|
||||
dismissLoadingIndicator()
|
||||
}
|
||||
|
||||
if (renderer === ReactDOM.hydrateRoot) {
|
||||
renderer(rootElement, <App />)
|
||||
} else {
|
||||
renderer(<App />, rootElement)
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/madrobby/zepto/blob/b5ed8d607f67724788ec9ff492be297f64d47dfc/src/zepto.js#L439-L450
|
||||
// TODO remove IE 10 support
|
||||
const doc = document
|
||||
if (
|
||||
doc.readyState === `complete` ||
|
||||
(doc.readyState !== `loading` && !doc.documentElement.doScroll)
|
||||
) {
|
||||
setTimeout(function () {
|
||||
runRender()
|
||||
}, 0)
|
||||
} else {
|
||||
const handler = function () {
|
||||
doc.removeEventListener(`DOMContentLoaded`, handler, false)
|
||||
window.removeEventListener(`load`, handler, false)
|
||||
|
||||
runRender()
|
||||
}
|
||||
|
||||
doc.addEventListener(`DOMContentLoaded`, handler, false)
|
||||
window.addEventListener(`load`, handler, false)
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -1,8 +0,0 @@
|
||||
// prefer default export if available
|
||||
const preferDefault = m => (m && m.default) || m
|
||||
|
||||
exports.components = {
|
||||
"component---cache-dev-404-page-js": () => import("./../../dev-404-page.js" /* webpackChunkName: "component---cache-dev-404-page-js" */),
|
||||
"component---src-templates-reference-page-js": () => import("./../../../src/templates/reference-page.js" /* webpackChunkName: "component---src-templates-reference-page-js" */)
|
||||
}
|
||||
|
||||
@@ -1,188 +0,0 @@
|
||||
{
|
||||
"stages": {
|
||||
"develop": {
|
||||
"plugins": [
|
||||
{
|
||||
"name": "babel-plugin-lodash",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@emotion/babel-preset-css-prop/dist/emotion-babel-preset-css-prop.cjs.js",
|
||||
"options": {
|
||||
"sourceMap": true,
|
||||
"autoLabel": "dev-only",
|
||||
"plugins": [],
|
||||
"labelFormat": "[local]",
|
||||
"cssPropOptimization": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/preset-typescript/lib/index.js",
|
||||
"options": {
|
||||
"plugins": [],
|
||||
"allExtensions": false,
|
||||
"isTSX": false,
|
||||
"jsxPragma": "React"
|
||||
}
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"cacheDirectory": true,
|
||||
"sourceType": "unambiguous"
|
||||
}
|
||||
},
|
||||
"develop-html": {
|
||||
"plugins": [
|
||||
{
|
||||
"name": "babel-plugin-lodash",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@emotion/babel-preset-css-prop/dist/emotion-babel-preset-css-prop.cjs.js",
|
||||
"options": {
|
||||
"sourceMap": true,
|
||||
"autoLabel": "dev-only",
|
||||
"plugins": [],
|
||||
"labelFormat": "[local]",
|
||||
"cssPropOptimization": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/preset-typescript/lib/index.js",
|
||||
"options": {
|
||||
"plugins": [],
|
||||
"allExtensions": false,
|
||||
"isTSX": false,
|
||||
"jsxPragma": "React"
|
||||
}
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"cacheDirectory": true,
|
||||
"sourceType": "unambiguous"
|
||||
}
|
||||
},
|
||||
"build-html": {
|
||||
"plugins": [
|
||||
{
|
||||
"name": "babel-plugin-lodash",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@emotion/babel-preset-css-prop/dist/emotion-babel-preset-css-prop.cjs.js",
|
||||
"options": {
|
||||
"sourceMap": true,
|
||||
"autoLabel": "dev-only",
|
||||
"plugins": [],
|
||||
"labelFormat": "[local]",
|
||||
"cssPropOptimization": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/preset-typescript/lib/index.js",
|
||||
"options": {
|
||||
"plugins": [],
|
||||
"allExtensions": false,
|
||||
"isTSX": false,
|
||||
"jsxPragma": "React"
|
||||
}
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"cacheDirectory": true,
|
||||
"sourceType": "unambiguous"
|
||||
}
|
||||
},
|
||||
"build-javascript": {
|
||||
"plugins": [
|
||||
{
|
||||
"name": "babel-plugin-lodash",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
|
||||
"options": {}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/plugin-proposal-numeric-separator/lib/index.js",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@emotion/babel-preset-css-prop/dist/emotion-babel-preset-css-prop.cjs.js",
|
||||
"options": {
|
||||
"sourceMap": true,
|
||||
"autoLabel": "dev-only",
|
||||
"plugins": [],
|
||||
"labelFormat": "[local]",
|
||||
"cssPropOptimization": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "/Users/oliverjuhl/Desktop/medusa/core/www/reference/node_modules/@babel/preset-typescript/lib/index.js",
|
||||
"options": {
|
||||
"plugins": [],
|
||||
"allExtensions": false,
|
||||
"isTSX": false,
|
||||
"jsxPragma": "React"
|
||||
}
|
||||
}
|
||||
],
|
||||
"options": {
|
||||
"cacheDirectory": true,
|
||||
"sourceType": "unambiguous"
|
||||
}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
">0.25%",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// During bootstrap, we write requires at top of this file which looks
|
||||
// basically like:
|
||||
// module.exports = [
|
||||
// {
|
||||
// plugin: require("/path/to/plugin1/gatsby-browser.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// {
|
||||
// plugin: require("/path/to/plugin2/gatsby-browser.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// ]
|
||||
module.exports = [];
|
||||
@@ -1,55 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const plugins = require(`./api-runner-browser-plugins`);
|
||||
|
||||
const {
|
||||
getResourceURLsForPathname,
|
||||
loadPage,
|
||||
loadPageSync
|
||||
} = require(`./loader`).publicLoader;
|
||||
|
||||
exports.apiRunner = (api, args = {}, defaultReturn, argTransform) => {
|
||||
// Hooks for gatsby-cypress's API handler
|
||||
if (process.env.CYPRESS_SUPPORT) {
|
||||
if (window.___apiHandler) {
|
||||
window.___apiHandler(api);
|
||||
} else if (window.___resolvedAPIs) {
|
||||
window.___resolvedAPIs.push(api);
|
||||
} else {
|
||||
window.___resolvedAPIs = [api];
|
||||
}
|
||||
}
|
||||
|
||||
let results = plugins.map(plugin => {
|
||||
if (!plugin.plugin[api]) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
args.getResourceURLsForPathname = getResourceURLsForPathname;
|
||||
args.loadPage = loadPage;
|
||||
args.loadPageSync = loadPageSync;
|
||||
const result = plugin.plugin[api](args, plugin.options);
|
||||
|
||||
if (result && argTransform) {
|
||||
args = argTransform({
|
||||
args,
|
||||
result,
|
||||
plugin
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}); // Filter out undefined results.
|
||||
|
||||
results = results.filter(result => typeof result !== `undefined`);
|
||||
|
||||
if (results.length > 0) {
|
||||
return results;
|
||||
} else if (defaultReturn) {
|
||||
return [defaultReturn];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
exports.apiRunnerAsync = (api, args, defaultReturn) => plugins.reduce((previous, next) => next.plugin[api] ? previous.then(() => next.plugin[api](args, next.options)) : previous, Promise.resolve());
|
||||
@@ -1,101 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.apiRunner = apiRunner;
|
||||
exports.apiRunnerAsync = apiRunnerAsync;
|
||||
|
||||
/* global plugins */
|
||||
// During bootstrap, we write requires at top of this file which looks like:
|
||||
// var plugins = [
|
||||
// {
|
||||
// plugin: require("/path/to/plugin1/gatsby-ssr.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// {
|
||||
// plugin: require("/path/to/plugin2/gatsby-ssr.js"),
|
||||
// options: { ... },
|
||||
// },
|
||||
// ]
|
||||
const apis = require(`./api-ssr-docs`);
|
||||
|
||||
function augmentErrorWithPlugin(plugin, err) {
|
||||
if (plugin.name !== `default-site-plugin`) {
|
||||
// default-site-plugin is user code and will print proper stack trace,
|
||||
// so no point in annotating error message pointing out which plugin is root of the problem
|
||||
err.message += ` (from plugin: ${plugin.name})`;
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
|
||||
function apiRunner(api, args, defaultReturn, argTransform) {
|
||||
if (!apis[api]) {
|
||||
console.log(`This API doesn't exist`, api);
|
||||
}
|
||||
|
||||
const results = [];
|
||||
plugins.forEach(plugin => {
|
||||
const apiFn = plugin.plugin[api];
|
||||
|
||||
if (!apiFn) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = apiFn(args, plugin.options);
|
||||
|
||||
if (result && argTransform) {
|
||||
args = argTransform({
|
||||
args,
|
||||
result
|
||||
});
|
||||
} // This if case keeps behaviour as before, we should allow undefined here as the api is defined
|
||||
// TODO V4
|
||||
|
||||
|
||||
if (typeof result !== `undefined`) {
|
||||
results.push(result);
|
||||
}
|
||||
} catch (e) {
|
||||
augmentErrorWithPlugin(plugin, e);
|
||||
}
|
||||
});
|
||||
return results.length ? results : [defaultReturn];
|
||||
}
|
||||
|
||||
async function apiRunnerAsync(api, args, defaultReturn, argTransform) {
|
||||
if (!apis[api]) {
|
||||
console.log(`This API doesn't exist`, api);
|
||||
}
|
||||
|
||||
const results = [];
|
||||
|
||||
for (const plugin of plugins) {
|
||||
const apiFn = plugin.plugin[api];
|
||||
|
||||
if (!apiFn) {
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await apiFn(args, plugin.options);
|
||||
|
||||
if (result && argTransform) {
|
||||
args = argTransform({
|
||||
args,
|
||||
result
|
||||
});
|
||||
} // This if case keeps behaviour as before, we should allow undefined here as the api is defined
|
||||
// TODO V4
|
||||
|
||||
|
||||
if (typeof result !== `undefined`) {
|
||||
results.push(result);
|
||||
}
|
||||
} catch (e) {
|
||||
augmentErrorWithPlugin(plugin, e);
|
||||
}
|
||||
}
|
||||
|
||||
return results.length ? results : [defaultReturn];
|
||||
}
|
||||
@@ -1,207 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Object containing options defined in `gatsby-config.js`
|
||||
* @typedef {object} pluginOptions
|
||||
*/
|
||||
|
||||
/**
|
||||
* Replace the default server renderer. This is useful for integration with
|
||||
* Redux, css-in-js libraries, etc. that need custom setups for server
|
||||
* rendering.
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {ReactNode} $0.bodyComponent The React element to be rendered as the page body
|
||||
* @param {function} $0.replaceBodyHTMLString Call this with the HTML string
|
||||
* you render. **WARNING** if multiple plugins implement this API it's the
|
||||
* last plugin that "wins". TODO implement an automated warning against this.
|
||||
* @param {function} $0.setHeadComponents Takes an array of components as its
|
||||
* first argument which are added to the `headComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setHtmlAttributes Takes an object of props which will
|
||||
* spread into the `<html>` component.
|
||||
* @param {function} $0.setBodyAttributes Takes an object of props which will
|
||||
* spread into the `<body>` component.
|
||||
* @param {function} $0.setPreBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setPostBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setBodyProps Takes an object of data which
|
||||
* is merged with other body props and passed to `html.js` as `bodyProps`.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // From gatsby-plugin-glamor
|
||||
* const { renderToString } = require("react-dom/server")
|
||||
* const inline = require("glamor-inline")
|
||||
*
|
||||
* exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
|
||||
* const bodyHTML = renderToString(bodyComponent)
|
||||
* const inlinedHTML = inline(bodyHTML)
|
||||
*
|
||||
* replaceBodyHTMLString(inlinedHTML)
|
||||
* }
|
||||
*/
|
||||
exports.replaceRenderer = true;
|
||||
/**
|
||||
* Called after every page Gatsby server renders while building HTML so you can
|
||||
* set head and body components to be rendered in your `html.js`.
|
||||
*
|
||||
* Gatsby does a two-pass render for HTML. It loops through your pages first
|
||||
* rendering only the body and then takes the result body HTML string and
|
||||
* passes it as the `body` prop to your `html.js` to complete the render.
|
||||
*
|
||||
* It's often handy to be able to send custom components to your `html.js`.
|
||||
* For example, it's a very common pattern for React.js libraries that
|
||||
* support server rendering to pull out data generated during the render to
|
||||
* add to your HTML.
|
||||
*
|
||||
* Using this API over [`replaceRenderer`](#replaceRenderer) is preferable as
|
||||
* multiple plugins can implement this API where only one plugin can take
|
||||
* over server rendering. However, if your plugin requires taking over server
|
||||
* rendering then that's the one to
|
||||
* use
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {function} $0.setHeadComponents Takes an array of components as its
|
||||
* first argument which are added to the `headComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setHtmlAttributes Takes an object of props which will
|
||||
* spread into the `<html>` component.
|
||||
* @param {function} $0.setBodyAttributes Takes an object of props which will
|
||||
* spread into the `<body>` component.
|
||||
* @param {function} $0.setPreBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setPostBodyComponents Takes an array of components as its
|
||||
* first argument which are added to the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component.
|
||||
* @param {function} $0.setBodyProps Takes an object of data which
|
||||
* is merged with other body props and passed to `html.js` as `bodyProps`.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // Import React so that you can use JSX in HeadComponents
|
||||
* const React = require("react")
|
||||
*
|
||||
* const HtmlAttributes = {
|
||||
* lang: "en"
|
||||
* }
|
||||
*
|
||||
* const HeadComponents = [
|
||||
* <script key="my-script" src="https://gatsby.dev/my-script" />
|
||||
* ]
|
||||
*
|
||||
* const BodyAttributes = {
|
||||
* "data-theme": "dark"
|
||||
* }
|
||||
*
|
||||
* exports.onRenderBody = ({
|
||||
* setHeadComponents,
|
||||
* setHtmlAttributes,
|
||||
* setBodyAttributes
|
||||
* }, pluginOptions) => {
|
||||
* setHtmlAttributes(HtmlAttributes)
|
||||
* setHeadComponents(HeadComponents)
|
||||
* setBodyAttributes(BodyAttributes)
|
||||
* }
|
||||
*/
|
||||
|
||||
exports.onRenderBody = true;
|
||||
/**
|
||||
* Called after every page Gatsby server renders while building HTML so you can
|
||||
* replace head components to be rendered in your `html.js`. This is useful if
|
||||
* you need to reorder scripts or styles added by other plugins.
|
||||
* @param {object} $0
|
||||
* @param {string} $0.pathname The pathname of the page currently being rendered.
|
||||
* @param {Array<ReactNode>} $0.getHeadComponents Returns the current `headComponents` array.
|
||||
* @param {function} $0.replaceHeadComponents Takes an array of components as its
|
||||
* first argument which replace the `headComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {Array<ReactNode>} $0.getPreBodyComponents Returns the current `preBodyComponents` array.
|
||||
* @param {function} $0.replacePreBodyComponents Takes an array of components as its
|
||||
* first argument which replace the `preBodyComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {Array<ReactNode>} $0.getPostBodyComponents Returns the current `postBodyComponents` array.
|
||||
* @param {function} $0.replacePostBodyComponents Takes an array of components as its
|
||||
* first argument which replace the `postBodyComponents` array which is passed
|
||||
* to the `html.js` component. **WARNING** if multiple plugins implement this
|
||||
* API it's the last plugin that "wins".
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @example
|
||||
* // Move Typography.js styles to the top of the head section so they're loaded first.
|
||||
* exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
|
||||
* const headComponents = getHeadComponents()
|
||||
* headComponents.sort((x, y) => {
|
||||
* if (x.key === 'TypographyStyle') {
|
||||
* return -1
|
||||
* } else if (y.key === 'TypographyStyle') {
|
||||
* return 1
|
||||
* }
|
||||
* return 0
|
||||
* })
|
||||
* replaceHeadComponents(headComponents)
|
||||
* }
|
||||
*/
|
||||
|
||||
exports.onPreRenderHTML = true;
|
||||
/**
|
||||
* Allow a plugin to wrap the page element.
|
||||
*
|
||||
* This is useful for setting wrapper components around pages that won't get
|
||||
* unmounted on page changes. For setting Provider components, use [wrapRootElement](#wrapRootElement).
|
||||
*
|
||||
* _Note:_
|
||||
* There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapPageElement).
|
||||
* It is recommended to use both APIs together.
|
||||
* For example usage, check out [Using i18n](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n).
|
||||
* @param {object} $0
|
||||
* @param {ReactNode} $0.element The "Page" React Element built by Gatsby.
|
||||
* @param {object} $0.props Props object used by page.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @returns {ReactNode} Wrapped element
|
||||
* @example
|
||||
* const React = require("react")
|
||||
* const Layout = require("./src/components/layout").default
|
||||
*
|
||||
* exports.wrapPageElement = ({ element, props }) => {
|
||||
* // props provide same data to Layout as Page element will get
|
||||
* // including location, data, etc - you don't need to pass it
|
||||
* return <Layout {...props}>{element}</Layout>
|
||||
* }
|
||||
*/
|
||||
|
||||
exports.wrapPageElement = true;
|
||||
/**
|
||||
* Allow a plugin to wrap the root element.
|
||||
*
|
||||
* This is useful to set up any Provider components that will wrap your application.
|
||||
* For setting persistent UI elements around pages use [wrapPageElement](#wrapPageElement).
|
||||
*
|
||||
* _Note:_
|
||||
* There is an equivalent hook in Gatsby's [Browser API](/docs/browser-apis/#wrapRootElement).
|
||||
* It is recommended to use both APIs together.
|
||||
* For example usage, check out [Using redux](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux).
|
||||
* @param {object} $0
|
||||
* @param {ReactNode} $0.element The "Root" React Element built by Gatsby.
|
||||
* @param {pluginOptions} pluginOptions
|
||||
* @returns {ReactNode} Wrapped element
|
||||
* @example
|
||||
* const React = require("react")
|
||||
* const { Provider } = require("react-redux")
|
||||
*
|
||||
* const createStore = require("./src/state/createStore")
|
||||
* const store = createStore()
|
||||
*
|
||||
* exports.wrapRootElement = ({ element }) => {
|
||||
* return (
|
||||
* <Provider store={store}>
|
||||
* {element}
|
||||
* </Provider>
|
||||
* )
|
||||
* }
|
||||
*/
|
||||
|
||||
exports.wrapRootElement = true;
|
||||
@@ -1,217 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.notCalledFunction = notCalledFunction;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _reactDom = _interopRequireDefault(require("react-dom"));
|
||||
|
||||
var _socket = _interopRequireDefault(require("socket.io-client"));
|
||||
|
||||
var _socketIo = _interopRequireDefault(require("./socketIo"));
|
||||
|
||||
var _emitter = _interopRequireDefault(require("./emitter"));
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
var _loader = require("./loader");
|
||||
|
||||
var _indicator = require("./loading-indicator/indicator");
|
||||
|
||||
var _devLoader = _interopRequireDefault(require("./dev-loader"));
|
||||
|
||||
var _asyncRequires = _interopRequireDefault(require("$virtual/async-requires"));
|
||||
|
||||
var _matchPaths = _interopRequireDefault(require("$virtual/match-paths.json"));
|
||||
|
||||
var _loadingIndicator = require("./loading-indicator");
|
||||
|
||||
var _root = _interopRequireDefault(require("./root"));
|
||||
|
||||
var _navigation = require("./navigation");
|
||||
|
||||
require("./blank.css");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
// 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`], () => {
|
||||
// asyncRequires should be automatically updated here (due to ESM import and webpack HMR spec),
|
||||
// but loader doesn't know that and needs to be manually nudged
|
||||
loader.updateAsyncRequires(_asyncRequires.default);
|
||||
});
|
||||
window.___emitter = _emitter.default;
|
||||
const loader = new _devLoader.default(_asyncRequires.default, _matchPaths.default);
|
||||
(0, _loader.setLoader)(loader);
|
||||
loader.setApiRunner(_apiRunnerBrowser.apiRunner);
|
||||
window.___loader = _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.
|
||||
|
||||
function notCalledFunction() {
|
||||
return Promise.resolve().then(() => _interopRequireWildcard(require(`./dummy`)));
|
||||
} // Let the site/plugins run code very early.
|
||||
|
||||
|
||||
(0, _apiRunnerBrowser.apiRunnerAsync)(`onClientEntry`).then(() => {
|
||||
// Hook up the client to socket.io on server
|
||||
const socket = (0, _socketIo.default)();
|
||||
|
||||
if (socket) {
|
||||
socket.on(`reload`, () => {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
fetch(`/___services`).then(res => res.json()).then(services => {
|
||||
if (services.developstatusserver) {
|
||||
let isRestarting = false;
|
||||
const parentSocket = (0, _socket.default)(`${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.default.render;
|
||||
|
||||
if (focusEl && focusEl.children.length) {
|
||||
if (_reactDom.default.hydrateRoot) {
|
||||
defaultRenderer = _reactDom.default.hydrateRoot;
|
||||
} else {
|
||||
defaultRenderer = _reactDom.default.hydrate;
|
||||
}
|
||||
}
|
||||
|
||||
const renderer = (0, _apiRunnerBrowser.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.default.render( /*#__PURE__*/_react.default.createElement(_indicator.Indicator, null), indicatorMountElement);
|
||||
}, 1000);
|
||||
|
||||
dismissLoadingIndicator = () => {
|
||||
clearTimeout(showIndicatorTimeout);
|
||||
|
||||
if (indicatorMountElement) {
|
||||
_reactDom.default.unmountComponentAtNode(indicatorMountElement);
|
||||
|
||||
indicatorMountElement.remove();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Promise.all([loader.loadPage(`/dev-404-page/`), loader.loadPage(`/404.html`), loader.loadPage(window.location.pathname)]).then(() => {
|
||||
(0, _navigation.init)();
|
||||
|
||||
function onHydrated() {
|
||||
(0, _apiRunnerBrowser.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.default.hydrateRoot) {
|
||||
_reactDom.default.createRoot(indicatorMountElement).render( /*#__PURE__*/_react.default.createElement(_loadingIndicator.LoadingIndicatorEventHandler, null));
|
||||
} else {
|
||||
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_loadingIndicator.LoadingIndicatorEventHandler, null), indicatorMountElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function App() {
|
||||
const onClientEntryRanRef = _react.default.useRef(false);
|
||||
|
||||
_react.default.useEffect(() => {
|
||||
if (!onClientEntryRanRef.current) {
|
||||
onClientEntryRanRef.current = true;
|
||||
onHydrated();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(_root.default, null);
|
||||
}
|
||||
|
||||
function runRender() {
|
||||
if (dismissLoadingIndicator) {
|
||||
dismissLoadingIndicator();
|
||||
}
|
||||
|
||||
if (renderer === _reactDom.default.hydrateRoot) {
|
||||
renderer(rootElement, /*#__PURE__*/_react.default.createElement(App, null));
|
||||
} else {
|
||||
renderer( /*#__PURE__*/_react.default.createElement(App, null), rootElement);
|
||||
}
|
||||
} // https://github.com/madrobby/zepto/blob/b5ed8d607f67724788ec9ff492be297f64d47dfc/src/zepto.js#L439-L450
|
||||
// TODO remove IE 10 support
|
||||
|
||||
|
||||
const doc = document;
|
||||
|
||||
if (doc.readyState === `complete` || doc.readyState !== `loading` && !doc.documentElement.doScroll) {
|
||||
setTimeout(function () {
|
||||
runRender();
|
||||
}, 0);
|
||||
} else {
|
||||
const handler = function () {
|
||||
doc.removeEventListener(`DOMContentLoaded`, handler, false);
|
||||
window.removeEventListener(`load`, handler, false);
|
||||
runRender();
|
||||
};
|
||||
|
||||
doc.addEventListener(`DOMContentLoaded`, handler, false);
|
||||
window.addEventListener(`load`, handler, false);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.css = css;
|
||||
|
||||
/**
|
||||
* Converts a string of CSS into object syntax
|
||||
* @param strings
|
||||
* @param keys
|
||||
* @returns {Object} CSS in object syntax
|
||||
* @example
|
||||
* const output = css`
|
||||
* html {
|
||||
* color: rebeccapurple;
|
||||
* }
|
||||
* `
|
||||
*/
|
||||
function css(strings, ...keys) {
|
||||
const lastIndex = strings.length - 1;
|
||||
return strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], ``) + strings[lastIndex];
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.debugLog = debugLog;
|
||||
// inspired by https://github.com/GoogleChrome/workbox/blob/3d02230f0e977eb1dc86c48f16ea4bcefdae12af/packages/workbox-core/src/_private/logger.ts
|
||||
const styles = [`background: rebeccapurple`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`].join(`;`);
|
||||
|
||||
function debugLog(...args) {
|
||||
console.debug(`%cgatsby`, styles, ...args);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = HTML;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
function HTML(props) {
|
||||
return /*#__PURE__*/_react.default.createElement("html", props.htmlAttributes, /*#__PURE__*/_react.default.createElement("head", null, /*#__PURE__*/_react.default.createElement("meta", {
|
||||
charSet: "utf-8"
|
||||
}), /*#__PURE__*/_react.default.createElement("meta", {
|
||||
httpEquiv: "x-ua-compatible",
|
||||
content: "ie=edge"
|
||||
}), /*#__PURE__*/_react.default.createElement("meta", {
|
||||
name: "viewport",
|
||||
content: "width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
}), props.headComponents), /*#__PURE__*/_react.default.createElement("body", props.bodyAttributes, props.preBodyComponents, /*#__PURE__*/_react.default.createElement("div", {
|
||||
key: `body`,
|
||||
id: "___gatsby",
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: props.body
|
||||
}
|
||||
}), props.postBodyComponents));
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
htmlAttributes: _propTypes.default.object,
|
||||
headComponents: _propTypes.default.array,
|
||||
bodyAttributes: _propTypes.default.object,
|
||||
preBodyComponents: _propTypes.default.array,
|
||||
body: _propTypes.default.string,
|
||||
postBodyComponents: _propTypes.default.array
|
||||
};
|
||||
@@ -1,197 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _loader = require("./loader");
|
||||
|
||||
var _findPath = require("./find-path");
|
||||
|
||||
var _socketIo = _interopRequireDefault(require("./socketIo"));
|
||||
|
||||
var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path"));
|
||||
|
||||
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
||||
|
||||
// TODO move away from lodash
|
||||
const preferDefault = m => m && m.default || m;
|
||||
|
||||
function mergePageEntry(cachedPage, newPageData) {
|
||||
return { ...cachedPage,
|
||||
payload: { ...cachedPage.payload,
|
||||
json: newPageData.result,
|
||||
page: { ...cachedPage.payload.page,
|
||||
staticQueryResults: newPageData.staticQueryResults
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
class DevLoader extends _loader.BaseLoader {
|
||||
constructor(asyncRequires, matchPaths) {
|
||||
const loadComponent = chunkName => {
|
||||
if (!this.asyncRequires.components[chunkName]) {
|
||||
throw new Error(`We couldn't find the correct component chunk with the name "${chunkName}"`);
|
||||
}
|
||||
|
||||
return this.asyncRequires.components[chunkName]().then(preferDefault) // loader will handle the case when component is error
|
||||
.catch(err => err);
|
||||
};
|
||||
|
||||
super(loadComponent, matchPaths);
|
||||
this.asyncRequires = asyncRequires;
|
||||
const socket = (0, _socketIo.default)();
|
||||
this.notFoundPagePathsInCaches = new Set();
|
||||
|
||||
if (socket) {
|
||||
socket.on(`message`, msg => {
|
||||
if (msg.type === `staticQueryResult`) {
|
||||
this.handleStaticQueryResultHotUpdate(msg);
|
||||
} else if (msg.type === `pageQueryResult`) {
|
||||
this.handlePageQueryResultHotUpdate(msg);
|
||||
} else if (msg.type === `stalePageData`) {
|
||||
this.handleStalePageDataMessage(msg);
|
||||
}
|
||||
});
|
||||
} else if (process.env.NODE_ENV !== `test`) {
|
||||
console.warn(`Could not get web socket`);
|
||||
}
|
||||
}
|
||||
|
||||
updateAsyncRequires(asyncRequires) {
|
||||
this.asyncRequires = asyncRequires;
|
||||
}
|
||||
|
||||
loadPage(pagePath) {
|
||||
const realPath = (0, _findPath.findPath)(pagePath);
|
||||
return super.loadPage(realPath).then(result => {
|
||||
if (this.isPageNotFound(realPath)) {
|
||||
this.notFoundPagePathsInCaches.add(realPath);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
loadPageDataJson(rawPath) {
|
||||
return super.loadPageDataJson(rawPath).then(data => {
|
||||
// when we can't find a proper 404.html we fallback to dev-404-page
|
||||
// we need to make sure to mark it as not found.
|
||||
if (data.status === _loader.PageResourceStatus.Error && rawPath !== `/dev-404-page/`) {
|
||||
console.error(`404 page could not be found. Checkout https://www.gatsbyjs.org/docs/how-to/adding-common-features/add-404-page/`);
|
||||
return this.loadPageDataJson(`/dev-404-page/`).then(result => Object.assign({}, data, result));
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
}
|
||||
|
||||
doPrefetch(pagePath) {
|
||||
if (process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return super.doPrefetch(pagePath).then(result => result.payload);
|
||||
}
|
||||
|
||||
handleStaticQueryResultHotUpdate(msg) {
|
||||
const newResult = msg.payload.result;
|
||||
const cacheKey = msg.payload.id;
|
||||
const cachedResult = this.staticQueryDb[cacheKey];
|
||||
|
||||
if (!(0, _isEqual.default)(newResult, cachedResult)) {
|
||||
this.staticQueryDb[cacheKey] = newResult;
|
||||
|
||||
___emitter.emit(`staticQueryResult`, newResult);
|
||||
}
|
||||
}
|
||||
|
||||
handlePageQueryResultHotUpdate(msg) {
|
||||
var _this$pageDataDb$get;
|
||||
|
||||
const newPageData = msg.payload.result;
|
||||
const pageDataDbCacheKey = (0, _normalizePagePath.default)(msg.payload.id);
|
||||
const cachedPageData = (_this$pageDataDb$get = this.pageDataDb.get(pageDataDbCacheKey)) === null || _this$pageDataDb$get === void 0 ? void 0 : _this$pageDataDb$get.payload;
|
||||
|
||||
if (!(0, _isEqual.default)(newPageData, cachedPageData)) {
|
||||
// TODO: if this is update for current page and there are any new static queries added
|
||||
// that are not yet cached, there is currently no trigger to fetch them (yikes)
|
||||
// always update canonical key for pageDataDb
|
||||
this.pageDataDb.set(pageDataDbCacheKey, {
|
||||
pagePath: pageDataDbCacheKey,
|
||||
payload: newPageData,
|
||||
status: `success`
|
||||
});
|
||||
const cachedPage = this.pageDb.get(pageDataDbCacheKey);
|
||||
|
||||
if (cachedPage) {
|
||||
this.pageDb.set(pageDataDbCacheKey, mergePageEntry(cachedPage, newPageData));
|
||||
} // Additionally if those are query results for "/404.html"
|
||||
// we have to update all paths user wanted to visit, but didn't have
|
||||
// page for it, because we do store them under (normalized) path
|
||||
// user wanted to visit
|
||||
|
||||
|
||||
if (pageDataDbCacheKey === `/404.html`) {
|
||||
this.notFoundPagePathsInCaches.forEach(notFoundPath => {
|
||||
const previousPageDataEntry = this.pageDataDb.get(notFoundPath);
|
||||
|
||||
if (previousPageDataEntry) {
|
||||
this.pageDataDb.set(notFoundPath, { ...previousPageDataEntry,
|
||||
payload: newPageData
|
||||
});
|
||||
}
|
||||
|
||||
const previousPageEntry = this.pageDb.get(notFoundPath);
|
||||
|
||||
if (previousPageEntry) {
|
||||
this.pageDb.set(notFoundPath, mergePageEntry(previousPageEntry, newPageData));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
___emitter.emit(`pageQueryResult`, newPageData);
|
||||
}
|
||||
}
|
||||
|
||||
handleStalePageDataMessage(msg) {
|
||||
msg.payload.stalePageDataPaths.forEach(dirtyQueryId => {
|
||||
if (dirtyQueryId === `/dev-404-page/` || dirtyQueryId === `/404.html`) {
|
||||
// those pages are not on demand so skipping
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedId = (0, _normalizePagePath.default)(dirtyQueryId); // We can't just delete items in caches, because then
|
||||
// using history.back() would show dev-404 page
|
||||
// due to our special handling of it in root.js (loader.isPageNotFound check)
|
||||
// so instead we mark it as stale and instruct loader's async methods
|
||||
// to refetch resources if they are marked as stale
|
||||
|
||||
const cachedPageData = this.pageDataDb.get(normalizedId);
|
||||
|
||||
if (cachedPageData) {
|
||||
// if we have page data in cache, mark it as stale
|
||||
this.pageDataDb.set(normalizedId, { ...cachedPageData,
|
||||
stale: true
|
||||
});
|
||||
}
|
||||
|
||||
const cachedPage = this.pageDb.get(normalizedId);
|
||||
|
||||
if (cachedPage) {
|
||||
// if we have page data in cache, mark it as stale
|
||||
this.pageDb.set(normalizedId, { ...cachedPage,
|
||||
payload: { ...cachedPage.payload,
|
||||
stale: true
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var _default = DevLoader;
|
||||
exports.default = _default;
|
||||
@@ -1,149 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _server = require("react-dom/server");
|
||||
|
||||
var _lodash = require("lodash");
|
||||
|
||||
var _apiRunnerSsr = require("./api-runner-ssr");
|
||||
|
||||
/* global BROWSER_ESM_ONLY */
|
||||
// import testRequireError from "./test-require-error"
|
||||
// For some extremely mysterious reason, webpack adds the above module *after*
|
||||
// this module so that when this code runs, testRequireError is undefined.
|
||||
// So in the meantime, we'll just inline it.
|
||||
const testRequireError = (moduleName, err) => {
|
||||
const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`);
|
||||
const firstLine = err.toString().split(`\n`)[0];
|
||||
return regex.test(firstLine);
|
||||
};
|
||||
|
||||
let Html;
|
||||
|
||||
try {
|
||||
Html = require(`../src/html`);
|
||||
} catch (err) {
|
||||
if (testRequireError(`../src/html`, err)) {
|
||||
Html = require(`./default-html`);
|
||||
} else {
|
||||
console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`);
|
||||
process.exit();
|
||||
}
|
||||
}
|
||||
|
||||
Html = Html && Html.__esModule ? Html.default : Html;
|
||||
|
||||
var _default = ({
|
||||
pagePath
|
||||
}) => {
|
||||
let headComponents = [/*#__PURE__*/_react.default.createElement("meta", {
|
||||
key: "environment",
|
||||
name: "note",
|
||||
content: "environment=development"
|
||||
})];
|
||||
let htmlAttributes = {};
|
||||
let bodyAttributes = {};
|
||||
let preBodyComponents = [];
|
||||
let postBodyComponents = [];
|
||||
let bodyProps = {};
|
||||
let htmlStr;
|
||||
|
||||
const setHeadComponents = components => {
|
||||
headComponents = headComponents.concat(components);
|
||||
};
|
||||
|
||||
const setHtmlAttributes = attributes => {
|
||||
htmlAttributes = (0, _lodash.merge)(htmlAttributes, attributes);
|
||||
};
|
||||
|
||||
const setBodyAttributes = attributes => {
|
||||
bodyAttributes = (0, _lodash.merge)(bodyAttributes, attributes);
|
||||
};
|
||||
|
||||
const setPreBodyComponents = components => {
|
||||
preBodyComponents = preBodyComponents.concat(components);
|
||||
};
|
||||
|
||||
const setPostBodyComponents = components => {
|
||||
postBodyComponents = postBodyComponents.concat(components);
|
||||
};
|
||||
|
||||
const setBodyProps = props => {
|
||||
bodyProps = (0, _lodash.merge)({}, bodyProps, props);
|
||||
};
|
||||
|
||||
const getHeadComponents = () => headComponents;
|
||||
|
||||
const replaceHeadComponents = components => {
|
||||
headComponents = components;
|
||||
};
|
||||
|
||||
const getPreBodyComponents = () => preBodyComponents;
|
||||
|
||||
const replacePreBodyComponents = components => {
|
||||
preBodyComponents = components;
|
||||
};
|
||||
|
||||
const getPostBodyComponents = () => postBodyComponents;
|
||||
|
||||
const replacePostBodyComponents = components => {
|
||||
postBodyComponents = components;
|
||||
};
|
||||
|
||||
(0, _apiRunnerSsr.apiRunner)(`onRenderBody`, {
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath
|
||||
});
|
||||
(0, _apiRunnerSsr.apiRunner)(`onPreRenderHTML`, {
|
||||
getHeadComponents,
|
||||
replaceHeadComponents,
|
||||
getPreBodyComponents,
|
||||
replacePreBodyComponents,
|
||||
getPostBodyComponents,
|
||||
replacePostBodyComponents,
|
||||
pathname: pagePath
|
||||
});
|
||||
|
||||
const htmlElement = /*#__PURE__*/_react.default.createElement(Html, { ...bodyProps,
|
||||
body: ``,
|
||||
headComponents: headComponents.concat([/*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `io`,
|
||||
src: "/socket.io/socket.io.js"
|
||||
}), /*#__PURE__*/_react.default.createElement("link", {
|
||||
key: "styles",
|
||||
rel: "stylesheet",
|
||||
href: "/commons.css"
|
||||
})]),
|
||||
htmlAttributes,
|
||||
bodyAttributes,
|
||||
preBodyComponents,
|
||||
postBodyComponents: postBodyComponents.concat([!BROWSER_ESM_ONLY && /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `polyfill`,
|
||||
src: "/polyfill.js",
|
||||
noModule: true
|
||||
}), /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `framework`,
|
||||
src: "/framework.js"
|
||||
}), /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `commons`,
|
||||
src: "/commons.js"
|
||||
})].filter(Boolean))
|
||||
});
|
||||
|
||||
htmlStr = (0, _server.renderToStaticMarkup)(htmlElement);
|
||||
htmlStr = `<!DOCTYPE html>${htmlStr}`;
|
||||
return htmlStr;
|
||||
};
|
||||
|
||||
exports.default = _default;
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.a = void 0;
|
||||
// Dummy file to work around a webpack hot reloading bug.
|
||||
const a = 1;
|
||||
exports.a = a;
|
||||
@@ -1,12 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _mitt = _interopRequireDefault(require("mitt"));
|
||||
|
||||
const emitter = (0, _mitt.default)();
|
||||
var _default = emitter;
|
||||
exports.default = _default;
|
||||
@@ -1,126 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _loader = _interopRequireWildcard(require("./loader"));
|
||||
|
||||
var _shallowCompare = _interopRequireDefault(require("shallow-compare"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
class EnsureResources extends _react.default.Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
const {
|
||||
location,
|
||||
pageResources
|
||||
} = props;
|
||||
this.state = {
|
||||
location: { ...location
|
||||
},
|
||||
pageResources: pageResources || _loader.default.loadPageSync(location.pathname, {
|
||||
withErrorDetails: true
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps({
|
||||
location
|
||||
}, prevState) {
|
||||
if (prevState.location.href !== location.href) {
|
||||
const pageResources = _loader.default.loadPageSync(location.pathname, {
|
||||
withErrorDetails: true
|
||||
});
|
||||
|
||||
return {
|
||||
pageResources,
|
||||
location: { ...location
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
location: { ...location
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
loadResources(rawPath) {
|
||||
_loader.default.loadPage(rawPath).then(pageResources => {
|
||||
if (pageResources && pageResources.status !== _loader.PageResourceStatus.Error) {
|
||||
this.setState({
|
||||
location: { ...window.location
|
||||
},
|
||||
pageResources
|
||||
});
|
||||
} else {
|
||||
window.history.replaceState({}, ``, location.href);
|
||||
window.location = rawPath;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
// Always return false if we're missing resources.
|
||||
if (!nextState.pageResources) {
|
||||
this.loadResources(nextProps.location.pathname);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (process.env.BUILD_STAGE === `develop` && nextState.pageResources.stale) {
|
||||
this.loadResources(nextProps.location.pathname);
|
||||
return false;
|
||||
} // Check if the component or json have changed.
|
||||
|
||||
|
||||
if (this.state.pageResources !== nextState.pageResources) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.state.pageResources.component !== nextState.pageResources.component) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.state.pageResources.json !== nextState.pageResources.json) {
|
||||
return true;
|
||||
} // Check if location has changed on a page using internal routing
|
||||
// via matchPath configuration.
|
||||
|
||||
|
||||
if (this.state.location.key !== nextState.location.key && nextState.pageResources.page && (nextState.pageResources.page.matchPath || nextState.pageResources.page.path)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (0, _shallowCompare.default)(this, nextProps, nextState);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (process.env.NODE_ENV !== `production` && (!this.state.pageResources || this.state.pageResources.status === _loader.PageResourceStatus.Error)) {
|
||||
var _this$state$pageResou;
|
||||
|
||||
const message = `EnsureResources was not able to find resources for path: "${this.props.location.pathname}"
|
||||
This typically means that an issue occurred building components for that path.
|
||||
Run \`gatsby clean\` to remove any cached elements.`;
|
||||
|
||||
if ((_this$state$pageResou = this.state.pageResources) !== null && _this$state$pageResou !== void 0 && _this$state$pageResou.error) {
|
||||
console.error(message);
|
||||
throw this.state.pageResources.error;
|
||||
}
|
||||
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
return this.props.children(this.state);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var _default = EnsureResources;
|
||||
exports.default = _default;
|
||||
@@ -1,42 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.reportError = exports.clearError = void 0;
|
||||
const errorMap = {};
|
||||
|
||||
const handleErrorOverlay = () => {
|
||||
const errors = Object.values(errorMap);
|
||||
let errorsToDisplay = [];
|
||||
|
||||
if (errors.length > 0) {
|
||||
errorsToDisplay = errors.flatMap(e => e).filter(Boolean);
|
||||
}
|
||||
|
||||
if (errorsToDisplay.length > 0) {
|
||||
window._gatsbyEvents.push([`FAST_REFRESH`, {
|
||||
action: `SHOW_GRAPHQL_ERRORS`,
|
||||
payload: errorsToDisplay
|
||||
}]);
|
||||
} else {
|
||||
window._gatsbyEvents.push([`FAST_REFRESH`, {
|
||||
action: `CLEAR_GRAPHQL_ERRORS`
|
||||
}]);
|
||||
}
|
||||
};
|
||||
|
||||
const clearError = errorID => {
|
||||
delete errorMap[errorID];
|
||||
handleErrorOverlay();
|
||||
};
|
||||
|
||||
exports.clearError = clearError;
|
||||
|
||||
const reportError = (errorID, error) => {
|
||||
if (error) {
|
||||
errorMap[errorID] = error;
|
||||
}
|
||||
|
||||
handleErrorOverlay();
|
||||
};
|
||||
|
||||
exports.reportError = reportError;
|
||||
@@ -1,93 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.Accordion = Accordion;
|
||||
exports.AccordionItem = AccordionItem;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _useId = require("./use-id");
|
||||
|
||||
var keys = _interopRequireWildcard(require("../helpers/keys"));
|
||||
|
||||
var _match = require("../helpers/match");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function ChevronIcon() {
|
||||
return /*#__PURE__*/React.createElement("svg", {
|
||||
focusable: "false",
|
||||
preserveAspectRatio: "xMidYMid meet",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
fill: "currentColor",
|
||||
width: "16",
|
||||
height: "16",
|
||||
viewBox: "0 0 16 16",
|
||||
"aria-hidden": "true",
|
||||
"data-gatsby-overlay": "chevron-icon"
|
||||
}, /*#__PURE__*/React.createElement("path", {
|
||||
d: "M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
|
||||
}));
|
||||
}
|
||||
|
||||
function Accordion({
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("ul", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "accordion"
|
||||
}, rest), children);
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
children,
|
||||
disabled = false,
|
||||
open = false,
|
||||
title = `title`,
|
||||
...rest
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = React.useState(open);
|
||||
const [prevIsOpen, setPrevIsOpen] = React.useState(open);
|
||||
const id = (0, _useId.useId)(`accordion-item`);
|
||||
|
||||
if (open !== prevIsOpen) {
|
||||
setIsOpen(open);
|
||||
setPrevIsOpen(open);
|
||||
}
|
||||
|
||||
const toggleOpen = () => {
|
||||
const nextValue = !isOpen;
|
||||
setIsOpen(nextValue);
|
||||
}; // If the AccordionItem is open, and the user hits the ESC key, then close it
|
||||
|
||||
|
||||
const onKeyDown = event => {
|
||||
if (isOpen && (0, _match.match)(event, keys.Escape)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "accordion__item",
|
||||
"data-accordion-active": isOpen ? `true` : `false`
|
||||
}, rest), /*#__PURE__*/React.createElement("button", {
|
||||
"data-gatsby-overlay": "accordion__item__heading",
|
||||
type: "button",
|
||||
disabled: disabled,
|
||||
"aria-controls": id,
|
||||
"aria-expanded": isOpen,
|
||||
onClick: toggleOpen,
|
||||
onKeyDown: onKeyDown
|
||||
}, /*#__PURE__*/React.createElement(ChevronIcon, null), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "accordion__item__title"
|
||||
}, title)), /*#__PURE__*/React.createElement("div", {
|
||||
id: id,
|
||||
"data-gatsby-overlay": "accordion__item__content"
|
||||
}, children));
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.BuildError = BuildError;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _overlay = require("./overlay");
|
||||
|
||||
var _codeFrame = require("./code-frame");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
// Error that is thrown on e.g. webpack errors and thus can't be dismissed and must be fixed
|
||||
function BuildError({
|
||||
error
|
||||
}) {
|
||||
// Incoming build error shape is like this:
|
||||
// Sometimes "Enter"
|
||||
// ./relative-path-to-file
|
||||
// Additional information (sometimes empty line => handled in "prettifyStack" function)
|
||||
// /absolute-path-to-file
|
||||
// Errors/Warnings
|
||||
const decoded = (0, _utils.prettifyStack)(error);
|
||||
const [filePath] = decoded;
|
||||
const file = filePath.content.split(`\n`)[0];
|
||||
const lineMatch = filePath.content.match(/\((\d+)[^)]+\)/);
|
||||
let line = 1;
|
||||
|
||||
if (lineMatch) {
|
||||
line = lineMatch[1];
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement(_overlay.Overlay, null, /*#__PURE__*/React.createElement(_overlay.Header, {
|
||||
"data-gatsby-error-type": "build-error"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "header__cause-file"
|
||||
}, /*#__PURE__*/React.createElement("h1", {
|
||||
id: "gatsby-overlay-labelledby"
|
||||
}, "Failed to compile"), /*#__PURE__*/React.createElement("span", null, file)), /*#__PURE__*/React.createElement(_overlay.HeaderOpenClose, {
|
||||
open: () => (0, _utils.openInEditor)(file, line),
|
||||
dismiss: false
|
||||
})), /*#__PURE__*/React.createElement(_overlay.Body, null, /*#__PURE__*/React.createElement("h2", null, "Source"), /*#__PURE__*/React.createElement(_codeFrame.CodeFrame, {
|
||||
decoded: decoded
|
||||
}), /*#__PURE__*/React.createElement(_overlay.Footer, {
|
||||
id: "gatsby-overlay-describedby"
|
||||
}, "This error occurred during the build process and can only be dismissed by fixing the error.")));
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.CodeFrame = CodeFrame;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function CodeFrame({
|
||||
decoded
|
||||
}) {
|
||||
if (!decoded) {
|
||||
return /*#__PURE__*/React.createElement("pre", {
|
||||
"data-gatsby-overlay": "pre"
|
||||
}, /*#__PURE__*/React.createElement("code", {
|
||||
"data-gatsby-overlay": "pre__code"
|
||||
}));
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement("pre", {
|
||||
"data-gatsby-overlay": "pre"
|
||||
}, /*#__PURE__*/React.createElement("code", {
|
||||
"data-gatsby-overlay": "pre__code"
|
||||
}, decoded.map((entry, index) => {
|
||||
const style = {
|
||||
color: entry.fg ? `var(--color-${entry.fg})` : undefined,
|
||||
...(entry.decoration === `bold` ? {
|
||||
fontWeight: 800
|
||||
} : entry.decoration === `italic` ? {
|
||||
fontStyle: `italic`
|
||||
} : undefined)
|
||||
};
|
||||
return /*#__PURE__*/React.createElement("span", {
|
||||
key: `frame-${index}`,
|
||||
"data-gatsby-overlay": "pre__code__span",
|
||||
style: style
|
||||
}, entry.content);
|
||||
})));
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.DevSsrError = DevSsrError;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _overlay = require("./overlay");
|
||||
|
||||
var _codeFrame = require("./code-frame");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function DevSsrError({
|
||||
error
|
||||
}) {
|
||||
const {
|
||||
codeFrame,
|
||||
source,
|
||||
line
|
||||
} = error;
|
||||
const decoded = (0, _utils.prettifyStack)(codeFrame);
|
||||
return /*#__PURE__*/React.createElement(_overlay.Overlay, null, /*#__PURE__*/React.createElement(_overlay.Header, {
|
||||
"data-gatsby-error-type": "build-error"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "header__cause-file"
|
||||
}, /*#__PURE__*/React.createElement("h1", {
|
||||
id: "gatsby-overlay-labelledby"
|
||||
}, "Failed to server render (SSR)"), /*#__PURE__*/React.createElement("span", null, source)), /*#__PURE__*/React.createElement(_overlay.HeaderOpenClose, {
|
||||
open: () => (0, _utils.openInEditor)(source, line),
|
||||
dismiss: false
|
||||
})), /*#__PURE__*/React.createElement(_overlay.Body, null, /*#__PURE__*/React.createElement("p", {
|
||||
id: "gatsby-overlay-describedby",
|
||||
"data-gatsby-overlay": "body__describedby"
|
||||
}, "React Components in Gatsby must render both successfully in the browser and in a Node.js environment. When we tried to render your page component in Node.js, it errored."), /*#__PURE__*/React.createElement("h2", null, "Source"), /*#__PURE__*/React.createElement(_codeFrame.CodeFrame, {
|
||||
decoded: decoded
|
||||
}), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "codeframe__bottom"
|
||||
}, "See our docs page for more info on SSR errors:", ` `, /*#__PURE__*/React.createElement("a", {
|
||||
href: "https://www.gatsbyjs.com/docs/debugging-html-builds/"
|
||||
}, "Debugging HTML Builds")), /*#__PURE__*/React.createElement("p", null, "If you fixed the error, saved your file, and want to retry server rendering this page, please reload the page."), /*#__PURE__*/React.createElement("button", {
|
||||
onClick: () => (0, _utils.reloadPage)(),
|
||||
"data-gatsby-overlay": "primary-button"
|
||||
}, "Reload page"), /*#__PURE__*/React.createElement("h2", {
|
||||
style: {
|
||||
marginTop: `var(--space)`
|
||||
}
|
||||
}, "Skip Server Render"), /*#__PURE__*/React.createElement("p", null, "If you don't wish to fix the SSR error at the moment, press the button below to reload the page without attempting to do SSR."), /*#__PURE__*/React.createElement("button", {
|
||||
onClick: () => (0, _utils.skipSSR)(),
|
||||
"data-gatsby-overlay": "primary-button"
|
||||
}, "Skip SSR"), /*#__PURE__*/React.createElement(_overlay.Footer, null, /*#__PURE__*/React.createElement("span", {
|
||||
"data-font-weight": "bold"
|
||||
}, "Note:"), " This error will show up during \"gatsby build\" so it must be fixed before then. SSR errors in module scope, e.g. outside of your own React components can't be skipped.")));
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.ErrorBoundary = void 0;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidCatch(error) {
|
||||
this.setState({
|
||||
error
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
// Without this check => possible infinite loop
|
||||
return this.state.error && this.props.hasErrors ? null : this.props.children;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.ErrorBoundary = ErrorBoundary;
|
||||
@@ -1,88 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.GraphqlErrors = GraphqlErrors;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _overlay = require("./overlay");
|
||||
|
||||
var _accordion = require("./accordion");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
var _codeFrame = require("./code-frame");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function WrappedAccordionItem({
|
||||
error,
|
||||
open
|
||||
}) {
|
||||
var _error$error, _error$location, _error$location$start, _error$location2, _error$location2$star;
|
||||
|
||||
const title = (error === null || error === void 0 ? void 0 : (_error$error = error.error) === null || _error$error === void 0 ? void 0 : _error$error.message) || error.context.sourceMessage || `Unknown GraphQL error`;
|
||||
const docsUrl = error === null || error === void 0 ? void 0 : error.docsUrl;
|
||||
const filePath = error === null || error === void 0 ? void 0 : error.filePath;
|
||||
const lineNumber = error === null || error === void 0 ? void 0 : (_error$location = error.location) === null || _error$location === void 0 ? void 0 : (_error$location$start = _error$location.start) === null || _error$location$start === void 0 ? void 0 : _error$location$start.line;
|
||||
const columnNumber = error === null || error === void 0 ? void 0 : (_error$location2 = error.location) === null || _error$location2 === void 0 ? void 0 : (_error$location2$star = _error$location2.start) === null || _error$location2$star === void 0 ? void 0 : _error$location2$star.column;
|
||||
let locString = ``;
|
||||
|
||||
if (typeof lineNumber !== `undefined`) {
|
||||
locString += `:${lineNumber}`;
|
||||
|
||||
if (typeof columnNumber !== `undefined`) {
|
||||
locString += `:${columnNumber}`;
|
||||
}
|
||||
} // Sometimes the GraphQL error text has ANSI in it. If it's only text, it'll be passed through
|
||||
|
||||
|
||||
const decoded = (0, _utils.prettifyStack)(error.text);
|
||||
return /*#__PURE__*/React.createElement(_accordion.AccordionItem, {
|
||||
open: open,
|
||||
title: title
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "body__graphql-error-message"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "codeframe__top"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "tag"
|
||||
}, error.level, ` `, "#", error.code), /*#__PURE__*/React.createElement("button", {
|
||||
"data-gatsby-overlay": "body__open-in-editor",
|
||||
onClick: () => (0, _utils.openInEditor)(filePath, lineNumber)
|
||||
}, "Open in Editor")), filePath && /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "codeframe__top"
|
||||
}, filePath, locString), /*#__PURE__*/React.createElement(_codeFrame.CodeFrame, {
|
||||
decoded: decoded
|
||||
}), docsUrl && /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "codeframe__bottom"
|
||||
}, "See our docs page for more info on this error:", ` `, /*#__PURE__*/React.createElement("a", {
|
||||
href: docsUrl
|
||||
}, docsUrl))));
|
||||
}
|
||||
|
||||
function GraphqlErrors({
|
||||
errors,
|
||||
dismiss
|
||||
}) {
|
||||
const deduplicatedErrors = React.useMemo(() => Array.from(new Set(errors)), [errors]);
|
||||
const hasMultipleErrors = deduplicatedErrors.length > 1;
|
||||
return /*#__PURE__*/React.createElement(_overlay.Overlay, null, /*#__PURE__*/React.createElement(_overlay.Header, {
|
||||
"data-gatsby-error-type": "graphql-error"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "header__cause-file"
|
||||
}, /*#__PURE__*/React.createElement("h1", {
|
||||
id: "gatsby-overlay-labelledby"
|
||||
}, hasMultipleErrors ? `${errors.length} Unhandled GraphQL Errors` : `Unhandled GraphQL Error`)), /*#__PURE__*/React.createElement(_overlay.HeaderOpenClose, {
|
||||
dismiss: dismiss
|
||||
})), /*#__PURE__*/React.createElement(_overlay.Body, null, /*#__PURE__*/React.createElement("p", {
|
||||
"data-gatsby-overlay": "body__describedby",
|
||||
id: "gatsby-overlay-describedby"
|
||||
}, hasMultipleErrors ? `Multiple` : `One`, " unhandled GraphQL", ` `, hasMultipleErrors ? `errors` : `error`, " found in your files. See the list below to fix ", hasMultipleErrors ? `them` : `it`, ":"), /*#__PURE__*/React.createElement(_accordion.Accordion, null, deduplicatedErrors.map((error, index) => /*#__PURE__*/React.createElement(WrappedAccordionItem, {
|
||||
open: index === 0,
|
||||
error: error,
|
||||
key: `${error.sourceMessage}-${index}`
|
||||
})))));
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.useStackFrame = useStackFrame;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
const initialResponse = {
|
||||
decoded: null,
|
||||
sourcePosition: {
|
||||
line: null,
|
||||
number: null
|
||||
},
|
||||
sourceContent: null
|
||||
};
|
||||
|
||||
function useStackFrame({
|
||||
moduleId,
|
||||
lineNumber,
|
||||
columnNumber
|
||||
}) {
|
||||
const url = `/__original-stack-frame?moduleId=` + window.encodeURIComponent(moduleId) + `&lineNumber=` + window.encodeURIComponent(lineNumber) + `&columnNumber=` + window.encodeURIComponent(columnNumber);
|
||||
const [response, setResponse] = React.useState(initialResponse);
|
||||
React.useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
const decoded = (0, _utils.prettifyStack)(json.codeFrame);
|
||||
const {
|
||||
sourcePosition,
|
||||
sourceContent
|
||||
} = json;
|
||||
setResponse({
|
||||
decoded,
|
||||
sourceContent,
|
||||
sourcePosition
|
||||
});
|
||||
} catch (err) {
|
||||
setResponse({ ...initialResponse,
|
||||
decoded: (0, _utils.prettifyStack)(err.message)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
return response;
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.VisuallyHidden = VisuallyHidden;
|
||||
exports.Overlay = Overlay;
|
||||
exports.CloseButton = CloseButton;
|
||||
exports.HeaderOpenClose = HeaderOpenClose;
|
||||
exports.Header = Header;
|
||||
exports.Body = Body;
|
||||
exports.Footer = Footer;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _lockBody = require("../helpers/lock-body");
|
||||
|
||||
var _focusTrap = _interopRequireDefault(require("../helpers/focus-trap"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function Backdrop() {
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "backdrop"
|
||||
});
|
||||
}
|
||||
|
||||
function VisuallyHidden({
|
||||
children
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("span", {
|
||||
style: {
|
||||
border: 0,
|
||||
clip: `rect(0 0 0 0)`,
|
||||
height: `1px`,
|
||||
margin: `-1px`,
|
||||
overflow: `hidden`,
|
||||
padding: 0,
|
||||
position: `absolute`,
|
||||
width: `1px`,
|
||||
whiteSpace: `nowrap`,
|
||||
wordWrap: `normal`
|
||||
}
|
||||
}, children);
|
||||
}
|
||||
|
||||
function Overlay({
|
||||
children
|
||||
}) {
|
||||
React.useEffect(() => {
|
||||
(0, _lockBody.lock)();
|
||||
return () => {
|
||||
(0, _lockBody.unlock)();
|
||||
};
|
||||
}, []);
|
||||
const [overlay, setOverlay] = React.useState(null);
|
||||
const onOverlay = React.useCallback(el => {
|
||||
setOverlay(el);
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
if (overlay === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handle = (0, _focusTrap.default)({
|
||||
context: overlay
|
||||
}); // eslint-disable-next-line consistent-return
|
||||
|
||||
return () => {
|
||||
handle.disengage();
|
||||
};
|
||||
}, [overlay]);
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "wrapper",
|
||||
ref: onOverlay
|
||||
}, /*#__PURE__*/React.createElement(Backdrop, null), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "root",
|
||||
role: "alertdialog",
|
||||
"aria-labelledby": "gatsby-overlay-labelledby",
|
||||
"aria-describedby": "gatsby-overlay-describedby",
|
||||
"aria-modal": "true",
|
||||
dir: "ltr"
|
||||
}, children));
|
||||
}
|
||||
|
||||
function CloseButton({
|
||||
dismiss
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("button", {
|
||||
"data-gatsby-overlay": "close-button",
|
||||
onClick: dismiss
|
||||
}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "Close"), /*#__PURE__*/React.createElement("svg", {
|
||||
"aria-hidden": true,
|
||||
width: "24",
|
||||
height: "24",
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
xmlns: "http://www.w3.org/2000/svg"
|
||||
}, /*#__PURE__*/React.createElement("path", {
|
||||
d: "M18 6L6 18",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "2",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round"
|
||||
}), /*#__PURE__*/React.createElement("path", {
|
||||
d: "M6 6L18 18",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "2",
|
||||
strokeLinecap: "round",
|
||||
strokeLinejoin: "round"
|
||||
})));
|
||||
}
|
||||
|
||||
function HeaderOpenClose({
|
||||
open,
|
||||
dismiss,
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "header__top"
|
||||
}, rest), children, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "header__open-close"
|
||||
}, open && /*#__PURE__*/React.createElement("button", {
|
||||
onClick: open,
|
||||
"data-gatsby-overlay": "primary-button"
|
||||
}, "Open in editor"), dismiss && /*#__PURE__*/React.createElement(CloseButton, {
|
||||
dismiss: dismiss
|
||||
})));
|
||||
}
|
||||
|
||||
function Header({
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("header", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "header"
|
||||
}, rest), children);
|
||||
}
|
||||
|
||||
function Body({
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "body"
|
||||
}, rest), children);
|
||||
}
|
||||
|
||||
function Footer({
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
return /*#__PURE__*/React.createElement("footer", (0, _extends2.default)({
|
||||
"data-gatsby-overlay": "footer"
|
||||
}, rest), children);
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.RuntimeErrors = RuntimeErrors;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _stackTrace = _interopRequireDefault(require("stack-trace"));
|
||||
|
||||
var _overlay = require("./overlay");
|
||||
|
||||
var _hooks = require("./hooks");
|
||||
|
||||
var _codeFrame = require("./code-frame");
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
var _accordion = require("./accordion");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function WrappedAccordionItem({
|
||||
error,
|
||||
open
|
||||
}) {
|
||||
var _res$sourcePosition;
|
||||
|
||||
const stacktrace = _stackTrace.default.parse(error);
|
||||
|
||||
const codeFrameInformation = (0, _utils.getCodeFrameInformation)(stacktrace);
|
||||
const filePath = codeFrameInformation === null || codeFrameInformation === void 0 ? void 0 : codeFrameInformation.moduleId;
|
||||
const lineNumber = codeFrameInformation === null || codeFrameInformation === void 0 ? void 0 : codeFrameInformation.lineNumber;
|
||||
const columnNumber = codeFrameInformation === null || codeFrameInformation === void 0 ? void 0 : codeFrameInformation.columnNumber;
|
||||
const name = codeFrameInformation === null || codeFrameInformation === void 0 ? void 0 : codeFrameInformation.functionName;
|
||||
const res = (0, _hooks.useStackFrame)({
|
||||
moduleId: filePath,
|
||||
lineNumber,
|
||||
columnNumber
|
||||
});
|
||||
const line = (_res$sourcePosition = res.sourcePosition) === null || _res$sourcePosition === void 0 ? void 0 : _res$sourcePosition.line;
|
||||
|
||||
const Title = () => {
|
||||
if (!name) {
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, "Unknown Runtime Error");
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, "Error in function", ` `, /*#__PURE__*/React.createElement("span", {
|
||||
"data-font-weight": "bold"
|
||||
}, name), " in", ` `, /*#__PURE__*/React.createElement("span", {
|
||||
"data-font-weight": "bold"
|
||||
}, filePath, ":", line));
|
||||
};
|
||||
|
||||
return /*#__PURE__*/React.createElement(_accordion.AccordionItem, {
|
||||
open: open,
|
||||
title: /*#__PURE__*/React.createElement(Title, null)
|
||||
}, /*#__PURE__*/React.createElement("p", {
|
||||
"data-gatsby-overlay": "body__error-message"
|
||||
}, error.message), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "codeframe__top"
|
||||
}, /*#__PURE__*/React.createElement("div", null, filePath, ":", line), /*#__PURE__*/React.createElement("button", {
|
||||
"data-gatsby-overlay": "body__open-in-editor",
|
||||
onClick: () => (0, _utils.openInEditor)(filePath, line)
|
||||
}, "Open in Editor")), /*#__PURE__*/React.createElement(_codeFrame.CodeFrame, {
|
||||
decoded: res.decoded
|
||||
}));
|
||||
}
|
||||
|
||||
function RuntimeErrors({
|
||||
errors,
|
||||
dismiss
|
||||
}) {
|
||||
const deduplicatedErrors = React.useMemo(() => Array.from(new Set(errors)), [errors]);
|
||||
const hasMultipleErrors = deduplicatedErrors.length > 1;
|
||||
return /*#__PURE__*/React.createElement(_overlay.Overlay, null, /*#__PURE__*/React.createElement(_overlay.Header, {
|
||||
"data-gatsby-error-type": "runtime-error"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-overlay": "header__cause-file"
|
||||
}, /*#__PURE__*/React.createElement("h1", {
|
||||
id: "gatsby-overlay-labelledby"
|
||||
}, hasMultipleErrors ? `${errors.length} Unhandled Runtime Errors` : `Unhandled Runtime Error`)), /*#__PURE__*/React.createElement(_overlay.HeaderOpenClose, {
|
||||
dismiss: dismiss
|
||||
})), /*#__PURE__*/React.createElement(_overlay.Body, null, /*#__PURE__*/React.createElement("p", {
|
||||
"data-gatsby-overlay": "body__describedby",
|
||||
id: "gatsby-overlay-describedby"
|
||||
}, hasMultipleErrors ? `Multiple` : `One`, " unhandled runtime", ` `, hasMultipleErrors ? `errors` : `error`, " found in your files. See the list below to fix ", hasMultipleErrors ? `them` : `it`, ":"), /*#__PURE__*/React.createElement(_accordion.Accordion, null, deduplicatedErrors.map((error, index) => /*#__PURE__*/React.createElement(WrappedAccordionItem, {
|
||||
open: index === 0,
|
||||
key: `${error.message}-${index}`,
|
||||
error: error
|
||||
})))));
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.useId = useId;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
// Copied from https://github.com/carbon-design-system/carbon
|
||||
// License: Apache-2.0
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
// Entrypoint: packages/react/src/internal/useId.js
|
||||
function setupGetInstanceId() {
|
||||
let instanceId = 0;
|
||||
return function getInstanceId() {
|
||||
return ++instanceId;
|
||||
};
|
||||
}
|
||||
|
||||
const getId = setupGetInstanceId();
|
||||
const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
|
||||
|
||||
function canUseDOM() {
|
||||
return !!(typeof window !== `undefined` && window.document && window.document.createElement);
|
||||
}
|
||||
|
||||
let serverHandoffCompleted = false;
|
||||
/**
|
||||
* Generate a unique ID with an optional prefix prepended to it
|
||||
* @param {string} [prefix]
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
function useId(prefix = `id`) {
|
||||
const [id, setId] = React.useState(() => {
|
||||
if (serverHandoffCompleted) {
|
||||
return `${prefix}-${getId()}`;
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (id === null) {
|
||||
setId(`${prefix}-${getId()}`);
|
||||
}
|
||||
}, [getId]);
|
||||
React.useEffect(() => {
|
||||
if (serverHandoffCompleted === false) {
|
||||
serverHandoffCompleted = true;
|
||||
}
|
||||
}, []);
|
||||
return id;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,81 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.ArrowDown = exports.ArrowRight = exports.ArrowUp = exports.ArrowLeft = exports.Home = exports.End = exports.PageDown = exports.PageUp = exports.Space = exports.Escape = exports.Enter = exports.Tab = void 0;
|
||||
// Copied from https://github.com/carbon-design-system/carbon
|
||||
// License: Apache-2.0
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
// Entrypoint: packages/react/src/internal/keyboard/keys.js
|
||||
const Tab = {
|
||||
key: `Tab`,
|
||||
which: 9,
|
||||
keyCode: 9
|
||||
};
|
||||
exports.Tab = Tab;
|
||||
const Enter = {
|
||||
key: `Enter`,
|
||||
which: 13,
|
||||
keyCode: 13
|
||||
};
|
||||
exports.Enter = Enter;
|
||||
const Escape = {
|
||||
key: [`Escape`, // IE11 Escape
|
||||
`Esc`],
|
||||
which: 27,
|
||||
keyCode: 27
|
||||
};
|
||||
exports.Escape = Escape;
|
||||
const Space = {
|
||||
key: ` `,
|
||||
which: 32,
|
||||
keyCode: 32
|
||||
};
|
||||
exports.Space = Space;
|
||||
const PageUp = {
|
||||
key: `PageUp`,
|
||||
which: 33,
|
||||
keyCode: 33
|
||||
};
|
||||
exports.PageUp = PageUp;
|
||||
const PageDown = {
|
||||
key: `PageDown`,
|
||||
which: 34,
|
||||
keyCode: 34
|
||||
};
|
||||
exports.PageDown = PageDown;
|
||||
const End = {
|
||||
key: `End`,
|
||||
which: 35,
|
||||
keyCode: 35
|
||||
};
|
||||
exports.End = End;
|
||||
const Home = {
|
||||
key: `Home`,
|
||||
which: 36,
|
||||
keyCode: 36
|
||||
};
|
||||
exports.Home = Home;
|
||||
const ArrowLeft = {
|
||||
key: `ArrowLeft`,
|
||||
which: 37,
|
||||
keyCode: 37
|
||||
};
|
||||
exports.ArrowLeft = ArrowLeft;
|
||||
const ArrowUp = {
|
||||
key: `ArrowUp`,
|
||||
which: 38,
|
||||
keyCode: 38
|
||||
};
|
||||
exports.ArrowUp = ArrowUp;
|
||||
const ArrowRight = {
|
||||
key: `ArrowRight`,
|
||||
which: 39,
|
||||
keyCode: 39
|
||||
};
|
||||
exports.ArrowRight = ArrowRight;
|
||||
const ArrowDown = {
|
||||
key: `ArrowDown`,
|
||||
which: 40,
|
||||
keyCode: 40
|
||||
};
|
||||
exports.ArrowDown = ArrowDown;
|
||||
@@ -1,54 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.lock = lock;
|
||||
exports.unlock = unlock;
|
||||
// Adapted from https://github.com/vercel/next.js
|
||||
// License: MIT
|
||||
// Copyright (c) 2021 Vercel, Inc.
|
||||
//
|
||||
// Entrypoint: react-dev-overlay/src/internal/components/Overlay/body-locker.ts
|
||||
let previousBodyPaddingRight;
|
||||
let previousBodyOverflowSetting;
|
||||
let activeLocks = 0;
|
||||
|
||||
function lock() {
|
||||
setTimeout(() => {
|
||||
if (activeLocks++ > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
|
||||
const rootElement = document.getElementById(`___gatsby`);
|
||||
|
||||
if (scrollBarGap > 0) {
|
||||
previousBodyPaddingRight = document.body.style.paddingRight;
|
||||
document.body.style.paddingRight = `${scrollBarGap}px`;
|
||||
}
|
||||
|
||||
previousBodyOverflowSetting = document.body.style.overflow;
|
||||
document.body.style.overflow = `hidden`;
|
||||
rootElement.setAttribute(`aria-hidden`, `true`);
|
||||
});
|
||||
}
|
||||
|
||||
function unlock() {
|
||||
setTimeout(() => {
|
||||
if (activeLocks === 0 || --activeLocks !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById(`___gatsby`);
|
||||
rootElement.removeAttribute(`aria-hidden`);
|
||||
|
||||
if (previousBodyPaddingRight !== undefined) {
|
||||
document.body.style.paddingRight = previousBodyPaddingRight;
|
||||
previousBodyPaddingRight = undefined;
|
||||
}
|
||||
|
||||
if (previousBodyOverflowSetting !== undefined) {
|
||||
document.body.style.overflow = previousBodyOverflowSetting;
|
||||
previousBodyOverflowSetting = undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.match = match;
|
||||
|
||||
// Copied from https://github.com/carbon-design-system/carbon
|
||||
// License: Apache-2.0
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
// Entrypoint: packages/react/src/internal/keyboard/match.js
|
||||
|
||||
/**
|
||||
* Check to see if the given key matches the corresponding keyboard event. Also
|
||||
* supports passing in the value directly if you can't used the given event.
|
||||
*
|
||||
* @example
|
||||
* import * as keys from '../keys';
|
||||
* import { matches } from '../match';
|
||||
*
|
||||
* function handleOnKeyDown(event) {
|
||||
* if (match(event, keys.Enter) {
|
||||
* // ...
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* @param {Event|number|string} eventOrCode
|
||||
* @param {Key} key
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function match(eventOrCode, {
|
||||
key,
|
||||
which,
|
||||
keyCode
|
||||
} = {}) {
|
||||
if (typeof eventOrCode === `string`) {
|
||||
return eventOrCode === key;
|
||||
}
|
||||
|
||||
if (typeof eventOrCode === `number`) {
|
||||
return eventOrCode === which || eventOrCode === keyCode;
|
||||
}
|
||||
|
||||
if (eventOrCode.key && Array.isArray(key)) {
|
||||
return key.indexOf(eventOrCode.key) !== -1;
|
||||
}
|
||||
|
||||
return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode;
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _errorBoundary = require("./components/error-boundary");
|
||||
|
||||
var _shadowPortal = require("../shadow-portal");
|
||||
|
||||
var _style = require("./style");
|
||||
|
||||
var _buildError = require("./components/build-error");
|
||||
|
||||
var _runtimeErrors = require("./components/runtime-errors");
|
||||
|
||||
var _graphqlErrors = require("./components/graphql-errors");
|
||||
|
||||
var _devSsrError = require("./components/dev-ssr-error");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
const reducer = (state, event) => {
|
||||
switch (event.action) {
|
||||
case `CLEAR_COMPILE_ERROR`:
|
||||
{
|
||||
return { ...state,
|
||||
buildError: null
|
||||
};
|
||||
}
|
||||
|
||||
case `CLEAR_RUNTIME_ERRORS`:
|
||||
{
|
||||
return { ...state,
|
||||
errors: []
|
||||
};
|
||||
}
|
||||
|
||||
case `CLEAR_DEV_SSR_ERROR`:
|
||||
{
|
||||
return { ...state,
|
||||
devSsrError: null
|
||||
};
|
||||
}
|
||||
|
||||
case `SHOW_COMPILE_ERROR`:
|
||||
{
|
||||
return { ...state,
|
||||
buildError: event.payload
|
||||
};
|
||||
}
|
||||
|
||||
case `SHOW_DEV_SSR_ERROR`:
|
||||
{
|
||||
return { ...state,
|
||||
devSsrError: event.payload
|
||||
};
|
||||
}
|
||||
|
||||
case `HANDLE_RUNTIME_ERROR`:
|
||||
case `SHOW_RUNTIME_ERRORS`:
|
||||
{
|
||||
return { ...state,
|
||||
errors: state.errors.concat(event.payload)
|
||||
};
|
||||
}
|
||||
|
||||
case `SHOW_GRAPHQL_ERRORS`:
|
||||
{
|
||||
return { ...state,
|
||||
graphqlErrors: event.payload
|
||||
};
|
||||
}
|
||||
|
||||
case `CLEAR_GRAPHQL_ERRORS`:
|
||||
{
|
||||
return { ...state,
|
||||
graphqlErrors: []
|
||||
};
|
||||
}
|
||||
|
||||
case `DISMISS`:
|
||||
{
|
||||
return { ...state,
|
||||
buildError: null,
|
||||
errors: [],
|
||||
graphqlErrors: []
|
||||
};
|
||||
}
|
||||
|
||||
default:
|
||||
{
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
errors: [],
|
||||
buildError: null,
|
||||
devSsrError: null,
|
||||
graphqlErrors: []
|
||||
};
|
||||
|
||||
function DevOverlay({
|
||||
children
|
||||
}) {
|
||||
const [state, dispatch] = React.useReducer(reducer, initialState);
|
||||
React.useEffect(() => {
|
||||
const gatsbyEvents = window._gatsbyEvents || [];
|
||||
window._gatsbyEvents = {
|
||||
push: ([channel, event]) => {
|
||||
if (channel === `FAST_REFRESH`) {
|
||||
dispatch(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
gatsbyEvents.forEach(([channel, event]) => {
|
||||
if (channel === `FAST_REFRESH`) {
|
||||
dispatch(event);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
window._gatsbyEvents = [];
|
||||
};
|
||||
}, [dispatch]);
|
||||
|
||||
const dismiss = () => {
|
||||
dispatch({
|
||||
action: `DISMISS`
|
||||
});
|
||||
window._gatsbyEvents = [];
|
||||
};
|
||||
|
||||
const hasBuildError = state.buildError !== null;
|
||||
const hasRuntimeErrors = Boolean(state.errors.length);
|
||||
const hasGraphqlErrors = Boolean(state.graphqlErrors.length);
|
||||
const hasDevSsrError = state.devSsrError !== null;
|
||||
const hasErrors = hasBuildError || hasRuntimeErrors || hasGraphqlErrors || hasDevSsrError; // This component has a deliberate order (priority)
|
||||
|
||||
const ErrorComponent = () => {
|
||||
if (hasBuildError) {
|
||||
return /*#__PURE__*/React.createElement(_buildError.BuildError, {
|
||||
error: state.buildError
|
||||
});
|
||||
}
|
||||
|
||||
if (hasRuntimeErrors) {
|
||||
return /*#__PURE__*/React.createElement(_runtimeErrors.RuntimeErrors, {
|
||||
errors: state.errors,
|
||||
dismiss: dismiss
|
||||
});
|
||||
}
|
||||
|
||||
if (hasGraphqlErrors) {
|
||||
return /*#__PURE__*/React.createElement(_graphqlErrors.GraphqlErrors, {
|
||||
errors: state.graphqlErrors,
|
||||
dismiss: dismiss
|
||||
});
|
||||
}
|
||||
|
||||
if (hasDevSsrError) {
|
||||
return /*#__PURE__*/React.createElement(_devSsrError.DevSsrError, {
|
||||
error: state.devSsrError
|
||||
});
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_errorBoundary.ErrorBoundary, {
|
||||
hasErrors: hasErrors
|
||||
}, children !== null && children !== void 0 ? children : null), hasErrors ? /*#__PURE__*/React.createElement(_shadowPortal.ShadowPortal, {
|
||||
identifier: "gatsby-fast-refresh"
|
||||
}, /*#__PURE__*/React.createElement(_style.Style, null), /*#__PURE__*/React.createElement(ErrorComponent, null)) : undefined);
|
||||
}
|
||||
|
||||
var _default = DevOverlay;
|
||||
exports.default = _default;
|
||||
@@ -1,423 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.Style = void 0;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _cssToObject = require("../css-to-object");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
const Style = () => /*#__PURE__*/React.createElement("style", {
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: (0, _cssToObject.css)`
|
||||
:host {
|
||||
--color-ansi-selection: rgba(95, 126, 151, 0.48);
|
||||
--color-ansi-bg: #fafafa;
|
||||
--color-ansi-fg: #545454;
|
||||
--color-ansi-white: #969896;
|
||||
--color-ansi-black: #141414;
|
||||
--color-ansi-blue: #183691;
|
||||
--color-ansi-cyan: #007faa;
|
||||
--color-ansi-green: #008000;
|
||||
--color-ansi-magenta: #795da3;
|
||||
--color-ansi-red: #d91e18;
|
||||
--color-ansi-yellow: #aa5d00;
|
||||
--color-ansi-bright-white: #ffffff;
|
||||
--color-ansi-bright-black: #545454;
|
||||
--color-ansi-bright-blue: #183691;
|
||||
--color-ansi-bright-cyan: #007faa;
|
||||
--color-ansi-bright-green: #008000;
|
||||
--color-ansi-bright-magenta: #795da3;
|
||||
--color-ansi-bright-red: #d91e18;
|
||||
--color-ansi-bright-yellow: #aa5d00;
|
||||
--importantLight: #ffffff;
|
||||
--importantDark: #000000;
|
||||
--backdrop: rgba(72, 67, 79, 0.5);
|
||||
--color: #454a53;
|
||||
--background: var(--color-ansi-bright-white);
|
||||
--primary: #663399;
|
||||
--primaryLight: #9158ca;
|
||||
--link: var(--primary);
|
||||
--line: #e0e0e0;
|
||||
--colorHeader: rgba(255, 255, 255, 0.8);
|
||||
--codeFrame-bg: #eeeeee;
|
||||
--codeFrame-color: #414141;
|
||||
--codeFrame-button-bg: white;
|
||||
--radii: 5px;
|
||||
--z-index-backdrop: 9000;
|
||||
--z-index-overlay: 10000;
|
||||
--space: 1.5em;
|
||||
--space-sm: 1em;
|
||||
--space-lg: 2.5em;
|
||||
--rootBoxShadowOpacity: 0.08;
|
||||
--ring-opacity: 0.65;
|
||||
--ring-color: rgba(138, 75, 175, var(--ring-opacity));
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="backdrop"] {
|
||||
background: var(--backdrop);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: var(--z-index-backdrop);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="root"] {
|
||||
font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol" !important;
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
min-width: 320px;
|
||||
max-height: 90%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
box-shadow: rgba(46, 41, 51, var(--rootBoxShadowOpacity)) 0px 7px 19px
|
||||
11px,
|
||||
rgba(71, 63, 79, var(--rootBoxShadowOpacity)) 0px 2px 4px;
|
||||
border-radius: var(--radii);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
z-index: var(--z-index-overlay);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="root"] a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 0.25em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="root"] button:focus,
|
||||
[data-gatsby-overlay="root"] a:focus {
|
||||
outline: 4px solid transparent;
|
||||
box-shadow: 0 0 0 4px var(--ring-color);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="root"] a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header"] {
|
||||
display: grid;
|
||||
grid-gap: var(--space-sm);
|
||||
grid-template-columns: 1fr auto;
|
||||
color: var(--colorHeader);
|
||||
background: var(--primary);
|
||||
padding: var(--space);
|
||||
border-top-left-radius: var(--radii);
|
||||
border-top-right-radius: var(--radii);
|
||||
}
|
||||
|
||||
[data-gatsby-error-type="build-error"][data-gatsby-overlay="header"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body"] {
|
||||
padding: var(--space);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body__describedby"] {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--space);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body"] h2 {
|
||||
margin-top: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.25em;
|
||||
color: var(--importantDark);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="pre"] {
|
||||
margin: 0;
|
||||
color: var(--color-ansi-fg);
|
||||
background: var(--color-ansi-bg);
|
||||
padding: var(--space-sm);
|
||||
border-radius: 0 0 var(--radii) var(--radii);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header__top"] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header__open-close"] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header__cause-file"] {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header__cause-file"] h1,
|
||||
[data-gatsby-overlay="header__top"] h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header[data-gatsby-error-type="runtime-error"]
|
||||
[data-gatsby-overlay="header__cause-file"]
|
||||
h1,
|
||||
header[data-gatsby-error-type="graphql-error"]
|
||||
[data-gatsby-overlay="header__cause-file"]
|
||||
h1 {
|
||||
color: var(--importantLight);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="header__cause-file"] span {
|
||||
font-size: 1.25em;
|
||||
color: var(--importantLight);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="primary-button"] {
|
||||
--ring-opacity: 0.9;
|
||||
--ring-color: rgba(54, 32, 102, var(--ring-opacity));
|
||||
align-items: center;
|
||||
border-radius: var(--radii);
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: var(--importantLight);
|
||||
border: 1px solid var(--primary);
|
||||
background: var(--primaryLight);
|
||||
font-size: 0.9em;
|
||||
height: 32px;
|
||||
min-width: 2em;
|
||||
padding: 0.25em 0.75em;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="codeframe__top"] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--codeFrame-bg);
|
||||
padding: 0.5em var(--space-sm);
|
||||
color: var(--codeFrame-color);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body__open-in-editor"] {
|
||||
align-items: center;
|
||||
border-radius: var(--radii);
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--codeFrame-color);
|
||||
border: none;
|
||||
background: var(--codeFrame-button-bg);
|
||||
font-size: 0.9em;
|
||||
min-width: 2em;
|
||||
padding: 0.35em 0.75em;
|
||||
appearance: none;
|
||||
margin-right: var(--space-sm);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="codeframe__top"]
|
||||
[data-gatsby-overlay="body__open-in-editor"] {
|
||||
margin-right: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="close-button"] {
|
||||
--ring-opacity: 0.9;
|
||||
--ring-color: rgba(54, 32, 102, var(--ring-opacity));
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: var(--primaryLight);
|
||||
color: var(--importantLight);
|
||||
appearance: none;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radii);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body__graphql-error-message"] {
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="codeframe__top"]:first-of-type {
|
||||
border-radius: var(--radii) var(--radii) 0 0;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="codeframe__bottom"] {
|
||||
margin-top: var(--space);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="body__error-message-header"] {
|
||||
font-size: 1.2em;
|
||||
color: var(--importantDark);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
[data-font-weight="bold"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="footer"] {
|
||||
padding-top: var(--space);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion"] {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion__item"] {
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--line);
|
||||
transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion__item__heading"] {
|
||||
background: none;
|
||||
border: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-height: 2.5em;
|
||||
margin: 0;
|
||||
padding: 1em 0;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion__item__heading"] svg {
|
||||
flex: 0 0 1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 2px 1em 0 0;
|
||||
color: var(--importantDark);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion__item__title"] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: var(--importantDark);
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="accordion__item__content"] {
|
||||
display: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: padding 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
[data-accordion-active="true"]
|
||||
[data-gatsby-overlay="accordion__item__content"] {
|
||||
display: block;
|
||||
padding-bottom: var(--space);
|
||||
transition: padding 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
[data-accordion-active="false"]
|
||||
[data-gatsby-overlay="accordion__item__content"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="chevron-icon"] {
|
||||
transform: rotate(90deg);
|
||||
transition: all 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
[data-accordion-active="false"] [data-gatsby-overlay="chevron-icon"] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
[data-accordion-active="true"] [data-gatsby-overlay="chevron-icon"] {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[data-gatsby-overlay="header"],
|
||||
[data-gatsby-error-type="build-error"][data-gatsby-overlay="header"] {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
--color-ansi-bg: #2b2b2b;
|
||||
--color-ansi-fg: #d1d5db;
|
||||
--color-ansi-white: #ffffff;
|
||||
--color-ansi-black: #d4d0ab;
|
||||
--color-ansi-blue: #4791ff;
|
||||
--color-ansi-cyan: #00e0e0;
|
||||
--color-ansi-green: #abe338;
|
||||
--color-ansi-magenta: #dcc6e0;
|
||||
--color-ansi-red: #ffa07a;
|
||||
--color-ansi-yellow: #ffd700;
|
||||
--color-ansi-bright-white: #ffffff;
|
||||
--color-ansi-bright-black: #d4d0ab;
|
||||
--color-ansi-bright-blue: #4791ff;
|
||||
--color-ansi-bright-cyan: #00e0e0;
|
||||
--color-ansi-bright-green: #abe338;
|
||||
--color-ansi-bright-magenta: #dcc6e0;
|
||||
--color-ansi-bright-red: #ffa07a;
|
||||
--color-ansi-bright-yellow: #ffd700;
|
||||
--importantDark: white;
|
||||
--backdrop: rgba(48, 48, 50, 0.75);
|
||||
--color: #d1d5db;
|
||||
--link: #d9bae8;
|
||||
--background: #232129;
|
||||
--primary: #452475;
|
||||
--primaryLight: #663399;
|
||||
--line: #464647;
|
||||
--codeFrame-bg: #18171d;
|
||||
--codeFrame-color: #d1d5db;
|
||||
--codeFrame-button-bg: #232129;
|
||||
--rootBoxShadowOpacity: 0.15;
|
||||
--ring-color: rgba(217, 186, 232, var(--ring-opacity));
|
||||
}
|
||||
|
||||
[data-gatsby-overlay="close-button"],
|
||||
[data-gatsby-overlay="primary-button"] {
|
||||
--ring-color: rgba(177, 122, 204, var(--ring-opacity));
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
exports.Style = Style;
|
||||
@@ -1,88 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.prettifyStack = prettifyStack;
|
||||
exports.openInEditor = openInEditor;
|
||||
exports.reloadPage = reloadPage;
|
||||
exports.skipSSR = skipSSR;
|
||||
exports.getCodeFrameInformation = getCodeFrameInformation;
|
||||
exports.getLineNumber = getLineNumber;
|
||||
exports.formatFilename = formatFilename;
|
||||
|
||||
var _anser = _interopRequireDefault(require("anser"));
|
||||
|
||||
function prettifyStack(errorInformation) {
|
||||
let txt;
|
||||
|
||||
if (Array.isArray(errorInformation)) {
|
||||
txt = errorInformation.join(`\n`);
|
||||
} else {
|
||||
txt = errorInformation;
|
||||
}
|
||||
|
||||
return _anser.default.ansiToJson(txt, {
|
||||
remove_empty: true,
|
||||
use_classes: true,
|
||||
json: true
|
||||
});
|
||||
}
|
||||
|
||||
function openInEditor(file, lineNumber = 1) {
|
||||
fetch(`/__open-stack-frame-in-editor?fileName=` + window.encodeURIComponent(file) + `&lineNumber=` + window.encodeURIComponent(lineNumber));
|
||||
}
|
||||
|
||||
function reloadPage() {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
function skipSSR() {
|
||||
if (`URLSearchParams` in window) {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
searchParams.set(`skip-ssr`, `true`);
|
||||
window.location.search = searchParams.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function getCodeFrameInformation(stackTrace) {
|
||||
const callSite = stackTrace.find(CallSite => CallSite.getFileName());
|
||||
|
||||
if (!callSite) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const moduleId = formatFilename(callSite.getFileName());
|
||||
const lineNumber = callSite.getLineNumber();
|
||||
const columnNumber = callSite.getColumnNumber();
|
||||
const functionName = callSite.getFunctionName();
|
||||
return {
|
||||
moduleId,
|
||||
lineNumber,
|
||||
columnNumber,
|
||||
functionName
|
||||
};
|
||||
}
|
||||
|
||||
const lineNumberRegex = /^[0-9]*:[0-9]*$/g;
|
||||
|
||||
function getLineNumber(error) {
|
||||
const match = error.match(lineNumberRegex);
|
||||
return match === null || match === void 0 ? void 0 : match[1];
|
||||
}
|
||||
|
||||
function formatFilename(filename) {
|
||||
const htmlMatch = /^https?:\/\/(.*)\/(.*)/.exec(filename);
|
||||
|
||||
if (htmlMatch && htmlMatch[1] && htmlMatch[2]) {
|
||||
return htmlMatch[2];
|
||||
}
|
||||
|
||||
const sourceMatch = /^webpack-internal:\/\/\/(.*)$/.exec(filename);
|
||||
|
||||
if (sourceMatch && sourceMatch[1]) {
|
||||
return sourceMatch[1];
|
||||
}
|
||||
|
||||
return filename;
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.cleanPath = exports.findPath = exports.grabMatchParams = exports.findMatchPath = exports.setMatchPaths = void 0;
|
||||
|
||||
var _utils = require("@gatsbyjs/reach-router/lib/utils");
|
||||
|
||||
var _stripPrefix = _interopRequireDefault(require("./strip-prefix"));
|
||||
|
||||
var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path"));
|
||||
|
||||
var _redirectUtils = require("./redirect-utils.js");
|
||||
|
||||
const pathCache = new Map();
|
||||
let matchPaths = [];
|
||||
|
||||
const trimPathname = rawPathname => {
|
||||
const pathname = decodeURIComponent(rawPathname); // Remove the pathPrefix from the pathname.
|
||||
|
||||
const trimmedPathname = (0, _stripPrefix.default)(pathname, decodeURIComponent(__BASE_PATH__)) // Remove any hashfragment
|
||||
.split(`#`)[0] // Remove search query
|
||||
.split(`?`)[0];
|
||||
return trimmedPathname;
|
||||
};
|
||||
|
||||
function absolutify(path) {
|
||||
// If it's already absolute, return as-is
|
||||
if (path.startsWith(`/`) || path.startsWith(`https://`) || path.startsWith(`http://`)) {
|
||||
return path;
|
||||
} // Calculate path relative to current location, adding a trailing slash to
|
||||
// match behavior of @reach/router
|
||||
|
||||
|
||||
return new URL(path, window.location.href + (window.location.href.endsWith(`/`) ? `` : `/`)).pathname;
|
||||
}
|
||||
/**
|
||||
* Set list of matchPaths
|
||||
*
|
||||
* @param {Array<{path: string, matchPath: string}>} value collection of matchPaths
|
||||
*/
|
||||
|
||||
|
||||
const setMatchPaths = value => {
|
||||
matchPaths = value;
|
||||
};
|
||||
/**
|
||||
* Return a matchpath url
|
||||
* if `match-paths.json` contains `{ "/foo*": "/page1", ...}`, then
|
||||
* `/foo?bar=far` => `/page1`
|
||||
*
|
||||
* @param {string} rawPathname A raw pathname
|
||||
* @return {string|null}
|
||||
*/
|
||||
|
||||
|
||||
exports.setMatchPaths = setMatchPaths;
|
||||
|
||||
const findMatchPath = rawPathname => {
|
||||
const trimmedPathname = cleanPath(rawPathname);
|
||||
const pickPaths = matchPaths.map(({
|
||||
path,
|
||||
matchPath
|
||||
}) => {
|
||||
return {
|
||||
path: matchPath,
|
||||
originalPath: path
|
||||
};
|
||||
});
|
||||
const path = (0, _utils.pick)(pickPaths, trimmedPathname);
|
||||
|
||||
if (path) {
|
||||
return (0, _normalizePagePath.default)(path.route.originalPath);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
/**
|
||||
* Return a matchpath params from reach/router rules
|
||||
* if `match-paths.json` contains `{ ":bar/*foo" }`, and the path is /baz/zaz/zoo
|
||||
* then it returns
|
||||
* { bar: baz, foo: zaz/zoo }
|
||||
*
|
||||
* @param {string} rawPathname A raw pathname
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
|
||||
exports.findMatchPath = findMatchPath;
|
||||
|
||||
const grabMatchParams = rawPathname => {
|
||||
const trimmedPathname = cleanPath(rawPathname);
|
||||
const pickPaths = matchPaths.map(({
|
||||
path,
|
||||
matchPath
|
||||
}) => {
|
||||
return {
|
||||
path: matchPath,
|
||||
originalPath: path
|
||||
};
|
||||
});
|
||||
const path = (0, _utils.pick)(pickPaths, trimmedPathname);
|
||||
|
||||
if (path) {
|
||||
return path.params;
|
||||
}
|
||||
|
||||
return {};
|
||||
}; // Given a raw URL path, returns the cleaned version of it (trim off
|
||||
// `#` and query params), or if it matches an entry in
|
||||
// `match-paths.json`, its matched path is returned
|
||||
//
|
||||
// E.g. `/foo?bar=far` => `/foo`
|
||||
//
|
||||
// Or if `match-paths.json` contains `{ "/foo*": "/page1", ...}`, then
|
||||
// `/foo?bar=far` => `/page1`
|
||||
|
||||
|
||||
exports.grabMatchParams = grabMatchParams;
|
||||
|
||||
const findPath = rawPathname => {
|
||||
const trimmedPathname = trimPathname(absolutify(rawPathname));
|
||||
|
||||
if (pathCache.has(trimmedPathname)) {
|
||||
return pathCache.get(trimmedPathname);
|
||||
}
|
||||
|
||||
const redirect = (0, _redirectUtils.maybeGetBrowserRedirect)(rawPathname);
|
||||
|
||||
if (redirect) {
|
||||
return findPath(redirect.toPath);
|
||||
}
|
||||
|
||||
let foundPath = findMatchPath(trimmedPathname);
|
||||
|
||||
if (!foundPath) {
|
||||
foundPath = cleanPath(rawPathname);
|
||||
}
|
||||
|
||||
pathCache.set(trimmedPathname, foundPath);
|
||||
return foundPath;
|
||||
};
|
||||
/**
|
||||
* Clean a url and converts /index.html => /
|
||||
* E.g. `/foo?bar=far` => `/foo`
|
||||
*
|
||||
* @param {string} rawPathname A raw pathname
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
|
||||
exports.findPath = findPath;
|
||||
|
||||
const cleanPath = rawPathname => {
|
||||
const trimmedPathname = trimPathname(absolutify(rawPathname));
|
||||
let foundPath = trimmedPathname;
|
||||
|
||||
if (foundPath === `/index.html`) {
|
||||
foundPath = `/`;
|
||||
}
|
||||
|
||||
foundPath = (0, _normalizePagePath.default)(foundPath);
|
||||
return foundPath;
|
||||
};
|
||||
|
||||
exports.cleanPath = cleanPath;
|
||||
@@ -1,107 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.graphql = graphql;
|
||||
exports.prefetchPathname = exports.useStaticQuery = exports.StaticQuery = exports.StaticQueryContext = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _gatsbyLink = _interopRequireWildcard(require("gatsby-link"));
|
||||
|
||||
exports.Link = _gatsbyLink.default;
|
||||
exports.withPrefix = _gatsbyLink.withPrefix;
|
||||
exports.withAssetPrefix = _gatsbyLink.withAssetPrefix;
|
||||
exports.navigate = _gatsbyLink.navigate;
|
||||
exports.parsePath = _gatsbyLink.parsePath;
|
||||
|
||||
var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll");
|
||||
|
||||
exports.useScrollRestoration = _gatsbyReactRouterScroll.useScrollRestoration;
|
||||
|
||||
var _publicPageRenderer = _interopRequireDefault(require("./public-page-renderer"));
|
||||
|
||||
exports.PageRenderer = _publicPageRenderer.default;
|
||||
|
||||
var _loader = _interopRequireDefault(require("./loader"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
const prefetchPathname = _loader.default.enqueue;
|
||||
exports.prefetchPathname = prefetchPathname;
|
||||
|
||||
const StaticQueryContext = /*#__PURE__*/_react.default.createContext({});
|
||||
|
||||
exports.StaticQueryContext = StaticQueryContext;
|
||||
|
||||
function StaticQueryDataRenderer({
|
||||
staticQueryData,
|
||||
data,
|
||||
query,
|
||||
render
|
||||
}) {
|
||||
const finalData = data ? data.data : staticQueryData[query] && staticQueryData[query].data;
|
||||
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalData && render(finalData), !finalData && /*#__PURE__*/_react.default.createElement("div", null, "Loading (StaticQuery)"));
|
||||
}
|
||||
|
||||
const StaticQuery = props => {
|
||||
const {
|
||||
data,
|
||||
query,
|
||||
render,
|
||||
children
|
||||
} = props;
|
||||
return /*#__PURE__*/_react.default.createElement(StaticQueryContext.Consumer, null, staticQueryData => /*#__PURE__*/_react.default.createElement(StaticQueryDataRenderer, {
|
||||
data: data,
|
||||
query: query,
|
||||
render: render || children,
|
||||
staticQueryData: staticQueryData
|
||||
}));
|
||||
};
|
||||
|
||||
exports.StaticQuery = StaticQuery;
|
||||
|
||||
const useStaticQuery = query => {
|
||||
var _context$query;
|
||||
|
||||
if (typeof _react.default.useContext !== `function` && process.env.NODE_ENV === `development`) {
|
||||
throw new Error(`You're likely using a version of React that doesn't support Hooks\n` + `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`);
|
||||
}
|
||||
|
||||
const context = _react.default.useContext(StaticQueryContext); // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets
|
||||
// to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to
|
||||
// catch the misuse of the API and give proper direction
|
||||
|
||||
|
||||
if (isNaN(Number(query))) {
|
||||
throw new Error(`useStaticQuery was called with a string but expects to be called using \`graphql\`. Try this:
|
||||
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
|
||||
useStaticQuery(graphql\`${query}\`);
|
||||
`);
|
||||
}
|
||||
|
||||
if ((_context$query = context[query]) !== null && _context$query !== void 0 && _context$query.data) {
|
||||
return context[query].data;
|
||||
} else {
|
||||
throw new Error(`The result of this StaticQuery could not be fetched.\n\n` + `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` + `please open an issue in https://github.com/gatsbyjs/gatsby/issues`);
|
||||
}
|
||||
};
|
||||
|
||||
exports.useStaticQuery = useStaticQuery;
|
||||
StaticQuery.propTypes = {
|
||||
data: _propTypes.default.object,
|
||||
query: _propTypes.default.string.isRequired,
|
||||
render: _propTypes.default.func,
|
||||
children: _propTypes.default.func
|
||||
};
|
||||
|
||||
function graphql() {
|
||||
throw new Error(`It appears like Gatsby is misconfigured. Gatsby related \`graphql\` calls ` + `are supposed to only be evaluated at compile time, and then compiled away. ` + `Unfortunately, something went wrong and the query was left in the compiled code.\n\n` + `Unless your site has a complex or custom babel/Gatsby configuration this is likely a bug in Gatsby.`);
|
||||
}
|
||||
@@ -1,592 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.getStaticQueryResults = getStaticQueryResults;
|
||||
exports.default = exports.publicLoader = exports.setLoader = exports.ProdLoader = exports.BaseLoader = exports.PageResourceStatus = void 0;
|
||||
|
||||
var _prefetch = _interopRequireDefault(require("./prefetch"));
|
||||
|
||||
var _emitter = _interopRequireDefault(require("./emitter"));
|
||||
|
||||
var _findPath = require("./find-path");
|
||||
|
||||
/**
|
||||
* Available resource loading statuses
|
||||
*/
|
||||
const PageResourceStatus = {
|
||||
/**
|
||||
* At least one of critical resources failed to load
|
||||
*/
|
||||
Error: `error`,
|
||||
|
||||
/**
|
||||
* Resources loaded successfully
|
||||
*/
|
||||
Success: `success`
|
||||
};
|
||||
exports.PageResourceStatus = PageResourceStatus;
|
||||
|
||||
const preferDefault = m => m && m.default || m;
|
||||
|
||||
const stripSurroundingSlashes = s => {
|
||||
s = s[0] === `/` ? s.slice(1) : s;
|
||||
s = s.endsWith(`/`) ? s.slice(0, -1) : s;
|
||||
return s;
|
||||
};
|
||||
|
||||
const createPageDataUrl = path => {
|
||||
const fixedPath = path === `/` ? `index` : stripSurroundingSlashes(path);
|
||||
return `${__PATH_PREFIX__}/page-data/${fixedPath}/page-data.json`;
|
||||
};
|
||||
|
||||
function doFetch(url, method = `GET`) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = new XMLHttpRequest();
|
||||
req.open(method, url, true);
|
||||
|
||||
req.onreadystatechange = () => {
|
||||
if (req.readyState == 4) {
|
||||
resolve(req);
|
||||
}
|
||||
};
|
||||
|
||||
req.send(null);
|
||||
});
|
||||
}
|
||||
|
||||
const doesConnectionSupportPrefetch = () => {
|
||||
if (`connection` in navigator && typeof navigator.connection !== `undefined`) {
|
||||
if ((navigator.connection.effectiveType || ``).includes(`2g`)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (navigator.connection.saveData) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const toPageResources = (pageData, component = null) => {
|
||||
const page = {
|
||||
componentChunkName: pageData.componentChunkName,
|
||||
path: pageData.path,
|
||||
webpackCompilationHash: pageData.webpackCompilationHash,
|
||||
matchPath: pageData.matchPath,
|
||||
staticQueryHashes: pageData.staticQueryHashes
|
||||
};
|
||||
return {
|
||||
component,
|
||||
json: pageData.result,
|
||||
page
|
||||
};
|
||||
};
|
||||
|
||||
class BaseLoader {
|
||||
constructor(loadComponent, matchPaths) {
|
||||
this.inFlightNetworkRequests = new Map();
|
||||
// Map of pagePath -> Page. Where Page is an object with: {
|
||||
// status: PageResourceStatus.Success || PageResourceStatus.Error,
|
||||
// payload: PageResources, // undefined if PageResourceStatus.Error
|
||||
// }
|
||||
// PageResources is {
|
||||
// component,
|
||||
// json: pageData.result,
|
||||
// page: {
|
||||
// componentChunkName,
|
||||
// path,
|
||||
// webpackCompilationHash,
|
||||
// staticQueryHashes
|
||||
// },
|
||||
// staticQueryResults
|
||||
// }
|
||||
this.pageDb = new Map();
|
||||
this.inFlightDb = new Map();
|
||||
this.staticQueryDb = {};
|
||||
this.pageDataDb = new Map();
|
||||
this.prefetchTriggered = new Set();
|
||||
this.prefetchCompleted = new Set();
|
||||
this.loadComponent = loadComponent;
|
||||
(0, _findPath.setMatchPaths)(matchPaths);
|
||||
}
|
||||
|
||||
memoizedGet(url) {
|
||||
let inFlightPromise = this.inFlightNetworkRequests.get(url);
|
||||
|
||||
if (!inFlightPromise) {
|
||||
inFlightPromise = doFetch(url, `GET`);
|
||||
this.inFlightNetworkRequests.set(url, inFlightPromise);
|
||||
} // Prefer duplication with then + catch over .finally to prevent problems in ie11 + firefox
|
||||
|
||||
|
||||
return inFlightPromise.then(response => {
|
||||
this.inFlightNetworkRequests.delete(url);
|
||||
return response;
|
||||
}).catch(err => {
|
||||
this.inFlightNetworkRequests.delete(url);
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
setApiRunner(apiRunner) {
|
||||
this.apiRunner = apiRunner;
|
||||
this.prefetchDisabled = apiRunner(`disableCorePrefetching`).some(a => a);
|
||||
}
|
||||
|
||||
fetchPageDataJson(loadObj) {
|
||||
const {
|
||||
pagePath,
|
||||
retries = 0
|
||||
} = loadObj;
|
||||
const url = createPageDataUrl(pagePath);
|
||||
return this.memoizedGet(url).then(req => {
|
||||
const {
|
||||
status,
|
||||
responseText
|
||||
} = req; // Handle 200
|
||||
|
||||
if (status === 200) {
|
||||
try {
|
||||
const jsonPayload = JSON.parse(responseText);
|
||||
|
||||
if (jsonPayload.path === undefined) {
|
||||
throw new Error(`not a valid pageData response`);
|
||||
}
|
||||
|
||||
return Object.assign(loadObj, {
|
||||
status: PageResourceStatus.Success,
|
||||
payload: jsonPayload
|
||||
});
|
||||
} catch (err) {// continue regardless of error
|
||||
}
|
||||
} // Handle 404
|
||||
|
||||
|
||||
if (status === 404 || status === 200) {
|
||||
// If the request was for a 404 page and it doesn't exist, we're done
|
||||
if (pagePath === `/404.html`) {
|
||||
return Object.assign(loadObj, {
|
||||
status: PageResourceStatus.Error
|
||||
});
|
||||
} // Need some code here to cache the 404 request. In case
|
||||
// multiple loadPageDataJsons result in 404s
|
||||
|
||||
|
||||
return this.fetchPageDataJson(Object.assign(loadObj, {
|
||||
pagePath: `/404.html`,
|
||||
notFound: true
|
||||
}));
|
||||
} // handle 500 response (Unrecoverable)
|
||||
|
||||
|
||||
if (status === 500) {
|
||||
return Object.assign(loadObj, {
|
||||
status: PageResourceStatus.Error
|
||||
});
|
||||
} // Handle everything else, including status === 0, and 503s. Should retry
|
||||
|
||||
|
||||
if (retries < 3) {
|
||||
return this.fetchPageDataJson(Object.assign(loadObj, {
|
||||
retries: retries + 1
|
||||
}));
|
||||
} // Retried 3 times already, result is an error.
|
||||
|
||||
|
||||
return Object.assign(loadObj, {
|
||||
status: PageResourceStatus.Error
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadPageDataJson(rawPath) {
|
||||
const pagePath = (0, _findPath.findPath)(rawPath);
|
||||
|
||||
if (this.pageDataDb.has(pagePath)) {
|
||||
const pageData = this.pageDataDb.get(pagePath);
|
||||
|
||||
if (process.env.BUILD_STAGE !== `develop` || !pageData.stale) {
|
||||
return Promise.resolve(pageData);
|
||||
}
|
||||
}
|
||||
|
||||
return this.fetchPageDataJson({
|
||||
pagePath
|
||||
}).then(pageData => {
|
||||
this.pageDataDb.set(pagePath, pageData);
|
||||
return pageData;
|
||||
});
|
||||
}
|
||||
|
||||
findMatchPath(rawPath) {
|
||||
return (0, _findPath.findMatchPath)(rawPath);
|
||||
} // TODO check all uses of this and whether they use undefined for page resources not exist
|
||||
|
||||
|
||||
loadPage(rawPath) {
|
||||
const pagePath = (0, _findPath.findPath)(rawPath);
|
||||
|
||||
if (this.pageDb.has(pagePath)) {
|
||||
const page = this.pageDb.get(pagePath);
|
||||
|
||||
if (process.env.BUILD_STAGE !== `develop` || !page.payload.stale) {
|
||||
if (page.error) {
|
||||
return {
|
||||
error: page.error,
|
||||
status: page.status
|
||||
};
|
||||
}
|
||||
|
||||
return Promise.resolve(page.payload);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.inFlightDb.has(pagePath)) {
|
||||
return this.inFlightDb.get(pagePath);
|
||||
}
|
||||
|
||||
const inFlightPromise = Promise.all([this.loadAppData(), this.loadPageDataJson(pagePath)]).then(allData => {
|
||||
const result = allData[1];
|
||||
|
||||
if (result.status === PageResourceStatus.Error) {
|
||||
return {
|
||||
status: PageResourceStatus.Error
|
||||
};
|
||||
}
|
||||
|
||||
let pageData = result.payload;
|
||||
const {
|
||||
componentChunkName,
|
||||
staticQueryHashes = []
|
||||
} = pageData;
|
||||
const finalResult = {};
|
||||
const componentChunkPromise = this.loadComponent(componentChunkName).then(component => {
|
||||
finalResult.createdAt = new Date();
|
||||
let pageResources;
|
||||
|
||||
if (!component || component instanceof Error) {
|
||||
finalResult.status = PageResourceStatus.Error;
|
||||
finalResult.error = component;
|
||||
} else {
|
||||
finalResult.status = PageResourceStatus.Success;
|
||||
|
||||
if (result.notFound === true) {
|
||||
finalResult.notFound = true;
|
||||
}
|
||||
|
||||
pageData = Object.assign(pageData, {
|
||||
webpackCompilationHash: allData[0] ? allData[0].webpackCompilationHash : ``
|
||||
});
|
||||
pageResources = toPageResources(pageData, component);
|
||||
} // undefined if final result is an error
|
||||
|
||||
|
||||
return pageResources;
|
||||
});
|
||||
const staticQueryBatchPromise = Promise.all(staticQueryHashes.map(staticQueryHash => {
|
||||
// Check for cache in case this static query result has already been loaded
|
||||
if (this.staticQueryDb[staticQueryHash]) {
|
||||
const jsonPayload = this.staticQueryDb[staticQueryHash];
|
||||
return {
|
||||
staticQueryHash,
|
||||
jsonPayload
|
||||
};
|
||||
}
|
||||
|
||||
return this.memoizedGet(`${__PATH_PREFIX__}/page-data/sq/d/${staticQueryHash}.json`).then(req => {
|
||||
const jsonPayload = JSON.parse(req.responseText);
|
||||
return {
|
||||
staticQueryHash,
|
||||
jsonPayload
|
||||
};
|
||||
}).catch(() => {
|
||||
throw new Error(`We couldn't load "${__PATH_PREFIX__}/page-data/sq/d/${staticQueryHash}.json"`);
|
||||
});
|
||||
})).then(staticQueryResults => {
|
||||
const staticQueryResultsMap = {};
|
||||
staticQueryResults.forEach(({
|
||||
staticQueryHash,
|
||||
jsonPayload
|
||||
}) => {
|
||||
staticQueryResultsMap[staticQueryHash] = jsonPayload;
|
||||
this.staticQueryDb[staticQueryHash] = jsonPayload;
|
||||
});
|
||||
return staticQueryResultsMap;
|
||||
});
|
||||
return Promise.all([componentChunkPromise, staticQueryBatchPromise]).then(([pageResources, staticQueryResults]) => {
|
||||
let payload;
|
||||
|
||||
if (pageResources) {
|
||||
payload = { ...pageResources,
|
||||
staticQueryResults
|
||||
};
|
||||
finalResult.payload = payload;
|
||||
|
||||
_emitter.default.emit(`onPostLoadPageResources`, {
|
||||
page: payload,
|
||||
pageResources: payload
|
||||
});
|
||||
}
|
||||
|
||||
this.pageDb.set(pagePath, finalResult);
|
||||
|
||||
if (finalResult.error) {
|
||||
return {
|
||||
error: finalResult.error,
|
||||
status: finalResult.status
|
||||
};
|
||||
}
|
||||
|
||||
return payload;
|
||||
}) // when static-query fail to load we throw a better error
|
||||
.catch(err => {
|
||||
return {
|
||||
error: err,
|
||||
status: PageResourceStatus.Error
|
||||
};
|
||||
});
|
||||
});
|
||||
inFlightPromise.then(() => {
|
||||
this.inFlightDb.delete(pagePath);
|
||||
}).catch(error => {
|
||||
this.inFlightDb.delete(pagePath);
|
||||
throw error;
|
||||
});
|
||||
this.inFlightDb.set(pagePath, inFlightPromise);
|
||||
return inFlightPromise;
|
||||
} // returns undefined if the page does not exists in cache
|
||||
|
||||
|
||||
loadPageSync(rawPath, options = {}) {
|
||||
const pagePath = (0, _findPath.findPath)(rawPath);
|
||||
|
||||
if (this.pageDb.has(pagePath)) {
|
||||
const pageData = this.pageDb.get(pagePath);
|
||||
|
||||
if (pageData.payload) {
|
||||
return pageData.payload;
|
||||
}
|
||||
|
||||
if (options !== null && options !== void 0 && options.withErrorDetails) {
|
||||
return {
|
||||
error: pageData.error,
|
||||
status: pageData.status
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
shouldPrefetch(pagePath) {
|
||||
// Skip prefetching if we know user is on slow or constrained connection
|
||||
if (!doesConnectionSupportPrefetch()) {
|
||||
return false;
|
||||
} // Check if the page exists.
|
||||
|
||||
|
||||
if (this.pageDb.has(pagePath)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
prefetch(pagePath) {
|
||||
if (!this.shouldPrefetch(pagePath)) {
|
||||
return false;
|
||||
} // Tell plugins with custom prefetching logic that they should start
|
||||
// prefetching this path.
|
||||
|
||||
|
||||
if (!this.prefetchTriggered.has(pagePath)) {
|
||||
this.apiRunner(`onPrefetchPathname`, {
|
||||
pathname: pagePath
|
||||
});
|
||||
this.prefetchTriggered.add(pagePath);
|
||||
} // If a plugin has disabled core prefetching, stop now.
|
||||
|
||||
|
||||
if (this.prefetchDisabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const realPath = (0, _findPath.findPath)(pagePath); // Todo make doPrefetch logic cacheable
|
||||
// eslint-disable-next-line consistent-return
|
||||
|
||||
this.doPrefetch(realPath).then(() => {
|
||||
if (!this.prefetchCompleted.has(pagePath)) {
|
||||
this.apiRunner(`onPostPrefetchPathname`, {
|
||||
pathname: pagePath
|
||||
});
|
||||
this.prefetchCompleted.add(pagePath);
|
||||
}
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
doPrefetch(pagePath) {
|
||||
const pageDataUrl = createPageDataUrl(pagePath);
|
||||
return (0, _prefetch.default)(pageDataUrl, {
|
||||
crossOrigin: `anonymous`,
|
||||
as: `fetch`
|
||||
}).then(() => // This was just prefetched, so will return a response from
|
||||
// the cache instead of making another request to the server
|
||||
this.loadPageDataJson(pagePath));
|
||||
}
|
||||
|
||||
hovering(rawPath) {
|
||||
this.loadPage(rawPath);
|
||||
}
|
||||
|
||||
getResourceURLsForPathname(rawPath) {
|
||||
const pagePath = (0, _findPath.findPath)(rawPath);
|
||||
const page = this.pageDataDb.get(pagePath);
|
||||
|
||||
if (page) {
|
||||
const pageResources = toPageResources(page.payload);
|
||||
return [...createComponentUrls(pageResources.page.componentChunkName), createPageDataUrl(pagePath)];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
isPageNotFound(rawPath) {
|
||||
const pagePath = (0, _findPath.findPath)(rawPath);
|
||||
const page = this.pageDb.get(pagePath);
|
||||
return !page || page.notFound;
|
||||
}
|
||||
|
||||
loadAppData(retries = 0) {
|
||||
return this.memoizedGet(`${__PATH_PREFIX__}/page-data/app-data.json`).then(req => {
|
||||
const {
|
||||
status,
|
||||
responseText
|
||||
} = req;
|
||||
let appData;
|
||||
|
||||
if (status !== 200 && retries < 3) {
|
||||
// Retry 3 times incase of non-200 responses
|
||||
return this.loadAppData(retries + 1);
|
||||
} // Handle 200
|
||||
|
||||
|
||||
if (status === 200) {
|
||||
try {
|
||||
const jsonPayload = JSON.parse(responseText);
|
||||
|
||||
if (jsonPayload.webpackCompilationHash === undefined) {
|
||||
throw new Error(`not a valid app-data response`);
|
||||
}
|
||||
|
||||
appData = jsonPayload;
|
||||
} catch (err) {// continue regardless of error
|
||||
}
|
||||
}
|
||||
|
||||
return appData;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.BaseLoader = BaseLoader;
|
||||
|
||||
const createComponentUrls = componentChunkName => (window.___chunkMapping[componentChunkName] || []).map(chunk => __PATH_PREFIX__ + chunk);
|
||||
|
||||
class ProdLoader extends BaseLoader {
|
||||
constructor(asyncRequires, matchPaths, pageData) {
|
||||
const loadComponent = chunkName => {
|
||||
if (!asyncRequires.components[chunkName]) {
|
||||
throw new Error(`We couldn't find the correct component chunk with the name ${chunkName}`);
|
||||
}
|
||||
|
||||
return asyncRequires.components[chunkName]().then(preferDefault) // loader will handle the case when component is error
|
||||
.catch(err => err);
|
||||
};
|
||||
|
||||
super(loadComponent, matchPaths);
|
||||
|
||||
if (pageData) {
|
||||
this.pageDataDb.set(pageData.path, {
|
||||
pagePath: pageData.path,
|
||||
payload: pageData,
|
||||
status: `success`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
doPrefetch(pagePath) {
|
||||
return super.doPrefetch(pagePath).then(result => {
|
||||
if (result.status !== PageResourceStatus.Success) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const pageData = result.payload;
|
||||
const chunkName = pageData.componentChunkName;
|
||||
const componentUrls = createComponentUrls(chunkName);
|
||||
return Promise.all(componentUrls.map(_prefetch.default)).then(() => pageData);
|
||||
});
|
||||
}
|
||||
|
||||
loadPageDataJson(rawPath) {
|
||||
return super.loadPageDataJson(rawPath).then(data => {
|
||||
if (data.notFound) {
|
||||
// check if html file exist using HEAD request:
|
||||
// if it does we should navigate to it instead of showing 404
|
||||
return doFetch(rawPath, `HEAD`).then(req => {
|
||||
if (req.status === 200) {
|
||||
// page (.html file) actually exist (or we asked for 404 )
|
||||
// returning page resources status as errored to trigger
|
||||
// regular browser navigation to given page
|
||||
return {
|
||||
status: PageResourceStatus.Error
|
||||
};
|
||||
} // if HEAD request wasn't 200, return notFound result
|
||||
// and show 404 page
|
||||
|
||||
|
||||
return data;
|
||||
});
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.ProdLoader = ProdLoader;
|
||||
let instance;
|
||||
|
||||
const setLoader = _loader => {
|
||||
instance = _loader;
|
||||
};
|
||||
|
||||
exports.setLoader = setLoader;
|
||||
const publicLoader = {
|
||||
enqueue: rawPath => instance.prefetch(rawPath),
|
||||
// Real methods
|
||||
getResourceURLsForPathname: rawPath => instance.getResourceURLsForPathname(rawPath),
|
||||
loadPage: rawPath => instance.loadPage(rawPath),
|
||||
// TODO add deprecation to v4 so people use withErrorDetails and then we can remove in v5 and change default behaviour
|
||||
loadPageSync: (rawPath, options = {}) => instance.loadPageSync(rawPath, options),
|
||||
prefetch: rawPath => instance.prefetch(rawPath),
|
||||
isPageNotFound: rawPath => instance.isPageNotFound(rawPath),
|
||||
hovering: rawPath => instance.hovering(rawPath),
|
||||
loadAppData: () => instance.loadAppData()
|
||||
};
|
||||
exports.publicLoader = publicLoader;
|
||||
var _default = publicLoader;
|
||||
exports.default = _default;
|
||||
|
||||
function getStaticQueryResults() {
|
||||
if (instance) {
|
||||
return instance.staticQueryDb;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.LoadingIndicatorEventHandler = LoadingIndicatorEventHandler;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _emitter = _interopRequireDefault(require("../emitter"));
|
||||
|
||||
var _indicator = require("./indicator");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function LoadingIndicatorEventHandler() {
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
React.useEffect(() => {
|
||||
_emitter.default.on(`onDelayedLoadPageResources`, () => setVisible(true));
|
||||
|
||||
_emitter.default.on(`onRouteUpdate`, () => setVisible(false));
|
||||
|
||||
return () => {
|
||||
_emitter.default.off(`onDelayedLoadPageResources`, () => setVisible(true));
|
||||
|
||||
_emitter.default.off(`onRouteUpdate`, () => setVisible(false));
|
||||
};
|
||||
}, []);
|
||||
return /*#__PURE__*/React.createElement(_indicator.Indicator, {
|
||||
visible: visible
|
||||
});
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.Indicator = Indicator;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _shadowPortal = require("../shadow-portal");
|
||||
|
||||
var _style = require("./style");
|
||||
|
||||
var _loadingIndicator = require("$virtual/loading-indicator");
|
||||
|
||||
var _debugLog = require("../debug-log");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
if (typeof window === `undefined`) {
|
||||
throw new Error(`Loading indicator should never be imported in code that doesn't target only browsers`);
|
||||
}
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept(`$virtual/loading-indicator`, () => {// isLoadingIndicatorEnabled is imported with ES import so no need
|
||||
// for dedicated handling as HMR just replace it in that case
|
||||
});
|
||||
} // HMR can rerun this, so check if it was set before
|
||||
// we also set it on window and not just in module scope because of HMR resetting
|
||||
// module scope
|
||||
|
||||
|
||||
if (typeof window.___gatsbyDidShowLoadingIndicatorBefore === `undefined`) {
|
||||
window.___gatsbyDidShowLoadingIndicatorBefore = false;
|
||||
}
|
||||
|
||||
function Indicator({
|
||||
visible = true
|
||||
}) {
|
||||
if (!(0, _loadingIndicator.isLoadingIndicatorEnabled)()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!window.___gatsbyDidShowLoadingIndicatorBefore) {
|
||||
// not ideal to this in render function, but that's just console info
|
||||
(0, _debugLog.debugLog)(`A loading indicator is displayed in-browser whenever content is being requested upon navigation (Query On Demand).\n\nYou can disable the loading indicator for your current session by visiting ${window.location.origin}/___loading-indicator/disable`);
|
||||
window.___gatsbyDidShowLoadingIndicatorBefore = true;
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement(_shadowPortal.ShadowPortal, {
|
||||
identifier: "gatsby-qod"
|
||||
}, /*#__PURE__*/React.createElement(_style.Style, null), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-loading-indicator": "root" // preact doesn't render data attributes with a literal bool false value to dom
|
||||
,
|
||||
"data-gatsby-loading-indicator-visible": visible.toString(),
|
||||
"aria-live": "assertive"
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-loading-indicator": "spinner",
|
||||
"aria-hidden": "true"
|
||||
}, /*#__PURE__*/React.createElement("svg", {
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "currentColor"
|
||||
}, /*#__PURE__*/React.createElement("path", {
|
||||
d: "M0 0h24v24H0z",
|
||||
fill: "none"
|
||||
}), /*#__PURE__*/React.createElement("path", {
|
||||
d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"
|
||||
}))), /*#__PURE__*/React.createElement("div", {
|
||||
"data-gatsby-loading-indicator": "text"
|
||||
}, visible ? `Preparing requested page` : ``)));
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.Style = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _cssToObject = require("../css-to-object");
|
||||
|
||||
const Style = () => /*#__PURE__*/_react.default.createElement("style", {
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: (0, _cssToObject.css)`
|
||||
:host {
|
||||
--spinnerColor: #663399;
|
||||
--borderLeft: #b17acc;
|
||||
--background: #ffffff;
|
||||
--color: #232129;
|
||||
--radii: 4px;
|
||||
--z-index-indicator: 10000;
|
||||
--shadow: 0px 2px 4px rgba(46, 41, 51, 0.08),
|
||||
0px 4px 8px rgba(71, 63, 79, 0.16);
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator="root"] {
|
||||
font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol" !important;
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
position: fixed;
|
||||
bottom: 1.5em;
|
||||
left: 1.5em;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--radii);
|
||||
z-index: var(--z-index-indicator);
|
||||
border-left: 0.25em solid var(--borderLeft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0.75em 1.15em;
|
||||
min-width: 196px;
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator-visible="false"] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
will-change: opacity, transform;
|
||||
transform: translateY(45px);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator-visible="true"] {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0px);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator="spinner"] {
|
||||
animation: spin 1s linear infinite;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: var(--spinnerColor);
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator="text"] {
|
||||
margin-left: 0.75em;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-gatsby-loading-indicator="spinner"] {
|
||||
animation: none;
|
||||
}
|
||||
[data-gatsby-loading-indicator-visible="false"] {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
[data-gatsby-loading-indicator-visible="true"] {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
--spinnerColor: #f1defa;
|
||||
--background: #232129;
|
||||
--color: #ffffff;
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
exports.Style = Style;
|
||||
@@ -1,323 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.init = init;
|
||||
exports.shouldUpdateScroll = shouldUpdateScroll;
|
||||
exports.RouteUpdates = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _loader = _interopRequireWildcard(require("./loader"));
|
||||
|
||||
var _redirectUtils = require("./redirect-utils.js");
|
||||
|
||||
exports.maybeGetBrowserRedirect = _redirectUtils.maybeGetBrowserRedirect;
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
var _emitter = _interopRequireDefault(require("./emitter"));
|
||||
|
||||
var _routeAnnouncerProps = require("./route-announcer-props");
|
||||
|
||||
var _reachRouter = require("@gatsbyjs/reach-router");
|
||||
|
||||
var _history = require("@gatsbyjs/reach-router/lib/history");
|
||||
|
||||
var _gatsbyLink = require("gatsby-link");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
function maybeRedirect(pathname) {
|
||||
const redirect = (0, _redirectUtils.maybeGetBrowserRedirect)(pathname);
|
||||
const {
|
||||
hash,
|
||||
search
|
||||
} = window.location;
|
||||
|
||||
if (redirect != null) {
|
||||
window.___replace(redirect.toPath + search + hash);
|
||||
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} // Catch unhandled chunk loading errors and force a restart of the app.
|
||||
|
||||
|
||||
let nextRoute = ``;
|
||||
window.addEventListener(`unhandledrejection`, event => {
|
||||
if (/loading chunk \d* failed./i.test(event.reason)) {
|
||||
if (nextRoute) {
|
||||
window.location.pathname = nextRoute;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const onPreRouteUpdate = (location, prevLocation) => {
|
||||
if (!maybeRedirect(location.pathname)) {
|
||||
nextRoute = location.pathname;
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onPreRouteUpdate`, {
|
||||
location,
|
||||
prevLocation
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onRouteUpdate = (location, prevLocation) => {
|
||||
if (!maybeRedirect(location.pathname)) {
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onRouteUpdate`, {
|
||||
location,
|
||||
prevLocation
|
||||
});
|
||||
|
||||
if (process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND && process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`) {
|
||||
_emitter.default.emit(`onRouteUpdate`, {
|
||||
location,
|
||||
prevLocation
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const navigate = (to, options = {}) => {
|
||||
// Support forward/backward navigation with numbers
|
||||
// navigate(-2) (jumps back 2 history steps)
|
||||
// navigate(2) (jumps forward 2 history steps)
|
||||
if (typeof to === `number`) {
|
||||
_history.globalHistory.navigate(to);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
pathname,
|
||||
search,
|
||||
hash
|
||||
} = (0, _gatsbyLink.parsePath)(to);
|
||||
const redirect = (0, _redirectUtils.maybeGetBrowserRedirect)(pathname); // If we're redirecting, just replace the passed in pathname
|
||||
// to the one we want to redirect to.
|
||||
|
||||
if (redirect) {
|
||||
to = redirect.toPath + search + hash;
|
||||
} // If we had a service worker update, no matter the path, reload window and
|
||||
// reset the pathname whitelist
|
||||
|
||||
|
||||
if (window.___swUpdated) {
|
||||
window.location = pathname + search + hash;
|
||||
return;
|
||||
} // Start a timer to wait for a second before transitioning and showing a
|
||||
// loader in case resources aren't around yet.
|
||||
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
_emitter.default.emit(`onDelayedLoadPageResources`, {
|
||||
pathname
|
||||
});
|
||||
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onRouteUpdateDelayed`, {
|
||||
location: window.location
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
_loader.default.loadPage(pathname).then(pageResources => {
|
||||
// If no page resources, then refresh the page
|
||||
// Do this, rather than simply `window.location.reload()`, so that
|
||||
// pressing the back/forward buttons work - otherwise when pressing
|
||||
// back, the browser will just change the URL and expect JS to handle
|
||||
// the change, which won't always work since it might not be a Gatsby
|
||||
// page.
|
||||
if (!pageResources || pageResources.status === _loader.PageResourceStatus.Error) {
|
||||
window.history.replaceState({}, ``, location.href);
|
||||
window.location = pathname;
|
||||
clearTimeout(timeoutId);
|
||||
return;
|
||||
} // If the loaded page has a different compilation hash to the
|
||||
// window, then a rebuild has occurred on the server. Reload.
|
||||
|
||||
|
||||
if (process.env.NODE_ENV === `production` && pageResources) {
|
||||
// window.___webpackCompilationHash gets set in production-app.js after navigationInit() is called
|
||||
// So on a direct visit of a page with a browser redirect this check is truthy and thus the codepath is hit
|
||||
// While the resource actually exists, but only too late
|
||||
// TODO: This should probably be fixed by setting ___webpackCompilationHash before navigationInit() is called
|
||||
if (pageResources.page.webpackCompilationHash !== window.___webpackCompilationHash) {
|
||||
// Purge plugin-offline cache
|
||||
if (`serviceWorker` in navigator && navigator.serviceWorker.controller !== null && navigator.serviceWorker.controller.state === `activated`) {
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
gatsbyApi: `clearPathResources`
|
||||
});
|
||||
}
|
||||
|
||||
window.location = pathname + search + hash;
|
||||
}
|
||||
}
|
||||
|
||||
(0, _reachRouter.navigate)(to, options);
|
||||
clearTimeout(timeoutId);
|
||||
});
|
||||
};
|
||||
|
||||
function shouldUpdateScroll(prevRouterProps, {
|
||||
location
|
||||
}) {
|
||||
const {
|
||||
pathname,
|
||||
hash
|
||||
} = location;
|
||||
const results = (0, _apiRunnerBrowser.apiRunner)(`shouldUpdateScroll`, {
|
||||
prevRouterProps,
|
||||
// `pathname` for backwards compatibility
|
||||
pathname,
|
||||
routerProps: {
|
||||
location
|
||||
},
|
||||
getSavedScrollPosition: args => [0, // FIXME this is actually a big code smell, we should fix this
|
||||
// eslint-disable-next-line @babel/no-invalid-this
|
||||
this._stateStorage.read(args, args.key)]
|
||||
});
|
||||
|
||||
if (results.length > 0) {
|
||||
// Use the latest registered shouldUpdateScroll result, this allows users to override plugin's configuration
|
||||
// @see https://github.com/gatsbyjs/gatsby/issues/12038
|
||||
return results[results.length - 1];
|
||||
}
|
||||
|
||||
if (prevRouterProps) {
|
||||
const {
|
||||
location: {
|
||||
pathname: oldPathname
|
||||
}
|
||||
} = prevRouterProps;
|
||||
|
||||
if (oldPathname === pathname) {
|
||||
// Scroll to element if it exists, if it doesn't, or no hash is provided,
|
||||
// scroll to top.
|
||||
return hash ? decodeURI(hash.slice(1)) : [0, 0];
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function init() {
|
||||
// The "scroll-behavior" package expects the "action" to be on the location
|
||||
// object so let's copy it over.
|
||||
_history.globalHistory.listen(args => {
|
||||
args.location.action = args.action;
|
||||
});
|
||||
|
||||
window.___push = to => navigate(to, {
|
||||
replace: false
|
||||
});
|
||||
|
||||
window.___replace = to => navigate(to, {
|
||||
replace: true
|
||||
});
|
||||
|
||||
window.___navigate = (to, options) => navigate(to, options); // Check for initial page-load redirect
|
||||
|
||||
|
||||
maybeRedirect(window.location.pathname);
|
||||
}
|
||||
|
||||
class RouteAnnouncer extends _react.default.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.announcementRef = /*#__PURE__*/_react.default.createRef();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, nextProps) {
|
||||
requestAnimationFrame(() => {
|
||||
let pageName = `new page at ${this.props.location.pathname}`;
|
||||
|
||||
if (document.title) {
|
||||
pageName = document.title;
|
||||
}
|
||||
|
||||
const pageHeadings = document.querySelectorAll(`#gatsby-focus-wrapper h1`);
|
||||
|
||||
if (pageHeadings && pageHeadings.length) {
|
||||
pageName = pageHeadings[0].textContent;
|
||||
}
|
||||
|
||||
const newAnnouncement = `Navigated to ${pageName}`;
|
||||
|
||||
if (this.announcementRef.current) {
|
||||
const oldAnnouncement = this.announcementRef.current.innerText;
|
||||
|
||||
if (oldAnnouncement !== newAnnouncement) {
|
||||
this.announcementRef.current.innerText = newAnnouncement;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _routeAnnouncerProps.RouteAnnouncerProps, {
|
||||
ref: this.announcementRef
|
||||
}));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const compareLocationProps = (prevLocation, nextLocation) => {
|
||||
var _prevLocation$state, _nextLocation$state;
|
||||
|
||||
if (prevLocation.href !== nextLocation.href) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if ((prevLocation === null || prevLocation === void 0 ? void 0 : (_prevLocation$state = prevLocation.state) === null || _prevLocation$state === void 0 ? void 0 : _prevLocation$state.key) !== (nextLocation === null || nextLocation === void 0 ? void 0 : (_nextLocation$state = nextLocation.state) === null || _nextLocation$state === void 0 ? void 0 : _nextLocation$state.key)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}; // Fire on(Pre)RouteUpdate APIs
|
||||
|
||||
|
||||
class RouteUpdates extends _react.default.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
onPreRouteUpdate(props.location, null);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
onRouteUpdate(this.props.location, null);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(prevProps) {
|
||||
if (compareLocationProps(prevProps.location, this.props.location)) {
|
||||
onPreRouteUpdate(this.props.location, prevProps.location);
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (compareLocationProps(prevProps.location, this.props.location)) {
|
||||
onRouteUpdate(this.props.location, prevProps.location);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.props.children, /*#__PURE__*/_react.default.createElement(RouteAnnouncer, {
|
||||
location: location
|
||||
}));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.RouteUpdates = RouteUpdates;
|
||||
RouteUpdates.propTypes = {
|
||||
location: _propTypes.default.object.isRequired
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _default = path => {
|
||||
if (path === undefined) {
|
||||
return path;
|
||||
}
|
||||
|
||||
if (path === `/`) {
|
||||
return `/`;
|
||||
}
|
||||
|
||||
if (path.charAt(path.length - 1) === `/`) {
|
||||
return path.slice(0, -1);
|
||||
}
|
||||
|
||||
return path;
|
||||
};
|
||||
|
||||
exports.default = _default;
|
||||
@@ -1,54 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
var _findPath = require("./find-path");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
// Renders page
|
||||
class PageRenderer extends _react.default.Component {
|
||||
render() {
|
||||
const props = { ...this.props,
|
||||
params: { ...(0, _findPath.grabMatchParams)(this.props.location.pathname),
|
||||
...this.props.pageResources.json.pageContext.__params
|
||||
}
|
||||
};
|
||||
const pageElement = /*#__PURE__*/(0, _react.createElement)(this.props.pageResources.component, { ...props,
|
||||
key: this.props.path || this.props.pageResources.page.path
|
||||
});
|
||||
const wrappedPage = (0, _apiRunnerBrowser.apiRunner)(`wrapPageElement`, {
|
||||
element: pageElement,
|
||||
props
|
||||
}, pageElement, ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result,
|
||||
props
|
||||
};
|
||||
}).pop();
|
||||
return wrappedPage;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
PageRenderer.propTypes = {
|
||||
location: _propTypes.default.object.isRequired,
|
||||
pageResources: _propTypes.default.object.isRequired,
|
||||
data: _propTypes.default.object,
|
||||
pageContext: _propTypes.default.object.isRequired
|
||||
};
|
||||
var _default = PageRenderer;
|
||||
exports.default = _default;
|
||||
@@ -1 +0,0 @@
|
||||
[]
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
require("gatsby-legacy-polyfills");
|
||||
|
||||
if (process.env.NODE_ENV === `development`) {
|
||||
require(`event-source-polyfill`);
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
const support = function (feature) {
|
||||
if (typeof document === `undefined`) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const fakeLink = document.createElement(`link`);
|
||||
|
||||
try {
|
||||
if (fakeLink.relList && typeof fakeLink.relList.supports === `function`) {
|
||||
return fakeLink.relList.supports(feature);
|
||||
}
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const linkPrefetchStrategy = function (url, options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof document === `undefined`) {
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
|
||||
const link = document.createElement(`link`);
|
||||
link.setAttribute(`rel`, `prefetch`);
|
||||
link.setAttribute(`href`, url);
|
||||
Object.keys(options).forEach(key => {
|
||||
link.setAttribute(key, options[key]);
|
||||
});
|
||||
link.onload = resolve;
|
||||
link.onerror = reject;
|
||||
const parentElement = document.getElementsByTagName(`head`)[0] || document.getElementsByName(`script`)[0].parentNode;
|
||||
parentElement.appendChild(link);
|
||||
});
|
||||
};
|
||||
|
||||
const xhrPrefetchStrategy = function (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const req = new XMLHttpRequest();
|
||||
req.open(`GET`, url, true);
|
||||
|
||||
req.onload = () => {
|
||||
if (req.status === 200) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
};
|
||||
|
||||
req.send(null);
|
||||
});
|
||||
};
|
||||
|
||||
const supportedPrefetchStrategy = support(`prefetch`) ? linkPrefetchStrategy : xhrPrefetchStrategy;
|
||||
const preFetched = {};
|
||||
|
||||
const prefetch = function (url, options) {
|
||||
return new Promise(resolve => {
|
||||
if (preFetched[url]) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
supportedPrefetchStrategy(url, options).then(() => {
|
||||
resolve();
|
||||
preFetched[url] = true;
|
||||
}).catch(() => {}); // 404s are logged to the console anyway
|
||||
});
|
||||
};
|
||||
|
||||
var _default = prefetch;
|
||||
exports.default = _default;
|
||||
@@ -1,208 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _reactDom = _interopRequireDefault(require("react-dom"));
|
||||
|
||||
var _reachRouter = require("@gatsbyjs/reach-router");
|
||||
|
||||
var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll");
|
||||
|
||||
var _gatsby = require("gatsby");
|
||||
|
||||
var _navigation = require("./navigation");
|
||||
|
||||
var _emitter = _interopRequireDefault(require("./emitter"));
|
||||
|
||||
var _pageRenderer = _interopRequireDefault(require("./page-renderer"));
|
||||
|
||||
var _asyncRequires = _interopRequireDefault(require("$virtual/async-requires"));
|
||||
|
||||
var _loader = require("./loader");
|
||||
|
||||
var _ensureResources = _interopRequireDefault(require("./ensure-resources"));
|
||||
|
||||
var _stripPrefix = _interopRequireDefault(require("./strip-prefix"));
|
||||
|
||||
var _matchPaths = _interopRequireDefault(require("$virtual/match-paths.json"));
|
||||
|
||||
// Generated during bootstrap
|
||||
const loader = new _loader.ProdLoader(_asyncRequires.default, _matchPaths.default, window.pageData);
|
||||
(0, _loader.setLoader)(loader);
|
||||
loader.setApiRunner(_apiRunnerBrowser.apiRunner);
|
||||
window.asyncRequires = _asyncRequires.default;
|
||||
window.___emitter = _emitter.default;
|
||||
window.___loader = _loader.publicLoader;
|
||||
(0, _navigation.init)();
|
||||
(0, _apiRunnerBrowser.apiRunnerAsync)(`onClientEntry`).then(() => {
|
||||
// Let plugins register a service worker. The plugin just needs
|
||||
// to return true.
|
||||
if ((0, _apiRunnerBrowser.apiRunner)(`registerServiceWorker`).filter(Boolean).length > 0) {
|
||||
require(`./register-service-worker`);
|
||||
} // In gatsby v2 if Router is used in page using matchPaths
|
||||
// paths need to contain full path.
|
||||
// For example:
|
||||
// - page have `/app/*` matchPath
|
||||
// - inside template user needs to use `/app/xyz` as path
|
||||
// Resetting `basepath`/`baseuri` keeps current behaviour
|
||||
// to not introduce breaking change.
|
||||
// Remove this in v3
|
||||
|
||||
|
||||
const RouteHandler = props => /*#__PURE__*/_react.default.createElement(_reachRouter.BaseContext.Provider, {
|
||||
value: {
|
||||
baseuri: `/`,
|
||||
basepath: `/`
|
||||
}
|
||||
}, /*#__PURE__*/_react.default.createElement(_pageRenderer.default, props));
|
||||
|
||||
const DataContext = /*#__PURE__*/_react.default.createContext({});
|
||||
|
||||
class GatsbyRoot extends _react.default.Component {
|
||||
render() {
|
||||
const {
|
||||
children
|
||||
} = this.props;
|
||||
return /*#__PURE__*/_react.default.createElement(_reachRouter.Location, null, ({
|
||||
location
|
||||
}) => /*#__PURE__*/_react.default.createElement(_ensureResources.default, {
|
||||
location: location
|
||||
}, ({
|
||||
pageResources,
|
||||
location
|
||||
}) => {
|
||||
const staticQueryResults = (0, _loader.getStaticQueryResults)();
|
||||
return /*#__PURE__*/_react.default.createElement(_gatsby.StaticQueryContext.Provider, {
|
||||
value: staticQueryResults
|
||||
}, /*#__PURE__*/_react.default.createElement(DataContext.Provider, {
|
||||
value: {
|
||||
pageResources,
|
||||
location
|
||||
}
|
||||
}, children));
|
||||
}));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class LocationHandler extends _react.default.Component {
|
||||
render() {
|
||||
return /*#__PURE__*/_react.default.createElement(DataContext.Consumer, null, ({
|
||||
pageResources,
|
||||
location
|
||||
}) => /*#__PURE__*/_react.default.createElement(_navigation.RouteUpdates, {
|
||||
location: location
|
||||
}, /*#__PURE__*/_react.default.createElement(_gatsbyReactRouterScroll.ScrollContext, {
|
||||
location: location,
|
||||
shouldUpdateScroll: _navigation.shouldUpdateScroll
|
||||
}, /*#__PURE__*/_react.default.createElement(_reachRouter.Router, {
|
||||
basepath: __BASE_PATH__,
|
||||
location: location,
|
||||
id: "gatsby-focus-wrapper"
|
||||
}, /*#__PURE__*/_react.default.createElement(RouteHandler, (0, _extends2.default)({
|
||||
path: pageResources.page.path === `/404.html` ? (0, _stripPrefix.default)(location.pathname, __BASE_PATH__) : encodeURI(pageResources.page.matchPath || pageResources.page.path)
|
||||
}, this.props, {
|
||||
location: location,
|
||||
pageResources: pageResources
|
||||
}, pageResources.json))))));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const {
|
||||
pagePath,
|
||||
location: browserLoc
|
||||
} = window; // Explicitly call navigate if the canonical path (window.pagePath)
|
||||
// is different to the browser path (window.location.pathname). But
|
||||
// only if NONE of the following conditions hold:
|
||||
//
|
||||
// - The url matches a client side route (page.matchPath)
|
||||
// - it's a 404 page
|
||||
// - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)
|
||||
|
||||
if (pagePath && __BASE_PATH__ + pagePath !== browserLoc.pathname && !(loader.findMatchPath((0, _stripPrefix.default)(browserLoc.pathname, __BASE_PATH__)) || pagePath === `/404.html` || pagePath.match(/^\/404\/?$/) || pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/))) {
|
||||
(0, _reachRouter.navigate)(__BASE_PATH__ + pagePath + browserLoc.search + browserLoc.hash, {
|
||||
replace: true
|
||||
});
|
||||
}
|
||||
|
||||
_loader.publicLoader.loadPage(browserLoc.pathname).then(page => {
|
||||
if (!page || page.status === _loader.PageResourceStatus.Error) {
|
||||
const message = `page resources for ${browserLoc.pathname} not found. Not rendering React`; // if the chunk throws an error we want to capture the real error
|
||||
// This should help with https://github.com/gatsbyjs/gatsby/issues/19618
|
||||
|
||||
if (page && page.error) {
|
||||
console.error(message);
|
||||
throw page.error;
|
||||
}
|
||||
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
window.___webpackCompilationHash = page.page.webpackCompilationHash;
|
||||
const SiteRoot = (0, _apiRunnerBrowser.apiRunner)(`wrapRootElement`, {
|
||||
element: /*#__PURE__*/_react.default.createElement(LocationHandler, null)
|
||||
}, /*#__PURE__*/_react.default.createElement(LocationHandler, null), ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result
|
||||
};
|
||||
}).pop();
|
||||
|
||||
const App = function App() {
|
||||
const onClientEntryRanRef = _react.default.useRef(false);
|
||||
|
||||
_react.default.useEffect(() => {
|
||||
if (!onClientEntryRanRef.current) {
|
||||
onClientEntryRanRef.current = true;
|
||||
|
||||
if (performance.mark) {
|
||||
performance.mark(`onInitialClientRender`);
|
||||
}
|
||||
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onInitialClientRender`);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(GatsbyRoot, null, SiteRoot);
|
||||
};
|
||||
|
||||
const renderer = (0, _apiRunnerBrowser.apiRunner)(`replaceHydrateFunction`, undefined, _reactDom.default.hydrateRoot ? _reactDom.default.hydrateRoot : _reactDom.default.hydrate)[0];
|
||||
|
||||
function runRender() {
|
||||
const rootElement = typeof window !== `undefined` ? document.getElementById(`___gatsby`) : null;
|
||||
|
||||
if (renderer === _reactDom.default.hydrateRoot) {
|
||||
renderer(rootElement, /*#__PURE__*/_react.default.createElement(App, null));
|
||||
} else {
|
||||
renderer( /*#__PURE__*/_react.default.createElement(App, null), rootElement);
|
||||
}
|
||||
} // https://github.com/madrobby/zepto/blob/b5ed8d607f67724788ec9ff492be297f64d47dfc/src/zepto.js#L439-L450
|
||||
// TODO remove IE 10 support
|
||||
|
||||
|
||||
const doc = document;
|
||||
|
||||
if (doc.readyState === `complete` || doc.readyState !== `loading` && !doc.documentElement.doScroll) {
|
||||
setTimeout(function () {
|
||||
runRender();
|
||||
}, 0);
|
||||
} else {
|
||||
const handler = function () {
|
||||
doc.removeEventListener(`DOMContentLoaded`, handler, false);
|
||||
window.removeEventListener(`load`, handler, false);
|
||||
runRender();
|
||||
};
|
||||
|
||||
doc.addEventListener(`DOMContentLoaded`, handler, false);
|
||||
window.addEventListener(`load`, handler, false);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,33 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _loader = _interopRequireDefault(require("./loader"));
|
||||
|
||||
var _queryResultStore = require("./query-result-store");
|
||||
|
||||
const DevPageRenderer = ({
|
||||
location
|
||||
}) => {
|
||||
const pageResources = _loader.default.loadPageSync(location.pathname);
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(_queryResultStore.PageQueryStore, {
|
||||
location,
|
||||
pageResources
|
||||
});
|
||||
};
|
||||
|
||||
DevPageRenderer.propTypes = {
|
||||
location: _propTypes.default.shape({
|
||||
pathname: _propTypes.default.string.isRequired
|
||||
}).isRequired
|
||||
};
|
||||
var _default = DevPageRenderer;
|
||||
exports.default = _default;
|
||||
@@ -1,38 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _loader = _interopRequireDefault(require("./loader"));
|
||||
|
||||
var _pageRenderer = _interopRequireDefault(require("./page-renderer"));
|
||||
|
||||
const ProdPageRenderer = ({
|
||||
location
|
||||
}) => {
|
||||
const pageResources = _loader.default.loadPageSync(location.pathname);
|
||||
|
||||
if (!pageResources) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(_pageRenderer.default, {
|
||||
location,
|
||||
pageResources,
|
||||
...pageResources.json
|
||||
});
|
||||
};
|
||||
|
||||
ProdPageRenderer.propTypes = {
|
||||
location: _propTypes.default.shape({
|
||||
pathname: _propTypes.default.string.isRequired
|
||||
}).isRequired
|
||||
};
|
||||
var _default = ProdPageRenderer;
|
||||
exports.default = _default;
|
||||
@@ -1,11 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const preferDefault = m => m && m.default || m;
|
||||
|
||||
if (process.env.BUILD_STAGE === `develop`) {
|
||||
module.exports = preferDefault(require(`./public-page-renderer-dev`));
|
||||
} else if (process.env.BUILD_STAGE === `build-javascript`) {
|
||||
module.exports = preferDefault(require(`./public-page-renderer-prod`));
|
||||
} else {
|
||||
module.exports = () => null;
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.StaticQueryStore = exports.PageQueryStore = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _gatsby = require("gatsby");
|
||||
|
||||
var _socketIo = require("./socketIo");
|
||||
|
||||
var _pageRenderer = _interopRequireDefault(require("./page-renderer"));
|
||||
|
||||
var _normalizePagePath = _interopRequireDefault(require("./normalize-page-path"));
|
||||
|
||||
var _loader = _interopRequireWildcard(require("./loader"));
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
if (process.env.NODE_ENV === `production`) {
|
||||
throw new Error(`It appears like Gatsby is misconfigured. JSONStore is Gatsby internal ` + `development-only component and should never be used in production.\n\n` + `Unless your site has a complex or custom webpack/Gatsby ` + `configuration this is likely a bug in Gatsby. ` + `Please report this at https://github.com/gatsbyjs/gatsby/issues ` + `with steps to reproduce this error.`);
|
||||
}
|
||||
|
||||
const getPathFromProps = props => props.pageResources && props.pageResources.page ? (0, _normalizePagePath.default)(props.pageResources.page.path) : undefined;
|
||||
|
||||
class PageQueryStore extends _react.default.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleMittEvent = () => {
|
||||
this.setState(state => {
|
||||
return {
|
||||
page: state.path ? _loader.default.loadPageSync((0, _normalizePagePath.default)(state.path)) : null
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
this.state = {
|
||||
pageData: null,
|
||||
path: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
(0, _socketIo.registerPath)(getPathFromProps(this.props));
|
||||
|
||||
___emitter.on(`pageQueryResult`, this.handleMittEvent);
|
||||
|
||||
___emitter.on(`onPostLoadPageResources`, this.handleMittEvent);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
(0, _socketIo.unregisterPath)(this.state.path);
|
||||
|
||||
___emitter.off(`pageQueryResult`, this.handleMittEvent);
|
||||
|
||||
___emitter.off(`onPostLoadPageResources`, this.handleMittEvent);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
const newPath = getPathFromProps(props);
|
||||
|
||||
if (newPath !== state.path) {
|
||||
(0, _socketIo.unregisterPath)(state.path);
|
||||
(0, _socketIo.registerPath)(newPath);
|
||||
return {
|
||||
path: newPath,
|
||||
page: newPath ? _loader.default.loadPageSync((0, _normalizePagePath.default)(newPath)) : null
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
// We want to update this component when:
|
||||
// - location changed
|
||||
// - page data for path changed
|
||||
return this.props.location !== nextProps.location || this.state.path !== nextState.path || this.state.page !== nextState.page;
|
||||
}
|
||||
|
||||
render() {
|
||||
// eslint-disable-next-line
|
||||
if (!this.state.page) {
|
||||
return /*#__PURE__*/_react.default.createElement("div", null);
|
||||
}
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(_pageRenderer.default, (0, _extends2.default)({}, this.props, this.state.page.json));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.PageQueryStore = PageQueryStore;
|
||||
|
||||
class StaticQueryStore extends _react.default.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleMittEvent = () => {
|
||||
this.setState({
|
||||
staticQueryData: { ...(0, _loader.getStaticQueryResults)()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
this.state = {
|
||||
staticQueryData: { ...(0, _loader.getStaticQueryResults)()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
___emitter.on(`staticQueryResult`, this.handleMittEvent);
|
||||
|
||||
___emitter.on(`onPostLoadPageResources`, this.handleMittEvent);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
___emitter.off(`staticQueryResult`, this.handleMittEvent);
|
||||
|
||||
___emitter.off(`onPostLoadPageResources`, this.handleMittEvent);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
// We want to update this component when:
|
||||
// - static query results changed
|
||||
return this.state.staticQueryData !== nextState.staticQueryData;
|
||||
}
|
||||
|
||||
render() {
|
||||
return /*#__PURE__*/_react.default.createElement(_gatsby.StaticQueryContext.Provider, {
|
||||
value: this.state.staticQueryData
|
||||
}, this.props.children);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.StaticQueryStore = StaticQueryStore;
|
||||
@@ -1,3 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.polyfill = Component => Component;
|
||||
@@ -1,30 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.maybeGetBrowserRedirect = maybeGetBrowserRedirect;
|
||||
|
||||
var _redirects = _interopRequireDefault(require("./redirects.json"));
|
||||
|
||||
// Convert to a map for faster lookup in maybeRedirect()
|
||||
const redirectMap = new Map();
|
||||
const redirectIgnoreCaseMap = new Map();
|
||||
|
||||
_redirects.default.forEach(redirect => {
|
||||
if (redirect.ignoreCase) {
|
||||
redirectIgnoreCaseMap.set(redirect.fromPath, redirect);
|
||||
} else {
|
||||
redirectMap.set(redirect.fromPath, redirect);
|
||||
}
|
||||
});
|
||||
|
||||
function maybeGetBrowserRedirect(pathname) {
|
||||
let redirect = redirectMap.get(pathname);
|
||||
|
||||
if (!redirect) {
|
||||
redirect = redirectIgnoreCaseMap.get(pathname.toLowerCase());
|
||||
}
|
||||
|
||||
return redirect;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
[]
|
||||
@@ -1,66 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
if (window.location.protocol !== `https:` && window.location.hostname !== `localhost`) {
|
||||
console.error(`Service workers can only be used over HTTPS, or on localhost for development`);
|
||||
} else if (`serviceWorker` in navigator) {
|
||||
navigator.serviceWorker.register(`${__BASE_PATH__}/sw.js`).then(function (reg) {
|
||||
reg.addEventListener(`updatefound`, () => {
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerUpdateFound`, {
|
||||
serviceWorker: reg
|
||||
}); // The updatefound event implies that reg.installing is set; see
|
||||
// https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
|
||||
|
||||
const installingWorker = reg.installing;
|
||||
console.log(`installingWorker`, installingWorker);
|
||||
installingWorker.addEventListener(`statechange`, () => {
|
||||
switch (installingWorker.state) {
|
||||
case `installed`:
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and the fresh content will
|
||||
// have been added to the cache.
|
||||
// We set a flag so Gatsby Link knows to refresh the page on next navigation attempt
|
||||
window.___swUpdated = true; // We call the onServiceWorkerUpdateReady API so users can show update prompts.
|
||||
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerUpdateReady`, {
|
||||
serviceWorker: reg
|
||||
}); // If resources failed for the current page, reload.
|
||||
|
||||
if (window.___failedResources) {
|
||||
console.log(`resources failed, SW updated - reloading`);
|
||||
window.location.reload();
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a "Content is cached for offline use." message.
|
||||
console.log(`Content is now available offline!`); // Post to service worker that install is complete.
|
||||
// Delay to allow time for the event listener to be added --
|
||||
// otherwise fetch is called too soon and resources aren't cached.
|
||||
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerInstalled`, {
|
||||
serviceWorker: reg
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case `redundant`:
|
||||
console.error(`The installing service worker became redundant.`);
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerRedundant`, {
|
||||
serviceWorker: reg
|
||||
});
|
||||
break;
|
||||
|
||||
case `activated`:
|
||||
(0, _apiRunnerBrowser.apiRunner)(`onServiceWorkerActive`, {
|
||||
serviceWorker: reg
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
}).catch(function (e) {
|
||||
console.error(`Error during service worker registration:`, e);
|
||||
});
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _reachRouter = require("@gatsbyjs/reach-router");
|
||||
|
||||
var _gatsbyReactRouterScroll = require("gatsby-react-router-scroll");
|
||||
|
||||
var _navigation = require("./navigation");
|
||||
|
||||
var _apiRunnerBrowser = require("./api-runner-browser");
|
||||
|
||||
var _loader = _interopRequireDefault(require("./loader"));
|
||||
|
||||
var _queryResultStore = require("./query-result-store");
|
||||
|
||||
var _ensureResources = _interopRequireDefault(require("./ensure-resources"));
|
||||
|
||||
var _fastRefreshOverlay = _interopRequireDefault(require("./fast-refresh-overlay"));
|
||||
|
||||
// In gatsby v2 if Router is used in page using matchPaths
|
||||
// paths need to contain full path.
|
||||
// For example:
|
||||
// - page have `/app/*` matchPath
|
||||
// - inside template user needs to use `/app/xyz` as path
|
||||
// Resetting `basepath`/`baseuri` keeps current behaviour
|
||||
// to not introduce breaking change.
|
||||
// Remove this in v3
|
||||
const RouteHandler = props => /*#__PURE__*/_react.default.createElement(_reachRouter.BaseContext.Provider, {
|
||||
value: {
|
||||
baseuri: `/`,
|
||||
basepath: `/`
|
||||
}
|
||||
}, /*#__PURE__*/_react.default.createElement(_queryResultStore.PageQueryStore, props));
|
||||
|
||||
class LocationHandler extends _react.default.Component {
|
||||
render() {
|
||||
const {
|
||||
location
|
||||
} = this.props;
|
||||
|
||||
if (!_loader.default.isPageNotFound(location.pathname)) {
|
||||
return /*#__PURE__*/_react.default.createElement(_ensureResources.default, {
|
||||
location: location
|
||||
}, locationAndPageResources => /*#__PURE__*/_react.default.createElement(_navigation.RouteUpdates, {
|
||||
location: location
|
||||
}, /*#__PURE__*/_react.default.createElement(_gatsbyReactRouterScroll.ScrollContext, {
|
||||
location: location,
|
||||
shouldUpdateScroll: _navigation.shouldUpdateScroll
|
||||
}, /*#__PURE__*/_react.default.createElement(_reachRouter.Router, {
|
||||
basepath: __BASE_PATH__,
|
||||
location: location,
|
||||
id: "gatsby-focus-wrapper"
|
||||
}, /*#__PURE__*/_react.default.createElement(RouteHandler, (0, _extends2.default)({
|
||||
path: encodeURI(locationAndPageResources.pageResources.page.matchPath || locationAndPageResources.pageResources.page.path)
|
||||
}, this.props, locationAndPageResources))))));
|
||||
}
|
||||
|
||||
const dev404PageResources = _loader.default.loadPageSync(`/dev-404-page`);
|
||||
|
||||
const real404PageResources = _loader.default.loadPageSync(`/404.html`);
|
||||
|
||||
let custom404;
|
||||
|
||||
if (real404PageResources) {
|
||||
custom404 = /*#__PURE__*/_react.default.createElement(_queryResultStore.PageQueryStore, (0, _extends2.default)({}, this.props, {
|
||||
pageResources: real404PageResources
|
||||
}));
|
||||
}
|
||||
|
||||
return /*#__PURE__*/_react.default.createElement(_navigation.RouteUpdates, {
|
||||
location: location
|
||||
}, /*#__PURE__*/_react.default.createElement(_reachRouter.Router, {
|
||||
basepath: __BASE_PATH__,
|
||||
location: location,
|
||||
id: "gatsby-focus-wrapper"
|
||||
}, /*#__PURE__*/_react.default.createElement(RouteHandler, {
|
||||
path: location.pathname,
|
||||
location: location,
|
||||
pageResources: dev404PageResources,
|
||||
custom404: custom404
|
||||
})));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const Root = () => /*#__PURE__*/_react.default.createElement(_reachRouter.Location, null, locationContext => /*#__PURE__*/_react.default.createElement(LocationHandler, locationContext)); // Let site, plugins wrap the site e.g. for Redux.
|
||||
|
||||
|
||||
const rootWrappedWithWrapRootElement = (0, _apiRunnerBrowser.apiRunner)(`wrapRootElement`, {
|
||||
element: /*#__PURE__*/_react.default.createElement(Root, null)
|
||||
}, /*#__PURE__*/_react.default.createElement(Root, null), ({
|
||||
result,
|
||||
plugin
|
||||
}) => {
|
||||
return {
|
||||
element: result
|
||||
};
|
||||
}).pop();
|
||||
|
||||
function RootWrappedWithOverlayAndProvider() {
|
||||
return /*#__PURE__*/_react.default.createElement(_fastRefreshOverlay.default, null, /*#__PURE__*/_react.default.createElement(_queryResultStore.StaticQueryStore, null, rootWrappedWithWrapRootElement));
|
||||
}
|
||||
|
||||
var _default = RootWrappedWithOverlayAndProvider;
|
||||
exports.default = _default;
|
||||
@@ -1,23 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.RouteAnnouncerProps = void 0;
|
||||
// This is extracted to separate module because it's shared
|
||||
// between browser and SSR code
|
||||
const RouteAnnouncerProps = {
|
||||
id: `gatsby-announcer`,
|
||||
style: {
|
||||
position: `absolute`,
|
||||
top: 0,
|
||||
width: 1,
|
||||
height: 1,
|
||||
padding: 0,
|
||||
overflow: `hidden`,
|
||||
clip: `rect(0, 0, 0, 0)`,
|
||||
whiteSpace: `nowrap`,
|
||||
border: 0
|
||||
},
|
||||
"aria-live": `assertive`,
|
||||
"aria-atomic": `true`
|
||||
};
|
||||
exports.RouteAnnouncerProps = RouteAnnouncerProps;
|
||||
@@ -1,41 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.WritableAsPromise = void 0;
|
||||
|
||||
var _stream = require("stream");
|
||||
|
||||
class WritableAsPromise extends _stream.Writable {
|
||||
constructor() {
|
||||
super();
|
||||
this._output = ``;
|
||||
this._deferred = {
|
||||
promise: null,
|
||||
resolve: null,
|
||||
reject: null
|
||||
};
|
||||
this._deferred.promise = new Promise((resolve, reject) => {
|
||||
this._deferred.resolve = resolve;
|
||||
this._deferred.reject = reject;
|
||||
});
|
||||
}
|
||||
|
||||
_write(chunk, enc, cb) {
|
||||
this._output += chunk.toString();
|
||||
cb();
|
||||
}
|
||||
|
||||
end() {
|
||||
this._deferred.resolve(this._output);
|
||||
|
||||
this.destroy();
|
||||
} // disguise us as a promise
|
||||
|
||||
|
||||
then(resolve, reject) {
|
||||
return this._deferred.promise.then(resolve, reject);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.WritableAsPromise = WritableAsPromise;
|
||||
@@ -1,41 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.ShadowPortal = void 0;
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _reactDom = require("react-dom");
|
||||
|
||||
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||||
|
||||
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||||
|
||||
const ShadowPortal = ({
|
||||
children,
|
||||
identifier
|
||||
}) => {
|
||||
const mountNode = React.useRef(null);
|
||||
const portalNode = React.useRef(null);
|
||||
const shadowNode = React.useRef(null);
|
||||
const [, forceUpdate] = React.useState();
|
||||
React.useLayoutEffect(() => {
|
||||
const ownerDocument = mountNode.current.ownerDocument;
|
||||
portalNode.current = ownerDocument.createElement(identifier);
|
||||
shadowNode.current = portalNode.current.attachShadow({
|
||||
mode: `open`
|
||||
});
|
||||
ownerDocument.body.appendChild(portalNode.current);
|
||||
forceUpdate({});
|
||||
return () => {
|
||||
if (portalNode.current && portalNode.current.ownerDocument) {
|
||||
portalNode.current.ownerDocument.body.removeChild(portalNode.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
return shadowNode.current ? /*#__PURE__*/(0, _reactDom.createPortal)(children, shadowNode.current) : /*#__PURE__*/React.createElement("span", {
|
||||
ref: mountNode
|
||||
});
|
||||
};
|
||||
|
||||
exports.ShadowPortal = ShadowPortal;
|
||||
@@ -1,66 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = socketIo;
|
||||
exports.registerPath = registerPath;
|
||||
exports.unregisterPath = unregisterPath;
|
||||
|
||||
var _socket = _interopRequireDefault(require("socket.io-client"));
|
||||
|
||||
var _errorOverlayHandler = require("./error-overlay-handler");
|
||||
|
||||
let socket = null;
|
||||
|
||||
function socketIo() {
|
||||
if (process.env.NODE_ENV !== `production`) {
|
||||
if (!socket) {
|
||||
// Try to initialize web socket if we didn't do it already
|
||||
try {
|
||||
// force websocket as transport
|
||||
socket = (0, _socket.default)({
|
||||
transports: [process.env.GATSBY_SOCKET_IO_DEFAULT_TRANSPORT]
|
||||
}); // when websocket fails, we'll try polling
|
||||
|
||||
socket.on(`reconnect_attempt`, () => {
|
||||
socket.io.opts.transports = [`polling`, `websocket`];
|
||||
});
|
||||
socket.on(`message`, msg => {
|
||||
if (msg.type === `overlayError`) {
|
||||
if (msg.payload.message) {
|
||||
(0, _errorOverlayHandler.reportError)(msg.payload.id, msg.payload.message);
|
||||
} else {
|
||||
(0, _errorOverlayHandler.clearError)(msg.payload.id);
|
||||
}
|
||||
|
||||
___emitter.emit(msg.type, msg.payload);
|
||||
}
|
||||
}); // Prevents certain browsers spamming XHR 'ERR_CONNECTION_REFUSED'
|
||||
// errors within the console, such as when exiting the develop process.
|
||||
|
||||
socket.on(`disconnect`, () => {
|
||||
console.warn(`[socket.io] Disconnected from dev server.`);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Could not connect to socket.io on dev server.`);
|
||||
}
|
||||
}
|
||||
|
||||
return socket;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} // Tell websocket-manager.js the new path we're on.
|
||||
// This will help the backend prioritize queries for this
|
||||
// path.
|
||||
|
||||
|
||||
function registerPath(path) {
|
||||
socket.emit(`registerPath`, path);
|
||||
} // Unregister the former path
|
||||
|
||||
|
||||
function unregisterPath(path) {
|
||||
socket.emit(`unregisterPath`, path);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
/* eslint-disable filenames/match-regex */
|
||||
const {
|
||||
wrapModuleWithTracking
|
||||
} = require(`./tracking-unsafe-module-wrapper`);
|
||||
|
||||
module.exports = wrapModuleWithTracking(`child_process`);
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
wrapModuleWithTracking
|
||||
} = require(`./tracking-unsafe-module-wrapper`);
|
||||
|
||||
module.exports = wrapModuleWithTracking(`fs`);
|
||||
@@ -1,9 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
wrapModuleWithTracking
|
||||
} = require(`./tracking-unsafe-module-wrapper`);
|
||||
|
||||
module.exports = wrapModuleWithTracking(`http`, {
|
||||
ignore: [`http.Agent`]
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
wrapModuleWithTracking
|
||||
} = require(`./tracking-unsafe-module-wrapper`);
|
||||
|
||||
module.exports = wrapModuleWithTracking(`http2`);
|
||||
@@ -1,9 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const {
|
||||
wrapModuleWithTracking
|
||||
} = require(`./tracking-unsafe-module-wrapper`);
|
||||
|
||||
module.exports = wrapModuleWithTracking(`https`, {
|
||||
ignore: [`https.Agent`]
|
||||
});
|
||||
@@ -1,64 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// initializing global here for unsafe builtin usage at import time
|
||||
global.unsafeBuiltinUsage = [];
|
||||
|
||||
function createProxyHandler(prefix, options) {
|
||||
return {
|
||||
get: function (target, key) {
|
||||
const value = target[key];
|
||||
const path = key && key.toString ? `${prefix}.${key.toString()}` : prefix;
|
||||
|
||||
if (options.ignore.includes(path)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
const fieldDescriptor = Object.getOwnPropertyDescriptor(target, key);
|
||||
|
||||
if (fieldDescriptor && !fieldDescriptor.writable) {
|
||||
// this is to prevent errors like:
|
||||
// ```
|
||||
// TypeError: 'get' on proxy: property 'constants' is a read - only and
|
||||
// non - configurable data property on the proxy target but the proxy
|
||||
// did not return its actual value
|
||||
// (expected '[object Object]' but got '[object Object]')
|
||||
// ```
|
||||
return value;
|
||||
}
|
||||
|
||||
if (typeof value === `function`) {
|
||||
return function wrapper(...args) {
|
||||
const myErrorHolder = {
|
||||
name: `Unsafe builtin usage ${path}`
|
||||
};
|
||||
Error.captureStackTrace(myErrorHolder, wrapper); // - loadPageDataSync already is tracked with dedicated warning messages,
|
||||
// so skipping marking it to avoid multiple messages for same usage
|
||||
// - node-gyp-build will use fs.readDirSync in attempt to load binaries
|
||||
// this should be ok to ignore.
|
||||
|
||||
if (!myErrorHolder.stack.includes(`loadPageDataSync`) && !myErrorHolder.stack.includes(`node-gyp-build`)) {
|
||||
global.unsafeBuiltinUsage.push(myErrorHolder.stack);
|
||||
}
|
||||
|
||||
return value.apply(target, args);
|
||||
};
|
||||
} else if (typeof value === `object` && value !== null) {
|
||||
return new Proxy(value, createProxyHandler(path, options));
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function wrapModuleWithTracking(moduleName, options = {}) {
|
||||
if (!options.ignore) {
|
||||
options.ignore = [];
|
||||
}
|
||||
|
||||
const mod = require(moduleName);
|
||||
|
||||
return new Proxy(mod, createProxyHandler(moduleName, options));
|
||||
}
|
||||
|
||||
exports.wrapModuleWithTracking = wrapModuleWithTracking;
|
||||
@@ -1,339 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = staticPage;
|
||||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _fs = _interopRequireDefault(require("fs"));
|
||||
|
||||
var _server = require("react-dom/server");
|
||||
|
||||
var _lodash = require("lodash");
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _apiRunnerSsr = require("./api-runner-ssr");
|
||||
|
||||
var _findPath = require("./find-path");
|
||||
|
||||
var _ssrSyncRequires = _interopRequireDefault(require("$virtual/ssr-sync-requires"));
|
||||
|
||||
var _routeAnnouncerProps = require("./route-announcer-props");
|
||||
|
||||
var _router = require("@reach/router");
|
||||
|
||||
/* global BROWSER_ESM_ONLY */
|
||||
// import testRequireError from "./test-require-error"
|
||||
// For some extremely mysterious reason, webpack adds the above module *after*
|
||||
// this module so that when this code runs, testRequireError is undefined.
|
||||
// So in the meantime, we'll just inline it.
|
||||
const testRequireError = (moduleName, err) => {
|
||||
const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`);
|
||||
const firstLine = err.toString().split(`\n`)[0];
|
||||
return regex.test(firstLine);
|
||||
};
|
||||
|
||||
let cachedStats;
|
||||
|
||||
const getStats = publicDir => {
|
||||
if (cachedStats) {
|
||||
return cachedStats;
|
||||
} else {
|
||||
cachedStats = JSON.parse(_fs.default.readFileSync(_path.default.join(publicDir, `webpack.stats.json`), `utf-8`));
|
||||
return cachedStats;
|
||||
}
|
||||
};
|
||||
|
||||
let Html;
|
||||
|
||||
try {
|
||||
Html = require(`../src/html`);
|
||||
} catch (err) {
|
||||
if (testRequireError(`../src/html`, err)) {
|
||||
Html = require(`./default-html`);
|
||||
} else {
|
||||
console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`);
|
||||
process.exit();
|
||||
}
|
||||
}
|
||||
|
||||
Html = Html && Html.__esModule ? Html.default : Html;
|
||||
|
||||
async function staticPage(pagePath, isClientOnlyPage, publicDir, error, callback) {
|
||||
let bodyHtml = ``;
|
||||
let headComponents = [/*#__PURE__*/_react.default.createElement("meta", {
|
||||
key: "environment",
|
||||
name: "note",
|
||||
content: "environment=development"
|
||||
})];
|
||||
let htmlAttributes = {};
|
||||
let bodyAttributes = {};
|
||||
let preBodyComponents = [];
|
||||
let postBodyComponents = [];
|
||||
let bodyProps = {};
|
||||
|
||||
if (error) {
|
||||
postBodyComponents.push([/*#__PURE__*/_react.default.createElement("script", {
|
||||
key: "dev-ssr-error",
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: `window._gatsbyEvents = window._gatsbyEvents || []; window._gatsbyEvents.push(["FAST_REFRESH", { action: "SHOW_DEV_SSR_ERROR", payload: ${JSON.stringify(error)} }])`
|
||||
}
|
||||
}), /*#__PURE__*/_react.default.createElement("noscript", {
|
||||
key: "dev-ssr-error-noscript"
|
||||
}, /*#__PURE__*/_react.default.createElement("h1", null, "Failed to Server Render (SSR)"), /*#__PURE__*/_react.default.createElement("h2", null, "Error message:"), /*#__PURE__*/_react.default.createElement("p", null, error.sourceMessage), /*#__PURE__*/_react.default.createElement("h2", null, "File:"), /*#__PURE__*/_react.default.createElement("p", null, error.source, ":", error.line, ":", error.column), /*#__PURE__*/_react.default.createElement("h2", null, "Stack:"), /*#__PURE__*/_react.default.createElement("pre", null, /*#__PURE__*/_react.default.createElement("code", null, error.stack)))]);
|
||||
}
|
||||
|
||||
const generateBodyHTML = async () => {
|
||||
const setHeadComponents = components => {
|
||||
headComponents = headComponents.concat(components);
|
||||
};
|
||||
|
||||
const setHtmlAttributes = attributes => {
|
||||
htmlAttributes = (0, _lodash.merge)(htmlAttributes, attributes);
|
||||
};
|
||||
|
||||
const setBodyAttributes = attributes => {
|
||||
bodyAttributes = (0, _lodash.merge)(bodyAttributes, attributes);
|
||||
};
|
||||
|
||||
const setPreBodyComponents = components => {
|
||||
preBodyComponents = preBodyComponents.concat(components);
|
||||
};
|
||||
|
||||
const setPostBodyComponents = components => {
|
||||
postBodyComponents = postBodyComponents.concat(components);
|
||||
};
|
||||
|
||||
const setBodyProps = props => {
|
||||
bodyProps = (0, _lodash.merge)({}, bodyProps, props);
|
||||
};
|
||||
|
||||
const getHeadComponents = () => headComponents;
|
||||
|
||||
const replaceHeadComponents = components => {
|
||||
headComponents = components;
|
||||
};
|
||||
|
||||
const replaceBodyHTMLString = body => {
|
||||
bodyHtml = body;
|
||||
};
|
||||
|
||||
const getPreBodyComponents = () => preBodyComponents;
|
||||
|
||||
const replacePreBodyComponents = components => {
|
||||
preBodyComponents = components;
|
||||
};
|
||||
|
||||
const getPostBodyComponents = () => postBodyComponents;
|
||||
|
||||
const replacePostBodyComponents = components => {
|
||||
postBodyComponents = components;
|
||||
};
|
||||
|
||||
const getPageDataPath = path => {
|
||||
const fixedPagePath = path === `/` ? `index` : path;
|
||||
return _path.default.join(`page-data`, fixedPagePath, `page-data.json`);
|
||||
};
|
||||
|
||||
const getPageData = pagePath => {
|
||||
const pageDataPath = getPageDataPath(pagePath);
|
||||
|
||||
const absolutePageDataPath = _path.default.join(publicDir, pageDataPath);
|
||||
|
||||
const pageDataJson = _fs.default.readFileSync(absolutePageDataPath, `utf8`);
|
||||
|
||||
try {
|
||||
return JSON.parse(pageDataJson);
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const pageData = getPageData(pagePath);
|
||||
const {
|
||||
componentChunkName
|
||||
} = pageData;
|
||||
let scriptsAndStyles = (0, _lodash.flatten)([`commons`].map(chunkKey => {
|
||||
const fetchKey = `assetsByChunkName[${chunkKey}]`;
|
||||
const stats = getStats(publicDir);
|
||||
let chunks = (0, _lodash.get)(stats, fetchKey);
|
||||
const namedChunkGroups = (0, _lodash.get)(stats, `namedChunkGroups`);
|
||||
|
||||
if (!chunks) {
|
||||
return null;
|
||||
}
|
||||
|
||||
chunks = chunks.map(chunk => {
|
||||
if (chunk === `/`) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
rel: `preload`,
|
||||
name: chunk
|
||||
};
|
||||
});
|
||||
namedChunkGroups[chunkKey].assets.forEach(asset => chunks.push({
|
||||
rel: `preload`,
|
||||
name: asset.name
|
||||
}));
|
||||
const childAssets = namedChunkGroups[chunkKey].childAssets;
|
||||
|
||||
for (const rel in childAssets) {
|
||||
if (childAssets.hasownProperty(rel)) {
|
||||
chunks = (0, _lodash.concat)(chunks, childAssets[rel].map(chunk => {
|
||||
return {
|
||||
rel,
|
||||
name: chunk
|
||||
};
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
return chunks;
|
||||
})).filter(s => (0, _lodash.isObject)(s)).sort((s1, _s2) => s1.rel == `preload` ? -1 : 1); // given priority to preload
|
||||
|
||||
scriptsAndStyles = (0, _lodash.uniqBy)(scriptsAndStyles, item => item.name);
|
||||
const styles = scriptsAndStyles.filter(style => style.name && style.name.endsWith(`.css`));
|
||||
styles.slice(0).reverse().forEach(style => {
|
||||
headComponents.unshift( /*#__PURE__*/_react.default.createElement("link", {
|
||||
"data-identity": `gatsby-dev-css`,
|
||||
key: style.name,
|
||||
rel: "stylesheet",
|
||||
type: "text/css",
|
||||
href: `${__PATH_PREFIX__}/${style.name}`
|
||||
}));
|
||||
});
|
||||
const createElement = _react.default.createElement;
|
||||
|
||||
class RouteHandler extends _react.default.Component {
|
||||
render() {
|
||||
var _pageData$result, _pageData$result$page;
|
||||
|
||||
const props = { ...this.props,
|
||||
...pageData.result,
|
||||
params: { ...(0, _findPath.grabMatchParams)(this.props.location.pathname),
|
||||
...(((_pageData$result = pageData.result) === null || _pageData$result === void 0 ? void 0 : (_pageData$result$page = _pageData$result.pageContext) === null || _pageData$result$page === void 0 ? void 0 : _pageData$result$page.__params) || {})
|
||||
}
|
||||
};
|
||||
let pageElement;
|
||||
|
||||
if (_ssrSyncRequires.default.ssrComponents[componentChunkName] && !isClientOnlyPage) {
|
||||
pageElement = createElement(_ssrSyncRequires.default.ssrComponents[componentChunkName], props);
|
||||
} else {
|
||||
// If this is a client-only page or the pageComponent didn't finish
|
||||
// compiling yet, just render an empty component.
|
||||
pageElement = () => null;
|
||||
}
|
||||
|
||||
const wrappedPage = (0, _apiRunnerSsr.apiRunner)(`wrapPageElement`, {
|
||||
element: pageElement,
|
||||
props
|
||||
}, pageElement, ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result,
|
||||
props
|
||||
};
|
||||
}).pop();
|
||||
return wrappedPage;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const routerElement = /*#__PURE__*/_react.default.createElement(_router.ServerLocation, {
|
||||
url: `${__BASE_PATH__}${pagePath}`
|
||||
}, /*#__PURE__*/_react.default.createElement(_router.Router, {
|
||||
id: "gatsby-focus-wrapper",
|
||||
baseuri: __BASE_PATH__
|
||||
}, /*#__PURE__*/_react.default.createElement(RouteHandler, {
|
||||
path: "/*"
|
||||
})), /*#__PURE__*/_react.default.createElement("div", _routeAnnouncerProps.RouteAnnouncerProps));
|
||||
|
||||
const bodyComponent = (0, _apiRunnerSsr.apiRunner)(`wrapRootElement`, {
|
||||
element: routerElement,
|
||||
pathname: pagePath
|
||||
}, routerElement, ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result,
|
||||
pathname: pagePath
|
||||
};
|
||||
}).pop(); // Let the site or plugin render the page component.
|
||||
|
||||
await (0, _apiRunnerSsr.apiRunnerAsync)(`replaceRenderer`, {
|
||||
bodyComponent,
|
||||
replaceBodyHTMLString,
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath,
|
||||
pathPrefix: __PATH_PREFIX__
|
||||
}); // If no one stepped up, we'll handle it.
|
||||
|
||||
if (!bodyHtml) {
|
||||
try {
|
||||
bodyHtml = (0, _server.renderToString)(bodyComponent);
|
||||
} catch (e) {
|
||||
// ignore @reach/router redirect errors
|
||||
if (!(0, _router.isRedirect)(e)) throw e;
|
||||
}
|
||||
}
|
||||
|
||||
(0, _apiRunnerSsr.apiRunner)(`onRenderBody`, {
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath
|
||||
});
|
||||
(0, _apiRunnerSsr.apiRunner)(`onPreRenderHTML`, {
|
||||
getHeadComponents,
|
||||
replaceHeadComponents,
|
||||
getPreBodyComponents,
|
||||
replacePreBodyComponents,
|
||||
getPostBodyComponents,
|
||||
replacePostBodyComponents,
|
||||
pathname: pagePath
|
||||
});
|
||||
return bodyHtml;
|
||||
};
|
||||
|
||||
const bodyStr = await generateBodyHTML();
|
||||
|
||||
const htmlElement = /*#__PURE__*/_react.default.createElement(Html, { ...bodyProps,
|
||||
body: bodyStr,
|
||||
headComponents: headComponents.concat([/*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `io`,
|
||||
src: "/socket.io/socket.io.js"
|
||||
})]),
|
||||
htmlAttributes,
|
||||
bodyAttributes,
|
||||
preBodyComponents,
|
||||
postBodyComponents: postBodyComponents.concat([!BROWSER_ESM_ONLY && /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `polyfill`,
|
||||
src: "/polyfill.js",
|
||||
noModule: true
|
||||
}), /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `framework`,
|
||||
src: "/framework.js"
|
||||
}), /*#__PURE__*/_react.default.createElement("script", {
|
||||
key: `commons`,
|
||||
src: "/commons.js"
|
||||
})].filter(Boolean))
|
||||
});
|
||||
|
||||
let htmlStr = (0, _server.renderToStaticMarkup)(htmlElement);
|
||||
htmlStr = `<!DOCTYPE html>${htmlStr}`;
|
||||
callback(null, htmlStr);
|
||||
}
|
||||
@@ -1,478 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = staticPage;
|
||||
exports.sanitizeComponents = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
const React = require(`react`);
|
||||
|
||||
const path = require(`path`);
|
||||
|
||||
const {
|
||||
renderToString,
|
||||
renderToStaticMarkup,
|
||||
pipeToNodeWritable
|
||||
} = require(`react-dom/server`);
|
||||
|
||||
const {
|
||||
ServerLocation,
|
||||
Router,
|
||||
isRedirect
|
||||
} = require(`@gatsbyjs/reach-router`);
|
||||
|
||||
const merge = require(`deepmerge`);
|
||||
|
||||
const {
|
||||
StaticQueryContext
|
||||
} = require(`gatsby`);
|
||||
|
||||
const fs = require(`fs`);
|
||||
|
||||
const {
|
||||
WritableAsPromise
|
||||
} = require(`./server-utils/writable-as-promise`);
|
||||
|
||||
const {
|
||||
RouteAnnouncerProps
|
||||
} = require(`./route-announcer-props`);
|
||||
|
||||
const {
|
||||
apiRunner,
|
||||
apiRunnerAsync
|
||||
} = require(`./api-runner-ssr`);
|
||||
|
||||
const syncRequires = require(`$virtual/sync-requires`);
|
||||
|
||||
const {
|
||||
version: gatsbyVersion
|
||||
} = require(`gatsby/package.json`);
|
||||
|
||||
const {
|
||||
grabMatchParams
|
||||
} = require(`./find-path`);
|
||||
|
||||
const chunkMapping = require(`../public/chunk-map.json`); // we want to force posix-style joins, so Windows doesn't produce backslashes for urls
|
||||
|
||||
|
||||
const {
|
||||
join
|
||||
} = path.posix; // const testRequireError = require("./test-require-error")
|
||||
// For some extremely mysterious reason, webpack adds the above module *after*
|
||||
// this module so that when this code runs, testRequireError is undefined.
|
||||
// So in the meantime, we'll just inline it.
|
||||
|
||||
const testRequireError = (moduleName, err) => {
|
||||
const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`);
|
||||
const firstLine = err.toString().split(`\n`)[0];
|
||||
return regex.test(firstLine);
|
||||
};
|
||||
|
||||
let Html;
|
||||
|
||||
try {
|
||||
Html = require(`../src/html`);
|
||||
} catch (err) {
|
||||
if (testRequireError(`../src/html`, err)) {
|
||||
Html = require(`./default-html`);
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
Html = Html && Html.__esModule ? Html.default : Html;
|
||||
|
||||
const getPageDataPath = path => {
|
||||
const fixedPagePath = path === `/` ? `index` : path;
|
||||
return join(`page-data`, fixedPagePath, `page-data.json`);
|
||||
};
|
||||
|
||||
const getPageDataUrl = pagePath => {
|
||||
const pageDataPath = getPageDataPath(pagePath);
|
||||
return `${__PATH_PREFIX__}/${pageDataPath}`;
|
||||
};
|
||||
|
||||
const getStaticQueryPath = hash => join(`page-data`, `sq`, `d`, `${hash}.json`);
|
||||
|
||||
const getStaticQueryUrl = hash => `${__PATH_PREFIX__}/${getStaticQueryPath(hash)}`;
|
||||
|
||||
const getAppDataUrl = () => `${__PATH_PREFIX__}/${join(`page-data`, `app-data.json`)}`;
|
||||
|
||||
const createElement = React.createElement;
|
||||
|
||||
const sanitizeComponents = components => {
|
||||
const componentsArray = [].concat(components).flat(Infinity).filter(Boolean);
|
||||
return componentsArray.map(component => {
|
||||
// Ensure manifest is always loaded from content server
|
||||
// And not asset server when an assetPrefix is used
|
||||
if (__ASSET_PREFIX__ && component.props.rel === `manifest`) {
|
||||
return React.cloneElement(component, {
|
||||
href: component.props.href.replace(__ASSET_PREFIX__, ``)
|
||||
});
|
||||
}
|
||||
|
||||
return component;
|
||||
});
|
||||
};
|
||||
|
||||
exports.sanitizeComponents = sanitizeComponents;
|
||||
|
||||
function deepMerge(a, b) {
|
||||
const combineMerge = (target, source, options) => {
|
||||
const destination = target.slice();
|
||||
source.forEach((item, index) => {
|
||||
if (typeof destination[index] === `undefined`) {
|
||||
destination[index] = options.cloneUnlessOtherwiseSpecified(item, options);
|
||||
} else if (options.isMergeableObject(item)) {
|
||||
destination[index] = merge(target[index], item, options);
|
||||
} else if (target.indexOf(item) === -1) {
|
||||
destination.push(item);
|
||||
}
|
||||
});
|
||||
return destination;
|
||||
};
|
||||
|
||||
return merge(a, b, {
|
||||
arrayMerge: combineMerge
|
||||
});
|
||||
}
|
||||
|
||||
async function staticPage({
|
||||
pagePath,
|
||||
pageData,
|
||||
staticQueryContext,
|
||||
styles,
|
||||
scripts,
|
||||
reversedStyles,
|
||||
reversedScripts,
|
||||
inlinePageData = false
|
||||
}) {
|
||||
// for this to work we need this function to be sync or at least ensure there is single execution of it at a time
|
||||
global.unsafeBuiltinUsage = [];
|
||||
|
||||
try {
|
||||
let bodyHtml = ``;
|
||||
let headComponents = [/*#__PURE__*/React.createElement("meta", {
|
||||
name: "generator",
|
||||
content: `Gatsby ${gatsbyVersion}`,
|
||||
key: `generator-${gatsbyVersion}`
|
||||
})];
|
||||
let htmlAttributes = {};
|
||||
let bodyAttributes = {};
|
||||
let preBodyComponents = [];
|
||||
let postBodyComponents = [];
|
||||
let bodyProps = {};
|
||||
|
||||
function loadPageDataSync(_pagePath) {
|
||||
if (_pagePath === pagePath) {
|
||||
// no need to use fs if we are asking for pageData of current page
|
||||
return pageData;
|
||||
}
|
||||
|
||||
const pageDataPath = getPageDataPath(_pagePath);
|
||||
const pageDataFile = join(process.cwd(), `public`, pageDataPath);
|
||||
|
||||
try {
|
||||
// deprecation notice
|
||||
const myErrorHolder = {
|
||||
name: `Usage of loadPageDataSync for page other than currently generated page disables incremental html generation in future builds`
|
||||
};
|
||||
Error.captureStackTrace(myErrorHolder, loadPageDataSync);
|
||||
global.unsafeBuiltinUsage.push(myErrorHolder.stack);
|
||||
const pageDataJson = fs.readFileSync(pageDataFile);
|
||||
return JSON.parse(pageDataJson);
|
||||
} catch (error) {
|
||||
// not an error if file is not found. There's just no page data
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const replaceBodyHTMLString = body => {
|
||||
bodyHtml = body;
|
||||
};
|
||||
|
||||
const setHeadComponents = components => {
|
||||
headComponents = headComponents.concat(sanitizeComponents(components));
|
||||
};
|
||||
|
||||
const setHtmlAttributes = attributes => {
|
||||
// TODO - we should remove deep merges
|
||||
htmlAttributes = deepMerge(htmlAttributes, attributes);
|
||||
};
|
||||
|
||||
const setBodyAttributes = attributes => {
|
||||
// TODO - we should remove deep merges
|
||||
bodyAttributes = deepMerge(bodyAttributes, attributes);
|
||||
};
|
||||
|
||||
const setPreBodyComponents = components => {
|
||||
preBodyComponents = preBodyComponents.concat(sanitizeComponents(components));
|
||||
};
|
||||
|
||||
const setPostBodyComponents = components => {
|
||||
postBodyComponents = postBodyComponents.concat(sanitizeComponents(components));
|
||||
};
|
||||
|
||||
const setBodyProps = props => {
|
||||
// TODO - we should remove deep merges
|
||||
bodyProps = deepMerge({}, bodyProps, props);
|
||||
};
|
||||
|
||||
const getHeadComponents = () => headComponents;
|
||||
|
||||
const replaceHeadComponents = components => {
|
||||
headComponents = sanitizeComponents(components);
|
||||
};
|
||||
|
||||
const getPreBodyComponents = () => preBodyComponents;
|
||||
|
||||
const replacePreBodyComponents = components => {
|
||||
preBodyComponents = sanitizeComponents(components);
|
||||
};
|
||||
|
||||
const getPostBodyComponents = () => postBodyComponents;
|
||||
|
||||
const replacePostBodyComponents = components => {
|
||||
postBodyComponents = sanitizeComponents(components);
|
||||
};
|
||||
|
||||
const pageDataUrl = getPageDataUrl(pagePath);
|
||||
const {
|
||||
componentChunkName,
|
||||
staticQueryHashes = []
|
||||
} = pageData;
|
||||
const staticQueryUrls = staticQueryHashes.map(getStaticQueryUrl);
|
||||
|
||||
class RouteHandler extends React.Component {
|
||||
render() {
|
||||
var _pageData$result, _pageData$result$page;
|
||||
|
||||
const props = { ...this.props,
|
||||
...pageData.result,
|
||||
params: { ...grabMatchParams(this.props.location.pathname),
|
||||
...(((_pageData$result = pageData.result) === null || _pageData$result === void 0 ? void 0 : (_pageData$result$page = _pageData$result.pageContext) === null || _pageData$result$page === void 0 ? void 0 : _pageData$result$page.__params) || {})
|
||||
}
|
||||
};
|
||||
const pageElement = createElement(syncRequires.components[componentChunkName], props);
|
||||
const wrappedPage = apiRunner(`wrapPageElement`, {
|
||||
element: pageElement,
|
||||
props
|
||||
}, pageElement, ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result,
|
||||
props
|
||||
};
|
||||
}).pop();
|
||||
return wrappedPage;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const routerElement = /*#__PURE__*/React.createElement(ServerLocation, {
|
||||
url: `${__BASE_PATH__}${pagePath}`
|
||||
}, /*#__PURE__*/React.createElement(Router, {
|
||||
id: "gatsby-focus-wrapper",
|
||||
baseuri: __BASE_PATH__
|
||||
}, /*#__PURE__*/React.createElement(RouteHandler, {
|
||||
path: "/*"
|
||||
})), /*#__PURE__*/React.createElement("div", RouteAnnouncerProps));
|
||||
const bodyComponent = /*#__PURE__*/React.createElement(StaticQueryContext.Provider, {
|
||||
value: staticQueryContext
|
||||
}, apiRunner(`wrapRootElement`, {
|
||||
element: routerElement,
|
||||
pathname: pagePath
|
||||
}, routerElement, ({
|
||||
result
|
||||
}) => {
|
||||
return {
|
||||
element: result,
|
||||
pathname: pagePath
|
||||
};
|
||||
}).pop()); // Let the site or plugin render the page component.
|
||||
|
||||
await apiRunnerAsync(`replaceRenderer`, {
|
||||
bodyComponent,
|
||||
replaceBodyHTMLString,
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath,
|
||||
pathPrefix: __PATH_PREFIX__
|
||||
}); // If no one stepped up, we'll handle it.
|
||||
|
||||
if (!bodyHtml) {
|
||||
try {
|
||||
// react 18 enabled
|
||||
if (pipeToNodeWritable) {
|
||||
const writableStream = new WritableAsPromise();
|
||||
const {
|
||||
startWriting
|
||||
} = pipeToNodeWritable(bodyComponent, writableStream, {
|
||||
onCompleteAll() {
|
||||
startWriting();
|
||||
},
|
||||
|
||||
onError() {}
|
||||
|
||||
});
|
||||
bodyHtml = await writableStream;
|
||||
} else {
|
||||
bodyHtml = renderToString(bodyComponent);
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore @reach/router redirect errors
|
||||
if (!isRedirect(e)) throw e;
|
||||
}
|
||||
}
|
||||
|
||||
apiRunner(`onRenderBody`, {
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath,
|
||||
loadPageDataSync,
|
||||
bodyHtml,
|
||||
scripts,
|
||||
styles,
|
||||
pathPrefix: __PATH_PREFIX__
|
||||
});
|
||||
reversedScripts.forEach(script => {
|
||||
// Add preload/prefetch <link>s for scripts.
|
||||
headComponents.push( /*#__PURE__*/React.createElement("link", {
|
||||
as: "script",
|
||||
rel: script.rel,
|
||||
key: script.name,
|
||||
href: `${__PATH_PREFIX__}/${script.name}`
|
||||
}));
|
||||
});
|
||||
|
||||
if (pageData && !inlinePageData) {
|
||||
headComponents.push( /*#__PURE__*/React.createElement("link", {
|
||||
as: "fetch",
|
||||
rel: "preload",
|
||||
key: pageDataUrl,
|
||||
href: pageDataUrl,
|
||||
crossOrigin: "anonymous"
|
||||
}));
|
||||
}
|
||||
|
||||
staticQueryUrls.forEach(staticQueryUrl => headComponents.push( /*#__PURE__*/React.createElement("link", {
|
||||
as: "fetch",
|
||||
rel: "preload",
|
||||
key: staticQueryUrl,
|
||||
href: staticQueryUrl,
|
||||
crossOrigin: "anonymous"
|
||||
})));
|
||||
const appDataUrl = getAppDataUrl();
|
||||
|
||||
if (appDataUrl) {
|
||||
headComponents.push( /*#__PURE__*/React.createElement("link", {
|
||||
as: "fetch",
|
||||
rel: "preload",
|
||||
key: appDataUrl,
|
||||
href: appDataUrl,
|
||||
crossOrigin: "anonymous"
|
||||
}));
|
||||
}
|
||||
|
||||
reversedStyles.forEach(style => {
|
||||
// Add <link>s for styles that should be prefetched
|
||||
// otherwise, inline as a <style> tag
|
||||
if (style.rel === `prefetch`) {
|
||||
headComponents.push( /*#__PURE__*/React.createElement("link", {
|
||||
as: "style",
|
||||
rel: style.rel,
|
||||
key: style.name,
|
||||
href: `${__PATH_PREFIX__}/${style.name}`
|
||||
}));
|
||||
} else {
|
||||
headComponents.unshift( /*#__PURE__*/React.createElement("style", {
|
||||
"data-href": `${__PATH_PREFIX__}/${style.name}`,
|
||||
"data-identity": `gatsby-global-css`,
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: style.content
|
||||
}
|
||||
}));
|
||||
}
|
||||
}); // Add page metadata for the current page
|
||||
|
||||
const windowPageData = `/*<![CDATA[*/window.pagePath="${pagePath}";${inlinePageData ? `window.pageData=${JSON.stringify(pageData)};` : ``}/*]]>*/`;
|
||||
postBodyComponents.push( /*#__PURE__*/React.createElement("script", {
|
||||
key: `script-loader`,
|
||||
id: `gatsby-script-loader`,
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: windowPageData
|
||||
}
|
||||
})); // Add chunk mapping metadata
|
||||
|
||||
const scriptChunkMapping = `/*<![CDATA[*/window.___chunkMapping=${JSON.stringify(chunkMapping)};/*]]>*/`;
|
||||
postBodyComponents.push( /*#__PURE__*/React.createElement("script", {
|
||||
key: `chunk-mapping`,
|
||||
id: `gatsby-chunk-mapping`,
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: scriptChunkMapping
|
||||
}
|
||||
}));
|
||||
let bodyScripts = [];
|
||||
|
||||
if (chunkMapping[`polyfill`]) {
|
||||
chunkMapping[`polyfill`].forEach(script => {
|
||||
const scriptPath = `${__PATH_PREFIX__}${script}`;
|
||||
bodyScripts.push( /*#__PURE__*/React.createElement("script", {
|
||||
key: scriptPath,
|
||||
src: scriptPath,
|
||||
noModule: true
|
||||
}));
|
||||
});
|
||||
} // Filter out prefetched bundles as adding them as a script tag
|
||||
// would force high priority fetching.
|
||||
|
||||
|
||||
bodyScripts = bodyScripts.concat(scripts.filter(s => s.rel !== `prefetch`).map(s => {
|
||||
const scriptPath = `${__PATH_PREFIX__}/${JSON.stringify(s.name).slice(1, -1)}`;
|
||||
return /*#__PURE__*/React.createElement("script", {
|
||||
key: scriptPath,
|
||||
src: scriptPath,
|
||||
async: true
|
||||
});
|
||||
}));
|
||||
postBodyComponents.push(...bodyScripts);
|
||||
apiRunner(`onPreRenderHTML`, {
|
||||
getHeadComponents,
|
||||
replaceHeadComponents,
|
||||
getPreBodyComponents,
|
||||
replacePreBodyComponents,
|
||||
getPostBodyComponents,
|
||||
replacePostBodyComponents,
|
||||
pathname: pagePath,
|
||||
pathPrefix: __PATH_PREFIX__
|
||||
});
|
||||
const html = `<!DOCTYPE html>${renderToStaticMarkup( /*#__PURE__*/React.createElement(Html, (0, _extends2.default)({}, bodyProps, {
|
||||
headComponents: headComponents,
|
||||
htmlAttributes: htmlAttributes,
|
||||
bodyAttributes: bodyAttributes,
|
||||
preBodyComponents: preBodyComponents,
|
||||
postBodyComponents: postBodyComponents,
|
||||
body: bodyHtml,
|
||||
path: pagePath
|
||||
})))}`;
|
||||
return {
|
||||
html,
|
||||
unsafeBuiltinsUsage: global.unsafeBuiltinUsage
|
||||
};
|
||||
} catch (e) {
|
||||
e.unsafeBuiltinsUsage = global.unsafeBuiltinUsage;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
exports.__esModule = true;
|
||||
exports.default = stripPrefix;
|
||||
|
||||
/**
|
||||
* Remove a prefix from a string. Return the input string if the given prefix
|
||||
* isn't found.
|
||||
*/
|
||||
function stripPrefix(str, prefix = ``) {
|
||||
if (!prefix) {
|
||||
return str;
|
||||
}
|
||||
|
||||
if (str === prefix) {
|
||||
return `/`;
|
||||
}
|
||||
|
||||
if (str.startsWith(`${prefix}/`)) {
|
||||
return str.slice(prefix.length);
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
/**
|
||||
* Converts a string of CSS into object syntax
|
||||
* @param strings
|
||||
* @param keys
|
||||
* @returns {Object} CSS in object syntax
|
||||
* @example
|
||||
* const output = css`
|
||||
* html {
|
||||
* color: rebeccapurple;
|
||||
* }
|
||||
* `
|
||||
*/
|
||||
export function css(strings, ...keys) {
|
||||
const lastIndex = strings.length - 1
|
||||
return (
|
||||
strings.slice(0, lastIndex).reduce((p, s, i) => p + s + keys[i], ``) +
|
||||
strings[lastIndex]
|
||||
)
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
// inspired by https://github.com/GoogleChrome/workbox/blob/3d02230f0e977eb1dc86c48f16ea4bcefdae12af/packages/workbox-core/src/_private/logger.ts
|
||||
|
||||
const styles = [
|
||||
`background: rebeccapurple`,
|
||||
`border-radius: 0.5em`,
|
||||
`color: white`,
|
||||
`font-weight: bold`,
|
||||
`padding: 2px 0.5em`,
|
||||
].join(`;`)
|
||||
|
||||
export function debugLog(...args) {
|
||||
console.debug(`%cgatsby`, styles, ...args)
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
export default function HTML(props) {
|
||||
return (
|
||||
<html {...props.htmlAttributes}>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
{props.headComponents}
|
||||
</head>
|
||||
<body {...props.bodyAttributes}>
|
||||
{props.preBodyComponents}
|
||||
<div
|
||||
key={`body`}
|
||||
id="___gatsby"
|
||||
dangerouslySetInnerHTML={{ __html: props.body }}
|
||||
/>
|
||||
{props.postBodyComponents}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
htmlAttributes: PropTypes.object,
|
||||
headComponents: PropTypes.array,
|
||||
bodyAttributes: PropTypes.object,
|
||||
preBodyComponents: PropTypes.array,
|
||||
body: PropTypes.string,
|
||||
postBodyComponents: PropTypes.array,
|
||||
}
|
||||
@@ -1,275 +0,0 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { graphql, Link, navigate } from "gatsby"
|
||||
import queryString from "query-string"
|
||||
|
||||
class Dev404Page extends React.Component {
|
||||
static propTypes = {
|
||||
data: PropTypes.object,
|
||||
custom404: PropTypes.element,
|
||||
location: PropTypes.object,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
const { data, location } = this.props
|
||||
const pagePaths = data.allSitePage.nodes.map(node => node.path)
|
||||
const urlState = queryString.parse(location.search)
|
||||
|
||||
const initialPagePathSearchTerms = urlState.filter ? urlState.filter : ``
|
||||
|
||||
this.state = {
|
||||
hasMounted: false,
|
||||
showCustom404: process.env.GATSBY_DISABLE_CUSTOM_404 || false,
|
||||
initPagePaths: pagePaths,
|
||||
pagePathSearchTerms: initialPagePathSearchTerms,
|
||||
pagePaths: this.getFilteredPagePaths(
|
||||
pagePaths,
|
||||
initialPagePathSearchTerms
|
||||
),
|
||||
}
|
||||
this.showCustom404 = this.showCustom404.bind(this)
|
||||
this.handlePagePathSearch = this.handlePagePathSearch.bind(this)
|
||||
this.handleSearchTermChange = this.handleSearchTermChange.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
hasMounted: true,
|
||||
})
|
||||
}
|
||||
|
||||
showCustom404() {
|
||||
this.setState({ showCustom404: true })
|
||||
}
|
||||
|
||||
handleSearchTermChange(event) {
|
||||
const searchValue = event.target.value
|
||||
|
||||
this.setSearchUrl(searchValue)
|
||||
|
||||
this.setState({
|
||||
pagePathSearchTerms: searchValue,
|
||||
})
|
||||
}
|
||||
|
||||
handlePagePathSearch(event) {
|
||||
event.preventDefault()
|
||||
const allPagePaths = [...this.state.initPagePaths]
|
||||
this.setState({
|
||||
pagePaths: this.getFilteredPagePaths(
|
||||
allPagePaths,
|
||||
this.state.pagePathSearchTerms
|
||||
),
|
||||
})
|
||||
}
|
||||
|
||||
getFilteredPagePaths(allPagePaths, pagePathSearchTerms) {
|
||||
const searchTerm = new RegExp(`${pagePathSearchTerms}`)
|
||||
return allPagePaths.filter(pagePath => searchTerm.test(pagePath))
|
||||
}
|
||||
|
||||
setSearchUrl(searchValue) {
|
||||
const {
|
||||
location: { pathname, search },
|
||||
} = this.props
|
||||
|
||||
const searchMap = queryString.parse(search)
|
||||
searchMap.filter = searchValue
|
||||
|
||||
const newSearch = queryString.stringify(searchMap)
|
||||
|
||||
if (search !== `?${newSearch}`) {
|
||||
navigate(`${pathname}?${newSearch}`, { replace: true })
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.hasMounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Detect when the query returns the default function node that's added when functions
|
||||
// are *not* enabled. That seems the simplest way to communicate whether
|
||||
// functions are enabled or not to this page.
|
||||
// TODO remove when functions are shipped.
|
||||
const functionsEnabled = !(
|
||||
this.props.data.allSiteFunction.nodes[0]?.functionRoute === `FAKE`
|
||||
)
|
||||
const { pathname } = this.props.location
|
||||
let newFilePath
|
||||
let newAPIPath
|
||||
if (pathname === `/`) {
|
||||
newFilePath = `src/pages/index.js`
|
||||
} else if (functionsEnabled && pathname.slice(0, 4) === `/api`) {
|
||||
newAPIPath = `src${pathname}.js`
|
||||
} else if (pathname.slice(-1) === `/`) {
|
||||
newFilePath = `src/pages${pathname.slice(0, -1)}.js`
|
||||
} else {
|
||||
newFilePath = `src/pages${pathname}.js`
|
||||
}
|
||||
|
||||
return this.state.showCustom404 ? (
|
||||
this.props.custom404
|
||||
) : (
|
||||
<div>
|
||||
<h1>Gatsby.js development 404 page</h1>
|
||||
<p>
|
||||
{`There's not a page ${
|
||||
functionsEnabled ? `or function ` : ``
|
||||
}yet at `}
|
||||
<code>{pathname}</code>
|
||||
</p>
|
||||
{this.props.custom404 ? (
|
||||
<p>
|
||||
<button onClick={this.showCustom404}>
|
||||
Preview custom 404 page
|
||||
</button>
|
||||
</p>
|
||||
) : (
|
||||
<p>
|
||||
{`A custom 404 page wasn't detected - if you would like to add one, create a component in your site directory at `}
|
||||
<code>src/pages/404.js</code>.
|
||||
</p>
|
||||
)}
|
||||
{newFilePath && (
|
||||
<div>
|
||||
<h2>Create a page at this url</h2>
|
||||
<p>
|
||||
Create a React.js component like the following in your site
|
||||
directory at
|
||||
{` `}"<code>{newFilePath}</code>"{` `}
|
||||
and then refresh to show the new page component you created.
|
||||
</p>
|
||||
<pre
|
||||
style={{
|
||||
border: `1px solid lightgray`,
|
||||
padding: `8px`,
|
||||
maxWidth: `80ch`,
|
||||
background: `#f3f3f3`,
|
||||
}}
|
||||
>
|
||||
<code
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `import * as React from "react"
|
||||
|
||||
export default function Component () {
|
||||
return "Hello world"
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{newAPIPath && (
|
||||
<div>
|
||||
<h2>Create an API function at this url</h2>
|
||||
<p>
|
||||
Create a javascript file like the following in your site directory
|
||||
at
|
||||
{` `}"<code>{newAPIPath}</code>"{` `}
|
||||
and refresh to execute the new API function you created.
|
||||
</p>
|
||||
<pre
|
||||
style={{
|
||||
border: `1px solid lightgray`,
|
||||
padding: `8px`,
|
||||
maxWidth: `80ch`,
|
||||
background: `#f3f3f3`,
|
||||
}}
|
||||
>
|
||||
<code
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
export default function API (req, res) {
|
||||
res.json({ hello: "world" })
|
||||
}`,
|
||||
}}
|
||||
/>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{this.state.initPagePaths.length > 0 && (
|
||||
<div>
|
||||
<hr />
|
||||
<p>
|
||||
If you were trying to reach another page
|
||||
{functionsEnabled ? ` or function` : ``}, perhaps you can find it
|
||||
below.
|
||||
</p>
|
||||
{functionsEnabled && (
|
||||
<>
|
||||
<h2>
|
||||
Functions ({this.props.data.allSiteFunction.nodes.length})
|
||||
</h2>
|
||||
<ul>
|
||||
{this.props.data.allSiteFunction.nodes.map(node => {
|
||||
const functionRoute = `/api/${node.functionRoute}`
|
||||
return (
|
||||
<li key={functionRoute}>
|
||||
<a href={functionRoute}>{functionRoute}</a>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<h2>
|
||||
Pages (
|
||||
{this.state.pagePaths.length != this.state.initPagePaths.length
|
||||
? `${this.state.pagePaths.length}/${this.state.initPagePaths.length}`
|
||||
: this.state.initPagePaths.length}
|
||||
)
|
||||
</h2>
|
||||
|
||||
<form onSubmit={this.handlePagePathSearch}>
|
||||
<label>
|
||||
Search:
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
placeholder="Search pages..."
|
||||
value={this.state.pagePathSearchTerms}
|
||||
onChange={this.handleSearchTermChange}
|
||||
/>
|
||||
</label>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
<ul>
|
||||
{this.state.pagePaths.map(
|
||||
(pagePath, index) =>
|
||||
index < 100 && (
|
||||
<li key={pagePath}>
|
||||
<Link to={pagePath}>{pagePath}</Link>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
{this.state.pagePaths.length > 100 && (
|
||||
<p style={{ fontWeight: `bold` }}>
|
||||
... and {this.state.pagePaths.length - 100} more.
|
||||
</p>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Dev404Page
|
||||
|
||||
export const pagesQuery = graphql`
|
||||
query PagesQuery {
|
||||
allSiteFunction {
|
||||
nodes {
|
||||
functionRoute
|
||||
}
|
||||
}
|
||||
allSitePage(filter: { path: { ne: "/dev-404-page/" } }) {
|
||||
nodes {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,205 +0,0 @@
|
||||
import { BaseLoader, PageResourceStatus } from "./loader"
|
||||
import { findPath } from "./find-path"
|
||||
|
||||
import getSocket from "./socketIo"
|
||||
import normalizePagePath from "./normalize-page-path"
|
||||
|
||||
// TODO move away from lodash
|
||||
import isEqual from "lodash/isEqual"
|
||||
|
||||
const preferDefault = m => (m && m.default) || m
|
||||
|
||||
function mergePageEntry(cachedPage, newPageData) {
|
||||
return {
|
||||
...cachedPage,
|
||||
payload: {
|
||||
...cachedPage.payload,
|
||||
json: newPageData.result,
|
||||
page: {
|
||||
...cachedPage.payload.page,
|
||||
staticQueryResults: newPageData.staticQueryResults,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
class DevLoader extends BaseLoader {
|
||||
constructor(asyncRequires, matchPaths) {
|
||||
const loadComponent = chunkName => {
|
||||
if (!this.asyncRequires.components[chunkName]) {
|
||||
throw new Error(
|
||||
`We couldn't find the correct component chunk with the name "${chunkName}"`
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
this.asyncRequires.components[chunkName]()
|
||||
.then(preferDefault)
|
||||
// loader will handle the case when component is error
|
||||
.catch(err => err)
|
||||
)
|
||||
}
|
||||
super(loadComponent, matchPaths)
|
||||
this.asyncRequires = asyncRequires
|
||||
|
||||
const socket = getSocket()
|
||||
|
||||
this.notFoundPagePathsInCaches = new Set()
|
||||
|
||||
if (socket) {
|
||||
socket.on(`message`, msg => {
|
||||
if (msg.type === `staticQueryResult`) {
|
||||
this.handleStaticQueryResultHotUpdate(msg)
|
||||
} else if (msg.type === `pageQueryResult`) {
|
||||
this.handlePageQueryResultHotUpdate(msg)
|
||||
} else if (msg.type === `stalePageData`) {
|
||||
this.handleStalePageDataMessage(msg)
|
||||
}
|
||||
})
|
||||
} else if (process.env.NODE_ENV !== `test`) {
|
||||
console.warn(`Could not get web socket`)
|
||||
}
|
||||
}
|
||||
|
||||
updateAsyncRequires(asyncRequires) {
|
||||
this.asyncRequires = asyncRequires
|
||||
}
|
||||
|
||||
loadPage(pagePath) {
|
||||
const realPath = findPath(pagePath)
|
||||
return super.loadPage(realPath).then(result => {
|
||||
if (this.isPageNotFound(realPath)) {
|
||||
this.notFoundPagePathsInCaches.add(realPath)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
}
|
||||
|
||||
loadPageDataJson(rawPath) {
|
||||
return super.loadPageDataJson(rawPath).then(data => {
|
||||
// when we can't find a proper 404.html we fallback to dev-404-page
|
||||
// we need to make sure to mark it as not found.
|
||||
if (
|
||||
data.status === PageResourceStatus.Error &&
|
||||
rawPath !== `/dev-404-page/`
|
||||
) {
|
||||
console.error(
|
||||
`404 page could not be found. Checkout https://www.gatsbyjs.org/docs/how-to/adding-common-features/add-404-page/`
|
||||
)
|
||||
return this.loadPageDataJson(`/dev-404-page/`).then(result =>
|
||||
Object.assign({}, data, result)
|
||||
)
|
||||
}
|
||||
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
doPrefetch(pagePath) {
|
||||
if (process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
return super.doPrefetch(pagePath).then(result => result.payload)
|
||||
}
|
||||
|
||||
handleStaticQueryResultHotUpdate(msg) {
|
||||
const newResult = msg.payload.result
|
||||
|
||||
const cacheKey = msg.payload.id
|
||||
const cachedResult = this.staticQueryDb[cacheKey]
|
||||
if (!isEqual(newResult, cachedResult)) {
|
||||
this.staticQueryDb[cacheKey] = newResult
|
||||
___emitter.emit(`staticQueryResult`, newResult)
|
||||
}
|
||||
}
|
||||
|
||||
handlePageQueryResultHotUpdate(msg) {
|
||||
const newPageData = msg.payload.result
|
||||
|
||||
const pageDataDbCacheKey = normalizePagePath(msg.payload.id)
|
||||
const cachedPageData = this.pageDataDb.get(pageDataDbCacheKey)?.payload
|
||||
|
||||
if (!isEqual(newPageData, cachedPageData)) {
|
||||
// TODO: if this is update for current page and there are any new static queries added
|
||||
// that are not yet cached, there is currently no trigger to fetch them (yikes)
|
||||
// always update canonical key for pageDataDb
|
||||
this.pageDataDb.set(pageDataDbCacheKey, {
|
||||
pagePath: pageDataDbCacheKey,
|
||||
payload: newPageData,
|
||||
status: `success`,
|
||||
})
|
||||
|
||||
const cachedPage = this.pageDb.get(pageDataDbCacheKey)
|
||||
if (cachedPage) {
|
||||
this.pageDb.set(
|
||||
pageDataDbCacheKey,
|
||||
mergePageEntry(cachedPage, newPageData)
|
||||
)
|
||||
}
|
||||
|
||||
// Additionally if those are query results for "/404.html"
|
||||
// we have to update all paths user wanted to visit, but didn't have
|
||||
// page for it, because we do store them under (normalized) path
|
||||
// user wanted to visit
|
||||
if (pageDataDbCacheKey === `/404.html`) {
|
||||
this.notFoundPagePathsInCaches.forEach(notFoundPath => {
|
||||
const previousPageDataEntry = this.pageDataDb.get(notFoundPath)
|
||||
if (previousPageDataEntry) {
|
||||
this.pageDataDb.set(notFoundPath, {
|
||||
...previousPageDataEntry,
|
||||
payload: newPageData,
|
||||
})
|
||||
}
|
||||
|
||||
const previousPageEntry = this.pageDb.get(notFoundPath)
|
||||
if (previousPageEntry) {
|
||||
this.pageDb.set(
|
||||
notFoundPath,
|
||||
mergePageEntry(previousPageEntry, newPageData)
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
___emitter.emit(`pageQueryResult`, newPageData)
|
||||
}
|
||||
}
|
||||
|
||||
handleStalePageDataMessage(msg) {
|
||||
msg.payload.stalePageDataPaths.forEach(dirtyQueryId => {
|
||||
if (dirtyQueryId === `/dev-404-page/` || dirtyQueryId === `/404.html`) {
|
||||
// those pages are not on demand so skipping
|
||||
return
|
||||
}
|
||||
|
||||
const normalizedId = normalizePagePath(dirtyQueryId)
|
||||
|
||||
// We can't just delete items in caches, because then
|
||||
// using history.back() would show dev-404 page
|
||||
// due to our special handling of it in root.js (loader.isPageNotFound check)
|
||||
// so instead we mark it as stale and instruct loader's async methods
|
||||
// to refetch resources if they are marked as stale
|
||||
|
||||
const cachedPageData = this.pageDataDb.get(normalizedId)
|
||||
if (cachedPageData) {
|
||||
// if we have page data in cache, mark it as stale
|
||||
this.pageDataDb.set(normalizedId, {
|
||||
...cachedPageData,
|
||||
stale: true,
|
||||
})
|
||||
}
|
||||
|
||||
const cachedPage = this.pageDb.get(normalizedId)
|
||||
if (cachedPage) {
|
||||
// if we have page data in cache, mark it as stale
|
||||
this.pageDb.set(normalizedId, {
|
||||
...cachedPage,
|
||||
payload: { ...cachedPage.payload, stale: true },
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default DevLoader
|
||||
@@ -1,127 +0,0 @@
|
||||
/* global BROWSER_ESM_ONLY */
|
||||
import React from "react"
|
||||
import { renderToStaticMarkup } from "react-dom/server"
|
||||
import { merge } from "lodash"
|
||||
import { apiRunner } from "./api-runner-ssr"
|
||||
// import testRequireError from "./test-require-error"
|
||||
// For some extremely mysterious reason, webpack adds the above module *after*
|
||||
// this module so that when this code runs, testRequireError is undefined.
|
||||
// So in the meantime, we'll just inline it.
|
||||
const testRequireError = (moduleName, err) => {
|
||||
const regex = new RegExp(`Error: Cannot find module\\s.${moduleName}`)
|
||||
const firstLine = err.toString().split(`\n`)[0]
|
||||
return regex.test(firstLine)
|
||||
}
|
||||
|
||||
let Html
|
||||
try {
|
||||
Html = require(`../src/html`)
|
||||
} catch (err) {
|
||||
if (testRequireError(`../src/html`, err)) {
|
||||
Html = require(`./default-html`)
|
||||
} else {
|
||||
console.log(`There was an error requiring "src/html.js"\n\n`, err, `\n\n`)
|
||||
process.exit()
|
||||
}
|
||||
}
|
||||
|
||||
Html = Html && Html.__esModule ? Html.default : Html
|
||||
|
||||
export default ({ pagePath }) => {
|
||||
let headComponents = [
|
||||
<meta key="environment" name="note" content="environment=development" />,
|
||||
]
|
||||
let htmlAttributes = {}
|
||||
let bodyAttributes = {}
|
||||
let preBodyComponents = []
|
||||
let postBodyComponents = []
|
||||
let bodyProps = {}
|
||||
let htmlStr
|
||||
|
||||
const setHeadComponents = components => {
|
||||
headComponents = headComponents.concat(components)
|
||||
}
|
||||
|
||||
const setHtmlAttributes = attributes => {
|
||||
htmlAttributes = merge(htmlAttributes, attributes)
|
||||
}
|
||||
|
||||
const setBodyAttributes = attributes => {
|
||||
bodyAttributes = merge(bodyAttributes, attributes)
|
||||
}
|
||||
|
||||
const setPreBodyComponents = components => {
|
||||
preBodyComponents = preBodyComponents.concat(components)
|
||||
}
|
||||
|
||||
const setPostBodyComponents = components => {
|
||||
postBodyComponents = postBodyComponents.concat(components)
|
||||
}
|
||||
|
||||
const setBodyProps = props => {
|
||||
bodyProps = merge({}, bodyProps, props)
|
||||
}
|
||||
|
||||
const getHeadComponents = () => headComponents
|
||||
|
||||
const replaceHeadComponents = components => {
|
||||
headComponents = components
|
||||
}
|
||||
|
||||
const getPreBodyComponents = () => preBodyComponents
|
||||
|
||||
const replacePreBodyComponents = components => {
|
||||
preBodyComponents = components
|
||||
}
|
||||
|
||||
const getPostBodyComponents = () => postBodyComponents
|
||||
|
||||
const replacePostBodyComponents = components => {
|
||||
postBodyComponents = components
|
||||
}
|
||||
|
||||
apiRunner(`onRenderBody`, {
|
||||
setHeadComponents,
|
||||
setHtmlAttributes,
|
||||
setBodyAttributes,
|
||||
setPreBodyComponents,
|
||||
setPostBodyComponents,
|
||||
setBodyProps,
|
||||
pathname: pagePath,
|
||||
})
|
||||
|
||||
apiRunner(`onPreRenderHTML`, {
|
||||
getHeadComponents,
|
||||
replaceHeadComponents,
|
||||
getPreBodyComponents,
|
||||
replacePreBodyComponents,
|
||||
getPostBodyComponents,
|
||||
replacePostBodyComponents,
|
||||
pathname: pagePath,
|
||||
})
|
||||
|
||||
const htmlElement = React.createElement(Html, {
|
||||
...bodyProps,
|
||||
body: ``,
|
||||
headComponents: headComponents.concat([
|
||||
<script key={`io`} src="/socket.io/socket.io.js" />,
|
||||
<link key="styles" rel="stylesheet" href="/commons.css" />,
|
||||
]),
|
||||
htmlAttributes,
|
||||
bodyAttributes,
|
||||
preBodyComponents,
|
||||
postBodyComponents: postBodyComponents.concat(
|
||||
[
|
||||
!BROWSER_ESM_ONLY && (
|
||||
<script key={`polyfill`} src="/polyfill.js" noModule={true} />
|
||||
),
|
||||
<script key={`framework`} src="/framework.js" />,
|
||||
<script key={`commons`} src="/commons.js" />,
|
||||
].filter(Boolean)
|
||||
),
|
||||
})
|
||||
htmlStr = renderToStaticMarkup(htmlElement)
|
||||
htmlStr = `<!DOCTYPE html>${htmlStr}`
|
||||
|
||||
return htmlStr
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
// Dummy file to work around a webpack hot reloading bug.
|
||||
export const a = 1
|
||||
@@ -1,4 +0,0 @@
|
||||
import mitt from "mitt"
|
||||
|
||||
const emitter = mitt()
|
||||
export default emitter
|
||||
@@ -1,110 +0,0 @@
|
||||
import React from "react"
|
||||
import loader, { PageResourceStatus } from "./loader"
|
||||
import shallowCompare from "shallow-compare"
|
||||
|
||||
class EnsureResources extends React.Component {
|
||||
constructor(props) {
|
||||
super()
|
||||
const { location, pageResources } = props
|
||||
this.state = {
|
||||
location: { ...location },
|
||||
pageResources:
|
||||
pageResources ||
|
||||
loader.loadPageSync(location.pathname, { withErrorDetails: true }),
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps({ location }, prevState) {
|
||||
if (prevState.location.href !== location.href) {
|
||||
const pageResources = loader.loadPageSync(location.pathname, {
|
||||
withErrorDetails: true,
|
||||
})
|
||||
|
||||
return {
|
||||
pageResources,
|
||||
location: { ...location },
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
location: { ...location },
|
||||
}
|
||||
}
|
||||
|
||||
loadResources(rawPath) {
|
||||
loader.loadPage(rawPath).then(pageResources => {
|
||||
if (pageResources && pageResources.status !== PageResourceStatus.Error) {
|
||||
this.setState({
|
||||
location: { ...window.location },
|
||||
pageResources,
|
||||
})
|
||||
} else {
|
||||
window.history.replaceState({}, ``, location.href)
|
||||
window.location = rawPath
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
// Always return false if we're missing resources.
|
||||
if (!nextState.pageResources) {
|
||||
this.loadResources(nextProps.location.pathname)
|
||||
return false
|
||||
}
|
||||
|
||||
if (
|
||||
process.env.BUILD_STAGE === `develop` &&
|
||||
nextState.pageResources.stale
|
||||
) {
|
||||
this.loadResources(nextProps.location.pathname)
|
||||
return false
|
||||
}
|
||||
|
||||
// Check if the component or json have changed.
|
||||
if (this.state.pageResources !== nextState.pageResources) {
|
||||
return true
|
||||
}
|
||||
if (
|
||||
this.state.pageResources.component !== nextState.pageResources.component
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (this.state.pageResources.json !== nextState.pageResources.json) {
|
||||
return true
|
||||
}
|
||||
// Check if location has changed on a page using internal routing
|
||||
// via matchPath configuration.
|
||||
if (
|
||||
this.state.location.key !== nextState.location.key &&
|
||||
nextState.pageResources.page &&
|
||||
(nextState.pageResources.page.matchPath ||
|
||||
nextState.pageResources.page.path)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return shallowCompare(this, nextProps, nextState)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (
|
||||
process.env.NODE_ENV !== `production` &&
|
||||
(!this.state.pageResources ||
|
||||
this.state.pageResources.status === PageResourceStatus.Error)
|
||||
) {
|
||||
const message = `EnsureResources was not able to find resources for path: "${this.props.location.pathname}"
|
||||
This typically means that an issue occurred building components for that path.
|
||||
Run \`gatsby clean\` to remove any cached elements.`
|
||||
if (this.state.pageResources?.error) {
|
||||
console.error(message)
|
||||
throw this.state.pageResources.error
|
||||
}
|
||||
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return this.props.children(this.state)
|
||||
}
|
||||
}
|
||||
|
||||
export default EnsureResources
|
||||
@@ -1,36 +0,0 @@
|
||||
const errorMap = {}
|
||||
|
||||
const handleErrorOverlay = () => {
|
||||
const errors = Object.values(errorMap)
|
||||
let errorsToDisplay = []
|
||||
if (errors.length > 0) {
|
||||
errorsToDisplay = errors.flatMap(e => e).filter(Boolean)
|
||||
}
|
||||
|
||||
if (errorsToDisplay.length > 0) {
|
||||
window._gatsbyEvents.push([
|
||||
`FAST_REFRESH`,
|
||||
{
|
||||
action: `SHOW_GRAPHQL_ERRORS`,
|
||||
payload: errorsToDisplay,
|
||||
},
|
||||
])
|
||||
} else {
|
||||
window._gatsbyEvents.push([
|
||||
`FAST_REFRESH`,
|
||||
{ action: `CLEAR_GRAPHQL_ERRORS` },
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
export const clearError = errorID => {
|
||||
delete errorMap[errorID]
|
||||
handleErrorOverlay()
|
||||
}
|
||||
|
||||
export const reportError = (errorID, error) => {
|
||||
if (error) {
|
||||
errorMap[errorID] = error
|
||||
}
|
||||
handleErrorOverlay()
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { useId } from "./use-id"
|
||||
import * as keys from "../helpers/keys"
|
||||
import { match } from "../helpers/match"
|
||||
|
||||
function ChevronIcon() {
|
||||
return (
|
||||
<svg
|
||||
focusable="false"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
data-gatsby-overlay="chevron-icon"
|
||||
>
|
||||
<path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function Accordion({ children, ...rest }) {
|
||||
return (
|
||||
<ul data-gatsby-overlay="accordion" {...rest}>
|
||||
{children}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export function AccordionItem({
|
||||
children,
|
||||
disabled = false,
|
||||
open = false,
|
||||
title = `title`,
|
||||
...rest
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = React.useState(open)
|
||||
const [prevIsOpen, setPrevIsOpen] = React.useState(open)
|
||||
const id = useId(`accordion-item`)
|
||||
|
||||
if (open !== prevIsOpen) {
|
||||
setIsOpen(open)
|
||||
setPrevIsOpen(open)
|
||||
}
|
||||
|
||||
const toggleOpen = () => {
|
||||
const nextValue = !isOpen
|
||||
setIsOpen(nextValue)
|
||||
}
|
||||
|
||||
// If the AccordionItem is open, and the user hits the ESC key, then close it
|
||||
const onKeyDown = event => {
|
||||
if (isOpen && match(event, keys.Escape)) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
data-gatsby-overlay="accordion__item"
|
||||
data-accordion-active={isOpen ? `true` : `false`}
|
||||
{...rest}
|
||||
>
|
||||
<button
|
||||
data-gatsby-overlay="accordion__item__heading"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
aria-controls={id}
|
||||
aria-expanded={isOpen}
|
||||
onClick={toggleOpen}
|
||||
onKeyDown={onKeyDown}
|
||||
>
|
||||
<ChevronIcon />
|
||||
<div data-gatsby-overlay="accordion__item__title">{title}</div>
|
||||
</button>
|
||||
<div id={id} data-gatsby-overlay="accordion__item__content">
|
||||
{children}
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Overlay, Header, Body, Footer, HeaderOpenClose } from "./overlay"
|
||||
import { CodeFrame } from "./code-frame"
|
||||
import { prettifyStack, openInEditor } from "../utils"
|
||||
|
||||
// Error that is thrown on e.g. webpack errors and thus can't be dismissed and must be fixed
|
||||
export function BuildError({ error }) {
|
||||
// Incoming build error shape is like this:
|
||||
// Sometimes "Enter"
|
||||
// ./relative-path-to-file
|
||||
// Additional information (sometimes empty line => handled in "prettifyStack" function)
|
||||
// /absolute-path-to-file
|
||||
// Errors/Warnings
|
||||
const decoded = prettifyStack(error)
|
||||
const [filePath] = decoded
|
||||
const file = filePath.content.split(`\n`)[0]
|
||||
const lineMatch = filePath.content.match(/\((\d+)[^)]+\)/)
|
||||
let line = 1
|
||||
|
||||
if (lineMatch) {
|
||||
line = lineMatch[1]
|
||||
}
|
||||
|
||||
return (
|
||||
<Overlay>
|
||||
<Header data-gatsby-error-type="build-error">
|
||||
<div data-gatsby-overlay="header__cause-file">
|
||||
<h1 id="gatsby-overlay-labelledby">Failed to compile</h1>
|
||||
<span>{file}</span>
|
||||
</div>
|
||||
<HeaderOpenClose
|
||||
open={() => openInEditor(file, line)}
|
||||
dismiss={false}
|
||||
/>
|
||||
</Header>
|
||||
<Body>
|
||||
<h2>Source</h2>
|
||||
<CodeFrame decoded={decoded} />
|
||||
<Footer id="gatsby-overlay-describedby">
|
||||
This error occurred during the build process and can only be dismissed
|
||||
by fixing the error.
|
||||
</Footer>
|
||||
</Body>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
export function CodeFrame({ decoded }) {
|
||||
if (!decoded) {
|
||||
return (
|
||||
<pre data-gatsby-overlay="pre">
|
||||
<code data-gatsby-overlay="pre__code" />
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<pre data-gatsby-overlay="pre">
|
||||
<code data-gatsby-overlay="pre__code">
|
||||
{decoded.map((entry, index) => {
|
||||
const style = {
|
||||
color: entry.fg ? `var(--color-${entry.fg})` : undefined,
|
||||
...(entry.decoration === `bold`
|
||||
? { fontWeight: 800 }
|
||||
: entry.decoration === `italic`
|
||||
? { fontStyle: `italic` }
|
||||
: undefined),
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
key={`frame-${index}`}
|
||||
data-gatsby-overlay="pre__code__span"
|
||||
style={style}
|
||||
>
|
||||
{entry.content}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</code>
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Overlay, Header, Body, Footer, HeaderOpenClose } from "./overlay"
|
||||
import { CodeFrame } from "./code-frame"
|
||||
import { prettifyStack, openInEditor, skipSSR, reloadPage } from "../utils"
|
||||
|
||||
export function DevSsrError({ error }) {
|
||||
const { codeFrame, source, line } = error
|
||||
const decoded = prettifyStack(codeFrame)
|
||||
|
||||
return (
|
||||
<Overlay>
|
||||
<Header data-gatsby-error-type="build-error">
|
||||
<div data-gatsby-overlay="header__cause-file">
|
||||
<h1 id="gatsby-overlay-labelledby">Failed to server render (SSR)</h1>
|
||||
<span>{source}</span>
|
||||
</div>
|
||||
<HeaderOpenClose
|
||||
open={() => openInEditor(source, line)}
|
||||
dismiss={false}
|
||||
/>
|
||||
</Header>
|
||||
<Body>
|
||||
<p
|
||||
id="gatsby-overlay-describedby"
|
||||
data-gatsby-overlay="body__describedby"
|
||||
>
|
||||
React Components in Gatsby must render both successfully in the
|
||||
browser and in a Node.js environment. When we tried to render your
|
||||
page component in Node.js, it errored.
|
||||
</p>
|
||||
<h2>Source</h2>
|
||||
<CodeFrame decoded={decoded} />
|
||||
<div data-gatsby-overlay="codeframe__bottom">
|
||||
See our docs page for more info on SSR errors:{` `}
|
||||
<a href="https://www.gatsbyjs.com/docs/debugging-html-builds/">
|
||||
Debugging HTML Builds
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
If you fixed the error, saved your file, and want to retry server
|
||||
rendering this page, please reload the page.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => reloadPage()}
|
||||
data-gatsby-overlay="primary-button"
|
||||
>
|
||||
Reload page
|
||||
</button>
|
||||
<h2 style={{ marginTop: `var(--space)` }}>Skip Server Render</h2>
|
||||
<p>
|
||||
If you don't wish to fix the SSR error at the moment, press the button
|
||||
below to reload the page without attempting to do SSR.
|
||||
</p>
|
||||
<button onClick={() => skipSSR()} data-gatsby-overlay="primary-button">
|
||||
Skip SSR
|
||||
</button>
|
||||
<Footer>
|
||||
<span data-font-weight="bold">Note:</span> This error will show up
|
||||
during "gatsby build" so it must be fixed before then. SSR errors in
|
||||
module scope, e.g. outside of your own React components can't be
|
||||
skipped.
|
||||
</Footer>
|
||||
</Body>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
export class ErrorBoundary extends React.Component {
|
||||
state = { error: null }
|
||||
|
||||
componentDidCatch(error) {
|
||||
this.setState({ error })
|
||||
}
|
||||
|
||||
render() {
|
||||
// Without this check => possible infinite loop
|
||||
return this.state.error && this.props.hasErrors ? null : this.props.children
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Body, Header, HeaderOpenClose, Overlay } from "./overlay"
|
||||
import { Accordion, AccordionItem } from "./accordion"
|
||||
import { openInEditor, prettifyStack } from "../utils"
|
||||
import { CodeFrame } from "./code-frame"
|
||||
|
||||
function WrappedAccordionItem({ error, open }) {
|
||||
const title =
|
||||
error?.error?.message ||
|
||||
error.context.sourceMessage ||
|
||||
`Unknown GraphQL error`
|
||||
const docsUrl = error?.docsUrl
|
||||
const filePath = error?.filePath
|
||||
const lineNumber = error?.location?.start?.line
|
||||
const columnNumber = error?.location?.start?.column
|
||||
|
||||
let locString = ``
|
||||
if (typeof lineNumber !== `undefined`) {
|
||||
locString += `:${lineNumber}`
|
||||
if (typeof columnNumber !== `undefined`) {
|
||||
locString += `:${columnNumber}`
|
||||
}
|
||||
}
|
||||
|
||||
// Sometimes the GraphQL error text has ANSI in it. If it's only text, it'll be passed through
|
||||
const decoded = prettifyStack(error.text)
|
||||
|
||||
return (
|
||||
<AccordionItem open={open} title={title}>
|
||||
<div data-gatsby-overlay="body__graphql-error-message">
|
||||
<div data-gatsby-overlay="codeframe__top">
|
||||
<div data-gatsby-overlay="tag">
|
||||
{error.level}
|
||||
{` `}#{error.code}
|
||||
</div>
|
||||
<button
|
||||
data-gatsby-overlay="body__open-in-editor"
|
||||
onClick={() => openInEditor(filePath, lineNumber)}
|
||||
>
|
||||
Open in Editor
|
||||
</button>
|
||||
</div>
|
||||
{filePath && (
|
||||
<div data-gatsby-overlay="codeframe__top">
|
||||
{filePath}
|
||||
{locString}
|
||||
</div>
|
||||
)}
|
||||
<CodeFrame decoded={decoded} />
|
||||
{docsUrl && (
|
||||
<div data-gatsby-overlay="codeframe__bottom">
|
||||
See our docs page for more info on this error:{` `}
|
||||
<a href={docsUrl}>{docsUrl}</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
|
||||
export function GraphqlErrors({ errors, dismiss }) {
|
||||
const deduplicatedErrors = React.useMemo(
|
||||
() => Array.from(new Set(errors)),
|
||||
[errors]
|
||||
)
|
||||
const hasMultipleErrors = deduplicatedErrors.length > 1
|
||||
return (
|
||||
<Overlay>
|
||||
<Header data-gatsby-error-type="graphql-error">
|
||||
<div data-gatsby-overlay="header__cause-file">
|
||||
<h1 id="gatsby-overlay-labelledby">
|
||||
{hasMultipleErrors
|
||||
? `${errors.length} Unhandled GraphQL Errors`
|
||||
: `Unhandled GraphQL Error`}
|
||||
</h1>
|
||||
</div>
|
||||
<HeaderOpenClose dismiss={dismiss} />
|
||||
</Header>
|
||||
<Body>
|
||||
<p
|
||||
data-gatsby-overlay="body__describedby"
|
||||
id="gatsby-overlay-describedby"
|
||||
>
|
||||
{hasMultipleErrors ? `Multiple` : `One`} unhandled GraphQL{` `}
|
||||
{hasMultipleErrors ? `errors` : `error`} found in your files. See the
|
||||
list below to fix {hasMultipleErrors ? `them` : `it`}:
|
||||
</p>
|
||||
<Accordion>
|
||||
{deduplicatedErrors.map((error, index) => (
|
||||
<WrappedAccordionItem
|
||||
open={index === 0}
|
||||
error={error}
|
||||
key={`${error.sourceMessage}-${index}`}
|
||||
/>
|
||||
))}
|
||||
</Accordion>
|
||||
</Body>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { prettifyStack } from "../utils"
|
||||
|
||||
const initialResponse = {
|
||||
decoded: null,
|
||||
sourcePosition: {
|
||||
line: null,
|
||||
number: null,
|
||||
},
|
||||
sourceContent: null,
|
||||
}
|
||||
|
||||
export function useStackFrame({ moduleId, lineNumber, columnNumber }) {
|
||||
const url =
|
||||
`/__original-stack-frame?moduleId=` +
|
||||
window.encodeURIComponent(moduleId) +
|
||||
`&lineNumber=` +
|
||||
window.encodeURIComponent(lineNumber) +
|
||||
`&columnNumber=` +
|
||||
window.encodeURIComponent(columnNumber)
|
||||
|
||||
const [response, setResponse] = React.useState(initialResponse)
|
||||
|
||||
React.useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await fetch(url)
|
||||
const json = await res.json()
|
||||
const decoded = prettifyStack(json.codeFrame)
|
||||
const { sourcePosition, sourceContent } = json
|
||||
setResponse({
|
||||
decoded,
|
||||
sourceContent,
|
||||
sourcePosition,
|
||||
})
|
||||
} catch (err) {
|
||||
setResponse({
|
||||
...initialResponse,
|
||||
decoded: prettifyStack(err.message),
|
||||
})
|
||||
}
|
||||
}
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
return response
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { lock, unlock } from "../helpers/lock-body"
|
||||
import a11yTrap from "../helpers/focus-trap"
|
||||
|
||||
function Backdrop() {
|
||||
return <div data-gatsby-overlay="backdrop" />
|
||||
}
|
||||
|
||||
export function VisuallyHidden({ children }) {
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
border: 0,
|
||||
clip: `rect(0 0 0 0)`,
|
||||
height: `1px`,
|
||||
margin: `-1px`,
|
||||
overflow: `hidden`,
|
||||
padding: 0,
|
||||
position: `absolute`,
|
||||
width: `1px`,
|
||||
whiteSpace: `nowrap`,
|
||||
wordWrap: `normal`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export function Overlay({ children }) {
|
||||
React.useEffect(() => {
|
||||
lock()
|
||||
|
||||
return () => {
|
||||
unlock()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const [overlay, setOverlay] = React.useState(null)
|
||||
const onOverlay = React.useCallback(el => {
|
||||
setOverlay(el)
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (overlay === null) {
|
||||
return
|
||||
}
|
||||
|
||||
const handle = a11yTrap({ context: overlay })
|
||||
|
||||
// eslint-disable-next-line consistent-return
|
||||
return () => {
|
||||
handle.disengage()
|
||||
}
|
||||
}, [overlay])
|
||||
|
||||
return (
|
||||
<div data-gatsby-overlay="wrapper" ref={onOverlay}>
|
||||
<Backdrop />
|
||||
<div
|
||||
data-gatsby-overlay="root"
|
||||
role="alertdialog"
|
||||
aria-labelledby="gatsby-overlay-labelledby"
|
||||
aria-describedby="gatsby-overlay-describedby"
|
||||
aria-modal="true"
|
||||
dir="ltr"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CloseButton({ dismiss }) {
|
||||
return (
|
||||
<button data-gatsby-overlay="close-button" onClick={dismiss}>
|
||||
<VisuallyHidden>Close</VisuallyHidden>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18 6L6 18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 6L18 18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function HeaderOpenClose({ open, dismiss, children, ...rest }) {
|
||||
return (
|
||||
<div data-gatsby-overlay="header__top" {...rest}>
|
||||
{children}
|
||||
<div data-gatsby-overlay="header__open-close">
|
||||
{open && (
|
||||
<button onClick={open} data-gatsby-overlay="primary-button">
|
||||
Open in editor
|
||||
</button>
|
||||
)}
|
||||
{dismiss && <CloseButton dismiss={dismiss} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Header({ children, ...rest }) {
|
||||
return (
|
||||
<header data-gatsby-overlay="header" {...rest}>
|
||||
{children}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export function Body({ children, ...rest }) {
|
||||
return (
|
||||
<div data-gatsby-overlay="body" {...rest}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Footer({ children, ...rest }) {
|
||||
return (
|
||||
<footer data-gatsby-overlay="footer" {...rest}>
|
||||
{children}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import * as React from "react"
|
||||
import StackTrace from "stack-trace"
|
||||
import { Overlay, Header, HeaderOpenClose, Body } from "./overlay"
|
||||
import { useStackFrame } from "./hooks"
|
||||
import { CodeFrame } from "./code-frame"
|
||||
import { getCodeFrameInformation, openInEditor } from "../utils"
|
||||
import { Accordion, AccordionItem } from "./accordion"
|
||||
|
||||
function WrappedAccordionItem({ error, open }) {
|
||||
const stacktrace = StackTrace.parse(error)
|
||||
const codeFrameInformation = getCodeFrameInformation(stacktrace)
|
||||
const filePath = codeFrameInformation?.moduleId
|
||||
const lineNumber = codeFrameInformation?.lineNumber
|
||||
const columnNumber = codeFrameInformation?.columnNumber
|
||||
const name = codeFrameInformation?.functionName
|
||||
|
||||
const res = useStackFrame({ moduleId: filePath, lineNumber, columnNumber })
|
||||
const line = res.sourcePosition?.line
|
||||
|
||||
const Title = () => {
|
||||
if (!name) {
|
||||
return <>Unknown Runtime Error</>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
Error in function{` `}
|
||||
<span data-font-weight="bold">{name}</span> in{` `}
|
||||
<span data-font-weight="bold">
|
||||
{filePath}:{line}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AccordionItem open={open} title={<Title />}>
|
||||
<p data-gatsby-overlay="body__error-message">{error.message}</p>
|
||||
<div data-gatsby-overlay="codeframe__top">
|
||||
<div>
|
||||
{filePath}:{line}
|
||||
</div>
|
||||
<button
|
||||
data-gatsby-overlay="body__open-in-editor"
|
||||
onClick={() => openInEditor(filePath, line)}
|
||||
>
|
||||
Open in Editor
|
||||
</button>
|
||||
</div>
|
||||
<CodeFrame decoded={res.decoded} />
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
|
||||
export function RuntimeErrors({ errors, dismiss }) {
|
||||
const deduplicatedErrors = React.useMemo(
|
||||
() => Array.from(new Set(errors)),
|
||||
[errors]
|
||||
)
|
||||
const hasMultipleErrors = deduplicatedErrors.length > 1
|
||||
|
||||
return (
|
||||
<Overlay>
|
||||
<Header data-gatsby-error-type="runtime-error">
|
||||
<div data-gatsby-overlay="header__cause-file">
|
||||
<h1 id="gatsby-overlay-labelledby">
|
||||
{hasMultipleErrors
|
||||
? `${errors.length} Unhandled Runtime Errors`
|
||||
: `Unhandled Runtime Error`}
|
||||
</h1>
|
||||
</div>
|
||||
<HeaderOpenClose dismiss={dismiss} />
|
||||
</Header>
|
||||
<Body>
|
||||
<p
|
||||
data-gatsby-overlay="body__describedby"
|
||||
id="gatsby-overlay-describedby"
|
||||
>
|
||||
{hasMultipleErrors ? `Multiple` : `One`} unhandled runtime{` `}
|
||||
{hasMultipleErrors ? `errors` : `error`} found in your files. See the
|
||||
list below to fix {hasMultipleErrors ? `them` : `it`}:
|
||||
</p>
|
||||
<Accordion>
|
||||
{deduplicatedErrors.map((error, index) => (
|
||||
<WrappedAccordionItem
|
||||
open={index === 0}
|
||||
key={`${error.message}-${index}`}
|
||||
error={error}
|
||||
/>
|
||||
))}
|
||||
</Accordion>
|
||||
</Body>
|
||||
</Overlay>
|
||||
)
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
// Copied from https://github.com/carbon-design-system/carbon
|
||||
// License: Apache-2.0
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
// Entrypoint: packages/react/src/internal/useId.js
|
||||
|
||||
function setupGetInstanceId() {
|
||||
let instanceId = 0
|
||||
return function getInstanceId() {
|
||||
return ++instanceId
|
||||
}
|
||||
}
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
const getId = setupGetInstanceId()
|
||||
const useIsomorphicLayoutEffect = canUseDOM()
|
||||
? React.useLayoutEffect
|
||||
: React.useEffect
|
||||
|
||||
function canUseDOM() {
|
||||
return !!(
|
||||
typeof window !== `undefined` &&
|
||||
window.document &&
|
||||
window.document.createElement
|
||||
)
|
||||
}
|
||||
|
||||
let serverHandoffCompleted = false
|
||||
|
||||
/**
|
||||
* Generate a unique ID with an optional prefix prepended to it
|
||||
* @param {string} [prefix]
|
||||
* @returns {string}
|
||||
*/
|
||||
export function useId(prefix = `id`) {
|
||||
const [id, setId] = React.useState(() => {
|
||||
if (serverHandoffCompleted) {
|
||||
return `${prefix}-${getId()}`
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (id === null) {
|
||||
setId(`${prefix}-${getId()}`)
|
||||
}
|
||||
}, [getId])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (serverHandoffCompleted === false) {
|
||||
serverHandoffCompleted = true
|
||||
}
|
||||
}, [])
|
||||
|
||||
return id
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user