Here it is as a gist instead of a repl.it link: https://gist.github.com/shawwn/016ea51710f5624062d21a366d0c4f5f
Here’s the description, in case anyone’s reading this via email:
The sweetiekit-dom package provides a full
browser API in pure JS: window, document,
Why is sweetiekit-dom different from projects like jsdom?
jsdom is a great DOM implementation, but it’s
not a complete browser implementation.
Suppose you have a project that uses webpack hot
reloading. Normally, you would run yarn start
to start up webpack’s dev server, then you’d
open http://localhost:8080 in Chrome or FireFox.
Whenever you make changes to your project,
you’ll see that change happen in your browser.
Using sweetiekit-dom, you can do the same thing
in NodeJS: simply load http://localhost:8080 and
sweetiekit-dom will take care of maintaining a
persistent websocket connection, reloading the
page when hot patching fails, etc.
In short, the behavior of sweetiekit-dom is
identical to Chrome and Firefox for any
arbitrary URL. If you notice a difference,
please file an issue:
sweetiekit-dom originated from Exokit, a mixed
reality browser engine in JS: https://exokit.org
Almost all of the work was done by Avaer Kazmer
aka @modulesio: http://github.com/modulesio
This demo loads the front page of Hacker News
and prints the top 30 stories. The stories are
extracted using nothing but the standard DOM
interface defined by the HTML spec.
To run this yourself:
For certain, small values of full.
Good point. I should have emphasized that we don’t try to do layout, nor do we apply CSS selectors.
It would be possible to do layout by using Yoga, which is what React Native does: https://github.com/facebook/yoga
If anyone knows of a library designed to take a .css file as input and give a list of DOM mutations as output, let me know. It feels like the type of problem that someone has already solved. Otherwise, I plan to write such a library and then use it here.
On the other hand, it’s remarkable how far this small DOM implementation can get you. It seems to be able to run most real-world React websites, for example.