Render <noscript> contents to string

src/browser/ReactDOM.js

@@ -127,7 +127,7 @@ var ReactDOM = mapObject({
   meta: true,
   meter: false,
   nav: false,
-  noscript: false,
+  noscript: false, // NOTE: Injected, see `ReactDOMNoScript`.
   object: false,
   ol: false,
   optgroup: false,

src/browser/ui/ReactDefaultInjection.js

@@ -39,6 +39,7 @@ var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMForm = require('ReactDOMForm');
 var ReactDOMImg = require('ReactDOMImg');
 var ReactDOMInput = require('ReactDOMInput');
+var ReactDOMNoScript = require('ReactDOMNoScript');
 var ReactDOMOption = require('ReactDOMOption');
 var ReactDOMSelect = require('ReactDOMSelect');
 var ReactDOMTextarea = require('ReactDOMTextarea');
@@ -84,6 +85,7 @@ function inject() {
     form: ReactDOMForm,
     img: ReactDOMImg,
     input: ReactDOMInput,
+    noscript: ReactDOMNoScript,
     option: ReactDOMOption,
     select: ReactDOMSelect,
     textarea: ReactDOMTextarea,

src/browser/ui/dom/components/ReactDOMNoScript.js

@@ -0,0 +1,72 @@
+/**
+ * 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 ReactDOMNoScript
+ */
+
+"use strict";
+
+var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
+var ReactChildren = require('ReactChildren');
+var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDOM = require('ReactDOM');
+var ReactServerRendering = require('ReactServerRendering');
+
+var invariant = require ('invariant');
+var merge = require('merge');
+
+// Store a reference to the <noscript> `ReactDOMComponent`.
+var noscript = ReactDOM.noscript;
+
+/**
+ * Implements a <noscript> native component that renders its children as a
+ * (static markup) string. This allows you to nest your components in a
+ * <noscript> for server-side rendering without causing reconciliation problems
+ * for the browser (where they would be seen as a string anyway).
+ */
+var ReactDOMNoScript = ReactCompositeComponent.createClass({
+  displayName: 'ReactDOMNoScript',
+  tagName: 'NOSCRIPT',
+
+  mixins: [ReactBrowserComponentMixin],
+
+  render: function() {
+    var props = this.props;
+
+    // Note the use of `==` which checks for null or undefined.
+    invariant(
+      props.children == null || props.dangerouslySetInnerHTML == null,
+      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
+    );
+
+    if (props.children != null) {
+      // Clone `this.props` so we don't mutate the input.
+      props = merge(props);
+
+      var serializedChildren = [];
+      ReactChildren.forEach(this.props.children, function(child) {
+        serializedChildren.push(
+          ReactServerRendering.renderComponentToStaticMarkup(child)
+        );
+      });
+      props.children = null;
+      props.dangerouslySetInnerHTML = {__html: serializedChildren.join('')};
+    }
+
+    return noscript(props);
+  }
+});
+
+module.exports = ReactDOMNoScript;

src/browser/ui/dom/components/__tests__/ReactDOMNoScript-test.js

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ *
+ * @jsx React.DOM
+ * @emails react-core
+ */
+
+"use strict";
+
+/*jshint evil:true */
+
+describe('ReactDOMNoScript', function() {
+  var React;
+  var ReactTestUtils;
+
+  beforeEach(function() {
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it('should contain static markup', function() {
+    var noscript = <noscript><span>one<span>two</span></span></noscript>;
+    var html = React.renderComponentToString(noscript);
+    expect(html).toContain('<span>one<span>two</span></span>');
+  });
+
+  it('should serialize all children', function() {
+    var noscript = <noscript><span>one</span><span>two</span></noscript>;
+    var html = React.renderComponentToString(noscript);
+    expect(html).toContain('<span>one</span><span>two</span>');
+  });
+
+  it('should error if you pass children and dangerouslySetInnerHTML', function() {
+    expect(function() {
+      React.renderComponentToString(
+        <noscript dangerouslySetInnerHTML={{__html:'hi'}}>hello</noscript>
+      );
+    }).toThrow(
+      'Invariant Violation: ' +
+      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
+    );
+  });
+
+  it('should be rendered into the DOM with a single text node child', function() {
+    var container = document.createElement('div');
+    var instance = <noscript><span>one</span><span>two</span></noscript>;
+
+    instance = React.renderComponent(instance, container);
+
+    expect(instance.getDOMNode().childNodes.length).toBe(1);
+    expect(instance.getDOMNode().childNodes[0].nodeType).toBe(3);
+  });
+});