render outside of target

benzen commented 6 years ago

Here is an exemple

<html>
  <head>
    <script src="/js/magery-compiler.js"></script>
    <script src="/js/magery-patcher.js"></script>
    <script src="/js/redux.js"></script>
    <template data-tagname="app-title">
      <h1>{{text}}</h1>
    </template>
  </head>
  <body>
    <app></app>

    <script>
      var components = MageryCompiler.compile('template');

      // create a store
      var store = Redux.createStore(function (state, action) {
          if (typeof state === 'undefined') {
            return {
              title: "fuck mennn",
              count: 0
            };
           }
           switch (action.type) {
            case 'INCREMENT':
              return {count: state.count + 1};
            case 'DECREMENT':
              return {count: state.count - 1};
            default:
              return state;
           }
       });

       var target = document.querySelector('app');
       var handlers = {};

       function render() {
          console.log(store.getState())
          components['app-title'](target, store.getState(), handlers);
       }

       // add event handlers using Magery
       handlers.increment = function () {
           store.dispatch({type: 'INCREMENT'});
       };
       handlers.decrement = function () {
           store.dispatch({type: 'DECREMENT'});
       };

       // update the page when the store changes
       store.subscribe(render);

       // initial render
       render();
    </script>
  </body>
</html>

I've noticed that in the produced dom, the tree rendered by outside ouf the target

<html><head>
...
    <template data-tagname="app-title">
      <h1>{{text}}</h1>
    </template>
  </head>
  <body>
    <app-title>
      <h1></h1>
    </app-title><app></app>
    <script>
...

</body></html>

benzen commented 6 years ago

What i see as a side effect of this, a second render will produce a new tree

caolan commented 6 years ago

This appears to happen when the tag names are mismatched. So when the target does not match the template tag being rendered onto it. I'm not sure what the appropriate action is in this case, but it should not render a new adjacent tree... perhaps it should just produce an error.

benzen commented 6 years ago

Totally agreed

Benjamin Dreux

Le 8 janv. 2018 à 16:38, Caolan McMahon notifications@github.com a écrit :

This appears to happen when the tag names are mismatched. So when the target does not match the template tag being rendered onto it. I'm not sure what the appropriate action is in this case, but it should not render a new adjacent tree... perhaps it should just produce an error.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

caolan / magery

render outside of target #5