featurist / hyperdom

A fast, feature rich and simple framework for building dynamic browser applications.

hyperdom

A simple, fast, feature rich framework for building dynamic browser applications.

Hyperdom supports a simple event-update-render cycle, promises for asynchronous operations, JSX, non-JSX, typescript, client-side routing, SVG, two-way data binding, server-side rendering, and optimises for performance, developer usability and simplicity of application architecture.

Hyperdom is influenced by react and uses virtual-dom for the DOM patching. Unlike react though, there is no need for state management libraries (this problem simply does not exist in hyperdom), the API is compact and the routing is built in.

Documentation - https://hyperdom.org

We're Hiring!

Join our remote team and help us build amazing software. Check out our career opportunities.

Sponsored by:

.

hyperdom's Issues

`appendVDom` need real dom

This code

hyperdom.appendVDom(h('div'), {render: () => 'hello'})

Fails with

     ReferenceError: window is not defined
      at new Mount (node_modules/hyperdom/mount.js:10:44)
      at start (node_modules/hyperdom/rendering.js:64:15)
      at startAttachment (node_modules/hyperdom/rendering.js:56:12)
      at Object.exports.appendVDom (node_modules/hyperdom/rendering.js:34:10)
      at Context.<anonymous> (test/hyperdomIntegrationSpec.js:44:14)

Looks as if deep down hyperdom relies on real window and document being available.

Examples should be ViewModel ones

The README examples should be ViewModel examples now, right?

Requirebin examples need updating

...to hyperdom instead of plastiq

Why does plastiq.rawHtml create an element?

The mithril approach seems nicer to me:

m("div", "&times;") //becomes <div>&amp;times;</div>
m("div", m.trust("&times;")) //becomes <div>&times;</div>

catch for all event handlers that return promises?

I wondered whether it might be handy to include a mechanism for giving plastiq a catch block for unhandled rejection of promises returned by event handlers. There's an argument that we already have a global way of doing this (window.addEventListener('unhandledrejection', ...) but it doesn't work very well, or in a non-window environment. Or do you think this is userland responsibility?

Latest version is not on CDN

Is this a manual process?

https://cdnjs.com/libraries/plastiq

better examples

The examples should use both jsx and the h api. Please default to the jsx as it is quite a lot easier to understand.

Server-side rendering

Just adding this so it's not an afterthought! ...which it is, already, to some extent

hyperdom.html("a.z") makes <a.z> not <a class="z">

I think this is a regression, i.e. an old plastiq.html("a.z") would have created <a class="z">

joshski/bloom-editor@2a891eb

there is no "component model"

...still appears near the end of README and seems odd after the explanation about components.

Plastiq does have a "component model" now, right?

router history parameter?

master mocha tests are failing because there is no window in the new history abstraction.

A router is currently defined like this:

h('div',
   router(
      router.page('/', function () {})
   )
)

So I was wondering, since both router and router.page need access to the history abstraction, do you see it as a global thing?

This might be better:

var router = plastiq.router({ history: myHistoryApi });

...

h('div',
   router(
      router.page('/', function () {})
   )
)

wdyt?

Use the text of a select option in binding, when no value attr

I.e. this should work:

<select binding={model.colour}>
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

hyperx

it would be cool if hyperdom had integration with hyperx so you could do something like this:

var hx = require('hyperdom/hx')

`<>` container

React has this nice syntax:

<>
  <h1>header</h1>
  <div>stuff</div>
</>

hyperdom could do with the same?

Benchmark

Hi,

I've updated a benchmark to include your framework but I know it can do better since I don't use any components. I've tried but failed :(

If you can take a look, it would be very helpful.

repository - results

Thx

requirebin links in readme still mention plastiq

And changing them to hyperdom doesn't seem to work. Any idea why?

WebComponents

I'd like to use WebComponents when building my apps. Can I use hyperdom to create a WebComponent?

Benchmarks

Be nice to see how plastiq is shaping up next to others...

http://vdom-benchmark.github.io/vdom-benchmark/

gh-pages mobile scrolling is broken

Router memory implementation

For isolated testing. Maybe even use this? https://www.npmjs.com/package/history

custom data html attributes

Hi! and thank you all for working on this great framework.

I'm trying it out to set a custom data and contenteditable attribute but not sure if i'm doing something wrong. This is not working for me:

h('span', { 'data-type':'somethingHere', 'contenteditable': true }, 'name: ', model.name);

Anyhow, I'll check the source code to check what's going on.

Thank you very much!

Surprising selector behaviour

I expected hyperdom.html('div.foo div', hyperdom.html('input[type=submit]')) to generate:

<div class="foo"><div><input type="submit"></div></div>

...but it generates:

<div.foo><div><input></div></div.foo>

http://requirebin.com/?gist=b6fdb8131c9c8d451863b41a6558d727

I guess JSX users aren't too bothered about this :) so do we care? happy to have a go at fixing it if so, otherwise we should probably document the limitations.

Input binding not working with iOS Chrome autofill

If you have a form that uses Hyperdom's binding (which I assume listens to the input's onchange event) and then fill that form with iOS Chrome's autofill, the onchange event doesn't get fired when the input is filled. So it looks like it's filled but when you proceed to next input you can see it hasn't:

Not sure this is a Hyperdom issue really, same probably happens in React/Angular etc. Possibly related Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=352527

Have you come across this on other Hyperdom forms when you try to use Autofill?

Note: I don't get this issue on macOS Chrome.

route.isActive not working in some cases?

I have home = router.route('/') and a "Home" tab that is active when home.isActive(). It works like this:

However, I was also expecting it'd keep the tab active when there are query string params in the url. However:

Plastiq doesn't really have components

The line "Plastiq doesn't really have components" in the readme is a bit odd, now that plastiq has components.

Intermittent component test failure

✖ 1 tests failed

FAILED TESTS:
  plastiq
    plastiq.html.component
      ✖ receives onadd, onupdate and onremove events after the DOM changes have been made
        Safari 8.0.2 (Mac OS X 10.10.1)
      expected [ Array(3) ] to deeply equal [ Array(4) ]
      assert@/var/folders/73/bzkk_vlj12j69_4p5b9g405h0000gn/T/5abf0f2cad7bd00e27046f948369e65c3f2ac345.browserify:317:67 <- node_modules/chai/lib/chai/assertion.js:115:0
      assertEql@/var/folders/73/bzkk_vlj12j69_4p5b9g405h0000gn/T/5abf0f2cad7bd00e27046f948369e65c3f2ac345.browserify:852:16 <- node_modules/chai/lib/chai/core/assertions.js:461:0
      /var/folders/73/bzkk_vlj12j69_4p5b9g405h0000gn/T/5abf0f2cad7bd00e27046f948369e65c3f2ac345.browserify:3057:30 <- node_modules/chai/lib/chai/utils/addMethod.js:40:0
      /var/folders/73/bzkk_vlj12j69_4p5b9g405h0000gn/T/5abf0f2cad7bd00e27046f948369e65c3f2ac345.browserify:23860:40 <- test/karma/plastiqSpec.js:454:0
      PromiseResolutionHandlerFunction@[native code]