Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable rendering into shadow roots #1167

Closed
wants to merge 2 commits into from
Closed

Enable rendering into shadow roots #1167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4526d26
Enable rendering into shadow roots
Feb 24, 2014
47004da
Extract DOM node types
Feb 24, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions src/browser/ReactComponentBrowserEnvironment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

"use strict";

var DOMNodeTypes = require('DOMNodeTypes');
var ReactDOMIDOperations = require('ReactDOMIDOperations');
var ReactMarkupChecksum = require('ReactMarkupChecksum');
var ReactMount = require('ReactMount');
Expand All @@ -30,10 +31,6 @@ var getReactRootElementInContainer = require('getReactRootElementInContainer');
var invariant = require('invariant');


var ELEMENT_NODE_TYPE = 1;
var DOC_NODE_TYPE = 9;


/**
* Abstracts away all functionality of `ReactComponent` requires knowledge of
* the browser context.
Expand Down Expand Up @@ -66,8 +63,9 @@ var ReactComponentBrowserEnvironment = {
function(markup, container, shouldReuseMarkup) {
invariant(
container && (
container.nodeType === ELEMENT_NODE_TYPE ||
container.nodeType === DOC_NODE_TYPE
container.nodeType === DOMNodeTypes.ELEMENT ||
container.nodeType === DOMNodeTypes.DOC ||
container.nodeType === DOMNodeTypes.SHADOW_ROOT
),
'mountComponentIntoNode(...): Target container is not valid.'
);
Expand All @@ -79,7 +77,7 @@ var ReactComponentBrowserEnvironment = {
return;
} else {
invariant(
container.nodeType !== DOC_NODE_TYPE,
container.nodeType !== DOMNodeTypes.DOC,
'You\'re trying to render a component to the document using ' +
'server rendering but the checksum was invalid. This usually ' +
'means you rendered a different component type or props on ' +
Expand All @@ -106,7 +104,7 @@ var ReactComponentBrowserEnvironment = {
}

invariant(
container.nodeType !== DOC_NODE_TYPE,
container.nodeType !== DOMNodeTypes.DOC,
'You\'re trying to render a component to the document but ' +
'you didn\'t use server rendering. We can\'t do this ' +
'without using server rendering due to cross-browser quirks. ' +
Expand Down
5 changes: 2 additions & 3 deletions src/browser/ReactDOMComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"use strict";

var CSSPropertyOperations = require('CSSPropertyOperations');
var DOMNodeTypes = require('DOMNodeTypes');
var DOMProperty = require('DOMProperty');
var DOMPropertyOperations = require('DOMPropertyOperations');
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
Expand All @@ -44,8 +45,6 @@ var CONTENT_TYPES = {'string': true, 'number': true};

var STYLE = keyOf({style: null});

var ELEMENT_NODE_TYPE = 1;

/**
* @param {?object} props
*/
Expand All @@ -68,7 +67,7 @@ function assertValidProps(props) {
function putListener(id, registrationName, listener, transaction) {
var container = ReactMount.findReactContainerForID(id);
if (container) {
var doc = container.nodeType === ELEMENT_NODE_TYPE ?
var doc = container.nodeType === DOMNodeTypes.ELEMENT ?
container.ownerDocument :
container;
listenTo(registrationName, doc);
Expand Down
11 changes: 5 additions & 6 deletions src/browser/ReactMount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

"use strict";

var DOMNodeTypes = require('DOMNodeTypes');
var DOMProperty = require('DOMProperty');
var ReactEventEmitter = require('ReactEventEmitter');
var ReactInstanceHandles = require('ReactInstanceHandles');
Expand All @@ -33,9 +34,6 @@ var SEPARATOR = ReactInstanceHandles.SEPARATOR;
var ATTR_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
var nodeCache = {};

var ELEMENT_NODE_TYPE = 1;
var DOC_NODE_TYPE = 9;

/** Mapping from reactRootID to React component instance. */
var instancesByReactRootID = {};

Expand Down Expand Up @@ -269,8 +267,9 @@ var ReactMount = {
_registerComponent: function(nextComponent, container) {
invariant(
container && (
container.nodeType === ELEMENT_NODE_TYPE ||
container.nodeType === DOC_NODE_TYPE
container.nodeType === DOMNodeTypes.ELEMENT ||
container.nodeType === DOMNodeTypes.DOC ||
container.nodeType === DOMNodeTypes.SHADOW_ROOT
),
'_registerComponent(...): Target container is not a DOM element.'
);
Expand Down Expand Up @@ -444,7 +443,7 @@ var ReactMount = {
unmountComponentFromNode: function(instance, container) {
instance.unmountComponent();

if (container.nodeType === DOC_NODE_TYPE) {
if (container.nodeType === DOMNodeTypes.DOC) {
container = container.documentElement;
}

Expand Down
36 changes: 36 additions & 0 deletions src/browser/dom/DOMNodeTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* Copyright 2013-2014 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @providesModule DOMNodeTypes
* @typechecks static-only
*/

/*jslint evil: true */

"use strict";

/**
* A collection of `nodeType` values.
*
* @type {object}
* @internal
*/
var DOMNodeTypes = {
ELEMENT: 1,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you grep nodeType through React codebase, there are a couple of other places where for example TEXT_NODE is hardcoded as 3, don't know if those should be included too (some of those may be vendored in) or perhaps in another pull request.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just use Node.ELEMENT_NODE and the likes? Probably all the places where you want to check for nodeType already access DOM so it should be safe? See https://github.com/facebook/react/pull/423/files#r7112182 for the previous discussion on the matter

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andreypopp Not all browsers we support has Node.ELEMENT_NODE, etc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@syranide right... IE8...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andreypopp Related: #893

DOC: 9,
SHADOW_ROOT: 11
};

module.exports = DOMNodeTypes;
4 changes: 2 additions & 2 deletions src/browser/getReactRootElementInContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

"use strict";

var DOC_NODE_TYPE = 9;
var DOMNodeTypes = require('DOMNodeTypes');

/**
* @param {DOMElement|DOMDocument} container DOM element that may contain
Expand All @@ -30,7 +30,7 @@ function getReactRootElementInContainer(container) {
return null;
}

if (container.nodeType === DOC_NODE_TYPE) {
if (container.nodeType === DOMNodeTypes.DOC) {
return container.documentElement;
} else {
return container.firstChild;
Expand Down
5 changes: 2 additions & 3 deletions src/browser/putDOMComponentListener.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,16 @@

"use strict";

var DOMNodeTypes = require('DOMNodeTypes');
var ReactEventEmitter = require('ReactEventEmitter');
var ReactMount = require('ReactMount');

var listenTo = ReactEventEmitter.listenTo;

var ELEMENT_NODE_TYPE = 1;

function putDOMComponentListener(id, registrationName, listener) {
var container = ReactMount.findReactContainerForID(id);
if (container) {
var doc = container.nodeType === ELEMENT_NODE_TYPE ?
var doc = container.nodeType === DOMNodeTypes.ELEMENT ?
container.ownerDocument :
container;
listenTo(registrationName, doc);
Expand Down