Skip to content

Commit c073bbe

Browse files
wardpeetLekoArtstyhopp
authored
feat(gatsby): add partial hydration (#36485)
Co-authored-by: LekoArts <[email protected]> Co-authored-by: Ty Hopp <[email protected]> Co-authored-by: tyhopp <[email protected]>
1 parent 5110a94 commit c073bbe

36 files changed

+2020
-583
lines changed

‎jest.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ const esModules = [
102102
`periscopic`,
103103
`hast-util-to-estree`,
104104
`estree-util-attach-comments`,
105+
`trim-lines`,
106+
`estree-util-to-js`,
105107
].join(`|`)
106108

107109
module.exports = {

‎packages/babel-plugin-remove-graphql-queries/src/__tests__/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ describe(`babel-plugin-remove-graphql-queries`, () => {
521521
}
522522
`)
523523
expect(run).toThrowErrorMatchingInlineSnapshot(
524-
`"unknown: BabelPluginRemoveGraphQLQueries: the \\"config\\" export must be async when using it with graphql"`
524+
`"unknown file: BabelPluginRemoveGraphQLQueries: the \\"config\\" export must be async when using it with graphql"`
525525
)
526526
})
527527
})

‎packages/gatsby-cli/src/structured-errors/error-map.ts

+15
Original file line numberDiff line numberDiff line change
@@ -768,6 +768,21 @@ const errors = {
768768
category: ErrorCategory.USER,
769769
docsUrl: `https://gatsby.dev/graphql-typegen`,
770770
},
771+
// Partial hydration rendering errors
772+
"80000": {
773+
text: (context): string =>
774+
stripIndents(`Building partial HTML failed${
775+
context.path ? ` for path "${context.path}"` : ``
776+
}
777+
778+
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.
779+
780+
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).
781+
`),
782+
level: Level.ERROR,
783+
docsUrl: `https://gatsby.dev/partial-hydration-error`,
784+
category: ErrorCategory.USER,
785+
},
771786
}
772787

773788
export type ErrorId = string | keyof typeof errors

‎packages/gatsby-plugin-mdx/src/__tests__/compile-mdx.ts

+19-19
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,28 @@ describe(`compiles MDX`, () => {
2828
"metadata": Object {},
2929
"processedMDX": "/*@jsxRuntime automatic @jsxImportSource react*/
3030
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
31+
function _createMdxContent(props) {
32+
const _components = Object.assign({
33+
h1: \\"h1\\",
34+
p: \\"p\\",
35+
strong: \\"strong\\"
36+
}, props.components), {Example} = _components;
37+
if (!Example) _missingMdxReference(\\"Example\\", true);
38+
return _jsxs(_Fragment, {
39+
children: [_jsx(_components.h1, {
40+
children: \\"Hello\\"
41+
}), \\"/n\\", _jsxs(_components.p, {
42+
children: [\\"This is \\", _jsx(_components.strong, {
43+
children: \\"MDX\\"
44+
})]
45+
}), \\"/n\\", _jsx(Example, {})]
46+
});
47+
}
3148
function MDXContent(props = {}) {
3249
const {wrapper: MDXLayout} = props.components || ({});
3350
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
34-
children: _jsx(_createMdxContent, {})
35-
})) : _createMdxContent();
36-
function _createMdxContent() {
37-
const _components = Object.assign({
38-
h1: \\"h1\\",
39-
p: \\"p\\",
40-
strong: \\"strong\\"
41-
}, props.components), {Example} = _components;
42-
if (!Example) _missingMdxReference(\\"Example\\", true);
43-
return _jsxs(_Fragment, {
44-
children: [_jsx(_components.h1, {
45-
children: \\"Hello\\"
46-
}), \\"/n\\", _jsxs(_components.p, {
47-
children: [\\"This is \\", _jsx(_components.strong, {
48-
children: \\"MDX\\"
49-
})]
50-
}), \\"/n\\", _jsx(Example, {})]
51-
});
52-
}
51+
children: _jsx(_createMdxContent, props)
52+
})) : _createMdxContent(props);
5353
}
5454
export default MDXContent;
5555
function _missingMdxReference(id, component) {

‎packages/gatsby-plugin-mdx/src/__tests__/gatsby-layout-loader.ts

+67-67
Original file line numberDiff line numberDiff line change
@@ -74,25 +74,25 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
7474
"import React from \\"react\\";
7575
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
7676
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
77+
function _createMdxContent(props) {
78+
const _components = Object.assign({
79+
h1: \\"h1\\",
80+
p: \\"p\\"
81+
}, props.components), {Example} = _components;
82+
if (!Example) _missingMdxReference(\\"Example\\", true);
83+
return _jsxs(_Fragment, {
84+
children: [_jsx(_components.h1, {
85+
children: \\"Layout test\\"
86+
}), \\"/n\\", _jsx(_components.p, {
87+
children: \\"Does it wrap?\\"
88+
}), \\"/n\\", _jsx(Example, {})]
89+
});
90+
}
7791
function MDXContent(props = {}) {
7892
const {wrapper: MDXLayout} = props.components || ({});
7993
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
80-
children: _jsx(_createMdxContent, {})
81-
})) : _createMdxContent();
82-
function _createMdxContent() {
83-
const _components = Object.assign({
84-
h1: \\"h1\\",
85-
p: \\"p\\"
86-
}, props.components), {Example} = _components;
87-
if (!Example) _missingMdxReference(\\"Example\\", true);
88-
return _jsxs(_Fragment, {
89-
children: [_jsx(_components.h1, {
90-
children: \\"Layout test\\"
91-
}), \\"/n\\", _jsx(_components.p, {
92-
children: \\"Does it wrap?\\"
93-
}), \\"/n\\", _jsx(Example, {})]
94-
});
95-
}
94+
children: _jsx(_createMdxContent, props)
95+
})) : _createMdxContent(props);
9696
}
9797
MDXContent
9898
export default function GatsbyMDXWrapper(props) {
@@ -115,24 +115,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
115115
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
116116
import TemplateComponent from \\"./some-path\\";
117117
const MDXLayout = TemplateComponent;
118+
function _createMdxContent(props) {
119+
const _components = Object.assign({
120+
h1: \\"h1\\",
121+
p: \\"p\\"
122+
}, props.components), {Example} = _components;
123+
if (!Example) _missingMdxReference(\\"Example\\", true);
124+
return _jsxs(_Fragment, {
125+
children: [_jsx(_components.h1, {
126+
children: \\"Layout test\\"
127+
}), \\"/n\\", _jsx(_components.p, {
128+
children: \\"Does it wrap?\\"
129+
}), \\"/n\\", _jsx(Example, {})]
130+
});
131+
}
118132
function MDXContent(props = {}) {
119-
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
120-
children: _jsx(_createMdxContent, {})
121-
})) : _createMdxContent();
122-
function _createMdxContent() {
123-
const _components = Object.assign({
124-
h1: \\"h1\\",
125-
p: \\"p\\"
126-
}, props.components), {Example} = _components;
127-
if (!Example) _missingMdxReference(\\"Example\\", true);
128-
return _jsxs(_Fragment, {
129-
children: [_jsx(_components.h1, {
130-
children: \\"Layout test\\"
131-
}), \\"/n\\", _jsx(_components.p, {
132-
children: \\"Does it wrap?\\"
133-
}), \\"/n\\", _jsx(Example, {})]
134-
});
135-
}
133+
return _jsx(MDXLayout, Object.assign({}, props, {
134+
children: _jsx(_createMdxContent, props)
135+
}));
136136
}
137137
MDXContent
138138
export default function GatsbyMDXWrapper(props) {
@@ -152,24 +152,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
152152
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
153153
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
154154
import MDXLayout from \\"./some-path\\";
155+
function _createMdxContent(props) {
156+
const _components = Object.assign({
157+
h1: \\"h1\\",
158+
p: \\"p\\"
159+
}, props.components), {Example} = _components;
160+
if (!Example) _missingMdxReference(\\"Example\\", true);
161+
return _jsxs(_Fragment, {
162+
children: [_jsx(_components.h1, {
163+
children: \\"Layout test\\"
164+
}), \\"/n\\", _jsx(_components.p, {
165+
children: \\"Does it wrap?\\"
166+
}), \\"/n\\", _jsx(Example, {})]
167+
});
168+
}
155169
function MDXContent(props = {}) {
156-
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
157-
children: _jsx(_createMdxContent, {})
158-
})) : _createMdxContent();
159-
function _createMdxContent() {
160-
const _components = Object.assign({
161-
h1: \\"h1\\",
162-
p: \\"p\\"
163-
}, props.components), {Example} = _components;
164-
if (!Example) _missingMdxReference(\\"Example\\", true);
165-
return _jsxs(_Fragment, {
166-
children: [_jsx(_components.h1, {
167-
children: \\"Layout test\\"
168-
}), \\"/n\\", _jsx(_components.p, {
169-
children: \\"Does it wrap?\\"
170-
}), \\"/n\\", _jsx(Example, {})]
171-
});
172-
}
170+
return _jsx(MDXLayout, Object.assign({}, props, {
171+
children: _jsx(_createMdxContent, props)
172+
}));
173173
}
174174
MDXContent
175175
export default function GatsbyMDXWrapper(props) {
@@ -189,24 +189,24 @@ describe(`webpack loader: loads and injects Gatsby layout component`, () => {
189189
import GATSBY_COMPILED_MDX from \\"/mocked-layout.ts?contentFilePath=/mocked-content.mdx\\";
190190
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
191191
import {Layout as MDXLayout} from \\"./some-path\\";
192+
function _createMdxContent(props) {
193+
const _components = Object.assign({
194+
h1: \\"h1\\",
195+
p: \\"p\\"
196+
}, props.components), {Example} = _components;
197+
if (!Example) _missingMdxReference(\\"Example\\", true);
198+
return _jsxs(_Fragment, {
199+
children: [_jsx(_components.h1, {
200+
children: \\"Layout test\\"
201+
}), \\"/n\\", _jsx(_components.p, {
202+
children: \\"Does it wrap?\\"
203+
}), \\"/n\\", _jsx(Example, {})]
204+
});
205+
}
192206
function MDXContent(props = {}) {
193-
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
194-
children: _jsx(_createMdxContent, {})
195-
})) : _createMdxContent();
196-
function _createMdxContent() {
197-
const _components = Object.assign({
198-
h1: \\"h1\\",
199-
p: \\"p\\"
200-
}, props.components), {Example} = _components;
201-
if (!Example) _missingMdxReference(\\"Example\\", true);
202-
return _jsxs(_Fragment, {
203-
children: [_jsx(_components.h1, {
204-
children: \\"Layout test\\"
205-
}), \\"/n\\", _jsx(_components.p, {
206-
children: \\"Does it wrap?\\"
207-
}), \\"/n\\", _jsx(Example, {})]
208-
});
209-
}
207+
return _jsx(MDXLayout, Object.assign({}, props, {
208+
children: _jsx(_createMdxContent, props)
209+
}));
210210
}
211211
MDXContent
212212
export default function GatsbyMDXWrapper(props) {

‎packages/gatsby-plugin-mdx/src/__tests__/gatsby-mdx-loader.ts

+19-19
Original file line numberDiff line numberDiff line change
@@ -51,28 +51,28 @@ describe(`webpack loader: parses MDX and transforms it into JSX`, () => {
5151
"/*@jsxRuntime automatic @jsxImportSource react*/
5252
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from \\"react/jsx-runtime\\";
5353
import Example from \\"./example\\";
54+
function _createMdxContent(props) {
55+
const _components = Object.assign({
56+
hr: \\"hr\\",
57+
h2: \\"h2\\",
58+
h1: \\"h1\\",
59+
p: \\"p\\"
60+
}, props.components);
61+
return _jsxs(_Fragment, {
62+
children: [_jsx(_components.hr, {}), \\"/n\\", _jsx(_components.h2, {
63+
children: \\"title: Some Frontmatter Data\\"
64+
}), \\"/n\\", \\"/n\\", _jsx(_components.h1, {
65+
children: \\"MDX test\\"
66+
}), \\"/n\\", _jsx(_components.p, {
67+
children: \\"Does it parse and transform?\\"
68+
}), \\"/n\\", _jsx(Example, {})]
69+
});
70+
}
5471
function MDXContent(props = {}) {
5572
const {wrapper: MDXLayout} = props.components || ({});
5673
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
57-
children: _jsx(_createMdxContent, {})
58-
})) : _createMdxContent();
59-
function _createMdxContent() {
60-
const _components = Object.assign({
61-
hr: \\"hr\\",
62-
h2: \\"h2\\",
63-
h1: \\"h1\\",
64-
p: \\"p\\"
65-
}, props.components);
66-
return _jsxs(_Fragment, {
67-
children: [_jsx(_components.hr, {}), \\"/n\\", _jsx(_components.h2, {
68-
children: \\"title: Some Frontmatter Data\\"
69-
}), \\"/n\\", \\"/n\\", _jsx(_components.h1, {
70-
children: \\"MDX test\\"
71-
}), \\"/n\\", _jsx(_components.p, {
72-
children: \\"Does it parse and transform?\\"
73-
}), \\"/n\\", _jsx(Example, {})]
74-
});
75-
}
74+
children: _jsx(_createMdxContent, props)
75+
})) : _createMdxContent(props);
7676
}
7777
export default MDXContent;
7878
"

0 commit comments

Comments
 (0)