search

patrick-steele-idem / morphdom

Fast and lightweight DOM diffing/patching (no virtual DOM needed)
MIT License
3.16k stars 127 forks source link

Working example using morphdom with marko-vdom? Please? #98

Open willfind opened 7 years ago

willfind commented 7 years ago

We've been trying to get morphdom working with a marko-vdom virtual dom object on the server side, but unfortunately all of our many attempts have failed.

It seems that morphdom is always looking for a global document object. For instance, line 6 of morphdom.js:

var doc = typeof document === 'undefined' ? undefined : document;

But we can't figure out how to make marko-vdom provide such a global document.

Does anyone have a working example of using morphdom successfully with mark-vdom on the server side? We'd really appreciate your help!

patrick-steele-idem commented 7 years ago

hi @willfind, sorry for the confusion, but the marko VDOM implementation has been moved into marko for easier maintenance and optimizations. You can find it here: https://github.com/marko-js/marko/tree/master/runtime/vdom

Here's some other relevant code:

Please don't use the VDOM implementation in Marko directly (it's not a public API), but feel free to use that as a start if you want to build your morphdom-compatible VDOM implementation.

As a side note, morphdom + vdom + marko is extremely fast and our benchmarks show that we are able to out perform libraries such as Inferno, Vue, React and Preact. See: https://github.com/marko-js/isomorphic-ui-benchmarks

With that said, why are you trying to use morphdom on the server?

rmoskal commented 7 years ago

It's not so much that we want marko-vdom to run on the server. It's that we are writing an simple web framework and so far all of our tests have run run in a vanilla mocha, and we'd prefer to keep it that way.

At a certain point, we have markup that must be merged with the dom. While we trust that this will happen in the client, it would be great if we could test our rendering pipeline as realistically as possible without needing to spin up an actual browser.

I've looked through the vdom code and am not quite sure how we can use it to merge some dom nodes.

willfind commented 7 years ago

Thanks so much for your help Patrick! To elaborate a bit on what rmoskal said, in our tests we're trying to create a virtuaDom object and then use morphdom like this:

let morphdom = require('morphdom') morphdom(virtualDom, HTMLtextString)

and have it update that virtualDom object properly to reflect whatever the HTML is in the text string HTMLtextString.

However, as we mentioned, currently this doesn't work for us since morphdom seems to be looking for a global document object which doesn't exist on the server. See for example line 6 of morphdom.js: var doc = typeof document === 'undefined' ? undefined : document

We'd really appreciate any advice you have about how we can use vdom to merge a virtual dom node with html, e.g. as in the example I gave above!

AutoSponge commented 7 years ago

I use jsom for things like this. Here's a minimal setup:

global.document = require('jsdom').jsdom('<body></body>')
global.window = document.defaultView
global.navigator = window.navigator