diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index b31104d479c28..dda1bfa846c8d 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -59,9 +59,10 @@ var STYLE = 'style'; var HTML = '__html'; var { - html: HTML_NAMESPACE, - svg: SVG_NAMESPACE, - mathml: MATH_NAMESPACE, + Namespaces: { + html: HTML_NAMESPACE, + }, + getIntrinsicNamespace, } = DOMNamespaces; if (__DEV__) { @@ -295,32 +296,7 @@ function updateDOMProperties( } } -// Assumes there is no parent namespace. -function getIntrinsicNamespace(type: string): string { - switch (type) { - case 'svg': - return SVG_NAMESPACE; - case 'math': - return MATH_NAMESPACE; - default: - return HTML_NAMESPACE; - } -} - var ReactDOMFiberComponent = { - getChildNamespace(parentNamespace: string | null, type: string): string { - if (parentNamespace == null || parentNamespace === HTML_NAMESPACE) { - // No (or default) parent namespace: potential entry point. - return getIntrinsicNamespace(type); - } - if (parentNamespace === SVG_NAMESPACE && type === 'foreignObject') { - // We're leaving SVG. - return HTML_NAMESPACE; - } - // By default, pass namespace below. - return parentNamespace; - }, - createElement( type: *, props: Object, @@ -343,6 +319,8 @@ var ReactDOMFiberComponent = { } if (namespaceURI === HTML_NAMESPACE) { if (__DEV__) { + // Should this check be gated by parent namespace? Not sure we want to + // allow or . warning( isCustomComponentTag || type === type.toLowerCase(), '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' + diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js index b9af1b9ea4e99..6225a76587851 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberEntry.js +++ b/src/renderers/dom/fiber/ReactDOMFiberEntry.js @@ -15,6 +15,7 @@ import type {Fiber} from 'ReactFiber'; import type {ReactNodeList} from 'ReactTypes'; +var DOMNamespaces = require('DOMNamespaces'); var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); var ReactControlledComponent = require('ReactControlledComponent'); @@ -44,8 +45,10 @@ var findDOMNode = require('findDOMNode'); var invariant = require('fbjs/lib/invariant'); var { - createElement, getChildNamespace, +} = DOMNamespaces; +var { + createElement, setInitialProperties, diffProperties, updateProperties, diff --git a/src/renderers/dom/shared/DOMNamespaces.js b/src/renderers/dom/shared/DOMNamespaces.js index e93d53e919618..07b852152858a 100644 --- a/src/renderers/dom/shared/DOMNamespaces.js +++ b/src/renderers/dom/shared/DOMNamespaces.js @@ -11,10 +11,41 @@ 'use strict'; -var DOMNamespaces = { - html: 'http://www.w3.org/1999/xhtml', - mathml: 'http://www.w3.org/1998/Math/MathML', - svg: 'http://www.w3.org/2000/svg', +const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'; +const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'; +const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'; + +const Namespaces = { + html: HTML_NAMESPACE, + mathml: MATH_NAMESPACE, + svg: SVG_NAMESPACE, }; -module.exports = DOMNamespaces; +// Assumes there is no parent namespace. +function getIntrinsicNamespace(type: string): string { + switch (type) { + case 'svg': + return SVG_NAMESPACE; + case 'math': + return MATH_NAMESPACE; + default: + return HTML_NAMESPACE; + } +} + +function getChildNamespace(parentNamespace: string | null, type: string): string { + if (parentNamespace == null || parentNamespace === HTML_NAMESPACE) { + // No (or default) parent namespace: potential entry point. + return getIntrinsicNamespace(type); + } + if (parentNamespace === SVG_NAMESPACE && type === 'foreignObject') { + // We're leaving SVG. + return HTML_NAMESPACE; + } + // By default, pass namespace below. + return parentNamespace; +} + +exports.Namespaces = Namespaces; +exports.getIntrinsicNamespace = getIntrinsicNamespace; +exports.getChildNamespace = getChildNamespace; diff --git a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js index 60ea2e7b2c80d..e2e90dda1c9c4 100644 --- a/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js +++ b/src/renderers/dom/shared/__tests__/ReactServerRendering-test.js @@ -772,4 +772,36 @@ describe('ReactDOMServer', () => { ); }).toThrowError(/Cannot assign to read only property.*/); }); + + it('warns about lowercase html but not in svg tags', () => { + spyOn(console, 'error'); + function CompositeG(props) { + // Make sure namespace passes through composites + return {props.children}; + } + ReactDOMServer.renderToStaticMarkup( +
+ + + + + + {/* back to HTML */} +