From 8f1657bba618846b7a111a2caee855bf59145c5a Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Tue, 7 Oct 2014 13:41:51 -0700 Subject: [PATCH] Renamed Descriptor -> Element We've decided on a new naming convention for ReactDescriptor. It's now called ReactElement, which is a subset of the ReactNode union type. --- src/browser/ReactDOM.js | 16 +-- src/browser/ReactTextComponent.js | 4 +- src/browser/__tests__/ReactDOM-test.js | 8 +- src/browser/server/ReactServerRendering.js | 6 +- src/browser/ui/React.js | 30 ++-- src/browser/ui/ReactDOMComponent.js | 26 ++-- src/browser/ui/ReactMount.js | 36 ++--- .../ui/__tests__/ReactDOMComponent-test.js | 4 +- src/browser/ui/__tests__/ReactMount-test.js | 4 +- .../ui/dom/components/ReactDOMButton.js | 4 +- src/browser/ui/dom/components/ReactDOMForm.js | 4 +- src/browser/ui/dom/components/ReactDOMImg.js | 4 +- .../ui/dom/components/ReactDOMInput.js | 4 +- .../ui/dom/components/ReactDOMOption.js | 4 +- .../ui/dom/components/ReactDOMSelect.js | 4 +- .../ui/dom/components/ReactDOMTextarea.js | 4 +- .../dom/components/createFullPageComponent.js | 4 +- src/core/ReactComponent.js | 100 ++++++------- src/core/ReactCompositeComponent.js | 100 ++++++------- .../{ReactDescriptor.js => ReactElement.js} | 58 ++++---- ...rValidator.js => ReactElementValidator.js} | 34 ++--- src/core/ReactEmptyComponent.js | 4 +- ...acyDescriptor.js => ReactLegacyElement.js} | 42 +++--- src/core/ReactMultiChild.js | 10 +- src/core/ReactPropTransferer.js | 20 +-- src/core/ReactPropTypes.js | 6 +- src/core/__tests__/ReactComponent-test.js | 4 +- .../__tests__/ReactComponentLifeCycle-test.js | 8 +- .../__tests__/ReactCompositeComponent-test.js | 2 +- src/core/__tests__/ReactDescriptor-test.js | 134 +++++++++--------- src/core/instantiateReactComponent.js | 45 +++--- src/core/shouldUpdateReactComponent.js | 18 +-- src/test/ReactTestUtils.js | 22 +-- src/test/reactComponentExpect.js | 6 +- src/utils/cloneWithProps.js | 6 +- src/utils/onlyChild.js | 4 +- src/utils/traverseAllChildren.js | 4 +- 37 files changed, 396 insertions(+), 397 deletions(-) rename src/core/{ReactDescriptor.js => ReactElement.js} (77%) rename src/core/{ReactDescriptorValidator.js => ReactElementValidator.js} (90%) rename src/core/{ReactLegacyDescriptor.js => ReactLegacyElement.js} (84%) diff --git a/src/browser/ReactDOM.js b/src/browser/ReactDOM.js index 9d88b7eb62..280ad76a75 100644 --- a/src/browser/ReactDOM.js +++ b/src/browser/ReactDOM.js @@ -19,26 +19,26 @@ "use strict"; -var ReactDescriptor = require('ReactDescriptor'); -var ReactDescriptorValidator = require('ReactDescriptorValidator'); -var ReactLegacyDescriptor = require('ReactLegacyDescriptor'); +var ReactElement = require('ReactElement'); +var ReactElementValidator = require('ReactElementValidator'); +var ReactLegacyElement = require('ReactLegacyElement'); var mapObject = require('mapObject'); /** - * Create a factory that creates HTML tag descriptors. + * Create a factory that creates HTML tag elements. * * @param {string} tag Tag name (e.g. `div`). * @private */ function createDOMFactory(tag) { if (__DEV__) { - return ReactLegacyDescriptor.markNonLegacyFactory( - ReactDescriptorValidator.createFactory(tag) + return ReactLegacyElement.markNonLegacyFactory( + ReactElementValidator.createFactory(tag) ); } - return ReactLegacyDescriptor.markNonLegacyFactory( - ReactDescriptor.createFactory(tag) + return ReactLegacyElement.markNonLegacyFactory( + ReactElement.createFactory(tag) ); } diff --git a/src/browser/ReactTextComponent.js b/src/browser/ReactTextComponent.js index ce4222c51f..25cdd6e1bf 100644 --- a/src/browser/ReactTextComponent.js +++ b/src/browser/ReactTextComponent.js @@ -22,7 +22,7 @@ var DOMPropertyOperations = require('DOMPropertyOperations'); var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin'); var ReactComponent = require('ReactComponent'); -var ReactDescriptor = require('ReactDescriptor'); +var ReactElement = require('ReactElement'); var escapeTextForBrowser = require('escapeTextForBrowser'); var mixInto = require('mixInto'); @@ -105,7 +105,7 @@ mixInto(ReactTextComponent, { var ReactTextComponentFactory = function(text) { // Bypass validation and configuration - return new ReactDescriptor(ReactTextComponent, null, null, null, null, text); + return new ReactElement(ReactTextComponent, null, null, null, null, text); }; ReactTextComponentFactory.type = ReactTextComponent; diff --git a/src/browser/__tests__/ReactDOM-test.js b/src/browser/__tests__/ReactDOM-test.js index aa3458ef41..b0cc1e9a52 100644 --- a/src/browser/__tests__/ReactDOM-test.js +++ b/src/browser/__tests__/ReactDOM-test.js @@ -122,8 +122,8 @@ describe('ReactDOM', function() { it('allow React.DOM factories to be called without warnings', function() { spyOn(console, 'warn'); - var descriptor = React.DOM.div(); - expect(descriptor.type).toBe('div'); + var element = React.DOM.div(); + expect(element.type).toBe('div'); expect(console.warn.argsForCall.length).toBe(0); }); @@ -139,8 +139,8 @@ describe('ReactDOM', function() { it('warns but allow dom factories to be used in createElement', function() { spyOn(console, 'warn'); - var descriptor = React.createElement(React.DOM.div); - expect(descriptor.type).toBe('div'); + var element = React.createElement(React.DOM.div); + expect(element.type).toBe('div'); expect(console.warn.argsForCall.length).toBe(1); expect(console.warn.argsForCall[0][0]).toContain( 'Do not pass React.DOM.div' diff --git a/src/browser/server/ReactServerRendering.js b/src/browser/server/ReactServerRendering.js index d0beb51d41..5c07694263 100644 --- a/src/browser/server/ReactServerRendering.js +++ b/src/browser/server/ReactServerRendering.js @@ -18,7 +18,7 @@ */ "use strict"; -var ReactDescriptor = require('ReactDescriptor'); +var ReactElement = require('ReactElement'); var ReactInstanceHandles = require('ReactInstanceHandles'); var ReactMarkupChecksum = require('ReactMarkupChecksum'); var ReactServerRenderingTransaction = @@ -33,7 +33,7 @@ var invariant = require('invariant'); */ function renderComponentToString(component) { invariant( - ReactDescriptor.isValidDescriptor(component), + ReactElement.isValidElement(component), 'renderComponentToString(): You must pass a valid ReactComponent.' ); @@ -65,7 +65,7 @@ function renderComponentToString(component) { */ function renderComponentToStaticMarkup(component) { invariant( - ReactDescriptor.isValidDescriptor(component), + ReactElement.isValidElement(component), 'renderComponentToStaticMarkup(): You must pass a valid ReactComponent.' ); diff --git a/src/browser/ui/React.js b/src/browser/ui/React.js index e0d6c9bad4..bcf2b38f27 100644 --- a/src/browser/ui/React.js +++ b/src/browser/ui/React.js @@ -29,13 +29,13 @@ var ReactComponent = require('ReactComponent'); var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactContext = require('ReactContext'); var ReactCurrentOwner = require('ReactCurrentOwner'); -var ReactDescriptor = require('ReactDescriptor'); -var ReactDescriptorValidator = require('ReactDescriptorValidator'); +var ReactElement = require('ReactElement'); +var ReactElementValidator = require('ReactElementValidator'); var ReactDOM = require('ReactDOM'); var ReactDOMComponent = require('ReactDOMComponent'); var ReactDefaultInjection = require('ReactDefaultInjection'); var ReactInstanceHandles = require('ReactInstanceHandles'); -var ReactLegacyDescriptor = require('ReactLegacyDescriptor'); +var ReactLegacyElement = require('ReactLegacyElement'); var ReactMount = require('ReactMount'); var ReactMultiChild = require('ReactMultiChild'); var ReactPerf = require('ReactPerf'); @@ -47,19 +47,19 @@ var onlyChild = require('onlyChild'); ReactDefaultInjection.inject(); -var createDescriptor = ReactDescriptor.createDescriptor; -var createFactory = ReactDescriptor.createFactory; +var createElement = ReactElement.createElement; +var createFactory = ReactElement.createFactory; if (__DEV__) { - createDescriptor = ReactDescriptorValidator.createDescriptor; - createFactory = ReactDescriptorValidator.createFactory; + createElement = ReactElementValidator.createElement; + createFactory = ReactElementValidator.createFactory; } -// TODO: Drop legacy descriptors once classes no longer export these factories -createDescriptor = ReactLegacyDescriptor.wrapCreateDescriptor( - createDescriptor +// TODO: Drop legacy elements once classes no longer export these factories +createElement = ReactLegacyElement.wrapCreateElement( + createElement ); -createFactory = ReactLegacyDescriptor.wrapCreateFactory( +createFactory = ReactLegacyElement.wrapCreateFactory( createFactory ); @@ -76,8 +76,8 @@ var React = { EventPluginUtils.useTouchEvents = shouldUseTouch; }, createClass: ReactCompositeComponent.createClass, - createDescriptor: createDescriptor, // deprecated, will be removed next week - createElement: createDescriptor, + createDescriptor: createElement, // deprecated, will be removed next week + createElement: createElement, createFactory: createFactory, constructAndRenderComponent: ReactMount.constructAndRenderComponent, constructAndRenderComponentByID: ReactMount.constructAndRenderComponentByID, @@ -90,8 +90,8 @@ var React = { renderComponentToStaticMarkup: ReactServerRendering.renderComponentToStaticMarkup, unmountComponentAtNode: ReactMount.unmountComponentAtNode, - isValidClass: ReactLegacyDescriptor.isValidFactory, - isValidComponent: ReactDescriptor.isValidDescriptor, + isValidClass: ReactLegacyElement.isValidFactory, + isValidComponent: ReactElement.isValidElement, withContext: ReactContext.withContext, __internals: { Component: ReactComponent, diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js index 3436e4c979..cbbe776d3d 100644 --- a/src/browser/ui/ReactDOMComponent.js +++ b/src/browser/ui/ReactDOMComponent.js @@ -260,22 +260,22 @@ ReactDOMComponent.Mixin = { return ''; }, - receiveComponent: function(nextDescriptor, transaction) { - if (nextDescriptor === this._descriptor && - nextDescriptor._owner != null) { - // Since descriptors are immutable after the owner is rendered, + receiveComponent: function(nextElement, transaction) { + if (nextElement === this._currentElement && + nextElement._owner != null) { + // Since elements are immutable after the owner is rendered, // we can do a cheap identity compare here to determine if this is a // superfluous reconcile. It's possible for state to be mutable but such // change should trigger an update of the owner which would recreate - // the descriptor. We explicitly check for the existence of an owner since - // it's possible for a descriptor created outside a composite to be + // the element. We explicitly check for the existence of an owner since + // it's possible for a element created outside a composite to be // deeply mutated and reused. return; } ReactComponent.Mixin.receiveComponent.call( this, - nextDescriptor, + nextElement, transaction ); }, @@ -285,22 +285,22 @@ ReactDOMComponent.Mixin = { * attached to the DOM. Reconciles the root DOM node, then recurses. * * @param {ReactReconcileTransaction} transaction - * @param {ReactDescriptor} prevDescriptor + * @param {ReactElement} prevElement * @internal * @overridable */ updateComponent: ReactPerf.measure( 'ReactDOMComponent', 'updateComponent', - function(transaction, prevDescriptor) { - assertValidProps(this._descriptor.props); + function(transaction, prevElement) { + assertValidProps(this._currentElement.props); ReactComponent.Mixin.updateComponent.call( this, transaction, - prevDescriptor + prevElement ); - this._updateDOMProperties(prevDescriptor.props, transaction); - this._updateDOMChildren(prevDescriptor.props, transaction); + this._updateDOMProperties(prevElement.props, transaction); + this._updateDOMChildren(prevElement.props, transaction); } ), diff --git a/src/browser/ui/ReactMount.js b/src/browser/ui/ReactMount.js index a5acf90134..a0dc478d12 100644 --- a/src/browser/ui/ReactMount.js +++ b/src/browser/ui/ReactMount.js @@ -21,8 +21,8 @@ var DOMProperty = require('DOMProperty'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); var ReactCurrentOwner = require('ReactCurrentOwner'); -var ReactDescriptor = require('ReactDescriptor'); -var ReactLegacyDescriptor = require('ReactLegacyDescriptor'); +var ReactElement = require('ReactElement'); +var ReactLegacyElement = require('ReactLegacyElement'); var ReactInstanceHandles = require('ReactInstanceHandles'); var ReactPerf = require('ReactPerf'); @@ -33,8 +33,8 @@ var invariant = require('invariant'); var shouldUpdateReactComponent = require('shouldUpdateReactComponent'); var warning = require('warning'); -var createDescriptor = ReactLegacyDescriptor.wrapCreateDescriptor( - ReactDescriptor.createDescriptor +var createElement = ReactLegacyElement.wrapCreateElement( + ReactElement.createElement ); var SEPARATOR = ReactInstanceHandles.SEPARATOR; @@ -335,24 +335,24 @@ var ReactMount = { * perform an update on it and only mutate the DOM as necessary to reflect the * latest React component. * - * @param {ReactDescriptor} nextDescriptor Component descriptor to render. + * @param {ReactElement} nextElement Component element to render. * @param {DOMElement} container DOM element to render into. * @param {?function} callback function triggered on completion * @return {ReactComponent} Component instance rendered in `container`. */ - renderComponent: function(nextDescriptor, container, callback) { + renderComponent: function(nextElement, container, callback) { invariant( - ReactDescriptor.isValidDescriptor(nextDescriptor), - 'renderComponent(): Invalid component descriptor.%s', + ReactElement.isValidElement(nextElement), + 'renderComponent(): Invalid component element.%s', ( - typeof nextDescriptor === 'string' ? + typeof nextElement === 'string' ? ' Instead of passing an element string, make sure to instantiate ' + 'it by passing it to React.createElement.' : - ReactLegacyDescriptor.isValidFactory(nextDescriptor) ? + ReactLegacyElement.isValidFactory(nextElement) ? ' Instead of passing a component class, make sure to instantiate ' + 'it by passing it to React.createElement.' : - // Check if it quacks like a descriptor - typeof nextDescriptor.props !== "undefined" ? + // Check if it quacks like a element + typeof nextElement.props !== "undefined" ? ' This may be caused by unintentionally loading two independent ' + 'copies of React.' : '' @@ -362,11 +362,11 @@ var ReactMount = { var prevComponent = instancesByReactRootID[getReactRootID(container)]; if (prevComponent) { - var prevDescriptor = prevComponent._descriptor; - if (shouldUpdateReactComponent(prevDescriptor, nextDescriptor)) { + var prevElement = prevComponent._currentElement; + if (shouldUpdateReactComponent(prevElement, nextElement)) { return ReactMount._updateRootComponent( prevComponent, - nextDescriptor, + nextElement, container, callback ); @@ -382,7 +382,7 @@ var ReactMount = { var shouldReuseMarkup = containerHasReactMarkup && !prevComponent; var component = ReactMount._renderNewRootComponent( - nextDescriptor, + nextElement, container, shouldReuseMarkup ); @@ -400,8 +400,8 @@ var ReactMount = { * @return {ReactComponent} Component instance rendered in `container`. */ constructAndRenderComponent: function(constructor, props, container) { - var descriptor = createDescriptor(constructor, props); - return ReactMount.renderComponent(descriptor, container); + var element = createElement(constructor, props); + return ReactMount.renderComponent(element, container); }, /** diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js index 8eb0e105a6..3da6798f7a 100644 --- a/src/browser/ui/__tests__/ReactDOMComponent-test.js +++ b/src/browser/ui/__tests__/ReactDOMComponent-test.js @@ -318,8 +318,8 @@ describe('ReactDOMComponent', function() { var ReactDOMComponent = require('ReactDOMComponent'); var ReactReconcileTransaction = require('ReactReconcileTransaction'); - var StubNativeComponent = function(descriptor) { - ReactComponent.Mixin.construct.call(this, descriptor); + var StubNativeComponent = function(element) { + ReactComponent.Mixin.construct.call(this, element); }; mixInto(StubNativeComponent, ReactComponent.Mixin); mixInto(StubNativeComponent, ReactDOMComponent.Mixin); diff --git a/src/browser/ui/__tests__/ReactMount-test.js b/src/browser/ui/__tests__/ReactMount-test.js index 2b5fa5cd09..473c87672c 100644 --- a/src/browser/ui/__tests__/ReactMount-test.js +++ b/src/browser/ui/__tests__/ReactMount-test.js @@ -42,7 +42,7 @@ describe('ReactMount', function() { expect(function() { ReactTestUtils.renderIntoDocument('div'); }).toThrow( - 'Invariant Violation: renderComponent(): Invalid component descriptor. ' + + 'Invariant Violation: renderComponent(): Invalid component element. ' + 'Instead of passing an element string, make sure to instantiate it ' + 'by passing it to React.createElement.' ); @@ -57,7 +57,7 @@ describe('ReactMount', function() { expect(function() { ReactTestUtils.renderIntoDocument(Component); }).toThrow( - 'Invariant Violation: renderComponent(): Invalid component descriptor. ' + + 'Invariant Violation: renderComponent(): Invalid component element. ' + 'Instead of passing a component class, make sure to instantiate it ' + 'by passing it to React.createElement.' ); diff --git a/src/browser/ui/dom/components/ReactDOMButton.js b/src/browser/ui/dom/components/ReactDOMButton.js index d9c07a78db..bce5ea584b 100644 --- a/src/browser/ui/dom/components/ReactDOMButton.js +++ b/src/browser/ui/dom/components/ReactDOMButton.js @@ -21,13 +21,13 @@ var AutoFocusMixin = require('AutoFocusMixin'); var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin'); var ReactCompositeComponent = require('ReactCompositeComponent'); -var ReactDescriptor = require('ReactDescriptor'); +var ReactElement = require('ReactElement'); var ReactDOM = require('ReactDOM'); var keyMirror = require('keyMirror'); // Store a reference to the