Comments (14)
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.
Related Issues (20)
- Replacing multiple independent DOM items
- examples don't work in macOS Chrome or Safari
- Input type change breaks value change
- onAfterChanges option (or something similar) HOT 7
- Allow to provide custom morphAttrs function
- Morphing page with a lot (1000 or so) FORM tags is slow
- Leverage the DocumentFragment API?
- Cannot read properties of null (reading 'nodeName')
- Is this project discontinued? HOT 1
- getNodeKey with text nodes isn't supported?
- Add style attribute condition for compat with CSP: unsafe-inline style
- Could we introduce a jsconfig.json
- documentation: add how to use it with HTML streaming
- Breaks on funny/broken HTML
- Morphdom Support for Template Elements
- export morphAttrs
- morphAttrs should handle only elements
- bug: when a document fragment is passed as toNode only the first child is used
- Testing morphdom with jsdom is tricky. HOT 2
- Outdated docs on `getNodeKey`?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from morphdom.