Light

redom / nodom Goto Github PK

View Code? Open in Web Editor NEW

150.0 7.0 13.0 533 KB

fake DOM for RE:DOM

License: ISC License

JavaScript 100.00%

fake dom nodejs javascript redom

nodom's Introduction

Develop web applications with 100% JavaScript and web standards. 🚀

RE:DOM is a tiny (2 KB) UI library by Juha Lindstedt and contributors, which adds some useful helpers to create DOM elements and keeping them in sync with the data.

Because RE:DOM is so close to the metal and doesn't use virtual dom, it's actually faster and uses less memory than almost all virtual dom based libraries, including React (benchmark).

It's also easy to create reusable components with RE:DOM.

Another great benefit is, that you can use just pure JavaScript, so no complicated templating languages to learn and hassle with.

Supporting RE:DOM

RE:DOM is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers.

If you'd like to join them, please consider:

Become a backer or sponsor on Open Collective.

Installation

# Using npm
npm install redom

# Using Yarn
yarn add redom

Documentation

To check out live examples and docs, visit RE:DOM.

Questions

For questions and support please use community chat.

Tools

Performance

RE:DOM is one of the fastest UI libraries out there.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Please make sure to read the Contributing Guide before making a pull request.
Thank you to all the people who already contributed to RE:DOM!

License

Copyright (c) 2016-present, Juha Lindstedt and contributors

nodom's People

Contributors

Stargazers

Watchers

Forkers

whindes ptytb ixti brodycj havunen miniflycn latexforpiano jmaguirrei marconi1992 bvanheu joona shubhamsainiforcebolt

nodom's Issues

Problems with SSR

Discussion in Slack:

[22m] joona https://gist.github.com/joona/c6e6f31f40363adbdeee43393ed76f35 -- here's a code snippet which points out the problem on SSR with NO:DOM
[20m] joona also, added the output
[19m] pakastin Ping @nikcorg 😉
[19m] joona I also tried to hack with this to get it working with tools like rewrite.
[18m] joona so I initialized window and document seprately and injected them view rewrite to the included RE:DOM module. I also tried to do reset method to reset the dom after every render, but any of those did not quite work
[17m] pakastin :redom: Do you have ideas how we could fix the issue..?
[16m] pakastin They’re globals in client-side as well, so it’s a bit tricky..
[16m] pakastin :redom: But of course it’s possible to test if window is around or not..
[15m] pakastin ..but what to do if not?
[15m] joona I guess the easiest would be to wrap redom into factory function and inject runtime values for document and window. I don't see that this can be fixed with only changing NO:DOM though...
[14m] pakastin That might work
[14m] pakastin :redom: Maybe NO:DOM could provide a factory?
[12m] joona yeah, that as well. NO:DOM also currently "leaks" previous state on the next it's "initialized". Which is of course result of the nodejs module caching
[12m] joona so I guess both would need a way to initialized them from factory
[10m] pakastin Yeah it’s a bit broken atm
[5m] joona yeah, which is understandable, because it's written for running tests and there this doesn't necessarily bite you
[<1m] nikcorg I’ll make make this into an issue and have a look later.

Attributes not attached to the nodes

I found HTML not generating the attributes, for example:

This:

mount(document.body, el('h1', { id: 'x', style: 'cursor: pointer;' }, 'Hello world!'));
console.log(document.body.outerHTML);

Give me this output

<body><h1>Hello world!</h1></body>

Initialized as

const { Document, SVGElement } = require('nodom');
global.document = new Document();
global.SVGElement = SVGElement;

JSDOM seems to do the same job correctly.

special element types

i.e. inputElement.focus() doesn't work. Should we at least make special element types, which you could import from 'nodom' and extend (adding methods to prototype)?

Since we're using ES2015, we should also use classes

For example here: https://github.com/pakastin/nodom/blob/master/lib/htmlelement.js#L31

Classes are supported since Node v4, so they should be ok to use:
http://node.green

className doesn't stay in sync with classList

Adding setter+getter to .className should do the trick..

Add support for web components

registerElement
connectedCallback
extend
...

Release a new version

@pakastin, could you please release a new version?

Duplicated Attributes for created SVG elements

I've been testing creating SVG and found an issue with attributes being duplicated.

const document = new nodom.Document();

let svg = document.createElement("svg");

svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
svg.setAttribute("viewBox", "0 0 500 500");

console.log(svg.outerHTML);

Will result in :

<svg width="100%" height="100%" viewBox="0 0 500 500" width="100%" height="100%" viewBox="0 0 500 500"></svg>

Better dom-alikeness?

I understand that nodom is sort of internal utility belt for re:dom, but I would like to use it for my testing purposes (where I can't use neither phantomjs, nor jsdom). So far all works great and as expected for me except that it has some issues:

tagName is lower-cased while according to specs it should be either as is (XML) or upcased (HTML)
missing nodeName
document does not have childNodes getter.

I'm fine to work on PR, but would like to know if changes like the above are ever have chances to be merged in.

document/element queries

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.

Jobs