The browser XML/HTML DOM has 9 interesting kind of nodes in the document:

DOM Class	nodeType	nodeName
Attr	ATTRIBUTE_NODE	this.name
Element	ELEMENT_NODE	this.tagName
Text	TEXT_NODE	"#text"
CDATASection	CDATA_SECTION_NODE	"#cdata-section"
DocumentFragment	DOCUMENT_FRAGMENT_NODE	"#document-fragment"
Comment	COMMENT_NODE	"#comment"
Document	DOCUMENT_NODE	"#document"
DocumentType	DOCUMENT_TYPE_NODE	this.name
ProcessingInstruction	PROCESSING_INSTRUCTION_NODE	this.target

It's useful to be able to render all of these if you use React to server-side render arbitrary XML documents.

Of these, we already have support for five of them:

DOM Constructor	React Constructor	React Signature
document.createAttribute()	key : value	key : value
document.createElement(type)	React.createElement(type, props)	{ type, props }
document.createTextNode(txt)	" "	string or number
document.createCDATASection(txt)	" "	string or number
document.createDocumentFragment()	[ ]	array

We could add support for the final four as well to get complete support:

DOM Constructor	React Constructor	React Signature
document.createComment(data)	React.createComment(data)	{type:'#comment',data}
implementation.createDocument()	React.createDocument(props)	{type:'#document',props}
implementation.createDocumentType (name, publicId, systemId)	React.createDocumentType (name, publicId, systemId)	{type: '#document-type', name,publicId,systemId}
document. createProcessingInstruction (target, content)	React. createProcessingInstruction (target, content)	{ target, content }

The nodeName of a comment is #comment but it not valid to create it using document.createElement('#comment'). You have to use document.createComment(). That's why I think it should use React.createComment() as the API. It also is a different signature. It accepts only a string "data" field rather than a complete props object.

React.createDocument is useful in combination with React.createDocumentType to create a document type as well as the rest.

React.renderToString(
  React.createDocument({
    children: [
      React.createDocumentType('html', '', ''),
      React.createProcessingInstruction('access-control', 'allow="*.example.com"'),
      React.createComment('Hello this is a secret message for view-source'),
      React.createElement('html', ...)
    ]
  })
)

React.createComment() would be nice #2810

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions