Server Rendering

[curran]

It would be interesting to support the use case of server-side rendering of the CodeMirror DOM.

I expect this issue to be closed as out of scope, but check this out - I actually got server rendering working in an experiment.

Here's what I had to do in order to get it to work, using JSDOM (full server file):

const dom = new JSDOM(html);   
const document = dom.window.document;
document.getSelection = () => ({}) as Selection;
const globalAny:any = global;  
globalAny.document = document;

// Ideally the stuff below would not be necessary.
globalAny.navigator = {};
globalAny.window = {           
  addEventListener: () => {}
};    
globalAny.MutationObserver = () => ({
  observe: () => {},
  takeRecords: () => {},       
  disconnect: () => {}         
}); 
globalAny.requestAnimationFrame = () => {};
const view = createView();
document.querySelector("#editor").appendChild(view.dom);       

It may be interesting and relatively easy to add a node or jsdom entry to the environments detected in browser.ts, then use that to avoid executing code that's not necessary for just constructing the DOM.

[marijnh]

Interesting, but hydrating such a rendering into a working editor would be a whole different problem. Being able to do this would be cool, but, I think, too much extra complexity to be justified by that coolness. So yeah, this is probably out of scope.

[curran]

The hydration problem can be avoided by clearing out and re-building the DOM once the JS loads, like this (which is how the demo does it):

const editorDiv = document.querySelector('#editor');
editorDiv.innerHTML = '';
editorDiv.appendChild(view.dom);

It's not as fancy as React hydration by a long shot, but it works. For my use case I think this is perfectly acceptable as a hydration solution.

I just had another idea. As an alternative to populating global (which doesn't feel quite right anyway) and detecting the Node environment, what if you could pass in document as an optional argument to the EditorView constructor? Something like this:

const dom = new JSDOM(html);   
const document = dom.window.document;
new EditorView(state, document);

If document is passed in, it can be assumed to be from JSDOM, and its presence can be used as the trigger to avoid executing code that's not necessary for just constructing the DOM.

Food for thought!