From ffcbb0bfc2e902b0ddb0604bf19c846284127d8f Mon Sep 17 00:00:00 2001 From: Tom Occhino Date: Wed, 10 May 2017 22:01:48 -0700 Subject: [PATCH] Move small utility modules out of ReactDOM(Fiber)?Component (#9658) * Move small utility modules out of ReactDOM(Fiber)?Component These are all going to be needed in the server renderer, so I'm moving them out now so I can use them from in there. * Fix `didWarnShadyDOM = false;` line --- .../dom/fiber/ReactDOMFiberComponent.js | 38 ++--------------- .../dom/shared/utils/isCustomComponent.js | 18 ++++++++ .../dom/shared/utils/omittedCloseTags.js | 36 ++++++++++++++++ .../dom/shared/utils/voidElementTags.js | 24 +++++++++++ .../dom/stack/client/ReactDOMComponent.js | 42 +++---------------- 5 files changed, 86 insertions(+), 72 deletions(-) create mode 100644 src/renderers/dom/shared/utils/isCustomComponent.js create mode 100644 src/renderers/dom/shared/utils/omittedCloseTags.js create mode 100644 src/renderers/dom/shared/utils/voidElementTags.js diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index 53bcc0f684..b2d5a5a1f4 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -26,10 +26,12 @@ var {getCurrentFiberOwnerName} = require('ReactDebugCurrentFiber'); var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType'); var emptyFunction = require('fbjs/lib/emptyFunction'); +var inputValueTracking = require('inputValueTracking'); var invariant = require('fbjs/lib/invariant'); +var isCustomComponent = require('isCustomComponent'); var setInnerHTML = require('setInnerHTML'); var setTextContent = require('setTextContent'); -var inputValueTracking = require('inputValueTracking'); +var voidElementTags = require('voidElementTags'); var warning = require('fbjs/lib/warning'); if (__DEV__) { @@ -237,40 +239,6 @@ function trapBubbledEventsLocal(node: Element, tag: string) { } } -// For HTML, certain tags should omit their close tag. We keep a whitelist for -// those special-case tags. - -var omittedCloseTags = { - area: true, - base: true, - br: true, - col: true, - embed: true, - hr: true, - img: true, - input: true, - keygen: true, - link: true, - meta: true, - param: true, - source: true, - track: true, - wbr: true, - // NOTE: menuitem's close tag should be omitted, but that causes problems. -}; - -// For HTML, certain tags cannot have children. This has the same purpose as -// `omittedCloseTags` except that `menuitem` should still have its closing tag. - -var voidElementTags = { - menuitem: true, - ...omittedCloseTags, -}; - -function isCustomComponent(tagName, props) { - return tagName.indexOf('-') >= 0 || props.is != null; -} - function setInitialDOMProperties( domElement: Element, rootContainerElement: Element, diff --git a/src/renderers/dom/shared/utils/isCustomComponent.js b/src/renderers/dom/shared/utils/isCustomComponent.js new file mode 100644 index 0000000000..2563a1e2b5 --- /dev/null +++ b/src/renderers/dom/shared/utils/isCustomComponent.js @@ -0,0 +1,18 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule isCustomComponent + */ + +'use strict'; + +function isCustomComponent(tagName, props) { + return tagName.indexOf('-') >= 0 || props.is != null; +} + +module.exports = isCustomComponent; diff --git a/src/renderers/dom/shared/utils/omittedCloseTags.js b/src/renderers/dom/shared/utils/omittedCloseTags.js new file mode 100644 index 0000000000..b6884e24d7 --- /dev/null +++ b/src/renderers/dom/shared/utils/omittedCloseTags.js @@ -0,0 +1,36 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule omittedCloseTags + */ + +'use strict'; + +// For HTML, certain tags should omit their close tag. We keep a whitelist for +// those special-case tags. + +var omittedCloseTags = { + area: true, + base: true, + br: true, + col: true, + embed: true, + hr: true, + img: true, + input: true, + keygen: true, + link: true, + meta: true, + param: true, + source: true, + track: true, + wbr: true, + // NOTE: menuitem's close tag should be omitted, but that causes problems. +}; + +module.exports = omittedCloseTags; diff --git a/src/renderers/dom/shared/utils/voidElementTags.js b/src/renderers/dom/shared/utils/voidElementTags.js new file mode 100644 index 0000000000..80c2645c90 --- /dev/null +++ b/src/renderers/dom/shared/utils/voidElementTags.js @@ -0,0 +1,24 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule voidElementTags + */ + +'use strict'; + +var omittedCloseTags = require('omittedCloseTags'); + +// For HTML, certain tags cannot have children. This has the same purpose as +// `omittedCloseTags` except that `menuitem` should still have its closing tag. + +var voidElementTags = { + menuitem: true, + ...omittedCloseTags, +}; + +module.exports = voidElementTags; diff --git a/src/renderers/dom/stack/client/ReactDOMComponent.js b/src/renderers/dom/stack/client/ReactDOMComponent.js index 3b55e67a4d..bc9c5fa4e3 100644 --- a/src/renderers/dom/stack/client/ReactDOMComponent.js +++ b/src/renderers/dom/stack/client/ReactDOMComponent.js @@ -32,10 +32,14 @@ var {DOCUMENT_FRAGMENT_NODE} = require('HTMLNodeType'); var emptyFunction = require('fbjs/lib/emptyFunction'); var escapeTextContentForBrowser = require('escapeTextContentForBrowser'); -var invariant = require('fbjs/lib/invariant'); var inputValueTracking = require('inputValueTracking'); +var invariant = require('fbjs/lib/invariant'); +var isCustomComponent = require('isCustomComponent'); +var omittedCloseTags = require('omittedCloseTags'); var validateDOMNesting = require('validateDOMNesting'); +var voidElementTags = require('voidElementTags'); var warning = require('fbjs/lib/warning'); + var didWarnShadyDOM = false; var Flags = ReactDOMComponentFlags; @@ -312,44 +316,12 @@ function postUpdateSelectWrapper() { ReactDOMSelect.postUpdateWrapper(this); } -// For HTML, certain tags should omit their close tag. We keep a whitelist for -// those special-case tags. - -var omittedCloseTags = { - area: true, - base: true, - br: true, - col: true, - embed: true, - hr: true, - img: true, - input: true, - keygen: true, - link: true, - meta: true, - param: true, - source: true, - track: true, - wbr: true, - // NOTE: menuitem's close tag should be omitted, but that causes problems. -}; - var newlineEatingTags = { listing: true, pre: true, textarea: true, }; -// For HTML, certain tags cannot have children. This has the same purpose as -// `omittedCloseTags` except that `menuitem` should still have its closing tag. - -var voidElementTags = Object.assign( - { - menuitem: true, - }, - omittedCloseTags, -); - // We accept any tag to be rendered but since this gets injected into arbitrary // HTML, we want to make sure that it's a safe tag. // http://www.w3.org/TR/REC-xml/#NT-Name @@ -364,10 +336,6 @@ function validateDangerousTag(tag) { } } -function isCustomComponent(tagName, props) { - return tagName.indexOf('-') >= 0 || props.is != null; -} - var globalIdCounter = 1; /**