commit b450989928c628d69979d70b2d8b08b7446d511f
parent 52899e83f83255b8f30968396f3300e8c1b6c3fd
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Sat, 11 Feb 2017 17:50:27 +0300
Move head tag utlis from src/client.js to src/core/DOMUtlis.js
Diffstat:
3 files changed, 46 insertions(+), 31 deletions(-)
diff --git 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
@@ -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
@@ -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);
+}
