Examples look like nodejs code, but they are browser dependent about morphdom HOT 14 CLOSED

Try using raynos/global to render in Node:

var morphdom = require('morphdom');
var document = require('global/document')

var el1 = document.createElement('div');
el1.className = 'foo';
el1.innerHTML = 'Hello John';

morphdom(el1, '<div class="bar">Hello Frank</div>');

expect(el1.className).to.equal('bar');
expect(el1.innerHTML).to.equal('Hello Frank');

from morphdom.

Thanks but at least in the REPL it does not work

morphdom(el1, '

Hello Frank

');
TypeError: Cannot read property 'nodeType' of undefined
at morphdom (/.../node_modules/morphdom/lib/index.js:387:28)
at repl:1:1
at REPLServer.defaultEval (repl.js:272:27)

from morphdom.

I put it in a script and still no luck

/.../node_modules/morphdom/lib/index.js:29
if (!range && document.createRange) {
^

ReferenceError: document is not defined
at toElement (/.../node_modules/morphdom/lib/index.js:29:19)

from morphdom.

My motivation is patching html on the server. Example finding an element by css selector say and then modifying it, morph it. There is an interesting project html-element, but I didn't get far with it running into issues. Thanks again

from morphdom.

You probably want to use jsdom. It's how I run my tests for my morphdom projects.

from morphdom.

@AddictArts if you want to patch HTML on the server consider using hyperstream; unless it's for a one-off CLI tool I'd evade doing too much dynamic stuff when building servers tho, it will definitely impact perf

from morphdom.

@AutoSponge that is what I tried first and it doesn't work. I don't remember the error, but I had hoped that would work.

@yoshuawuyts thanks, I'll have a look. My purpose was CLI

from morphdom.

@AddictArts If you provide an error msg, or gist I'll try to help

from morphdom.

Thanks @AutoSponge I tried again to see an error, but things worked this time. I did the following.

$ node
> let jsdom = require('jsdom')
> let morphdom = require('morphdom')
> let window = jsdom.jsdom().defaultView
> let document = window.document
> var el1 = document.createElement('div')
> el1.className = 'foo'
'foo'
> var el2 = document.createElement('div');
> el2.className = 'bar'
'bar'
> morphdom(el1, el2)
HTMLDivElement {}
> el1.className
'bar'

So, I think I had started this issue because the README makes it look like you should be able to copy and past into a node REPL and that is not true. While the examples in the README.md use nodejs require() they are not complete. As above I show you need jsdom. It would be nice if the examples were split for browser and nodejs. Essentially how to use it either case.

from morphdom.

@AddictArts, I considered making a morphdom REPL but then would have to accommodate every flavor of HTML generation. So, instead, I published a tonicdev example. Would you find it helpful to have more examples like this?

from morphdom.

Running morphdom on the server should be supported if you can simulate the browser environment. Closing issue because I don't think there are any changes required to morphdom, but please let me know if you still have questions or thoughts.

from morphdom.

Thanks @AutoSponge. Sorry for the belated reply. It is not a change to morphdom I was after. It is more that the README.md implies a nodejs environment "var morphdom = require('morphdom');", which mislead me. I was thinking some explanation or the example you made would clear things up. I also think morphdom could recognize the "! browser environment" and let the user know with a friendly warning.

from morphdom.

@AddictArts if you include the universal module definition version of morphdom then a global morphdom variable will be created: https://github.com/patrick-steele-idem/morphdom/blob/master/dist/morphdom-umd.js

<script type="text/javascript" src="https://npmcdn.com/morphdom/dist/morphdom-umd.min.js"></script>
<script>
window.morphdom(fromEl, toEl);
</script>

Do you think we need to provide docs for the usage of the UMD distribution?

from morphdom.

@patrick-steele-idem yes, thanks. I think that would help. Looking at "Usage" it implies a build process such as browserify or webpack right? unless I missed something in the README.md. When I encountered morphdom I thought it was nodejs ready, my mistake.

from morphdom.