Skip to content

Commit

Permalink
feat(gatsby): add partial hydration (#36485)
Browse files Browse the repository at this point in the history 
Co-authored-by: LekoArts <lekoarts@gmail.com>
Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>
Co-authored-by: tyhopp <hopp.ty.c@gmail.com>
  • Loading branch information
@wardpeet @LekoArts @tyhopp
4 people committed Sep 21, 2022
1 parent 5110a94 commit c073bbe
Show file tree
Hide file tree
Showing 36 changed files with 2,020 additions and 583 deletions.
2 changes: 2 additions & 0 deletions jest.config.js
View file
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
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
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
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
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
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

0 comments on commit c073bbe

Please sign in to comment.