search

Raynos / dom-delegator

Decorate elements with delegated events
MIT License
58 stars 16 forks source link

Independent Delegators #31

Open luskabg opened 7 years ago

luskabg commented 7 years ago

Suppose we have a method similar to hg.app:

function create_app(container_element_id, app_state, app_render, opts) {
  var container_element = document.getElementById(container_element_id);

  var delegator_opts = Object.assign({}, opts, {
    "document": container_element
  });

  hg.Delegator(delegator_opts);

  var loop = hg.main(app_state(), app_render, Object.assign({
    diff: hg.diff,
    create: hg.create,
    patch: hg.patch
  }, opts));

  container_element.appendChild(loop.target);

  return app_state(loop.update);
}

where options objects used to initialize delegator and main loop are not the same. Also, delegator_opts.document is just a regular DOM node.

Having HTML such as:

  <body>
    <table>
      <tr>
        <td><div id="app_container_1"></div></td>
        <td><div id="app_container_2"></div></td>
      </tr>
    </table>
  </body>

we are able to bootstrap 2 different application instances (2 vdom instances, 2 DOM subtrees):

create_app("app_container_1", App(), App.render);
create_app("app_container_2", App(), App.render);

I have tested this code using mercury's login-form example (where the only code change is a call to create_app instead of hg.app) and it seems to be working (forms behave as separate widgets).

Is there any issues in using mercury this way?