From 45190d6e7e0ca24da2ae8012dbc5a6ac54a9d204 Mon Sep 17 00:00:00 2001 From: Aubrey Hewes Date: Fri, 14 Sep 2018 00:04:07 +0200 Subject: [PATCH 1/2] fix #344 rendering body style attribute value as `[object Object]`. --- package.json | 5 +++-- src/Helmet.js | 10 +++++++-- src/HelmetUtils.js | 12 ++++++++++ test/HelmetDeclarativeTest.js | 41 +++++++++++++++++++++++++++++++++++ yarn.lock | 4 ++++ 5 files changed, 68 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 5894ce55..9236f183 100644 --- a/package.json +++ b/package.json @@ -31,9 +31,10 @@ }, "dependencies": { "deep-equal": "^1.0.1", + "lodash.kebabcase": "^4.1.1", "object-assign": "^4.1.1", - "react-side-effect": "^1.1.0", - "prop-types": "^15.5.4" + "prop-types": "^15.5.4", + "react-side-effect": "^1.1.0" }, "devDependencies": { "babel-cli": "^6.24.0", diff --git a/src/Helmet.js b/src/Helmet.js index d88ee7e4..722c70d5 100644 --- a/src/Helmet.js +++ b/src/Helmet.js @@ -7,7 +7,8 @@ import { handleClientStateChange, mapStateOnServer, reducePropsToState, - warn + warn, + getBodyStyleAttributeValue } from "./HelmetUtils.js"; import {TAG_NAMES, VALID_TAG_NAMES} from "./HelmetConstants.js"; @@ -151,7 +152,12 @@ const Helmet = Component => case TAG_NAMES.BODY: return { ...newProps, - bodyAttributes: {...newChildProps} + bodyAttributes: { + ...newChildProps, + style: getBodyStyleAttributeValue( + newChildProps.style + ) + } }; case TAG_NAMES.HTML: diff --git a/src/HelmetUtils.js b/src/HelmetUtils.js index 63ad85a6..37a84522 100644 --- a/src/HelmetUtils.js +++ b/src/HelmetUtils.js @@ -1,5 +1,7 @@ import React from "react"; import objectAssign from "object-assign"; +import kebabCase from "lodash.kebabcase"; + import { ATTRIBUTE_NAMES, HELMET_ATTRIBUTE, @@ -640,9 +642,19 @@ const mapStateOnServer = ({ title: getMethodsForTag(TAG_NAMES.TITLE, {title, titleAttributes}, encode) }); +const getBodyStyleAttributeValue = (style: ?any) => { + if (typeof style === "object") { + return Object.keys(style) + .map(key => `${kebabCase(key)}: ${style[key]}`) + .join(";"); + } + return style; +}; + export {convertReactPropstoHtmlAttributes}; export {handleClientStateChange}; export {mapStateOnServer}; export {reducePropsToState}; export {requestAnimationFrame}; export {warn}; +export {getBodyStyleAttributeValue}; diff --git a/test/HelmetDeclarativeTest.js b/test/HelmetDeclarativeTest.js index bdcf5229..a3aa39d2 100644 --- a/test/HelmetDeclarativeTest.js +++ b/test/HelmetDeclarativeTest.js @@ -774,6 +774,47 @@ describe("Helmet - Declarative API", () => { }); }); + it("body style attribute as string", done => { + ReactDOM.render( + + + , + container + ); + + requestAnimationFrame(() => { + const body = document.querySelector("body"); + const styleAttributeValue = body.getAttribute("style"); + expect(styleAttributeValue).to.be.a("string"); + expect(styleAttributeValue).to.equal("color: red"); + done(); + }); + }); + + it("body style attribute as object is translated to a string", done => { + ReactDOM.render( + + + , + container + ); + + requestAnimationFrame(() => { + const body = document.querySelector("body"); + const styleAttributeValue = body.getAttribute("style"); + + // normal behaviour + expect(styleAttributeValue).to.be.a("string"); + + // old behaviour + expect(styleAttributeValue).to.not.equal("[object Object]"); + + // new behaviour + expect(styleAttributeValue).to.equal("color: red"); + done(); + }); + }); + it("sets attributes based on the deepest nested component", done => { ReactDOM.render(
diff --git a/yarn.lock b/yarn.lock index 1cb8be5d..712ee9af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3248,6 +3248,10 @@ lodash.isarray@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" +lodash.kebabcase@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" + lodash.keys@^3.0.0, lodash.keys@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" From 462f309e787476c72c1830e41e26354fba6cb806 Mon Sep 17 00:00:00 2001 From: Aubrey Hewes Date: Fri, 14 Sep 2018 10:15:05 +0200 Subject: [PATCH 2/2] fixed logic as was not tested properly --- src/Helmet.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Helmet.js b/src/Helmet.js index 722c70d5..bbf339b4 100644 --- a/src/Helmet.js +++ b/src/Helmet.js @@ -150,13 +150,15 @@ const Helmet = Component => }; case TAG_NAMES.BODY: + if (newChildProps.style) { + newChildProps.style = getBodyStyleAttributeValue( + newChildProps.style + ); + } return { ...newProps, bodyAttributes: { - ...newChildProps, - style: getBodyStyleAttributeValue( - newChildProps.style - ) + ...newChildProps } };