Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat(gatsby): add partial hydration #36485

Merged
merged 17 commits into from
Sep 21, 2022
Merged

feat(gatsby): add partial hydration #36485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
545f208
chore: modify patch peer-deps for v5 after release
wardpeet Sep 14, 2022
9e4e7d0
feat(gatsby): enable partial hydration plugin handling
wardpeet Aug 24, 2022
66a8400
feat(gatsby): Create client references via AST matching
tyhopp Aug 25, 2022
8c07394
fix HAS_REACT_18 check
LekoArts Sep 6, 2022
567a6e8
update yarn
wardpeet Sep 7, 2022
ae9082b
update node patch
wardpeet Sep 14, 2022
20f8e71
cleanup
wardpeet Sep 19, 2022
19bb6fe
update snapshot
LekoArts Sep 19, 2022
1fe6069
fix mdx tests
LekoArts Sep 19, 2022
3e6fee3
remove stray log
LekoArts Sep 19, 2022
dc3d9bf
remove tsignore
LekoArts Sep 19, 2022
00550f0
more snapshot changes
LekoArts Sep 19, 2022
5239020
Merge branch 'master' into feat/partial-hydration-webpack
LekoArts Sep 20, 2022
f8d5ba6
feat(gatsby,gatsby-cli): Partial hydration error handling (#36556)
tyhopp Sep 20, 2022
e13d710
fix(gatsby): Correctly handle `client export` directive only at top o…
LekoArts Sep 20, 2022
edc770b
add null loader
LekoArts Sep 21, 2022
a2eaa1e
Merge branch 'master' into feat/partial-hydration-webpack
LekoArts Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,8 @@ const esModules = [
`periscopic`,
`hast-util-to-estree`,
`estree-util-attach-comments`,
`trim-lines`,
`estree-util-to-js`,
].join(`|`)

module.exports = {
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ describe(`babel-plugin-remove-graphql-queries`, () => {
}
`)
expect(run).toThrowErrorMatchingInlineSnapshot(
`"unknown: BabelPluginRemoveGraphQLQueries: the \\"config\\" export must be async when using it with graphql"`
`"unknown file: BabelPluginRemoveGraphQLQueries: the \\"config\\" export must be async when using it with graphql"`
)
})
})
15 changes: 15 additions & 0 deletions packages/gatsby-cli/src/structured-errors/error-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,6 +768,21 @@ const errors = {
category: ErrorCategory.USER,
docsUrl: `https://gatsby.dev/graphql-typegen`,
},
// Partial hydration rendering errors
"80000": {
text: (context): string =>
stripIndents(`Building partial HTML failed${
context.path ? ` for path "${context.path}"` : ``
}

This can happen if interactive elements like "useEffect", "useState", "createContext" or event handlers are used in a component without declaring the "client export" directive at the top of the file.

Consider adding "client export" to the top of your file if your component is interactive, otherwise refactor your component so it can be statically rendered with React Server Components (RSC).
`),
level: Level.ERROR,
docsUrl: `https://gatsby.dev/partial-hydration-error`,
category: ErrorCategory.USER,
},
}

export type ErrorId = string | keyof typeof errors
Expand Down
38 changes: 19 additions & 19 deletions packages/gatsby-plugin-mdx/src/__tests__/compile-mdx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,28 @@ describe(`compiles MDX`, () => {
"metadata": Object {},
"processedMDX": "/*@jsxRuntime automatic @jsxImportSource react*/
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
function _createMdxContent(props) {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\",
strong: \\"strong\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Hello\\"
}), \\"/n\\", _jsxs(_components.p, {
children: [\\"This is \\", _jsx(_components.strong, {
children: \\"MDX\\"
})]
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\",
strong: \\"strong\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Hello\\"
}), \\"/n\\", _jsxs(_components.p, {
children: [\\"This is \\", _jsx(_components.strong, {
children: \\"MDX\\"
})]
}), \\"/n\\", _jsx(Example, {})]
});
}
children: _jsx(_createMdxContent, props)
})) : _createMdxContent(props);
}
export default MDXContent;
function _missingMdxReference(id, component) {
Expand Down
134 changes: 67 additions & 67 deletions packages/gatsby-plugin-mdx/src/__tests__/gatsby-layout-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,25 +74,25 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
"import React from \\"react\\";
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
function _createMdxContent(props) {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
children: _jsx(_createMdxContent, props)
})) : _createMdxContent(props);
}
MDXContent
export default function GatsbyMDXWrapper(props) {
Expand All @@ -115,24 +115,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
import TemplateComponent from \\"./some-path\\";
const MDXLayout = TemplateComponent;
function _createMdxContent(props) {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
return _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, props)
}));
}
MDXContent
export default function GatsbyMDXWrapper(props) {
Expand All @@ -152,24 +152,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
import MDXLayout from \\"./some-path\\";
function _createMdxContent(props) {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
return _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, props)
}));
}
MDXContent
export default function GatsbyMDXWrapper(props) {
Expand All @@ -189,24 +189,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
import {Layout as MDXLayout} from \\"./some-path\\";
function _createMdxContent(props) {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
h1: \\"h1\\",
p: \\"p\\"
}, props.components), {Example} = _components;
if (!Example) _missingMdxReference(\\"Example\\", true);
return _jsxs(_Fragment, {
children: [_jsx(_components.h1, {
children: \\"Layout test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it wrap?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
return _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, props)
}));
}
MDXContent
export default function GatsbyMDXWrapper(props) {
Expand Down
38 changes: 19 additions & 19 deletions packages/gatsby-plugin-mdx/src/__tests__/gatsby-mdx-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,28 @@ describe(`webpack loader: parses MDX and transforms it into JSX`, () => {
"/*@jsxRuntime automatic @jsxImportSource react*/
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
import Example from \\"./example\\";
function _createMdxContent(props) {
const _components = Object.assign({
hr: \\"hr\\",
h2: \\"h2\\",
h1: \\"h1\\",
p: \\"p\\"
}, props.components);
return _jsxs(_Fragment, {
children: [_jsx(_components.hr, {}), \\"/n\\", _jsx(_components.h2, {
children: \\"title: Some Frontmatter Data\\"
}), \\"/n\\", \\"/n\\", _jsx(_components.h1, {
children: \\"MDX test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it parse and transform?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
children: _jsx(_createMdxContent, {})
})) : _createMdxContent();
function _createMdxContent() {
const _components = Object.assign({
hr: \\"hr\\",
h2: \\"h2\\",
h1: \\"h1\\",
p: \\"p\\"
}, props.components);
return _jsxs(_Fragment, {
children: [_jsx(_components.hr, {}), \\"/n\\", _jsx(_components.h2, {
children: \\"title: Some Frontmatter Data\\"
}), \\"/n\\", \\"/n\\", _jsx(_components.h1, {
children: \\"MDX test\\"
}), \\"/n\\", _jsx(_components.p, {
children: \\"Does it parse and transform?\\"
}), \\"/n\\", _jsx(Example, {})]
});
}
children: _jsx(_createMdxContent, props)
})) : _createMdxContent(props);
}
export default MDXContent;
"
Expand Down
Loading