marko-js / marko

A declarative, HTML-based language that makes building web apps fun
https://markojs.com/
MIT License
13.25k stars 643 forks source link

replaceChildrenOf seem to create an infinite loop #507

Closed Primajin closed 7 years ago

Primajin commented 7 years ago

Bug Report

Context

Using latest marko 4 beta 8, I want to render a component that uses the await tag - purely in the browser. The component is built according to http://markojs.com/try-online/#Async_Await

var template = require('./template.marko');

module.exports = function(input, out) {
  template.render({
    userDataProvider: function(args, callback) {
      var backThen = Date.now();
      console.log('renderer.js:6 - starting...');
      setTimeout(function() {
        console.log('renderer.js:9 - done', Date.now() - backThen);
        callback(null, {
          firstName: 'John',
          lastName: 'Doe',
          age: 50
        });
      }, 2500);
    }
  }, out);
};

while being required by a simple index page that collects all the components (currently just one)

var template = require('./index.marko');

template.render({}, function(err, result) {
  result.replaceChildrenOf(document.getElementById('root'));
});

which itself is injected via lasso 2.8.4 / lasso-cli 2.0.6 / lasso-marko 2.2.0 into a simple index.html file.

Checkout https://github.com/Primajin/markojs-4-clientside as a reference.

Expected Behavior

Template should render asynchronously after 2,5 seconds.

Actual Behavior

Tab / Browser uses 99% of CPU, can only be killed by taskmanager. Smells like an infinite loop.

Possible Fix

instead of using replaceChildrenOf use appendTo

var template = require('./index.marko');

template.render({}, function(err, result) {
  result.appendTo(document.getElementById('root'));
});
Additional Info ### Your Environment * Version used: 4.0.0-beta.8 * Environment name and version (e.g. Chrome 39, node.js 5.4): Chrome Version 57.0.2972.0 (Offizieller Build) **canary** (64-Bit) * Operating System and version (desktop or mobile): Desktop MBP 10.12.2 (Sierra) * Link to your project: https://github.com/Primajin/markojs-4-clientside ### Steps to Reproduce 1. Check out my project 2. `npm install` 3. switch lines 4 and 6 in `src/index.js` 4. `npm run build` 5. open `index.html` in your browser
westtrade commented 7 years ago

I think it's duplicate of https://github.com/marko-js/marko/pull/505

patrick-steele-idem commented 7 years ago

New version published with fix: marko@4.0.0-beta.10