Kill last remaining use of `$` in React
It's only used here, so let's just inline this and get rid of the additional module. Also it will make people like this guy happy: https://github.com/facebook/react/issues/900 (of course he might be even more happy if he wasn't using MS TFS....but that's a much bigger diff, and not one I can write...)
Jeff Morrison committed
Jan 15, 2014 at 16:28 UTC
89819de4f2a0eb506251290a72d662186a59d161
3 files changed
+23
-64
src/core/ReactMount.js
+11
-3
@@ -22,7 +22,6 @@ var DOMProperty = require('DOMProperty');
22
var ReactEventEmitter = require('ReactEventEmitter');
23
var ReactInstanceHandles = require('ReactInstanceHandles');
24
25
-var $ = require('$');
25
var containsNode = require('containsNode');
26
var getReactRootElementInContainer = require('getReactRootElementInContainer');
27
var invariant = require('invariant');
@@ -195,7 +194,10 @@ function findDeepestCachedAncestor(targetID) {
194
* representative DOM elements and inserting them into a supplied `container`.
195
* Any prior content inside `container` is destroyed in the process.
196
*
198
- * ReactMount.renderComponent(component, $('container'));
197
+ * ReactMount.renderComponent(
198
+ * component,
199
+ * document.getElementById('container')
200
+ * );
201
*
202
* <div id="container"> <-- Supplied `container`.
203
* <div data-reactid=".r[3]"> <-- Rendered reactRoot of React
@@ -372,7 +374,13 @@ var ReactMount = {
374
* @return {ReactComponent} Component instance rendered in the container node.
375
*/
376
constructAndRenderComponentByID: function(constructor, props, id) {
375
- return ReactMount.constructAndRenderComponent(constructor, props, $(id));
377
+ var domNode = document.getElementById(id);
378
+ invariant(
379
+ domNode,
380
+ 'Tried to get element with id of "%s" but it is not present on the page.',
381
+ id
382
+ );
383
+ return ReactMount.constructAndRenderComponent(constructor, props, domNode);
384
},
385
386
/**
src/core/__tests__/ReactMount-test.js
+12
@@ -25,6 +25,18 @@ describe('ReactMount', function() {
25
var React = require('React');
26
var ReactMount = require('ReactMount');
27
28
+ describe('constructAndRenderComponentByID', function() {
29
+ it('throws if given an id for a component that doesn\'t exist', function() {
30
+ expect(function() {
31
+ ReactMount.constructAndRenderComponentByID(
32
+ function dummyComponentConstructor() {},
33
+ {},
34
+ 'SOME_ID_THAT_DOESNT_EXIST'
35
+ );
36
+ }).toThrow();
37
+ });
38
+ });
39
+
40
it('should render different components in same root', function() {
41
var container = document.createElement('container');
42
document.documentElement.appendChild(container);
src/vendor/core/$.js
deleted
-61
@@ -1,61 +0,0 @@
1
-/**
2
- * Copyright 2013 Facebook, Inc.
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- *
16
- * @providesModule $
17
- * @typechecks
18
- */
19
-
20
-var ex = require('ex');
21
-
22
-/**
23
- * Find a node by ID.
24
- *
25
- * If your application code depends on the existence of the element, use $,
26
- * which will throw if the element doesn't exist.
27
- *
28
- * If you're not sure whether or not the element exists, use ge instead, and
29
- * manually check for the element's existence in your application code.
30
- */
31
-function getRequiredElement(id) {
32
- var element = typeof id === 'string' ? document.getElementById(id) : id;
33
- if (!element) {
34
- throw new Error(ex(
35
- 'Tried to get element with id of "%s" but it is not present on the page.',
36
- id
37
- ));
38
- }
39
- return element;
40
-}
41
-
42
-/**
43
- * Find a node by ID with typechecked input and output.
44
- *
45
- * @param {string|DOMDocument|DOMElement|DOMTextNode|Comment} id
46
- * @return {DOMDocument|DOMElement|DOMTextNode|Comment}
47
- */
48
-function $(id) {
49
- return getRequiredElement(id);
50
-}
51
-
52
-/**
53
- * Find a node by ID without typechecks.
54
- *
55
- * This is micro-optimization for the small subset of users who have typechecks
56
- * enabled. It should only be used by frequently called core modules that are
57
- * already checking their params and return values.
58
- */
59
-$.unsafe = getRequiredElement;
60
-
61
-module.exports = $;