JSDOM Support in the Browser? #245

Closed
Marak opened this Issue Jul 10, 2011 · 42 comments

Comments

Projects
None yet
@Marak
Contributor

Marak commented Jul 10, 2011

It occurs to me it might make sense to port JSDOM to the browser so we can have the same DOM like APIs when interacting with HTML on the browser.

I've been reading up on the browserify library. I think it might be useful in getting JSDOM working in the browser. https://github.com/substack/node-browserify

@substack do you have any idea on how to pull this off? could be really powerful...

@substack

This comment has been minimized.

Show comment
Hide comment
@substack

substack Jul 10, 2011

Well there are no C bindings so it should be theoretically possible, in theory.

Well there are no C bindings so it should be theoretically possible, in theory.

@hxoht

This comment has been minimized.

Show comment
Hide comment
@hxoht

hxoht Jul 10, 2011

it would certainly be interesting to try this, perhaps porting some C bindings to javascript would help...

hxoht commented Jul 10, 2011

it would certainly be interesting to try this, perhaps porting some C bindings to javascript would help...

@jfhbrook

This comment has been minimized.

Show comment
Hide comment
@jfhbrook

jfhbrook Jul 10, 2011

I gave it a shot, I thought this gist might come in handy.

I gave it a shot, I thought this gist might come in handy.

@dominictarr

This comment has been minimized.

Show comment
Hide comment
@dominictarr

dominictarr Jul 10, 2011

what, no C bindings?

reimplement in C (for performance) and then run in browser with this: http://bellard.org/jslinux/

hang on, ill post this as a separate issue.

what, no C bindings?

reimplement in C (for performance) and then run in browser with this: http://bellard.org/jslinux/

hang on, ill post this as a separate issue.

@tmpvar

This comment has been minimized.

Show comment
Hide comment
@tmpvar

tmpvar Jul 11, 2011

Collaborator

@Marak, is there a use case for this beyond webworkers?

Collaborator

tmpvar commented Jul 11, 2011

@Marak, is there a use case for this beyond webworkers?

@Marak

This comment has been minimized.

Show comment
Hide comment
@Marak

Marak Jul 11, 2011

Contributor

I just think that the browser could really benefit from having a DOM.

Contributor

Marak commented Jul 11, 2011

I just think that the browser could really benefit from having a DOM.

@tmpvar

This comment has been minimized.

Show comment
Hide comment
@tmpvar

tmpvar Jul 11, 2011

Collaborator

The browser does have a DOM ;)

Collaborator

tmpvar commented Jul 11, 2011

The browser does have a DOM ;)

@Marak

This comment has been minimized.

Show comment
Hide comment
@Marak

Marak Jul 11, 2011

Contributor

I'm pretty sure it doesn't.

Contributor

Marak commented Jul 11, 2011

I'm pretty sure it doesn't.

@tmpvar

This comment has been minimized.

Show comment
Hide comment
@tmpvar

tmpvar Jul 11, 2011

Collaborator

heh, there is a valid use case here though. webworkers do not have access to a dom, jsdom might fill that gap.. not sure what the use case is though.

Collaborator

tmpvar commented Jul 11, 2011

heh, there is a valid use case here though. webworkers do not have access to a dom, jsdom might fill that gap.. not sure what the use case is though.

@Qard

This comment has been minimized.

Show comment
Hide comment

Qard commented Jul 11, 2011

NO U

@JerrySievert

This comment has been minimized.

Show comment
Hide comment
@JerrySievert

JerrySievert Jul 11, 2011

i threw together some benchmarks for this.

i had to simulate the JSDOM in the browser, as it is all theoretical at this point, but figured the benchmarks would still stand on their own.

JSDOM Browser

i threw together some benchmarks for this.

i had to simulate the JSDOM in the browser, as it is all theoretical at this point, but figured the benchmarks would still stand on their own.

JSDOM Browser

@novemberborn

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jul 12, 2011

I'm using JSDOM to parse and compile templates, including HTML parsing. Being able to run that in (a modern) browser would be quite lovely since it saves me having to run a Node server just to get compiled templates.

I'm using JSDOM to parse and compile templates, including HTML parsing. Being able to run that in (a modern) browser would be quite lovely since it saves me having to run a Node server just to get compiled templates.

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 17, 2011

@novemberborn, I'm confused, can you not use jQuery on the browser to achieve such parsing?

@novemberborn, I'm confused, can you not use jQuery on the browser to achieve such parsing?

@novemberborn

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jul 17, 2011

@tommedema innerHTML doesn't parse full HTML syntax, so my guess is no.

@tommedema innerHTML doesn't parse full HTML syntax, so my guess is no.

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 17, 2011

@novemberborn, why do you not simply traverse through all dom elements in the document? $(document).descendents()

@novemberborn, why do you not simply traverse through all dom elements in the document? $(document).descendents()

@jfhbrook

This comment has been minimized.

Show comment
Hide comment
@jfhbrook

jfhbrook Jul 17, 2011

@tommedema @novemberborn It's a bit tough to traverse dom elements without a dom, hence the need for jsdom. Clearly.

@tommedema @novemberborn It's a bit tough to traverse dom elements without a dom, hence the need for jsdom. Clearly.

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 17, 2011

@jesusabdullah, can you explain how one can traverse through all document elements in the browser, using for example jQuery, when this browser does not have a Document Object Model? I am sure you are absolutely correct, I'm just a bit confused as to why browsers do not have a DOM.

@jesusabdullah, can you explain how one can traverse through all document elements in the browser, using for example jQuery, when this browser does not have a Document Object Model? I am sure you are absolutely correct, I'm just a bit confused as to why browsers do not have a DOM.

@jfhbrook

This comment has been minimized.

Show comment
Hide comment
@jfhbrook

jfhbrook Jul 17, 2011

@tommedema Traverse through document elements? Why would you have to do that?

@tommedema Traverse through document elements? Why would you have to do that?

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 17, 2011

@jesusabdullah, I'm not saying you have to do that, I am merely saying you can do that. The question is how one would be able to do such thing if there is no Document Object Model. If this is only possible with a DOM, that directly implies that browsers do have a DOM. This is why I am asking you how this would work.

@jesusabdullah, I'm not saying you have to do that, I am merely saying you can do that. The question is how one would be able to do such thing if there is no Document Object Model. If this is only possible with a DOM, that directly implies that browsers do have a DOM. This is why I am asking you how this would work.

@Marak

This comment has been minimized.

Show comment
Hide comment
@Marak

Marak Jul 17, 2011

Contributor

This started as funny, now I'm not sure anymore.

Contributor

Marak commented Jul 17, 2011

This started as funny, now I'm not sure anymore.

@Marak Marak closed this Jul 17, 2011

@JerrySievert

This comment has been minimized.

Show comment
Hide comment
@JerrySievert

JerrySievert Jul 18, 2011

To be fair, the idea of dom manipulation from web workers is appealing, but I don't think this is the right solution. A bit of thin shimming as a communication layer could do a good job of handling that.

To be fair, the idea of dom manipulation from web workers is appealing, but I don't think this is the right solution. A bit of thin shimming as a communication layer could do a good job of handling that.

@novemberborn

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jul 18, 2011

@Marak, the issue got off-topic by some confusion around jQuery and the use cases. Still, if JSDOM has no native bindings, it'd be lovely if it could work in the browser so you can do more DOM parsing than you could do using innerHTML, with the exact same output as server-side usage of JSDOM would yield.

@Marak, the issue got off-topic by some confusion around jQuery and the use cases. Still, if JSDOM has no native bindings, it'd be lovely if it could work in the browser so you can do more DOM parsing than you could do using innerHTML, with the exact same output as server-side usage of JSDOM would yield.

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 18, 2011

So I guess noone is going to explain how exactly a browser does not have a DOM? :) It's very much on-topic, since this request only makes sense if there is indeed a lack of a DOM (or if jsdom is in any way an improvement to a "browser's DOM" (if existent)).

Even Google talks about browsers having a Document Object Module, see for example http://code.google.com/webtoolkit/doc/latest/DevGuideUiDom.html (Developer's Guide - Accessing the Browser's DOM).

I'm not saying you are wrong, though.

So I guess noone is going to explain how exactly a browser does not have a DOM? :) It's very much on-topic, since this request only makes sense if there is indeed a lack of a DOM (or if jsdom is in any way an improvement to a "browser's DOM" (if existent)).

Even Google talks about browsers having a Document Object Module, see for example http://code.google.com/webtoolkit/doc/latest/DevGuideUiDom.html (Developer's Guide - Accessing the Browser's DOM).

I'm not saying you are wrong, though.

@novemberborn

This comment has been minimized.

Show comment
Hide comment
@novemberborn

novemberborn Jul 18, 2011

@tommedema Yes, the browser has a DOM. I don't think it necessarily exposes utilities to parse arbitrary markup into a DOM tree, especially if that markup may include doctypes, <html> tags, etc. And even if it did, would it give the same output as server-side JSDOM?

My specific use case is using JSDOM to parse a template snippet, which isn't your typical "I need to run JS against a DOM but in Node".

@tommedema Yes, the browser has a DOM. I don't think it necessarily exposes utilities to parse arbitrary markup into a DOM tree, especially if that markup may include doctypes, <html> tags, etc. And even if it did, would it give the same output as server-side JSDOM?

My specific use case is using JSDOM to parse a template snippet, which isn't your typical "I need to run JS against a DOM but in Node".

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Jul 18, 2011

@novemberborn, I see.. that explains. Thank you.

I can see why this would be useful, if you are able to get the exact HTML of a page (you probably have to route it through a server or save it as a static string in your code, as each browser modifies HTML before rendering it). Every

@novemberborn, I see.. that explains. Thank you.

I can see why this would be useful, if you are able to get the exact HTML of a page (you probably have to route it through a server or save it as a static string in your code, as each browser modifies HTML before rendering it). Every

@Morriz

This comment has been minimized.

Show comment
Hide comment
@Morriz

Morriz Aug 23, 2011

Bump.

I am trying to make my node stack work in other js environments as well. Titanium Appcelerator is great for quick and dirty demo's, especially if you only have to code your app once for each environment. So far I have been able to make it work on Node and in the browser. See backbone-everywhere.

I am now missing out on jsdom not being able to be packed with browserify. Real enuf use case for you?

Morriz commented Aug 23, 2011

Bump.

I am trying to make my node stack work in other js environments as well. Titanium Appcelerator is great for quick and dirty demo's, especially if you only have to code your app once for each environment. So far I have been able to make it work on Node and in the browser. See backbone-everywhere.

I am now missing out on jsdom not being able to be packed with browserify. Real enuf use case for you?

@tmpvar

This comment has been minimized.

Show comment
Hide comment
@tmpvar

tmpvar Aug 24, 2011

Collaborator

@Morriz, can you open a separate issue for that? I can definitely see the benefit of being able to run jsdom on multiple platforms. To what extent will need to be resolved though.

Collaborator

tmpvar commented Aug 24, 2011

@Morriz, can you open a separate issue for that? I can definitely see the benefit of being able to run jsdom on multiple platforms. To what extent will need to be resolved though.

@Morriz

This comment has been minimized.

Show comment
Hide comment
@Morriz

Morriz Aug 24, 2011

Sure. I will refer to 'other javascript server environments'.

Morriz commented Aug 24, 2011

Sure. I will refer to 'other javascript server environments'.

@davidmarkclements

This comment has been minimized.

Show comment
Hide comment
@davidmarkclements

davidmarkclements Apr 22, 2012

I have a use case for jsdom in the browser,

img src tags are not fetched if by wrapped in noscript tags (e.g. lazy loading, responsive images), because the contents of noscript tags are not added to the dom

we can extract (with some difficulty on some browsers) the contents of the noscript tags - it would be great it we could interact with content of the noscript tags as dom elements (e.g. alter the src attribute for img tags that have a certain classname) without making them part of the dom (which would of course, begin to load the src URIs).

I have a use case for jsdom in the browser,

img src tags are not fetched if by wrapped in noscript tags (e.g. lazy loading, responsive images), because the contents of noscript tags are not added to the dom

we can extract (with some difficulty on some browsers) the contents of the noscript tags - it would be great it we could interact with content of the noscript tags as dom elements (e.g. alter the src attribute for img tags that have a certain classname) without making them part of the dom (which would of course, begin to load the src URIs).

@btakita

This comment has been minimized.

Show comment
Hide comment
@btakita

btakita Feb 26, 2013

I have a use case. I'm using browserbuild & TDDing using Jasmine. I'm running the tests in node.js for quick development, & running the browser version of Jasmine on CI.

I'd like to be able to use a consistent api on both the node.js server & browser. I can build a shim of some type for now, but it would be great to have it supported.

btakita commented Feb 26, 2013

I have a use case. I'm using browserbuild & TDDing using Jasmine. I'm running the tests in node.js for quick development, & running the browser version of Jasmine on CI.

I'd like to be able to use a consistent api on both the node.js server & browser. I can build a shim of some type for now, but it would be great to have it supported.

@rattrayalex

This comment has been minimized.

Show comment
Hide comment
@rattrayalex

rattrayalex Oct 10, 2014

Contributor

In my case, I am using browserify to use libraries that call jsdom as a dependency. So while I can replace the call to jsdom with a simple window.document, I now will have to submit a PR to the library to handle the browser separately, since it doesn't have jsdom's API (eg; childNodes._toArray())

Contributor

rattrayalex commented Oct 10, 2014

In my case, I am using browserify to use libraries that call jsdom as a dependency. So while I can replace the call to jsdom with a simple window.document, I now will have to submit a PR to the library to handle the browser separately, since it doesn't have jsdom's API (eg; childNodes._toArray())

@domenic

This comment has been minimized.

Show comment
Hide comment
@domenic

domenic Oct 10, 2014

Member

jsdom works in the browser with browserify now

Member

domenic commented Oct 10, 2014

jsdom works in the browser with browserify now

@rattrayalex

This comment has been minimized.

Show comment
Hide comment
@rattrayalex

rattrayalex Oct 10, 2014

Contributor

Ah, awesome. Looks like it (almost) does (though you have to run npm install in the jsdom dir inside your node_modules due to reqs being in devDependencies).

But I'm running into an issue with module.parent being undefined (line 61 in jsdom.js of release 1.0.1, appears to be in master too). Not sure if this is user error or what. But I don't believe browserify supports module.parent since it's maybe deprecated? see browserify/browserify#41

Contributor

rattrayalex commented Oct 10, 2014

Ah, awesome. Looks like it (almost) does (though you have to run npm install in the jsdom dir inside your node_modules due to reqs being in devDependencies).

But I'm running into an issue with module.parent being undefined (line 61 in jsdom.js of release 1.0.1, appears to be in master too). Not sure if this is user error or what. But I don't believe browserify supports module.parent since it's maybe deprecated? see browserify/browserify#41

@rattrayalex rattrayalex referenced this issue in browserify/browserify Oct 10, 2014

Closed

Implement module.parent so Socket.io can work #41

@domenic

This comment has been minimized.

Show comment
Hide comment
@domenic

domenic Oct 10, 2014

Member

@rattrayalex can you open two issues for those things, with repro preferably? jsdom should work out of the box browserified; we even have tests running on Sauce Labs against it.

Member

domenic commented Oct 10, 2014

@rattrayalex can you open two issues for those things, with repro preferably? jsdom should work out of the box browserified; we even have tests running on Sauce Labs against it.

@rattrayalex

This comment has been minimized.

Show comment
Hide comment
@rattrayalex

rattrayalex Oct 10, 2014

Contributor

Huh k will do.
On Oct 10, 2014 10:00 PM, "Domenic Denicola" notifications@github.com
wrote:

@rattrayalex https://github.com/rattrayalex can you open two issues for
those things, with repro preferably? jsdom should work out of the box
browserified; we even have tests running on Sauce Labs against it.


Reply to this email directly or view it on GitHub
#245 (comment).

Contributor

rattrayalex commented Oct 10, 2014

Huh k will do.
On Oct 10, 2014 10:00 PM, "Domenic Denicola" notifications@github.com
wrote:

@rattrayalex https://github.com/rattrayalex can you open two issues for
those things, with repro preferably? jsdom should work out of the box
browserified; we even have tests running on Sauce Labs against it.


Reply to this email directly or view it on GitHub
#245 (comment).

@danvitoriano

This comment has been minimized.

Show comment
Hide comment
@danvitoriano

danvitoriano Jul 29, 2016

Any update on this issue? I'm facing the same problem with require on browserify. Tks!

Any update on this issue? I'm facing the same problem with require on browserify. Tks!

@domenic

This comment has been minimized.

Show comment
Hide comment
@domenic

domenic Jul 30, 2016

Member

Nobody had provided a separate issue with repro steps. Our CI runs jsdom in the browser using browserify every day so it probably is not broken.

Member

domenic commented Jul 30, 2016

Nobody had provided a separate issue with repro steps. Our CI runs jsdom in the browser using browserify every day so it probably is not broken.

@bogas04

This comment has been minimized.

Show comment
Hide comment
@bogas04

bogas04 Oct 27, 2016

It's 2016, can browsers get their DOM now ?

bogas04 commented Oct 27, 2016

It's 2016, can browsers get their DOM now ?

@Joris-van-der-Wel

This comment has been minimized.

Show comment
Hide comment
@Joris-van-der-Wel

Joris-van-der-Wel Oct 27, 2016

Collaborator

sure, jsdom even works in Web Workers

Collaborator

Joris-van-der-Wel commented Oct 27, 2016

sure, jsdom even works in Web Workers

@bogas04

This comment has been minimized.

Show comment
Hide comment
@bogas04

bogas04 Oct 27, 2016

@Joris-van-der-Wel only for browserify bundles or even for webpack ? Coz I'm getting fs module not found when I use it in one of my module

bogas04 commented Oct 27, 2016

@Joris-van-der-Wel only for browserify bundles or even for webpack ? Coz I'm getting fs module not found when I use it in one of my module

@Joris-van-der-Wel

This comment has been minimized.

Show comment
Hide comment
@Joris-van-der-Wel

Joris-van-der-Wel Oct 27, 2016

Collaborator

We only test (CI) jsdom with browserify at the moment, I've never tried webpack. browserify automatically translates node.js core modules to a browser equivalent, which is what jsdom expects. I am not sure if webpack supports that.

However you could use browserify to generate a standalone bundle of jsdom (the generated bundle will try to detect what module system you are using), and then include that in webpack.

Here is something that you can try:

browserify -r jsdom -s jsdom -o jsdom.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jsdom.js"></script>
    </head>
    <body>
        <p>hi</p>
    </body>
</html>

Now open the developer tools in chrome, and you can try typing something like jsdom.jsdom('<div>foo</div>').documentElement.outerHTML in the console

Collaborator

Joris-van-der-Wel commented Oct 27, 2016

We only test (CI) jsdom with browserify at the moment, I've never tried webpack. browserify automatically translates node.js core modules to a browser equivalent, which is what jsdom expects. I am not sure if webpack supports that.

However you could use browserify to generate a standalone bundle of jsdom (the generated bundle will try to detect what module system you are using), and then include that in webpack.

Here is something that you can try:

browserify -r jsdom -s jsdom -o jsdom.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jsdom.js"></script>
    </head>
    <body>
        <p>hi</p>
    </body>
</html>

Now open the developer tools in chrome, and you can try typing something like jsdom.jsdom('<div>foo</div>').documentElement.outerHTML in the console

@bogas04

This comment has been minimized.

Show comment
Hide comment
@bogas04

bogas04 Oct 27, 2016

bogas04 commented Oct 27, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment