mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-25 22:37:18 +10:00
Migrate from react-helmet to react-helmet-async
This commit is contained in:
Vesa Luusua
parent
67a15563f3
commit
64c8df222d
5 changed files with 51 additions and 40 deletions
|
|
@ -40,7 +40,7 @@
|
|||
"react-final-form": "^6.3.0",
|
||||
"react-final-form-arrays": "^3.1.1",
|
||||
"react-google-maps": "^9.4.5",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-helmet-async": "^1.0.2",
|
||||
"react-intl": "^2.9.0",
|
||||
"react-moment-proptypes": "^1.6.0",
|
||||
"react-redux": "^7.1.1",
|
||||
|
|
|
|||
27
src/app.js
27
src/app.js
|
|
@ -6,7 +6,7 @@ import ReactDOMServer from 'react-dom/server';
|
|||
// https://github.com/airbnb/react-dates#initialize
|
||||
// NOTE: Initializing it here will initialize it also for app.test.js
|
||||
import 'react-dates/initialize';
|
||||
import Helmet from 'react-helmet';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import { BrowserRouter, StaticRouter } from 'react-router-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import difference from 'lodash/difference';
|
||||
|
|
@ -93,9 +93,11 @@ export const ClientApp = props => {
|
|||
return (
|
||||
<IntlProvider locale={config.locale} messages={localeMessages}>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<Routes routes={routeConfiguration()} />
|
||||
</BrowserRouter>
|
||||
<HelmetProvider>
|
||||
<BrowserRouter>
|
||||
<Routes routes={routeConfiguration()} />
|
||||
</BrowserRouter>
|
||||
</HelmetProvider>
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
);
|
||||
|
|
@ -106,14 +108,17 @@ const { any, string } = PropTypes;
|
|||
ClientApp.propTypes = { store: any.isRequired };
|
||||
|
||||
export const ServerApp = props => {
|
||||
const { url, context, store } = props;
|
||||
const { url, context, helmetContext, store } = props;
|
||||
setupLocale();
|
||||
HelmetProvider.canUseDOM = false;
|
||||
return (
|
||||
<IntlProvider locale={config.locale} messages={localeMessages}>
|
||||
<Provider store={store}>
|
||||
<StaticRouter location={url} context={context}>
|
||||
<Routes routes={routeConfiguration()} />
|
||||
</StaticRouter>
|
||||
<HelmetProvider context={helmetContext}>
|
||||
<StaticRouter location={url} context={context}>
|
||||
<Routes routes={routeConfiguration()} />
|
||||
</StaticRouter>
|
||||
</HelmetProvider>
|
||||
</Provider>
|
||||
</IntlProvider>
|
||||
);
|
||||
|
|
@ -137,9 +142,11 @@ export const renderApp = (url, serverContext, preloadedState) => {
|
|||
// shouldn't do any SDK calls in the (server) rendering lifecycle.
|
||||
const store = configureStore(preloadedState);
|
||||
|
||||
const helmetContext = {};
|
||||
|
||||
const body = ReactDOMServer.renderToString(
|
||||
<ServerApp url={url} context={serverContext} store={store} />
|
||||
<ServerApp url={url} context={serverContext} helmetContext={helmetContext} store={store} />
|
||||
);
|
||||
const head = Helmet.renderStatic();
|
||||
const { helmet: head } = helmetContext;
|
||||
return { head, body };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,17 +5,21 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import Helmet from 'react-helmet';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import forEach from 'lodash/forEach';
|
||||
import { ClientApp, ServerApp } from './app';
|
||||
import configureStore from './store';
|
||||
|
||||
const render = (url, context) => {
|
||||
const store = configureStore();
|
||||
|
||||
const helmetContext = {};
|
||||
|
||||
const body = ReactDOMServer.renderToString(
|
||||
<ServerApp url={url} context={context} store={store} />
|
||||
<ServerApp url={url} context={context} helmetContext={helmetContext} store={store} />
|
||||
);
|
||||
const head = Helmet.peek();
|
||||
|
||||
const { helmet: head } = helmetContext;
|
||||
return { head, body };
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Helmet from 'react-helmet';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { injectIntl, intlShape } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
|
|
|||
50
yarn.lock
50
yarn.lock
|
|
@ -756,6 +756,13 @@
|
|||
"@babel/helper-plugin-utils" "^7.0.0"
|
||||
"@babel/plugin-transform-typescript" "^7.3.2"
|
||||
|
||||
"@babel/runtime@7.3.4":
|
||||
version "7.3.4"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
|
||||
integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.12.0"
|
||||
|
||||
"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
|
||||
version "7.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
|
||||
|
|
@ -4240,11 +4247,6 @@ execa@^1.0.0:
|
|||
signal-exit "^3.0.0"
|
||||
strip-eof "^1.0.0"
|
||||
|
||||
exenv@^1.2.1:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
|
||||
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
|
||||
|
||||
exit@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
|
||||
|
|
@ -5574,7 +5576,7 @@ intl-relativeformat@^2.1.0:
|
|||
dependencies:
|
||||
intl-messageformat "^2.0.0"
|
||||
|
||||
invariant@^2.1.1, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
|
||||
invariant@2.2.4, invariant@^2.1.1, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
|
|
@ -8866,7 +8868,7 @@ prop-types-exact@^1.2.0:
|
|||
object.assign "^4.1.0"
|
||||
reflect.ownkeys "^0.2.0"
|
||||
|
||||
prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
|
|
@ -9139,7 +9141,7 @@ react-error-overlay@^6.0.1:
|
|||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
|
||||
integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
|
||||
|
||||
react-fast-compare@^2.0.2:
|
||||
react-fast-compare@2.0.4:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
|
||||
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
||||
|
|
@ -9176,15 +9178,16 @@ react-google-maps@^9.4.5:
|
|||
scriptjs "^2.5.8"
|
||||
warning "^3.0.0"
|
||||
|
||||
react-helmet@^5.2.0:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
|
||||
integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
|
||||
react-helmet-async@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.2.tgz#bb55dd8268f7b15aac69c6b22e2f950abda8cc44"
|
||||
integrity sha512-qzzchrM/ibHuPS/60ief8jaibPunuRdeta4iBDQV+ri2SFKwOV+X2NlEpvevZOauhmHrH/I6dI4E90EPVfJBBg==
|
||||
dependencies:
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.5.4"
|
||||
react-fast-compare "^2.0.2"
|
||||
react-side-effect "^1.1.0"
|
||||
"@babel/runtime" "7.3.4"
|
||||
invariant "2.2.4"
|
||||
prop-types "15.7.2"
|
||||
react-fast-compare "2.0.4"
|
||||
shallowequal "1.1.0"
|
||||
|
||||
react-intl@^2.9.0:
|
||||
version "2.9.0"
|
||||
|
|
@ -9273,14 +9276,6 @@ react-router@5.0.1:
|
|||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-side-effect@^1.1.0:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
|
||||
integrity sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==
|
||||
dependencies:
|
||||
exenv "^1.2.1"
|
||||
shallowequal "^1.0.1"
|
||||
|
||||
react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.6:
|
||||
version "16.8.6"
|
||||
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
|
||||
|
|
@ -9490,6 +9485,11 @@ regenerator-runtime@^0.11.0:
|
|||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
|
||||
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
|
||||
|
||||
regenerator-runtime@^0.12.0:
|
||||
version "0.12.1"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
|
||||
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
|
||||
|
||||
regenerator-transform@^0.14.0:
|
||||
version "0.14.1"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
|
||||
|
|
@ -10043,7 +10043,7 @@ shallow-clone@^3.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.2"
|
||||
|
||||
shallowequal@^1.0.1:
|
||||
shallowequal@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
|
||||
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue