search

choojs / nanohtml

:dragon: HTML template strings for the Browser with support for Server Side Rendering in Node.
MIT License
686 stars 49 forks source link

add server-side hyperscript support #127

Closed ungoldman closed 6 years ago

ungoldman commented 6 years ago

Hello! 👋

I'd very much like to help encourage interoperability between the bel/nanohtml and hyperscript ecosystems. In the browser, there are no issues, but in a node environment, some implementation details between pelo/nanohtml/lib/server.js and create-element make things a little trickier.

When trying to render a hyperscript element inside of a nanohtml statement, I get the following error:

$ node example.js
/Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:61
    return Object.keys(value).reduce(function (str, key, i) {
                              ^

RangeError: Maximum call stack size exceeded
    at Array.reduce (<anonymous>)
    at handleValue (/Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:61:31)
    at /Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:71:21
    at Array.reduce (<anonymous>)
    at handleValue (/Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:61:31)
    at /Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:71:21
    at Array.reduce (<anonymous>)
    at handleValue (/Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:61:31)
    at /Users/ng/dev/modules/hyperaxe/node_modules/nanohtml/lib/server.js:71:21
    at Array.reduce (<anonymous>)

With the addition of a single line check for an outerHTML property, the issue is resolved.

$ node example.js

    <body>
     <h1>count is 0</h1>
     <button>Increment</button>
    </body>

Would maintainers be open to including this line in nanohtml for the sake of interoperability?

Note: sorry the commit message has an extra word, can be fixed with squash merge.