JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://canjs.com/release/master/can.jquery.js"></script>
<script src="https://canjs.com/release/master/can.map.define.js"></script>
Open your console to view the issue. If the assertion passes you will see <b>nothing</b> in the console. When the assertion fails, you will see an error message.

JavaScript

console.clear();
var MyClass = function () {};
var ViewModel = can.Map.extend({
	define: {
  	pageModulePromise: {
    	get: function (lastVal, setAttr) {
      	var self = this;
      	return new Promise(function (resolve) {
        	setTimeout(function () {
            self.attr("pageModule", MyClass);
          	resolve(MyClass);
          }, 1000)
        })
      }
    },
  	pageModule: {
    	value: "foo-bar",
      serialize: false
    }
  }
});

var instance = new ViewModel();
// comment out the following line and the problem goes away
can.route.map(instance);
instance.attr("pageModulePromise").then(function () {
	var PageModule = instance.attr("pageModule")
	console.assert(typeof PageModule === "function", "PageModule should be a function");
});