mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-25 23:05:23 +00:00
Enable streaming
This commit is contained in:
@@ -10,8 +10,7 @@ module.exports = {
|
||||
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
|
||||
experimental: {
|
||||
plugins: true,
|
||||
// TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
|
||||
// concurrentFeatures: true,
|
||||
concurrentFeatures: true,
|
||||
scrollRestoration: true,
|
||||
},
|
||||
async redirects() {
|
||||
|
||||
@@ -3,64 +3,60 @@
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import Document, {Html, Head, Main, NextScript} from 'next/document';
|
||||
import {Html, Head, Main, NextScript} from 'next/document';
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
// @todo specify language in HTML?
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function () {
|
||||
function setTheme(newTheme) {
|
||||
window.__theme = newTheme;
|
||||
if (newTheme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else if (newTheme === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
export default function Document() {
|
||||
// @todo specify language in HTML?
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function () {
|
||||
function setTheme(newTheme) {
|
||||
window.__theme = newTheme;
|
||||
if (newTheme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else if (newTheme === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
}
|
||||
|
||||
var preferredTheme;
|
||||
var preferredTheme;
|
||||
try {
|
||||
preferredTheme = localStorage.getItem('theme');
|
||||
} catch (err) { }
|
||||
|
||||
window.__setPreferredTheme = function(newTheme) {
|
||||
preferredTheme = newTheme;
|
||||
setTheme(newTheme);
|
||||
try {
|
||||
preferredTheme = localStorage.getItem('theme');
|
||||
localStorage.setItem('theme', newTheme);
|
||||
} catch (err) { }
|
||||
};
|
||||
|
||||
window.__setPreferredTheme = function(newTheme) {
|
||||
preferredTheme = newTheme;
|
||||
setTheme(newTheme);
|
||||
try {
|
||||
localStorage.setItem('theme', newTheme);
|
||||
} catch (err) { }
|
||||
};
|
||||
var initialTheme = preferredTheme;
|
||||
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
var initialTheme = preferredTheme;
|
||||
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
if (!initialTheme) {
|
||||
initialTheme = darkQuery.matches ? 'dark' : 'light';
|
||||
}
|
||||
setTheme(initialTheme);
|
||||
|
||||
if (!initialTheme) {
|
||||
initialTheme = darkQuery.matches ? 'dark' : 'light';
|
||||
darkQuery.addListener(function (e) {
|
||||
if (!preferredTheme) {
|
||||
setTheme(e.matches ? 'dark' : 'light');
|
||||
}
|
||||
setTheme(initialTheme);
|
||||
|
||||
darkQuery.addListener(function (e) {
|
||||
if (!preferredTheme) {
|
||||
setTheme(e.matches ? 'dark' : 'light');
|
||||
}
|
||||
});
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
});
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
|
||||
Reference in New Issue
Block a user