From b450989928c628d69979d70b2d8b08b7446d511f Mon Sep 17 00:00:00 2001 From: Vladimir Kutepov Date: Sat, 11 Feb 2017 17:50:27 +0300 Subject: [PATCH] Move head tag utlis from src/client.js to src/core/DOMUtlis.js --- docs/getting-started.md | 5 ++++- src/client.js | 36 ++++++------------------------------ src/core/DOMUtils.js | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 31 deletions(-) create mode 100644 src/core/DOMUtils.js diff --git a/docs/getting-started.md b/docs/getting-started.md index d4514a4e6..171db6912 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -32,11 +32,14 @@ Before you start, take a moment to see how the project structure looks like: │ ├── /clean.js # Cleans up the output (build) folder │ ├── /copy.js # Copies static files to output (build) folder │ ├── /deploy.js # Deploys your web application +│ ├── /postcss.config.js # Configuration for transforming styles with PostCSS plugins │ ├── /run.js # Helper function for running build automation tasks │ ├── /runServer.js # Launches (or restarts) Node.js server │ ├── /start.js # Launches the development web server with "live reload" │ └── /webpack.config.js # Configurations for client-side and server-side bundles -└── package.json # The list of 3rd party libraries and utilities +├── Dockerfile # Commands for building a Docker image for production +├── package.json # The list of 3rd party libraries and utilities +└── yarn.lock # Fixed versions of all the dependencies ``` **Note**: The current version of RSK does not contain a Flux implementation. diff --git a/src/client.js b/src/client.js index 004e9eafb..00d4e204b 100644 --- a/src/client.js +++ b/src/client.js @@ -15,6 +15,7 @@ import queryString from 'query-string'; import { createPath } from 'history/PathUtils'; import history from './core/history'; import App from './components/App'; +import { updateMeta } from './core/DOMUtils'; import { ErrorReporter, deepForceUpdate } from './core/devUtils'; // Global (context) variables that can be easily accessed from any React component @@ -29,31 +30,6 @@ const context = { }, }; -function updateTag(tagName, keyName, keyValue, attrName, attrValue) { - const node = document.head.querySelector(`${tagName}[${keyName}="${keyValue}"]`); - if (node && node.getAttribute(attrName) === attrValue) return; - - // Remove and create a new tag in order to make it work with bookmarks in Safari - if (node) { - node.parentNode.removeChild(node); - } - if (typeof attrValue === 'string') { - const nextNode = document.createElement(tagName); - nextNode.setAttribute(keyName, keyValue); - nextNode.setAttribute(attrName, attrValue); - document.head.appendChild(nextNode); - } -} -function updateMeta(name, content) { - updateTag('meta', 'name', name, 'content', content); -} -function updateCustomMeta(property, content) { // eslint-disable-line no-unused-vars - updateTag('meta', 'property', property, 'content', content); -} -function updateLink(rel, href) { // eslint-disable-line no-unused-vars - updateTag('link', 'rel', rel, 'href', href); -} - // Switch off the native scroll restoration behavior and handle it manually // https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration const scrollPositionsHistory = {}; @@ -113,14 +89,14 @@ let currentLocation = history.location; let routes = require('./routes').default; // Re-render the app when window.location changes -async function onLocationChange(location, initial) { +async function onLocationChange(location, action) { // Remember the latest scroll position for the previous location scrollPositionsHistory[currentLocation.key] = { scrollX: window.pageXOffset, scrollY: window.pageYOffset, }; // Delete stored scroll position for next page if any - if (history.action === 'PUSH') { + if (action === 'PUSH') { delete scrollPositionsHistory[location.key]; } currentLocation = location; @@ -160,8 +136,8 @@ async function onLocationChange(location, initial) { console.error(error); // eslint-disable-line no-console - // Avoid broken navigation in production mode by a full page reload on error - if (!initial && currentLocation.key === location.key) { + // Do a full page reload if error occurs during client-side navigation + if (action && currentLocation.key === location.key) { window.location.reload(); } } @@ -170,7 +146,7 @@ async function onLocationChange(location, initial) { // Handle client-side navigation by using HTML5 History API // For more information visit https://github.com/mjackson/history#readme history.listen(onLocationChange); -onLocationChange(currentLocation, true); +onLocationChange(currentLocation); // Handle errors that might happen after rendering // Display the error in full-screen for development mode diff --git a/src/core/DOMUtils.js b/src/core/DOMUtils.js new file mode 100644 index 000000000..bb7c0cb00 --- /dev/null +++ b/src/core/DOMUtils.js @@ -0,0 +1,36 @@ +/** + * React Starter Kit (https://www.reactstarterkit.com/) + * + * Copyright © 2014-present Kriasoft, LLC. All rights reserved. + * + * This source code is licensed under the MIT license found in the + * LICENSE.txt file in the root directory of this source tree. + */ + +export function updateTag(tagName, keyName, keyValue, attrName, attrValue) { + const node = document.head.querySelector(`${tagName}[${keyName}="${keyValue}"]`); + if (node && node.getAttribute(attrName) === attrValue) return; + + // Remove and create a new tag in order to make it work with bookmarks in Safari + if (node) { + node.parentNode.removeChild(node); + } + if (typeof attrValue === 'string') { + const nextNode = document.createElement(tagName); + nextNode.setAttribute(keyName, keyValue); + nextNode.setAttribute(attrName, attrValue); + document.head.appendChild(nextNode); + } +} + +export function updateMeta(name, content) { + updateTag('meta', 'name', name, 'content', content); +} + +export function updateCustomMeta(property, content) { + updateTag('meta', 'property', property, 'content', content); +} + +export function updateLink(rel, href) { + updateTag('link', 'rel', rel, 'href', href); +}