1. 14
  1.  

  2. 4

    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:

    sweetiekit-dom http://github.com/sweetiebird/sweetiekit-dom

    The sweetiekit-dom package provides a full browser API in pure JS: window, document, navigator, etc.

    Why is sweetiekit-dom different from projects like jsdom? https://www.npmjs.com/package/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: https://github.com/sweetiebird/sweetiekit-dom/issues

    Credits

    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

    Demo

    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:

    1. $ npm install sweetiekit-dom
    2. save this file to index.js: https://gist.github.com/shawwn/016ea51710f5624062d21a366d0c4f5f
    3. $ node index.js
      1. 3

        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.