From eb3ea2d28710977fdaa59b11c4149d7a70276666 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 8 Feb 2019 16:27:22 -0800 Subject: [PATCH] Change SSR Fixture to use Partial Hydration This requires the enableSuspenseServerRenderer flag to be manually enabled for the build to work. --- fixtures/ssr/src/components/App.js | 39 ++++++++++++++++++-------- fixtures/ssr/src/components/Chrome.css | 24 ++++++++++++++++ fixtures/ssr/src/components/Chrome.js | 12 ++++++-- fixtures/ssr/src/components/Page.css | 15 +++++++++- fixtures/ssr/src/components/Page.js | 20 +++++++++---- fixtures/ssr/src/components/Page2.js | 15 ++++++++++ fixtures/ssr/src/components/Suspend.js | 21 ++++++++++++++ fixtures/ssr/src/components/Theme.js | 25 +++++++++++++++++ fixtures/ssr/src/index.js | 5 ++-- 9 files changed, 153 insertions(+), 23 deletions(-) create mode 100644 fixtures/ssr/src/components/Page2.js create mode 100644 fixtures/ssr/src/components/Suspend.js create mode 100644 fixtures/ssr/src/components/Theme.js diff --git a/fixtures/ssr/src/components/App.js b/fixtures/ssr/src/components/App.js index da63dd4fd9c36..ebfafc9d15bb6 100644 --- a/fixtures/ssr/src/components/App.js +++ b/fixtures/ssr/src/components/App.js @@ -1,17 +1,32 @@ -import React, {Component} from 'react'; +import React, {useContext, useState, Suspense} from 'react'; import Chrome from './Chrome'; import Page from './Page'; +import Page2 from './Page2'; +import Theme from './Theme'; -export default class App extends Component { - render() { - return ( - -
-

Hello World

- -
- - ); - } +function LoadingIndicator() { + let theme = useContext(Theme); + return
Loading...
; +} + +export default function App({assets}) { + let [CurrentPage, switchPage] = useState(() => Page); + return ( + +
+

Hello World

+ switchPage(() => Page)}> + Page 1 + + {' | '} + switchPage(() => Page2)}> + Page 2 + + }> + + +
+ + ); } diff --git a/fixtures/ssr/src/components/Chrome.css b/fixtures/ssr/src/components/Chrome.css index b019b57b1db81..96932a6938a9a 100644 --- a/fixtures/ssr/src/components/Chrome.css +++ b/fixtures/ssr/src/components/Chrome.css @@ -3,3 +3,27 @@ body { padding: 0; font-family: sans-serif; } + +body.light { + background-color: #FFFFFF; + color: #333333; +} + +body.dark { + background-color: #000000; + color: #CCCCCC; +} + +.light-loading { + margin: 10px 0; + padding: 10px; + background-color: #CCCCCC; + color: #666666; +} + +.dark-loading { + margin: 10px 0; + padding: 10px; + background-color: #333333; + color: #999999; +} diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js index 541d96901c5fb..b52c8d0ee74d4 100644 --- a/fixtures/ssr/src/components/Chrome.js +++ b/fixtures/ssr/src/components/Chrome.js @@ -1,8 +1,11 @@ import React, {Component} from 'react'; +import Theme, {ThemeToggleButton} from './Theme'; + import './Chrome.css'; export default class Chrome extends Component { + state = {theme: 'light'}; render() { const assets = this.props.assets; return ( @@ -14,13 +17,18 @@ export default class Chrome extends Component { {this.props.title} - +